Merge branch 'develop' into feature/ui_upgrade_zy

2026-03-20 11:49:00 +08:00
parent 69c001bf84 9d8c26b999
commit b1b53f6b1d
286 changed files with 23406 additions and 5328 deletions
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -2,13 +2,19 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:17 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-25 19:04:55
+ * @Last Modified time: 2026-03-19 20:45:39
 */
-import { type FC, useRef, useEffect } from 'react'
+import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
 import Markdown from '@/components/Markdown'
 import type { ChatContentProps } from './types'
-import { Spin } from 'antd'
+import { Spin, Divider, Space, Image, Flex } from 'antd'
+import { SoundOutlined } from '@ant-design/icons'
+
+
+const getFileUrl = (file: any) => {
+  return file.thumbUrl || file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : undefined)
+}

 /**
 * Chat Content Display Component
@@ -28,15 +34,33 @@ const ChatContent: FC<ChatContentProps> = ({
  // Scroll container reference for controlling auto-scroll to bottom
  const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
  const prevDataLengthRef = useRef(data.length);
-  const isScrolledToBottomRef = useRef(true); // Track if user is scrolled to bottom
+  const isScrolledToBottomRef = useRef(true);
+  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [playingIndex, setPlayingIndex] = useState<number | null>(null)
+
+  const handlePlay = (index: number, audio_url: string) => {
+    if (playingIndex === index) {
+      audioRef.current?.pause()
+      setPlayingIndex(null)
+      return
+    }
+    if (audioRef.current) {
+      audioRef.current.pause()
+    }
+    const audio = new Audio(audio_url)
+    audioRef.current = audio
+    audio.play()
+    setPlayingIndex(index)
+    audio.onended = () => setPlayingIndex(null)
+  }
  
  // Track scroll position to determine if user is at bottom
  useEffect(() => {
    const handleScroll = () => {
      if (scrollContainerRef.current) {
        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
-        // Consider user is at bottom if within 20px of the bottom
-        isScrolledToBottomRef.current = scrollHeight - scrollTop - clientHeight < 20;
+        // Consider user is at bottom if within 100px of the bottom
+        isScrolledToBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
      }
    };
    
@@ -64,11 +88,16 @@ const ChatContent: FC<ChatContentProps> = ({
        // Auto-scroll if data length changed OR user is currently at bottom
        if (data.length !== prevDataLengthRef.current || isScrolledToBottomRef.current) {
          scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+          isScrolledToBottomRef.current = true;
        }
        prevDataLengthRef.current = data.length;
      }
    }, 0);
  }, [data])
+
+  const handleDownload = (file: any) => {
+    window.open(getFileUrl(file), '_blank')
+  }
  return (
    <div ref={scrollContainerRef} className={clsx("rb:relative rb:overflow-y-auto", classNames)}>
      {data.length === 0 
@@ -89,6 +118,44 @@ const ChatContent: FC<ChatContentProps> = ({
                    {labelFormat(item)}
                  </div>
                }
+                {item.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end">
+                  {item.meta_data?.files?.map((file) => {
+                    if (file.type.includes('image')) {
+                      return (
+                        <div key={file.url || file.uid} className={`rb:inline-block rb:group rb:relative rb:rounded-lg ${contentClassNames}`}>
+                          <Image src={getFileUrl(file)} alt={file.name} className="rb:w-full rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
+                        </div>
+                      )
+                    }
+                    if (file.type.includes('video')) {
+                      return (
+                        <div key={file.url || file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg">
+                          <video src={getFileUrl(file)} controls className="rb:max-w-80 rb:rounded-lg rb:object-cover rb:cursor-pointer" />
+                        </div>
+                      )
+                    }
+                    if (file.type.includes('audio')) {
+                      return (
+                        <div key={file.url || file.uid} className="rb:inline-flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:py-2 rb:px-2.5 rb:gap-2">
+                          <audio src={getFileUrl(file)} controls className="rb:max-w-80" />
+                        </div>
+                      )
+                    }
+                    return (
+                      <div key={file.url || file.uid} className="rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:p-1! rb:cursor-pointer" onClick={() => handleDownload(file)}>
+                        {(file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document')) && <div
+                          className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word.svg')]"
+                        ></div>}
+                        {(file.type.includes('pdf')) && <div
+                          className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf.svg')]"
+                        ></div>}
+                        {(file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv')) && <div
+                          className="rb:size-10 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel.svg')]"
+                        ></div>}
+                      </div>
+                    )
+                  })}
+                </Flex>}
                {/* Message bubble */}
                <div className={clsx('rb:text-left rb:rounded-lg rb:leading-5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-130 rb:wrap-break-word rb:relative', contentClassNames, {
                  // Error message style (content is null and not assistant message)
@@ -104,6 +171,19 @@ const ChatContent: FC<ChatContentProps> = ({
                  {item.subContent && renderRuntime && renderRuntime(item, index)}
                  {/* Render message content using Markdown component */}
                  <Markdown content={renderRuntime ? item.content ?? '' : item.content ?? errorDesc ?? ''} />
+
+                  {item.meta_data?.audio_url && <>
+                    <Divider className="rb:my-3!" />
+                    <Space size={12} className="rb:pb-2 rb:pl-1">
+                      {playingIndex !== index
+                        ? <SoundOutlined className="rb:cursor-pointer rb:hover:text-[#155EEF]! rb:size-5.5" onClick={() => handlePlay(index, item.meta_data?.audio_url!)} />
+                        : <div
+                            className="rb:size-5.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]"
+                            onClick={() => handlePlay(index, item.meta_data?.audio_url!)}
+                          />
+                      }
+                    </Space>
+                  </>}
                </div>
                {/* Bottom label (such as timestamp, username, etc.) */}
                {labelPosition === 'bottom' &&
--- a/web/src/components/Chat/ChatInput.tsx
+++ b/web/src/components/Chat/ChatInput.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:14 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-19 17:35:14
+ * @Last Modified time: 2026-03-19 20:46:45
 */
 import { type FC, useEffect, useMemo, useState } from 'react'
 import { Flex, Input, Form } from 'antd'
@@ -122,15 +122,20 @@ const ChatInput: FC<ChatInputProps> = ({
                gap={10}
                className="rb:w-45 rb:text-[12px] rb:group rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:py-2! rb:px-2.5!"
              >
-                {(file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document')) && <div
-                  className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/word.svg')]"
-                ></div>}
-                {(file.type.includes('pdf')) && <div
-                  className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/pdf.svg')]"
-                ></div>}
-                {(file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv')) && <div
-                  className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/excel.svg')]"
-                ></div>}
+                {file.type.includes('pdf')
+                  ? <div
+                    className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/pdf_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/pdf.svg')]"
+                  ></div>
+                  : (file.type.includes('excel') || file.type.includes('spreadsheetml.sheet') || file.type.includes('csv'))
+                  ? <div
+                    className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/excel_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/excel.svg')]"
+                  ></div>
+                  : (file.type.includes('doc') || file.type.includes('docx') || file.type.includes('word') || file.type.includes('wordprocessingml.document'))
+                  ? <div
+                    className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/word_disabled.svg')] rb:hover:bg-[url('@/assets/images/conversation/word.svg')]"
+                  ></div>
+                  : null
+                }
                <div className="rb:flex-1 rb:w-32.5">
                  <div className="rb:leading-4 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.name}</div>
                  <div className="rb:leading-3.5 rb:mt-0.5 rb:text-[#5B6167] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{file.type} · {file.size}</div>
--- a/web/src/components/Chat/ChatToolbar.tsx
+++ b/web/src/components/Chat/ChatToolbar.tsx
@@ -0,0 +1,204 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-17 14:22:25 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-18 15:55:13
+ */
+// Toolbar component for chat input area, supporting file upload, audio recording, and variable configuration
+import { useRef, forwardRef, useImperativeHandle, type ReactNode, useEffect } from 'react'
+import { Flex, Dropdown, Divider, App, Form, type MenuProps } from 'antd'
+import { SettingOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+
+import AudioRecorder from '@/components/AudioRecorder'
+import UploadFiles from '@/views/Conversation/components/FileUpload'
+import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
+import VariableConfigModal from '@/views/Workflow/components/Chat/VariableConfigModal'
+import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types'
+import type { UploadFileListModalRef } from '@/views/Conversation/types'
+import type { VariableConfigModalRef } from '@/views/Workflow/types'
+import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
+
+// Exposed methods via ref for parent components to access/set form state
+export interface ChatToolbarRef {
+  getFiles: () => any[]
+  getVariables: () => Variable[]
+  setFiles: (files: any[]) => void
+  setVariables: (variables: Variable[]) => void
+}
+
+// Props for configuring toolbar features, upload settings, and event callbacks
+export interface ChatToolbarProps {
+  features: FeaturesConfigForm
+  extra?: ReactNode
+  uploadAction?: string
+  uploadRequestConfig?: {
+    data?: Record<string, string | number | boolean>
+    headers?: Record<string, string>
+  }
+  onFilesChange?: (files: any[]) => void
+  onVariablesChange?: (variables: Variable[]) => void
+  onRecordingComplete?: (file: any) => void;
+  defaultValue?: { memory: boolean }
+}
+
+interface FormValues {
+  files: any[]
+  variables: Variable[];
+  memory?: boolean;
+}
+
+const ChatToolbar = forwardRef<ChatToolbarRef, ChatToolbarProps>(({
+  features,
+  extra,
+  uploadAction,
+  uploadRequestConfig,
+  onFilesChange,
+  onVariablesChange,
+  onRecordingComplete,
+  defaultValue,
+}, ref) => {
+  const { t } = useTranslation()
+  const { message: messageApi } = App.useApp()
+  const uploadFileListModalRef = useRef<UploadFileListModalRef>(null)
+  const variableConfigModalRef = useRef<VariableConfigModalRef>(null)
+  const [form] = Form.useForm<FormValues>()
+  const queryValues = Form.useWatch([], form)
+
+  useEffect(() => {
+    if (!defaultValue) return
+    form.setFieldsValue(defaultValue)
+  }, [defaultValue])
+
+  useImperativeHandle(ref, () => ({
+    getFiles: () => form.getFieldValue('files') || [],
+    getVariables: () => form.getFieldValue('variables') || [],
+    setFiles: (files) => form.setFieldValue('files', files),
+    setVariables: (variables) => {
+      console.log('variables', variables)
+      form.setFieldValue('variables', variables)
+    },
+  }))
+
+  const { file_upload } = features || {}
+
+  // Append newly uploaded file to the file list when upload is complete
+  const fileChange = (file?: any) => {
+    if (file?.status !== 'done') return
+    const files = [...(queryValues?.files || []), file]
+    form.setFieldValue('files', files)
+    onFilesChange?.(files)
+  }
+
+  // Append recorded audio file to the file list and notify parent
+  const handleRecordingComplete = (file: any) => {
+    const files = [...(queryValues?.files || []), file]
+    form.setFieldValue('files', files)
+    onFilesChange?.(files)
+    onRecordingComplete?.(file)
+  }
+
+  // Merge a batch of files (e.g. from remote URL modal) into the file list
+  const addFileList = (list?: any[]) => {
+    if (!list?.length) return
+    const files = [...(queryValues?.files || []), ...list]
+    form.setFieldValue('files', files)
+    onFilesChange?.(files)
+  }
+
+  // Persist variable values from the config modal and notify parent
+  const handleVariablesSave = (values: Variable[]) => {
+    form.setFieldValue('variables', values)
+    onVariablesChange?.(values)
+  }
+
+  // True when any required variable is missing a value, used to highlight the config button
+  const isNeedVariableConfig = queryValues?.variables?.some(
+    vo => vo.required && (vo.value === null || vo.value === undefined || vo.value === '')
+  )
+
+  // Build dropdown menu items based on allowed transfer methods
+  const fileMenus: MenuProps['items'] = []
+  const enabledTypes = ['image', 'document', 'video', 'audio'].filter(
+    type => file_upload?.[`${type}_enabled` as keyof FeaturesConfigForm['file_upload']]
+  )
+  if (file_upload?.allowed_transfer_methods?.includes('remote_url') && enabledTypes.length > 0) {
+    fileMenus.push({
+      key: 'url',
+      label: t('memoryConversation.addRemoteFile'),
+      onClick: () => {
+        if ((queryValues?.files?.length || 0) >= file_upload.max_file_count) {
+          messageApi.warning(t('common.fileNumTip', { num: file_upload.max_file_count }))
+          return
+        }
+        uploadFileListModalRef.current?.handleOpen()
+      }
+    })
+  }
+  if (file_upload?.allowed_transfer_methods?.includes('local_file') && enabledTypes.length > 0) {
+    fileMenus.push({
+      key: 'upload',
+      label: (
+        <UploadFiles
+          action={uploadAction}
+          onChange={fileChange}
+          requestConfig={uploadRequestConfig}
+          featureConfig={file_upload}
+          disabled={(queryValues?.files?.length || 0) >= file_upload.max_file_count}
+        />
+      )
+    })
+  }
+
+  return (
+    <Form form={form} initialValues={{ files: [], variables: [] }}>
+      <Flex justify="space-between" className="rb:flex-1">
+        <Flex gap={8} align="center">
+          <Form.Item name="files" noStyle hidden={!file_upload?.enabled || fileMenus.length === 0}>
+            <Dropdown menu={{ items: fileMenus }}>
+              <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')]" />
+            </Dropdown>
+          </Form.Item>
+          {extra}
+          <Form.Item name="variables" className="rb:mb-0!" hidden={queryValues?.variables?.length < 1}>
+            <div
+              className={clsx('rb:flex rb:items-center rb:border rb:rounded-lg rb:px-2 rb:text-[12px] rb:h-6 rb:cursor-pointer rb:hover:bg-[#F0F3F8] rb:text-[#212332]', {
+                'rb:border-[#FF5D34] rb:text-[#FF5D34]': isNeedVariableConfig,
+                'rb:border-[#DFE4ED]': !isNeedVariableConfig,
+              })}
+              onClick={() => variableConfigModalRef.current?.handleOpen(queryValues.variables)}
+            >
+              <SettingOutlined className="rb:mr-1" />
+              {t('memoryConversation.variableConfig')}
+            </div>
+          </Form.Item>
+        </Flex>
+        {file_upload?.audio_enabled && file_upload?.allowed_transfer_methods?.includes('local_file') && (
+          <Flex align="center">
+            <AudioRecorder
+              disabled={(queryValues?.files?.length || 0) >= file_upload.max_file_count}
+              action={uploadAction}
+              requestConfig={uploadRequestConfig}
+              onRecordingComplete={handleRecordingComplete}
+              maxSize={file_upload?.audio_max_size_mb}
+            />
+            <Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
+          </Flex>
+        )}
+      </Flex>
+
+      <UploadFileListModal
+        ref={uploadFileListModalRef}
+        refresh={addFileList}
+        featureConfig={file_upload}
+      />
+      <VariableConfigModal
+        ref={variableConfigModalRef}
+        refresh={handleVariablesSave}
+      />
+    </Form>
+  )
+})
+
+export default ChatToolbar
--- a/web/src/components/Chat/index.tsx
+++ b/web/src/components/Chat/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:09 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-19 14:57:56
+ * @Last Modified time: 2026-03-19 20:47:27
 */
 import { type FC } from 'react'
 import ChatInput from './ChatInput'
@@ -26,7 +26,8 @@ const Chat: FC<ChatProps> = ({
  errorDesc,
  fileList,
  fileChange,
-  className
+  className,
+  renderRuntime
 }) => {
  return (
    <div className={`rb:h-full rb:relative rb:pt-2 ${className}`}>
@@ -38,6 +39,7 @@ const Chat: FC<ChatProps> = ({
        empty={empty}
        labelFormat={labelFormat}
        errorDesc={errorDesc}
+        renderRuntime={renderRuntime}
      />

      {/* Chat input area */}
--- a/web/src/components/Chat/types.ts
+++ b/web/src/components/Chat/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:45:54 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-06 21:05:09 
+ * @Last Modified time: 2026-03-19 20:47:12
 */
 import { type ReactNode } from 'react'

@@ -22,8 +22,11 @@ export interface ChatItem {
  created_at?: number | string;
  status?: string;
  subContent?: Record<string, any>[];
-  files?: any[];
  error?: string;
+  meta_data?: {
+    audio_url?: string;
+    files?: any[];
+  },
 }

 /**
@@ -54,6 +57,7 @@ export interface ChatProps {
  /** Attachment update */
  fileChange?: (fileList: any[]) => void;
  className?: string;
+  renderRuntime?: (item: ChatItem, index: number) => ReactNode;
 }

 /**