feat: chat model show

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<string, any>;
@@ -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'];
 }

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

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);
+};

client/src/components/Icon/icons/light/chatModelTag.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1690272002242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9773" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M554.666667 251.733333V341.333333h341.333333v426.666667H170.666667V341.333333h341.333333V251.733333c-25.6-8.533333-42.666667-34.133333-42.666667-59.733333 0-34.133333 29.866667-64 64-64s64 29.866667 64 64c0 29.866667-17.066667 51.2-42.666666 59.733333zM512 384H213.333333v341.333333h640V384h-341.333333z m-384 85.333333v213.333334H85.333333v-213.333334h42.666667z m853.333333 0v213.333334h-42.666666v-213.333334h42.666666zM384 597.333333c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666667 42.666667-17.066667 42.666667-42.666667 42.666666z m298.666667 0c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667 42.666667 17.066667 42.666666 42.666667-17.066667 42.666667-42.666666 42.666666z" p-id="9774"></path></svg>

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;

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 (
-    <Box
-      display={'inline-block'}
+    <Flex
       border={'1px solid'}
       px={2}
       lineHeight={1}
       py={1}
       borderRadius={'md'}
       fontSize={'xs'}
+      alignItems={'center'}
       {...theme}
       {...props}
     >
       {children}
-    </Box>
+    </Flex>
   );
 };
 

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,

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

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;

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';
 

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 (
     <Flex
@@ -34,12 +39,18 @@ const ChatHeader = ({
       {isPc ? (
         <>
           <Box mr={3} color={'myGray.1000'}>
-            {appName}
+            {title}
           </Box>
-          <Tag display={'flex'}>
+          <Tag>
             <MyIcon name={'history'} w={'14px'} />
             <Box ml={1}>{history.length === 0 ? '新的对话' : `${history.length}条记录`}</Box>
           </Tag>
+          {!!chatModels && (
+            <Tag ml={2} colorSchema={'green'}>
+              <MyIcon name={'chatModelTag'} w={'14px'} />
+              <Box ml={1}>{chatModels.join(',')}</Box>
+            </Tag>
+          )}
           <Box flex={1} />
         </>
       ) : (

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}
             />
 

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
   );