From 4eb38b646ea064450208d28f94ee1e348a7d10d9 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期一, 04 十一月 2024 16:28:13 +0800
Subject: [PATCH] 提交代码
---
src/api/ai/chat.ts | 3
vite.config.ts | 2
src/components/chat/Chat.vue | 236 ++++++++++++++++++++++++-----------------------
src/components/chat/hooks/useScrollLoad.ts | 22 ++++
src/utils/request.ts | 2
src/components/chat/model/types.ts | 22 ++++
customer_list/common/static/fonts/ywiconfont/iconfont.css | 9 +
7 files changed, 176 insertions(+), 120 deletions(-)
diff --git a/customer_list/common/static/fonts/ywiconfont/iconfont.css b/customer_list/common/static/fonts/ywiconfont/iconfont.css
index 93af6eb..28004bc 100644
--- a/customer_list/common/static/fonts/ywiconfont/iconfont.css
+++ b/customer_list/common/static/fonts/ywiconfont/iconfont.css
@@ -1,8 +1,14 @@
@font-face {
font-family: "ywifont"; /* Project id 4655417 */
+<<<<<<< HEAD
src: url('iconfont.woff2?t=1730700980632') format('woff2'),
url('iconfont.woff?t=1730700980632') format('woff'),
url('iconfont.ttf?t=1730700980632') format('truetype');
+=======
+ src: url('iconfont.woff2?t=1730692341015') format('woff2'),
+ url('iconfont.woff?t=1730692341015') format('woff'),
+ url('iconfont.ttf?t=1730692341015') format('truetype');
+>>>>>>> 3e52ec41322cd3bbb96f8d1492dc9b69cebd6661
}
.ywifont {
@@ -13,10 +19,13 @@
-moz-osx-font-smoothing: grayscale;
}
+<<<<<<< HEAD
.ywicon-cubelifangti:before {
content: "\e6fc";
}
+=======
+>>>>>>> 3e52ec41322cd3bbb96f8d1492dc9b69cebd6661
.ywicon-loading1:before {
content: "\e617";
}
diff --git a/src/api/ai/chat.ts b/src/api/ai/chat.ts
index ec45975..2a2724c 100644
--- a/src/api/ai/chat.ts
+++ b/src/api/ai/chat.ts
@@ -266,6 +266,9 @@
method: 'post',
params: {},
data: params,
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded',
+ },
},
callback
);
diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index 22c8727..2caf1e6 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -23,98 +23,88 @@
/>
<div class="flex-auto flex" :class="{ 'justify-end': item.role === RoleEnum.user }">
<div class="inline-flex flex-col" :class="{ 'w-full': item.role === RoleEnum.assistant }">
- <div class="w-full" v-if="isTalking && index === computedMessageList.length - 1">
- <div class="text-sm rounded-[6px] p-4 leading-relaxed bg-white" v-if="item.role === RoleEnum.assistant">
- <!-- 杩囩▼杈撳嚭 -->
- <el-steps direction="vertical" :active="activeStep">
- <!-- <el-step title="process" status="process" />
- <el-step title="success" status="success" />
- <el-step title="wait" status="wait" />
- <el-step title="finish" status="finish" />
- <el-steps title="error" status="error" /> -->
-
- <el-step v-for="item in stepList" :title="item.title" :status="stepEnumMap[item.status]" />
- </el-steps>
- </div>
- </div>
- <div class="w-full" v-if="item.content?.values">
+ <div class="w-full">
<div
class="text-sm rounded-[6px] p-4 leading-relaxed"
:style="{ backgroundColor: item.role === RoleEnum.user ? 'rgb(197 224 255)' : 'white' }"
>
- <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
- <p class="text-red-500">
- {{ item.content.errMsg }}
- </p>
- <div class="mt-5 flex items-center" v-if="showFixQuestion(item)">
- <div class="text-gray-600 flex-0">
- {{ item.content.origin.err_json.fix_question.title + '锛�' }}
- </div>
- <div class="ml-1 space-x-2 inline-flex flex-wrap">
- <div
- v-for="fixItem in item.content.origin.err_json.fix_question?.values"
- :key="fixItem"
- class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
- @click="fixQuestionClick(fixItem, item.content.origin)"
- >
- {{ fixItem.title }}
- </div>
- </div>
- </div>
- </div>
- <template v-else>
- <el-popover placement="bottom-start" trigger="hover" :popper-style="{ minWidth: '70px' }" :width="70">
- <template #default>
- <div class="action" v-if="item.role === RoleEnum.user">
- <div class="flex items-center justify-center size-[20px]">
- <i
- class="p-2 ywifont ywicon-copy cursor-pointer hover:text-[#0284ff] font-medium !text-[15px]"
- @click="copyUserClick(item)"
- />
- </div>
- <div class="flex items-center justify-center size-[20px]">
- <i
- class="p-2 ywifont ywicon-cubelifangti cursor-pointer hover:text-[#0284ff] text-[#000] font-[590] !text-[15px]"
- @click="setCommonQuestionClick(item)"
- />
- </div>
- </div>
- </template>
- <template #reference>
- <component
- :is="answerTypeMapCom[item.content.type]"
- v-if="item.role === RoleEnum.user"
- :data="item.content.values"
- :originData="item"
- />
- </template>
- </el-popover>
- <component
- :is="answerTypeMapCom[item.content.type]"
- v-if="item.role !== RoleEnum.user"
- :data="item.content.values"
- :originData="item"
- />
+ <div class="flex flex-col" v-if="item?.stepList?.length > 0">
<div
- v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
- class="flex font-bold items-center mt-6"
+ @click="toggleStepList(item)"
+ class="cursor-pointer border border-gray-300 border-solid w-fit px-2 flex items-center space-x-2 rounded-lg mb-3 hover:bg-gray-100 active:bg-gray-200"
>
- <div class="flex-0 mb-auto -mr-4">鍏宠仈鍔熻兘锛�</div>
- <div class="space-x-5 flex flex-wrap">
- <div
- v-for="callItem in item.content.origin?.ext_call_list"
- :key="callItem.call_ext_id"
- @click="relativeQueryClick(callItem)"
- class="cursor-pointer hover:underline first-of-type:ml-5"
- >
- {{ callItem.question }}
+ <span >
+ {{ toggleStepLabel(item) }}
+ </span>
+ <span class="ywifont" :class="{ 'ywicon-unfold': !item.stepIsShow, 'ywicon-fold': item.stepIsShow }"></span>
+ </div>
+
+ <!-- 杩囩▼杈撳嚭 -->
+ <el-steps v-show="item.stepIsShow" direction="vertical" :active="activeStep">
+ <el-step
+ v-for="(subItem, index) in item.stepList"
+ :title="subItem.title"
+ :status="stepEnumMap[subItem.status]"
+ >
+ <!-- <template #icon>
+ <span v-if="subItem.status === StepEnum.Loading" class="ywifont ywicon-loading animate-spin"></span>
+ <span v-else class="ywifont ywicon-loading1 animate-spin"></span>
+ </template> -->
+ <template #title>
+ <span class="text-sm">{{ subItem.title }}</span>
+ </template>
+ </el-step>
+ </el-steps>
+ </div>
+
+ <template v-if="item.content?.values">
+ <div v-if="item.content.errCode === ErrorCode.Message" class="flex-column w-full">
+ <p class="text-red-500">
+ {{ item.content.errMsg }}
+ </p>
+ <div class="mt-5 flex items-center" v-if="showFixQuestion(item)">
+ <div class="text-gray-600 flex-0">
+ {{ item.content.origin.err_json.fix_question.title + '锛�' }}
+ </div>
+ <div class="ml-1 space-x-2 inline-flex flex-wrap">
+ <div
+ v-for="fixItem in item.content.origin.err_json.fix_question?.values"
+ :key="fixItem"
+ class="bg-gray-200 p-3 hover:bg-[#c5e0ff] hover:text-[#1c86ff] cursor-pointer rounded-lg"
+ @click="fixQuestionClick(fixItem, item.content.origin)"
+ >
+ {{ fixItem.title }}
+ </div>
</div>
</div>
</div>
+ <template v-else>
+ <component :is="answerTypeMapCom[item.content.type]" :data="item.content.values" :originData="item" />
+
+ <div
+ v-if="item.role === RoleEnum.assistant && item.content.origin?.ext_call_list"
+ class="flex font-bold items-center mt-6"
+ >
+ <div class="flex-0 mb-auto -mr-4">鍏宠仈鍔熻兘锛�</div>
+ <div class="space-x-5 flex flex-wrap">
+ <div
+ v-for="callItem in item.content.origin?.ext_call_list"
+ :key="callItem.call_ext_id"
+ @click="relativeQueryClick(callItem)"
+ class="cursor-pointer hover:underline first-of-type:ml-5"
+ >
+ {{ callItem.question }}
+ </div>
+ </div>
+ </div>
+ </template>
</template>
</div>
<!-- 鎿嶄綔 -->
- <div v-if="item.role === RoleEnum.assistant" class="absolute flex items-center right-0 mr-4 mt-2 space-x-2">
+ <div
+ v-if="item.role === RoleEnum.assistant && item.content?.values"
+ class="absolute flex items-center right-0 mr-4 mt-2 space-x-2"
+ >
<div
class="flex items-center justify-center size-[15px]"
v-if="item.content?.type === AnswerType.Text || item.content?.type === AnswerType.Knowledge"
@@ -205,14 +195,23 @@
<script setup lang="ts">
import _ from 'lodash';
import moment from 'moment';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, triggerRef } from 'vue';
import FeedbackPanel from './components/FeedbackPanel.vue';
import { useAssistantContentOpt } from './hooks/useAssistantContentOpt';
import { useQueryProcess } from './hooks/useQueryProcess';
-import { useScrollLoad } from './hooks/useScrollLoad';
+import { convertProcessItem, useScrollLoad } from './hooks/useScrollLoad';
import { useScrollToBottom } from './hooks/useScrollToBottom';
-import type { ChatContent } from './model/types';
-import { AnswerState, AnswerType, RoleEnum, answerTypeMapCom, roleImageMap, type ChatMessage } from './model/types';
+import type { ChatContent, StepItem } from './model/types';
+import {
+ AnswerState,
+ AnswerType,
+ RoleEnum,
+ answerTypeMapCom,
+ roleImageMap,
+ type ChatMessage,
+ StepEnum,
+ stepEnumMap,
+} from './model/types';
import { extCallQuery, questionStreamByPost } from '/@/api/ai/chat';
import PlayBar from '/@/components/chat/components/playBar/PlayBar.vue';
import CustomDrawer from '/@/components/drawer/CustomDrawer.vue';
@@ -227,6 +226,7 @@
getRoomConfig,
roomConfig,
} from '/@/stores/chatRoom';
+import { deepClone } from '/@/utils/other';
import { ErrorCode } from '/@/utils/request';
const chatWidth = '75%';
@@ -306,35 +306,43 @@
const { clearQueryProcess, process, processId, queryProcess } = useQueryProcess();
//#region ====================== 姝ラ step ======================
-const enum StepEnum {
- Loading,
- Success,
- Error,
-}
-const stepEnumMap = {
- [StepEnum.Loading]: 'process',
- [StepEnum.Success]: 'success',
- [StepEnum.Error]: 'error',
-};
-
-type StepItem = {
- title: string;
- status: StepEnum;
-};
const activeStep = ref(-1);
-const stepList = ref<StepItem[]>([]);
+const stepList = ref<StepItem[]>([
+ {
+ title: '鎰忓浘鍒嗘瀽涓�...',
+ status: 0,
+ },
+ {
+ title: '鎰忓浘鍒嗘瀽瀹屾垚',
+ status: 1,
+ },
+ {
+ title: '鎬濊�冨浣曟墽琛�:鎸囨爣鏄庣粏鏌ヨ',
+ status: 1,
+ },
+ {
+ title: '鎸囨爣鏄庣粏鏌ヨ瀹屾垚',
+ status: 1,
+ },
+]);
const resetStep = () => {
activeStep.value = -1;
stepList.value = [];
};
+
+const toggleStepLabel = (item: ChatMessage) => (item.stepIsShow ? '鏀惰捣' : '灞曞紑');
+const toggleStepList = (item: ChatMessage) => {
+ item.stepIsShow = !item.stepIsShow;
+};
+
//#endregion
const DEFAULT_SECTION_A_ID = 'knowledge_base';
let questionRes = null;
let finalCalcSectionAId = null;
-const questionAi = async (text) => {
+const questionAi = async (text, assistantMsg: ChatMessage) => {
// processId.value = uuidv4();
let judgeParams = null;
if (!preQuestion.value) {
@@ -395,22 +403,12 @@
if (chunkRes.mode === 'result') {
res = chunkRes.value;
} else {
- switch (chunkRes.mode) {
- case 'begin':
- break;
- case 'end':
- break;
- }
-
- stepList.value.push({
- title: chunkRes.value,
- status: StepEnum.Success,
- });
+ const stepItem = convertProcessItem(chunkRes);
+ computedMessageList.value.at(-1).stepList.push(stepItem);
scrollToBottom();
-
- // process.value = chunkRes.value;
}
}).finally(() => {
+ computedMessageList.value.at(-1).stepIsShow = false;
resetStep();
});
questionRes = res;
@@ -445,7 +443,13 @@
try {
isTalking.value = true;
const userItem: ChatMessage = { role: RoleEnum.user, content } as any;
- const assistantItem: ChatMessage = { role: RoleEnum.assistant, content: null, state: AnswerState.Null } as any;
+ const assistantItem: ChatMessage = {
+ role: RoleEnum.assistant,
+ content: null,
+ state: AnswerState.Null,
+ stepList: [],
+ stepIsShow: true,
+ } as any;
// 鍙戦�佸綋鍓�
messageList.value.push(userItem);
// 娓呯┖杈撳叆妗�
@@ -461,7 +465,7 @@
questionRes = extRes;
resMsgContent = parseContent(extRes);
} else {
- resMsgContent = await questionAi(content.values);
+ resMsgContent = await questionAi(content.values, assistantItem);
}
nextUserMsgEndIndex.value++;
if (isNewChat) {
diff --git a/src/components/chat/hooks/useScrollLoad.ts b/src/components/chat/hooks/useScrollLoad.ts
index 2f74288..f95a1af 100644
--- a/src/components/chat/hooks/useScrollLoad.ts
+++ b/src/components/chat/hooks/useScrollLoad.ts
@@ -1,7 +1,7 @@
import moment from 'moment';
import { Ref, ShallowRef, computed, nextTick, onBeforeUnmount, ref, unref } from 'vue';
import { LOAD_CHAT_LIMIT } from '../constants';
-import { AnswerType, ChatContent, ChatMessage, RoleEnum } from '../model/types';
+import { AnswerType, ChatContent, ChatMessage, RoleEnum, StepEnum, StepItem } from '../model/types';
import { GetHistoryAnswer, QueryHistoryDetail } from '/@/api/ai/chat';
type UseScrollLoadOption = {
container: ShallowRef<HTMLDivElement>;
@@ -10,6 +10,24 @@
parseAnswerContent: (res: any) => ChatContent;
};
+export const convertProcessItem = (processItem: any) => {
+ switch (processItem.mode) {
+ case 'begin':
+ break;
+ case 'end':
+ break;
+ }
+ return {
+ status: StepEnum.Success,
+ title: processItem.value,
+ };
+};
+export const convertProcessToStep = (process: any[]) => {
+ const stepList = (process??[]).map<StepItem>((item) => {
+ return convertProcessItem(item);
+ });
+ return stepList;
+};
/**
* 婊氬姩鍔犺浇鏁版嵁
* @returns
@@ -75,6 +93,8 @@
state: item.answer_state,
sectionAId: mapUser?.section_a_id,
createTime: answerTime,
+ stepList: convertProcessToStep(item?.answer?.exec_process),
+ stepIsShow:false
}
);
i++;
diff --git a/src/components/chat/model/types.ts b/src/components/chat/model/types.ts
index 9abc70c..e02dd02 100644
--- a/src/components/chat/model/types.ts
+++ b/src/components/chat/model/types.ts
@@ -55,10 +55,30 @@
content?: ChatContent;
state?: null | '1' | '0';
sectionAId?:string,
- createTime?:string
+ createTime?:string,
+ stepList:StepItem[]
+ stepIsShow:boolean
}
export const roleImageMap = {
[RoleEnum.user]: userPic,
[RoleEnum.assistant]: assistantPic,
};
+
+
+
+export const enum StepEnum {
+ Loading,
+ Success,
+ Error,
+}
+export const stepEnumMap = {
+ [StepEnum.Loading]: 'process',
+ [StepEnum.Success]: 'process',
+ [StepEnum.Error]: 'process',
+};
+
+export type StepItem = {
+ title: string;
+ status: StepEnum;
+};
\ No newline at end of file
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 6e9e5a9..9d864a4 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -131,7 +131,7 @@
const createAxiosInstance = (option: Partial<CreateAxiosDefaults<any>> = {}) => {
return axios.create({
baseURL: MAIN_URL,
- timeout: 50000,
+ timeout: 120000,
headers: { 'Content-Type': 'application/json;charset=utf-8 ' },
...option,
});
diff --git a/vite.config.ts b/vite.config.ts
index 3cdb41a..e9c23f4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,7 +35,7 @@
host: '0.0.0.0',
port: env.VITE_PORT as unknown as number,
open: JSON.parse(env.VITE_OPEN),
- hmr: false,
+ hmr: true,
},
build: {
// outDir: 'dist/' + mode.mode,
--
Gitblit v1.9.3