renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 对话式首页接口对接，逻辑调整

Browse Source
This commit is contained in:
rd
2025-08-26 17:59:42 +08:00
parent 6211c78c07
commit a125f6f092
12 changed files with 320 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
src/components/xt-chat/chat-view/useChatHandler.tsx
View File

@ -1,36 +1,46 @@
import { ref, } from 'vue';
import { ref } from 'vue';
import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
import markdownit from 'markdown-it';
import { message as antdMessage } from 'ant-design-vue';
import { IconFile, IconCaretUp, IconDownload, IconRefresh } from '@arco-design/web-vue/es/icon';
import { message as antdMessage, Timeline } from 'ant-design-vue';
import { IconFile, IconCaretUp, IconDownload, IconRefresh, IconCopy } from '@arco-design/web-vue/es/icon';
import { Tooltip } from 'ant-design-vue';
import TextOverTips from '@/components/text-over-tips/index.vue';
import { genRandomId } from '@/utils/tools';
import icon1 from "@/assets/img/agent/icon-end.png"
import icon2 from "@/assets/img/agent/icon-loading.png"
import icon1 from '@/assets/img/agent/icon-end.png';
import icon2 from '@/assets/img/agent/icon-loading.png';
import { useClipboard } from '@vueuse/core';
import { QUESTION_ROLE, ANSWER_ROLE, FILE_ROLE, THOUGHT_ROLE, ROLE_STYLE, ANSWER_STYLE } from './constants';
import type { UseChatHandlerReturn } from "./constants"
import {
QUESTION_ROLE,
ANSWER_ROLE,
INTELLECTUAL_THINKING_ROLE,
FILE_ROLE,
LOADING_ROLE,
THOUGHT_ROLE,
ROLE_STYLE,
EnumTeamRunStatus,
} from './constants';
import type { UseChatHandlerReturn } from './constants';
/**
* 聊天处理器Hook
* @returns 包含角色配置、消息处理函数和对话列表的对象
/**
* 聊天处理器Hook
* @returns 包含角色配置、消息处理函数和对话列表的对象
*/
export default function useChatHandler(): UseChatHandlerReturn {
export default function useChatHandler({ initSse }): UseChatHandlerReturn {
// 在内部定义对话列表
const { copy } = useClipboard();
const senderRef = ref(null);
const conversationList = ref<any[]>([]);
const generateLoading = ref<boolean>(false);
const currentTaskId = ref<string | null>(null);
const showRightView = ref(false);
const rightViewContent = ref('');
const rightViewInfo = ref<any>({});
// 初始化markdown
// 初始化markdown
const md = markdownit({
html: true,
breaks: true,
@ -38,8 +48,19 @@ export default function useChatHandler(): UseChatHandlerReturn {
typographer: true,
});
// 定义角色配置
// 定义角色配置
const roles: BubbleListProps['roles'] = {
[LOADING_ROLE]: {
placement: 'start',
variant: 'borderless',
style: { ...ROLE_STYLE, paddingLeft: '12px' },
},
[INTELLECTUAL_THINKING_ROLE]: {
placement: 'start',
variant: 'borderless',
typing: { step: 2, interval: 100 },
style: ROLE_STYLE,
},
[ANSWER_ROLE]: {
placement: 'start',
variant: 'borderless',
@ -47,7 +68,7 @@ export default function useChatHandler(): UseChatHandlerReturn {
onTypingComplete: () => {
currentTaskId.value = null;
},
style: ROLE_STYLE
style: ROLE_STYLE,
},
[FILE_ROLE]: {
placement: 'start',
@ -67,24 +88,23 @@ export default function useChatHandler(): UseChatHandlerReturn {
</div>
));
},
style: ROLE_STYLE
style: ROLE_STYLE,
},
[THOUGHT_ROLE]: {
placement: 'start',
variant: 'borderless',
style: ROLE_STYLE
style: ROLE_STYLE,
},
[QUESTION_ROLE]: {
placement: 'end',
shape: 'round',
style: ROLE_STYLE
style: ROLE_STYLE,
},
};
// 下载处理
const onDownload = (content: string) => {
console.log('onDownload', content);
// 这里可以添加实际的下载逻辑
// 下载处理
const onDownload = () => {
console.log('onDownload', rightViewInfo.value);
};
const onCopy = (content: string) => {
@ -92,123 +112,161 @@ export default function useChatHandler(): UseChatHandlerReturn {
antdMessage.success('复制成功！');
};
// 开始处理
const handleStart = (data: any) => {
const { run_id } = data;
conversationList.value.push({
run_id,
role: ANSWER_ROLE,
content: (
<div class="flex items-center">
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
<IconCaretUp size={16} class="color-#211F24" />
</div>
),
});
// 开始处理
const handleOpen = (data: any): void => {
// const { run_id } = data;
// currentTaskId.value = run_id;
// conversationList.value.push({
// key: run_id,
// run_id,
// role: INTELLECTUAL_THINKING_ROLE,
// content: (
// <div class="flex items-center">
// <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
// <IconCaretUp size={16} class="color-#211F24" />
// </div>
// ),
// });
};
// 节点更新处理
const handleNodeUpdate = (data: any) => {
const { run_id, status, output } = data;
switch (status) {
case 'TeamRunResponseContent':
conversationList.value.push({
run_id,
content: data,
role: ANSWER_ROLE,
messageRender: (item) => (
<div class='flex items-center'>
<img src={icon2} width={13} height={13} class="mr-4px" />
<span>{item.message}</span>
</div>
)
});
break;
case 'TeamRunCompleted':
conversationList.value.push({
run_id,
content: output,
role: ANSWER_ROLE,
messageRender: (content: string) => <div v-html={md.render(content)}></div>,
style: ANSWER_STYLE
});
break;
}
};
// 最终结果处理
const handleFinalResult = (data: any) => {
// 最终结果处理
const handleFileReview = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
showRightView.value = true;
const _files = output?.files;
rightViewContent.value = _files?.[0]?.content || '';
// const _files = output?.files;
// rightViewInfo.value = _files?.[0]?.content || '';
conversationList.value.push({
run_id,
id: currentTaskId.value,
role: FILE_ROLE,
content: _files,
style: ANSWER_STYLE,
footer: ({ item }: { item: any }) => {
const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
// return (
// <div class="flex items-center">
// <Tooltip title="下载" onClick={() => onDownload(rightViewContent?.value || '')}>
// <IconDownload size={16} class="color-#737478 cursor-pointer" />
// </Tooltip>
// {isLastAnswer && onRefresh && (
// <Tooltip title="重新生成" onClick={() => onRefresh(currentTaskId.value!, conversationList.value.length)}>
// <IconRefresh size={16} class="color-#737478 cursor-pointer" />
// </Tooltip>
// )}
// </div>
// );
},
});
// conversationList.value.push({
// run_id,
// role: FILE_ROLE,
// content: _files,
// style: ANSWER_STYLE,
// footer: ({ item }: { item: any }) => {
// const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
// const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
// },
// });
};
// 重置生成状态
// 重置生成状态
const resetGenerateStatus = () => {
generateLoading.value = false;
};
// 错误处理
const handleError = () => {
resetGenerateStatus();
antdMessage.error('连接服务器失败');
};
// // 错误处理
// const handleError = () => {
// resetGenerateStatus();
// antdMessage.error('连接服务器失败');
// };
const onRefresh = (tempId: string, tempIndex: number) => {
generateLoading.value = true;
conversationList.value.splice(tempIndex, 1, {
id: tempId,
loading: true,
const handleTaskStart = (data: MESSAGE.Answer) => {
const { run_id } = data;
currentTaskId.value = run_id;
conversationList.value.push({
run_id,
content: data,
output: data.output,
role: ANSWER_ROLE,
messageRender: (data: MESSAGE.Answer) => {
let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-6px mb-4px`;
!isLastAnswer(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
return (
<>
<div class="flex items-center">
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
<IconCaretUp size={16} class="color-#211F24" />
</div>
<div class="relative thought-chain-item">
<div class="flex items-center mb-4px">
<img src={icon2} width={13} height={13} class="mr-4px" />
<div>{data.node}</div>
</div>
<div v-html={md.render(data.output ?? '')} class={outputEleClass} />
</div>
</>
);
},
});
};
// 消息处理主函数
const handleMessage = (parsedData: { event: string; data: any }) => {
const { event, data } = parsedData;
switch (event) {
case 'start':
handleStart(data);
const onRefresh = (run_id: string) => {
generateLoading.value = true;
conversationList.value = conversationList.value.filter((item) => item.run_id !== run_id);
initSse({ message: senderRef.value?.searchValue });
};
const isLastAnswer = (data: MESSAGE.Answer) => {
const { run_id } = data;
const nonQuestionElements = conversationList.value.filter(
(item) => item.role === ANSWER_ROLE && item.run_id === run_id,
);
return nonQuestionElements[nonQuestionElements.length - 1]?.run_id === run_id;
};
const isLastTask = (data: MESSAGE.Answer) => {
const { run_id } = data;
const lastElement = conversationList.value[conversationList.value.length - 1];
return lastElement && lastElement.run_id === run_id;
};
// 节点更新处理
const handleTaskUpdate = (data: MESSAGE.Answer) => {
const { run_id, output } = data;
const existingItemIndex = conversationList.value.findIndex((item) => item.run_id === run_id);
if (existingItemIndex !== -1 && output) {
const existingItem = conversationList.value[existingItemIndex];
existingItem.content.output += output;
}
};
const handleTaskEnd = (data: MESSAGE.Answer) => {
const { run_id, output, team_session_state } = data;
const existingItem = conversationList.value.find((item) => item.run_id === run_id);
resetGenerateStatus();
if (existingItem) {
existingItem.content.output += output;
existingItem.footer = ({ item: any }) => {
return (
<div class="flex items-center">
<Tooltip title="复制" onClick={() => onCopy(existingItem.content.output)}>
<IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
</Tooltip>
<Tooltip title="下载" onClick={onDownload}>
<IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
</Tooltip>
{isLastTask(data) && (
<Tooltip title="重新生成" onClick={() => onRefresh(run_id)}>
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
</Tooltip>
)}
</div>
);
};
}
if (team_session_state) {
handleFileReview(data);
}
};
// 消息处理主函数
const handleMessage = (parsedData: { event: string; data: MESSAGE.Answer }) => {
const { data } = parsedData;
const { status } = data;
switch (status) {
case EnumTeamRunStatus.TeamRunStarted:
handleTaskStart(data);
break;
case 'node_update':
handleNodeUpdate(data);
case EnumTeamRunStatus.TeamRunResponseContent:
handleTaskUpdate(data);
break;
case 'final_result':
handleFinalResult(data);
break;
case 'end':
resetGenerateStatus();
break;
case 'error':
handleError();
case EnumTeamRunStatus.TeamRunCompleted:
handleTaskEnd(data);
break;
default:
break;
@ -217,11 +275,13 @@ export default function useChatHandler(): UseChatHandlerReturn {
return {
roles,
senderRef,
currentTaskId,
handleMessage,
handleOpen,
generateLoading,
conversationList,
showRightView,
rightViewContent,
rightViewInfo,
};
}
}