From eb768d9c0485cf4ed68349d372d4634b063928b1 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Tue, 11 Jul 2023 15:57:01 +0800
Subject: [PATCH] chat box

---
 client/public/imgs/module/userGuide.png       | Bin 0 -> 1215 bytes
 client/src/api/chat.ts                        |  10 +-
 client/src/api/fetch.ts                       |  13 +-
 client/src/api/response/chat.d.ts             |   9 +-
 .../ChatBox/index.module.scss}                |   0
 client/src/components/ChatBox/index.tsx       | 601 ++++++++++++++++++
 client/src/components/Icon/icons/copy.svg     |   2 +-
 .../components/Icon/icons/light/setTop.svg    |   1 +
 .../Icon/icons/modules/variable.svg           |   1 +
 .../Icon/icons/modules/welcomeText.svg        |   1 +
 client/src/components/Icon/icons/voice.svg    |   1 +
 client/src/components/Icon/index.tsx          |  13 +-
 client/src/components/MyTooltip/index.tsx     |   1 +
 client/src/components/Select/index.tsx        |  10 +-
 client/src/components/Tag/index.tsx           |   4 +-
 client/src/constants/app.ts                   |   7 +
 client/src/constants/flow/ModuleTemplate.ts   |  23 +-
 client/src/constants/flow/index.ts            |   3 +-
 client/src/constants/theme.ts                 |   3 +-
 client/src/hooks/useChat.tsx                  | 367 -----------
 client/src/pages/api/chat/chatTest.ts         |  77 +++
 client/src/pages/api/chat/shareChat/create.ts |  17 +-
 client/src/pages/api/chat/shareChat/init.ts   |  32 +-
 client/src/pages/api/chat/shareChat/list.ts   |  12 +-
 .../src/pages/api/openapi/modules/chat/gpt.ts |   1 +
 .../pages/api/openapi/v1/chat/completions2.ts |  42 +-
 .../src/pages/app/detail/components/API.tsx   |   6 +-
 .../pages/app/detail/components/Settings.tsx  |   8 +-
 .../src/pages/app/detail/components/Share.tsx |  26 +-
 .../components/edit/components/ChatTest.tsx   | 201 ++++--
 .../edit/components/NodeKbSearch.tsx          |   8 +-
 .../edit/components/NodeUserGuide.tsx         | 339 ++++++++++
 .../edit/components/TemplateList.tsx          |   8 +-
 .../edit/components/modules/NodeCard.tsx      |  18 +-
 .../edit/components/render/RenderInput.tsx    |   2 +-
 .../app/detail/components/edit/index.tsx      |  30 +-
 client/src/pages/app/detail/index.tsx         |   8 +-
 .../chat/components/ChatHistorySlider.tsx     | 160 +++++
 .../pages/chat/components/ShareHistory.tsx    | 212 ------
 client/src/pages/chat/share.tsx               | 595 +++++++----------
 client/src/service/models/shareChat.ts        |  11 +-
 client/src/service/utils/auth.ts              |  19 +-
 client/src/store/chat.ts                      | 133 +---
 client/src/store/shareChat.ts                 | 146 +++++
 client/src/types/app.d.ts                     |  24 +-
 client/src/types/chat.d.ts                    |  20 +-
 client/src/types/mongoSchema.d.ts             |   4 +-
 47 files changed, 1949 insertions(+), 1280 deletions(-)
 create mode 100644 client/public/imgs/module/userGuide.png
 rename client/src/{hooks/useChat.module.scss => components/ChatBox/index.module.scss} (100%)
 create mode 100644 client/src/components/ChatBox/index.tsx
 create mode 100644 client/src/components/Icon/icons/light/setTop.svg
 create mode 100644 client/src/components/Icon/icons/modules/variable.svg
 create mode 100644 client/src/components/Icon/icons/modules/welcomeText.svg
 create mode 100644 client/src/components/Icon/icons/voice.svg
 delete mode 100644 client/src/hooks/useChat.tsx
 create mode 100644 client/src/pages/api/chat/chatTest.ts
 create mode 100644 client/src/pages/app/detail/components/edit/components/NodeUserGuide.tsx
 create mode 100644 client/src/pages/chat/components/ChatHistorySlider.tsx
 delete mode 100644 client/src/pages/chat/components/ShareHistory.tsx
 create mode 100644 client/src/store/shareChat.ts

diff --git a/client/public/imgs/module/userGuide.png b/client/public/imgs/module/userGuide.png
new file mode 100644
index 0000000000000000000000000000000000000000..598f9ed5eec4b751bba24406784a560925351e33
GIT binary patch
literal 1215
zcmV;w1VH<VP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px(c}YY;RCr$Pn_W`dFc5%OHka^I!$}|yP;LQv>@=JKat6}rBjFbOJdmEGe)A=2
zt0UPVwzalaE7`<pGsD1;^-B7*+FeO&0V8~}iyt>2iWvy;MK@Q#3<S&o^pE<aAR*O%
z3HeL^j$jLLk|xjJ%Ks1a5d-N3J?KcDfrJ~cHlzX}o*<64L%;|Mpqy!WSDRU{u^SH$
z03!&1!3W+Z5fFqI06lP!*C60L>{JuADG;$-CC|58;uD4#3qW@Da|U_-_-O;jEFz8<
z93SBfAiH`vheEt_i4XW(3Q;_Fh2R9>fCs<lD#aps`@W%qCIiSWAMOE!^6(S*$Q48<
z8;UiM0Av^I_k&sQWc)M;RshqQdBZ!dlGoe&K4!fDs`&m$hJKKOvKK-pfJrz!D)1i1
zhyu`YzQ})5^-n@Bicc}8hy$3U)3Z$jz7z}qM`ikkPc(A`6TszKnf`8{Zo@jY?~QD+
z0btr8k2)94rO*O!)U&@M)UbjN027-16r@-|T&UmIAoW(<ZOPWcVhuom*%z<@A)gw?
zm`5`Z(w0o65XpsM#JRXLQt(zdV@;fdZSuC9tM)X2aB<%ZHKeFg>rfp+cDa@<C~5M#
zJZ*!@IF7plSpo>P(~IQ1eL6$aje$dwF#((8W!bP4{^XTymH+}JKFRCS467vF2!Qf{
zwY_wVFh&E6M2O1j1fQUxw97o(W^DGx#d3BBqDqVJv3nGs3ep;-gjf&r<XaA<V?8pF
zoC~%I8G4E9*z6DAay-WmQY^v&a53XX$Eo0`at>4kY((~T{pfvt1pufSlcEbXbW-IU
z07%%1KoI~p<1zyDXKBb$Ho7d?7S;<S6|5w}*k<lCD+m6aqS&Mi<R~=&dziA0s{h>0
z`glvgAp`X8dl(Bq%+qzyJ9#uO@d&ZDegpx4nWwGcuJ7@@WB><Pbs&Tj>~MfpRY)HR
z<o0Gn2dH|M`iDXKPR>9<4V|c5i14k$ptmA+g3=c{>-7dyIrmkk6Cr%p<)DnblWXck
z9Gem_A^>7x;Wlt`<-ZwXCn!|Qp~^YT*-lh#hAQgpqi}YDLIp>aV~k(*y#&Db1MHog
zmjfj2F|0&%->VZL^z_B50f23uRL4e@BlOkC-)l!=?8{JQf<g_QR5`}*p?)aJ_5<wo
zNwplRoHKzB%ksMziDKi38j4(1ko9kYrC6xa*G9LCKQ~4V5+*0}JOA^GJ=lNpYOH>@
z@c(kOy?TNikT@^N(H=0O3UZOb4T+--g5MBQD}<NGaPHdp-5Te~j*!|{BxU#J<8(bt
zD;<?$J!NwGa`Jc}xB@7Xqbbz~TMUH*;HV&Q0eJ2f!>r#BT6_Q;g(dg`s6n{4=K3LK
zEVPag05pX1l^IpJ;Z~UydO)uFLIEft9N0@!6c`}^?An`@H4FjZ1H{m8j8bOUCNm^}
z28hpmk+KiM7yueeLsf{DFzRoK+vaJg@6p3m)tL3AsSrIXeMR+ptrTZk=e}}e*l1Ff
d?{>Xj`xmSFFqv0@P^AC>002ovPDHLkV1g{#E<ykR

literal 0
HcmV?d00001

diff --git a/client/src/api/chat.ts b/client/src/api/chat.ts
index 8521ca13e..2a56b9b53 100644
--- a/client/src/api/chat.ts
+++ b/client/src/api/chat.ts
@@ -58,15 +58,15 @@ export const putChatHistory = (data: UpdateHistoryProps) =>
  */
 export const createShareChat = (
   data: ShareChatEditType & {
-    modelId: string;
+    appId: string;
   }
 ) => POST<string>(`/chat/shareChat/create`, data);
 
 /**
  * get shareChat
  */
-export const getShareChatList = (modelId: string) =>
-  GET<ShareChatSchema[]>(`/chat/shareChat/list?modelId=${modelId}`);
+export const getShareChatList = (appId: string) =>
+  GET<ShareChatSchema[]>(`/chat/shareChat/list`, { appId });
 
 /**
  * delete a  shareChat
@@ -76,5 +76,5 @@ export const delShareChatById = (id: string) => DELETE(`/chat/shareChat/delete?i
 /**
  * 初始化分享聊天
  */
-export const initShareChatInfo = (data: { shareId: string; password: string }) =>
-  GET<InitShareChatResponse>(`/chat/shareChat/init?${Obj2Query(data)}`);
+export const initShareChatInfo = (data: { shareId: string }) =>
+  GET<InitShareChatResponse>(`/chat/shareChat/init`, data);
diff --git a/client/src/api/fetch.ts b/client/src/api/fetch.ts
index 39c0766c5..f64586ab2 100644
--- a/client/src/api/fetch.ts
+++ b/client/src/api/fetch.ts
@@ -1,18 +1,23 @@
-import { Props } from '@/pages/api/openapi/v1/chat/completions';
 import { sseResponseEventEnum } from '@/constants/chat';
 import { getErrText } from '@/utils/tools';
 import { parseStreamChunk } from '@/utils/adapt';
 
 interface StreamFetchProps {
-  data: Props;
+  url?: string;
+  data: Record<string, any>;
   onMessage: (text: string) => void;
   abortSignal: AbortController;
 }
-export const streamFetch = ({ data, onMessage, abortSignal }: StreamFetchProps) =>
+export const streamFetch = ({
+  url = '/api/openapi/v1/chat/completions2',
+  data,
+  onMessage,
+  abortSignal
+}: StreamFetchProps) =>
   new Promise<{ responseText: string; errMsg: string; newChatId: string | null }>(
     async (resolve, reject) => {
       try {
-        const response = await window.fetch('/api/openapi/v1/chat/completions2', {
+        const response = await window.fetch(url, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json'
diff --git a/client/src/api/response/chat.d.ts b/client/src/api/response/chat.d.ts
index 6ce97c30c..4e5e3a16b 100644
--- a/client/src/api/response/chat.d.ts
+++ b/client/src/api/response/chat.d.ts
@@ -1,5 +1,6 @@
 import type { ChatPopulate, AppSchema } from '@/types/mongoSchema';
 import type { ChatItemType } from '@/types/chat';
+import { VariableItemType } from '@/types/app';
 
 export interface InitChatResponse {
   chatId: string;
@@ -17,13 +18,13 @@ export interface InitChatResponse {
 }
 
 export interface InitShareChatResponse {
-  maxContext: number;
   userAvatar: string;
-  appId: string;
-  model: {
+  maxContext: number;
+  app: {
+    variableModules?: VariableItemType[];
+    welcomeText?: string;
     name: string;
     avatar: string;
     intro: string;
   };
-  chatModel: AppSchema['chat']['chatModel']; // 对话模型名
 }
diff --git a/client/src/hooks/useChat.module.scss b/client/src/components/ChatBox/index.module.scss
similarity index 100%
rename from client/src/hooks/useChat.module.scss
rename to client/src/components/ChatBox/index.module.scss
diff --git a/client/src/components/ChatBox/index.tsx b/client/src/components/ChatBox/index.tsx
new file mode 100644
index 000000000..d6ad380d4
--- /dev/null
+++ b/client/src/components/ChatBox/index.tsx
@@ -0,0 +1,601 @@
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  ForwardedRef
+} from 'react';
+import { throttle } from 'lodash';
+import { ChatSiteItemType } from '@/types/chat';
+import { useToast } from '@/hooks/useToast';
+import { useCopyData, voiceBroadcast, hasVoiceApi } from '@/utils/tools';
+import { Box, Card, Flex, Input, Textarea, Button, useTheme } from '@chakra-ui/react';
+import { useUserStore } from '@/store/user';
+
+import { Types } from 'mongoose';
+import { HUMAN_ICON } from '@/constants/chat';
+import Markdown from '@/components/Markdown';
+import MyIcon from '@/components/Icon';
+import Avatar from '@/components/Avatar';
+
+import { adaptChatItem_openAI } from '@/utils/plugin/openai';
+import { VariableItemType } from '@/types/app';
+import { VariableInputEnum } from '@/constants/app';
+import { useForm } from 'react-hook-form';
+import MySelect from '@/components/Select';
+import { MessageItemType } from '@/pages/api/openapi/v1/chat/completions';
+import styles from './index.module.scss';
+import MyTooltip from '../MyTooltip';
+
+const textareaMinH = '22px';
+export type StartChatFnProps = {
+  messages: MessageItemType[];
+  controller: AbortController;
+  variables: Record<string, any>;
+  generatingMessage: (text: string) => void;
+};
+
+export type ComponentRef = {
+  resetVariables: (data?: Record<string, any>) => void;
+  resetHistory: (history: ChatSiteItemType[]) => void;
+};
+
+const VariableLabel = ({
+  required = false,
+  children
+}: {
+  required?: boolean;
+  children: React.ReactNode | string;
+}) => (
+  <Box as={'label'} display={'inline-block'} position={'relative'} mb={1}>
+    {children}
+    {required && (
+      <Box position={'absolute'} top={'-2px'} right={'-10px'} color={'red.500'} fontWeight={'bold'}>
+        *
+      </Box>
+    )}
+  </Box>
+);
+
+const ChatBox = (
+  {
+    appAvatar,
+    variableModules,
+    welcomeText,
+    onUpdateVariable,
+    onStartChat,
+    onDelMessage
+  }: {
+    appAvatar: string;
+    variableModules?: VariableItemType[];
+    welcomeText?: string;
+    onUpdateVariable?: (e: Record<string, any>) => void;
+    onStartChat: (e: StartChatFnProps) => Promise<{ responseText: string }>;
+    onDelMessage?: (e: { id?: string; index: number }) => void;
+  },
+  ref: ForwardedRef<ComponentRef>
+) => {
+  const ChatBoxRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const { copyData } = useCopyData();
+  const { toast } = useToast();
+  const { userInfo } = useUserStore();
+  const TextareaDom = useRef<HTMLTextAreaElement>(null);
+  const controller = useRef(new AbortController());
+
+  const [variables, setVariables] = useState<Record<string, any>>({});
+  const [chatHistory, setChatHistory] = useState<ChatSiteItemType[]>([]);
+
+  const isChatting = useMemo(
+    () => chatHistory[chatHistory.length - 1]?.status === 'loading',
+    [chatHistory]
+  );
+  const variableIsFinish = useMemo(() => {
+    if (!variableModules || chatHistory.length > 0) return true;
+
+    for (let i = 0; i < variableModules.length; i++) {
+      const item = variableModules[i];
+      if (item.required && !variables[item.key]) {
+        return false;
+      }
+    }
+
+    return true;
+  }, [chatHistory.length, variableModules, variables]);
+
+  const isLargeWidth = ChatBoxRef?.current?.clientWidth && ChatBoxRef?.current?.clientWidth >= 900;
+
+  const { register, reset, setValue, handleSubmit } = useForm<Record<string, any>>({
+    defaultValues: variables
+  });
+
+  // 滚动到底部
+  const scrollToBottom = useCallback(
+    (behavior: 'smooth' | 'auto' = 'smooth') => {
+      if (!ChatBoxRef.current) return;
+      ChatBoxRef.current.scrollTo({
+        top: ChatBoxRef.current.scrollHeight,
+        behavior
+      });
+    },
+    [ChatBoxRef]
+  );
+  // 聊天信息生成中……获取当前滚动条位置，判断是否需要滚动到底部
+  const generatingScroll = useCallback(
+    throttle(() => {
+      if (!ChatBoxRef.current) return;
+      const isBottom =
+        ChatBoxRef.current.scrollTop + ChatBoxRef.current.clientHeight + 150 >=
+        ChatBoxRef.current.scrollHeight;
+
+      isBottom && scrollToBottom('auto');
+    }, 100),
+    []
+  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const generatingMessage = useCallback(
+    (text: string) => {
+      setChatHistory((state) =>
+        state.map((item, index) => {
+          if (index !== state.length - 1) return item;
+          return {
+            ...item,
+            value: item.value + text
+          };
+        })
+      );
+      generatingScroll();
+    },
+    [generatingScroll, setChatHistory]
+  );
+
+  // 复制内容
+  const onclickCopy = useCallback(
+    (value: string) => {
+      const val = value.replace(/\n+/g, '\n');
+      copyData(val);
+    },
+    [copyData]
+  );
+
+  // 重置输入内容
+  const resetInputVal = useCallback((val: string) => {
+    if (!TextareaDom.current) return;
+
+    setTimeout(() => {
+      /* 回到最小高度 */
+      if (TextareaDom.current) {
+        TextareaDom.current.value = val;
+        TextareaDom.current.style.height =
+          val === '' ? textareaMinH : `${TextareaDom.current.scrollHeight}px`;
+      }
+    }, 100);
+  }, []);
+
+  /**
+   * user confirm send prompt
+   */
+  const sendPrompt = useCallback(
+    async (data: Record<string, any> = {}) => {
+      if (isChatting) {
+        toast({
+          title: '正在聊天中...请等待结束',
+          status: 'warning'
+        });
+        return;
+      }
+      // get input value
+      const value = TextareaDom.current?.value || '';
+      const val = value.trim().replace(/\n\s*/g, '\n');
+
+      if (!val) {
+        toast({
+          title: '内容为空',
+          status: 'warning'
+        });
+        return;
+      }
+
+      const newChatList: ChatSiteItemType[] = [
+        ...chatHistory,
+        {
+          _id: String(new Types.ObjectId()),
+          obj: 'Human',
+          value: val,
+          status: 'finish'
+        },
+        {
+          _id: String(new Types.ObjectId()),
+          obj: 'AI',
+          value: '',
+          status: 'loading'
+        }
+      ];
+
+      // 插入内容
+      setChatHistory(newChatList);
+
+      // 清空输入内容
+      resetInputVal('');
+      setTimeout(() => {
+        scrollToBottom();
+      }, 100);
+
+      try {
+        // create abort obj
+        const abortSignal = new AbortController();
+        controller.current = abortSignal;
+
+        const messages = adaptChatItem_openAI({ messages: newChatList, reserveId: true });
+
+        await onStartChat({
+          messages,
+          controller: abortSignal,
+          generatingMessage,
+          variables: data
+        });
+
+        // 设置聊天内容为完成状态
+        setChatHistory((state) =>
+          state.map((item, index) => {
+            if (index !== state.length - 1) return item;
+            return {
+              ...item,
+              status: 'finish'
+            };
+          })
+        );
+
+        setTimeout(() => {
+          generatingScroll();
+          TextareaDom.current?.focus();
+        }, 100);
+      } catch (err: any) {
+        toast({
+          title: typeof err === 'string' ? err : err?.message || '聊天出错了~',
+          status: 'warning',
+          duration: 5000,
+          isClosable: true
+        });
+
+        resetInputVal(value);
+
+        setChatHistory(newChatList.slice(0, newChatList.length - 2));
+      }
+    },
+    [
+      isChatting,
+      chatHistory,
+      setChatHistory,
+      resetInputVal,
+      toast,
+      scrollToBottom,
+      onStartChat,
+      generatingMessage,
+      generatingScroll
+    ]
+  );
+
+  useImperativeHandle(ref, () => ({
+    resetVariables(e) {
+      const defaultVal: Record<string, any> = {};
+      variableModules?.forEach((item) => {
+        defaultVal[item.key] = '';
+      });
+
+      reset(e || defaultVal);
+      setVariables(e || defaultVal);
+    },
+    resetHistory(e) {
+      setChatHistory(e);
+    }
+  }));
+
+  const controlIconStyle = {
+    w: '14px',
+    cursor: 'pointer',
+    p: 1,
+    bg: 'white',
+    borderRadius: 'lg',
+    boxShadow: '0 0 5px rgba(0,0,0,0.1)',
+    border: theme.borders.base,
+    mr: 3
+  };
+  const controlContainerStyle = {
+    className: 'control',
+    display: ['flex', 'none'],
+    color: 'myGray.400',
+    pl: 1,
+    mt: 2,
+    position: 'absolute' as any,
+    zIndex: 1
+  };
+
+  return (
+    <Flex flexDirection={'column'} h={'100%'}>
+      <Box ref={ChatBoxRef} flex={'1 0 0'} overflow={'overlay'} px={[2, 5]}>
+        {/* variable input */}
+        {(variableModules || welcomeText) && (
+          <Flex alignItems={'flex-start'} py={2}>
+            {/* avatar */}
+            <Avatar
+              src={appAvatar}
+              w={isLargeWidth ? '34px' : '24px'}
+              h={isLargeWidth ? '34px' : '24px'}
+              order={1}
+              mr={['6px', 2]}
+            />
+            {/* message */}
+            <Flex order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
+              <Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
+                {welcomeText && (
+                  <Box mb={2} pb={2} borderBottom={theme.borders.base}>
+                    {welcomeText}
+                  </Box>
+                )}
+                {variableModules && (
+                  <Box>
+                    {variableModules.map((item) => (
+                      <Box w={'min(100%,300px)'} key={item.id} mb={4}>
+                        <VariableLabel required={item.required}>{item.label}</VariableLabel>
+                        {item.type === VariableInputEnum.input && (
+                          <Input
+                            {...register(item.key, {
+                              required: item.required
+                            })}
+                          />
+                        )}
+                        {item.type === VariableInputEnum.select && (
+                          <MySelect
+                            width={'100%'}
+                            list={(item.enums || []).map((item) => ({
+                              label: item.value,
+                              value: item.value
+                            }))}
+                            {...register(item.key, {
+                              required: item.required
+                            })}
+                            onchange={(e) => {
+                              setValue(item.key, e);
+                              //   setRefresh((state) => !state);
+                            }}
+                          />
+                        )}
+                      </Box>
+                    ))}
+                    {!variableIsFinish && (
+                      <Button
+                        leftIcon={<MyIcon name={'chatFill'} w={'16px'} />}
+                        size={'sm'}
+                        maxW={'100px'}
+                        borderRadius={'lg'}
+                        onClick={handleSubmit((data) => {
+                          onUpdateVariable?.(data);
+                          setVariables(data);
+                        })}
+                      >
+                        {'开始对话'}
+                      </Button>
+                    )}
+                  </Box>
+                )}
+              </Card>
+            </Flex>
+          </Flex>
+        )}
+        {/* chat history */}
+        <Box id={'history'}>
+          {chatHistory.map((item, index) => (
+            <Flex
+              key={item._id}
+              alignItems={'flex-start'}
+              py={2}
+              _hover={{
+                '& .control': {
+                  display: 'flex'
+                }
+              }}
+            >
+              {item.obj === 'Human' && <Box flex={1} />}
+              {/* avatar */}
+              <Avatar
+                src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar}
+                w={isLargeWidth ? '34px' : '24px'}
+                h={isLargeWidth ? '34px' : '24px'}
+                {...(item.obj === 'AI'
+                  ? {
+                      order: 1,
+                      mr: ['6px', 2]
+                    }
+                  : {
+                      order: 3,
+                      ml: ['6px', 2]
+                    })}
+              />
+              {/* message */}
+              <Box order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
+                {item.obj === 'AI' ? (
+                  <Box w={'100%'}>
+                    <Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
+                      <Markdown
+                        source={item.value}
+                        isChatting={index === chatHistory.length - 1 && isChatting}
+                      />
+                    </Card>
+                    <Flex {...controlContainerStyle}>
+                      <MyTooltip label={'复制'}>
+                        <MyIcon
+                          {...controlIconStyle}
+                          name={'copy'}
+                          _hover={{ color: 'myBlue.700' }}
+                          onClick={() => onclickCopy(item.value)}
+                        />
+                      </MyTooltip>
+                      {onDelMessage && (
+                        <MyTooltip label={'删除'}>
+                          <MyIcon
+                            {...controlIconStyle}
+                            name={'delete'}
+                            _hover={{ color: 'red.600' }}
+                            onClick={() => {
+                              setChatHistory((state) =>
+                                state.filter((chat) => chat._id !== item._id)
+                              );
+                              onDelMessage({
+                                id: item._id,
+                                index
+                              });
+                            }}
+                          />
+                        </MyTooltip>
+                      )}
+                      {hasVoiceApi && (
+                        <MyTooltip label={'语音播报'}>
+                          <MyIcon
+                            {...controlIconStyle}
+                            name={'voice'}
+                            _hover={{ color: '#E74694' }}
+                            onClick={() => voiceBroadcast({ text: item.value })}
+                          />
+                        </MyTooltip>
+                      )}
+                    </Flex>
+                  </Box>
+                ) : (
+                  <Box position={'relative'}>
+                    <Card
+                      className="markdown"
+                      whiteSpace={'pre-wrap'}
+                      px={4}
+                      py={3}
+                      borderRadius={'8px 0 8px 8px'}
+                      bg={'myBlue.300'}
+                    >
+                      <Box as={'p'}>{item.value}</Box>
+                    </Card>
+                    <Flex {...controlContainerStyle} right={0}>
+                      <MyTooltip label={'复制'}>
+                        <MyIcon
+                          {...controlIconStyle}
+                          name={'copy'}
+                          _hover={{ color: 'myBlue.700' }}
+                          onClick={() => onclickCopy(item.value)}
+                        />
+                      </MyTooltip>
+                      {onDelMessage && (
+                        <MyTooltip label={'删除'}>
+                          <MyIcon
+                            {...controlIconStyle}
+                            mr={0}
+                            name={'delete'}
+                            _hover={{ color: 'red.600' }}
+                            onClick={() => {
+                              setChatHistory((state) =>
+                                state.filter((chat) => chat._id !== item._id)
+                              );
+                              onDelMessage({
+                                id: item._id,
+                                index
+                              });
+                            }}
+                          />
+                        </MyTooltip>
+                      )}
+                    </Flex>
+                  </Box>
+                )}
+              </Box>
+            </Flex>
+          ))}
+        </Box>
+      </Box>
+      {variableIsFinish ? (
+        <Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']} px={[0, 5]}>
+          <Box
+            py={'18px'}
+            position={'relative'}
+            boxShadow={`0 0 10px rgba(0,0,0,0.1)`}
+            borderTop={['1px solid', 0]}
+            borderTopColor={'gray.200'}
+            borderRadius={['none', 'md']}
+            backgroundColor={'white'}
+          >
+            {/* 输入框 */}
+            <Textarea
+              ref={TextareaDom}
+              py={0}
+              pr={['45px', '55px']}
+              border={'none'}
+              _focusVisible={{
+                border: 'none'
+              }}
+              isDisabled={isChatting}
+              placeholder="提问"
+              resize={'none'}
+              rows={1}
+              height={'22px'}
+              lineHeight={'22px'}
+              maxHeight={'150px'}
+              maxLength={-1}
+              overflowY={'auto'}
+              whiteSpace={'pre-wrap'}
+              wordBreak={'break-all'}
+              boxShadow={'none !important'}
+              color={'myGray.900'}
+              onChange={(e) => {
+                const textarea = e.target;
+                textarea.style.height = textareaMinH;
+                textarea.style.height = `${textarea.scrollHeight}px`;
+              }}
+              onKeyDown={(e) => {
+                // 触发快捷发送
+                if (e.keyCode === 13 && !e.shiftKey) {
+                  handleSubmit(sendPrompt)();
+                  e.preventDefault();
+                }
+                // 全选内容
+                // @ts-ignore
+                e.key === 'a' && e.ctrlKey && e.target?.select();
+              }}
+            />
+            {/* 发送和等待按键 */}
+            <Flex
+              alignItems={'center'}
+              justifyContent={'center'}
+              h={'25px'}
+              w={'25px'}
+              position={'absolute'}
+              right={['12px', '20px']}
+              bottom={'15px'}
+            >
+              {isChatting ? (
+                <MyIcon
+                  className={styles.stopIcon}
+                  width={['22px', '25px']}
+                  height={['22px', '25px']}
+                  cursor={'pointer'}
+                  name={'stop'}
+                  color={'gray.500'}
+                  onClick={() => controller.current?.abort()}
+                />
+              ) : (
+                <MyIcon
+                  name={'chatSend'}
+                  width={['18px', '20px']}
+                  height={['18px', '20px']}
+                  cursor={'pointer'}
+                  color={'gray.500'}
+                  onClick={handleSubmit(sendPrompt)}
+                />
+              )}
+            </Flex>
+          </Box>
+        </Box>
+      ) : null}
+    </Flex>
+  );
+};
+
+export default React.memo(forwardRef(ChatBox));
diff --git a/client/src/components/Icon/icons/copy.svg b/client/src/components/Icon/icons/copy.svg
index 7204c2804..5e0e79bd3 100644
--- a/client/src/components/Icon/icons/copy.svg
+++ b/client/src/components/Icon/icons/copy.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679805221456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1173" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M267.3 834.6h-96.5c-27.4 0-49.7-22.3-49.7-49.7V115.2c0-27.4 22.3-49.7 49.7-49.7H727c27.4 0 49.7 22.3 49.7 49.7v96.5h-42.6v-96.5c0-3.9-3.2-7.1-7.1-7.1H170.8c-3.9 0-7.1 3.2-7.1 7.1v669.7c0 3.9 3.2 7.1 7.1 7.1h96.5v42.6z" p-id="1174"></path><path d="M851.9 959.5H295.7c-27.4 0-49.7-22.3-49.7-49.7V240.1c0-27.4 22.3-49.7 49.7-49.7h556.2c27.4 0 49.7 22.3 49.7 49.7v669.7c-0.1 27.4-22.3 49.7-49.7 49.7zM295.7 233c-3.9 0-7.1 3.2-7.1 7.1v669.7c0 3.9 3.2 7.1 7.1 7.1h556.2c3.9 0 7.1-3.2 7.1-7.1V240.1c0-3.9-3.2-7.1-7.1-7.1H295.7z" p-id="1175"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689057990782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1770" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M878.5 255.1H770V146.7c0-43.6-35.5-79.1-79.1-79.1H145.2c-43.6 0-79.1 35.5-79.1 79.1v545.8c0 43.6 35.5 79.1 79.1 79.1h108.4V880c0 43.6 35.5 79.1 79.1 79.1h545.8c43.6 0 79.1-35.5 79.1-79.1V334.2c-0.1-43.6-35.6-79.1-79.1-79.1zM145.2 707.5c-8.3 0-15.1-6.8-15.1-15.1V146.7c0-8.3 6.8-15.1 15.1-15.1H691c8.3 0 15.1 6.8 15.1 15.1v545.8c0 8.3-6.8 15.1-15.1 15.1H145.2zM893.5 880c0 8.3-6.8 15.1-15.1 15.1H332.7c-8.3 0-15.1-6.8-15.1-15.1V771.5H691c43.6 0 79.1-35.5 79.1-79.1V319.1h108.4c8.3 0 15.1 6.8 15.1 15.1V880z" p-id="1771"></path></svg>
\ No newline at end of file
diff --git a/client/src/components/Icon/icons/light/setTop.svg b/client/src/components/Icon/icons/light/setTop.svg
new file mode 100644
index 000000000..34feba9e9
--- /dev/null
+++ b/client/src/components/Icon/icons/light/setTop.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688993655221" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1709" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M354.7912723 841.95191467l94.44951229 94.4495123c13.67032415 13.67032415 26.71926992 19.88410785 47.22475616 19.88410785 13.67032415 0 33.554432-6.83516208 47.22475614-19.88410785l19.88410786-20.50548622c20.50548622-19.88410785 33.554432-47.22475615 33.554432-73.94402608v-60.27370192c0-6.83516208 6.83516208-26.71926992 13.67032414-33.554432l175.22870044-175.22870045c6.83516208-6.83516208 19.88410785-13.67032415 33.554432-13.67032415h60.27370192c26.71926992 0 60.27370192-13.67032415 73.94402608-33.554432l20.50548622-19.88410785c6.83516208-6.83516208 13.67032415-19.88410785 13.67032415-40.38959408 0-13.67032415-6.83516208-33.554432-19.88410785-47.22475614l-329.95191467-329.95191467c-13.67032415-13.67032415-26.71926992-19.88410785-47.22475615-19.88410786-13.67032415 0-33.554432 6.83516208-47.22475614 19.88410786l-13.67032414 20.50548622c-20.50548622 19.88410785-33.554432 54.05991822-33.554432 73.94402607v60.27370193c0 6.83516208-6.83516208 26.71926992-13.67032416 33.554432L307.56651615 451.1049197c-6.83516208 6.83516208-19.88410785 13.67032415-26.71926993 13.67032415H213.11700385c-26.71926992 0-60.27370192 13.67032415-73.94402607 33.554432l-19.88410786 19.88410785c-19.88410785 20.50548622-19.88410785 60.27370192 0 87.61435022L213.73838222 700.27764622l141.05289008 141.67426845z m-87.61435022-94.4495123l47.22475614 47.22475615-47.22475614-47.22475615z m639.3983431-262.22167229c-6.83516208 6.83516208-20.50548622 13.67032415-33.554432 13.67032414h-60.27370193c-26.71926992 0-60.27370192 13.67032415-73.94402607 33.554432l-175.22870043 175.22870045c-19.88410785 19.88410785-33.554432 47.22475615-33.554432 73.94402608v60.27370192c0 6.83516208-6.83516208 26.71926992-13.67032416 33.554432l-19.88410784 19.88410785-329.95191467-336.78707674 19.88410784-20.50548623c6.83516208 0 19.88410785-6.83516208 26.71926993-6.83516207h60.27370193c26.71926992 0 60.27370192-13.67032415 73.94402607-33.554432l175.22870045-175.22870045c26.71926992-20.50548622 40.38959408-54.05991822 40.38959407-73.94402606V182.04808533c0-6.83516208 6.83516208-26.71926992 13.67032415-33.554432l13.67032415-13.67032415 329.95191466 329.95191467-13.67032415 20.50548623z"  p-id="1710"></path><path d="M269.04105718 753.0948077l33.554432 33.554432-164.66526815 164.66526815-33.554432-33.554432c0.62137837 0 164.66526815-164.66526815 164.66526815-164.66526815z"  p-id="1711"></path></svg>
\ No newline at end of file
diff --git a/client/src/components/Icon/icons/modules/variable.svg b/client/src/components/Icon/icons/modules/variable.svg
new file mode 100644
index 000000000..cc4e6fbca
--- /dev/null
+++ b/client/src/components/Icon/icons/modules/variable.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688977884412" class="icon" viewBox="0 0 1682 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12489" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M906.971429 548.571429l234.057142 234.057142c29.257143 29.257143 29.257143 73.142857 0 102.4-29.257143 29.257143-73.142857 29.257143-102.4 0L804.571429 650.971429l-234.057143 234.057142c-29.257143 29.257143-73.142857 29.257143-102.4 0s-29.257143-73.142857 0-102.4l234.057143-234.057142-234.057143-234.057143c-29.257143-29.257143-29.257143-73.142857 0-102.4s73.142857-29.257143 102.4 0L804.571429 446.171429l234.057142-234.057143c29.257143-29.257143 73.142857-29.257143 102.4 0s29.257143 73.142857 0 102.4l-234.057142 234.057143zM256 980.114286c-14.628571 0-36.571429-7.314286-51.2-21.942857C80.457143 841.142857 0 665.6 0 490.057143 0 307.2 73.142857 146.285714 204.8 21.942857c29.257143-29.257143 73.142857-29.257143 102.4 0 29.257143 29.257143 29.257143 73.142857 0 102.4C204.8 219.428571 146.285714 351.085714 146.285714 490.057143c0 131.657143 58.514286 270.628571 160.914286 365.714286 29.257143 29.257143 29.257143 73.142857 0 102.4-14.628571 14.628571-29.257143 21.942857-51.2 21.942857z m1104.457143-7.314286c-21.942857 0-36.571429-7.314286-51.2-21.942857-29.257143-29.257143-29.257143-73.142857 0-102.4 102.4-95.085714 160.914286-226.742857 160.914286-365.714286s-58.514286-263.314286-160.914286-351.085714c-29.257143-29.257143-36.571429-73.142857-7.314286-102.4 29.257143-29.257143 73.142857-36.571429 102.4-7.314286C1536 138.971429 1609.142857 307.2 1609.142857 490.057143c0 182.857143-73.142857 343.771429-204.8 468.114286-7.314286 7.314286-29.257143 14.628571-43.885714 14.628571z"  p-id="12490"></path></svg>
\ No newline at end of file
diff --git a/client/src/components/Icon/icons/modules/welcomeText.svg b/client/src/components/Icon/icons/modules/welcomeText.svg
new file mode 100644
index 000000000..e15fe17a3
--- /dev/null
+++ b/client/src/components/Icon/icons/modules/welcomeText.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688977803658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8763" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512.000557 0c282.779765 0 511.999889 229.220124 511.999888 511.999889 0 271.404463-211.166563 493.478849-478.163374 510.886845l1.068521 1.113043H60.03822a13.356519 13.356519 0 0 1-10.885563-21.12556c37.509557-52.491119 62.241378-105.004499 74.239984-157.517879A509.951889 509.951889 0 0 1 0.000668 511.999889C0.000668 229.220124 229.220792 0 512.000557 0z m0 80.139113C273.497652 80.139113 80.139781 273.496984 80.139781 511.999889c0 101.286935 34.905036 197.008653 97.680674 273.563766l6.366608 7.568694 26.312342 30.675472-8.971129 39.40173a458.2399 458.2399 0 0 1-25.377386 77.623636l-1.335651 3.027477h351.476793l14.335997-0.934956c223.610386-14.580866 399.248609-198.856305 403.166521-423.268082L943.861332 511.999889c0-238.502905-193.357871-431.860776-431.860775-431.860776z m109.078237 205.601347c90.735285 0 163.72866 75.553375 163.72866 168.069528 0 59.102596-30.007646 113.085193-78.358244 143.449013l4.140521-2.715826-122.323452 124.727625a106.896672 106.896672 0 0 1-143.40449 8.281042l-4.051478-3.428173-3.917912-3.673043-123.725886-126.063277-5.943651-4.185043c-40.626078-30.052167-66.003464-77.779461-67.895638-130.070232l-0.133565-6.322086c0-92.516154 72.993375-168.069529 163.7064-168.069528 40.959991 0 79.137374 15.560344 108.365889 42.073034l0.734609 0.667826 5.721042-5.008695a160.834748 160.834748 0 0 1 97.257718-37.620861z m0 80.139113c-30.853559 0-58.879987 17.786431-73.438593 46.035468-14.914779 28.939124-56.275466 28.983646-71.234767 0.044522l-2.270608-4.162782c-15.137388-25.867125-41.917208-41.917208-71.234767-41.917208-45.83512 0-83.567286 39.067818-83.567287 87.930415 0 31.454602 15.760692 59.814944 40.804165 75.553375l2.582261 1.780869a40.069557 40.069557 0 0 1 4.674781 4.095999l125.88519 128.267103a26.713038 26.713038 0 0 0 37.776688-0.356174l125.462233-127.888668a40.069557 40.069557 0 0 1 7.301564-5.854607l4.095999-2.738086c22.66156-16.183649 36.730427-43.141556 36.730427-72.859811 0-48.862598-37.709905-87.930416-83.545025-87.930415z" p-id="8764"></path></svg>
\ No newline at end of file
diff --git a/client/src/components/Icon/icons/voice.svg b/client/src/components/Icon/icons/voice.svg
new file mode 100644
index 000000000..fc8873f21
--- /dev/null
+++ b/client/src/components/Icon/icons/voice.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689059818626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2851" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M370.675057 293.943709c-20.172608-25.93621-17.290806-66.281425 8.645403-86.454032 25.93621-23.054409 66.281425-17.290806 86.454032 8.645403 69.163226 83.572231 103.744839 190.198871 103.744839 299.707312 0 106.62664-34.581613 213.253279-103.744839 296.82551-20.172608 25.93621-60.517823 31.699812-86.454032 8.645403-25.93621-20.172608-28.818011-60.517823-8.645403-86.454032 48.990618-60.517823 74.926828-138.326451 74.926827-219.016881s-25.93621-161.38086-74.926827-221.898683z m288.180107-184.435268c-23.054409-25.93621-20.172608-66.281425 8.645403-89.335833s69.163226-20.172608 92.217634 8.645403c109.508441 135.44465 164.262661 311.234516 164.262661 487.024381 0 172.908064-54.75422 348.69793-164.262661 484.14258-23.054409 28.818011-63.399624 31.699812-92.217634 8.645403-28.818011-20.172608-31.699812-63.399624-8.645403-89.335833 89.335833-112.390242 135.44465-259.362096 135.44465-403.45215 0-146.971855-46.108817-293.943709-135.44465-406.333951zM108.431159 449.560967c-17.290806-25.93621-14.409005-60.517823 8.645403-80.69043 23.054409-17.290806 60.517823-14.409005 77.808629 8.645403 31.699812 37.463414 48.990618 89.335833 48.990618 138.326452s-17.290806 97.981236-48.990618 135.44465c-17.290806 23.054409-54.75422 28.818011-77.808629 8.645403s-25.93621-54.75422-8.645403-77.808629c14.409005-20.172608 23.054409-43.227016 23.054409-66.281424 0-25.93621-8.645403-48.990618-23.054409-66.281425z" p-id="2852"></path></svg>
\ No newline at end of file
diff --git a/client/src/components/Icon/index.tsx b/client/src/components/Icon/index.tsx
index 61f5f2181..6aee39201 100644
--- a/client/src/components/Icon/index.tsx
+++ b/client/src/components/Icon/index.tsx
@@ -46,12 +46,19 @@ const map = {
   appLight: require('./icons/light/app.svg').default,
   appFill: require('./icons/fill/app.svg').default,
   meLight: require('./icons/light/me.svg').default,
-  meFill: require('./icons/fill/me.svg').default
+  meFill: require('./icons/fill/me.svg').default,
+  welcomeText: require('./icons/modules/welcomeText.svg').default,
+  variable: require('./icons/modules/variable.svg').default,
+  setTop: require('./icons/light/setTop.svg').default,
+  voice: require('./icons/voice.svg').default
 };
 
 export type IconName = keyof typeof map;
 
-const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconName } & IconProps) => {
+const MyIcon = (
+  { name, w = 'auto', h = 'auto', ...props }: { name: IconName } & IconProps,
+  ref: any
+) => {
   return map[name] ? (
     <Icon
       as={map[name]}
@@ -65,4 +72,4 @@ const MyIcon = ({ name, w = 'auto', h = 'auto', ...props }: { name: IconName } &
   ) : null;
 };
 
-export default MyIcon;
+export default React.forwardRef(MyIcon);
diff --git a/client/src/components/MyTooltip/index.tsx b/client/src/components/MyTooltip/index.tsx
index d51261c56..b7058de77 100644
--- a/client/src/components/MyTooltip/index.tsx
+++ b/client/src/components/MyTooltip/index.tsx
@@ -14,6 +14,7 @@ const MyTooltip = ({ children, ...props }: TooltipProps) => {
       py={2}
       borderRadius={'8px'}
       whiteSpace={'pre-wrap'}
+      shouldWrapChildren
       {...props}
     >
       {children}
diff --git a/client/src/components/Select/index.tsx b/client/src/components/Select/index.tsx
index 08e330adf..5cd57c1af 100644
--- a/client/src/components/Select/index.tsx
+++ b/client/src/components/Select/index.tsx
@@ -4,7 +4,6 @@ import {
   Box,
   MenuList,
   MenuItem,
-  MenuButton,
   Button,
   useDisclosure,
   useOutsideClick
@@ -44,7 +43,13 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
 
   return (
     <Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
-      <Box ref={SelectRef} position={'relative'} onClick={() => (isOpen ? onClose() : onOpen())}>
+      <Box
+        ref={SelectRef}
+        position={'relative'}
+        onClick={() => {
+          isOpen ? onClose() : onOpen();
+        }}
+      >
         <Button
           ref={ref}
           width={width}
@@ -65,6 +70,7 @@ const MySelect = ({ placeholder, value, width = 'auto', list, onchange, ...props
           {...props}
         >
           {list.find((item) => item.value === value)?.label || placeholder}
+          <Box flex={1} />
           <ChevronDownIcon />
         </Button>
 
diff --git a/client/src/components/Tag/index.tsx b/client/src/components/Tag/index.tsx
index 572dd47c0..53c7d4432 100644
--- a/client/src/components/Tag/index.tsx
+++ b/client/src/components/Tag/index.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, type BoxProps } from '@chakra-ui/react';
 
 interface Props extends BoxProps {
-  children: string;
+  children: React.ReactNode | React.ReactNode[];
   colorSchema?: 'blue' | 'green' | 'gray';
 }
 
@@ -33,7 +33,7 @@ const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => {
       border={'1px solid'}
       px={2}
       lineHeight={1}
-      py={'2px'}
+      py={1}
       borderRadius={'md'}
       fontSize={'xs'}
       {...theme}
diff --git a/client/src/constants/app.ts b/client/src/constants/app.ts
index e37e60ffb..3f4ff8ab4 100644
--- a/client/src/constants/app.ts
+++ b/client/src/constants/app.ts
@@ -2,12 +2,15 @@ import type { AppItemType } from '@/types/app';
 
 /* app */
 export enum AppModuleItemTypeEnum {
+  'userGuide' = 'userGuide', // default chat input: userChatInput, history
   'initInput' = 'initInput', // default chat input: userChatInput, history
   'http' = 'http', // send a http request
   'switch' = 'switch', // one input and two outputs
   'answer' = 'answer' // redirect response
 }
 export enum SystemInputEnum {
+  'welcomeText' = 'welcomeText',
+  'variables' = 'variables',
   'switch' = 'switch', // a trigger switch
   'history' = 'history',
   'userChatInput' = 'userChatInput'
@@ -15,6 +18,10 @@ export enum SystemInputEnum {
 export enum SpecificInputEnum {
   'answerText' = 'answerText' //  answer module text key
 }
+export enum VariableInputEnum {
+  input = 'input',
+  select = 'select'
+}
 
 // template
 export const appTemplates: (AppItemType & { avatar: string; intro: string })[] = [
diff --git a/client/src/constants/flow/ModuleTemplate.ts b/client/src/constants/flow/ModuleTemplate.ts
index ee102433b..d945d1e28 100644
--- a/client/src/constants/flow/ModuleTemplate.ts
+++ b/client/src/constants/flow/ModuleTemplate.ts
@@ -8,6 +8,27 @@ import {
   Input_Template_UserChatInput
 } from './inputTemplate';
 
+export const VariableInputModule: AppModuleTemplateItemType = {
+  logo: '/imgs/module/userGuide.png',
+  name: '开场引导',
+  intro: '可以在每个新对话开始前，给用户发送一段开场白，或要求用户填写一些内容作为本轮对话的变量。',
+  type: AppModuleItemTypeEnum.userGuide,
+  flowType: FlowModuleTypeEnum.userGuide,
+  inputs: [
+    {
+      key: SystemInputEnum.welcomeText,
+      type: FlowInputItemTypeEnum.input,
+      label: '开场白'
+    },
+    {
+      key: SystemInputEnum.variables,
+      type: FlowInputItemTypeEnum.systemInput,
+      label: '变量输入',
+      value: []
+    }
+  ],
+  outputs: []
+};
 export const UserInputModule: AppModuleTemplateItemType = {
   logo: '/imgs/module/userChatInput.png',
   name: '用户问题',
@@ -311,7 +332,7 @@ export const ClassifyQuestionModule: AppModuleTemplateItemType = {
 export const ModuleTemplates = [
   {
     label: '输入模块',
-    list: [UserInputModule, HistoryModule]
+    list: [UserInputModule, HistoryModule, VariableInputModule]
   },
   {
     label: '对话模块',
diff --git a/client/src/constants/flow/index.ts b/client/src/constants/flow/index.ts
index 5184e713f..4af9271b9 100644
--- a/client/src/constants/flow/index.ts
+++ b/client/src/constants/flow/index.ts
@@ -1,5 +1,5 @@
 export enum FlowInputItemTypeEnum {
-  systemInput = 'systemInput', // history, userChatInput
+  systemInput = 'systemInput', // history, userChatInput, variableInput
   input = 'input',
   textarea = 'textarea',
   numberInput = 'numberInput',
@@ -19,6 +19,7 @@ export enum FlowOutputItemTypeEnum {
 }
 
 export enum FlowModuleTypeEnum {
+  userGuide = 'userGuide',
   questionInputNode = 'questionInput',
   historyNode = 'historyNode',
   chatNode = 'chatNode',
diff --git a/client/src/constants/theme.ts b/client/src/constants/theme.ts
index 99c06f554..2f46b59d4 100644
--- a/client/src/constants/theme.ts
+++ b/client/src/constants/theme.ts
@@ -165,7 +165,8 @@ const Textarea: ComponentStyleConfig = {
       borderColor: 'myGray.200',
       _focus: {
         borderColor: 'myBlue.600',
-        boxShadow: '0px 0px 4px #A8DBFF'
+        boxShadow: '0px 0px 4px #A8DBFF',
+        bg: 'white'
       }
     }
   },
diff --git a/client/src/hooks/useChat.tsx b/client/src/hooks/useChat.tsx
deleted file mode 100644
index 9ef982f8f..000000000
--- a/client/src/hooks/useChat.tsx
+++ /dev/null
@@ -1,367 +0,0 @@
-import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
-import { throttle } from 'lodash';
-import { ChatSiteItemType } from '@/types/chat';
-import { useToast } from './useToast';
-import { useCopyData } from '@/utils/tools';
-import { Box, Card, Flex, Textarea } from '@chakra-ui/react';
-import { useUserStore } from '@/store/user';
-import { useRouter } from 'next/router';
-
-import { Types } from 'mongoose';
-import { HUMAN_ICON } from '@/constants/chat';
-import Markdown from '@/components/Markdown';
-import MyIcon from '@/components/Icon';
-import Avatar from '@/components/Avatar';
-
-import styles from './useChat.module.scss';
-import { adaptChatItem_openAI } from '@/utils/plugin/openai';
-import { streamFetch } from '@/api/fetch';
-
-const textareaMinH = '22px';
-
-export const useChat = ({ appId }: { appId: string }) => {
-  const router = useRouter();
-  const ChatBoxParentRef = useRef<HTMLDivElement>(null);
-  const TextareaDom = useRef<HTMLTextAreaElement>(null);
-
-  // stop chat
-  const controller = useRef(new AbortController());
-  const isLeavePage = useRef(false);
-
-  const [chatHistory, setChatHistory] = useState<ChatSiteItemType[]>([]);
-  const { toast } = useToast();
-  const { copyData } = useCopyData();
-  const { userInfo } = useUserStore();
-
-  const isChatting = useMemo(
-    () => chatHistory[chatHistory.length - 1]?.status === 'loading',
-    [chatHistory]
-  );
-  const isLargeWidth =
-    ChatBoxParentRef?.current?.clientWidth && ChatBoxParentRef?.current?.clientWidth > 900;
-
-  // 滚动到底部
-  const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
-    if (!ChatBoxParentRef.current) return;
-    console.log(ChatBoxParentRef.current.scrollHeight);
-
-    ChatBoxParentRef.current.scrollTo({
-      top: ChatBoxParentRef.current.scrollHeight,
-      behavior
-    });
-  }, []);
-
-  // 聊天信息生成中……获取当前滚动条位置，判断是否需要滚动到底部
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const generatingMessage = useCallback(
-    throttle(() => {
-      if (!ChatBoxParentRef.current) return;
-      const isBottom =
-        ChatBoxParentRef.current.scrollTop + ChatBoxParentRef.current.clientHeight + 150 >=
-        ChatBoxParentRef.current.scrollHeight;
-
-      isBottom && scrollToBottom('auto');
-    }, 100),
-    []
-  );
-
-  // 复制内容
-  const onclickCopy = useCallback(
-    (value: string) => {
-      const val = value.replace(/\n+/g, '\n');
-      copyData(val);
-    },
-    [copyData]
-  );
-
-  // 重置输入内容
-  const resetInputVal = useCallback((val: string) => {
-    if (!TextareaDom.current) return;
-    TextareaDom.current.value = val;
-    setTimeout(() => {
-      /* 回到最小高度 */
-      if (TextareaDom.current) {
-        TextareaDom.current.style.height =
-          val === '' ? textareaMinH : `${TextareaDom.current.scrollHeight}px`;
-      }
-    }, 100);
-  }, []);
-
-  const startChat = useCallback(
-    async (prompts: ChatSiteItemType[]) => {
-      // create abort obj
-      const abortSignal = new AbortController();
-      controller.current = abortSignal;
-      isLeavePage.current = false;
-
-      const messages = adaptChatItem_openAI({ messages: prompts, reserveId: true });
-
-      // 流请求，获取数据
-      await streamFetch({
-        data: {
-          messages,
-          appId,
-          model: ''
-        },
-        onMessage: (text: string) => {
-          setChatHistory((state) =>
-            state.map((item, index) => {
-              if (index !== state.length - 1) return item;
-              return {
-                ...item,
-                value: item.value + text
-              };
-            })
-          );
-          generatingMessage();
-        },
-        abortSignal
-      });
-
-      // 重置了页面，说明退出了当前聊天, 不缓存任何内容
-      if (isLeavePage.current) {
-        return;
-      }
-
-      // 设置聊天内容为完成状态
-      setChatHistory((state) =>
-        state.map((item, index) => {
-          if (index !== state.length - 1) return item;
-          return {
-            ...item,
-            status: 'finish'
-          };
-        })
-      );
-
-      setTimeout(() => {
-        generatingMessage();
-        TextareaDom.current?.focus();
-      }, 100);
-    },
-    [appId, generatingMessage]
-  );
-
-  /**
-   * user confirm send prompt
-   */
-  const sendPrompt = useCallback(async () => {
-    if (isChatting) {
-      toast({
-        title: '正在聊天中...请等待结束',
-        status: 'warning'
-      });
-      return;
-    }
-    // get input value
-    const value = TextareaDom.current?.value || '';
-    const val = value.trim().replace(/\n\s*/g, '\n');
-
-    if (!val) {
-      toast({
-        title: '内容为空',
-        status: 'warning'
-      });
-      return;
-    }
-
-    const newChatList: ChatSiteItemType[] = [
-      ...chatHistory,
-      {
-        _id: String(new Types.ObjectId()),
-        obj: 'Human',
-        value: val,
-        status: 'finish'
-      },
-      {
-        _id: String(new Types.ObjectId()),
-        obj: 'AI',
-        value: '',
-        status: 'loading'
-      }
-    ];
-
-    // 插入内容
-    setChatHistory(newChatList);
-
-    // 清空输入内容
-    resetInputVal('');
-    setTimeout(() => {
-      scrollToBottom();
-    }, 100);
-
-    try {
-      await startChat(newChatList);
-    } catch (err: any) {
-      toast({
-        title: typeof err === 'string' ? err : err?.message || '聊天出错了~',
-        status: 'warning',
-        duration: 5000,
-        isClosable: true
-      });
-
-      resetInputVal(value);
-
-      setChatHistory(newChatList.slice(0, newChatList.length - 2));
-    }
-  }, [isChatting, chatHistory, resetInputVal, toast, scrollToBottom, startChat]);
-
-  const ChatBox = useCallback(
-    ({ appAvatar }: { appAvatar: string }) => {
-      return (
-        <Box id={'history'}>
-          {chatHistory.map((item, index) => (
-            <Flex key={item._id} alignItems={'flex-start'} py={2}>
-              {item.obj === 'Human' && <Box flex={1} />}
-              {/* avatar */}
-              <Avatar
-                src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar}
-                w={isLargeWidth ? '34px' : '24px'}
-                h={isLargeWidth ? '34px' : '24px'}
-                {...(item.obj === 'AI'
-                  ? {
-                      order: 1,
-                      mr: ['6px', 2]
-                    }
-                  : {
-                      order: 3,
-                      ml: ['6px', 2]
-                    })}
-              />
-              {/* message */}
-              <Flex order={2} pt={2} maxW={`calc(100% - ${isLargeWidth ? '75px' : '58px'})`}>
-                {item.obj === 'AI' ? (
-                  <Box w={'100%'}>
-                    <Card bg={'white'} px={4} py={3} borderRadius={'0 8px 8px 8px'}>
-                      <Markdown
-                        source={item.value}
-                        isChatting={index === chatHistory.length - 1 && isChatting}
-                      />
-                    </Card>
-                  </Box>
-                ) : (
-                  <Box>
-                    <Card
-                      className="markdown"
-                      whiteSpace={'pre-wrap'}
-                      px={4}
-                      py={3}
-                      borderRadius={'8px 0 8px 8px'}
-                      bg={'myBlue.300'}
-                    >
-                      <Box as={'p'}>{item.value}</Box>
-                    </Card>
-                  </Box>
-                )}
-              </Flex>
-            </Flex>
-          ))}
-        </Box>
-      );
-    },
-    [chatHistory, isChatting, userInfo?.avatar]
-  );
-
-  const ChatInput = useCallback(() => {
-    return (
-      <Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']}>
-        <Box
-          py={'18px'}
-          position={'relative'}
-          boxShadow={`0 0 10px rgba(0,0,0,0.1)`}
-          borderTop={['1px solid', 0]}
-          borderTopColor={'gray.200'}
-          borderRadius={['none', 'md']}
-          backgroundColor={'white'}
-        >
-          {/* 输入框 */}
-          <Textarea
-            ref={TextareaDom}
-            py={0}
-            pr={['45px', '55px']}
-            border={'none'}
-            _focusVisible={{
-              border: 'none'
-            }}
-            placeholder="提问"
-            resize={'none'}
-            rows={1}
-            height={'22px'}
-            lineHeight={'22px'}
-            maxHeight={'150px'}
-            maxLength={-1}
-            overflowY={'auto'}
-            whiteSpace={'pre-wrap'}
-            wordBreak={'break-all'}
-            boxShadow={'none !important'}
-            color={'myGray.900'}
-            onChange={(e) => {
-              const textarea = e.target;
-              textarea.style.height = textareaMinH;
-              textarea.style.height = `${textarea.scrollHeight}px`;
-            }}
-            onKeyDown={(e) => {
-              // 触发快捷发送
-              if (e.keyCode === 13 && !e.shiftKey) {
-                sendPrompt();
-                e.preventDefault();
-              }
-              // 全选内容
-              // @ts-ignore
-              e.key === 'a' && e.ctrlKey && e.target?.select();
-            }}
-          />
-          {/* 发送和等待按键 */}
-          <Flex
-            alignItems={'center'}
-            justifyContent={'center'}
-            h={'25px'}
-            w={'25px'}
-            position={'absolute'}
-            right={['12px', '20px']}
-            bottom={'15px'}
-          >
-            {isChatting ? (
-              <MyIcon
-                className={styles.stopIcon}
-                width={['22px', '25px']}
-                height={['22px', '25px']}
-                cursor={'pointer'}
-                name={'stop'}
-                color={'gray.500'}
-                onClick={() => controller.current?.abort()}
-              />
-            ) : (
-              <MyIcon
-                name={'chatSend'}
-                width={['18px', '20px']}
-                height={['18px', '20px']}
-                cursor={'pointer'}
-                color={'gray.500'}
-                onClick={sendPrompt}
-              />
-            )}
-          </Flex>
-        </Box>
-      </Box>
-    );
-  }, [isChatting, sendPrompt]);
-
-  // abort stream
-  useEffect(() => {
-    return () => {
-      window.speechSynthesis?.cancel();
-      isLeavePage.current = true;
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      controller.current?.abort();
-    };
-  }, [router.asPath]);
-
-  return {
-    ChatBoxParentRef,
-    scrollToBottom,
-    setChatHistory,
-    ChatBox,
-    ChatInput
-  };
-};
diff --git a/client/src/pages/api/chat/chatTest.ts b/client/src/pages/api/chat/chatTest.ts
new file mode 100644
index 000000000..d3e314a4b
--- /dev/null
+++ b/client/src/pages/api/chat/chatTest.ts
@@ -0,0 +1,77 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { connectToDatabase } from '@/service/mongo';
+import { authUser } from '@/service/utils/auth';
+import { sseErrRes } from '@/service/response';
+import { sseResponseEventEnum } from '@/constants/chat';
+import { sseResponse } from '@/service/utils/tools';
+import { type ChatCompletionRequestMessage } from 'openai';
+import { AppModuleItemType } from '@/types/app';
+import { dispatchModules } from '../openapi/v1/chat/completions2';
+
+export type MessageItemType = ChatCompletionRequestMessage & { _id?: string };
+export type Props = {
+  history: MessageItemType[];
+  prompt: string;
+  modules: AppModuleItemType[];
+  variable: Record<string, any>;
+};
+export type ChatResponseType = {
+  newChatId: string;
+  quoteLen?: number;
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.on('close', () => {
+    res.end();
+  });
+  res.on('error', () => {
+    console.log('error: ', 'request error');
+    res.end();
+  });
+
+  let { modules = [], history = [], prompt, variable = {} } = req.body as Props;
+
+  try {
+    if (!history || !modules || !prompt) {
+      throw new Error('Prams Error');
+    }
+    if (!Array.isArray(modules)) {
+      throw new Error('history is not array');
+    }
+
+    await connectToDatabase();
+
+    /* user auth */
+    const { userId } = await authUser({ req });
+
+    /* start process */
+    const { responseData } = await dispatchModules({
+      res,
+      modules: modules,
+      variable,
+      params: {
+        history,
+        userChatInput: prompt
+      },
+      stream: true
+    });
+
+    sseResponse({
+      res,
+      event: sseResponseEventEnum.answer,
+      data: '[DONE]'
+    });
+    sseResponse({
+      res,
+      event: sseResponseEventEnum.appStreamResponse,
+      data: JSON.stringify(responseData)
+    });
+    res.end();
+
+    // bill
+  } catch (err: any) {
+    res.status(500);
+    sseErrRes(res, err);
+    res.end();
+  }
+}
diff --git a/client/src/pages/api/chat/shareChat/create.ts b/client/src/pages/api/chat/shareChat/create.ts
index 8ec481d7b..0f3935038 100644
--- a/client/src/pages/api/chat/shareChat/create.ts
+++ b/client/src/pages/api/chat/shareChat/create.ts
@@ -3,33 +3,36 @@ import { jsonRes } from '@/service/response';
 import { connectToDatabase, ShareChat } from '@/service/mongo';
 import { authApp, authUser } from '@/service/utils/auth';
 import type { ShareChatEditType } from '@/types/app';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 24);
 
 /* create a shareChat */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { modelId, name, maxContext, password } = req.body as ShareChatEditType & {
-      modelId: string;
+    const { appId, name, maxContext } = req.body as ShareChatEditType & {
+      appId: string;
     };
 
     await connectToDatabase();
 
     const { userId } = await authUser({ req, authToken: true });
     await authApp({
-      appId: modelId,
+      appId,
       userId,
       authOwner: false
     });
 
-    const { _id } = await ShareChat.create({
+    const shareId = nanoid();
+    await ShareChat.create({
+      shareId,
       userId,
-      modelId,
+      appId,
       name,
-      password,
       maxContext
     });
 
     jsonRes(res, {
-      data: _id
+      data: shareId
     });
   } catch (err) {
     jsonRes(res, {
diff --git a/client/src/pages/api/chat/shareChat/init.ts b/client/src/pages/api/chat/shareChat/init.ts
index fc1e4ca4e..cdc6cf68f 100644
--- a/client/src/pages/api/chat/shareChat/init.ts
+++ b/client/src/pages/api/chat/shareChat/init.ts
@@ -5,13 +5,14 @@ import type { InitShareChatResponse } from '@/api/response/chat';
 import { authApp } from '@/service/utils/auth';
 import { hashPassword } from '@/service/utils/tools';
 import { HUMAN_ICON } from '@/constants/chat';
+import { FlowModuleTypeEnum } from '@/constants/flow';
+import { SystemInputEnum } from '@/constants/app';
 
 /* 初始化我的聊天框，需要身份验证 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    let { shareId, password = '' } = req.query as {
+    let { shareId } = req.query as {
       shareId: string;
-      password: string;
     };
 
     if (!shareId) {
@@ -21,22 +22,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     await connectToDatabase();
 
     // get shareChat
-    const shareChat = await ShareChat.findById(shareId);
+    const shareChat = await ShareChat.findOne({ shareId });
 
     if (!shareChat) {
-      throw new Error('分享链接已失效');
-    }
-
-    if (shareChat.password !== hashPassword(password)) {
       return jsonRes(res, {
         code: 501,
-        message: '密码不正确'
+        error: '分享链接已失效'
       });
     }
 
     // 校验使用权限
     const { app } = await authApp({
-      appId: shareChat.modelId,
+      appId: shareChat.appId,
       userId: String(shareChat.userId),
       authOwner: false
     });
@@ -45,15 +42,22 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     jsonRes<InitShareChatResponse>(res, {
       data: {
-        appId: shareChat.modelId,
-        maxContext: shareChat.maxContext,
         userAvatar: user?.avatar || HUMAN_ICON,
-        model: {
+        maxContext:
+          app.modules
+            ?.find((item) => item.flowType === FlowModuleTypeEnum.historyNode)
+            ?.inputs?.find((item) => item.key === 'maxContext')?.value || 0,
+        app: {
+          variableModules: app.modules
+            .find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
+            ?.inputs?.find((item) => item.key === SystemInputEnum.variables)?.value,
+          welcomeText: app.modules
+            .find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
+            ?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
           name: app.name,
           avatar: app.avatar,
           intro: app.intro
-        },
-        chatModel: app.chat.chatModel
+        }
       }
     });
   } catch (err) {
diff --git a/client/src/pages/api/chat/shareChat/list.ts b/client/src/pages/api/chat/shareChat/list.ts
index 49b5d1e8f..48338b138 100644
--- a/client/src/pages/api/chat/shareChat/list.ts
+++ b/client/src/pages/api/chat/shareChat/list.ts
@@ -4,11 +4,11 @@ import { connectToDatabase, ShareChat } from '@/service/mongo';
 import { authUser } from '@/service/utils/auth';
 import { hashPassword } from '@/service/utils/tools';
 
-/* get shareChat list by modelId */
+/* get shareChat list by appId */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const { modelId } = req.query as {
-      modelId: string;
+    const { appId } = req.query as {
+      appId: string;
     };
 
     await connectToDatabase();
@@ -16,19 +16,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { userId } = await authUser({ req, authToken: true });
 
     const data = await ShareChat.find({
-      modelId,
+      appId,
       userId
     }).sort({
       _id: -1
     });
 
-    const blankPassword = hashPassword('');
-
     jsonRes(res, {
       data: data.map((item) => ({
         _id: item._id,
+        shareId: item.shareId,
         name: item.name,
-        password: item.password === blankPassword ? '' : '1',
         tokens: item.tokens,
         maxContext: item.maxContext,
         lastTime: item.lastTime
diff --git a/client/src/pages/api/openapi/modules/chat/gpt.ts b/client/src/pages/api/openapi/modules/chat/gpt.ts
index 3cc3eebb8..f8ac885c7 100644
--- a/client/src/pages/api/openapi/modules/chat/gpt.ts
+++ b/client/src/pages/api/openapi/modules/chat/gpt.ts
@@ -131,6 +131,7 @@ export async function chatCompletion({
 
   const adaptMessages = adaptChatItem_openAI({ messages: filterMessages, reserveId: false });
   const chatAPI = getOpenAIApi();
+  console.log(adaptMessages);
 
   /* count response max token */
   const promptsToken = modelToolMap.countTokens({
diff --git a/client/src/pages/api/openapi/v1/chat/completions2.ts b/client/src/pages/api/openapi/v1/chat/completions2.ts
index e6b3703f5..231d20bca 100644
--- a/client/src/pages/api/openapi/v1/chat/completions2.ts
+++ b/client/src/pages/api/openapi/v1/chat/completions2.ts
@@ -23,7 +23,6 @@ type FastGptWebChatProps = {
   appId?: string;
 };
 type FastGptShareChatProps = {
-  password?: string;
   shareId?: string;
 };
 export type Props = CreateChatCompletionRequest &
@@ -31,6 +30,7 @@ export type Props = CreateChatCompletionRequest &
   FastGptShareChatProps & {
     messages: MessageItemType[];
     stream?: boolean;
+    variables: Record<string, any>;
   };
 export type ChatResponseType = {
   newChatId: string;
@@ -46,7 +46,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
     res.end();
   });
 
-  let { chatId, appId, shareId, password = '', stream = false, messages = [] } = req.body as Props;
+  let { chatId, appId, shareId, stream = false, messages = [], variables = {} } = req.body as Props;
 
   try {
     if (!messages) {
@@ -66,8 +66,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
       authType
     } = await (shareId
       ? authShareChat({
-          shareId,
-          password
+          shareId
         })
       : authUser({ req }));
 
@@ -105,6 +104,7 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
     const { responseData, answerText } = await dispatchModules({
       res,
       modules: app.modules,
+      variables,
       params: {
         history: prompts,
         userChatInput: prompt.value
@@ -175,18 +175,20 @@ export default withNextCors(async function handler(req: NextApiRequest, res: Nex
   }
 });
 
-async function dispatchModules({
+export async function dispatchModules({
   res,
   modules,
   params = {},
+  variables = {},
   stream = false
 }: {
   res: NextApiResponse;
   modules: AppModuleItemType[];
   params?: Record<string, any>;
+  variables?: Record<string, any>;
   stream?: boolean;
 }) {
-  const runningModules = loadModules(modules);
+  const runningModules = loadModules(modules, variables);
   let storeData: Record<string, any> = {};
   let responseData: Record<string, any> = {};
   let answerText = '';
@@ -333,7 +335,10 @@ async function dispatchModules({
   };
 }
 
-function loadModules(modules: AppModuleItemType[]): RunningModuleItemType[] {
+function loadModules(
+  modules: AppModuleItemType[],
+  variables: Record<string, any>
+): RunningModuleItemType[] {
   return modules.map((module) => {
     return {
       moduleId: module.moduleId,
@@ -341,10 +346,25 @@ function loadModules(modules: AppModuleItemType[]): RunningModuleItemType[] {
       url: module.url,
       inputs: module.inputs
         .filter((item) => item.type !== FlowInputItemTypeEnum.target || item.connected) // filter unconnected target input
-        .map((item) => ({
-          key: item.key,
-          value: item.value
-        })),
+        .map((item) => {
+          if (typeof item.value !== 'string') {
+            return {
+              key: item.key,
+              value: item.value
+            };
+          }
+
+          // variables replace
+          const replacedVal = item.value.replace(
+            /{{(.*?)}}/g,
+            (match, key) => variables[key.trim()] || match
+          );
+
+          return {
+            key: item.key,
+            value: replacedVal
+          };
+        }),
       outputs: module.outputs.map((item) => ({
         key: item.key,
         answer: item.key === SpecificInputEnum.answerText,
diff --git a/client/src/pages/app/detail/components/API.tsx b/client/src/pages/app/detail/components/API.tsx
index 1365c0517..fba9c3c08 100644
--- a/client/src/pages/app/detail/components/API.tsx
+++ b/client/src/pages/app/detail/components/API.tsx
@@ -8,7 +8,7 @@ const APIKeyModal = dynamic(() => import('@/components/APIKeyModal'), {
   ssr: false
 });
 
-const API = ({ modelId }: { modelId: string }) => {
+const API = ({ appId }: { appId: string }) => {
   const theme = useTheme();
   const { copyData } = useCopyData();
   const [baseUrl, setBaseUrl] = useState('https://fastgpt.run/api/openapi');
@@ -33,9 +33,9 @@ const API = ({ modelId }: { modelId: string }) => {
             ml={2}
             fontWeight={'bold'}
             cursor={'pointer'}
-            onClick={() => copyData(modelId, '已复制 AppId')}
+            onClick={() => copyData(appId, '已复制 AppId')}
           >
-            {modelId}
+            {appId}
           </Box>
         </Box>
         <Flex
diff --git a/client/src/pages/app/detail/components/Settings.tsx b/client/src/pages/app/detail/components/Settings.tsx
index 58fbf5a7c..5b97d65af 100644
--- a/client/src/pages/app/detail/components/Settings.tsx
+++ b/client/src/pages/app/detail/components/Settings.tsx
@@ -16,7 +16,7 @@ import type { AppSchema } from '@/types/mongoSchema';
 
 import Avatar from '@/components/Avatar';
 
-const Settings = ({ modelId }: { modelId: string }) => {
+const Settings = ({ appId }: { appId: string }) => {
   const { toast } = useToast();
   const router = useRouter();
   const { Loading, setIsLoading } = useLoading();
@@ -136,10 +136,10 @@ const Settings = ({ modelId }: { modelId: string }) => {
   );
 
   // load model data
-  const { isLoading } = useQuery([modelId], () => loadAppDetail(modelId, true), {
+  const { isLoading } = useQuery([appId], () => loadAppDetail(appId, true), {
     onSuccess(res) {
       res && reset(res);
-      modelId && setLastModelId(modelId);
+      appId && setLastModelId(appId);
       setRefresh(!refresh);
     },
     onError(err: any) {
@@ -240,7 +240,7 @@ const Settings = ({ modelId }: { modelId: string }) => {
               router.prefetch('/chat');
               await saveUpdateModel();
             } catch (error) {}
-            router.push(`/chat?appId=${modelId}`);
+            router.push(`/chat?appId=${appId}`);
           }}
         >
           对话
diff --git a/client/src/pages/app/detail/components/Share.tsx b/client/src/pages/app/detail/components/Share.tsx
index 9f7badd87..474b723d5 100644
--- a/client/src/pages/app/detail/components/Share.tsx
+++ b/client/src/pages/app/detail/components/Share.tsx
@@ -38,7 +38,7 @@ import { defaultShareChat } from '@/constants/model';
 import type { ShareChatEditType } from '@/types/app';
 import MyTooltip from '@/components/MyTooltip';
 
-const Share = ({ modelId }: { modelId: string }) => {
+const Share = ({ appId }: { appId: string }) => {
   const { toast } = useToast();
   const { Loading, setIsLoading } = useLoading();
   const { copyData } = useCopyData();
@@ -63,7 +63,7 @@ const Share = ({ modelId }: { modelId: string }) => {
     isFetching,
     data: shareChatList = [],
     refetch: refetchShareChatList
-  } = useQuery(['initShareChatList', modelId], () => getShareChatList(modelId));
+  } = useQuery(['initShareChatList', appId], () => getShareChatList(appId));
 
   const onclickCreateShareChat = useCallback(
     async (e: ShareChatEditType) => {
@@ -71,13 +71,12 @@ const Share = ({ modelId }: { modelId: string }) => {
         setIsLoading(true);
         const id = await createShareChat({
           ...e,
-          modelId
+          appId
         });
         onCloseCreateShareChat();
         refetchShareChatList();
 
-        const url = `对话地址为：${location.origin}/chat/share?shareId=${id}
-${e.password ? `密码为: ${e.password}` : ''}`;
+        const url = `对话地址为：${location.origin}/chat/share?shareId=${id}`;
         copyData(url, '已复制分享地址');
 
         resetShareChat(defaultShareChat);
@@ -91,8 +90,8 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
       setIsLoading(false);
     },
     [
+      appId,
       copyData,
-      modelId,
       onCloseCreateShareChat,
       refetchShareChatList,
       resetShareChat,
@@ -136,7 +135,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
           <Thead>
             <Tr>
               <Th>名称</Th>
-              <Th>密码</Th>
               <Th>最大上下文</Th>
               <Th>tokens消耗</Th>
               <Th>最后使用时间</Th>
@@ -147,7 +145,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
             {shareChatList.map((item) => (
               <Tr key={item._id}>
                 <Td>{item.name}</Td>
-                <Td>{item.password === '1' ? '已开启' : '未使用'}</Td>
                 <Td>{item.maxContext}</Td>
                 <Td>{formatTokens(item.tokens)}</Td>
                 <Td>{item.lastTime ? formatTimeToChatTime(item.lastTime) : '未使用'}</Td>
@@ -160,7 +157,7 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
                       cursor={'pointer'}
                       _hover={{ color: 'myBlue.600' }}
                       onClick={() => {
-                        const url = `${location.origin}/chat/share?shareId=${item._id}`;
+                        const url = `${location.origin}/chat/share?shareId=${item.shareId}`;
                         copyData(url, '已复制分享地址');
                       }}
                     />
@@ -216,17 +213,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
                 />
               </Flex>
             </FormControl>
-            <FormControl mt={4}>
-              <Flex alignItems={'center'}>
-                <Box flex={'0 0 60px'} w={0}>
-                  密码:
-                </Box>
-                <Input placeholder={'不设置密码，可直接访问'} {...registerShareChat('password')} />
-              </Flex>
-              <Box fontSize={'xs'} ml={'60px'} color={'myGray.600'}>
-                密码不会再次展示，请记住你的密码
-              </Box>
-            </FormControl>
             <FormControl mt={9}>
               <Flex alignItems={'center'}>
                 <Box flex={'0 0 120px'} w={0}>
diff --git a/client/src/pages/app/detail/components/edit/components/ChatTest.tsx b/client/src/pages/app/detail/components/edit/components/ChatTest.tsx
index 869d0ac73..09e609f4a 100644
--- a/client/src/pages/app/detail/components/edit/components/ChatTest.tsx
+++ b/client/src/pages/app/detail/components/edit/components/ChatTest.tsx
@@ -1,66 +1,157 @@
 import { AppModuleItemType } from '@/types/app';
 import { AppSchema } from '@/types/mongoSchema';
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { Box, useOutsideClick, Flex, IconButton } from '@chakra-ui/react';
+import React, {
+  useMemo,
+  useCallback,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  ForwardedRef
+} from 'react';
+import { Box, Flex, IconButton, useOutsideClick } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';
-import { useChat } from '@/hooks/useChat';
+import { FlowModuleTypeEnum } from '@/constants/flow';
+import { SystemInputEnum } from '@/constants/app';
+import { streamFetch } from '@/api/fetch';
+import MyTooltip from '@/components/MyTooltip';
+import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
 
-const ChatTest = ({
-  app,
-  modules,
-  onClose
-}: {
-  app: AppSchema;
-  modules?: AppModuleItemType[];
-  onClose: () => void;
-}) => {
-  const isOpen = useMemo(() => !!modules, [modules]);
+export type ChatTestComponentRef = {
+  resetChatTest: () => void;
+};
 
-  const { ChatBox, ChatInput, ChatBoxParentRef, setChatHistory } = useChat({
-    appId: app._id
+const ChatTest = (
+  {
+    app,
+    modules = [],
+    onClose
+  }: {
+    app: AppSchema;
+    modules?: AppModuleItemType[];
+    onClose: () => void;
+  },
+  ref: ForwardedRef<ChatTestComponentRef>
+) => {
+  const BoxRef = useRef(null);
+  const ChatBoxRef = useRef<ComponentRef>(null);
+  const isOpen = useMemo(() => modules && modules.length > 0, [modules]);
+
+  const variableModules = useMemo(
+    () =>
+      modules
+        .find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
+        ?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value,
+    [modules]
+  );
+  const welcomeText = useMemo(
+    () =>
+      modules
+        .find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
+        ?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
+    [modules]
+  );
+
+  const startChat = useCallback(
+    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
+      const historyMaxLen =
+        modules
+          ?.find((item) => item.flowType === FlowModuleTypeEnum.historyNode)
+          ?.inputs?.find((item) => item.key === 'maxContext')?.value || 0;
+      const history = messages.slice(-historyMaxLen - 2, -2);
+      console.log(history, 'history====');
+
+      // 流请求，获取数据
+      const { responseText } = await streamFetch({
+        url: '/api/chat/chatTest',
+        data: {
+          history,
+          prompt: messages[messages.length - 2].content,
+          modules,
+          variables
+        },
+        onMessage: generatingMessage,
+        abortSignal: controller
+      });
+
+      return { responseText };
+    },
+    [modules]
+  );
+
+  useOutsideClick({
+    ref: BoxRef,
+    handler: () => {
+      onClose();
+    }
   });
 
-  return (
-    <Flex
-      zIndex={3}
-      flexDirection={'column'}
-      position={'absolute'}
-      top={5}
-      right={0}
-      h={isOpen ? '95%' : '0'}
-      w={isOpen ? '460px' : '0'}
-      bg={'white'}
-      boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
-      borderRadius={'md'}
-      overflow={'hidden'}
-      transition={'.2s ease'}
-    >
-      <Flex py={4} px={5} whiteSpace={'nowrap'}>
-        <Box fontSize={'xl'} fontWeight={'bold'} flex={1}>
-          调试预览
-        </Box>
-        <IconButton
-          className="chat"
-          size={'sm'}
-          icon={<MyIcon name={'clearLight'} w={'14px'} />}
-          variant={'base'}
-          borderRadius={'md'}
-          aria-label={'delete'}
-          onClick={(e) => {
-            e.stopPropagation();
-            setChatHistory([]);
-          }}
-        />
-      </Flex>
-      <Box ref={ChatBoxParentRef} flex={1} px={5} overflow={'overlay'}>
-        <ChatBox appAvatar={app.avatar} />
-      </Box>
+  useImperativeHandle(ref, () => ({
+    resetChatTest() {
+      console.log(ChatBoxRef.current, '===');
 
-      <Box px={5}>
-        <ChatInput />
-      </Box>
-    </Flex>
+      ChatBoxRef.current?.resetHistory([]);
+      ChatBoxRef.current?.resetVariables();
+    }
+  }));
+
+  return (
+    <>
+      <Box
+        zIndex={2}
+        display={isOpen ? 'block' : 'none'}
+        position={'fixed'}
+        top={0}
+        left={0}
+        bottom={0}
+        right={0}
+      />
+      <Flex
+        ref={BoxRef}
+        zIndex={3}
+        flexDirection={'column'}
+        position={'absolute'}
+        top={5}
+        right={0}
+        h={isOpen ? '95%' : '0'}
+        w={isOpen ? '460px' : '0'}
+        bg={'white'}
+        boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
+        borderRadius={'md'}
+        overflow={'hidden'}
+        transition={'.2s ease'}
+      >
+        <Flex py={4} px={5} whiteSpace={'nowrap'}>
+          <Box fontSize={'xl'} fontWeight={'bold'} flex={1}>
+            调试预览
+          </Box>
+          <MyTooltip label={'重置'}>
+            <IconButton
+              className="chat"
+              size={'sm'}
+              icon={<MyIcon name={'clearLight'} w={'14px'} />}
+              variant={'base'}
+              borderRadius={'md'}
+              aria-label={'delete'}
+              onClick={(e) => {
+                e.stopPropagation();
+                ChatBoxRef.current?.resetHistory([]);
+                ChatBoxRef.current?.resetVariables();
+              }}
+            />
+          </MyTooltip>
+        </Flex>
+        <Box flex={1}>
+          <ChatBox
+            ref={ChatBoxRef}
+            appAvatar={app.avatar}
+            variableModules={variableModules}
+            welcomeText={welcomeText}
+            onStartChat={startChat}
+          />
+        </Box>
+      </Flex>
+    </>
   );
 };
 
-export default ChatTest;
+export default React.memo(forwardRef(ChatTest));
diff --git a/client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx b/client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx
index 23e720aa5..54dcd8580 100644
--- a/client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx
+++ b/client/src/pages/app/detail/components/edit/components/NodeKbSearch.tsx
@@ -12,13 +12,7 @@ const NodeKbSearch = ({
   data: { moduleId, inputs, outputs, onChangeNode, ...props }
 }: NodeProps<FlowModuleItemType>) => {
   return (
-    <NodeCard
-      minW={'400px'}
-      logo={'/icon/logo.png'}
-      name={'知识库搜索'}
-      moduleId={moduleId}
-      {...props}
-    >
+    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
       <Divider text="Input" />
       <Container>
         <RenderInput
diff --git a/client/src/pages/app/detail/components/edit/components/NodeUserGuide.tsx b/client/src/pages/app/detail/components/edit/components/NodeUserGuide.tsx
new file mode 100644
index 000000000..31db581de
--- /dev/null
+++ b/client/src/pages/app/detail/components/edit/components/NodeUserGuide.tsx
@@ -0,0 +1,339 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { NodeProps } from 'reactflow';
+import {
+  Box,
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Flex,
+  Switch,
+  Input,
+  useDisclosure,
+  useTheme,
+  Grid,
+  FormControl,
+  Textarea
+} from '@chakra-ui/react';
+import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
+import NodeCard from './modules/NodeCard';
+import { FlowModuleItemType } from '@/types/flow';
+import Container from './modules/Container';
+import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
+import type { VariableItemType } from '@/types/app';
+import MyIcon from '@/components/Icon';
+import { useForm } from 'react-hook-form';
+import { useFieldArray } from 'react-hook-form';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
+import { Label } from './render/RenderInput';
+import MyTooltip from '@/components/MyTooltip';
+
+const VariableTypeList = [
+  { label: '文本', icon: 'settingLight', key: VariableInputEnum.input },
+  { label: '下拉单选', icon: 'settingLight', key: VariableInputEnum.select }
+];
+const defaultVariable: VariableItemType = {
+  id: nanoid(),
+  key: 'key',
+  label: 'label',
+  type: VariableInputEnum.input,
+  required: true,
+  maxLen: 50,
+  enums: [{ value: '' }]
+};
+
+const NodeUserGuide = ({
+  data: { inputs, outputs, onChangeNode, ...props }
+}: NodeProps<FlowModuleItemType>) => {
+  const theme = useTheme();
+
+  const variables = useMemo(
+    () =>
+      (inputs.find((item) => item.key === SystemInputEnum.variables)
+        ?.value as VariableItemType[]) || [],
+    [inputs]
+  );
+  const welcomeText = useMemo(
+    () => inputs.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
+    [inputs]
+  );
+
+  const [refresh, setRefresh] = useState(false);
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const { reset, getValues, setValue, register, control, handleSubmit } = useForm<{
+    variable: VariableItemType;
+  }>({
+    defaultValues: {
+      variable: defaultVariable
+    }
+  });
+
+  const {
+    fields: selectEnums,
+    append: appendEnums,
+    remove: removeEnums
+  } = useFieldArray({
+    control,
+    name: 'variable.enums'
+  });
+
+  const updateVariables = useCallback(
+    (value: VariableItemType[]) => {
+      onChangeNode({
+        moduleId: props.moduleId,
+        key: SystemInputEnum.variables,
+        type: 'inputs',
+        value
+      });
+    },
+    [onChangeNode, props.moduleId]
+  );
+
+  const onclickSubmit = useCallback(
+    ({ variable }: { variable: VariableItemType }) => {
+      updateVariables(variables.map((item) => (item.id === variable.id ? variable : item)));
+      onClose();
+    },
+    [onClose, updateVariables, variables]
+  );
+
+  return (
+    <>
+      <NodeCard minW={'300px'} {...props}>
+        <Container borderTop={'2px solid'} borderTopColor={'myGray.200'}>
+          <>
+            <Flex mb={1} alignItems={'center'}>
+              <MyIcon name={'welcomeText'} mr={2} w={'16px'} color={'#E74694'} />
+              <Box>对话开场白</Box>
+            </Flex>
+            <Textarea
+              className="nodrag"
+              rows={3}
+              resize={'both'}
+              defaultValue={welcomeText}
+              bg={'myWhite.600'}
+              onChange={(e) => {
+                onChangeNode({
+                  moduleId: props.moduleId,
+                  key: SystemInputEnum.welcomeText,
+                  type: 'inputs',
+                  value: e.target.value
+                });
+              }}
+            />
+          </>
+          <Box mt={4}>
+            <Flex alignItems={'center'}>
+              <MyIcon name={'variable'} mr={2} w={'20px'} color={'#FF8A4C'} />
+              <Box>变量</Box>
+              <MyTooltip
+                label={`变量会在开始对话前输入，仅会在本次对话中生效。\n你可以在任何字符串模块（系统提示词、限定词等）中使用 {{变量key}} 来代表变量输入。`}
+              >
+                <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
+              </MyTooltip>
+            </Flex>
+            <TableContainer>
+              <Table>
+                <Thead>
+                  <Tr>
+                    <Th>变量名</Th>
+                    <Th>变量 key</Th>
+                    <Th>必填</Th>
+                    <Th></Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {variables.map((item, index) => (
+                    <Tr key={index}>
+                      <Td>{item.label} </Td>
+                      <Td>{item.key}</Td>
+                      <Td>{item.required ? '✔' : ''}</Td>
+                      <Td>
+                        <MyIcon
+                          mr={3}
+                          name={'settingLight'}
+                          w={'16px'}
+                          cursor={'pointer'}
+                          onClick={() => {
+                            onOpen();
+                            reset({ variable: item });
+                          }}
+                        />
+                        <MyIcon
+                          name={'delete'}
+                          w={'16px'}
+                          cursor={'pointer'}
+                          onClick={() =>
+                            updateVariables(variables.filter((variable) => variable.id !== item.id))
+                          }
+                        />
+                      </Td>
+                    </Tr>
+                  ))}
+                </Tbody>
+              </Table>
+            </TableContainer>
+            <Box mt={2} textAlign={'right'}>
+              <Button
+                variant={'base'}
+                onClick={() => {
+                  const newVariable = { ...defaultVariable, id: nanoid() };
+                  updateVariables(variables.concat(newVariable));
+                  reset({ variable: newVariable });
+                  onOpen();
+                }}
+              >
+                + 新增
+              </Button>
+            </Box>
+          </Box>
+        </Container>
+      </NodeCard>
+      <Modal isOpen={isOpen} onClose={() => {}}>
+        <ModalOverlay />
+        <ModalContent maxW={'Min(400px,90vw)'}>
+          <ModalHeader display={'flex'}>
+            <MyIcon name={'variable'} mr={2} w={'24px'} color={'#FF8A4C'} />
+            变量设置
+          </ModalHeader>
+          <ModalBody>
+            <Flex alignItems={'center'}>
+              <Box w={'70px'}>必填</Box>
+              <Switch {...register('variable.required')} />
+            </Flex>
+            <Flex mt={5} alignItems={'center'}>
+              <Box w={'80px'}>变量名</Box>
+              <Input {...register('variable.label', { required: '变量名不能为空' })} />
+            </Flex>
+            <Flex mt={5} alignItems={'center'}>
+              <Box w={'80px'}>变量 key</Box>
+              <Input {...register('variable.key', { required: '变量 key 不能为空' })} />
+            </Flex>
+
+            <Box mt={5} mb={2}>
+              字段类型
+            </Box>
+            <Grid gridTemplateColumns={'repeat(2,130px)'} gridGap={4}>
+              {VariableTypeList.map((item) => (
+                <Flex
+                  key={item.key}
+                  px={4}
+                  py={1}
+                  border={theme.borders.base}
+                  borderRadius={'md'}
+                  cursor={'pointer'}
+                  {...(item.key === getValues('variable.type')
+                    ? {
+                        bg: 'myWhite.600'
+                      }
+                    : {
+                        _hover: {
+                          boxShadow: 'md'
+                        },
+                        onClick: () => {
+                          setValue('variable.type', item.key);
+                          setRefresh(!refresh);
+                        }
+                      })}
+                >
+                  <MyIcon name={item.icon as any} w={'16px'} />
+                  <Box ml={3}>{item.label}</Box>
+                </Flex>
+              ))}
+            </Grid>
+
+            {getValues('variable.type') === VariableInputEnum.input && (
+              <>
+                <Box mt={5} mb={2}>
+                  最大长度
+                </Box>
+                <Box>
+                  <NumberInput max={100} min={1} step={1} position={'relative'}>
+                    <NumberInputField
+                      {...register('variable.maxLen', {
+                        min: 1,
+                        max: 100,
+                        valueAsNumber: true
+                      })}
+                      max={100}
+                    />
+                    <NumberInputStepper>
+                      <NumberIncrementStepper />
+                      <NumberDecrementStepper />
+                    </NumberInputStepper>
+                  </NumberInput>
+                </Box>
+              </>
+            )}
+
+            {getValues('variable.type') === VariableInputEnum.select && (
+              <>
+                <Box mt={5} mb={2}>
+                  选项
+                </Box>
+                <Box>
+                  {selectEnums.map((item, i) => (
+                    <Flex key={item.id} mb={2} alignItems={'center'}>
+                      <FormControl>
+                        <Input
+                          {...register(`variable.enums.${i}.value`, {
+                            required: '选项内容不能为空'
+                          })}
+                        />
+                      </FormControl>
+                      <MyIcon
+                        ml={3}
+                        name={'delete'}
+                        w={'16px'}
+                        cursor={'pointer'}
+                        p={2}
+                        borderRadius={'lg'}
+                        _hover={{ bg: 'red.100' }}
+                        onClick={() => removeEnums(i)}
+                      />
+                    </Flex>
+                  ))}
+                </Box>
+                <Button
+                  variant={'solid'}
+                  w={'100%'}
+                  textAlign={'left'}
+                  leftIcon={<SmallAddIcon />}
+                  bg={'myGray.100 !important'}
+                  onClick={() => appendEnums({ value: '' })}
+                >
+                  添加选项
+                </Button>
+              </>
+            )}
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant={'base'} mr={3} onClick={onClose}>
+              取消
+            </Button>
+            <Button onClick={handleSubmit(onclickSubmit)}>确认</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+export default React.memo(NodeUserGuide);
diff --git a/client/src/pages/app/detail/components/edit/components/TemplateList.tsx b/client/src/pages/app/detail/components/edit/components/TemplateList.tsx
index fb817ad70..119977f38 100644
--- a/client/src/pages/app/detail/components/edit/components/TemplateList.tsx
+++ b/client/src/pages/app/detail/components/edit/components/TemplateList.tsx
@@ -14,10 +14,10 @@ const ModuleStoreList = ({
   onAddNode: (e: { template: AppModuleTemplateItemType; position: XYPosition }) => void;
   onClose: () => void;
 }) => {
-  const ContextMenuRef = useRef(null);
+  const BoxRef = useRef(null);
 
   useOutsideClick({
-    ref: ContextMenuRef,
+    ref: BoxRef,
     handler: () => {
       onClose();
     }
@@ -36,7 +36,7 @@ const ModuleStoreList = ({
       ></Box>
       <Flex
         zIndex={3}
-        ref={ContextMenuRef}
+        ref={BoxRef}
         flexDirection={'column'}
         position={'absolute'}
         top={'65px'}
@@ -52,7 +52,7 @@ const ModuleStoreList = ({
         userSelect={'none'}
       >
         <Box w={'330px'} py={4} fontSize={'xl'} fontWeight={'bold'}>
-          添加模块
+          系统模块
         </Box>
         <Box w={'330px'} flex={'1 0 0'} overflow={'overlay'}>
           {ModuleTemplates.map((item) =>
diff --git a/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx b/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
index ebfb33c96..d16576e30 100644
--- a/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
+++ b/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
@@ -3,12 +3,15 @@ import { Box, Flex, useTheme } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';
 import Avatar from '@/components/Avatar';
 import type { FlowModuleItemType } from '@/types/flow';
+import MyTooltip from '@/components/MyTooltip';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
 
 type Props = {
   children: React.ReactNode | React.ReactNode[] | string;
-  logo?: string;
-  name?: string;
-  intro?: string;
+  logo: string;
+  name: string;
+  description?: string;
+  intro: string;
   minW?: string | number;
   moduleId: string;
   onDelNode: FlowModuleItemType['onDelNode'];
@@ -18,6 +21,7 @@ const NodeCard = ({
   children,
   logo = '/icon/logo.png',
   name = '未知模块',
+  description,
   minW = '300px',
   onDelNode,
   moduleId
@@ -28,9 +32,15 @@ const NodeCard = ({
     <Box minW={minW} bg={'white'} border={theme.borders.md} borderRadius={'md'} boxShadow={'sm'}>
       <Flex className="custom-drag-handle" px={4} py={3} alignItems={'center'}>
         <Avatar src={logo} borderRadius={'md'} w={'30px'} h={'30px'} />
-        <Box ml={3} flex={1} fontSize={'lg'} color={'myGray.600'}>
+        <Box ml={3} fontSize={'lg'} color={'myGray.600'}>
           {name}
         </Box>
+        {description && (
+          <MyTooltip label={description}>
+            <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
+          </MyTooltip>
+        )}
+        <Box flex={1} />
         <MyIcon
           className={'nodrag'}
           name="delete"
diff --git a/client/src/pages/app/detail/components/edit/components/render/RenderInput.tsx b/client/src/pages/app/detail/components/edit/components/render/RenderInput.tsx
index 81635078a..cf52387fe 100644
--- a/client/src/pages/app/detail/components/edit/components/render/RenderInput.tsx
+++ b/client/src/pages/app/detail/components/edit/components/render/RenderInput.tsx
@@ -17,7 +17,7 @@ import MySelect from '@/components/Select';
 import MySlider from '@/components/Slider';
 import MyTooltip from '@/components/MyTooltip';
 
-const Label = ({
+export const Label = ({
   required = false,
   children,
   description
diff --git a/client/src/pages/app/detail/components/edit/index.tsx b/client/src/pages/app/detail/components/edit/index.tsx
index 9f9876135..47f4e8642 100644
--- a/client/src/pages/app/detail/components/edit/index.tsx
+++ b/client/src/pages/app/detail/components/edit/index.tsx
@@ -28,6 +28,9 @@ import dynamic from 'next/dynamic';
 import MyIcon from '@/components/Icon';
 import ButtonEdge from './components/modules/ButtonEdge';
 import MyTooltip from '@/components/MyTooltip';
+import TemplateList from './components/TemplateList';
+import ChatTest, { type ChatTestComponentRef } from './components/ChatTest';
+
 const NodeChat = dynamic(() => import('./components/NodeChat'), {
   ssr: false
 });
@@ -46,15 +49,12 @@ const NodeAnswer = dynamic(() => import('./components/NodeAnswer'), {
 const NodeQuestionInput = dynamic(() => import('./components/NodeQuestionInput'), {
   ssr: false
 });
-const TemplateList = dynamic(() => import('./components/TemplateList'), {
-  ssr: false
-});
-const ChatTest = dynamic(() => import('./components/ChatTest'), {
-  ssr: false
-});
 const NodeCQNode = dynamic(() => import('./components/NodeCQNode'), {
   ssr: false
 });
+const NodeUserGuide = dynamic(() => import('./components/NodeUserGuide'), {
+  ssr: false
+});
 
 import 'reactflow/dist/style.css';
 import styles from './index.module.scss';
@@ -63,6 +63,7 @@ import { AppModuleItemType, AppModuleTemplateItemType } from '@/types/app';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
 
 const nodeTypes = {
+  [FlowModuleTypeEnum.userGuide]: NodeUserGuide,
   [FlowModuleTypeEnum.questionInputNode]: NodeQuestionInput,
   [FlowModuleTypeEnum.historyNode]: NodeHistory,
   [FlowModuleTypeEnum.chatNode]: NodeChat,
@@ -78,6 +79,7 @@ type Props = { app: AppSchema; onBack: () => void };
 
 const AppEdit = ({ app, onBack }: Props) => {
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const ChatTestRef = useRef<ChatTestComponentRef>(null);
   const theme = useTheme();
   const { x, y, zoom } = useViewport();
   const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
@@ -222,7 +224,10 @@ const AppEdit = ({ app, onBack }: Props) => {
       });
     },
     successToast: '保存配置成功',
-    errorToast: '保存配置异常'
+    errorToast: '保存配置异常',
+    onSuccess() {
+      ChatTestRef.current?.resetChatTest();
+    }
   });
 
   const initData = useCallback(
@@ -289,8 +294,6 @@ const AppEdit = ({ app, onBack }: Props) => {
               aria-label={'save'}
               variant={'base'}
               onClick={() => {
-                // @ts-ignore
-                onclickSave();
                 setTestModules(flow2Modules());
               }}
             />
@@ -366,7 +369,12 @@ const AppEdit = ({ app, onBack }: Props) => {
         </ReactFlow>
 
         <TemplateList isOpen={isOpenTemplate} onAddNode={onAddNode} onClose={onCloseTemplate} />
-        <ChatTest modules={testModules} app={app} onClose={() => setTestModules(undefined)} />
+        <ChatTest
+          ref={ChatTestRef}
+          modules={testModules}
+          app={app}
+          onClose={() => setTestModules(undefined)}
+        />
       </Box>
     </Flex>
   );
@@ -378,4 +386,4 @@ const Flow = (data: Props) => (
   </ReactFlowProvider>
 );
 
-export default Flow;
+export default React.memo(Flow);
diff --git a/client/src/pages/app/detail/index.tsx b/client/src/pages/app/detail/index.tsx
index 7024906b7..0a9410499 100644
--- a/client/src/pages/app/detail/index.tsx
+++ b/client/src/pages/app/detail/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import { Box, Flex, IconButton, useTheme } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
@@ -155,14 +155,14 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
           />
         </Box>
         <Box flex={1}>
-          {currentTab === TabEnum.settings && <Settings modelId={appId} />}
+          {currentTab === TabEnum.settings && <Settings appId={appId} />}
           {currentTab === TabEnum.edit && (
             <Box position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
               <EditApp app={appDetail} onBack={() => setCurrentTab(TabEnum.settings)} />
             </Box>
           )}
-          {currentTab === TabEnum.API && <API modelId={appId} />}
-          {currentTab === TabEnum.share && <Share modelId={appId} />}
+          {currentTab === TabEnum.API && <API appId={appId} />}
+          {currentTab === TabEnum.share && <Share appId={appId} />}
         </Box>
       </Box>
     </PageContainer>
diff --git a/client/src/pages/chat/components/ChatHistorySlider.tsx b/client/src/pages/chat/components/ChatHistorySlider.tsx
new file mode 100644
index 000000000..3ff4a7adc
--- /dev/null
+++ b/client/src/pages/chat/components/ChatHistorySlider.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { AddIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Button,
+  Flex,
+  useTheme,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem
+} from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import MyIcon from '@/components/Icon';
+import type { ShareChatHistoryItemType, ExportChatType } from '@/types/chat';
+import { useChatStore } from '@/store/chat';
+import { useGlobalStore } from '@/store/global';
+import Avatar from '@/components/Avatar';
+
+const ChatHistorySlider = ({
+  appName,
+  appAvatar,
+  history,
+  activeHistoryId,
+  onChangeChat,
+  onDelHistory,
+  onCloseSlider
+}: {
+  appName: string;
+  appAvatar: string;
+  history: {
+    id: string;
+    title: string;
+  }[];
+  activeHistoryId: string;
+  onChangeChat: (historyId?: string) => void;
+  onDelHistory: (historyId: string) => void;
+  onCloseSlider: () => void;
+}) => {
+  const router = useRouter();
+  const theme = useTheme();
+  const { isPc } = useGlobalStore();
+
+  return (
+    <Flex
+      position={'relative'}
+      flexDirection={'column'}
+      w={'100%'}
+      h={'100%'}
+      bg={'white'}
+      px={[2, 5]}
+      borderRight={['', theme.borders.base]}
+    >
+      {isPc && (
+        <Flex pt={5} pb={2} alignItems={'center'} whiteSpace={'nowrap'}>
+          <Avatar src={appAvatar} />
+          <Box ml={2} fontWeight={'bold'} className={'textEllipsis'}>
+            {appName}
+          </Box>
+        </Flex>
+      )}
+      {/* 新对话 */}
+      <Box w={'100%'} h={'36px'} my={5}>
+        <Button
+          variant={'base'}
+          w={'100%'}
+          h={'100%'}
+          color={'myBlue.700'}
+          borderRadius={'xl'}
+          leftIcon={<MyIcon name={'edit'} w={'16px'} />}
+          overflow={'hidden'}
+          onClick={() => onChangeChat()}
+        >
+          新对话
+        </Button>
+      </Box>
+
+      {/* chat history */}
+      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
+        {history.map((item) => (
+          <Flex
+            position={'relative'}
+            key={item.id}
+            alignItems={'center'}
+            py={3}
+            px={4}
+            cursor={'pointer'}
+            userSelect={'none'}
+            borderRadius={'lg'}
+            mb={2}
+            _hover={{
+              bg: 'myGray.100',
+              '& .more': {
+                display: 'block'
+              }
+            }}
+            {...(item.id === activeHistoryId
+              ? {
+                  backgroundColor: 'myBlue.100 !important',
+                  color: 'myBlue.700'
+                }
+              : {
+                  onClick: () => {
+                    onChangeChat(item.id);
+                  }
+                })}
+          >
+            <MyIcon name={item.id === activeHistoryId ? 'chatFill' : 'chatLight'} w={'16px'} />
+            <Box flex={'1 0 0'} ml={3} className="textEllipsis">
+              {item.title}
+            </Box>
+            <Box className="more" display={['block', 'none']}>
+              <Menu autoSelect={false} isLazy offset={[0, 5]}>
+                <MenuButton
+                  _hover={{ bg: 'white' }}
+                  cursor={'pointer'}
+                  borderRadius={'md'}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <MyIcon name={'more'} w={'14px'} p={1} />
+                </MenuButton>
+                <MenuList color={'myGray.700'} minW={`90px !important`}>
+                  <MenuItem>
+                    <MyIcon mr={2} name={'setTop'} w={'16px'}></MyIcon>
+                    置顶
+                  </MenuItem>
+                  <MenuItem
+                    _hover={{ color: 'red.500' }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelHistory(item.id);
+                      if (item.id === activeHistoryId) {
+                        onChangeChat();
+                      }
+                    }}
+                  >
+                    <MyIcon mr={2} name={'delete'} w={'16px'}></MyIcon>
+                    删除
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </Box>
+          </Flex>
+        ))}
+        {history.length === 0 && (
+          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
+            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
+            <Box mt={2} color={'myGray.500'}>
+              还没有聊天记录
+            </Box>
+          </Flex>
+        )}
+      </Box>
+    </Flex>
+  );
+};
+
+export default ChatHistorySlider;
diff --git a/client/src/pages/chat/components/ShareHistory.tsx b/client/src/pages/chat/components/ShareHistory.tsx
deleted file mode 100644
index de08d3e57..000000000
--- a/client/src/pages/chat/components/ShareHistory.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import type { MouseEvent } from 'react';
-import { AddIcon } from '@chakra-ui/icons';
-import {
-  Box,
-  Button,
-  Flex,
-  useTheme,
-  Menu,
-  MenuList,
-  MenuItem,
-  useOutsideClick
-} from '@chakra-ui/react';
-import { ChatIcon } from '@chakra-ui/icons';
-import { useRouter } from 'next/router';
-import { formatTimeToChatTime } from '@/utils/tools';
-import MyIcon from '@/components/Icon';
-import type { ShareChatHistoryItemType, ExportChatType } from '@/types/chat';
-import { useChatStore } from '@/store/chat';
-import { useGlobalStore } from '@/store/global';
-
-import styles from '../index.module.scss';
-
-const PcSliderBar = ({
-  onclickDelHistory,
-  onclickExportChat,
-  onCloseSlider
-}: {
-  onclickDelHistory: (historyId: string) => void;
-  onclickExportChat: (type: ExportChatType) => void;
-  onCloseSlider: () => void;
-}) => {
-  const router = useRouter();
-  const { shareId = '', historyId = '' } = router.query as {
-    shareId: string;
-    historyId: string;
-  };
-  const theme = useTheme();
-  const { isPc } = useGlobalStore();
-
-  const ContextMenuRef = useRef(null);
-  const onclickContext = useRef(false);
-
-  const [contextMenuData, setContextMenuData] = useState<{
-    left: number;
-    top: number;
-    history: ShareChatHistoryItemType;
-  }>();
-
-  const { shareChatHistory } = useChatStore();
-
-  // close contextMenu
-  useOutsideClick({
-    ref: ContextMenuRef,
-    handler: () => {
-      setTimeout(() => {
-        if (contextMenuData && !onclickContext.current) {
-          setContextMenuData(undefined);
-        }
-      }, 10);
-      setTimeout(() => {
-        onclickContext.current = false;
-      }, 10);
-    }
-  });
-
-  const onclickContextMenu = useCallback(
-    (e: MouseEvent<HTMLDivElement>, history: ShareChatHistoryItemType) => {
-      e.preventDefault(); // 阻止默认右键菜单
-
-      if (!isPc) return;
-      onclickContext.current = true;
-
-      setContextMenuData({
-        left: e.clientX,
-        top: e.clientY,
-        history
-      });
-    },
-    [isPc]
-  );
-
-  const replaceChatPage = useCallback(
-    ({ hId = '', shareId }: { hId?: string; shareId: string }) => {
-      if (hId === historyId) return;
-
-      router.replace(`/chat/share?shareId=${shareId}&historyId=${hId}`);
-      !isPc && onCloseSlider();
-    },
-    [historyId, isPc, onCloseSlider, router]
-  );
-
-  return (
-    <Flex
-      position={'relative'}
-      flexDirection={'column'}
-      w={'100%'}
-      h={'100%'}
-      bg={'white'}
-      borderRight={['', theme.borders.base]}
-    >
-      {/* 新对话 */}
-      <Box
-        className={styles.newChat}
-        zIndex={1000}
-        w={'90%'}
-        h={'40px'}
-        my={5}
-        mx={'auto'}
-        position={'relative'}
-      >
-        <Button
-          variant={'base'}
-          w={'100%'}
-          h={'100%'}
-          leftIcon={<AddIcon />}
-          onClick={() => replaceChatPage({ shareId })}
-        >
-          新对话
-        </Button>
-      </Box>
-
-      {/* chat history */}
-      <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
-        {shareChatHistory.map((item) => (
-          <Flex
-            position={'relative'}
-            key={item._id}
-            alignItems={'center'}
-            py={3}
-            pr={[0, 3]}
-            pl={[6, 3]}
-            cursor={'pointer'}
-            transition={'background-color .2s ease-in'}
-            borderLeft={['none', '5px solid transparent']}
-            userSelect={'none'}
-            _hover={{
-              backgroundColor: ['', '#dee0e3']
-            }}
-            {...(item._id === historyId
-              ? {
-                  backgroundColor: '#eff0f1',
-                  borderLeftColor: 'myBlue.600 !important'
-                }
-              : {})}
-            onClick={() => replaceChatPage({ hId: item._id, shareId: item.shareId })}
-            onContextMenu={(e) => onclickContextMenu(e, item)}
-          >
-            <ChatIcon fontSize={'16px'} color={'myGray.500'} />
-            <Box flex={'1 0 0'} w={0} ml={3}>
-              <Flex alignItems={'center'}>
-                <Box flex={'1 0 0'} w={0} className="textEllipsis" color={'myGray.1000'}>
-                  {item.title}
-                </Box>
-                <Box color={'myGray.400'} fontSize={'sm'}>
-                  {formatTimeToChatTime(item.updateTime)}
-                </Box>
-              </Flex>
-              <Box className="textEllipsis" mt={1} fontSize={'sm'} color={'myGray.500'}>
-                {item.latestChat || '……'}
-              </Box>
-            </Box>
-            {/* phone quick delete */}
-            {!isPc && (
-              <MyIcon
-                px={3}
-                name={'delete'}
-                w={'16px'}
-                onClickCapture={(e) => {
-                  e.stopPropagation();
-                  onclickDelHistory(item._id);
-                  item._id === historyId && replaceChatPage({ shareId: item.shareId });
-                }}
-              />
-            )}
-          </Flex>
-        ))}
-        {shareChatHistory.length === 0 && (
-          <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
-            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
-            <Box mt={2} color={'myGray.500'}>
-              还没有聊天记录
-            </Box>
-          </Flex>
-        )}
-      </Box>
-      {/* context menu */}
-      {contextMenuData && (
-        <Box zIndex={10} position={'fixed'} top={contextMenuData.top} left={contextMenuData.left}>
-          <Box ref={ContextMenuRef}></Box>
-          <Menu isOpen>
-            <MenuList>
-              <MenuItem
-                onClick={() => {
-                  onclickDelHistory(contextMenuData.history._id);
-                  contextMenuData.history._id === historyId && replaceChatPage({ shareId });
-                }}
-              >
-                删除记录
-              </MenuItem>
-              <MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
-              <MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
-            </MenuList>
-          </Menu>
-        </Box>
-      )}
-    </Flex>
-  );
-};
-
-export default PcSliderBar;
diff --git a/client/src/pages/chat/share.tsx b/client/src/pages/chat/share.tsx
index 4d5e63b3f..fde1fae01 100644
--- a/client/src/pages/chat/share.tsx
+++ b/client/src/pages/chat/share.tsx
@@ -1,391 +1,278 @@
-import React, { useCallback, useState, useRef, useMemo, useEffect, MouseEvent } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { initShareChatInfo } from '@/api/chat';
-import type { ChatSiteItemType, ExportChatType } from '@/types/chat';
 import {
-  Textarea,
   Box,
   Flex,
   useColorModeValue,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Button,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalBody,
-  ModalCloseButton,
   useDisclosure,
   Drawer,
   DrawerOverlay,
   DrawerContent,
-  Card,
-  useOutsideClick,
-  useTheme,
-  Input,
-  ModalFooter,
-  ModalHeader
+  useTheme
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
-import { useCopyData, voiceBroadcast, hasVoiceApi } from '@/utils/tools';
 import { streamFetch } from '@/api/fetch';
-import MyIcon from '@/components/Icon';
-import { throttle } from 'lodash';
-import { Types } from 'mongoose';
-import { useChatStore } from '@/store/chat';
-import { useLoading } from '@/hooks/useLoading';
-import { fileDownload } from '@/utils/file';
-import { htmlTemplate } from '@/constants/common';
-import { useUserStore } from '@/store/user';
-import Loading from '@/components/Loading';
-import Markdown from '@/components/Markdown';
+import { useShareChatStore, defaultHistory } from '@/store/shareChat';
 import SideBar from '@/components/SideBar';
-import Avatar from '@/components/Avatar';
-import Empty from './components/Empty';
-import { HUMAN_ICON } from '@/constants/chat';
-import MyTooltip from '@/components/MyTooltip';
+import { gptMessage2ChatType } from '@/utils/adapt';
+import ChatHistorySlider from './components/ChatHistorySlider';
+import { getErrText } from '@/utils/tools';
 
-const ShareHistory = dynamic(() => import('./components/ShareHistory'), {
-  loading: () => <Loading fixed={false} />,
-  ssr: false
-});
+import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
+import MyIcon from '@/components/Icon';
+import Tag from '@/components/Tag';
+import PageContainer from '@/components/PageContainer';
 
-import styles from './index.module.scss';
-import { adaptChatItem_openAI } from '@/utils/plugin/openai';
-import { useChat } from '@/hooks/useChat';
-
-const textareaMinH = '22px';
-
-const Chat = () => {
+const ShareChat = () => {
+  const theme = useTheme();
   const router = useRouter();
   const { shareId = '', historyId } = router.query as { shareId: string; historyId: string };
-  const theme = useTheme();
+  const { toast } = useToast();
+  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
+  const { isPc } = useGlobalStore();
 
-  const ContextMenuRef = useRef(null);
-  const PhoneContextShow = useRef(false);
-
-  const [messageContextMenuData, setMessageContextMenuData] = useState<{
-    // message messageContextMenuData
-    left: number;
-    top: number;
-    message: ChatSiteItemType;
-  }>();
+  const ChatBoxRef = useRef<ComponentRef>(null);
 
   const {
-    password,
-    setPassword,
-    shareChatHistory,
-    delShareHistoryById,
-    setShareChatHistory,
     shareChatData,
     setShareChatData,
-    delShareChatHistoryItemById,
-    delShareChatHistory
-  } = useChatStore();
-
-  const isChatting = useMemo(
-    () => shareChatData.history[shareChatData.history.length - 1]?.status === 'loading',
-    [shareChatData.history]
-  );
-
-  const { ChatBox, ChatInput, ChatBoxParentRef, setChatHistory, scrollToBottom } = useChat({
-    appId: shareChatData.appId
-  });
-
-  const { toast } = useToast();
-  const { copyData } = useCopyData();
-  const { isPc } = useGlobalStore();
-  const { Loading, setIsLoading } = useLoading();
-  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
-  const {
-    isOpen: isOpenPassword,
-    onClose: onClosePassword,
-    onOpen: onOpenPassword
-  } = useDisclosure();
-
-  // close contextMenu
-  useOutsideClick({
-    ref: ContextMenuRef,
-    handler: () => {
-      // 移动端长按后会将其设置为true，松手时候也会触发一次，松手的时候需要忽略一次。
-      if (PhoneContextShow.current) {
-        PhoneContextShow.current = false;
-      } else {
-        messageContextMenuData &&
-          setTimeout(() => {
-            setMessageContextMenuData(undefined);
-            window.getSelection?.()?.empty?.();
-            window.getSelection?.()?.removeAllRanges?.();
-            document?.getSelection()?.empty();
-          });
-      }
-    }
-  });
-
-  // export chat data
-  const onclickExportChat = useCallback(
-    (type: ExportChatType) => {
-      const getHistoryHtml = () => {
-        const historyDom = document.getElementById('history');
-        if (!historyDom) return;
-        const dom = Array.from(historyDom.children).map((child, i) => {
-          const avatar = `<img src="${
-            child.querySelector<HTMLImageElement>('.avatar')?.src
-          }" alt="" />`;
-
-          const chatContent = child.querySelector<HTMLDivElement>('.markdown');
-
-          if (!chatContent) {
-            return '';
-          }
-
-          const chatContentClone = chatContent.cloneNode(true) as HTMLDivElement;
-
-          const codeHeader = chatContentClone.querySelectorAll('.code-header');
-          codeHeader.forEach((childElement: any) => {
-            childElement.remove();
-          });
-
-          return `<div class="chat-item">
-          ${avatar}
-          ${chatContentClone.outerHTML}
-        </div>`;
-        });
-
-        const html = htmlTemplate.replace('{{CHAT_CONTENT}}', dom.join('\n'));
-        return html;
-      };
-
-      const map: Record<ExportChatType, () => void> = {
-        md: () => {
-          fileDownload({
-            text: shareChatData.history.map((item) => item.value).join('\n\n'),
-            type: 'text/markdown',
-            filename: 'chat.md'
-          });
-        },
-        html: () => {
-          const html = getHistoryHtml();
-          html &&
-            fileDownload({
-              text: html,
-              type: 'text/html',
-              filename: '聊天记录.html'
-            });
-        },
-        pdf: () => {
-          const html = getHistoryHtml();
-
-          html &&
-            // @ts-ignore
-            html2pdf(html, {
-              margin: 0,
-              filename: `聊天记录.pdf`
-            });
-        }
-      };
-
-      map[type]();
-    },
-    [shareChatData.history]
-  );
-
-  // 获取对话信息
-  const loadChatInfo = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const res = await initShareChatInfo({
-        shareId,
-        password
-      });
-
-      const history = shareChatHistory.find((item) => item._id === historyId)?.chats || [];
-
-      setShareChatData({
-        ...res,
-        history
-      });
-
-      onClosePassword();
-
-      history.length > 0 &&
-        setTimeout(() => {
-          scrollToBottom();
-        }, 500);
-    } catch (e: any) {
-      toast({
-        status: 'error',
-        title: typeof e === 'string' ? e : e?.message || '初始化异常'
-      });
-      if (e?.code === 501) {
-        onOpenPassword();
-      } else {
-        delShareChatHistory(shareId);
-        router.replace(`/chat/share`);
-      }
-    }
-    setIsLoading(false);
-    return null;
-  }, [
-    setIsLoading,
-    shareId,
-    password,
-    setShareChatData,
     shareChatHistory,
-    onClosePassword,
-    historyId,
-    scrollToBottom,
-    toast,
-    onOpenPassword,
-    delShareChatHistory,
-    router
-  ]);
+    saveChatResponse,
+    delShareChatHistoryItemById,
+    delOneShareHistoryByHistoryId,
+    delManyShareChatHistoryByShareId
+  } = useShareChatStore();
+
+  const startChat = useCallback(
+    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
+      console.log(messages, variables);
+
+      const prompts = messages.slice(-shareChatData.maxContext - 2);
+      const { responseText } = await streamFetch({
+        data: {
+          history,
+          messages: prompts,
+          variables,
+          shareId
+        },
+        onMessage: generatingMessage,
+        abortSignal: controller
+      });
+
+      const result = {
+        question: messages[messages.length - 2].content || '',
+        answer: responseText
+      };
+
+      prompts[prompts.length - 1].content = responseText;
+
+      /* save chat */
+      const { newChatId } = saveChatResponse({
+        historyId,
+        prompts: gptMessage2ChatType(prompts).map((item) => ({
+          ...item,
+          status: 'finish'
+        })),
+        variables,
+        shareId
+      });
+
+      if (newChatId) {
+        router.replace({
+          query: {
+            shareId,
+            historyId: newChatId
+          }
+        });
+      }
+
+      window.top?.postMessage(
+        {
+          type: 'shareChatFinish',
+          data: result
+        },
+        '*'
+      );
+
+      return { responseText };
+    },
+    [historyId, router, saveChatResponse, shareChatData.maxContext, shareId]
+  );
+
+  const loadAppInfo = useCallback(
+    async (shareId?: string) => {
+      if (!shareId) return null;
+      const history = shareChatHistory.find((item) => item._id === historyId) || defaultHistory;
+
+      ChatBoxRef.current?.resetHistory(history.chats);
+      ChatBoxRef.current?.resetVariables(history.variables);
+
+      try {
+        const chatData = await (async () => {
+          if (shareChatData.app.name === '') {
+            return initShareChatInfo({
+              shareId
+            });
+          }
+          return shareChatData;
+        })();
+
+        setShareChatData({
+          ...chatData,
+          history
+        });
+      } catch (e: any) {
+        toast({
+          status: 'error',
+          title: getErrText(e, '获取应用失败')
+        });
+        if (e?.code === 501) {
+          delManyShareChatHistoryByShareId(shareId);
+        }
+      }
+
+      return history;
+    },
+    [
+      delManyShareChatHistoryByShareId,
+      historyId,
+      setShareChatData,
+      shareChatData,
+      shareChatHistory,
+      toast
+    ]
+  );
 
-  // 初始化聊天框
   useQuery(['init', shareId, historyId], () => {
-    if (!shareId) {
-      return null;
-    }
-
-    if (!historyId) {
-      return router.replace(`/chat/share?shareId=${shareId}&historyId=${new Types.ObjectId()}`);
-    }
-
-    return loadChatInfo();
+    return loadAppInfo(shareId);
   });
 
   return (
-    <Flex h={'100%'} flexDirection={['column', 'row']} backgroundColor={'#fdfdfd'}>
-      {/* pc always show history.  */}
-      {isPc && (
-        <SideBar>
-          <ShareHistory
-            onclickDelHistory={delShareHistoryById}
-            onclickExportChat={onclickExportChat}
-            onCloseSlider={onCloseSlider}
-          />
-        </SideBar>
-      )}
-
-      {/* 聊天内容 */}
-      <Flex
-        position={'relative'}
-        h={[0, '100%']}
-        w={['100%', 0]}
-        flex={'1 0 0'}
-        flexDirection={'column'}
-      >
-        {/* chat header */}
-        <Flex
-          alignItems={'center'}
-          justifyContent={'space-between'}
-          py={[3, 5]}
-          px={5}
-          borderBottom={'1px solid '}
-          borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
-          color={useColorModeValue('myGray.900', 'white')}
-        >
-          {!isPc && (
-            <MyIcon
-              name={'menu'}
-              w={'20px'}
-              h={'20px'}
-              color={useColorModeValue('blackAlpha.700', 'white')}
-              onClick={onOpenSlider}
-            />
-          )}
-          <Box lineHeight={1.2} textAlign={'center'} px={3} fontSize={['sm', 'md']}>
-            {shareChatData.model.name}
-            {shareChatData.history.length > 0 ? ` (${shareChatData.history.length})` : ''}
-          </Box>
-          {shareChatData.history.length > 0 ? (
-            <Menu autoSelect={false}>
-              <MenuButton lineHeight={1}>
-                <MyIcon
-                  name={'more'}
-                  w={'16px'}
-                  h={'16px'}
-                  color={useColorModeValue('blackAlpha.700', 'white')}
-                />
-              </MenuButton>
-              <MenuList minW={`90px !important`}>
-                <MenuItem onClick={() => router.replace(`/chat/share?shareId=${shareId}`)}>
-                  新对话
-                </MenuItem>
-                <MenuItem
-                  onClick={() => {
-                    delShareHistoryById(historyId);
-                    router.replace(`/chat/share?shareId=${shareId}`);
-                  }}
-                >
-                  删除记录
-                </MenuItem>
-                <MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
-                <MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
-                <MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
-              </MenuList>
-            </Menu>
-          ) : (
-            <Box w={'16px'} h={'16px'} />
-          )}
-        </Flex>
-        {/* chat content box */}
-        <Box ref={ChatBoxParentRef} flex={1}>
-          <ChatBox appAvatar={shareChatData.model.avatar} />
-        </Box>
-        {/* 发送区 */}
-        <ChatInput />
-
-        <Loading fixed={false} />
-      </Flex>
-
-      {/* phone slider */}
-      {!isPc && (
-        <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
-          <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
-          <DrawerContent maxWidth={'250px'}>
-            <ShareHistory
-              onclickDelHistory={delShareHistoryById}
-              onclickExportChat={onclickExportChat}
+    <PageContainer>
+      <Flex h={'100%'} flexDirection={['column', 'row']} backgroundColor={'#fdfdfd'}>
+        {/*  slider */}
+        {isPc ? (
+          <SideBar>
+            <ChatHistorySlider
+              appName={shareChatData.app.name}
+              appAvatar={shareChatData.app.avatar}
+              activeHistoryId={historyId}
+              history={shareChatHistory
+                .filter((item) => item.shareId === shareId)
+                .map((item) => ({
+                  id: item._id,
+                  title: item.title
+                }))}
+              onChangeChat={(historyId) => {
+                router.push({
+                  query: {
+                    historyId: historyId || '',
+                    shareId
+                  }
+                });
+              }}
+              onDelHistory={delOneShareHistoryByHistoryId}
               onCloseSlider={onCloseSlider}
             />
-          </DrawerContent>
-        </Drawer>
-      )}
-      {/* password input */}
-      {
-        <Modal isOpen={isOpenPassword} onClose={onClosePassword}>
-          <ModalOverlay />
-          <ModalContent>
-            <ModalCloseButton />
-            <ModalHeader>安全密码</ModalHeader>
-            <ModalBody>
-              <Flex alignItems={'center'}>
-                <Box flex={'0 0 70px'}>密码：</Box>
-                <Input
-                  type="password"
-                  autoFocus
-                  placeholder="使用密码,无密码直接点确认"
-                  onBlur={(e) => setPassword(e.target.value)}
+          </SideBar>
+        ) : (
+          <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
+            <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
+            <DrawerContent maxWidth={'250px'}>
+              <ChatHistorySlider
+                appName={shareChatData.app.name}
+                appAvatar={shareChatData.app.avatar}
+                activeHistoryId={historyId}
+                history={shareChatHistory.map((item) => ({
+                  id: item._id,
+                  title: item.title
+                }))}
+                onChangeChat={(historyId) => {
+                  router.push({
+                    query: {
+                      historyId: historyId || '',
+                      shareId
+                    }
+                  });
+                }}
+                onDelHistory={delOneShareHistoryByHistoryId}
+                onCloseSlider={onCloseSlider}
+              />
+            </DrawerContent>
+          </Drawer>
+        )}
+        {/* chat container */}
+        <Flex
+          position={'relative'}
+          h={[0, '100%']}
+          w={['100%', 0]}
+          flex={'1 0 0'}
+          flexDirection={'column'}
+        >
+          <Flex
+            alignItems={'center'}
+            py={[3, 5]}
+            px={5}
+            borderBottom={theme.borders.base}
+            borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
+            color={useColorModeValue('myGray.900', 'white')}
+          >
+            {isPc ? (
+              <>
+                <Box mr={3} color={'myGray.1000'}>
+                  {shareChatData.history.title}
+                </Box>
+                <Tag display={'flex'}>
+                  <MyIcon name={'history'} w={'14px'} />
+                  <Box ml={1}>{shareChatData.history.chats.length}条记录</Box>
+                </Tag>
+              </>
+            ) : (
+              <>
+                <MyIcon
+                  name={'menu'}
+                  w={'20px'}
+                  h={'20px'}
+                  color={useColorModeValue('blackAlpha.700', 'white')}
+                  onClick={onOpenSlider}
                 />
-              </Flex>
-            </ModalBody>
-            <ModalFooter>
-              <Button variant={'base'} mr={3} onClick={onClosePassword}>
-                取消
-              </Button>
-              <Button onClick={loadChatInfo}>确定</Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      }
-    </Flex>
+              </>
+            )}
+          </Flex>
+          {/* chat box */}
+          <Box
+            pt={[0, 5]}
+            flex={1}
+            maxW={['100%', '1000px', '1200px']}
+            px={[0, 5]}
+            w={'100%'}
+            mx={'auto'}
+          >
+            <ChatBox
+              ref={ChatBoxRef}
+              appAvatar={shareChatData.app.avatar}
+              variableModules={shareChatData.app.variableModules}
+              welcomeText={shareChatData.app.welcomeText}
+              onUpdateVariable={(e) => {
+                setShareChatData((state) => ({
+                  ...state,
+                  history: {
+                    ...state.history,
+                    variables: e
+                  }
+                }));
+              }}
+              onStartChat={startChat}
+              onDelMessage={({ index }) => delShareChatHistoryItemById({ historyId, index })}
+            />
+          </Box>
+        </Flex>
+      </Flex>
+    </PageContainer>
   );
 };
 
-export default Chat;
+export default ShareChat;
diff --git a/client/src/service/models/shareChat.ts b/client/src/service/models/shareChat.ts
index b2792d6e6..7f70efb0b 100644
--- a/client/src/service/models/shareChat.ts
+++ b/client/src/service/models/shareChat.ts
@@ -1,14 +1,17 @@
 import { Schema, model, models, Model } from 'mongoose';
 import { ShareChatSchema as ShareChatSchemaType } from '@/types/mongoSchema';
-import { hashPassword } from '@/service/utils/tools';
 
 const ShareChatSchema = new Schema({
+  shareId: {
+    type: String,
+    required: true
+  },
   userId: {
     type: Schema.Types.ObjectId,
     ref: 'user',
     required: true
   },
-  modelId: {
+  appId: {
     type: Schema.Types.ObjectId,
     ref: 'model',
     required: true
@@ -17,10 +20,6 @@ const ShareChatSchema = new Schema({
     type: String,
     required: true
   },
-  password: {
-    type: String,
-    set: (val: string) => hashPassword(val)
-  },
   tokens: {
     type: Number,
     default: 0
diff --git a/client/src/service/utils/auth.ts b/client/src/service/utils/auth.ts
index 0fe68b98b..6ab0e0722 100644
--- a/client/src/service/utils/auth.ts
+++ b/client/src/service/utils/auth.ts
@@ -317,30 +317,17 @@ export const authChat = async ({
     showModelDetail
   };
 };
-export const authShareChat = async ({
-  shareId,
-  password
-}: {
-  shareId: string;
-  password: string;
-}) => {
+export const authShareChat = async ({ shareId }: { shareId: string }) => {
   // get shareChat
-  const shareChat = await ShareChat.findById(shareId);
+  const shareChat = await ShareChat.findOne({ shareId });
 
   if (!shareChat) {
     return Promise.reject('分享链接已失效');
   }
 
-  if (shareChat.password !== hashPassword(password)) {
-    return Promise.reject({
-      code: 501,
-      message: '密码不正确'
-    });
-  }
-
   return {
     userId: String(shareChat.userId),
-    appId: String(shareChat.modelId),
+    appId: String(shareChat.appId),
     authType: 'token' as AuthType
   };
 };
diff --git a/client/src/store/chat.ts b/client/src/store/chat.ts
index 2e8833077..f26d7266c 100644
--- a/client/src/store/chat.ts
+++ b/client/src/store/chat.ts
@@ -3,13 +3,7 @@ import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { OpenAiChatEnum } from '@/constants/model';
 
-import {
-  ChatSiteItemType,
-  HistoryItemType,
-  ShareChatHistoryItemType,
-  ChatType,
-  ShareChatType
-} from '@/types/chat';
+import { ChatSiteItemType, HistoryItemType, ChatType } from '@/types/chat';
 import { getChatHistory } from '@/api/chat';
 import { HUMAN_ICON } from '@/constants/chat';
 
@@ -32,16 +26,6 @@ type State = {
   setLastChatModelId: (id: string) => void;
   lastChatId: string;
   setLastChatId: (id: string) => void;
-
-  shareChatData: ShareChatType;
-  setShareChatData: (e?: ShareChatType | ((e: ShareChatType) => ShareChatType)) => void;
-  password: string;
-  setPassword: (val: string) => void;
-  shareChatHistory: ShareChatHistoryItemType[];
-  setShareChatHistory: (e: SetShareChatHistoryItem) => void;
-  delShareHistoryById: (historyId: string) => void;
-  delShareChatHistoryItemById: (historyId: string, index: number) => void;
-  delShareChatHistory: (shareId?: string) => void;
 };
 
 const defaultChatData: ChatType = {
@@ -56,18 +40,6 @@ const defaultChatData: ChatType = {
   chatModel: OpenAiChatEnum.GPT3516k,
   history: []
 };
-const defaultShareChatData: ShareChatType = {
-  appId: '',
-  maxContext: 5,
-  userAvatar: HUMAN_ICON,
-  model: {
-    name: '',
-    avatar: '/icon/logo.png',
-    intro: ''
-  },
-  chatModel: OpenAiChatEnum.GPT3516k,
-  history: []
-};
 
 export const useChatStore = create<State>()(
   devtools(
@@ -114,114 +86,13 @@ export const useChatStore = create<State>()(
               state.chatData = e;
             });
           }
-        },
-        shareChatData: defaultShareChatData,
-        setShareChatData(
-          e: ShareChatType | ((e: ShareChatType) => ShareChatType) = defaultShareChatData
-        ) {
-          if (typeof e === 'function') {
-            set((state) => {
-              state.shareChatData = e(state.shareChatData);
-            });
-          } else {
-            set((state) => {
-              state.shareChatData = e;
-            });
-          }
-        },
-        password: '',
-        setPassword(val: string) {
-          set((state) => {
-            state.password = val;
-          });
-        },
-        shareChatHistory: [],
-        setShareChatHistory({
-          historyId,
-          shareId,
-          title,
-          latestChat,
-          chats = []
-        }: SetShareChatHistoryItem) {
-          set((state) => {
-            const history = state.shareChatHistory.find((item) => item._id === historyId);
-            let historyList: ShareChatHistoryItemType[] = [];
-            if (history) {
-              historyList = state.shareChatHistory.map((item) =>
-                item._id === historyId
-                  ? {
-                      ...item,
-                      title,
-                      latestChat,
-                      updateTime: new Date(),
-                      chats
-                    }
-                  : item
-              );
-            } else {
-              historyList = [
-                ...state.shareChatHistory,
-                {
-                  _id: historyId,
-                  shareId,
-                  title,
-                  latestChat,
-                  updateTime: new Date(),
-                  chats
-                }
-              ];
-            }
-
-            // @ts-ignore
-            historyList.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime));
-
-            state.shareChatHistory = historyList.slice(0, 30);
-          });
-        },
-        delShareHistoryById(historyId: string) {
-          set((state) => {
-            state.shareChatHistory = state.shareChatHistory.filter(
-              (item) => item._id !== historyId
-            );
-          });
-        },
-        delShareChatHistoryItemById(historyId: string, index: number) {
-          set((state) => {
-            // update history store
-            const newHistoryList = state.shareChatHistory.map((item) =>
-              item._id === historyId
-                ? {
-                    ...item,
-                    chats: [...item.chats.slice(0, index), ...item.chats.slice(index + 1)]
-                  }
-                : item
-            );
-            state.shareChatHistory = newHistoryList;
-
-            // update chatData
-            state.shareChatData.history =
-              newHistoryList.find((item) => item._id === historyId)?.chats || [];
-          });
-        },
-        delShareChatHistory(shareId?: string) {
-          set((state) => {
-            if (shareId) {
-              state.shareChatHistory = state.shareChatHistory.filter(
-                (item) => item.shareId !== shareId
-              );
-            } else {
-              state.shareChatHistory = [];
-            }
-          });
         }
       })),
       {
         name: 'chatStore',
         partialize: (state) => ({
           lastChatModelId: state.lastChatModelId,
-          lastChatId: state.lastChatId,
-          password: state.password,
-          shareChatHistory: state.shareChatHistory
+          lastChatId: state.lastChatId
         })
       }
     )
diff --git a/client/src/store/shareChat.ts b/client/src/store/shareChat.ts
new file mode 100644
index 000000000..ff33b0493
--- /dev/null
+++ b/client/src/store/shareChat.ts
@@ -0,0 +1,146 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+import type { ChatSiteItemType, ShareChatHistoryItemType, ShareChatType } from '@/types/chat';
+import { HUMAN_ICON } from '@/constants/chat';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
+
+type State = {
+  shareChatData: ShareChatType;
+  setShareChatData: (e: ShareChatType | ((e: ShareChatType) => ShareChatType)) => void;
+  shareChatHistory: ShareChatHistoryItemType[];
+  saveChatResponse: (e: {
+    historyId: string;
+    prompts: ChatSiteItemType[];
+    variables: Record<string, any>;
+    shareId: string;
+  }) => { newChatId: string };
+  delOneShareHistoryByHistoryId: (historyId: string) => void;
+  delShareChatHistoryItemById: (e: { historyId: string; index: number }) => void;
+  delManyShareChatHistoryByShareId: (shareId?: string) => void;
+};
+
+export const defaultHistory: ShareChatHistoryItemType = {
+  _id: `${Date.now()}`,
+  updateTime: new Date(),
+  title: '新对话',
+  shareId: '',
+  chats: []
+};
+const defaultShareChatData: ShareChatType = {
+  maxContext: 5,
+  userAvatar: HUMAN_ICON,
+  app: {
+    name: '',
+    avatar: '/icon/logo.png',
+    intro: ''
+  },
+  history: defaultHistory
+};
+
+export const useShareChatStore = create<State>()(
+  devtools(
+    persist(
+      immer((set, get) => ({
+        shareChatData: defaultShareChatData,
+        setShareChatData(e) {
+          const val = (() => {
+            if (typeof e === 'function') {
+              return e(get().shareChatData);
+            } else {
+              return e;
+            }
+          })();
+          set((state) => {
+            state.shareChatData = val;
+            // update history
+            state.shareChatHistory = state.shareChatHistory.map((item) =>
+              item._id === val.history._id ? val.history : item
+            );
+          });
+        },
+        shareChatHistory: [],
+        saveChatResponse({ historyId, prompts, variables, shareId }) {
+          const history = get().shareChatHistory.find((item) => item._id === historyId);
+
+          const newChatId = history ? '' : nanoid();
+
+          const historyList = (() => {
+            if (history) {
+              return get().shareChatHistory.map((item) =>
+                item._id === historyId
+                  ? {
+                      ...item,
+                      title: prompts[prompts.length - 2]?.value,
+                      updateTime: new Date(),
+                      chats: prompts,
+                      variables
+                    }
+                  : item
+              );
+            }
+            return get().shareChatHistory.concat({
+              _id: newChatId,
+              shareId,
+              title: prompts[prompts.length - 2]?.value,
+              updateTime: new Date(),
+              chats: prompts,
+              variables
+            });
+          })();
+
+          // @ts-ignore
+          historyList.sort((a, b) => new Date(b.updateTime) - new Date(a.updateTime));
+
+          set((state) => {
+            state.shareChatHistory = historyList.slice(0, 100);
+          });
+
+          return {
+            newChatId
+          };
+        },
+        delOneShareHistoryByHistoryId(historyId: string) {
+          set((state) => {
+            state.shareChatHistory = state.shareChatHistory.filter(
+              (item) => item._id !== historyId
+            );
+          });
+        },
+        delShareChatHistoryItemById({ historyId, index }) {
+          set((state) => {
+            // update history store
+            const newHistoryList = state.shareChatHistory.map((item) =>
+              item._id === historyId
+                ? {
+                    ...item,
+                    chats: [...item.chats.slice(0, index), ...item.chats.slice(index + 1)]
+                  }
+                : item
+            );
+            state.shareChatHistory = newHistoryList;
+          });
+        },
+        delManyShareChatHistoryByShareId(shareId?: string) {
+          set((state) => {
+            if (shareId) {
+              state.shareChatHistory = state.shareChatHistory.filter(
+                (item) => item.shareId !== shareId
+              );
+            } else {
+              state.shareChatHistory = [];
+            }
+          });
+        }
+      })),
+      {
+        name: 'shareChatStore',
+        partialize: (state) => ({
+          shareChatHistory: state.shareChatHistory
+        })
+      }
+    )
+  )
+);
diff --git a/client/src/types/app.d.ts b/client/src/types/app.d.ts
index 1a50685f5..f978be00a 100644
--- a/client/src/types/app.d.ts
+++ b/client/src/types/app.d.ts
@@ -1,6 +1,10 @@
 import { FlowModuleTypeEnum } from '@/constants/flow';
 import { XYPosition } from 'reactflow';
-import { AppModuleItemTypeEnum, ModulesInputItemTypeEnum } from '../constants/app';
+import {
+  AppModuleItemTypeEnum,
+  ModulesInputItemTypeEnum,
+  VariableInputEnum
+} from '../constants/app';
 import type { FlowInputItemType, FlowOutputItemType } from './flow';
 import type { AppSchema, kbSchema } from './mongoSchema';
 import { ChatModelType } from '@/constants/model';
@@ -33,7 +37,6 @@ export interface ShareAppItem {
 
 export type ShareChatEditType = {
   name: string;
-  password: string;
   maxContext: number;
 };
 
@@ -44,11 +47,22 @@ export type ClassifyQuestionAgentItemType = {
   key: string;
 };
 
+export type VariableItemType = {
+  id: string;
+  key: string;
+  label: string;
+  type: `${VariableInputEnum}`;
+  required: boolean;
+  maxLen: number;
+  enums: { value: string }[];
+};
+
 /* app module */
 export type AppModuleTemplateItemType = {
-  logo?: string;
-  name?: string;
-  intro?: string;
+  logo: string;
+  name: string;
+  description?: string;
+  intro: string;
 
   flowType: `${FlowModuleTypeEnum}`;
   type: `${AppModuleItemTypeEnum}`;
diff --git a/client/src/types/chat.d.ts b/client/src/types/chat.d.ts
index 9556ca825..0ba1e15dd 100644
--- a/client/src/types/chat.d.ts
+++ b/client/src/types/chat.d.ts
@@ -22,24 +22,22 @@ export interface ChatType extends InitChatResponse {
   history: ChatSiteItemType[];
 }
 
-export interface ShareChatType extends InitShareChatResponse {
-  history: ChatSiteItemType[];
-}
-
 export type HistoryItemType = {
   _id: string;
   updateTime: Date;
-  modelId: string;
   title: string;
-  latestChat: string;
+};
+export type ChatHistoryItemType = HistoryItemType & {
+  appId: string;
   top: boolean;
 };
 
-export type ShareChatHistoryItemType = {
-  _id: string;
+export type ShareChatHistoryItemType = HistoryItemType & {
   shareId: string;
-  updateTime: Date;
-  title: string;
-  latestChat: string;
+  variables?: Record<string, any>;
   chats: ChatSiteItemType[];
 };
+
+export type ShareChatType = InitShareChatResponse & {
+  history: ShareChatHistoryItemType;
+};
diff --git a/client/src/types/mongoSchema.d.ts b/client/src/types/mongoSchema.d.ts
index b83b1b97f..b50905952 100644
--- a/client/src/types/mongoSchema.d.ts
+++ b/client/src/types/mongoSchema.d.ts
@@ -132,9 +132,9 @@ export interface PromotionRecordSchema {
 
 export interface ShareChatSchema {
   _id: string;
+  shareId: string;
   userId: string;
-  modelId: string;
-  password: string;
+  appId: string;
   name: string;
   tokens: number;
   maxContext: number;