feat(web): app support features

web/src/views/Workflow/components/Chat/Chat.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-06 21:10:56 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-04 18:51:48
+ * @Last Modified time: 2026-03-17 15:05:21
  */
 /**
  * Workflow Chat Component
@@ -21,50 +21,56 @@
  * 
  * @component
  */
-import { forwardRef, useImperativeHandle, useState, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useState, useRef, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { App, Space, Button, Flex, Dropdown, type MenuProps, Divider } from 'antd'
+import { App } from 'antd'
 
 import ChatIcon from '@/assets/images/application/chat.png'
 import RbDrawer from '@/components/RbDrawer';
-import VariableConfigModal from './VariableConfigModal'
 import { draftRun } from '@/api/application';
 import Empty from '@/components/Empty'
 import ChatContent from '@/components/Chat/ChatContent'
 import type { ChatItem } from '@/components/Chat/types'
 import dayjs from 'dayjs'
-import type { ChatRef, VariableConfigModalRef, GraphRef } from '../../types'
+import type { ChatRef, GraphRef, WorkflowConfig } from '../../types'
 import { type SSEMessage } from '@/utils/stream'
 import type { Variable } from '../Properties/VariableList/types'
 import ChatInput from '@/components/Chat/ChatInput'
-import UploadFiles from '@/views/Conversation/components/FileUpload'
-import AudioRecorder from '@/components/AudioRecorder'
-import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
-import type { UploadFileListModalRef } from '@/views/Conversation/types'
+import ChatToolbar from '@/components/Chat/ChatToolbar'
+import type { ChatToolbarRef } from '@/components/Chat/ChatToolbar'
 import Runtime from './Runtime';
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
 
-const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId, graphRef }, ref) => {
+const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef; data: WorkflowConfig | null }>(({ appId, graphRef, data }, ref) => {
   const { t } = useTranslation()
   const { message: messageApi } = App.useApp()
-  const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
-  // State management
-  const [open, setOpen] = useState(false) // Drawer visibility
-  const [loading, setLoading] = useState(false) // Send button loading state
-  const [chatList, setChatList] = useState<ChatItem[]>([]) // Chat message history
-  const [variables, setVariables] = useState<Variable[]>([]) // Workflow input variables
-  const [streamLoading, setStreamLoading] = useState(false) // SSE streaming state
-  const [conversationId, setConversationId] = useState<string | null>(null) // Current conversation ID
-  const [fileList, setFileList] = useState<any[]>([]) // Uploaded files
-  const [message, setMessage] = useState<string | undefined>(undefined) // Current input message
-  const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
+  const toolbarRef = useRef<ChatToolbarRef>(null)
+  const toolbarCallbackRef = useCallback((node: ChatToolbarRef | null) => {
+    (toolbarRef as React.MutableRefObject<ChatToolbarRef | null>).current = node
+  }, [])
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [chatList, setChatList] = useState<ChatItem[]>([])
+  const [variables, setVariables] = useState<Variable[]>([])
+  const [streamLoading, setStreamLoading] = useState(false)
+  const [conversationId, setConversationId] = useState<string | null>(null)
+  const [fileList, setFileList] = useState<any[]>([])
+  const [message, setMessage] = useState<string | undefined>(undefined)
+  const [features, setFeatures] = useState<FeaturesConfigForm>({} as FeaturesConfigForm)
 
   /**
    * Opens the chat drawer and loads workflow variables from the start node
    */
   const handleOpen = () => {
     setOpen(true)
-    getVariables()
+    if (data?.features) setFeatures(data.features)
   }
+
+  useEffect(() => {
+    if (open && graphRef.current && toolbarRef.current) {
+      getVariables()
+    }
+  }, [open])
   /**
    * Extracts variables from the workflow's start node and merges with previous values
    */
@@ -84,7 +90,9 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
           vo.value = lastVo.value
         }
       })
-      setVariables(curVariables)
+      console.log('curVariables', curVariables)
+      setVariables([...curVariables])
+      toolbarRef.current?.setVariables([...curVariables])
     }
   }
   /**
@@ -96,22 +104,12 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
     setVariables([])
     setConversationId(null)
     setMessage(undefined)
+    toolbarRef.current?.setFiles([])
+    toolbarRef.current?.setVariables([])
     setFileList([])
     setLoading(false)
     setStreamLoading(false)
   }
-  /**
-   * Opens the variable configuration modal
-   */
-  const handleEditVariables = () => {
-    variableConfigModalRef.current?.handleOpen(variables)
-  }
-  /**
-   * Saves updated variable values from the modal
-   */
-  const handleSave = (values: Variable[]) => {
-    setVariables([...values])
-  }
   /**
    * Sends a message to execute the workflow
    * 
@@ -337,14 +335,16 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
       })
     }
 
+    const files = toolbarRef.current?.getFiles() || []
     setMessage(undefined)
+    toolbarRef.current?.setFiles([])
     setFileList([])
     const data = {
       message: message,
       variables: params,
       stream: true,
       conversation_id: conversationId,
-      files: fileList.map(file => {
+      files: files.map(file => {
         if (file.url) {
           return file
         } else {
@@ -379,65 +379,20 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
       })
   }
 
-  /**
-   * Updates the current input message
-   */
-  const handleMessageChange = (message: string) => {
-    setMessage(message)
-  }
-  /**
-   * Handles file upload from local device
-   */
-  const fileChange = (file?: any) => {
-    setFileList([...fileList, file])
-  }
-  const handleRecordingComplete = async (file: any) => {
-    setFileList([...fileList, {
-      response: { data: file },
-      thumbUrl: file.url,
-      type: file.type
-    }])
-  }
-
-  /**
-   * Handles dropdown menu actions for file upload
-   */
-  const handleShowUpload: MenuProps['onClick'] = ({ key }) => {
-    switch(key) {
-      case 'define':
-        uploadFileListModalRef.current?.handleOpen()
-        break
-    }
-  }
-  /**
-   * Adds files from remote URL modal
-   */
-  const addFileList = (list?: any[]) => {
-    if (!list || list.length <= 0) return
-    setFileList([...fileList, ...(list || [])])
-  }
-  /**
-   * Updates the entire file list (used when removing files)
-   */
   const updateFileList = (list?: any[]) => {
     setFileList([...list || []])
+    toolbarRef.current?.setFiles([...list || []])
   }
 
-  // Expose methods to parent component via ref
   useImperativeHandle(ref, () => ({
     handleOpen,
     handleClose
   }));
 
-  console.log('fileList', fileList)
-
   return (
     <RbDrawer
       title={<div className="rb:flex rb:items-center rb:gap-2.5">
         {t('workflow.run')}
-        {variables.length > 0 && <Space>
-          <Button size="small" onClick={handleEditVariables}>{t('application.variable')}</Button>
-        </Space>}
       </div>}
       classNames={{
         body: 'rb:p-0!'
@@ -466,48 +421,16 @@ const Chat = forwardRef<ChatRef, { appId: string; graphRef: GraphRef }>(({ appId
           fileChange={updateFileList}
           fileList={fileList}
           onSend={handleSend}
-          onChange={handleMessageChange}
+          onChange={(msg) => setMessage(msg)}
         >
-          <Flex justify="space-between" className="rb:flex-1">
-            <Flex gap={8} align="center">
-              <Dropdown
-                menu={{
-                  items: [
-                    { key: 'define', label: t('memoryConversation.addRemoteFile') },
-                    {
-                      key: 'upload', label: (
-                        <UploadFiles
-                          onChange={fileChange}
-                        />
-                      )
-                    },
-                  ],
-                  onClick: handleShowUpload
-                }}
-              >
-                <div
-                  className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
-                ></div>
-              </Dropdown>
-            </Flex>
-            <Flex align="center">
-              <AudioRecorder onRecordingComplete={handleRecordingComplete} />
-              <Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
-            </Flex>
-          </Flex>
+          <ChatToolbar
+            ref={toolbarCallbackRef}
+            features={features}
+            onFilesChange={setFileList}
+            onVariablesChange={setVariables}
+          />
         </ChatInput>
       </div>
-
-      <VariableConfigModal
-        ref={variableConfigModalRef}
-        refresh={handleSave}
-        variables={variables}
-      />
-
-      <UploadFileListModal
-        ref={uploadFileListModalRef}
-        refresh={addFileList}
-      />
     </RbDrawer>
   )
 })

web/src/views/Workflow/index.tsx

@@ -61,7 +61,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
     graphRef,
     addVariable,
     config,
-    funConfig: config?.funConfig
+    features: config?.features
   }))
   return (
     <div className="rb:h-[calc(100vh-64px)] rb:relative">
@@ -115,6 +115,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
       />
       <Chat
         ref={chatRef}
+        data={config}
         graphRef={graphRef}
         appId={config?.app_id as string}
       />

web/src/views/Workflow/types.ts

@@ -2,7 +2,7 @@
 import { Graph } from '@antv/x6';
 import type { KnowledgeConfig } from './components/Properties/Knowledge/types'
 import type { Variable } from './components/Properties/VariableList/types'
-import type { FunConfigForm } from '@/views/ApplicationConfig/types'
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'
 export interface NodeConfig {
   type: 'input' | 'textarea' | 'select' | 'inputNumber' | 'slider' | 'customSelect' | 'define' | 'knowledge' | 'variableList' | string;
   placeholder?: string;
@@ -91,7 +91,7 @@ export interface WorkflowConfig {
   created_at: number;
   updated_at: number;
 
-  funConfig?: FunConfigForm;
+  features?: FeaturesConfigForm;
 }
 
 export interface ChatRef {