From e5e720e87ec998e04f1e251b6e7eb8274a1cf627 Mon Sep 17 00:00:00 2001 From: archer <545436317@qq.com> Date: Tue, 25 Jul 2023 16:11:16 +0800 Subject: [PATCH] feat: chat model show --- client/src/api/response/chat.d.ts | 11 ++----- client/src/components/ChatBox/index.tsx | 17 ----------- client/src/components/ChatBox/utils.ts | 29 +++++++++++++++++++ .../Icon/icons/light/chatModelTag.svg | 1 + client/src/components/Icon/index.tsx | 3 +- client/src/components/Tag/index.tsx | 17 ++++++----- client/src/pages/api/chat/init.ts | 3 +- client/src/pages/api/chat/shareChat/init.ts | 3 +- .../components/AdEdit/components/ChatTest.tsx | 7 ++--- .../app/detail/components/BasicEdit/index.tsx | 8 ++--- .../src/pages/chat/components/ChatHeader.tsx | 17 +++++++++-- client/src/pages/chat/index.tsx | 1 + client/src/service/utils/data.ts | 8 ++--- 13 files changed, 72 insertions(+), 53 deletions(-) create mode 100644 client/src/components/ChatBox/utils.ts create mode 100644 client/src/components/Icon/icons/light/chatModelTag.svg diff --git a/client/src/api/response/chat.d.ts b/client/src/api/response/chat.d.ts index a371eb4fa..323410b4c 100644 --- a/client/src/api/response/chat.d.ts +++ b/client/src/api/response/chat.d.ts @@ -8,10 +8,11 @@ export interface InitChatResponse { app: { variableModules?: VariableItemType[]; welcomeText?: string; + chatModels?: string[]; name: string; avatar: string; intro: string; - canUse: boolean; + canUse?: boolean; }; title: string; variables: Record; @@ -20,11 +21,5 @@ export interface InitChatResponse { export interface InitShareChatResponse { userAvatar: string; - app: { - variableModules?: VariableItemType[]; - welcomeText?: string; - name: string; - avatar: string; - intro: string; - }; + app: InitChatResponse['app']; } diff --git a/client/src/components/ChatBox/index.tsx b/client/src/components/ChatBox/index.tsx index 95893c77c..d93bf9b35 100644 --- a/client/src/components/ChatBox/index.tsx +++ b/client/src/components/ChatBox/index.tsx @@ -817,20 +817,3 @@ export const useChatBox = () => { onExportChat }; }; - -export const getSpecialModule = (modules: AppModuleItemType[]) => { - const welcomeText: string = - modules - .find((item) => item.flowType === FlowModuleTypeEnum.userGuide) - ?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value || ''; - - const variableModules: VariableItemType[] = - modules - .find((item) => item.flowType === FlowModuleTypeEnum.variable) - ?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value || []; - - return { - welcomeText, - variableModules - }; -}; diff --git a/client/src/components/ChatBox/utils.ts b/client/src/components/ChatBox/utils.ts new file mode 100644 index 000000000..35694edfe --- /dev/null +++ b/client/src/components/ChatBox/utils.ts @@ -0,0 +1,29 @@ +import { SystemInputEnum } from '@/constants/app'; +import { FlowModuleTypeEnum } from '@/constants/flow'; +import { getChatModel } from '@/service/utils/data'; +import { AppModuleItemType, VariableItemType } from '@/types/app'; + +export const getSpecialModule = (modules: AppModuleItemType[]) => { + const welcomeText: string = + modules + .find((item) => item.flowType === FlowModuleTypeEnum.userGuide) + ?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value || ''; + + const variableModules: VariableItemType[] = + modules + .find((item) => item.flowType === FlowModuleTypeEnum.variable) + ?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value || []; + + return { + welcomeText, + variableModules + }; +}; +export const getChatModelNameList = (modules: AppModuleItemType[]): string[] => { + const chatModules = modules.filter((item) => item.flowType === FlowModuleTypeEnum.chatNode); + return chatModules + .map( + (item) => getChatModel(item.inputs.find((input) => input.key === 'model')?.value)?.name || '' + ) + .filter((item) => item); +}; diff --git a/client/src/components/Icon/icons/light/chatModelTag.svg b/client/src/components/Icon/icons/light/chatModelTag.svg new file mode 100644 index 000000000..6c67ae1e5 --- /dev/null +++ b/client/src/components/Icon/icons/light/chatModelTag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/Icon/index.tsx b/client/src/components/Icon/index.tsx index 09fd041db..03402c69c 100644 --- a/client/src/components/Icon/index.tsx +++ b/client/src/components/Icon/index.tsx @@ -67,7 +67,8 @@ const map = { billRecordLight: require('./icons/light/billRecord.svg').default, informLight: require('./icons/light/inform.svg').default, payRecordLight: require('./icons/light/payRecord.svg').default, - loginoutLight: require('./icons/light/loginout.svg').default + loginoutLight: require('./icons/light/loginout.svg').default, + chatModelTag: require('./icons/light/chatModelTag.svg').default }; export type IconName = keyof typeof map; diff --git a/client/src/components/Tag/index.tsx b/client/src/components/Tag/index.tsx index 5fb9b161c..648945c51 100644 --- a/client/src/components/Tag/index.tsx +++ b/client/src/components/Tag/index.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; -import { Box, type BoxProps } from '@chakra-ui/react'; +import { Flex, type FlexProps } from '@chakra-ui/react'; -interface Props extends BoxProps { +interface Props extends FlexProps { children: React.ReactNode | React.ReactNode[]; colorSchema?: 'blue' | 'green' | 'gray'; } @@ -15,9 +15,9 @@ const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => { color: 'myBlue.700' }, green: { - borderColor: '#52C41A', - bg: '#EDFFED', - color: '#52C41A' + borderColor: '#54cd19', + bg: '#f2fcf2', + color: '#54cd19' }, gray: { borderColor: '#979797', @@ -27,20 +27,21 @@ const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => { }; return map[colorSchema]; }, [colorSchema]); + return ( - {children} - + ); }; diff --git a/client/src/pages/api/chat/init.ts b/client/src/pages/api/chat/init.ts index d12d0c043..0c8b91bbd 100644 --- a/client/src/pages/api/chat/init.ts +++ b/client/src/pages/api/chat/init.ts @@ -7,7 +7,7 @@ import { ChatItemType } from '@/types/chat'; import { authApp } from '@/service/utils/auth'; import mongoose from 'mongoose'; import type { ChatSchema } from '@/types/mongoSchema'; -import { getSpecialModule } from '@/components/ChatBox'; +import { getSpecialModule, getChatModelNameList } from '@/components/ChatBox/utils'; import { TaskResponseKeyEnum } from '@/constants/chat'; /* 初始化我的聊天框，需要身份验证 */ @@ -90,6 +90,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) appId, app: { ...getSpecialModule(app.modules), + chatModels: getChatModelNameList(app.modules), name: app.name, avatar: app.avatar, intro: app.intro, diff --git a/client/src/pages/api/chat/shareChat/init.ts b/client/src/pages/api/chat/shareChat/init.ts index 0b43551b6..9bdbb0b35 100644 --- a/client/src/pages/api/chat/shareChat/init.ts +++ b/client/src/pages/api/chat/shareChat/init.ts @@ -4,7 +4,7 @@ import { connectToDatabase, ShareChat, User } from '@/service/mongo'; import type { InitShareChatResponse } from '@/api/response/chat'; import { authApp } from '@/service/utils/auth'; import { HUMAN_ICON } from '@/constants/chat'; -import { getSpecialModule } from '@/components/ChatBox'; +import { getChatModelNameList, getSpecialModule } from '@/components/ChatBox/utils'; /* 初始化我的聊天框，需要身份验证 */ export default async function handler(req: NextApiRequest, res: NextApiResponse) { @@ -44,6 +44,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) userAvatar: user?.avatar || HUMAN_ICON, app: { ...getSpecialModule(app.modules), + chatModels: getChatModelNameList(app.modules), name: app.name, avatar: app.avatar, intro: app.intro diff --git a/client/src/pages/app/detail/components/AdEdit/components/ChatTest.tsx b/client/src/pages/app/detail/components/AdEdit/components/ChatTest.tsx index 001566c90..8c8b7dc68 100644 --- a/client/src/pages/app/detail/components/AdEdit/components/ChatTest.tsx +++ b/client/src/pages/app/detail/components/AdEdit/components/ChatTest.tsx @@ -14,11 +14,8 @@ import { FlowModuleTypeEnum } from '@/constants/flow'; import { streamFetch } from '@/api/fetch'; import MyTooltip from '@/components/MyTooltip'; import { useUserStore } from '@/store/user'; -import ChatBox, { - getSpecialModule, - type ComponentRef, - type StartChatFnProps -} from '@/components/ChatBox'; +import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox'; +import { getSpecialModule } from '@/components/ChatBox/utils'; export type ChatTestComponentRef = { resetChatTest: () => void; diff --git a/client/src/pages/app/detail/components/BasicEdit/index.tsx b/client/src/pages/app/detail/components/BasicEdit/index.tsx index 8656195ac..e2ef15f11 100644 --- a/client/src/pages/app/detail/components/BasicEdit/index.tsx +++ b/client/src/pages/app/detail/components/BasicEdit/index.tsx @@ -51,11 +51,9 @@ import MySlider from '@/components/Slider'; import MyTooltip from '@/components/MyTooltip'; import Avatar from '@/components/Avatar'; import MyIcon from '@/components/Icon'; -import ChatBox, { - getSpecialModule, - type ComponentRef, - type StartChatFnProps -} from '@/components/ChatBox'; +import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox'; +import { getSpecialModule } from '@/components/ChatBox/utils'; + import { addVariable } from '../VariableEditModal'; import { KBSelectModal, KbParamsModal } from '../KBSelectModal'; diff --git a/client/src/pages/chat/components/ChatHeader.tsx b/client/src/pages/chat/components/ChatHeader.tsx index 0212041d0..61ff138d2 100644 --- a/client/src/pages/chat/components/ChatHeader.tsx +++ b/client/src/pages/chat/components/ChatHeader.tsx @@ -11,16 +11,21 @@ const ChatHeader = ({ history, appName, appAvatar, + chatModels, onOpenSlider }: { history: ChatItemType[]; appName: string; appAvatar: string; + chatModels?: string[]; onOpenSlider: () => void; }) => { const theme = useTheme(); const { isPc } = useGlobalStore(); - const title = useMemo(() => {}, []); + const title = useMemo( + () => history[history.length - 2]?.value?.slice(0, 8) || appName || '新对话', + [appName, history] + ); return ( - {appName} + {title} - + {history.length === 0 ? '新的对话' : `${history.length}条记录`} + {!!chatModels && ( + + + {chatModels.join(',')} + + )} ) : ( diff --git a/client/src/pages/chat/index.tsx b/client/src/pages/chat/index.tsx index 7224a1c38..c1a2dbffb 100644 --- a/client/src/pages/chat/index.tsx +++ b/client/src/pages/chat/index.tsx @@ -307,6 +307,7 @@ const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => { appAvatar={chatData.app.avatar} appName={chatData.app.name} history={chatData.history} + chatModels={chatData.app.chatModels} onOpenSlider={onOpenSlider} /> diff --git a/client/src/service/utils/data.ts b/client/src/service/utils/data.ts index b35ef6817..b31992a23 100644 --- a/client/src/service/utils/data.ts +++ b/client/src/service/utils/data.ts @@ -1,13 +1,13 @@ -export const getChatModel = (model: string) => { +export const getChatModel = (model?: string) => { return global.chatModels.find((item) => item.model === model); }; -export const getVectorModel = (model: string) => { +export const getVectorModel = (model?: string) => { return global.vectorModels.find((item) => item.model === model); }; -export const getQAModel = (model: string) => { +export const getQAModel = (model?: string) => { return global.qaModels.find((item) => item.model === model); }; -export const getModel = (model: string) => { +export const getModel = (model?: string) => { return [...global.chatModels, ...global.vectorModels, ...global.qaModels].find( (item) => item.model === model );