fix

virgo.wzfrontend/aiChat/src/api/ai.js

@@ -184,18 +184,29 @@ export function updateHtml(data) {
 		method: 'post',
 		data: data
 	})
-}
+}
 /* 
- * 执行对话型Chat
+ * 创建聊天
  * 
  * 
  */
-export function createChat(difyTypeId, data) {
+export function createFLowChat(difyTypeId, data) {
 	return request({
-		url: `/api/ai/chat/run/${difyTypeId}`,
+		url: `/api/ai/chat/uuid/${difyTypeId}`,
 		method: 'post',
 		data: data
 	})
+}
+/* 
+ * 获取聊天状态
+ * 
+ * 
+ */
+export function getFlowChatStatus(simpleUUID) {
+	return request({
+		url: `/api/ai/chat/${simpleUUID}`,
+		method: 'get'
+	})
 }
 /* 
  * 获取执行对话型Chat列表
@@ -218,4 +229,15 @@ export function getHistoryChatList(conversationId) {
 		url: `/api/ai/chat/message/${conversationId}`,
 		method: 'get'
 	})
+}
+/* 
+ * 获取回话列表
+ * 
+ * 
+ */
+export function getDifyChatList(difyTypeId) {
+	return request({
+		url: `/api/ai/chat/conversations/${difyTypeId}`,
+		method: 'get'
+	})
 }

virgo.wzfrontend/aiChat/src/components/AIFlowChat.vue

@@ -2,12 +2,15 @@
 	import {
 		onMounted,
 		ref,
-		toRefs,
-		reactive
+		nextTick,
+		watch,
+		onUnmounted
 	} from 'vue';
 	import {
-		getChatList,
-		createChat,
+		useRoute
+	} from 'vue-router';
+	import {
+		getFlowChatStatus,
 		getHistoryChatList
 	} from '@/api/ai'
 	import {
@@ -22,43 +25,138 @@
 	import hljs from 'highlight.js/lib/common';
 	// 引入 github 代码主题
 	import 'highlight.js/styles/github.css';
-
-	const state = reactive({
-		renderedMarkdown: ''
-	});
-	const {
-		renderedMarkdown
-	} = toRefs(state);
+	import config from '@/config'
 	const user = ref(useUserStore().userData);
-	const messageList = ref([]);
+	// 对话历史
+	const chatHistory = ref([]);
+	// 加载状态
 	const loading = ref(false);
-	const messageValue = ref('')
+	// 输入框内容
+	const prompt = ref('');
+	// 当前AI流式响应内容
+	const currentAIResponse = ref('');
+	const UUID = ref(useRoute().params.id);
+	const conversationId = ref('');
+	const chatBody = ref(null);
 	const formatTime = () => {
 		return ''
 	}
+	onMounted(() => {
+		if (UUID.value.trim()) init();
+	})
+	// 监听对话历史变化，自动滚动到底部
+	watch(chatHistory, () => {
+		scrollToBottom();
+	}, {
+		deep: true
+	})
+	let timerId = null;
 	const init = async () => {
-		let chatData = await getChatList(8);
-		if (chatData.state) {
-			let data = chatData.data.data;
-			if (data.length > 0) initChatList(data[0].id);
+		let flowChatData = await getFlowChatStatus(UUID.value);
+		if (flowChatData.state) {
+			if (flowChatData.data.status === 'succeeded') {
+				conversationId.value = flowChatData.data.conversationId;
+				loading.value = false;
+				initChatList();
+			} else {
+				let inputs = JSON.parse(flowChatData.data.inputs);
+				chatHistory.value = [{
+					query: inputs.query,
+					AIoutputs: ''
+				}]
+				loading.value = true;
+				startTimer();
+			}
 		}
 	}
-	onMounted(() => {
-		init();
-	})
-	const initChatList = async (id) => {
-		let flowData = await getHistoryChatList(id);
+	// 启动定时器
+	const startTimer = () => {
+		if (timerId) return
+		timerId = setInterval(() => {
+			init();
+		}, 3000)
+	}
+
+	// 停止定时器
+	const stopTimer = () => {
+		if (timerId) {
+			clearInterval(timerId)
+			timerId = null;
+		}
+	}
+	const initChatList = async () => {
+		let flowData = await getHistoryChatList(conversationId.value);
 		if (flowData.state) {
-			messageList.value = flowData.data.data.map(node => {
+			chatHistory.value = flowData.data.data.map(node => {
 				node['AIoutputs'] = renderMarkdown(node.answer);
 				return node
 			});
-			hljs.highlightAll()
+			hljs.highlightAll();
 		}
 	}
+	const reloadMessage = (value) => {
+		prompt.value = value;
+		sendMessage();
+	}
 	const sendMessage = async () => {
-		let chatData = await createChat(8, {
-			query: messageValue.value
+		if (!prompt.value.trim() || loading.value) {
+			ElMessage({
+				type: 'warning',
+				message: '输入不能为空！'
+			})
+			return
+		}
+		try {
+			// 1. 添加用户消息到历史记录
+			const userMessage = prompt.value
+			chatHistory.value.push({
+				isUser: true,
+				query: userMessage,
+				AIoutputs: ''
+			})
+			// 2. 初始化状态
+			loading.value = true
+			currentAIResponse.value = ''
+			prompt.value = '' // 清空输入框
+			const response = await fetch(`${config.baseURL}/api/ai/chat/run/7`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					"token": useUserStore().token
+				},
+				body: JSON.stringify({
+					query: userMessage,
+					conversationId: conversationId.value
+				})
+			});
+			const reader = response.body.getReader();
+			const decoder = new TextDecoder();
+			let done = false;
+			let result = '';
+			while (!done) {
+				const {
+					value,
+					done: doneReading
+				} = await reader.read();
+				done = doneReading;
+				let resultString = decoder.decode(value, {
+					stream: true
+				});
+				loading.value = false;
+				result += resultString;
+				result = result.replaceAll('data:', '');
+				chatHistory.value[chatHistory.value.length - 1].AIoutputs = renderMarkdown(result);
+				scrollToBottom();
+			}
+		} catch (error) {
+			console.error("请求失败：", error);
+		}
+	}
+	const scrollToBottom = () => {
+		nextTick(() => {
+			if (chatBody.value) {
+				chatBody.value.scrollTop = chatBody.value.scrollHeight
+			}
 		})
 	}
 	const returnUserInputs = (data) => {
@@ -80,37 +178,39 @@
 			const highlighted = hljs.highlight(text, {
 				language
 			}).value;
-			return `<pre><code class="hljs language-${language}">${highlighted}</code></pre>`;
+			return `<div class="hljs-box"><div class="hljs-title">${language.toLocaleUpperCase()}</div><pre><code class="hljs language-${language}">${highlighted}</code></pre></div>`;
 		};
 		return marked(markdown, {
 			renderer
 		});
 	};
+	// 组件卸载时清除定时器（重要！）
+	onUnmounted(() => {
+		stopTimer()
+	})
 </script>
 <template>
 	<div class="ai-chat-container">
 		<div class="chat-body" ref="chatBody">
-			<div v-for="(message, index) in messageList" :key="index">
-				<div class="message user-message">
-					<div class="message-content" v-if="message.query" v-html="message.query"></div>
+			<div v-for="(message, index) in chatHistory" :key="index">
+				<div class="user-message">
+					<div class="message user-message-box">
+						<div class="message-content" v-if="message.query" v-html="message.query"></div>
+					</div>
 				</div>
-				<div class="message ai-message" v-if="!loading || message.status !== 'running'"
-					style="margin-top: 15px;">
+				<div class="message ai-message" v-if="!loading || message.AIoutputs" style="margin-top: 15px;">
 					<div class="message-header">
 						<el-avatar :size="30"
 							src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed">
 						</el-avatar>
-						<div class="message-header-label">AI助手</div>
+						<div class="message-header-label" style="width: 100px;">AI助手</div>
 					</div>
 					<div class="message-content">
-						<div v-if="message.status === 'failed'">
-							<p>服务器繁忙，请稍后重试</p>
-							<el-button size="small" @click="reload(message)"
-								:disabled="index !== messageList.length - 1" style="margin-top: 10px;">
-								点击重试
-							</el-button>
-						</div>
-						<div class="ai-website-boxs" v-else v-html="message.AIoutputs"></div>
+						<div class="ai-website-boxs" v-html="message.AIoutputs"></div>
+						<el-button size="small" @click="reloadMessage(message.query)" :disabled="loading"
+							style="margin-top: 10px;" v-if="message.AIoutputs.indexOf('系统繁忙，请重试')>-1">
+							点击重试
+						</el-button>
 					</div>
 				</div>
 			</div>
@@ -123,11 +223,11 @@
 		</div>
 		<div class="input-container">
 			<div class="input-box">
-				<el-input type="textarea" v-model="messageValue" placeholder="给AI发送消息" resize="none" :rows="4"
+				<el-input type="textarea" v-model="prompt" placeholder="给AI发送消息" resize="none" :rows="4"
 					:autosize="{ minRows: 2, maxRows: 6 }">
 				</el-input>
 				<div class="input-button">
-					<el-button circle type="primary" @click="sendMessage" :disabled="!messageValue.trim() || loading"
+					<el-button circle type="primary" @click="sendMessage" :disabled="!prompt.trim() || loading"
 						:icon="Top">
 					</el-button>
 				</div>
@@ -137,17 +237,33 @@
 </template>
 
 
-<style>
+<style lang="scss">
 	.message-image {
 		width: 30px;
 	}
-</style>
-<style scoped lang="scss">
-	.hljs{
-		.language-html{
-			background: #fafafa;
-		}
+
+	.hljs-box {
+		border-radius: 5px;
+		overflow: hidden;
+
+		.hljs-title {
+			background: #f2f3f5;
+			padding: 5px 10px;
+			color: #354052;
+			font-weight: bold;
+			border-bottom: 1px solid #999999;
+		}
+
+		.language-html {
+			background: #f1f2f5;
+		}
+
+		pre {
+			margin-top: 0;
+		}
 	}
+</style>
+<style scoped lang="scss">
 	.ai-chat-container {
 		width: 100%;
 		height: 100%;
@@ -177,13 +293,19 @@
 		position: relative;
 		animation: fadeIn 0.3s ease;
 		line-height: 1.5;
+		display: inline-block;
+		max-width: 100%;
 	}
 
 	.user-message {
-		background: #7a72cf;
-		color: white;
-		margin-left: auto;
-		border-bottom-right-radius: 4px;
+		display: flex;
+		justify-content: end;
+
+		.user-message-box {
+			background: #7a72cf;
+			color: white;
+			border-bottom-right-radius: 4px;
+		}
 	}
 
 	.ai-message {

virgo.wzfrontend/aiChat/src/router/index.js

@@ -8,9 +8,13 @@ const routes = [{
 	name: 'Home',
 	component: () => import('../views/Home.vue')
 },{
-	path: '/ai-chat',
+	path: '/aichat/:id',
 	name: 'AIChat',
 	component: () => import('../views/AIChat.vue')
+},{
+	path: '/Projects',
+	name: 'Projects',
+	component: () => import('../views/Projects.vue')
 }]
 
 const router = createRouter({

virgo.wzfrontend/aiChat/src/views/AIChat.vue

@@ -6,6 +6,10 @@
 	import {
 		useUserStore
 	} from '@/store'
+	import {
+		useRouter
+	} from 'vue-router';
+	const router = ref(useRouter())
 	const user = ref(useUserStore().userData);
 	const websiteUrl = ref('');
 	const loading = ref(false);
@@ -16,7 +20,7 @@
 <template>
 	<div class="ai-website">
 		<header class="ai-website-header">
-			<div class="home-nav-left">
+			<div class="home-nav-left" @click="router.push('/')">
 				<img class="img"
 					src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
 					alt="logo.png" />
@@ -74,6 +78,7 @@
 			.home-nav-left {
 				display: flex;
 				align-items: center;
+				cursor: pointer;
 			}
 
 			.title {

virgo.wzfrontend/aiChat/src/views/Home.vue

@@ -20,8 +20,13 @@
 		useUserStore
 	} from '@/store'
 	import Login from '@/components/Login.vue'
-	import HideUpload from '@/components/HideUpload.vue'
-	import { useRouter } from 'vue-router';
+	import HideUpload from '@/components/HideUpload.vue'
+	import {
+		useRouter
+	} from 'vue-router';
+	import {
+		createFLowChat
+	} from '@/api/ai'
 	const router = useRouter();
 	const userStore = useUserStore()
 	const message = ref('');
@@ -109,7 +114,22 @@
 	}
 	const selectVisible = ref(false);
 	const selectData = ref({});
-
+	const sendMessage = async () => {
+		if (!userStore.token) {
+			ElMessage({
+				message: '请先登录',
+				type: 'warning',
+			})
+			loginVisible.value = true;
+			return;
+		}
+		loading.value = true;
+		let createChatData = await createFLowChat(7, {
+			query: message.value
+		})
+		loading.value = false;
+		if (createChatData.state) router.push(`/aichat/${createChatData.data}`);
+	}
 	onMounted(() => {
 		init();
 	})
@@ -123,6 +143,11 @@
 					src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
 					alt="logo.png" />
 				<span class="title">WorkArk AI</span>
+				<ul class="header-ul">
+					<li class="header-li" @click="router.push('/Projects')">项目</li>
+					<li class="header-li">定价</li>
+					<li class="header-li">学习</li>
+				</ul>
 			</div>
 			<div class="home-nav-right">
 				<div class="item no-token" @click="loginVisible = true" v-if="!user.userId">
@@ -161,7 +186,7 @@
 						</el-button>
 					</div>
 					<el-button type="primary" size="large" :icon="Top" circle :loading="loading"
-						style="font-size: 18px;" @click="router.push('/ai-chat')">
+						style="font-size: 18px;" @click="sendMessage" :disabled="!message.trim()">
 					</el-button>
 				</div>
 				<div class="operation-file" v-if="websiteURL || imageList.length > 0">
@@ -221,6 +246,18 @@
 		}
 	}
 
+	.header-ul {
+		display: flex;
+		align-items: center;
+		padding-left: 40px;
+
+		.header-li {
+			opacity: 0.8;
+			padding: 0 15px;
+			cursor: pointer;
+		}
+	}
+
 	.home-container {
 		width: 100%;
 		height: 100%;

virgo.wzfrontend/aiChat/src/views/Projects.vue

@@ -0,0 +1,120 @@
+<script setup>
+	import {
+		onMounted,
+		ref
+	} from 'vue'
+	import {
+		useUserStore
+	} from '@/store'
+	import {
+		useRouter
+	} from 'vue-router';
+	import {
+		getDifyChatList
+	} from '@/api/ai'
+	const router = ref(useRouter())
+	const user = ref(useUserStore().userData);
+	const projectList = ref([]);
+	const init = async () => {
+		let list = await getDifyChatList(7);
+		if (list.state) {
+			projectList.value = [{
+				name: '生成科技型网站',
+				id: '3683d9640fab4714a6fdbd09c6700b1c'
+			}]
+		}
+	}
+	onMounted(() => {
+		init()
+	})
+</script>
+<template>
+	<div class="projects">
+		<header class="projects-header">
+			<div class="home-nav-left" @click="router.push('/')">
+				<img class="img"
+					src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
+					alt="logo.png" />
+				<span class="title">WorkArk.AI</span>
+			</div>
+			<div class="home-nav-right">
+				<div class="item no-token">
+					<el-avatar :size="26" :src="user.portrait"></el-avatar>
+				</div>
+			</div>
+		</header>
+		<div class="projects-content">
+			<el-button v-for="(item,index) in projectList" :key="index" @click="router.push(`/aichat/${item.id}`)">
+				{{item.name}}
+			</el-button>
+		</div>
+	</div>
+</template>
+
+
+<style lang="scss">
+	.projects {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		background: #fcfbf8;
+		flex-direction: column;
+
+		.projects-header {
+			height: 44px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0 15px;
+
+			.home-nav-left {
+				display: flex;
+				align-items: center;
+				cursor: pointer;
+			}
+
+			.title {
+				font-weight: 600;
+				color: #000;
+				font-size: 18px;
+				margin-left: 10px;
+			}
+
+			.img {
+				width: 32px;
+				height: 32px;
+			}
+
+			.home-nav-right {
+				.item {
+					display: flex;
+					align-items: center;
+				}
+
+				.no-token {
+					cursor: pointer;
+				}
+
+				.name {
+					margin-left: 10px;
+				}
+
+				.el-avatar {
+					background: var(--el-color-primary);
+
+					img {
+						background: #fff;
+					}
+				}
+			}
+		}
+
+		.projects-content {
+			display: flex;
+			width: 100%;
+			height: 0;
+			flex: 1;
+			padding: 0 10px 10px 10px;
+		}
+	}
+</style>

virgo.wzfrontend/aiChat/vite.config.js

@@ -22,13 +22,13 @@ export default defineConfig({
 				ws: true, // 允许websocket代理
 				// 重写路径 --> 作用与vue配置pathRewrite作用相同
 				rewrite: (path) => path.replace(/^\/apiV1/, "")
-			},
-			'/difyApi': { // 配置需要代理的路径
-				target: 'http://203.110.233.149/v1', // 目标地址 --> 服务器地址
-				changeOrigin: true, // 允许跨域
-				ws: true, // 允许websocket代理
-				// 重写路径 --> 作用与vue配置pathRewrite作用相同
-				rewrite: (path) => path.replace(/^\/difyApi/, "")
+			},
+			'/difyAPI': { // 配置需要代理的路径
+				target: 'http://203.110.233.149:9000', // 目标地址 --> 服务器地址
+				changeOrigin: true, // 允许跨域
+				ws: true, // 允许websocket代理
+				// 重写路径 --> 作用与vue配置pathRewrite作用相同
+				rewrite: (path) => path.replace(/^\/difyAPI/, "")
 			}
 		},
 	}

virgo.wzfrontend/src/main/resources/static/ai/assets/_plugin-vue_export-helper-DlAUqK2U.js

@@ -0,0 +1 @@
+const s=(t,r)=>{const o=t.__vccOpts||t;for(const[c,e]of r)o[c]=e;return o};export{s as _};

virgo.wzfrontend/src/main/resources/static/ai/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" href="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed">
+		<title>WorkArk AI</title>
+		<script type="module" crossorigin src="./assets/index-BOKVlElC.js"></script>
+		<link rel="stylesheet" crossorigin href="./assets/index-95H28FZP.css">
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>