提交 84378059 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 2dd17d7a
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"vue": "^3.4.21" "vue": "^3.4.21"
}, },
"devDependencies": { "devDependencies": {
"@arco-design/web-vue": "^2.54.6",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"ali-oss": "^6.20.0", "ali-oss": "^6.20.0",
"chalk": "^5.3.0", "chalk": "^5.3.0",
...@@ -46,6 +47,34 @@ ...@@ -46,6 +47,34 @@
"url": "https://github.com/sponsors/antfu" "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": { "node_modules/@babel/parser": {
"version": "7.24.0", "version": "7.24.0",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
...@@ -1212,6 +1241,18 @@ ...@@ -1212,6 +1241,18 @@
"proxy-from-env": "^1.1.0" "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": { "node_modules/balanced-match": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
...@@ -1348,6 +1389,16 @@ ...@@ -1348,6 +1389,16 @@
"node": ">= 6" "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": { "node_modules/color-convert": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
...@@ -1366,6 +1417,31 @@ ...@@ -1366,6 +1417,31 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true "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": { "node_modules/combined-stream": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
...@@ -1377,6 +1453,12 @@ ...@@ -1377,6 +1453,12 @@
"node": ">= 0.8" "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": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
...@@ -2371,6 +2453,12 @@ ...@@ -2371,6 +2453,12 @@
"integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==", "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
"dev": true "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": { "node_modules/is-binary-path": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
...@@ -2789,6 +2877,12 @@ ...@@ -2789,6 +2877,12 @@
"url": "https://github.com/fb55/nth-check?sponsor=1" "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": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
...@@ -3146,6 +3240,12 @@ ...@@ -3146,6 +3240,12 @@
"node": ">=8.10.0" "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": { "node_modules/resolve": {
"version": "1.22.8", "version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
...@@ -3270,6 +3370,15 @@ ...@@ -3270,6 +3370,15 @@
"integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==", "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
"dev": true "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": { "node_modules/scule": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz", "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
...@@ -3356,6 +3465,15 @@ ...@@ -3356,6 +3465,15 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"vue": "^3.4.21" "vue": "^3.4.21"
}, },
"devDependencies": { "devDependencies": {
"@arco-design/web-vue": "^2.54.6",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"ali-oss": "^6.20.0", "ali-oss": "^6.20.0",
"chalk": "^5.3.0", "chalk": "^5.3.0",
......
<script setup> <script setup>
import { useTextSelection, watchDebounced } from '@vueuse/core' import { useTextSelection, watchDebounced, useClipboard } from '@vueuse/core'
import { useFloating } from '@floating-ui/vue' import { useFloating } from '@floating-ui/vue'
import { useChat } from '@/composables/useChat' import { useChat } from '@/composables/useChat'
...@@ -28,7 +28,7 @@ watchDebounced( ...@@ -28,7 +28,7 @@ watchDebounced(
}, },
{ debounce: 200, maxWait: 1000 } { debounce: 200, maxWait: 1000 }
) )
const { messages, post } = useChat() const { messages, post, isLoading } = useChat()
async function postMessage() { async function postMessage() {
if (!userChatInput.value) return if (!userChatInput.value) return
console.log(userChatInput.value) console.log(userChatInput.value)
...@@ -53,6 +53,8 @@ function scrollToBottom() { ...@@ -53,6 +53,8 @@ function scrollToBottom() {
} }
watch(messages.value, () => nextTick(() => scrollToBottom())) watch(messages.value, () => nextTick(() => scrollToBottom()))
const isDev = import.meta.env.DEV const isDev = import.meta.env.DEV
const { copy, copied } = useClipboard()
</script> </script>
<template> <template>
...@@ -62,20 +64,37 @@ const isDev = import.meta.env.DEV ...@@ -62,20 +64,37 @@ const isDev = import.meta.env.DEV
<li>马云</li> <li>马云</li>
<li>雷军</li> <li>雷军</li>
</ul> </ul>
<div id="tooltip-box" ref="floating" :style="floatingStyles" @click="handleSearch">搜索</div> <div id="tooltip-box" ref="floating" :style="floatingStyles" @click="handleSearch">AI搜索</div>
<el-drawer v-model="dialogVisible" :close-on-click-modal="false" size="50%"> <a-drawer v-model:visible="dialogVisible" :mask-closable="false" width="30%" style="z-index: 3000">
<div class="chat" ref="chatRef"> <div class="chat" ref="chatRef">
<div class="chat-message" v-for="(item, index) in messages" :key="index"> <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>
</div> </div>
<template #footer> <template #footer>
<div class="chat-footer"> <div class="chat-footer">
<el-input size="large" v-model="userChatInput" @keyup.enter="handleSend"></el-input> <a-input size="large" placeholder="发消息" v-model="userChatInput" @keyup.enter="handleSend"></a-input>
<el-button size="large" type="primary" @click="handleSend">发送</el-button> <a-button size="large" type="primary" @click="handleSend">发送</a-button>
</div> </div>
</template> </template>
</el-drawer> </a-drawer>
</template> </template>
<style> <style>
...@@ -92,6 +111,7 @@ const isDev = import.meta.env.DEV ...@@ -92,6 +111,7 @@ const isDev = import.meta.env.DEV
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
z-index: 9999999;
} }
.chat-message { .chat-message {
display: flex; display: flex;
...@@ -99,17 +119,90 @@ const isDev = import.meta.env.DEV ...@@ -99,17 +119,90 @@ const isDev = import.meta.env.DEV
} }
.chat-message-item { .chat-message-item {
max-width: 100%; max-width: 100%;
padding: 10px; padding: 12px 16px;
margin: 10px 0; margin: 10px 0;
border-radius: 10px; border-radius: 16px;
border: 1px solid #dedede; color: #000;
background-color: #f5f5f5;
word-break: break-word;
} }
.chat-message-item:hover { .chat-message-item.user {
background-color: #f1f5f9; color: #fff;
background-color: #06f;
} }
.chat-footer { .chat-footer {
display: flex; display: flex;
align-items: center; align-items: center;
column-gap: 10px; 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> </style>
...@@ -8,10 +8,12 @@ export function useChat() { ...@@ -8,10 +8,12 @@ export function useChat() {
const messages = ref([]) const messages = ref([])
const chatId = ref(null) const chatId = ref(null)
const isLoading = ref(false)
async function post(data) { async function post(data) {
const timestamp = Date.now() const timestamp = Date.now()
const sign = md5(`${authKey}${authSecret}${timestamp}`) const sign = md5(`${authKey}${authSecret}${timestamp}`)
isLoading.value = true
await fetchEventSource('/api/ai/openapi/agent/chat/stream/v1', { await fetchEventSource('/api/ai/openapi/agent/chat/stream/v1', {
method: 'POST', method: 'POST',
headers: { authKey, timestamp, sign, 'Content-Type': 'application/json' }, headers: { authKey, timestamp, sign, 'Content-Type': 'application/json' },
...@@ -36,8 +38,10 @@ export function useChat() { ...@@ -36,8 +38,10 @@ export function useChat() {
} else { } else {
messages.value[messageIndex].content = messages.value[messageIndex].content + content messages.value[messageIndex].content = messages.value[messageIndex].content + content
} }
isLoading.value = false
}, },
onerror(err) { onerror(err) {
isLoading.value = false
throw err throw err
} }
}) })
...@@ -47,5 +51,5 @@ export function useChat() { ...@@ -47,5 +51,5 @@ export function useChat() {
await fetchAgents() await fetchAgents()
} }
return { chatId, messages, post, getAgents } return { chatId, messages, post, getAgents, isLoading }
} }
...@@ -5,7 +5,7 @@ import { defineConfig } from 'vite' ...@@ -5,7 +5,7 @@ import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite' import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/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' import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
...@@ -15,8 +15,15 @@ export default defineConfig({ ...@@ -15,8 +15,15 @@ export default defineConfig({
}, },
plugins: [ plugins: [
vue(), vue(),
AutoImport({ imports: ['vue'], eslintrc: { enabled: true }, resolvers: [ElementPlusResolver()] }), AutoImport({ imports: ['vue'], eslintrc: { enabled: true }, resolvers: [ArcoResolver()] }),
Components({ resolvers: [ElementPlusResolver()] }), Components({
resolvers: [
ArcoResolver({
resolveIcons: true,
sideEffect: true
})
]
}),
cssInjectedByJsPlugin() cssInjectedByJsPlugin()
], ],
resolve: { resolve: {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论