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>
2024-07-19 14:15:01 +08:00
parent 1eedb9caba
commit cf7145ab54
165 changed files with 2643 additions and 557 deletions
--- a/projects/app/src/components/Avatar/index.tsx
+++ b/projects/app/src/components/Avatar/index.tsx
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Image } from '@chakra-ui/react';
-import type { ImageProps } from '@chakra-ui/react';
-import { LOGO_ICON } from '@fastgpt/global/common/system/constants';
-
-const Avatar = ({ w = '30px', src, ...props }: ImageProps) => {
-  return (
-    <Image
-      fallbackSrc={LOGO_ICON}
-      fallbackStrategy={'onError'}
-      // borderRadius={'md'}
-      objectFit={'contain'}
-      alt=""
-      w={w}
-      h={w}
-      src={src || LOGO_ICON}
-      {...props}
-    />
-  );
-};
-
-export default Avatar;
--- a/projects/app/src/components/Layout/navbar.tsx
+++ b/projects/app/src/components/Layout/navbar.tsx
@@ -6,7 +6,7 @@ import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { HUMAN_ICON } from '@fastgpt/global/common/system/constants';
 import NextLink from 'next/link';
 import Badge from '../Badge';
-import Avatar from '../Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
--- a/projects/app/src/components/Select/AIModelSelector.tsx
+++ b/projects/app/src/components/Select/AIModelSelector.tsx
@@ -7,7 +7,7 @@ import { AI_POINT_USAGE_CARD_ROUTE } from '@/web/support/wallet/sub/constants';
 import MySelect, { SelectProps } from '@fastgpt/web/components/common/MySelect';
 import { HUGGING_FACE_ICON, LOGO_ICON } from '@fastgpt/global/common/system/constants';
 import { Box, Flex } from '@chakra-ui/react';
-import Avatar from '../Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';

 type Props = SelectProps & {
--- a/projects/app/src/components/common/Modal/EditResourceModal.tsx
+++ b/projects/app/src/components/common/Modal/EditResourceModal.tsx
@@ -10,7 +10,7 @@ import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants'
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useToast } from '@fastgpt/web/hooks/useToast';

 export type EditResourceInfoFormType = {
@@ -80,10 +80,10 @@ const EditResourceModal = ({
          <HStack spacing={4}>
            <MyTooltip label={t('common:common.Set Avatar')}>
              <Avatar
-                flexShrink={0}
+                flex={'0 0 2rem'}
                src={avatar}
-                w={['28px', '32px']}
-                h={['28px', '32px']}
+                w={'2rem'}
+                h={'2rem'}
                cursor={'pointer'}
                borderRadius={'md'}
                onClick={onOpenSelectFile}
--- a/projects/app/src/components/common/folder/SelectOneResource.tsx
+++ b/projects/app/src/components/common/folder/SelectOneResource.tsx
@@ -7,7 +7,7 @@ import {
 } from '@fastgpt/global/common/parentFolder/type';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import Loading from '@fastgpt/web/components/common/MyLoading';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useMemoizedFn } from 'ahooks';
 import { FolderImgUrl } from '@fastgpt/global/common/file/image/constants';
@@ -135,7 +135,12 @@ const SelectOneResource = ({
                    />
                  </Flex>
                )}
-                <Avatar ml={index !== 0 ? '0.5rem' : 0} src={item.avatar} w={'1.25rem'} />
+                <Avatar
+                  ml={index !== 0 ? '0.5rem' : 0}
+                  src={item.avatar}
+                  w={'1.25rem'}
+                  borderRadius={'sm'}
+                />
                <Box fontSize={['md', 'sm']} ml={2} className="textEllipsis">
                  {item.name}
                </Box>
--- a/projects/app/src/components/core/ai/SettingLLMModel/index.tsx
+++ b/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';
--- a/projects/app/src/components/core/app/DatasetSelectModal.tsx
+++ b/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';
--- a/projects/app/src/components/core/app/plugin/CoseTooltip.tsx
+++ b/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;
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/ChatAvatar.tsx
+++ b/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';
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/SelectMarkCollection.tsx
+++ b/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';
--- a/projects/app/src/components/core/chat/ChatContainer/useChat.ts
+++ b/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]);

--- a/projects/app/src/components/core/chat/components/AIResponseBox.tsx
+++ b/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'} />}
--- a/projects/app/src/components/core/chat/components/WholeResponseModal.tsx
+++ b/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>
+              }
            />
          )}

--- a/projects/app/src/components/support/permission/ConfigPerModal/index.tsx
+++ b/projects/app/src/components/support/permission/ConfigPerModal/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'next-i18next';
 import { PermissionValueType } from '@fastgpt/global/support/permission/type';
 import CollaboratorContextProvider, { MemberManagerInputPropsType } from '../MemberManager/context';
 import { Box, Button, Flex, HStack, ModalBody } from '@chakra-ui/react';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import DefaultPermissionList from '../DefaultPerList';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
--- a/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
@@ -14,7 +14,7 @@ import {
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useContextSelector } from 'use-context-selector';
-import MyAvatar from '@/components/Avatar';
+import MyAvatar from '@fastgpt/web/components/common/Avatar';
 import { useMemo, useState } from 'react';
 import PermissionSelect from './PermissionSelect';
 import PermissionTags from './PermissionTags';
@@ -23,7 +23,7 @@ import { useUserStore } from '@/web/support/user/useUserStore';
 import { getTeamMembers } from '@/web/support/user/team/api';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import { ChevronDownIcon } from '@chakra-ui/icons';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useTranslation } from 'next-i18next';

--- a/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
@@ -15,7 +15,7 @@ import React from 'react';
 import { useContextSelector } from 'use-context-selector';
 import PermissionSelect from './PermissionSelect';
 import PermissionTags from './PermissionTags';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { CollaboratorContext } from './context';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
--- a/projects/app/src/components/support/permission/MemberManager/MemberListCard.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/MemberListCard.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useContextSelector } from 'use-context-selector';
 import { CollaboratorContext } from './context';
 import Tag, { TagProps } from '@fastgpt/web/components/common/Tag';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useTranslation } from 'next-i18next';

 export type MemberListCardProps = BoxProps & { tagStyle?: Omit<TagProps, 'children'> };
--- a/projects/app/src/components/support/user/team/TeamManageModal/TeamList.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/TeamList.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/EditInfoModal.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/EditInfoModal.tsx
@@ -9,7 +9,7 @@ import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
 import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
@@ -1,4 +1,4 @@
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import {
  Box,
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
@@ -12,7 +12,7 @@ import {
  InputGroup,
  InputLeftElement
 } from '@chakra-ui/react';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx
@@ -3,7 +3,7 @@ import { Box, Button, Flex, Tag, TagLabel, useDisclosure } from '@chakra-ui/reac
 import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { delMemberPermission } from '@/web/support/user/team/api';
 import { useUserStore } from '@/web/support/user/useUserStore';
--- a/projects/app/src/components/support/user/team/TeamMenu/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamMenu/index.tsx
@@ -6,7 +6,7 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import dynamic from 'next/dynamic';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';

 const TeamManageModal = dynamic(() => import('../TeamManageModal'));

--- a/projects/app/src/components/support/user/team/UpdateInviteModal/index.tsx
+++ b/projects/app/src/components/support/user/team/UpdateInviteModal/index.tsx
@@ -13,7 +13,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { getTeamList, updateInviteResult } from '@/web/support/user/team/api';
 import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
-import Avatar from '@/components/Avatar';
+import Avatar from '@fastgpt/web/components/common/Avatar';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';