chore: update

84378059 · 王鹏飞 · 2dd17d7a · 84378059 · 84378059 · 84378059
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
        "vue": "^3.4.21"
      },
      "devDependencies": {
+        "@arco-design/web-vue": "^2.54.6",
        "@vitejs/plugin-vue": "^5.0.4",
        "ali-oss": "^6.20.0",
        "chalk": "^5.3.0",
@@ -46,6 +47,34 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
+    "node_modules/@arco-design/color": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@arco-design/color/-/color-0.4.0.tgz",
+      "integrity": "sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==",
+      "dev": true,
+      "dependencies": {
+        "color": "^3.1.3"
+      }
+    },
+    "node_modules/@arco-design/web-vue": {
+      "version": "2.54.6",
+      "resolved": "https://registry.npmjs.org/@arco-design/web-vue/-/web-vue-2.54.6.tgz",
+      "integrity": "sha512-Qx+HHL5G5gIvrbxGC6ZF/L8ACD1L/RkPJd9e4SR+vI6lEg+nGlUBplkR4pY7e7mqYXY2H6uzh+radT+QxXKVRg==",
+      "dev": true,
+      "dependencies": {
+        "@arco-design/color": "^0.4.0",
+        "b-tween": "^0.3.3",
+        "b-validate": "^1.4.4",
+        "compute-scroll-into-view": "^1.0.17",
+        "dayjs": "^1.10.3",
+        "number-precision": "^1.5.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.28"
+      },
+      "peerDependencies": {
+        "vue": "^3.1.0"
+      }
+    },
    "node_modules/@babel/parser": {
      "version": "7.24.0",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
@@ -1212,6 +1241,18 @@
        "proxy-from-env": "^1.1.0"
      }
    },
+    "node_modules/b-tween": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/b-tween/-/b-tween-0.3.3.tgz",
+      "integrity": "sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==",
+      "dev": true
+    },
+    "node_modules/b-validate": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/b-validate/-/b-validate-1.5.3.tgz",
+      "integrity": "sha512-iCvCkGFskbaYtfQ0a3GmcQCHl/Sv1GufXFGuUQ+FE+WJa7A/espLOuFIn09B944V8/ImPj71T4+rTASxO2PAuA==",
+      "dev": true
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1348,6 +1389,16 @@
        "node": ">= 6"
      }
    },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
    "node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1366,6 +1417,31 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "dev": true
    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1377,6 +1453,12 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
+      "integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==",
+      "dev": true
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2371,6 +2453,12 @@
      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
      "dev": true
    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2789,6 +2877,12 @@
        "url": "https://github.com/fb55/nth-check?sponsor=1"
      }
    },
+    "node_modules/number-precision": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/number-precision/-/number-precision-1.6.0.tgz",
+      "integrity": "sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==",
+      "dev": true
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3146,6 +3240,12 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
    "node_modules/resolve": {
      "version": "1.22.8",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -3270,6 +3370,15 @@
      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
      "dev": true
    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "2.2.31",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
+      "integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
+      "dev": true,
+      "dependencies": {
+        "compute-scroll-into-view": "^1.0.20"
+      }
+    },
    "node_modules/scule": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -3356,6 +3465,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "vue": "^3.4.21"
  },
  "devDependencies": {
+    "@arco-design/web-vue": "^2.54.6",
    "@vitejs/plugin-vue": "^5.0.4",
    "ali-oss": "^6.20.0",
    "chalk": "^5.3.0",

--- a/src/App.vue
+++ b/src/App.vue
 <script setup>
-import { useTextSelection, watchDebounced } from '@vueuse/core'
+import { useTextSelection, watchDebounced, useClipboard } from '@vueuse/core'
 import { useFloating } from '@floating-ui/vue'
 import { useChat } from '@/composables/useChat'

@@ -28,7 +28,7 @@ watchDebounced(
  },
  { debounce: 200, maxWait: 1000 }
 )
-const { messages, post } = useChat()
+const { messages, post, isLoading } = useChat()
 async function postMessage() {
  if (!userChatInput.value) return
  console.log(userChatInput.value)
@@ -53,6 +53,8 @@ function scrollToBottom() {
 }
 watch(messages.value, () => nextTick(() => scrollToBottom()))
 const isDev = import.meta.env.DEV
+
+const { copy, copied } = useClipboard()
 </script>

 <template>
@@ -62,20 +64,37 @@ const isDev = import.meta.env.DEV
    <li>马云</li>
    <li>雷军</li>
  </ul>
-  <div id="tooltip-box" ref="floating" :style="floatingStyles" @click="handleSearch">搜索</div>
-  <el-drawer v-model="dialogVisible" :close-on-click-modal="false" size="50%">
+  <div id="tooltip-box" ref="floating" :style="floatingStyles" @click="handleSearch">AI搜索</div>
+  <a-drawer v-model:visible="dialogVisible" :mask-closable="false" width="30%" style="z-index: 3000">
    <div class="chat" ref="chatRef">
      <div class="chat-message" v-for="(item, index) in messages" :key="index">
-        <div class="chat-message-item" v-html="item.content"></div>
+        <a-popover position="right" class="chat-message-extra" style="z-index: 3001">
+          <div class="chat-message-item" :class="item.role" v-html="item.content"></div>
+          <template #content>
+            <a-tooltip content="复制" style="z-index: 3002">
+              <a-button @click="copy(item.content)">
+                <template #icon>
+                  <icon-check v-if="copied" />
+                  <icon-copy v-else />
+                </template>
+              </a-button>
+            </a-tooltip>
+          </template>
+        </a-popover>
+      </div>
+      <div class="chat-message" v-if="isLoading">
+        <div class="chat-message-item">
+          <div class="dot-flashing"></div>
+        </div>
      </div>
    </div>
    <template #footer>
      <div class="chat-footer">
-        <el-input size="large" v-model="userChatInput" @keyup.enter="handleSend"></el-input>
-        <el-button size="large" type="primary" @click="handleSend">发送</el-button>
+        <a-input size="large" placeholder="发消息" v-model="userChatInput" @keyup.enter="handleSend"></a-input>
+        <a-button size="large" type="primary" @click="handleSend">发送</a-button>
      </div>
    </template>
-  </el-drawer>
+  </a-drawer>
 </template>

 <style>
@@ -92,6 +111,7 @@ const isDev = import.meta.env.DEV
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
+  z-index: 9999999;
 }
 .chat-message {
  display: flex;
@@ -99,17 +119,90 @@ const isDev = import.meta.env.DEV
 }
 .chat-message-item {
  max-width: 100%;
-  padding: 10px;
+  padding: 12px 16px;
  margin: 10px 0;
-  border-radius: 10px;
-  border: 1px solid #dedede;
+  border-radius: 16px;
+  color: #000;
+  background-color: #f5f5f5;
+  word-break: break-word;
 }
-.chat-message-item:hover {
-  background-color: #f1f5f9;
+.chat-message-item.user {
+  color: #fff;
+  background-color: #06f;
 }
 .chat-footer {
  display: flex;
  align-items: center;
  column-gap: 10px;
 }
+
+.chat-message-extra .arco-popover-content {
+  margin: 0;
+}
+
+.chat-message-extra .arco-popover-popup-content {
+  padding: 2px;
+  border: 0;
+  border-radius: 12px;
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
+}
+.chat-message-extra .arco-popover-popup-arrow {
+  display: none;
+}
+.chat-message-extra .arco-btn {
+  border-radius: 12px;
+}
+
+.dot-flashing {
+  animation: dot-flashing 0.8s infinite alternate;
+  animation-delay: -0.2s;
+  animation-timing-function: ease;
+  margin: 7px 18px;
+  overflow: visible !important;
+  position: relative;
+}
+
+.dot-flashing,
+.dot-flashing:after,
+.dot-flashing:before {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.1);
+  height: 8px;
+  width: 8px;
+}
+
+.dot-flashing:after,
+.dot-flashing:before {
+  animation: dot-flashing 0.8s infinite alternate;
+  animation-timing-function: ease;
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.dot-flashing:before {
+  left: -15px;
+  animation-delay: -0.4s;
+}
+
+.dot-flashing:after {
+  left: 15px;
+  animation-delay: 0s;
+}
+
+@keyframes dot-flashing {
+  0% {
+    background-color: #000;
+  }
+
+  50% {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  to {
+    background-color: #000;
+  }
+}
 </style>
--- a/src/composables/useChat.js
+++ b/src/composables/useChat.js
@@ -8,10 +8,12 @@ export function useChat() {

  const messages = ref([])
  const chatId = ref(null)
+  const isLoading = ref(false)

  async function post(data) {
    const timestamp = Date.now()
    const sign = md5(`${authKey}${authSecret}${timestamp}`)
+    isLoading.value = true
    await fetchEventSource('/api/ai/openapi/agent/chat/stream/v1', {
      method: 'POST',
      headers: { authKey, timestamp, sign, 'Content-Type': 'application/json' },
@@ -36,8 +38,10 @@ export function useChat() {
        } else {
          messages.value[messageIndex].content = messages.value[messageIndex].content + content
        }
+        isLoading.value = false
      },
      onerror(err) {
+        isLoading.value = false
        throw err
      }
    })
@@ -47,5 +51,5 @@ export function useChat() {
    await fetchAgents()
  }

-  return { chatId, messages, post, getAgents }
+  return { chatId, messages, post, getAgents, isLoading }
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,7 +5,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ArcoResolver } from 'unplugin-vue-components/resolvers'
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

 // https://vitejs.dev/config/
@@ -15,8 +15,15 @@ export default defineConfig({
  },
  plugins: [
    vue(),
-    AutoImport({ imports: ['vue'], eslintrc: { enabled: true }, resolvers: [ElementPlusResolver()] }),
-    Components({ resolvers: [ElementPlusResolver()] }),
+    AutoImport({ imports: ['vue'], eslintrc: { enabled: true }, resolvers: [ArcoResolver()] }),
+    Components({
+      resolvers: [
+        ArcoResolver({
+          resolveIcons: true,
+          sideEffect: true
+        })
+      ]
+    }),
    cssInjectedByJsPlugin()
  ],
  resolve: {