feat(ai-chat): 集成DeepChat组件重构聊天界面
All checks were successful
Lint Code / Lint Code (push) Successful in 3m55s
All checks were successful
Lint Code / Lint Code (push) Successful in 3m55s
- 将自定义消息列表和输入区域替换为DeepChat组件 - 新增ChatGPT组件支持历史记录传递和自定义请求处理 - 重构消息处理逻辑,简化SSE连接管理 - 改进项目选择和会话管理流程
This commit is contained in:
@@ -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 }"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user