mirror of
https://github.com/ccmjga/zhilu-admin
synced 2026-03-21 10:03:44 +08:00
fix error async
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
import org.springframework.security.core.context.SecurityContextHolder;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
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()
|
||||
.timeout(Duration.ofSeconds(60))
|
||||
.onErrorResume(e -> Flux.just("Timeout occurred"));
|
||||
return sink.asFlux()
|
||||
.timeout(Duration.ofSeconds(120))
|
||||
.doOnCancel(SecurityContextHolder::clearContext)
|
||||
.doOnTerminate(SecurityContextHolder::clearContext);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
7
frontend/package-lock.json
generated
7
frontend/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}),
|
||||
|
||||
@@ -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 };
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user