feat: chat model show

e5e720e8 · archer · 35718b1f · e5e720e8 · e5e720e8 · e5e720e8
Commit e5e720e8 authored Jul 25, 2023 by archer
13 changed files
--- 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<string, any>;
@@ -20,11 +21,5 @@ export interface InitChatResponse {
 export interface InitShareChatResponse {
  userAvatar: string;
-  app: {
+  app: InitChatResponse['app'];
-    variableModules?: VariableItemType[];
-    welcomeText?: string;
-    name: string;
-    avatar: string;
-    intro: string;
-  };
 }
--- 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
-  };
-};
--- a/client/src/components/ChatBox/utils.ts
+++ b/client/src/components/ChatBox/utils.ts
+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);
+};
--- a/client/src/components/Icon/icons/light/chatModelTag.svg
+++ b/client/src/components/Icon/icons/light/chatModelTag.svg
+<?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>
\ No newline at end of file
--- 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;

--- a/client/src/components/Tag/index.tsx
+++ b/client/src/components/Tag/index.tsx
 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',
+        borderColor: '#54cd19',
-        bg: '#EDFFED',
+        bg: '#f2fcf2',
-        color: '#52C41A'
+        color: '#54cd19'
      },
      gray: {
        borderColor: '#979797',
@@ -27,20 +27,21 @@ const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => {
    };
    return map[colorSchema];
  }, [colorSchema]);
  return (
-    <Box
+    <Flex
-      display={'inline-block'}
      border={'1px solid'}
      px={2}
      lineHeight={1}
      py={1}
      borderRadius={'md'}
      fontSize={'xs'}
+      alignItems={'center'}
      {...theme}
      {...props}
    >
      {children}
-    </Box>
+    </Flex>
  );
 };

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

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

--- 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, {
+import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
-  getSpecialModule,
+import { getSpecialModule } from '@/components/ChatBox/utils';
-  type ComponentRef,
-  type StartChatFnProps
-} from '@/components/ChatBox';
 export type ChatTestComponentRef = {
  resetChatTest: () => void;

--- 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, {
+import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
-  getSpecialModule,
+import { getSpecialModule } from '@/components/ChatBox/utils';
-  type ComponentRef,
-  type StartChatFnProps
-} from '@/components/ChatBox';
 import { addVariable } from '../VariableEditModal';
 import { KBSelectModal, KbParamsModal } from '../KBSelectModal';

--- 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 (
    <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} />
        </>
      ) : (

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

--- a/client/src/service/utils/data.ts
+++ b/client/src/service/utils/data.ts
-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
  );