feat: chat model show

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