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

9
src/components/xt-chat/chat-view/components/right-view/index.vue
View File

@ -13,14 +13,16 @@ export default {
type: Boolean,
default: false,
},
rightViewContent: {
type: String,
default: '',
rightViewInfo: {
type: Object,
default: {},
},
},
setup(props, { emit, expose }) {
const bubbleRef = ref(null);
console.log(props.rightViewInfo)
const md = markdownit({
html: true,
breaks: true,
@ -85,7 +87,6 @@ export default {
variant="borderless"
style={{ width: '100%' }}
typing={{ step: 2, interval: 100 }}
content={props.rightViewContent}
onTypingComplete={() => {
console.log('onTypingComplete');
}}

1
src/components/xt-chat/chat-view/components/sender-input/index.vue
View File

@ -74,6 +74,7 @@ export default {
expose({
focus,
searchValue: computed(() => localSearchValue.value),
});
return () => (

13
src/components/xt-chat/chat-view/constants.ts
View File

@ -2,6 +2,8 @@ import type { Ref } from 'vue';
import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
// 定义角色常量
export const LOADING_ROLE = 'loading'; // 加载中
export const INTELLECTUAL_THINKING_ROLE = 'intellectual_thinking'; // 智能思考标题
export const QUESTION_ROLE = 'question';
export const ANSWER_ROLE = 'text';
export const FILE_ROLE = 'file';
@ -23,9 +25,16 @@ export const ANSWER_STYLE = {
export interface UseChatHandlerReturn {
roles: BubbleListProps['roles'];
currentTaskId: Ref<string | null>;
handleMessage: (parsedData: { event: string; data: any }) => void;
handleMessage: (parsedData: { event: string; data: MESSAGE.Answer }) => void;
handleOpen: (data: Response) => void;
generateLoading: Ref<boolean>;
conversationList: Ref<any[]>;
showRightView: Ref<boolean>;
rightViewContent: Ref<string>;
rightViewInfo: Ref<any>;
senderRef: Ref<null>
}
export enum EnumTeamRunStatus {
TeamRunStarted = 'TeamRunStarted', // 开始
TeamRunResponseContent = 'TeamRunResponseContent', // 执行中
TeamRunCompleted = 'TeamRunCompleted', // 完成
}

79
src/components/xt-chat/chat-view/index.vue
View File

@ -6,12 +6,11 @@ import { Typography } from 'ant-design-vue';
import RightView from './components/right-view/index.vue';
import { useRoute } from 'vue-router';
import { genRandomId } from '@/utils/tools';
import { useChatStore } from '@/stores/modules/chat';
import querySSE from '@/utils/querySSE';
import useChatHandler from './useChatHandler';
import { QUESTION_ROLE, ANSWER_ROLE } from './constants';
import { QUESTION_ROLE, LOADING_ROLE } from './constants';
export default {
props: {
@ -25,12 +24,9 @@ export default {
const route = useRoute();
const senderRef = ref(null);
const rightViewRef = ref(null);
const bubbleListRef = ref<any>(null);
const { roles, showRightView, rightViewContent, currentTaskId, handleMessage, conversationList, generateLoading } =
useChatHandler();
const sseController = ref<any>(null);
const conversationId = computed(() => {
return route.params.conversationId;
@ -41,42 +37,49 @@ export default {
antdMessage.warning('停止生成后可发送');
return;
}
conversationList.value.push({
role: QUESTION_ROLE,
content: message,
});
initSse({ message });
};
const handleCancel = () => {
generateLoading.value = false;
// 中止当前正在输出的回答
if (currentTaskId.value && bubbleListRef.value?.abortTypingByKey) {
bubbleListRef.value.abortTypingByKey(currentTaskId.value);
if (generateLoading.value) {
bubbleListRef.value?.abortTypingByKey(currentTaskId.value);
sseController.value?.abort?.();
}
if (showRightView.value) {
rightViewRef.value?.abortTyping?.();
}
generateLoading.value = false;
antdMessage.info('取消生成');
};
const initSse = (inputInfo: CHAT.TInputInfo) => {
const initSse = (inputInfo: CHAT.TInputInfo): void => {
if (sseController.value) {
sseController.value.abort?.();
sseController.value = null;
}
try {
const { message } = inputInfo;
generateLoading.value = true;
conversationList.value.push({
role: QUESTION_ROLE,
content: message,
sseController.value = querySSE({
method: 'POST',
handleMessage,
handleOpen,
body: JSON.stringify({
content: message,
session_id: conversationId.value,
agent_id: chatStore.agentInfo.agent_id,
}),
});
const taskId = genRandomId();
currentTaskId.value = taskId;
const url = `http://localhost:3000/agent/input?content=${message}&session_id=${conversationId.value}&agent_id=${chatStore.agentInfo?.agent_id}`;
querySSE(
{
handleMessage,
},
url,
);
} catch (error) {
console.error('Failed to initialize SSE:', error);
antdMessage.error('初始化连接失败');
@ -84,10 +87,30 @@ export default {
}
};
const {
roles,
showRightView,
rightViewInfo,
currentTaskId,
handleMessage,
handleOpen,
conversationList,
generateLoading,
senderRef,
} = useChatHandler({
initSse,
});
watch(
() => props.inputInfo,
(newVal) => {
newVal && initSse(newVal);
if (newVal) {
conversationList.value.push({
role: QUESTION_ROLE,
content: newVal,
});
initSse(newVal);
}
},
{ deep: true },
);
@ -101,14 +124,14 @@ export default {
roles={roles}
items={[
...conversationList.value,
generateLoading.value ? { loading: true, role: ANSWER_ROLE } : null,
generateLoading.value ? { loading: true, role: LOADING_ROLE } : null,
].filter(Boolean)}
/>
</div>
<div class="w-full flex flex-col justify-center items-center">
<SenderInput
class="w-600px"
ref={senderRef}
class="w-600px"
placeholder="继续追问..."
loading={generateLoading.value}
onSubmit={handleSubmit}
@ -122,7 +145,7 @@ export default {
{showRightView.value && (
<RightView
ref={rightViewRef}
rightViewContent={rightViewContent.value}
rightViewInfo={rightViewInfo.value}
showRightView={showRightView.value}
onClose={() => (showRightView.value = false)}
/>

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,
};
}
}