perf: 调整交互
This commit is contained in:
@ -40,7 +40,7 @@ export default {
|
|||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
emit('submit', localSearchValue.value);
|
emit('submit', localSearchValue.value);
|
||||||
localSearchValue.value = ''
|
// localSearchValue.value = ''
|
||||||
};
|
};
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
emit('cancel');
|
emit('cancel');
|
||||||
|
|||||||
@ -30,6 +30,7 @@ export default {
|
|||||||
const rightViewRef = ref(null);
|
const rightViewRef = ref(null);
|
||||||
const bubbleListRef = ref<any>(null);
|
const bubbleListRef = ref<any>(null);
|
||||||
const sseController = ref<any>(null);
|
const sseController = ref<any>(null);
|
||||||
|
const searchValue = ref<string>('');
|
||||||
|
|
||||||
const handleSubmit = (message: string) => {
|
const handleSubmit = (message: string) => {
|
||||||
if (generateLoading.value) {
|
if (generateLoading.value) {
|
||||||
@ -37,6 +38,8 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
searchValue.value = '';
|
||||||
|
|
||||||
conversationList.value.push({
|
conversationList.value.push({
|
||||||
role: QUESTION_ROLE,
|
role: QUESTION_ROLE,
|
||||||
content: message,
|
content: message,
|
||||||
@ -50,7 +53,7 @@ export default {
|
|||||||
sseController.value.abort?.();
|
sseController.value.abort?.();
|
||||||
sseController.value = null;
|
sseController.value = null;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleCancel = () => {
|
const handleCancel = () => {
|
||||||
if (generateLoading.value) {
|
if (generateLoading.value) {
|
||||||
@ -142,7 +145,7 @@ export default {
|
|||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearSseController();
|
clearSseController();
|
||||||
})
|
});
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<div class="chat-view-wrap w-full h-full flex">
|
<div class="chat-view-wrap w-full h-full flex">
|
||||||
@ -159,6 +162,7 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
<div class="w-full flex flex-col justify-center items-center">
|
<div class="w-full flex flex-col justify-center items-center">
|
||||||
<SenderInput
|
<SenderInput
|
||||||
|
v-model={searchValue.value}
|
||||||
ref={senderRef}
|
ref={senderRef}
|
||||||
class="w-600px"
|
class="w-600px"
|
||||||
placeholder="继续追问..."
|
placeholder="继续追问..."
|
||||||
|
|||||||
@ -46,9 +46,9 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
const conversationList = ref<MESSAGE.Answer[]>([]);
|
const conversationList = ref<MESSAGE.Answer[]>([]);
|
||||||
const generateLoading = ref<boolean>(false);
|
const generateLoading = ref<boolean>(false);
|
||||||
const generateTeamRunTaskId = ref<string | null>(null);
|
const generateTeamRunTaskId = ref<string | null>(null);
|
||||||
|
|
||||||
const showRightView = ref(false);
|
const showRightView = ref(false);
|
||||||
const rightViewData = ref<any>({});
|
const rightViewData = ref<any>({});
|
||||||
const lastTeamRunTaskId = ref<string | null>(null); // 最近一个对话的id
|
|
||||||
|
|
||||||
// 初始化markdown
|
// 初始化markdown
|
||||||
const md = markdownit({
|
const md = markdownit({
|
||||||
@ -184,11 +184,13 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
const getTeamRunTask = (teamRunTaskId: string) => {
|
const getTeamRunTask = (teamRunTaskId: string) => {
|
||||||
return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
|
return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
|
||||||
};
|
};
|
||||||
const isLastRunTask = (run_id: string): boolean => {
|
const isLastRunTask = (data: MESSAGE.Answer): boolean => {
|
||||||
return getLastRunTask(lastTeamRunTaskId.value).run_id === run_id;
|
const { teamRunTaskId, run_id } = data;
|
||||||
|
return getLastRunTask(teamRunTaskId).run_id === run_id;
|
||||||
};
|
};
|
||||||
const isFirstRunTask = (run_id: string): boolean => {
|
const isFirstRunTask = (data: MESSAGE.Answer): boolean => {
|
||||||
return getFirstRunTask(lastTeamRunTaskId.value).run_id === run_id;
|
const { teamRunTaskId, run_id } = data;
|
||||||
|
return getFirstRunTask(teamRunTaskId).run_id === run_id;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 过程节点开始
|
// 过程节点开始
|
||||||
@ -198,23 +200,23 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
conversationList.value.push({
|
conversationList.value.push({
|
||||||
run_id,
|
run_id,
|
||||||
key: run_id,
|
key: run_id,
|
||||||
teamRunTaskId: lastTeamRunTaskId.value,
|
teamRunTaskId: generateTeamRunTaskId.value,
|
||||||
content: { ...data, runStatus: EnumTeamRunStatus.RunStarted },
|
content: { ...data, runStatus: EnumTeamRunStatus.RunStarted, teamRunTaskId: generateTeamRunTaskId.value },
|
||||||
output: data.output,
|
output: data.output,
|
||||||
role: ANSWER_ROLE,
|
role: ANSWER_ROLE,
|
||||||
messageRender: (data: MESSAGE.Answer) => {
|
messageRender: (data: MESSAGE.Answer) => {
|
||||||
const { node, output, runStatus, isCollapse = true, customRender } = data;
|
const { node, output, runStatus, isCollapse = true, customRender, teamRunTaskId } = data;
|
||||||
const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
|
const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
|
||||||
|
|
||||||
let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-6px mb-4px`;
|
let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px pl-12px relative left-6px mb-4px`;
|
||||||
!isLastRunTask(run_id) && (outputEleClass += ' hasLine pb-12px pt-4px');
|
!isLastRunTask(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isFirstRunTask(run_id) && (
|
{isFirstRunTask(data) && (
|
||||||
<div
|
<div
|
||||||
class="flex items-center mb-8px cursor-pointer"
|
class="flex items-center mb-8px cursor-pointer"
|
||||||
onClick={() => setRunTaskCollapse(lastTeamRunTaskId.value, !isCollapse)}
|
onClick={() => setRunTaskCollapse(teamRunTaskId, !isCollapse)}
|
||||||
>
|
>
|
||||||
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
|
<span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
|
||||||
{isCollapse ? (
|
{isCollapse ? (
|
||||||
@ -265,14 +267,13 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
// 任务开始
|
// 任务开始
|
||||||
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
|
const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
|
||||||
const { run_id } = data;
|
const { run_id } = data;
|
||||||
lastTeamRunTaskId.value = run_id;
|
|
||||||
generateTeamRunTaskId.value = run_id;
|
generateTeamRunTaskId.value = run_id;
|
||||||
conversationList.value.push({
|
conversationList.value.push({
|
||||||
run_id,
|
run_id,
|
||||||
isTeamRunTask: true,
|
isTeamRunTask: true,
|
||||||
teamRunTaskId: lastTeamRunTaskId.value,
|
teamRunTaskId: generateTeamRunTaskId.value,
|
||||||
key: run_id,
|
key: run_id,
|
||||||
content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted },
|
content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted, teamRunTaskId: run_id },
|
||||||
output: data.output,
|
output: data.output,
|
||||||
role: ANSWER_ROLE,
|
role: ANSWER_ROLE,
|
||||||
messageRender: (data: MESSAGE.Answer) => {
|
messageRender: (data: MESSAGE.Answer) => {
|
||||||
@ -293,9 +294,10 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
const handleTeamRunTaskEnd = (data: MESSAGE.Answer) => {
|
const handleTeamRunTaskEnd = (data: MESSAGE.Answer) => {
|
||||||
resetGenerateStatus();
|
resetGenerateStatus();
|
||||||
|
|
||||||
const { run_id, extra_data, output } = data;
|
const { run_id: teamRunTaskId, extra_data, output } = data;
|
||||||
const _hasRunTask = hasRunTask(lastTeamRunTaskId.value);
|
|
||||||
const _targetTask = _hasRunTask ? getLastRunTask(run_id) : getTeamRunTask(lastTeamRunTaskId.value);
|
const _hasRunTask = hasRunTask(teamRunTaskId);
|
||||||
|
const _targetTask = _hasRunTask ? getLastRunTask(teamRunTaskId) : getTeamRunTask(teamRunTaskId);
|
||||||
|
|
||||||
if (isEmpty(_targetTask)) {
|
if (isEmpty(_targetTask)) {
|
||||||
return;
|
return;
|
||||||
@ -303,7 +305,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
|
|
||||||
// 含有思考过程,折叠思考过程,展示结果
|
// 含有思考过程,折叠思考过程,展示结果
|
||||||
if (_hasRunTask) {
|
if (_hasRunTask) {
|
||||||
setRunTaskCollapse(lastTeamRunTaskId.value, false);
|
setRunTaskCollapse(teamRunTaskId, false);
|
||||||
if (extra_data) {
|
if (extra_data) {
|
||||||
showRightView.value = true;
|
showRightView.value = true;
|
||||||
rightViewData.value = extra_data.data;
|
rightViewData.value = extra_data.data;
|
||||||
@ -333,7 +335,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
}
|
}
|
||||||
|
|
||||||
_targetTask.footer = () => {
|
_targetTask.footer = () => {
|
||||||
const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === run_id;
|
const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
|
||||||
return (
|
return (
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
{!extra_data && (
|
{!extra_data && (
|
||||||
@ -347,7 +349,7 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
{isShow && (
|
{isShow && (
|
||||||
<Tooltip title="重新生成" onClick={() => onRefresh(run_id)}>
|
<Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)}>
|
||||||
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
|
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -13,6 +13,7 @@ interface ConversationItem {
|
|||||||
label: string | VNode;
|
label: string | VNode;
|
||||||
icon?: string | VNode;
|
icon?: string | VNode;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
|
maxlength?: number;
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,6 +55,10 @@ export default defineComponent({
|
|||||||
type: Array as () => ConversationItem[],
|
type: Array as () => ConversationItem[],
|
||||||
default: () => DEFAULT_MENU_CONFIG,
|
default: () => DEFAULT_MENU_CONFIG,
|
||||||
},
|
},
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
emits: ['activeChange', 'menuClick', 'update:dataSource', 'update:modelValue', 'rename'],
|
emits: ['activeChange', 'menuClick', 'update:dataSource', 'update:modelValue', 'rename'],
|
||||||
setup(props, { emit, expose }) {
|
setup(props, { emit, expose }) {
|
||||||
@ -109,6 +114,7 @@ export default defineComponent({
|
|||||||
<Input
|
<Input
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
v-model:value={item.label}
|
v-model:value={item.label}
|
||||||
|
maxlength={props.maxlength}
|
||||||
onBlur={() => {
|
onBlur={() => {
|
||||||
item.editing = false;
|
item.editing = false;
|
||||||
changeItems();
|
changeItems();
|
||||||
|
|||||||
Reference in New Issue
Block a user