From 88dc7e02a4d7b378c8063a7575a684f0b7592526 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Mon, 19 Jan 2026 21:02:24 +0800
Subject: [PATCH] feat: improve onboarding and copy ux

---
 config/uploads.py                             |   2 +-
 static/icons/flask-conical.svg                |   1 +
 static/icons/graduation-cap.svg               |   1 +
 static/index.html                             |   8 +-
 .../personalization/ExperienceOnboarding.vue  | 195 ++++++++++++++++++
 .../styles/components/chat/_chat-area.scss    |   6 +
 6 files changed, 211 insertions(+), 2 deletions(-)
 create mode 100644 static/icons/flask-conical.svg
 create mode 100644 static/icons/graduation-cap.svg
 create mode 100644 static/src/components/personalization/ExperienceOnboarding.vue

diff --git a/config/uploads.py b/config/uploads.py
index 9555c1f..98b1321 100644
--- a/config/uploads.py
+++ b/config/uploads.py
@@ -4,7 +4,7 @@ import os
 import shlex
 
 _DEFAULT_ALLOWED_EXTENSIONS = (
-    ".txt,.md,.rst,.py,.js,.ts,.json,.yml,.yaml,.ini,.cfg,.conf,"
+    ".txt,.md,.rst,.py,.js,.ts,.json,.yml,.yaml,.ini,.cfg,.conf,.ipynb"
     ".csv,.tsv,.log,.mdx,.env,.sh,.bat,.ps1,.sql,.html,.css,"
     ".svg,.png,.jpg,.jpeg,.gif,.bmp,.webp,.ico,.pdf,.pptx,.docx,"
     ".xlsx,.mp3,.wav,.flac,.mp4,.mov,.mkv,.avi,.webm,"
diff --git a/static/icons/flask-conical.svg b/static/icons/flask-conical.svg
new file mode 100644
index 0000000..90ad9ea
--- /dev/null
+++ b/static/icons/flask-conical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:1;"><path fill="none"     d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2M6.453 15h11.094M8.5 2h7"/></svg>
\ No newline at end of file
diff --git a/static/icons/graduation-cap.svg b/static/icons/graduation-cap.svg
new file mode 100644
index 0000000..c0d186b
--- /dev/null
+++ b/static/icons/graduation-cap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:1;"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>
\ No newline at end of file
diff --git a/static/index.html b/static/index.html
index 56689c0..417ddf1 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,12 +12,18 @@
         <div id="app"></div>
         <script>
         // 全局复制代码块函数
+        function decodeHtmlEntities(text) {
+            const textarea = document.createElement('textarea');
+            textarea.innerHTML = text || '';
+            return textarea.value;
+        }
         function copyCodeBlock(blockId) {
             const codeElement = document.querySelector(`[data-code-id="${blockId}"]`);
             if (!codeElement) return;
             const button = document.querySelector(`[data-code="${blockId}"]`);
             if (button && button.classList.contains('copied')) return;
-            const codeContent = codeElement?.dataset?.originalCode || codeElement?.textContent || '';
+            const raw = codeElement?.dataset?.originalCode || codeElement?.textContent || '';
+            const codeContent = decodeHtmlEntities(raw);
             if (!button) {
                 navigator.clipboard.writeText(codeContent).catch((err) => console.error('复制失败:', err));
                 return;
diff --git a/static/src/components/personalization/ExperienceOnboarding.vue b/static/src/components/personalization/ExperienceOnboarding.vue
new file mode 100644
index 0000000..416899c
--- /dev/null
+++ b/static/src/components/personalization/ExperienceOnboarding.vue
@@ -0,0 +1,195 @@
+<template>
+  <transition name="overlay-fade">
+    <div v-if="open" class="exp-overlay">
+      <div class="exp-card">
+        <div class="exp-header">
+          <div>
+            <div class="title">第一次使用？选择适合您的模式</div>
+            <div class="subtitle">速度、联网与工具范围各不相同，随时可在个人空间切换。</div>
+          </div>
+          <button class="confirm-btn" type="button" @click="confirmSelection">确认并开始</button>
+        </div>
+        <div class="grid">
+          <div
+            v-for="item in modes"
+            :key="item.id"
+            class="mode-card"
+            :class="{ active: selected === item.id }"
+            @click="selected = item.id"
+          >
+            <div class="badge">{{ item.badge }}</div>
+            <div class="icon" v-html="item.icon" aria-hidden="true"></div>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.desc }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+type Mode = 'fast' | 'thinking' | 'research' | 'expert';
+
+const props = defineProps<{
+  open: boolean;
+  initial?: Mode;
+}>();
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+  (event: 'confirm', mode: Mode): void;
+}>();
+
+const selected = ref<Mode>(props.initial || 'fast');
+
+watch(
+  () => props.initial,
+  (val) => {
+    if (val) selected.value = val;
+  }
+);
+
+const modes = [
+  {
+    id: 'fast',
+    badge: '极速',
+    title: '快速回答',
+    desc: '快速回答您的问题，会上网搜索，不会写文件。',
+    icon: `<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><path d="M13 2 5 14h6l-2 8 10-12h-6z"/></svg>`
+  },
+  {
+    id: 'thinking',
+    badge: '思考',
+    title: '思考后再答',
+    desc: '经过思考后完成任务，会上网搜索，不会写文件，回复时间较长。',
+    icon: `<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/></svg>`
+  },
+  {
+    id: 'research',
+    badge: '研究',
+    title: '多步骤研究',
+    desc: '多步骤思考与 20+ 工具完成复杂任务，回复时间可能很长。',
+    icon: `<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><path d="M9 3v5l-4 9a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 17l-4-9V3"/><path d="M9 8h6"/></svg>`
+  },
+  {
+    id: 'expert',
+    badge: '专家',
+    title: '全功能探索',
+    desc: '自由探索所有配置选项，适合智能体专家与从业者。',
+    icon: `<svg viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2"><path d="M3 9 12 5l9 4-9 4-9-4Z"/><path d="M6 10v5c0 .6.4 1.2 1 1.4l5 2.1 5-2.1c.6-.2 1-.8 1-1.4v-5"/><path d="M12 13v6"/></svg>`
+  }
+] as const;
+
+function confirmSelection() {
+  emit('confirm', selected.value);
+  emit('close');
+}
+</script>
+
+<style scoped>
+.exp-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(33, 24, 14, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 1200;
+}
+.exp-card {
+  width: min(1100px, 96vw);
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 18px;
+  padding: 24px 28px;
+  box-shadow: 0 20px 50px rgba(33, 24, 14, 0.25);
+  border: 1px solid rgba(118, 103, 84, 0.25);
+}
+.exp-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 18px;
+  gap: 12px;
+}
+.title {
+  font-size: 22px;
+  color: #3d3929;
+  font-weight: 700;
+}
+.subtitle {
+  font-size: 14px;
+  color: #7f7766;
+}
+.confirm-btn {
+  border: none;
+  background: #da7756;
+  color: #fff;
+  border-radius: 12px;
+  padding: 10px 18px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+.mode-card {
+  border: 1px solid rgba(118, 103, 84, 0.25);
+  border-radius: 14px;
+  padding: 16px 14px;
+  cursor: pointer;
+  transition: .2s ease;
+  box-shadow: 0 8px 18px rgba(61, 57, 41, 0.06);
+  background: #fff;
+}
+.mode-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 30px rgba(61, 57, 41, 0.12);
+}
+.mode-card.active {
+  border-color: #da7756;
+  box-shadow: 0 18px 36px rgba(218, 119, 86, 0.25);
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #bd5d3a;
+  background: rgba(218, 119, 86, 0.14);
+  padding: 4px 10px;
+  border-radius: 20px;
+  margin-bottom: 8px;
+}
+.icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: rgba(218, 119, 86, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+  color: #bd5d3a;
+}
+.icon svg {
+  width: 30px;
+  height: 30px;
+}
+.mode-card h3 {
+  margin: 0 0 6px;
+  font-size: 17px;
+  color: #3d3929;
+}
+.mode-card p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #7f7766;
+}
+</style>
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index b84cfd0..aabdd0c 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -636,6 +636,9 @@
     font-variant-ligatures: none;
     font-feature-settings: 'liga' 0, 'calt' 0;
     line-height: 1.55;
+    overflow-x: auto;
+    max-width: 100%;
+    scrollbar-gutter: stable both-edges;
 }
 
 .text-output pre code {
@@ -777,6 +780,9 @@
     font-variant-ligatures: none;
     font-feature-settings: 'liga' 0, 'calt' 0;
     line-height: 1.55;
+    overflow-x: auto;
+    max-width: 100%;
+    scrollbar-gutter: stable both-edges;
 }
 
 .code-block-wrapper pre code {