System plugin (#2091)

* System template (#2082)

* feat: system plugin (#2024)

* add plugin cost & change plugin avatar (#2030)

* add plugin cost & change plugin avatar

* add author

* feat: duckduckgo plugin

* duckduck search

* perf: templates select system plugin

* perf: system plugin avatar

* feat: duckduck plugins

* doc

* perf: plugin classify

* perf: icon avatar component

* perf: system template avatar

---------

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

* feat: system plugin search

* perf: plugin packages important

* perf: source avatar

* nextconfig

* perf: i18n

* perf: default model

* perf: system plugin author

---------

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

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

@@ -4,7 +4,7 @@ import { LLMModelTypeEnum, llmModelTypeFilterMap } from '@fastgpt/global/core/ai
 import { Box, Button, Flex, css, 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 '@/components/Avatar';
+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';

projects/app/src/components/core/app/DatasetSelectModal.tsx

@@ -10,7 +10,7 @@ import {
   Grid,
   Divider
 } from '@chakra-ui/react';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import type { SelectedDatasetType } from '@fastgpt/global/core/workflow/api.d';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';

projects/app/src/components/core/app/plugin/CoseTooltip.tsx

@@ -0,0 +1,24 @@
+import { Box, Flex, Divider } from '@chakra-ui/react';
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+
+const CoseTooltip = ({ cost }: { cost?: number }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Divider mt={4} mb={2} />
+      <Flex>
+        <Box>{t('common:core.plugin.cost')}</Box>
+        <Box color={'myGray.600'}>
+          {cost && cost > 0
+            ? t('app:plugin_cost_per_times', {
+                cost: cost
+              })
+            : t('common:core.plugin.Free')}
+        </Box>
+      </Flex>
+    </>
+  );
+};
+
+export default CoseTooltip;

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatAvatar.tsx

@@ -1,4 +1,4 @@
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { Box } from '@chakra-ui/react';
 import { useTheme } from '@chakra-ui/system';
 import React from 'react';

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/SelectMarkCollection.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ModalBody, useTheme, ModalFooter, Button, Box, Card, Flex, Grid } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { DatasetTypeEnum } from '@fastgpt/global/core/dataset/constants';
 import DatasetSelectModal, { useDatasetSelect } from '@/components/core/dataset/SelectModal';

projects/app/src/components/core/chat/ChatContainer/useChat.ts

@@ -46,7 +46,7 @@ export const useChat = () => {
     for (const key in data) {
       variablesForm.setValue(key, '');
     }
-    console.log(ChatBoxRef.current);
+
     ChatBoxRef.current?.restartChat?.();
   }, [variablesForm]);
 

projects/app/src/components/core/chat/components/AIResponseBox.tsx

@@ -15,7 +15,7 @@ import {
 } from '@fastgpt/global/core/chat/type';
 import React from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 
 type props = {
   value: UserChatItemValueItemType | AIChatItemValueItemType;
@@ -81,12 +81,14 @@ ${JSON.stringify(questionGuides)}`;
                   borderWidth={'1px'}
                   borderColor={'myGray.200'}
                   boxShadow={'1'}
+                  pl={3}
+                  pr={2.5}
                   _hover={{
                     bg: 'auto'
                   }}
                 >
-                  <Avatar src={tool.toolAvatar} w={'1rem'} h={'1rem'} mr={2} />
-                  <Box mr={1} fontSize={'sm'}>
+                  <Avatar src={tool.toolAvatar} w={'1.25rem'} h={'1.25rem'} borderRadius={'sm'} />
+                  <Box mx={2} fontSize={'sm'} color={'myGray.900'}>
                     {tool.toolName}
                   </Box>
                   {isChatting && !tool.response && <MyIcon name={'common/loading'} w={'14px'} />}

projects/app/src/components/core/chat/components/WholeResponseModal.tsx

@@ -12,6 +12,7 @@ import { DatasetSearchModeMap } from '@fastgpt/global/core/dataset/constants';
 import { formatNumber } from '@fastgpt/global/common/math/tools';
 import { useI18n } from '@/web/context/I18n';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 
 function RowRender({
   children,
@@ -125,18 +126,18 @@ export const ResponseBox = React.memo(function ResponseBox({
     () =>
       response.map((item, i) => ({
         label: (
-          <Flex alignItems={'center'} justifyContent={'center'} px={2}>
-            <Image
-              mr={2}
+          <Flex alignItems={'center'} justifyContent={'center'} px={2} py={1}>
+            <Avatar
               src={
                 item.moduleLogo ||
                 moduleTemplatesFlat.find((template) => item.moduleType === template.flowNodeType)
                   ?.avatar
               }
               alt={''}
-              w={['14px', '16px']}
+              w={'1.25rem'}
+              borderRadius={'sm'}
             />
-            {t(item.moduleName as any)}
+            <Box ml={1.5}> {t(item.moduleName as any)}</Box>
           </Flex>
         ),
         value: `${i}`
@@ -334,7 +335,9 @@ export const ResponseBox = React.memo(function ResponseBox({
               <Row
                 label={t('common:core.chat.response.Plugin response detail')}
                 rawDom={
-                  <ResponseBox response={activeModule.pluginDetail} showDetail={showDetail} />
+                  <Box h={'60vh'}>
+                    <ResponseBox response={activeModule.pluginDetail} showDetail={showDetail} />
+                  </Box>
                 }
               />
             )}
@@ -350,7 +353,11 @@ export const ResponseBox = React.memo(function ResponseBox({
           {activeModule?.toolDetail && activeModule?.toolDetail.length > 0 && (
             <Row
               label={t('common:core.chat.response.Tool call response detail')}
-              rawDom={<ResponseBox response={activeModule.toolDetail} showDetail={showDetail} />}
+              rawDom={
+                <Box h={'60vh'}>
+                  <ResponseBox response={activeModule.toolDetail} showDetail={showDetail} />
+                </Box>
+              }
             />
           )}