fix error async

frontend/.env

@@ -1,11 +1,11 @@
 VITE_APP_PORT=5173
 VITE_SOURCE_MAP=true
 # mock
-VITE_ENABLE_MOCK=true
-VITE_BASE_URL=http://localhost:5173
+#VITE_ENABLE_MOCK=true
+#VITE_BASE_URL=http://localhost:5173
 # local
-#VITE_ENABLE_MOCK=false
-#VITE_BASE_URL=http://localhost:8080
+VITE_ENABLE_MOCK=false
+VITE_BASE_URL=http://localhost:8080
 # dev
 #VITE_ENABLE_MOCK=false
 #VITE_BASE_URL=https://localhost/api

frontend/package-lock.json

@@ -8,6 +8,7 @@
 			"name": "frontend",
 			"version": "1.0",
 			"dependencies": {
+				"@microsoft/fetch-event-source": "^2.0.1",
 				"@tailwindcss/vite": "^4.0.14",
 				"@vueuse/core": "^13.0.0",
 				"apexcharts": "^3.46.0",
@@ -1318,6 +1319,12 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@microsoft/fetch-event-source": {
+			"version": "2.0.1",
+			"resolved": "http://mirrors.tencent.com/npm/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
+			"integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==",
+			"license": "MIT"
+		},
 		"node_modules/@mswjs/interceptors": {
 			"version": "0.37.6",
 			"resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.6.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
 		"type-check": "vue-tsc --build"
 	},
 	"dependencies": {
+		"@microsoft/fetch-event-source": "^2.0.1",
 		"@tailwindcss/vite": "^4.0.14",
 		"@vueuse/core": "^13.0.0",
 		"apexcharts": "^3.46.0",
@@ -51,6 +52,8 @@
 		"vue-tsc": "^2.2.8"
 	},
 	"msw": {
-		"workerDirectory": ["public"]
+		"workerDirectory": [
+			"public"
+		]
 	}
 }

frontend/src/api/mocks/aiHandlers.ts

@@ -4,7 +4,7 @@ import { http, HttpResponse } from "msw";
 export default [
 	http.post("/ai/chat", () => {
 		const response = HttpResponse.json({
-			message: faker.lorem.sentence(1000),
+			message: faker.lorem.sentence({ min: 100, max: 300 }),
 		});
 		return response;
 	}),

frontend/src/composables/ai/useAiChat.ts

@@ -1,31 +1,54 @@
+import { fetchEventSource } from "@microsoft/fetch-event-source";
 import { ref } from "vue";
-import client from "../../api/client";
+import useAuthStore from "../store/useAuthStore";
+
+const authStore = useAuthStore();
 
 export const useAiChat = () => {
 	const messages = ref<string[]>([]);
 	const isLoading = ref(false);
 
+	let currentController: AbortController | null = null;
+
 	const chat = async (message: string) => {
 		isLoading.value = true;
+		messages.value.push(message);
+		messages.value.push("");
+		const ctrl = new AbortController();
+		currentController = ctrl;
+
 		try {
-			const { response } = await client.POST("/ai/chat", {
+			const baseUrl = `${import.meta.env.VITE_BASE_URL}`;
+
+			await fetchEventSource(`${baseUrl}/ai/chat`, {
+				method: "POST",
+				headers: {
+					Authorization: authStore.get(),
+					"Content-Type": "application/json",
+				},
 				body: message,
-				parseAs: "stream",
+				signal: ctrl.signal,
+				onmessage(ev) {
+					messages.value[messages.value.length - 1] += ev.data;
+				},
+				onclose() {
+					console.log("onclose");
+				},
+				onerror(err) {
+					throw err;
+				},
 			});
-			const reader = response.body?.getReader();
-			if (reader) {
-				const decoder = new TextDecoder();
-				while (true) {
-					const { done, value } = await reader.read();
-					if (done) break;
-					messages.value.push(decoder.decode(value, { stream: true }));
-					console.log(decoder.decode(value));
-				}
-				return;
-			}
 		} finally {
 			isLoading.value = false;
 		}
 	};
-	return { messages, chat, isLoading };
+
+	const cancel = () => {
+		if (currentController) {
+			currentController.abort();
+			currentController = null;
+		}
+	};
+
+	return { messages, chat, isLoading, cancel };
 };

frontend/src/views/AiChatView.vue

@@ -5,9 +5,9 @@
         class="flex items-start gap-2.5">
         <img class="w-8 h-8 rounded-full" src="/trump.jpg" alt="Jese image">
         <div
-          class="flex flex-col leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
+          :class="['flex flex-col leading-1.5 p-4 border-gray-200 rounded-e-xl rounded-es-xl dark:bg-gray-700', chatElement.isUser ? 'bg-gray-100' : 'bg-blue-100']">
           <div class="flex items-center space-x-2 rtl:space-x-reverse">
-            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ user.username }}</span>
+            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ chatElement.username }}</span>
           </div>
           <p class="text-base font-normal py-2.5 text-gray-900 dark:text-white">{{ chatElement.content }}</p>
         </div>
@@ -61,12 +61,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
 import Button from "../components/Button.vue";
 import { useAiChat } from "../composables/ai/useAiChat";
 import useUserStore from "../composables/store/useUserStore";
 
-const { messages, chat, isLoading } = useAiChat();
+const { messages, chat, isLoading, cancel } = useAiChat();
 const { user } = useUserStore();
 const inputMessage = ref("");
 const chatContainer = ref<HTMLElement | null>(null);
@@ -76,7 +76,7 @@ const chatElements = computed(() => {
 		return {
 			content: message,
 			username: index % 2 === 0 ? user.username : "DeepSeek",
-			isUser: index % 2 === 0,
+			isUser: index % 2 !== 0,
 		};
 	});
 });
@@ -90,7 +90,6 @@ watch(
 	{ deep: true },
 );
 
-// 滚动到底部的函数
 const scrollToBottom = () => {
 	if (chatContainer.value) {
 		chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
@@ -98,8 +97,12 @@ const scrollToBottom = () => {
 };
 
 const handleSendClick = async (event: Event) => {
-	await chat(inputMessage.value);
+  chat(inputMessage.value);
 	inputMessage.value = "";
 	scrollToBottom();
 };
+
+onUnmounted(() => {
+	cancel();
+});
 </script>