perf: ai param config (#3451)

* perf: ai param config

* pacakge import

* perf: ai config doc

projects/app/src/components/core/ai/AISettingModal/index.tsx

@@ -7,10 +7,18 @@ import {
   BoxProps,
   Button,
   Flex,
-  Link,
+  HStack,
   ModalBody,
   ModalFooter,
-  Switch
+  Switch,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Table,
+  useDisclosure
 } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MySlider from '@/components/Slider';
@@ -21,6 +29,13 @@ import AIModelSelector from '@/components/Select/AIModelSelector';
 import { LLMModelItemType } from '@fastgpt/global/core/ai/model.d';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import { getWebLLMModel } from '@/web/common/system/utils';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import dynamic from 'next/dynamic';
+import InputSlider from '@fastgpt/web/components/common/MySlider/InputSlider';
+
+const AiPointsModal = dynamic(() =>
+  import('@/pages/price/components/Points').then((mod) => mod.AiPointsModal)
+);
 
 const AIChatSettingsModal = ({
   onClose,
@@ -35,7 +50,7 @@ const AIChatSettingsModal = ({
 }) => {
   const { t } = useTranslation();
   const [refresh, setRefresh] = useState(false);
-  const { feConfigs, llmModelList } = useSystemStore();
+  const { feConfigs } = useSystemStore();
 
   const { handleSubmit, getValues, setValue, watch } = useForm({
     defaultValues: defaultData
@@ -69,30 +84,35 @@ const AIChatSettingsModal = ({
     alignItems: 'center',
     fontSize: 'sm',
     color: 'myGray.900',
-    width: ['6rem', '8rem']
+    width: '7rem'
   };
 
+  const {
+    isOpen: isOpenAiPointsModal,
+    onClose: onCloseAiPointsModal,
+    onOpen: onOpenAiPointsModal
+  } = useDisclosure();
+
   return (
     <MyModal
       isOpen
       iconSrc="/imgs/workflow/AI.png"
       onClose={onClose}
       title={
-        <>
-          {t('common:core.ai.AI settings')}
+        <HStack>
+          <Box>{t('app:ai_settings')}</Box>
           {feConfigs?.docUrl && (
-            <Link
-              href={getDocPath('/docs/guide/course/ai_settings/')}
-              target={'_blank'}
-              ml={1}
-              textDecoration={'underline'}
-              fontWeight={'normal'}
-              fontSize={'md'}
-            >
-              {t('common:common.Read intro')}
-            </Link>
+            <MyIcon
+              name="book"
+              color={'primary.600'}
+              w={'1rem'}
+              cursor={'pointer'}
+              onClick={() => {
+                window.open(getDocPath('/docs/guide/course/ai_settings/'), '_blank');
+              }}
+            />
           )}
-        </>
+        </HStack>
       }
       w={'500px'}
     >
@@ -113,48 +133,66 @@ const AIChatSettingsModal = ({
             />
           </Box>
         </Flex>
-        {feConfigs && (
-          <Flex mt={6}>
-            <Box {...LabelStyles} mr={2}>
-              {t('common:core.ai.Ai point price')}
-            </Box>
-            <Box flex={1}>
-              {t('common:support.wallet.Ai point every thousand tokens', {
-                points: selectedModel?.charsPointsPrice || 0
-              })}
-            </Box>
-          </Flex>
-        )}
-        <Flex mt={6}>
-          <Box {...LabelStyles} mr={2}>
-            {t('common:core.ai.Max context')}
-          </Box>
-          <Box flex={1}>{selectedModel?.maxContext || 4096}Tokens</Box>
-        </Flex>
-        <Flex mt={6}>
-          <Box {...LabelStyles} mr={2}>
-            {t('common:core.ai.Support tool')}
-            <QuestionTip ml={1} label={t('common:core.module.template.AI support tool tip')} />
-          </Box>
-          <Box flex={1}>
-            {selectedModel?.toolChoice || selectedModel?.functionCall
-              ? t('common:common.support')
-              : t('common:common.not_support')}
-          </Box>
-        </Flex>
-        <Flex mt={6}>
+
+        <TableContainer
+          my={5}
+          bg={'primary.50'}
+          borderRadius={'lg'}
+          borderWidth={'1px'}
+          borderColor={'primary.1'}
+        >
+          <Table fontSize={'xs'} overflow={'overlay'}>
+            <Thead>
+              <Tr bg={'transparent !important'} color={'myGray.600'}>
+                <Th fontSize={'mini'} pb={2}>
+                  <HStack spacing={1}>
+                    <Box> {t('app:ai_point_price')}</Box>
+                    <QuestionTip
+                      label={t('app:look_ai_point_price')}
+                      onClick={onOpenAiPointsModal}
+                    />
+                  </HStack>
+                </Th>
+                <Th fontSize={'mini'} pb={2}>
+                  {t('common:core.ai.Max context')}
+                </Th>
+                <Th fontSize={'mini'} pb={2}>
+                  <HStack spacing={1}>
+                    <Box>{t('common:core.ai.Support tool')}</Box>
+                    <QuestionTip label={t('common:core.module.template.AI support tool tip')} />
+                  </HStack>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <Tr color={'myGray.900'}>
+                <Td pt={0} pb={2}>
+                  {t('common:support.wallet.Ai point every thousand tokens', {
+                    points: selectedModel?.charsPointsPrice || 0
+                  })}
+                </Td>
+                <Td pt={0} pb={2}>
+                  {Math.round((selectedModel?.maxContext || 4096) / 1000)}K
+                </Td>
+                <Td pt={0} pb={2}>
+                  {selectedModel?.toolChoice || selectedModel?.functionCall
+                    ? t('common:common.support')
+                    : t('common:common.not_support')}
+                </Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </TableContainer>
+
+        <Flex>
           <Box {...LabelStyles} mr={2}>
             {t('common:core.app.Temperature')}
           </Box>
-          <Box flex={1} ml={1}>
-            <MySlider
-              markList={[
-                { label: t('common:core.app.deterministic'), value: 0 },
-                { label: t('common:core.app.Random'), value: 10 }
-              ]}
-              width={'95%'}
+          <Box flex={'1 0 0'}>
+            <InputSlider
               min={0}
               max={10}
+              step={1}
               value={getValues(NodeInputKeyEnum.aiChatTemperature)}
               onChange={(e) => {
                 setValue(NodeInputKeyEnum.aiChatTemperature, e);
@@ -163,20 +201,15 @@ const AIChatSettingsModal = ({
             />
           </Box>
         </Flex>
-        <Flex mt={6}>
+        <Flex mt={5}>
           <Box {...LabelStyles} mr={2}>
             {t('common:core.app.Max tokens')}
           </Box>
-          <Box flex={1}>
-            <MySlider
-              markList={[
-                { label: '100', value: 100 },
-                { label: `${tokenLimit}`, value: tokenLimit }
-              ]}
-              width={'95%'}
+          <Box flex={'1 0 0'}>
+            <InputSlider
               min={100}
               max={tokenLimit}
-              step={50}
+              step={200}
               value={getValues(NodeInputKeyEnum.aiChatMaxToken)}
               onChange={(val) => {
                 setValue(NodeInputKeyEnum.aiChatMaxToken, val);
@@ -186,19 +219,15 @@ const AIChatSettingsModal = ({
           </Box>
         </Flex>
         {showMaxHistoriesSlider && (
-          <Flex mt={6}>
+          <Flex mt={5}>
             <Box {...LabelStyles} mr={2}>
-              {t('common:core.app.Max histories')}
+              {t('app:max_histories_number')}
             </Box>
-            <Box flex={1}>
-              <MySlider
-                markList={[
-                  { label: 0, value: 0 },
-                  { label: 30, value: 30 }
-                ]}
-                width={'95%'}
+            <Box flex={'1 0 0'}>
+              <InputSlider
                 min={0}
                 max={30}
+                step={1}
                 value={getValues('maxHistories') ?? 6}
                 onChange={(e) => {
                   setValue('maxHistories', e);
@@ -209,13 +238,10 @@ const AIChatSettingsModal = ({
           </Flex>
         )}
         {showResponseAnswerText && (
-          <Flex mt={6} alignItems={'center'}>
+          <Flex mt={5} alignItems={'center'}>
             <Box {...LabelStyles}>
-              {t('common:core.app.Ai response')}
-              <QuestionTip
-                ml={1}
-                label={t('common:core.module.template.AI response switch tip')}
-              ></QuestionTip>
+              {t('app:stream_response')}
+              <QuestionTip ml={1} label={t('app:stream_response_tip')}></QuestionTip>
             </Box>
             <Box flex={1}>
               <Switch
@@ -230,7 +256,7 @@ const AIChatSettingsModal = ({
           </Flex>
         )}
         {showVisionSwitch && (
-          <Flex mt={6} alignItems={'center'}>
+          <Flex mt={5} alignItems={'center'}>
             <Box {...LabelStyles}>
               {t('app:llm_use_vision')}
               <QuestionTip ml={1} label={t('app:llm_use_vision_tip')}></QuestionTip>
@@ -261,6 +287,8 @@ const AIChatSettingsModal = ({
           {t('common:common.Confirm')}
         </Button>
       </ModalFooter>
+
+      {isOpenAiPointsModal && <AiPointsModal onClose={onCloseAiPointsModal} />}
     </MyModal>
   );
 };

projects/app/src/components/core/ai/SettingLLMModel/index.tsx

@@ -1,16 +1,14 @@
 import React, { useMemo } from 'react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { LLMModelTypeEnum, llmModelTypeFilterMap } from '@fastgpt/global/core/ai/constants';
-import { Box, Button, css, useDisclosure } from '@chakra-ui/react';
+import { Box, css, HStack, IconButton, useDisclosure } from '@chakra-ui/react';
 import type { SettingAIDataType } from '@fastgpt/global/core/app/type.d';
 import AISettingModal from '@/components/core/ai/AISettingModal';
-import Avatar from '@fastgpt/web/components/common/Avatar';
-import { HUGGING_FACE_ICON } from '@fastgpt/global/common/system/constants';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useMount } from 'ahooks';
-import { getModelFromList } from '@fastgpt/global/core/ai/model';
+import AIModelSelector from '@/components/Select/AIModelSelector';
 
 type Props = {
   llmModelType?: `${LLMModelTypeEnum}`;
@@ -19,12 +17,7 @@ type Props = {
   bg?: string;
 };
 
-const SettingLLMModel = ({
-  llmModelType = LLMModelTypeEnum.all,
-  defaultData,
-  onChange,
-  bg = 'white'
-}: Props) => {
+const SettingLLMModel = ({ llmModelType = LLMModelTypeEnum.all, defaultData, onChange }: Props) => {
   const { t } = useTranslation();
   const { llmModelList } = useSystemStore();
 
@@ -41,15 +34,6 @@ const SettingLLMModel = ({
       }),
     [llmModelList, llmModelType]
   );
-
-  const selectedModel = useMemo(() => getModelFromList(modelList, model), [modelList, model]);
-
-  const {
-    isOpen: isOpenAIChatSetting,
-    onOpen: onOpenAIChatSetting,
-    onClose: onCloseAIChatSetting
-  } = useDisclosure();
-
   // Set default model
   useMount(() => {
     if (!model && modelList.length > 0) {
@@ -60,6 +44,12 @@ const SettingLLMModel = ({
     }
   });
 
+  const {
+    isOpen: isOpenAIChatSetting,
+    onOpen: onOpenAIChatSetting,
+    onClose: onCloseAIChatSetting
+  } = useDisclosure();
+
   return (
     <Box
       css={css({
@@ -69,35 +59,33 @@ const SettingLLMModel = ({
       })}
       position={'relative'}
     >
-      <MyTooltip label={t('common:core.app.Setting ai property')}>
-        <Button
-          w={'100%'}
-          justifyContent={'flex-start'}
-          variant={'whitePrimaryOutline'}
-          size={'lg'}
-          fontSize={'sm'}
-          bg={bg}
-          _active={{
-            transform: 'none'
-          }}
-          leftIcon={
-            <Avatar
-              borderRadius={'0'}
-              src={selectedModel?.avatar || HUGGING_FACE_ICON}
-              fallbackSrc={HUGGING_FACE_ICON}
-              w={'18px'}
-            />
-          }
-          rightIcon={<MyIcon name={'common/select'} w={'1.2rem'} color={'myGray.500'} />}
-          px={3}
-          pr={2}
-          onClick={onOpenAIChatSetting}
-        >
-          <Box flex={1} textAlign={'left'}>
-            {selectedModel?.name}
-          </Box>
-        </Button>
-      </MyTooltip>
+      <HStack spacing={1}>
+        <Box flex={'1 0 0'}>
+          <AIModelSelector
+            w={'100%'}
+            value={model}
+            list={llmModelList.map((item) => ({
+              value: item.model,
+              label: item.name
+            }))}
+            onchange={(e) => {
+              onChange({
+                ...defaultData,
+                model: e
+              });
+            }}
+          />
+        </Box>
+        <MyTooltip label={t('app:config_ai_model_params')}>
+          <IconButton
+            variant={'transparentBase'}
+            icon={<MyIcon name="common/settingLight" w={'1.2rem'} />}
+            aria-label={''}
+            size={'mdSquare'}
+            onClick={onOpenAIChatSetting}
+          />
+        </MyTooltip>
+      </HStack>
       {isOpenAIChatSetting && (
         <AISettingModal
           onClose={onCloseAIChatSetting}

projects/app/src/pages/app/list/components/TemplateMarketModal.tsx

@@ -30,7 +30,7 @@ import MySelect from '@fastgpt/web/components/common/MySelect';
 import { useTranslation } from 'next-i18next';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
-import SearchInput from '../../../../../../../packages/web/components/common/Input/SearchInput/index';
+import SearchInput from '@fastgpt/web/components/common/Input/SearchInput/index';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { webPushTrack } from '@/web/common/middle/tracks/utils';

projects/app/src/web/support/wallet/bill/invoice/api.ts

@@ -2,7 +2,7 @@ import { PagingData, RequestPaging } from '@/types';
 import { GET, POST } from '@/web/common/api/request';
 import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
 import { InvoiceType } from '@fastgpt/global/support/wallet/bill/type';
-import { InvoiceSchemaType } from '../../../../../../../../packages/global/support/wallet/bill/type';
+import { InvoiceSchemaType } from '@fastgpt/global/support/wallet/bill/type';
 export type invoiceBillDataType = {
   type: BillTypeEnum;
   price: number;