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>
2025-08-03 13:38:00 +00:00 · 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';
--- a/projects/app/src/pages/chat/index.tsx
+++ b/projects/app/src/pages/chat/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import NextHead from '@/components/common/NextHead';
 import { useRouter } from 'next/router';
 import { delChatRecordById, getChatHistories, getInitChatInfo } from '@/web/core/chat/api';
@@ -9,8 +9,7 @@ import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useTranslation } from 'next-i18next';

-import ChatBox from '@/components/ChatBox';
-import type { ComponentRef, StartChatFnProps } from '@/components/ChatBox/type.d';
+import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';
 import PageContainer from '@/components/PageContainer';
 import SideBar from '@/components/SideBar';
 import ChatHistorySlider from './components/ChatHistorySlider';
@@ -32,6 +31,13 @@ import { defaultChatData } from '@/global/core/chat/constants';
 import ChatContextProvider, { ChatContext } from '@/web/core/chat/context/chatContext';
 import { AppListItemType } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import dynamic from 'next/dynamic';
+import { useChat } from '@/components/core/chat/ChatContainer/useChat';
+import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+
+const CustomPluginRunBox = dynamic(() => import('./components/CustomPluginRunBox'));

 type Props = { appId: string; chatId: string };

@@ -46,8 +52,6 @@ const Chat = ({
  const theme = useTheme();
  const { t } = useTranslation();

-  const ChatBoxRef = useRef<ComponentRef>(null);
-
  const { setLastChatAppId } = useChatStore();
  const {
    loadHistories,
@@ -59,84 +63,43 @@ const Chat = ({
    forbidLoadChat,
    onChangeChatId
  } = useContextSelector(ChatContext, (v) => v);
+  const {
+    ChatBoxRef,
+    chatRecords,
+    setChatRecords,
+    variablesForm,
+    pluginRunTab,
+    setPluginRunTab,
+    resetChatRecords
+  } = useChat();

  const { userInfo } = useUserStore();
-  const { isPc } = useSystemStore();
-
-  const startChat = useCallback(
-    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
-      const prompts = messages.slice(-2);
-      const completionChatId = chatId ? chatId : getNanoid();
-
-      const { responseText, responseData } = await streamFetch({
-        data: {
-          messages: prompts,
-          variables,
-          appId,
-          chatId: completionChatId
-        },
-        onMessage: generatingMessage,
-        abortCtrl: controller
-      });
-
-      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(prompts)[0]);
-
-      // new chat
-      if (completionChatId !== chatId) {
-        if (controller.signal.reason !== 'leave') {
-          onChangeChatId(completionChatId, true);
-          loadHistories();
-        }
-      } else {
-        // update chat
-        onUpdateHistory({
-          appId,
-          chatId: completionChatId,
-          title: newTitle
-        });
-      }
-
-      // update chat window
-      setChatData((state) => ({
-        ...state,
-        title: newTitle,
-        history: ChatBoxRef.current?.getChatHistories() || state.history
-      }));
-
-      return { responseText, responseData, isNewChat: forbidLoadChat.current };
-    },
-    [appId, chatId, forbidLoadChat, loadHistories, onChangeChatId, onUpdateHistory]
-  );
+  const { isPc } = useSystem();

  // get chat app info
  const [chatData, setChatData] = useState<InitChatResponse>(defaultChatData);
+  const isPlugin = chatData.app.type === AppTypeEnum.plugin;
+
  const { loading } = useRequest2(
    async () => {
      if (!appId || forbidLoadChat.current) return;

      const res = await getInitChatInfo({ appId, chatId });
+      setChatData(res);
+
      const history = res.history.map((item) => ({
        ...item,
        dataId: item.dataId || getNanoid(),
        status: ChatStatusEnum.finish
      }));

-      const result: InitChatResponse = {
-        ...res,
-        history
-      };
-
-      // reset chat box
-      ChatBoxRef.current?.resetHistory(history);
-      ChatBoxRef.current?.resetVariables(res.variables);
-      if (history.length > 0) {
-        setTimeout(() => {
-          ChatBoxRef.current?.scrollToBottom('auto');
-        }, 500);
-      }
+      // reset chat records
+      resetChatRecords({
+        records: history,
+        variables: res.variables
+      });

      setLastChatAppId(appId);
-      setChatData(result);
    },
    {
      manual: false,
@@ -157,6 +120,51 @@ const Chat = ({
    }
  );

+  const onStartChat = useCallback(
+    async ({
+      messages,
+      responseChatItemId,
+      controller,
+      generatingMessage,
+      variables
+    }: StartChatFnProps) => {
+      const completionChatId = chatId || getNanoid();
+      // Just send a user prompt
+      const histories = messages.slice(-1);
+
+      const { responseText, responseData } = await streamFetch({
+        data: {
+          messages: histories,
+          variables,
+          responseChatItemId,
+          appId,
+          chatId: completionChatId
+        },
+        onMessage: generatingMessage,
+        abortCtrl: controller
+      });
+
+      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(histories)[0]);
+
+      // new chat
+      if (completionChatId !== chatId) {
+        if (controller.signal.reason !== 'leave') {
+          onChangeChatId(completionChatId, true);
+        }
+      }
+      loadHistories();
+
+      // update chat window
+      setChatData((state) => ({
+        ...state,
+        title: newTitle
+      }));
+
+      return { responseText, responseData, isNewChat: forbidLoadChat.current };
+    },
+    [appId, chatId, forbidLoadChat, loadHistories, onChangeChatId]
+  );
+
  return (
    <Flex h={'100%'}>
      <NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
@@ -168,7 +176,7 @@ const Chat = ({
      )}

      <PageContainer isLoading={loading} flex={'1 0 0'} w={0} p={[0, '16px']} position={'relative'}>
-        <Flex h={'100%'} flexDirection={['column', 'row']} bg={'white'}>
+        <Flex h={'100%'} flexDirection={['column', 'row']}>
          {/* pc always show history. */}
          {((children: React.ReactNode) => {
            return isPc || !appId ? (
@@ -218,29 +226,44 @@ const Chat = ({
          >
            {/* header */}
            <ChatHeader
-              appAvatar={chatData.app.avatar}
-              appName={chatData.app.name}
-              history={chatData.history}
-              chatModels={chatData.app.chatModels}
+              chatData={chatData}
+              history={chatRecords}
              onRoute2AppDetail={() => router.push(`/app/detail?appId=${appId}`)}
              showHistory
            />

            {/* chat box */}
-            <Box flex={1}>
-              <ChatBox
-                ref={ChatBoxRef}
-                showEmptyIntro
-                appAvatar={chatData.app.avatar}
-                userAvatar={userInfo?.avatar}
-                chatConfig={chatData.app?.chatConfig}
-                showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
-                feedbackType={'user'}
-                onStartChat={startChat}
-                onDelMessage={({ contentId }) => delChatRecordById({ contentId, appId, chatId })}
-                appId={appId}
-                chatId={chatId}
-              />
+            <Box flex={'1 0 0'} bg={'white'}>
+              {isPlugin ? (
+                <CustomPluginRunBox
+                  pluginInputs={chatData.app.pluginInputs}
+                  variablesForm={variablesForm}
+                  histories={chatRecords}
+                  setHistories={setChatRecords}
+                  appId={chatData.appId}
+                  tab={pluginRunTab}
+                  setTab={setPluginRunTab}
+                  onNewChat={() => onChangeChatId(getNanoid())}
+                  onStartChat={onStartChat}
+                />
+              ) : (
+                <ChatBox
+                  ref={ChatBoxRef}
+                  chatHistories={chatRecords}
+                  setChatHistories={setChatRecords}
+                  variablesForm={variablesForm}
+                  showEmptyIntro
+                  appAvatar={chatData.app.avatar}
+                  userAvatar={userInfo?.avatar}
+                  chatConfig={chatData.app?.chatConfig}
+                  showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
+                  feedbackType={'user'}
+                  onStartChat={onStartChat}
+                  onDelMessage={({ contentId }) => delChatRecordById({ contentId, appId, chatId })}
+                  appId={appId}
+                  chatId={chatId}
+                />
+              )}
            </Box>
          </Flex>
        </Flex>
--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
@@ -1,18 +1,17 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box, Flex, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
-import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { streamFetch } from '@/web/common/api/fetch';
 import { useShareChatStore } from '@/web/core/chat/storeShareChat';
 import SideBar from '@/components/SideBar';
 import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
-import { getErrText } from '@fastgpt/global/common/error/utils';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);

-import ChatBox from '@/components/ChatBox';
-import type { ComponentRef, StartChatFnProps } from '@/components/ChatBox/type.d';
+import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
+import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';
+
 import PageContainer from '@/components/PageContainer';
 import ChatHeader from './components/ChatHeader';
 import ChatHistorySlider from './components/ChatHistorySlider';
@@ -33,6 +32,13 @@ import { InitChatResponse } from '@/global/core/chat/api';
 import { defaultChatData } from '@/global/core/chat/constants';
 import { useMount } from 'ahooks';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { useChat } from '@/components/core/chat/ChatContainer/useChat';
+import { getNanoid } from '@fastgpt/global/common/string/tools';
+
+import dynamic from 'next/dynamic';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+const CustomPluginRunBox = dynamic(() => import('./components/CustomPluginRunBox'));

 type Props = {
  appName: string;
@@ -60,8 +66,7 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
    authToken: string;
    [key: string]: string;
  };
-  const { isPc } = useSystemStore();
-  const ChatBoxRef = useRef<ComponentRef>(null);
+  const { isPc } = useSystem();
  const initSign = useRef(false);
  const [isEmbed, setIdEmbed] = useState(true);

@@ -82,17 +87,27 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
    onChangeChatId
  } = useContextSelector(ChatContext, (v) => v);

+  const {
+    ChatBoxRef,
+    chatRecords,
+    setChatRecords,
+    variablesForm,
+    pluginRunTab,
+    setPluginRunTab,
+    resetChatRecords
+  } = useChat();
+
  const startChat = useCallback(
    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
-      const prompts = messages.slice(-2);
-      const completionChatId = chatId ? chatId : nanoid();
+      const completionChatId = chatId || getNanoid();
+      const histories = messages.slice(-1);

      //post message to report chat start
      window.top?.postMessage(
        {
          type: 'shareChatStart',
          data: {
-            question: prompts[0]?.content
+            question: histories[0]?.content
          }
        },
        '*'
@@ -100,41 +115,32 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {

      const { responseText, responseData } = await streamFetch({
        data: {
-          messages: prompts,
+          messages: histories,
          variables: {
            ...variables,
            ...customVariables
          },
          shareId,
          chatId: completionChatId,
+          appType: chatData.app.type,
          outLinkUid
        },
        onMessage: generatingMessage,
        abortCtrl: controller
      });

-      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(prompts)[0]);
+      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(histories)[0]);

      // new chat
      if (completionChatId !== chatId) {
        onChangeChatId(completionChatId, true);
-        loadHistories();
-      } else {
-        // update chat
-        onUpdateHistory({
-          appId,
-          chatId: completionChatId,
-          title: newTitle,
-          shareId,
-          outLinkUid
-        });
      }
+      loadHistories();

      // update chat window
      setChatData((state) => ({
        ...state,
-        title: newTitle,
-        history: ChatBoxRef.current?.getChatHistories() || state.history
+        title: newTitle
      }));

      // hook message
@@ -142,7 +148,7 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
        {
          type: 'shareChatFinish',
          data: {
-            question: prompts[0]?.content,
+            question: histories[0]?.content,
            answer: responseText
          }
        },
@@ -155,12 +161,11 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
      chatId,
      customVariables,
      shareId,
+      chatData.app.type,
      outLinkUid,
      forbidLoadChat,
      onChangeChatId,
-      loadHistories,
-      onUpdateHistory,
-      appId
+      loadHistories
    ]
  );

@@ -173,26 +178,18 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
        shareId,
        outLinkUid
      });
+      setChatData(res);
+
      const history = res.history.map((item) => ({
        ...item,
        dataId: item.dataId || nanoid(),
        status: ChatStatusEnum.finish
      }));
-      const result: InitChatResponse = {
-        ...res,
-        history
-      };

-      // reset chat box
-      ChatBoxRef.current?.resetHistory(history);
-      ChatBoxRef.current?.resetVariables(res.variables);
-      if (history.length > 0) {
-        setTimeout(() => {
-          ChatBoxRef.current?.scrollToBottom('auto');
-        }, 500);
-      }
-
-      setChatData(result);
+      resetChatRecords({
+        records: history,
+        variables: res.variables
+      });
    },
    {
      manual: false,
@@ -233,7 +230,7 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
          ? { p: '0 !important', insertProps: { borderRadius: '0', boxShadow: 'none' } }
          : { p: [0, 5] })}
      >
-        <Flex h={'100%'} flexDirection={['column', 'row']} bg={'white'}>
+        <Flex h={'100%'} flexDirection={['column', 'row']}>
          {showHistory === '1' &&
            ((children: React.ReactNode) => {
              return isPc ? (
@@ -294,37 +291,52 @@ const OutLink = ({ appName, appIntro, appAvatar }: Props) => {
            {/* header */}
            {showHead === '1' ? (
              <ChatHeader
-                appAvatar={chatData.app.avatar}
-                appName={chatData.app.name}
+                chatData={chatData}
                history={chatData.history}
                showHistory={showHistory === '1'}
              />
            ) : null}
            {/* chat box */}
-            <Box flex={1}>
-              <ChatBox
-                ref={ChatBoxRef}
-                appAvatar={chatData.app.avatar}
-                userAvatar={chatData.userAvatar}
-                chatConfig={chatData.app?.chatConfig}
-                showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
-                feedbackType={'user'}
-                onUpdateVariable={(e) => {}}
-                onStartChat={startChat}
-                onDelMessage={({ contentId }) =>
-                  delChatRecordById({
-                    contentId,
-                    appId: chatData.appId,
-                    chatId,
-                    shareId,
-                    outLinkUid
-                  })
-                }
-                appId={chatData.appId}
-                chatId={chatId}
-                shareId={shareId}
-                outLinkUid={outLinkUid}
-              />
+            <Box flex={1} bg={'white'}>
+              {chatData.app.type === AppTypeEnum.plugin ? (
+                <CustomPluginRunBox
+                  pluginInputs={chatData.app.pluginInputs}
+                  variablesForm={variablesForm}
+                  histories={chatRecords}
+                  setHistories={setChatRecords}
+                  appId={chatData.appId}
+                  tab={pluginRunTab}
+                  setTab={setPluginRunTab}
+                  onNewChat={() => onChangeChatId(getNanoid())}
+                  onStartChat={startChat}
+                />
+              ) : (
+                <ChatBox
+                  ref={ChatBoxRef}
+                  chatHistories={chatRecords}
+                  setChatHistories={setChatRecords}
+                  variablesForm={variablesForm}
+                  appAvatar={chatData.app.avatar}
+                  userAvatar={chatData.userAvatar}
+                  chatConfig={chatData.app?.chatConfig}
+                  showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
+                  feedbackType={'user'}
+                  onStartChat={startChat}
+                  onDelMessage={({ contentId }) =>
+                    delChatRecordById({
+                      contentId,
+                      appId: chatData.appId,
+                      chatId,
+                      shareId,
+                      outLinkUid
+                    })
+                  }
+                  appId={chatData.appId}
+                  chatId={chatId}
+                  shareId={shareId}
+                  outLinkUid={outLinkUid}
+                />
+              )}
            </Box>
          </Flex>
        </Flex>
--- a/projects/app/src/pages/chat/team.tsx
+++ b/projects/app/src/pages/chat/team.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import NextHead from '@/components/common/NextHead';
 import { delChatRecordById, getChatHistories, getTeamChatInfo } from '@/web/core/chat/api';
 import { useRouter } from 'next/router';
@@ -15,8 +15,8 @@ import { useTranslation } from 'next-i18next';
 import { checkChatSupportSelectFileByChatModels } from '@/web/core/chat/utils';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
-import ChatBox from '@/components/ChatBox';
-import type { ComponentRef, StartChatFnProps } from '@/components/ChatBox/type.d';
+import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
+import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';
 import { streamFetch } from '@/web/common/api/fetch';
 import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
 import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants';
@@ -29,6 +29,13 @@ import { AppListItemType } from '@fastgpt/global/core/app/type';
 import { useContextSelector } from 'use-context-selector';
 import { InitChatResponse } from '@/global/core/chat/api';
 import { defaultChatData } from '@/global/core/chat/constants';
+import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { getNanoid } from '@fastgpt/global/common/string/tools';
+import { useChat } from '@/components/core/chat/ChatContainer/useChat';
+
+import dynamic from 'next/dynamic';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+const CustomPluginRunBox = dynamic(() => import('./components/CustomPluginRunBox'));

 type Props = { appId: string; chatId: string; teamId: string; teamToken: string };

@@ -47,8 +54,7 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {

  const { toast } = useToast();
  const theme = useTheme();
-  const { isPc } = useSystemStore();
-  const ChatBoxRef = useRef<ComponentRef>(null);
+  const { isPc } = useSystem();

  const [chatData, setChatData] = useState<InitChatResponse>(defaultChatData);

@@ -60,18 +66,28 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
    isOpenSlider,
    onCloseSlider,
    forbidLoadChat,
-    onChangeChatId,
-    onChangeAppId
+    onChangeChatId
  } = useContextSelector(ChatContext, (v) => v);

+  const {
+    ChatBoxRef,
+    chatRecords,
+    setChatRecords,
+    variablesForm,
+    pluginRunTab,
+    setPluginRunTab,
+    resetChatRecords
+  } = useChat();
+
  const startChat = useCallback(
    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
-      const prompts = messages.slice(-2);
-      const completionChatId = chatId ? chatId : nanoid();
+      const completionChatId = chatId || getNanoid();
+      // Just send a user prompt
+      const histories = messages.slice(-1);

      const { responseText, responseData } = await streamFetch({
        data: {
-          messages: prompts,
+          messages: histories,
          variables: {
            ...variables,
            ...customVariables
@@ -79,37 +95,31 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
          appId,
          teamId,
          teamToken,
-          chatId: completionChatId
+          chatId: completionChatId,
+          appType: chatData.app.type
        },
        onMessage: generatingMessage,
        abortCtrl: controller
      });

-      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(prompts)[0]);
+      const newTitle = getChatTitleFromChatMessage(GPTMessages2Chats(histories)[0]);

      // new chat
      if (completionChatId !== chatId) {
        onChangeChatId(completionChatId, true);
-        loadHistories();
-      } else {
-        onUpdateHistory({
-          appId: chatData.appId,
-          chatId: completionChatId,
-          title: newTitle,
-          teamId,
-          teamToken
-        });
      }
+      loadHistories();
+
      // update chat window
      setChatData((state) => ({
        ...state,
-        title: newTitle,
-        history: ChatBoxRef.current?.getChatHistories() || state.history
+        title: newTitle
      }));

      return { responseText, responseData, isNewChat: forbidLoadChat.current };
    },
    [
+      chatData.app.type,
      chatId,
      customVariables,
      appId,
@@ -117,9 +127,7 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
      teamToken,
      forbidLoadChat,
      onChangeChatId,
-      loadHistories,
-      onUpdateHistory,
-      chatData.appId
+      loadHistories
    ]
  );

@@ -129,27 +137,19 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
      if (!appId || forbidLoadChat.current) return;

      const res = await getTeamChatInfo({ teamId, appId, chatId, teamToken });
+      setChatData(res);
+
      const history = res.history.map((item) => ({
        ...item,
        dataId: item.dataId || nanoid(),
        status: ChatStatusEnum.finish
      }));

-      const result: InitChatResponse = {
-        ...res,
-        history
-      };
-
-      // have records.
-      ChatBoxRef.current?.resetHistory(history);
-      ChatBoxRef.current?.resetVariables(res.variables);
-      if (res.history.length > 0) {
-        setTimeout(() => {
-          ChatBoxRef.current?.scrollToBottom('auto');
-        }, 500);
-      }
-
-      setChatData(result);
+      // reset chat records
+      resetChatRecords({
+        records: history,
+        variables: res.variables
+      });
    },
    {
      manual: false,
@@ -230,31 +230,48 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
            flexDirection={'column'}
          >
            {/* header */}
-            <ChatHeader
-              appAvatar={chatData.app.avatar}
-              appName={chatData.app.name}
-              history={chatData.history}
-              showHistory
-            />
+            <ChatHeader chatData={chatData} history={chatData.history} showHistory />
            {/* chat box */}
            <Box flex={1}>
-              <ChatBox
-                ref={ChatBoxRef}
-                appAvatar={chatData.app.avatar}
-                userAvatar={chatData.userAvatar}
-                chatConfig={chatData.app?.chatConfig}
-                showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
-                feedbackType={'user'}
-                onUpdateVariable={(e) => {}}
-                onStartChat={startChat}
-                onDelMessage={({ contentId }) =>
-                  delChatRecordById({ contentId, appId: chatData.appId, chatId, teamId, teamToken })
-                }
-                appId={chatData.appId}
-                chatId={chatId}
-                teamId={teamId}
-                teamToken={teamToken}
-              />
+              {chatData.app.type === AppTypeEnum.plugin ? (
+                <CustomPluginRunBox
+                  pluginInputs={chatData.app.pluginInputs}
+                  variablesForm={variablesForm}
+                  histories={chatRecords}
+                  setHistories={setChatRecords}
+                  appId={chatData.appId}
+                  tab={pluginRunTab}
+                  setTab={setPluginRunTab}
+                  onNewChat={() => onChangeChatId(getNanoid())}
+                  onStartChat={startChat}
+                />
+              ) : (
+                <ChatBox
+                  ref={ChatBoxRef}
+                  chatHistories={chatRecords}
+                  setChatHistories={setChatRecords}
+                  variablesForm={variablesForm}
+                  appAvatar={chatData.app.avatar}
+                  userAvatar={chatData.userAvatar}
+                  chatConfig={chatData.app?.chatConfig}
+                  showFileSelector={checkChatSupportSelectFileByChatModels(chatData.app.chatModels)}
+                  feedbackType={'user'}
+                  onStartChat={startChat}
+                  onDelMessage={({ contentId }) =>
+                    delChatRecordById({
+                      contentId,
+                      appId: chatData.appId,
+                      chatId,
+                      teamId,
+                      teamToken
+                    })
+                  }
+                  appId={chatData.appId}
+                  chatId={chatId}
+                  teamId={teamId}
+                  teamToken={teamToken}
+                />
+              )}
            </Box>
          </Flex>
        </Flex>