Plugin runtime (#2050)

* feat: plugin run (#1950) * feat: plugin run * fix * ui * fix * change user input type * fix * fix * temp * split out plugin chat * perf: chatbox * perf: chatbox * fix: plugin runtime (#2032) * fix: plugin runtime * fix * fix build * fix build * perf: chat send prompt * perf: chat log ux * perf: chatbox context and share page plugin runtime * perf: plugin run time config * fix: ts * feat: doc * perf: isPc check * perf: variable input render * feat: app search * fix: response box height * fix: phone ui * perf: lock * perf: plugin route * fix: chat (#2049) --------- Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>
2024-07-15 22:50:48 +08:00
parent 090c880860
commit b5c98a4f63
126 changed files with 5012 additions and 4317 deletions
--- a/projects/app/src/pages/chat/components/ChatHeader.tsx
+++ b/projects/app/src/pages/chat/components/ChatHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Flex, useTheme, Box } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -6,51 +6,47 @@ import Avatar from '@/components/Avatar';
 import ToolMenu from './ToolMenu';
 import type { ChatItemType } from '@fastgpt/global/core/chat/type';
 import { useTranslation } from 'next-i18next';
-import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
 import MyTag from '@fastgpt/web/components/common/Tag/index';
 import { useContextSelector } from 'use-context-selector';
 import { ChatContext } from '@/web/core/chat/context/chatContext';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import { InitChatResponse } from '@/global/core/chat/api';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';

 const ChatHeader = ({
+  chatData,
  history,
-  appName,
-  appAvatar,
-  chatModels,
  showHistory,
  onRoute2AppDetail
 }: {
+  chatData: InitChatResponse;
  history: ChatItemType[];
-  appName: string;
-  appAvatar: string;
-  chatModels?: string[];
  showHistory?: boolean;
  onRoute2AppDetail?: () => void;
 }) => {
  const theme = useTheme();
  const { t } = useTranslation();
-  const { isPc } = useSystemStore();
-  const title = useMemo(
-    () =>
-      getChatTitleFromChatMessage(history[history.length - 2], appName || t('core.chat.New Chat')),
-    [appName, history, t]
-  );
+  const { isPc } = useSystem();
+
+  const chatModels = chatData.app.chatModels;
+  const isPlugin = chatData.app.type === AppTypeEnum.plugin;

  const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);

-  return (
+  return isPc && isPlugin ? null : (
    <Flex
      alignItems={'center'}
      px={[3, 5]}
-      h={['46px', '60px']}
+      minH={['46px', '60px']}
      borderBottom={theme.borders.sm}
      color={'myGray.900'}
      fontSize={'sm'}
    >
      {isPc ? (
        <>
-          <Box mr={3} color={'myGray.1000'}>
-            {title}
+          <Box mr={3} maxW={'160px'} className="textEllipsis" color={'myGray.1000'}>
+            {chatData.title}
          </Box>
          <MyTag>
            <MyIcon name={'history'} w={'14px'} />
@@ -85,15 +81,16 @@ const ChatHeader = ({
          )}

          <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
-            <Avatar src={appAvatar} w={'16px'} />
+            <Avatar src={chatData.app.avatar} w={'16px'} />
            <Box ml={1} className="textEllipsis" onClick={onRoute2AppDetail}>
-              {appName}
+              {chatData.app.name}
            </Box>
          </Flex>
        </>
      )}
+
      {/* control */}
-      <ToolMenu history={history} />
+      {!isPlugin && <ToolMenu history={history} />}
    </Flex>
  );
 };
--- a/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
@@ -23,6 +23,7 @@ import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
 import { useContextSelector } from 'use-context-selector';
 import { ChatContext } from '@/web/core/chat/context/chatContext';
 import MyBox from '@fastgpt/web/components/common/MyBox';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';

 type HistoryItemType = {
  id: string;
@@ -65,7 +66,7 @@ const ChatHistorySlider = ({
  const { t } = useTranslation();
  const { appT } = useI18n();

-  const { isPc } = useSystemStore();
+  const { isPc } = useSystem();
  const { userInfo } = useUserStore();

  const [currentTab, setCurrentTab] = useState<TabEnum>(TabEnum.history);
@@ -91,8 +92,6 @@ const ChatHistorySlider = ({
    return !activeChat ? [newChat].concat(formatHistories) : formatHistories;
  }, [activeChatId, histories, t]);

-  const showApps = apps?.length > 0;
-
  // custom title edit
  const { onOpenModal, EditModal: EditTitleModal } = useEditTitle({
    title: t('core.chat.Custom History Title'),
--- a/projects/app/src/pages/chat/components/CustomPluginRunBox.tsx
+++ b/projects/app/src/pages/chat/components/CustomPluginRunBox.tsx
@@ -0,0 +1,71 @@
+import { PluginRunBoxProps } from '@/components/core/chat/ChatContainer/PluginRunBox/type';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import React, { useEffect } from 'react';
+import PluginRunBox from '@/components/core/chat/ChatContainer/PluginRunBox';
+import { Box, Grid, Stack } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { PluginRunBoxTabEnum } from '@/components/core/chat/ChatContainer/PluginRunBox/constants';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
+
+const CustomPluginRunBox = (props: PluginRunBoxProps) => {
+  const { tab, setTab } = props;
+  const { isPc } = useSystem();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (isPc && tab === PluginRunBoxTabEnum.input) {
+      setTab(PluginRunBoxTabEnum.output);
+    }
+  }, [isPc, setTab, tab]);
+
+  return isPc ? (
+    <Grid gridTemplateColumns={'450px 1fr'} h={'100%'}>
+      <Box px={3} py={4} borderRight={'base'} h={'100%'} overflowY={'auto'} w={'100%'}>
+        <Box color={'myGray.900'} mb={5}>
+          {t('common.Input')}
+        </Box>
+        <PluginRunBox {...props} tab={PluginRunBoxTabEnum.input} />
+      </Box>
+      <Stack px={3} py={4} h={'100%'} alignItems={'flex-start'} w={'100%'} overflow={'auto'}>
+        <Box display={'inline-block'} mb={5}>
+          <LightRowTabs<PluginRunBoxTabEnum>
+            list={[
+              { label: t('common.Output'), value: PluginRunBoxTabEnum.output },
+              { label: '完整结果', value: PluginRunBoxTabEnum.detail }
+            ]}
+            value={tab}
+            onChange={setTab}
+            inlineStyles={{ px: 0.5, pt: 0 }}
+            gap={5}
+            py={0}
+            fontSize={'sm'}
+          />
+        </Box>
+        <Box flex={'1 0 0'} overflow={'auto'} w={'100%'}>
+          <PluginRunBox {...props} />
+        </Box>
+      </Stack>
+    </Grid>
+  ) : (
+    <Stack py={2} px={4} h={'100%'}>
+      <LightRowTabs<PluginRunBoxTabEnum>
+        list={[
+          { label: t('common.Input'), value: PluginRunBoxTabEnum.input },
+          { label: t('common.Output'), value: PluginRunBoxTabEnum.output },
+          { label: '完整结果', value: PluginRunBoxTabEnum.detail }
+        ]}
+        value={tab}
+        onChange={setTab}
+        inlineStyles={{ px: 0.5, pt: 0 }}
+        gap={5}
+        py={0}
+        fontSize={'sm'}
+      />
+      <Box mt={3} flex={'1 0 0'} w={'100%'}>
+        <PluginRunBox {...props} />
+      </Box>
+    </Stack>
+  );
+};
+
+export default React.memo(CustomPluginRunBox);
--- a/projects/app/src/pages/chat/components/SliderApps.tsx
+++ b/projects/app/src/pages/chat/components/SliderApps.tsx
@@ -25,7 +25,7 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
  const getAppList = useCallback(async ({ parentId }: GetResourceFolderListProps) => {
    return getMyApps({
      parentId,
-      type: [AppTypeEnum.folder, AppTypeEnum.simple, AppTypeEnum.workflow]
+      type: [AppTypeEnum.folder, AppTypeEnum.simple, AppTypeEnum.workflow, AppTypeEnum.plugin]
    }).then((res) =>
      res.map<GetResourceListItemResponse>((item) => ({
        id: item._id,
@@ -112,6 +112,7 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
              {({ onClose }) => (
                <Box minH={'200px'}>
                  <SelectOneResource
+                    maxH={'60vh'}
                    value={activeAppId}
                    onSelect={(id) => {
                      if (!id) return;
--- a/projects/app/src/pages/chat/components/ToolMenu.tsx
+++ b/projects/app/src/pages/chat/components/ToolMenu.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useChatBox } from '@/components/ChatBox/hooks/useChatBox';
+import { useChatBox } from '@/components/core/chat/ChatContainer/ChatBox/hooks/useChatBox';
 import type { ChatItemType } from '@fastgpt/global/core/chat/type.d';
 import { Box, IconButton } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';