fix error async

backend/src/main/java/com/zl/mjga/config/ai/DeepSeekChatAssistant.java

@@ -7,6 +7,5 @@ import dev.langchain4j.service.UserMessage;
 import dev.langchain4j.service.memory.ChatMemoryAccess;
 
 public interface DeepSeekChatAssistant extends ChatMemoryAccess {
-  @SystemMessage("You are a good friend of mine. Answer using slang.")
   TokenStream chat(@MemoryId String memoryId, @UserMessage String userMessage);
 }

backend/src/main/java/com/zl/mjga/config/security/WebSecurityConfig.java

@@ -39,7 +39,6 @@ public class WebSecurityConfig {
     return new OrRequestMatcher(
         new AntPathRequestMatcher("/auth/sign-in", HttpMethod.POST.name()),
         new AntPathRequestMatcher("/auth/sign-up", HttpMethod.POST.name()),
-        new AntPathRequestMatcher("/ai/**", HttpMethod.POST.name()),
         new AntPathRequestMatcher("/v3/api-docs/**", HttpMethod.GET.name()),
         new AntPathRequestMatcher("/swagger-ui/**", HttpMethod.GET.name()),
         new AntPathRequestMatcher("/swagger-ui.html", HttpMethod.GET.name()),
@@ -63,6 +62,9 @@ public class WebSecurityConfig {
                     .permitAll()
                     .anyRequest()
                     .authenticated())
+            .securityContext(securityContext -> securityContext
+                    .requireExplicitSave(false)
+            )
         .exceptionHandling(
             (exceptionHandling) ->
                 exceptionHandling

backend/src/main/java/com/zl/mjga/controller/AiController.java

@@ -2,14 +2,14 @@ package com.zl.mjga.controller;
 
 import com.zl.mjga.service.DeepSeekAiService;
 import dev.langchain4j.service.TokenStream;
+
+import java.security.Principal;
 import java.time.Duration;
 import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.http.MediaType;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.security.core.context.SecurityContextHolder;
-import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Sinks;
 
@@ -22,20 +22,20 @@ public class AiController {
   private final DeepSeekAiService deepSeekAiService;
 
   @PostMapping(value = "/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
-  public Flux<String> chat(@RequestBody String userMessage) {
+  public Flux<String> chat(Principal principal, @RequestBody String userMessage) {
     Sinks.Many<String> sink = Sinks.many().unicast().onBackpressureBuffer();
-    TokenStream chat = deepSeekAiService.chat("123", userMessage);
+    TokenStream chat = deepSeekAiService.chat(principal.getName(), userMessage);
     chat.onPartialResponse(sink::tryEmitNext)
         .onCompleteResponse(
             r -> {
-              sink.tryEmitNext("[DONE]");
               sink.tryEmitComplete();
+              sink.emitComplete(Sinks.EmitFailureHandler.FAIL_FAST);
             })
         .onError(sink::tryEmitError)
         .start();
-
+      return sink.asFlux()
-    return sink.asFlux()
+              .timeout(Duration.ofSeconds(120))
-        .timeout(Duration.ofSeconds(60))
+              .doOnCancel(SecurityContextHolder::clearContext)
-        .onErrorResume(e -> Flux.just("Timeout occurred"));
+              .doOnTerminate(SecurityContextHolder::clearContext);
   }
 }

frontend/.env

@@ -1,11 +1,11 @@
 VITE_APP_PORT=5173
 VITE_SOURCE_MAP=true
 # mock
-VITE_ENABLE_MOCK=true
+#VITE_ENABLE_MOCK=true
-VITE_BASE_URL=http://localhost:5173
+#VITE_BASE_URL=http://localhost:5173
 # local
-#VITE_ENABLE_MOCK=false
+VITE_ENABLE_MOCK=false
-#VITE_BASE_URL=http://localhost:8080
+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>