feat(ai-chat): 集成DeepChat组件重构聊天界面
All checks were successful
Lint Code / Lint Code (push) Successful in 3m55s

- 将自定义消息列表和输入区域替换为DeepChat组件
- 新增ChatGPT组件支持历史记录传递和自定义请求处理
- 重构消息处理逻辑,简化SSE连接管理
- 改进项目选择和会话管理流程
This commit is contained in:
2026-04-01 14:51:02 +08:00
parent 5363ec8342
commit 5bb9b6d3db
2 changed files with 198 additions and 351 deletions

View File

@@ -1,25 +1,60 @@
<script setup lang="ts">
import "deep-chat";
import { ref, onMounted } from "vue";
import { ref, onMounted, watch } from "vue";
const chatRef = ref();
type HistoryItem = { text: string; role: "user" | "ai" };
const props = withDefaults(
defineProps<{
history?: HistoryItem[];
onRequest?: (messageText: string) => Promise<string> | string;
}>(),
{
history: () => []
}
);
const chatRef = ref<any>();
function normalizeUserText(rawMessage: any): string {
if (typeof rawMessage === "string") return rawMessage;
if (rawMessage?.text) return String(rawMessage.text);
return "";
}
function applyHistory() {
if (!chatRef.value) return;
chatRef.value.history = props.history || [];
}
onMounted(() => {
applyHistory();
chatRef.value.demo = {
response: message => {
console.log(message);
response: async (rawMessage: any) => {
const messageText = normalizeUserText(rawMessage);
if (props.onRequest) {
const replyText = await props.onRequest(messageText);
return { text: replyText };
}
return {
text: "仅演示如需AI服务请参考 https://deepchat.dev/docs/connect"
};
}
};
});
watch(
() => props.history,
() => {
applyHistory();
}
);
</script>
<template>
<deep-chat
ref="chatRef"
style="border-radius: 10px"
style=" width: 100%; height: 100%;border-radius: 10px"
:messageStyles="{
default: {
shared: {
@@ -101,13 +136,7 @@ onMounted(() => {
}
}"
:textInput="{ placeholder: { text: '发送消息' } }"
:history="[
{ text: '李白是谁?', role: 'user' },
{
text: '李白701年2月28日762年号青莲居士又号“谪仙人”是唐代著名的浪漫主义诗人被后人誉为“诗仙”。',
role: 'ai'
}
]"
:history="props.history"
:demo="true"
:connect="{ stream: true }"
/>