guide node

2025-07-27 08:25:07 +00:00 · 2023-07-18 11:07:46 +08:00
parent d346d38677
commit f9d83c481f
25 changed files with 313 additions and 279 deletions
--- a/client/public/imgs/module/db.png:Zone.Identifier
+++ b/client/public/imgs/module/db.png:Zone.Identifier
@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet
--- a/client/public/imgs/module/variable.png
+++ b/client/public/imgs/module/variable.png
--- a/client/src/api/response/chat.d.ts
+++ b/client/src/api/response/chat.d.ts
@@ -3,7 +3,7 @@ import type { ChatItemType } from '@/types/chat';
 import { VariableItemType } from '@/types/app';

 export interface InitChatResponse {
-  historyId: string;
+  chatId: string;
  appId: string;
  app: {
    variableModules?: VariableItemType[];
@@ -13,6 +13,7 @@ export interface InitChatResponse {
    intro: string;
    canUse: boolean;
  };
+  customTitle?: string;
  title: string;
  variables: Record<string, any>;
  history: ChatItemType[];
--- a/client/src/components/ChatBox/index.tsx
+++ b/client/src/components/ChatBox/index.tsx
@@ -22,8 +22,8 @@ import Avatar from '@/components/Avatar';

 import { adaptChatItem_openAI } from '@/utils/plugin/openai';
 import { useMarkdown } from '@/hooks/useMarkdown';
-import { VariableItemType } from '@/types/app';
-import { VariableInputEnum } from '@/constants/app';
+import { AppModuleItemType, VariableItemType } from '@/types/app';
+import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
 import { useForm } from 'react-hook-form';
 import MySelect from '@/components/Select';
 import { MessageItemType } from '@/pages/api/openapi/v1/chat/completions';
@@ -36,6 +36,7 @@ const QuoteModal = dynamic(() => import('./QuoteModal'));

 import styles from './index.module.scss';
 import { QuoteItemType } from '@/pages/api/app/modules/kb/search';
+import { FlowModuleTypeEnum } from '@/constants/flow';

 const textareaMinH = '22px';
 export type StartChatFnProps = {
@@ -94,6 +95,18 @@ const Empty = () => {
  );
 };

+const ChatAvatar = ({
+  src,
+  order,
+  ml,
+  mr
+}: {
+  src: string;
+  order: number;
+  ml?: (string | number) | (string | number)[];
+  mr?: (string | number) | (string | number)[];
+}) => <Avatar src={src} w={['24px', '34px']} h={['24px', '34px']} order={order} ml={ml} mr={mr} />;
+
 const ChatBox = (
  {
    showEmptyIntro = false,
@@ -375,80 +388,79 @@ const ChatBox = (
    w: '100%'
  };

-  const hasVariableInput = useMemo(
-    () => variableModules || welcomeText,
-    [variableModules, welcomeText]
+  const showEmpty = useMemo(
+    () => showEmptyIntro && chatHistory.length === 0 && !(variableModules || welcomeText),
+    [chatHistory.length, showEmptyIntro, variableModules, welcomeText]
  );

  return (
    <Flex flexDirection={'column'} h={'100%'}>
-      <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 8]} py={[0, 5]}>
+      <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 7]} py={[0, 5]}>
        <Box maxW={['100%', '1000px', '1200px']} h={'100%'} mx={'auto'}>
-          {/* variable input */}
-          {hasVariableInput && (
+          {!!welcomeText && (
            <Flex alignItems={'flex-start'} py={2}>
              {/* avatar */}
-              <Avatar
-                src={appAvatar}
-                w={['24px', '34px']}
-                h={['24px', '34px']}
-                order={1}
-                mr={['6px', 2]}
-              />
+              <ChatAvatar src={appAvatar} 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
-                              isDisabled={variableIsFinish}
-                              {...register(item.key, {
-                                required: item.required
-                              })}
-                            />
-                          )}
-                          {item.type === VariableInputEnum.select && (
-                            <MySelect
-                              width={'100%'}
-                              isDisabled={variableIsFinish}
-                              list={(item.enums || []).map((item) => ({
-                                label: item.value,
-                                value: item.value
-                              }))}
-                              value={getValues(item.key)}
-                              onchange={(e) => {
-                                setValue(item.key, e);
-                                setRefresh(!refresh);
-                              }}
-                            />
-                          )}
-                        </Box>
-                      ))}
-                      {!variableIsFinish && (
-                        <Button
-                          leftIcon={<MyIcon name={'chatFill'} w={'16px'} />}
-                          size={'sm'}
-                          maxW={'100px'}
-                          borderRadius={'lg'}
-                          onClick={handleSubmit((data) => {
-                            onUpdateVariable?.(data);
-                            setVariables(data);
-                          })}
-                        >
-                          {'开始对话'}
-                        </Button>
-                      )}
-                    </Box>
-                  )}
+                  {welcomeText}
+                </Card>
+              </Flex>
+            </Flex>
+          )}
+          {/* variable input */}
+          {variableModules && (
+            <Flex alignItems={'flex-start'} py={2}>
+              {/* avatar */}
+              <ChatAvatar src={appAvatar} 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'}>
+                  <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
+                            isDisabled={variableIsFinish}
+                            {...register(item.key, {
+                              required: item.required
+                            })}
+                          />
+                        )}
+                        {item.type === VariableInputEnum.select && (
+                          <MySelect
+                            width={'100%'}
+                            isDisabled={variableIsFinish}
+                            list={(item.enums || []).map((item) => ({
+                              label: item.value,
+                              value: item.value
+                            }))}
+                            value={getValues(item.key)}
+                            onchange={(e) => {
+                              setValue(item.key, e);
+                              setRefresh(!refresh);
+                            }}
+                          />
+                        )}
+                      </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>
@@ -469,10 +481,8 @@ const ChatBox = (
              >
                {item.obj === 'Human' && <Box flex={1} />}
                {/* avatar */}
-                <Avatar
+                <ChatAvatar
                  src={item.obj === 'Human' ? userInfo?.avatar || HUMAN_ICON : appAvatar}
-                  w={['24px', '34px']}
-                  h={['24px', '34px']}
                  {...(item.obj === 'AI'
                    ? {
                        order: 1,
@@ -597,7 +607,7 @@ const ChatBox = (
            ))}
          </Box>

-          {showEmptyIntro && chatHistory.length === 0 && !hasVariableInput && <Empty />}
+          {showEmpty && <Empty />}
        </Box>
      </Box>
      {/* input */}
@@ -770,3 +780,20 @@ export const useChatBox = () => {
    onExportChat
  };
 };
+
+export const getSpecialModule = (modules: AppModuleItemType[]) => {
+  const welcomeText: string =
+    modules
+      .find((item) => item.flowType === FlowModuleTypeEnum.userGuide)
+      ?.inputs?.find((item) => item.key === SystemInputEnum.welcomeText)?.value || '';
+
+  const variableModules: VariableItemType[] =
+    modules
+      .find((item) => item.flowType === FlowModuleTypeEnum.variable)
+      ?.inputs.find((item) => item.key === SystemInputEnum.variables)?.value || [];
+
+  return {
+    welcomeText,
+    variableModules
+  };
+};
--- a/client/src/constants/app.ts
+++ b/client/src/constants/app.ts
@@ -1,10 +1,8 @@
-import type { AppItemType } from '@/types/app';
-import { rawSearchKey } from './chat';
-
 /* app */
 export enum AppModuleItemTypeEnum {
-  'userGuide' = 'userGuide', // default chat input: userChatInput, history
-  'initInput' = 'initInput', // default chat input: userChatInput, history
+  'variable' = 'variable',
+  'userGuide' = 'userGuide',
+  'initInput' = 'initInput',
  'http' = 'http', // send a http request
  'switch' = 'switch', // one input and two outputs
  'answer' = 'answer' // redirect response
--- a/client/src/constants/flow/ModuleTemplate.ts
+++ b/client/src/constants/flow/ModuleTemplate.ts
@@ -9,10 +9,28 @@ import {
 } from './inputTemplate';
 import { rawSearchKey } from '../chat';

-export const VariableInputModule: AppModuleTemplateItemType = {
+export const VariableModule: AppModuleTemplateItemType = {
+  logo: '/imgs/module/variable.png',
+  name: '全局变量',
+  intro: '可以在对话开始前，要求用户填写一些内容作为本轮对话的变量。该模块位于开场引导之后。',
+  description:
+    '全局变量可以通过 {{变量key}} 的形式注入到其他模块的文本中。目前支持：提示词、限定词。',
+  type: AppModuleItemTypeEnum.variable,
+  flowType: FlowModuleTypeEnum.variable,
+  inputs: [
+    {
+      key: SystemInputEnum.variables,
+      type: FlowInputItemTypeEnum.systemInput,
+      label: '变量输入',
+      value: []
+    }
+  ],
+  outputs: []
+};
+export const UserGuideModule: AppModuleTemplateItemType = {
  logo: '/imgs/module/userGuide.png',
-  name: '开场引导',
-  intro: '可以在每个新对话开始前，给用户发送一段开场白，或要求用户填写一些内容作为本轮对话的变量。',
+  name: '用户引导',
+  intro: '可以添加特殊的对话前后引导模块，更好的让用户进行对话',
  type: AppModuleItemTypeEnum.userGuide,
  flowType: FlowModuleTypeEnum.userGuide,
  inputs: [
@@ -20,12 +38,6 @@ export const VariableInputModule: AppModuleTemplateItemType = {
      key: SystemInputEnum.welcomeText,
      type: FlowInputItemTypeEnum.input,
      label: '开场白'
-    },
-    {
-      key: SystemInputEnum.variables,
-      type: FlowInputItemTypeEnum.systemInput,
-      label: '变量输入',
-      value: []
    }
  ],
  outputs: []
@@ -350,20 +362,16 @@ export const ClassifyQuestionModule: AppModuleTemplateItemType = {
 export const ModuleTemplates = [
  {
    label: '输入模块',
-    list: [UserInputModule, HistoryModule, VariableInputModule]
+    list: [UserInputModule, HistoryModule, VariableModule, UserGuideModule]
  },
  {
-    label: '对话模块',
-    list: [ChatModule]
+    label: '内容生成',
+    list: [ChatModule, AnswerModule]
  },
  {
    label: '知识库模块',
    list: [KBSearchModule]
  },
-  {
-    label: '工具',
-    list: [AnswerModule]
-  },
  {
    label: 'Agent',
    list: [ClassifyQuestionModule]
@@ -1105,7 +1113,7 @@ export const appTemplates: (AppItemType & { avatar: string; intro: string })[] =
        moduleId: 'xj0c9p'
      },
      {
-        ...VariableInputModule,
+        ...VariableModule,
        inputs: [
          {
            key: 'welcomeText',
--- a/client/src/constants/flow/index.ts
+++ b/client/src/constants/flow/index.ts
@@ -19,6 +19,7 @@ export enum FlowOutputItemTypeEnum {
 }

 export enum FlowModuleTypeEnum {
+  variable = 'variable',
  userGuide = 'userGuide',
  questionInputNode = 'questionInput',
  historyNode = 'historyNode',
--- a/client/src/pages/api/chat/init.ts
+++ b/client/src/pages/api/chat/init.ts
@@ -7,18 +7,17 @@ import { ChatItemType } from '@/types/chat';
 import { authApp } from '@/service/utils/auth';
 import mongoose from 'mongoose';
 import type { AppSchema, ChatSchema } from '@/types/mongoSchema';
-import { FlowModuleTypeEnum } from '@/constants/flow';
-import { SystemInputEnum } from '@/constants/app';
 import { quoteLenKey, rawSearchKey } from '@/constants/chat';
+import { getSpecialModule } from '@/components/ChatBox';

 /* 初始化我的聊天框，需要身份验证 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { userId } = await authUser({ req, authToken: true });

-    let { appId, historyId } = req.query as {
+    let { appId, chatId } = req.query as {
      appId: '' | string;
-      historyId: '' | string;
+      chatId: '' | string;
    };

    await connectToDatabase();
@@ -53,10 +52,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    // 历史记录
    const { chat, history = [] }: { chat?: ChatSchema; history?: ChatItemType[] } =
      await (async () => {
-        if (historyId) {
+        if (chatId) {
          // auth historyId
          const chat = await Chat.findOne({
-            _id: historyId,
+            _id: chatId,
            userId
          });
          if (!chat) {
@@ -66,7 +65,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
          const history = await Chat.aggregate([
            {
              $match: {
-                _id: new mongoose.Types.ObjectId(historyId),
+                _id: new mongoose.Types.ObjectId(chatId),
                userId: new mongoose.Types.ObjectId(userId)
              }
            },
@@ -96,20 +95,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)

    jsonRes<InitChatResponse>(res, {
      data: {
-        historyId,
+        chatId,
        appId,
        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,
+          ...getSpecialModule(app.modules),
          name: app.name,
          avatar: app.avatar,
          intro: app.intro,
          canUse: app.share.isShare || isOwner
        },
+        customTitle: chat?.customTitle,
        title: chat?.title || '新对话',
        variables: chat?.variables || {},
        history
--- a/client/src/pages/api/chat/shareChat/init.ts
+++ b/client/src/pages/api/chat/shareChat/init.ts
@@ -7,6 +7,7 @@ import { hashPassword } from '@/service/utils/tools';
 import { HUMAN_ICON } from '@/constants/chat';
 import { FlowModuleTypeEnum } from '@/constants/flow';
 import { SystemInputEnum } from '@/constants/app';
+import { getSpecialModule } from '@/components/ChatBox';

 /* 初始化我的聊天框，需要身份验证 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -48,12 +49,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
            ?.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,
+          ...getSpecialModule(app.modules),
          name: app.name,
          avatar: app.avatar,
          intro: app.intro
--- a/client/src/pages/app/detail/components/Settings.tsx
+++ b/client/src/pages/app/detail/components/Settings.tsx
@@ -28,7 +28,7 @@ const Settings = ({ appId }: { appId: string }) => {
    content: '确认删除该应用?'
  });
  const [settingAppInfo, setSettingAppInfo] = useState<AppSchema>();
-  const [fullScreen, setFullScreen] = useState(false);
+  const [fullScreen, setFullScreen] = useState(true);

  /* 点击删除 */
  const handleDelModel = useCallback(async () => {
--- a/client/src/pages/app/detail/components/edit/components/ChatTest.tsx
+++ b/client/src/pages/app/detail/components/edit/components/ChatTest.tsx
@@ -11,12 +11,13 @@ import React, {
 import { Box, Flex, IconButton, useOutsideClick } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';
 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';
-import { useToast } from '@/hooks/useToast';
-import { getErrText } from '@/utils/tools';
+import ChatBox, {
+  getSpecialModule,
+  type ComponentRef,
+  type StartChatFnProps
+} from '@/components/ChatBox';

 export type ChatTestComponentRef = {
  resetChatTest: () => void;
@@ -36,24 +37,8 @@ const ChatTest = (
 ) => {
  const BoxRef = useRef(null);
  const ChatBoxRef = useRef<ComponentRef>(null);
-  const { toast } = useToast();
  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 =
@@ -137,8 +122,7 @@ const ChatTest = (
          <ChatBox
            ref={ChatBoxRef}
            appAvatar={app.avatar}
-            variableModules={variableModules}
-            welcomeText={welcomeText}
+            {...getSpecialModule(modules)}
            onStartChat={startChat}
            onDelMessage={() => {}}
          />
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeAnswer.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeAnswer.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import RenderInput from './render/RenderInput';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import RenderInput from '../render/RenderInput';

 const NodeAnswer = ({
  data: { moduleId, inputs, outputs, onChangeNode, ...props }
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeCQNode.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeCQNode.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
 import { Box, Input, Button, Flex } from '@chakra-ui/react';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import RenderInput from './render/RenderInput';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import RenderInput from '../render/RenderInput';
 import type { ClassifyQuestionAgentItemType } from '@/types/app';
 import { Handle, Position } from 'reactflow';
 import { customAlphabet } from 'nanoid';
@@ -13,7 +13,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 4);
 import MyIcon from '@/components/Icon';
 import { FlowOutputItemTypeEnum } from '@/constants/flow';

-const NodeRINode = ({
+const NodeCQNode = ({
  data: { moduleId, inputs, outputs, onChangeNode, ...props }
 }: NodeProps<FlowModuleItemType>) => {
  return (
@@ -133,4 +133,4 @@ const NodeRINode = ({
    </NodeCard>
  );
 };
-export default React.memo(NodeRINode);
+export default React.memo(NodeCQNode);
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeChat.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeChat.tsx
@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 import { NodeProps } from 'reactflow';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import RenderInput from './render/RenderInput';
-import RenderOutput from './render/RenderOutput';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import RenderInput from '../render/RenderInput';
+import RenderOutput from '../render/RenderOutput';
 import { FlowOutputItemTypeEnum } from '@/constants/flow';
 import MySelect from '@/components/Select';
 import { chatModelList } from '@/store/static';
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeHistory.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeHistory.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import RenderInput from './render/RenderInput';
-import RenderOutput from './render/RenderOutput';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import RenderInput from '../render/RenderInput';
+import RenderOutput from '../render/RenderOutput';

 const NodeHistory = ({
  data: { inputs, outputs, onChangeNode, ...props }
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeKbSearch.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeKbSearch.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import RenderInput from './render/RenderInput';
-import RenderOutput from './render/RenderOutput';
-import KBSelect from './Plugins/KBSelect';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import RenderInput from '../render/RenderInput';
+import RenderOutput from '../render/RenderOutput';
+import KBSelect from '../Plugins/KBSelect';

 const NodeKbSearch = ({
  data: { moduleId, inputs, outputs, onChangeNode, ...props }
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeQuestionInput.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeQuestionInput.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 import { Box } from '@chakra-ui/react';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Container from './modules/Container';
+import Container from '../modules/Container';
 import { SystemInputEnum } from '@/constants/app';

 const QuestionInputNode = ({
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeTFSwitch.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeTFSwitch.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { Handle, Position, NodeProps } from 'reactflow';
 import { Flex, Box } from '@chakra-ui/react';
-import NodeCard from './modules/NodeCard';
+import NodeCard from '../modules/NodeCard';
 import { SystemInputEnum } from '@/constants/app';
 import { FlowModuleItemType } from '@/types/flow';
-import Divider from './modules/Divider';
-import Container from './modules/Container';
-import Label from './modules/Label';
+import Divider from '../modules/Divider';
+import Container from '../modules/Container';
+import Label from '../modules/Label';

 const NodeTFSwitch = ({ data: { inputs, outputs, ...props } }: NodeProps<FlowModuleItemType>) => {
  return (
-    <NodeCard minW={'220px'} logo={'/icon/logo.png'} name={'TF 开关'} {...props}>
+    <NodeCard minW={'220px'} {...props}>
      <Divider text="输入输出" />
      <Container h={'100px'} py={0} px={0} display={'flex'} alignItems={'center'}>
        <Box flex={1} pl={'12px'}>
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeUserGuide.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeUserGuide.tsx
@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import { NodeProps } from 'reactflow';
+import { Box, Flex, Textarea } from '@chakra-ui/react';
+import { QuestionOutlineIcon } from '@chakra-ui/icons';
+import NodeCard from '../modules/NodeCard';
+import { FlowModuleItemType } from '@/types/flow';
+import Container from '../modules/Container';
+import { SystemInputEnum } from '@/constants/app';
+import MyIcon from '@/components/Icon';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
+import MyTooltip from '@/components/MyTooltip';
+
+const welcomePlaceholder =
+  '每次对话开始前，发送一个初始内容。可使用的特殊标记:\n[快捷按键]: 用户点击后可以直接发送该问题';
+
+const NodeUserGuide = ({
+  data: { inputs, outputs, onChangeNode, ...props }
+}: NodeProps<FlowModuleItemType>) => {
+  const welcomeText = useMemo(
+    () => inputs.find((item) => item.key === SystemInputEnum.welcomeText)?.value,
+    [inputs]
+  );
+
+  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>
+              <MyTooltip label={welcomePlaceholder}>
+                <QuestionOutlineIcon display={['none', 'inline']} ml={1} />
+              </MyTooltip>
+            </Flex>
+            <Textarea
+              className="nodrag"
+              rows={6}
+              resize={'both'}
+              defaultValue={welcomeText}
+              bg={'myWhite.500'}
+              placeholder={welcomePlaceholder}
+              onChange={(e) => {
+                onChangeNode({
+                  moduleId: props.moduleId,
+                  key: SystemInputEnum.welcomeText,
+                  type: 'inputs',
+                  value: e.target.value
+                });
+              }}
+            />
+          </>
+        </Container>
+      </NodeCard>
+    </>
+  );
+};
+export default React.memo(NodeUserGuide);
--- a/client/src/pages/app/detail/components/edit/components/Nodes/NodeVariable.tsx
+++ b/client/src/pages/app/detail/components/edit/components/Nodes/NodeVariable.tsx
@@ -27,13 +27,12 @@ import {
  useDisclosure,
  useTheme,
  Grid,
-  FormControl,
-  Textarea
+  FormControl
 } from '@chakra-ui/react';
-import { QuestionOutlineIcon, SmallAddIcon } from '@chakra-ui/icons';
-import NodeCard from './modules/NodeCard';
+import { AddIcon, SmallAddIcon } from '@chakra-ui/icons';
+import NodeCard from '../modules/NodeCard';
 import { FlowModuleItemType } from '@/types/flow';
-import Container from './modules/Container';
+import Container from '../modules/Container';
 import { SystemInputEnum, VariableInputEnum } from '@/constants/app';
 import type { VariableItemType } from '@/types/app';
 import MyIcon from '@/components/Icon';
@@ -41,8 +40,6 @@ 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 },
@@ -118,91 +115,60 @@ const NodeUserGuide = ({
    <>
      <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>
+          <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>
-                </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>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+          <Box mt={2} textAlign={'right'}>
+            <Button
+              variant={'base'}
+              leftIcon={<AddIcon fontSize={'10px'} />}
+              onClick={() => {
+                const newVariable = { ...defaultVariable, id: nanoid() };
+                updateVariables(variables.concat(newVariable));
+                reset({ variable: newVariable });
+                onOpen();
+              }}
+            >
+              新增
+            </Button>
          </Box>
        </Container>
      </NodeCard>
--- a/client/src/pages/app/detail/components/edit/components/TemplateList.tsx
+++ b/client/src/pages/app/detail/components/edit/components/TemplateList.tsx
@@ -74,7 +74,7 @@ const ModuleStoreList = ({
                    });
                  }}
                >
-                  <Avatar src={item.logo} w={'34px'} borderRadius={'0'} />
+                  <Avatar src={item.logo} w={'34px'} objectFit={'contain'} borderRadius={'0'} />
                  <Box ml={5} flex={'1 0 0'}>
                    <Box color={'black'}>{item.name}</Box>
                    <Box color={'myGray.500'} fontSize={'sm'}>
--- a/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
+++ b/client/src/pages/app/detail/components/edit/components/modules/NodeCard.tsx
@@ -31,7 +31,7 @@ const NodeCard = ({
  return (
    <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'} />
+        <Avatar src={logo} borderRadius={'md'} objectFit={'contain'} w={'30px'} h={'30px'} />
        <Box ml={3} fontSize={'lg'} color={'myGray.600'}>
          {name}
        </Box>
--- a/client/src/pages/app/detail/components/edit/index.tsx
+++ b/client/src/pages/app/detail/components/edit/index.tsx
@@ -31,28 +31,31 @@ import MyTooltip from '@/components/MyTooltip';
 import TemplateList from './components/TemplateList';
 import ChatTest, { type ChatTestComponentRef } from './components/ChatTest';

-const NodeChat = dynamic(() => import('./components/NodeChat'), {
+const NodeChat = dynamic(() => import('./components/Nodes/NodeChat'), {
  ssr: false
 });
-const NodeKbSearch = dynamic(() => import('./components/NodeKbSearch'), {
+const NodeKbSearch = dynamic(() => import('./components/Nodes/NodeKbSearch'), {
  ssr: false
 });
-const NodeHistory = dynamic(() => import('./components/NodeHistory'), {
+const NodeHistory = dynamic(() => import('./components/Nodes/NodeHistory'), {
  ssr: false
 });
-const NodeTFSwitch = dynamic(() => import('./components/NodeTFSwitch'), {
+const NodeTFSwitch = dynamic(() => import('./components/Nodes/NodeTFSwitch'), {
  ssr: false
 });
-const NodeAnswer = dynamic(() => import('./components/NodeAnswer'), {
+const NodeAnswer = dynamic(() => import('./components/Nodes/NodeAnswer'), {
  ssr: false
 });
-const NodeQuestionInput = dynamic(() => import('./components/NodeQuestionInput'), {
+const NodeQuestionInput = dynamic(() => import('./components/Nodes/NodeQuestionInput'), {
  ssr: false
 });
-const NodeRINode = dynamic(() => import('./components/NodeRINode'), {
+const NodeCQNode = dynamic(() => import('./components/Nodes/NodeCQNode'), {
  ssr: false
 });
-const NodeUserGuide = dynamic(() => import('./components/NodeUserGuide'), {
+const NodeVariable = dynamic(() => import('./components/Nodes/NodeVariable'), {
+  ssr: false
+});
+const NodeUserGuide = dynamic(() => import('./components/Nodes/NodeUserGuide'), {
  ssr: false
 });

@@ -64,13 +67,14 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);

 const nodeTypes = {
  [FlowModuleTypeEnum.userGuide]: NodeUserGuide,
+  [FlowModuleTypeEnum.variable]: NodeVariable,
  [FlowModuleTypeEnum.questionInputNode]: NodeQuestionInput,
  [FlowModuleTypeEnum.historyNode]: NodeHistory,
  [FlowModuleTypeEnum.chatNode]: NodeChat,
  [FlowModuleTypeEnum.kbSearchNode]: NodeKbSearch,
  [FlowModuleTypeEnum.tfSwitchNode]: NodeTFSwitch,
  [FlowModuleTypeEnum.answerNode]: NodeAnswer,
-  [FlowModuleTypeEnum.classifyQuestion]: NodeRINode
+  [FlowModuleTypeEnum.classifyQuestion]: NodeCQNode
 };
 const edgeTypes = {
  buttonedge: ButtonEdge
--- a/client/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/client/src/pages/chat/components/ChatHistorySlider.tsx
@@ -161,7 +161,7 @@ const ChatHistorySlider = ({
                        {item.top ? '取消置顶' : '置顶'}
                      </MenuItem>
                    )}
-                    {/* {onUpdateTitle && (
+                    {onUpdateTitle && (
                      <MenuItem
                        onClick={(e) => {
                          e.stopPropagation();
@@ -174,7 +174,7 @@ const ChatHistorySlider = ({
                        <MyIcon mr={2} name={'customTitle'} w={'16px'}></MyIcon>
                        自定义标题
                      </MenuItem>
-                    )} */}
+                    )}
                    <MenuItem
                      _hover={{ color: 'red.500' }}
                      onClick={(e) => {
--- a/client/src/pages/chat/index.tsx
+++ b/client/src/pages/chat/index.tsx
@@ -301,9 +301,7 @@ const Chat = () => {
                appAvatar={chatData.app.avatar}
                variableModules={chatData.app.variableModules}
                welcomeText={chatData.app.welcomeText}
-                onUpdateVariable={(e) => {
-                  console.log(e);
-                }}
+                onUpdateVariable={(e) => {}}
                onStartChat={startChat}
                onDelMessage={delOneHistoryItem}
              />