Skip to content

A
ai-chat-ui
Commit a1a53d56 authored by chenghong_tao's avatar chenghong_tao
Browse files
Options

fix some bugs

parent d076a3ee
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 11 deletions
index.html
View file @ a1a53d56
...@@ -5,9 +5,44 @@ ...@@ -5,9 +5,44 @@
<link rel="icon" type="image/svg+xml" href="./avatarAI.svg" /> <link rel="icon" type="image/svg+xml" href="./avatarAI.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI助手</title> <title>AI助手</title>
<style>
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #2C59D6;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
window.addEventListener('load', function() {
var loadingElement = document.getElementById('loading');
loadingElement.style.display = 'none';
});
</script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div class="loading" id="loading">
<div class="spinner"></div>
</div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>
package-lock.json
View file @ a1a53d56
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
"less": "^4.3.0", "less": "^4.3.0",
"unplugin-auto-import": "^19.1.2", "unplugin-auto-import": "^19.1.2",
"unplugin-vue-components": "^28.5.0", "unplugin-vue-components": "^28.5.0",
"vite": "^6.3.1" "vite": "^6.3.1",
"vite-plugin-compression2": "^1.3.3"
} }
}, },
"node_modules/@babel/helper-string-parser": { "node_modules/@babel/helper-string-parser": {
...@@ -692,6 +693,29 @@ ...@@ -692,6 +693,29 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/@rollup/pluginutils": {
"version": "5.1.4",
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
"integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^2.0.2",
"picomatch": "^4.0.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/rollup-android-arm-eabi": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.40.0", "version": "4.40.0",
"resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz", "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
...@@ -2968,6 +2992,13 @@ ...@@ -2968,6 +2992,13 @@
"url": "https://github.com/sponsors/mesqueeb" "url": "https://github.com/sponsors/mesqueeb"
} }
}, },
"node_modules/tar-mini": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/tar-mini/-/tar-mini-0.2.0.tgz",
"integrity": "sha512-+qfUHz700DWnRutdUsxRRVZ38G1Qr27OetwaMYTdg8hcPxf46U0S1Zf76dQMWRBmusOt2ZCK5kbIaiLkoGO7WQ==",
"dev": true,
"license": "MIT"
},
"node_modules/terser": { "node_modules/terser": {
"version": "5.39.0", "version": "5.39.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
...@@ -3332,6 +3363,20 @@ ...@@ -3332,6 +3363,20 @@
} }
} }
}, },
"node_modules/vite-plugin-compression2": {
"version": "1.3.3",
"resolved": "https://registry.npmmirror.com/vite-plugin-compression2/-/vite-plugin-compression2-1.3.3.tgz",
"integrity": "sha512-Mb+xi/C5b68awtF4fNwRBPtoZiyUHU3I0SaBOAGlerlR31kusq1si6qG31lsjJH8T7QNg/p3IJY2HY9O9SvsfQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@rollup/pluginutils": "^5.1.0",
"tar-mini": "^0.2.0"
},
"peerDependencies": {
"vite": "^2.0.0||^3.0.0||^4.0.0||^5.0.0 ||^6.0.0"
}
},
"node_modules/vite/node_modules/rollup": { "node_modules/vite/node_modules/rollup": {
"version": "4.40.0", "version": "4.40.0",
"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz", "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.0.tgz",
......
package.json
View file @ a1a53d56
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"less": "^4.3.0", "less": "^4.3.0",
"unplugin-auto-import": "^19.1.2", "unplugin-auto-import": "^19.1.2",
"unplugin-vue-components": "^28.5.0", "unplugin-vue-components": "^28.5.0",
"vite": "^6.3.1" "vite": "^6.3.1",
"vite-plugin-compression2": "^1.3.3"
} }
} }
src/components/Chat.vue
View file @ a1a53d56
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<aiBubble <aiBubble
:query="item.query" :query="item.query"
v-if="item.type === 'ai' || item.type === 'ai-history'" v-if="item.type === 'ai' || item.type === 'ai-history'"
:historyMsgId="item?.id"
:messageType="item.type" :messageType="item.type"
:content="item.content" :content="item.content"
@messageFinished="messageFinished" @messageFinished="messageFinished"
...@@ -132,6 +133,7 @@ watch(() => props.historyMsgList, (newValue) => { ...@@ -132,6 +133,7 @@ watch(() => props.historyMsgList, (newValue) => {
type: 'ai-history', type: 'ai-history',
query: item.query, query: item.query,
content: item?.answer, content: item?.answer,
id: item.id
}) })
console.log('zhisx'); console.log('zhisx');
......
src/components/HistoryList.vue
View file @ a1a53d56
...@@ -73,6 +73,7 @@ const getHistoryList = async () => { ...@@ -73,6 +73,7 @@ const getHistoryList = async () => {
const historyResult = await difyApi.getChatList({ limit: 100 }); const historyResult = await difyApi.getChatList({ limit: 100 });
list.value = historyResult.data; list.value = historyResult.data;
filteredList.value = list.value; filteredList.value = list.value;
updateFirstItemName();
}; };
const openDeleteConfirm = (id) => { const openDeleteConfirm = (id) => {
...@@ -147,6 +148,17 @@ const openEdit = (id) => { ...@@ -147,6 +148,17 @@ const openEdit = (id) => {
}); });
}; };
// 为了解决dify中的bug，第一次获取历史会话记录，查看list.value中的第一条数据的name是否为`New conversation`，如果是则更新名称
const updateFirstItemName = async () => {
if (list.value.length > 0 && list.value[0].name === "New conversation") {
let msgResult = await difyApi.getChatHistory({ conversation_id: list.value[0].id, limit: 20 })
console.log('updateFirstItemName msg:', msgResult);
const firstMsg = msgResult?.data[0];
await difyApi.renameChat(list.value[0].id, { name: firstMsg.query });
getHistoryList();
}
};
watch( watch(
() => props.isRefreshHistoryList, () => props.isRefreshHistoryList,
(newValue) => { (newValue) => {
......
src/components/chatSubassembly/aiBubble.vue
View file @ a1a53d56
...@@ -92,7 +92,11 @@ const props = defineProps({ ...@@ -92,7 +92,11 @@ const props = defineProps({
content: { content: {
type: String, type: String,
default: "", default: "",
} },
historyMsgId: {
type: String,
default: "",
},
}); });
const emits = defineEmits(["messageFinished", "workflow-is-error"]); const emits = defineEmits(["messageFinished", "workflow-is-error"]);
...@@ -103,7 +107,6 @@ watch( ...@@ -103,7 +107,6 @@ watch(
if(props.messageType === 'ai') { if(props.messageType === 'ai') {
startSSE(newValue); startSSE(newValue);
} }
console.log("# query:", newValue, props.messageType, props.content);
}, },
{ immediate: true } { immediate: true }
); );
...@@ -204,17 +207,64 @@ const messageContent = computed(() => { ...@@ -204,17 +207,64 @@ const messageContent = computed(() => {
}); });
const feedback = async (type) => { const feedback = async (type) => {
const messageId = workflowContent.value[0].message_id; const messageId = props.messageType === 'ai-history' ? props.historyMsgId : workflowContent.value[0].message_id;
await difyApi.feedback(messageId, { rating: type, content: type }); await difyApi.feedback(messageId, { rating: type, content: type });
ElMessage.success("反馈成功"); ElMessage.success("反馈成功");
}; };
const copyContent = () => { const copyContent = () => {
const context = messageContent.value; const context = messageContent.value;
navigator.clipboard.writeText(context); if (context === '') {
ElMessage.error("暂无内容可复制");
return
}
// 移除 <details></details> 标签及其内容
const cleanedContext = removeDetailsTags(context);
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(cleanedContext)
.then(() => {
ElMessage.success("复制成功"); ElMessage.success("复制成功");
})
.catch(err => {
console.error('Failed to copy text: ', err);
fallbackCopyTextToClipboard(cleanedContext);
});
} else {
fallbackCopyTextToClipboard(cleanedContext);
}
}; };
function removeDetailsTags(html) {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const detailsElements = doc.querySelectorAll('details');
detailsElements.forEach(element => {
element.remove();
});
return doc.body.textContent.trim();
}
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? '成功' : '失败';
ElMessage.success(`复制${msg}`);
} catch (err) {
console.error('无法复制文本: ', err);
ElMessage.error('复制失败');
}
document.body.removeChild(textArea);
}
// const workflowIsError = (isError) => { // const workflowIsError = (isError) => {
// emits("workflow-is-error", isError); // emits("workflow-is-error", isError);
// }; // };
......
src/theme/theme.less
View file @ a1a53d56
...@@ -74,6 +74,30 @@ ...@@ -74,6 +74,30 @@
width: 580px; width: 580px;
summary{ summary{
cursor: pointer; cursor: pointer;
position: relative;
}
/* 默认隐藏summary底部的线 */
summary::after {
content: '';
display: none;
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1px;
background-color: #dddddd;
}
/* 当details处于打开状态时显示summary底部的线 */
details[open] summary::after {
display: block;
}
details[open] summary {
margin-bottom: 10px;
}
hr{
margin: 10px 0;
padding: 0;
border-color: #fff;
} }
} }
......
vite.config.js
View file @ a1a53d56
...@@ -3,6 +3,7 @@ import vue from '@vitejs/plugin-vue' ...@@ -3,6 +3,7 @@ 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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { compression } from 'vite-plugin-compression2'
// https://vite.dev/config/ // https://vite.dev/config/
const BASE_PATH = process.env.REACT_APP_BASE_PATH || '/'; const BASE_PATH = process.env.REACT_APP_BASE_PATH || '/';
...@@ -16,6 +17,10 @@ base: BASE_PATH, ...@@ -16,6 +17,10 @@ base: BASE_PATH,
Components({ Components({
resolvers: [ElementPlusResolver()], resolvers: [ElementPlusResolver()],
}), }),
compression({
threshold: 2000,
skipIfLargerOrEqual:true,
})
], ],
css: { css: {
preprocessorOptions: { preprocessorOptions: {
...@@ -34,9 +39,10 @@ base: BASE_PATH, ...@@ -34,9 +39,10 @@ base: BASE_PATH,
} }
} }
}, },
// build: { build: {
// chunkSizeWarningLimit: 500, chunkSizeWarningLimit: 500,
// rollupOptions: { rollupOptions: {
// 将每个包都作为一个JS打包
// output: { // output: {
// manualChunks(id) { // manualChunks(id) {
// if (id.includes('node_modules')) { // if (id.includes('node_modules')) {
...@@ -46,6 +52,21 @@ base: BASE_PATH, ...@@ -46,6 +52,21 @@ base: BASE_PATH,
// return 'default'; // 其他模块默认分包 // return 'default'; // 其他模块默认分包
// }, // },
// }, // },
// }, output: {
// } manualChunks(id) {
// 将node_modules下的包打包到一个chunk中
if (id.includes('node_modules')) {
return "vendor";
}
},
}
},
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
}
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment