feat(web): share chat & app chat support files

2026-02-06 21:11:51 +08:00
parent 2db583d62d
commit 6849c620b8
34 changed files with 1571 additions and 251 deletions
--- a/web/src/components/AudioRecorder/index.tsx
+++ b/web/src/components/AudioRecorder/index.tsx
@@ -0,0 +1,61 @@
+import { type FC, useRef, useState } from 'react'
+import RecordRTC from 'recordrtc'
+
+import { fileUpload } from '@/api/fileStorage'
+
+interface AudioRecorderProps {
+  onRecordingComplete?: (file: { file_id: string; file_key: string; }, blob: Blob) => void
+  className?: string
+}
+
+const AudioRecorder: FC<AudioRecorderProps> = ({
+  onRecordingComplete,
+  className = '',
+}) => {
+  const [isRecording, setIsRecording] = useState(false)
+  const recorderRef = useRef<RecordRTC | null>(null)
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      recorderRef.current = new RecordRTC(stream, {
+        type: 'audio',
+        mimeType: 'audio/webm'
+      })
+      recorderRef.current.startRecording()
+      setIsRecording(true)
+    } catch (error) {
+      console.error('Failed to start recording:', error)
+    }
+  }
+
+  const stopRecording = () => {
+    if (recorderRef.current) {
+      recorderRef.current.stopRecording(() => {
+        const blob = recorderRef.current!.getBlob()
+        const formData = new FormData()
+        formData.append('file', blob, `recording_${Date.now()}.webm`)
+        fileUpload(formData)
+          .then(res => {
+            onRecordingComplete?.(res as { file_id: string; file_key: string; }, blob)
+            recorderRef.current?.destroy()
+            recorderRef.current = null
+          })
+      })
+      setIsRecording(false)
+    }
+  }
+
+  return (
+    <div
+      className={`rb:size-5.5 rb:cursor-pointer rb:bg-cover ${className} ${
+        isRecording
+          ? `rb:bg-[url('@/assets/images/conversation/audio_ing.gif')]`
+          : `rb:bg-[url('@/assets/images/conversation/audio.svg')] rb:hover:bg-[url('@/assets/images/conversation/audio_hover.svg')]`
+      }`}
+      onClick={isRecording ? stopRecording : startRecording}
+    />
+  )
+}
+
+export default AudioRecorder
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:17 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-01-12 20:41:27
+ * @Last Modified time: 2026-02-06 21:05:52
 */
 import { type FC, useRef, useEffect } from 'react'
 import clsx from 'clsx'
@@ -11,8 +11,8 @@ import type { ChatContentProps } from './types'
 import { Spin } from 'antd'

 /**
- * 聊天内容显示组件
- * 负责渲染聊天消息列表，支持不同角色的消息样式和自动滚动
+ * Chat Content Display Component
+ * Responsible for rendering chat message list, supports different role message styles and auto-scrolling
 */
 const ChatContent: FC<ChatContentProps> = ({
  classNames,
@@ -25,10 +25,10 @@ const ChatContent: FC<ChatContentProps> = ({
  errorDesc,
  renderRuntime
 }) => {
-  // 滚动容器引用，用于控制自动滚动到底部
+  // Scroll container reference for controlling auto-scroll to bottom
  const scrollContainerRef = useRef<(HTMLDivElement | null)>(null)
  
-  // 当数据变化时，自动滚动到底部显示最新消息
+  // Auto-scroll to bottom when data changes to show latest messages
  useEffect(() => {
    setTimeout(() => {
      if (scrollContainerRef.current) {
@@ -39,37 +39,37 @@ const ChatContent: FC<ChatContentProps> = ({
  return (
    <div ref={scrollContainerRef} className={clsx("rb:relative rb:overflow-y-auto", classNames)}>
      {data.length === 0 
-        ? empty // 显示空状态
+        ? empty // Display empty state
        : data.map((item, index) => (
          <div key={index} className={clsx("rb:relative", {
-            'rb:mt-6': index !== 0, // 非第一条消息添加上边距
-            'rb:right-0 rb:text-right': item.role === 'user', // 用户消息右对齐
-            'rb:left-0 rb:text-left': item.role === 'assistant', // 助手消息左对齐
+            'rb:mt-6': index !== 0, // Add top margin for non-first messages
+            'rb:right-0 rb:text-right': item.role === 'user', // User messages right-aligned
+            'rb:left-0 rb:text-left': item.role === 'assistant', // Assistant messages left-aligned
          })}>
-            {/* 流式加载时且内容为空则不显示 */}
+            {/* Don't display if streaming and content is empty */}
            {streamLoading && item.content === '' && !renderRuntime
              ? <Spin />
              : <>
-                {/* 顶部标签（如时间戳、用户名等） */}
+                {/* Top label (such as timestamp, username, etc.) */}
                {labelPosition === 'top' &&
                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular">
                    {labelFormat(item)}
                  </div>
                }
-                {/* 消息气泡框 */}
+                {/* Message bubble */}
                <div className={clsx('rb:border rb:text-left rb:rounded-lg rb:mt-1.5 rb:leading-4.5 rb:p-[10px_12px_2px_12px] rb:inline-block rb:max-w-130 rb:wrap-break-word', contentClassNames, {
-                  // 错误消息样式（内容为null且非助手消息）
+                  // Error message style (content is null and not assistant message)
                  'rb:border-[rgba(255,93,52,0.30)] rb:bg-[rgba(255,93,52,0.08)] rb:text-[#FF5D34]': errorDesc && item.role === 'assistant' && item.content === null && !renderRuntime,
-                  // 助手消息样式
+                  // Assistant message style
                  'rb:bg-[rgba(21,94,239,0.08)] rb:border-[rgba(21,94,239,0.30)]': item.role === 'user',
-                  // 用户消息样式
+                  // User message style
                  'rb:bg-[#FFFFFF] rb:border-[#EBEBEB]': item.role === 'assistant' && (item.content || item.content === '' || typeof renderRuntime === 'function'),
                })}>
                  {item.subContent && renderRuntime && renderRuntime(item, index)}
-                  {/* 使用Markdown组件渲染消息内容 */}
+                  {/* Render message content using Markdown component */}
                  <Markdown content={renderRuntime ? item.content ?? '' : item.content ?? errorDesc ?? ''} />
                </div>
-                {/* 底部标签（如时间戳、用户名等） */}
+                {/* Bottom label (such as timestamp, username, etc.) */}
                {labelPosition === 'bottom' &&
                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4 rb:font-regular rb:mt-2">
                    {labelFormat(item)}
--- a/web/src/components/Chat/ChatInput.tsx
+++ b/web/src/components/Chat/ChatInput.tsx
@@ -2,9 +2,9 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:14 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2025-12-20 15:38:40
+ * @Last Modified time: 2026-02-06 21:05:09 
 */
-import { useEffect } from 'react'
+import { type FC, useEffect, useMemo } from 'react'
 import { Flex, Input, Form } from 'antd'
 import SendIcon from '@/assets/images/conversation/send.svg'
 import SendDisabledIcon from '@/assets/images/conversation/sendDisabled.svg'
@@ -12,15 +12,24 @@ import LoadingIcon from '@/assets/images/conversation/loading.svg'
 import type { ChatInputProps } from './types'

 /**
- * 聊天输入框组件
- * 提供消息输入、发送功能，支持键盘快捷键和加载状态显示
+ * Chat Input Component
+ * Provides message input and send functionality, supports keyboard shortcuts and loading state display
 */
-const ChatInput = ({ message, onChange, onSend, loading, children }: ChatInputProps) => {
+const ChatInput: FC<ChatInputProps> = ({
+  message,
+  onSend,
+  loading,
+  children,
+  fileList,
+  fileChange,
+  className = '',
+  onChange
+}) => {
  const [form] = Form.useForm()
-  // 监听表单值变化，用于控制发送按钮状态
-  const values = Form.useWatch([], form);
+  const values = Form.useWatch([], form)
+  // Monitor form value changes to control send button state

-  // 当外部message为空时，清空表单
+  // Clear form when external message is empty
  useEffect(() => {
    if (!message) {
      form.setFieldsValue({
@@ -29,7 +38,7 @@ const ChatInput = ({ message, onChange, onSend, loading, children }: ChatInputPr
    }
  }, [form, message])
  
-  // 当加载状态时，清空输入框
+  // Clear input when loading
  useEffect(() => {
    if (loading) {
      form.setFieldsValue({
@@ -38,39 +47,93 @@ const ChatInput = ({ message, onChange, onSend, loading, children }: ChatInputPr
    }
  }, [loading])

+
+  const handleDelete = (file: any) => {
+    fileChange?.(fileList?.filter(item => item.uid !== file.uid) || [])
+  }
+  // Convert file object to preview URL
+  const previewFileList = useMemo(() => {
+    return fileList?.map(file => ({
+      ...file,
+      url: file.url || (file.originFileObj ? URL.createObjectURL(file.originFileObj) : file.thumbUrl)
+    })) || []
+  }, [fileList])
+
+  const handleSend = () => {
+    onSend(values.message)
+  }
+
  return (
-    <div className="rb:absolute rb:bottom-3 rb:left-0 rb:right-0">
+    <div className={`rb:absolute rb:bottom-3 rb:left-0 rb:right-0 rb:w-full ${className}`}>
      <Flex vertical justify="space-between" className="rb:border rb:border-[#DFE4ED] rb:rounded-xl rb:min-h-30">
-        {/* 消息输入表单 */}
+        {previewFileList.length > 0 && <Flex gap={14} className="rb:mx-3! rb:mt-3!">
+          {previewFileList.map((file) => {
+            if (file.type.includes('image')) {
+              return (
+                <div key={file.uid} className="rb:inline-block rb:group rb:relative rb:rounded-lg">
+                  <img src={file.url} alt={file.name} className="rb:size-12! rb:rounded-lg rb:object-cover rb:cursor-pointer" />
+                  <div
+                    className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('src/assets/images/conversation/delete.svg')] rb:hover:bg-[url('src/assets/images/conversation/delete_hover.svg')]"
+                    onClick={() => handleDelete(file)}
+                  ></div>
+                </div>
+              )
+            }
+            return (
+              <div key={file.uid} className="rb:w-45 rb:text-[12px] rb:gap-2.5 rb:flex rb:items-center rb:group rb:relative rb:rounded-lg rb:bg-[#F0F3F8] rb:py-2 rb:px-2.5">
+                {(file.type.includes('word') || file.type.includes('wordprocessingml.document')) && <div
+                  className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('src/assets/images/conversation/word_disabled.svg')] rb:hover:bg-[url('src/assets/images/conversation/word.svg')]"
+                ></div>}
+                {(file.type.includes('pdf')) && <div
+                  className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('src/assets/images/conversation/pdf_disabled.svg')] rb:hover:bg-[url('src/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('src/assets/images/conversation/excel_disabled.svg')] rb:hover:bg-[url('src/assets/images/conversation/excel.svg')]"
+                ></div>}
+                <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>
+                </div>
+                <div
+                  className="rb:hidden rb:group-hover:block rb:absolute rb:-right-1 rb:-top-1 rb:size-3.5 rb:cursor-pointer rb:bg-cover rb:bg-[url('src/assets/images/conversation/delete.svg')] rb:hover:bg-[url('src/assets/images/conversation/delete_hover.svg')]"
+                  onClick={() => handleDelete(file)}
+                ></div>
+              </div>
+            )
+          })}
+        </Flex>}
+        {/* Message input form */}
        <Form form={form} layout="vertical">
-            <Form.Item name="message" noStyle>
-              <Input.TextArea
-                className="rb:m-[10px_12px_10px_12px]! rb:p-0! rb:w-[calc(100%-24px)]! rb:flex-[1_1_auto]"
-                variant="borderless"
-                autoSize={{ minRows: 2, maxRows: 2 }}
-                onChange={(e) => onChange(e.target.value)}
-                onKeyDown={(e) => {
-                  // Enter键发送，Shift+Enter换行
-                  if (e.key === 'Enter' && !e.shiftKey && (e.target as HTMLTextAreaElement).value?.trim() !== '' && !loading) {
-                    e.preventDefault();
-                    onSend();
-                  }
-                }}
-              />
-            </Form.Item>
+          <Form.Item name="message" noStyle>
+            <Input.TextArea
+              className="rb:m-[10px_12px_10px_12px]! rb:p-0! rb:w-[calc(100%-24px)]! rb:flex-[1_1_auto]"
+              variant="borderless"
+              autoSize={{ minRows: 2, maxRows: 2 }}
+              onChange={(e) => onChange?.(e.target.value)}
+              onKeyDown={(e) => {
+                // Enter to send, Shift+Enter for new line
+                if (e.key === 'Enter' && !e.shiftKey && (e.target as HTMLTextAreaElement).value?.trim() !== '' && !loading) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              }}
+            />
+          </Form.Item>
        </Form>

-        {/* 底部操作区域 */}
+        {/* Bottom action area */}
        <Flex align="center" justify="space-between" className="rb:m-[0_10px_10px_10px]!">
-          {/* 子组件内容（如按钮等） */}
-          {children}
-          {/* 发送按钮 - 根据状态显示不同图标 */}
-          {loading
-            ? <img src={LoadingIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
-            : !values || !values?.message || values?.message?.trim() === ''
-            ? <img src={SendDisabledIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
-            : <img src={SendIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" onClick={onSend} />
-          }
+          {/* Child component content (such as buttons) */}
+          <div className="rb:flex-1">{children}</div>
+          <div className="rb:flex rb:items-center">
+            {/* Send button - display different icons based on state */}
+            {loading
+              ? <img src={LoadingIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
+              : !values || !values?.message || values?.message?.trim() === ''
+                ? <img src={SendDisabledIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" />
+                : <img src={SendIcon} className="rb:w-5.5 rb:h-5.5 rb:cursor-pointer" onClick={handleSend} />
+            }
+          </div>
        </Flex>
      </Flex>
    </div>
--- a/web/src/components/Chat/index.tsx
+++ b/web/src/components/Chat/index.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:09 
- * @Last Modified by: ZhaoYing
- * @Last Modified time: 2025-12-11 13:43:51
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-02-06 21:05:09 
 */
 import { type FC } from 'react'
 import ChatInput from './ChatInput'
@@ -10,35 +10,43 @@ import type { ChatProps } from './types'
 import ChatContent from './ChatContent'

 /**
- * 聊天组件 - 主要组件，由内容区域和输入框组成
- * 提供完整的聊天界面功能，包括消息显示和输入交互
+ * Chat Component - Main component consisting of content area and input box
+ * Provides complete chat interface functionality, including message display and input interaction
 */
 const Chat: FC<ChatProps> = ({
  empty,
  data,
-  onChange, 
-  onSend, 
-  streamLoading = false, 
-  loading, 
+  onChange,
+  onSend,
+  streamLoading = false,
+  loading,
  contentClassName = '',
  children,
  labelFormat,
-  errorDesc
+  errorDesc,
+  fileList,
+  fileChange
 }) => {
  return (
    <div className="rb:h-full rb:relative rb:pt-2">
-      {/* 聊天内容显示区域 */}
+      {/* Chat content display area */}
      <ChatContent
-        classNames={contentClassName} 
-        data={data} 
+        classNames={contentClassName}
+        data={data}
        streamLoading={streamLoading}
        empty={empty}
        labelFormat={labelFormat}
        errorDesc={errorDesc}
      />

-      {/* 聊天输入框区域 */}
-      <ChatInput onChange={onChange} onSend={onSend} loading={loading}>
+      {/* Chat input area */}
+      <ChatInput
+        fileList={fileList}
+        onChange={onChange}
+        onSend={onSend}
+        loading={loading}
+        fileChange={fileChange}
+      >
        {children}
      </ChatInput>
    </div>
--- a/web/src/components/Chat/types.ts
+++ b/web/src/components/Chat/types.ts
@@ -2,85 +2,95 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:45:54 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2025-12-11 13:43:52
+ * @Last Modified time: 2026-02-06 21:05:09 
 */
 import { type ReactNode } from 'react'

 /**
- * 聊天消息项接口
+ * Chat message item interface
 */
 export interface ChatItem {
-  /** 消息唯一标识 */
+  /** Message unique identifier */
  id?: string;
-  /** 会话ID */
+  /** Conversation ID */
  conversation_id?: string | null;
-  /** 消息角色：用户或助手 */
+  /** Message role: user or assistant */
  role?: 'user' | 'assistant';
-  /** 消息内容 */
+  /** Message content */
  content?: string | null;
-  /** 创建时间 */
+  /** Creation time */
  created_at?: number | string;
  status?: string;
-  subContent?: Record<string, any>[]
+  subContent?: Record<string, any>[];
+  files?: any[];
 }

 /**
- * 聊天组件主要属性接口
+ * Chat component main props interface
 */
 export interface ChatProps {
-  /** 空状态显示内容 */
+  /** Empty state display content */
  empty?: ReactNode;
-  /** 聊天数据列表 */
+  /** Chat data list */
  data: ChatItem[];
-  /** 输入内容变化回调 */
+  /** Input content change callback */
  onChange: (message: string) => void;
-  /** 发送消息回调 */
+  /** Send message callback */
  onSend: () => void;
-  /** 流式加载状态 */
+  /** Streaming loading state */
  streamLoading?: boolean;
-  /** 加载状态 */
+  /** Loading state */
  loading: boolean;
-  /** 内容区域自定义样式类名 */
+  /** Content area custom class name */
  contentClassName?: string;
-  /** 子组件内容 */
+  /** Child component content */
  children?: ReactNode;
-  /** 标签格式化函数 */
+  /** Label format function */
  labelFormat: (item: ChatItem) => any;
  errorDesc?: string;
+  /** Attachment list */
+  fileList?: any[];
+  /** Attachment update */
+  fileChange?: (fileList: any[]) => void;
 }

 /**
- * 聊天输入框组件属性接口
+ * Chat input component props interface
 */
 export interface ChatInputProps {
-  /** 当前输入消息 */
+  /** Current input message */
  message?: string;
-  /** 输入内容变化回调 */
-  onChange: (message: string) => void;
-  /** 发送消息回调 */
-  onSend: () => void;
-  /** 加载状态 */
+  /** Input content change callback */
+  onChange?: (message: string) => void;
+  /** Send message callback */
+  onSend: (message?: string) => void;
+  /** Loading state */
  loading: boolean;
-  /** 子组件内容 */
+  /** Child component content */
  children?: ReactNode;
+  /** Attachment list */
+  fileList?: any[];
+  /** Attachment update */
+  fileChange?: (fileList: any[]) => void;
+  className?: string;
 }

 /**
- * 聊天内容区域组件属性接口
+ * Chat content area component props interface
 */
 export interface ChatContentProps {
-  /** 自定义样式类名 */
+  /** Custom class name */
  classNames?: string | Record<string, boolean>;
  contentClassNames?: string | Record<string, boolean>;
-  /** 聊天数据列表 */
+  /** Chat data list */
  data: ChatItem[];
-  /** 流式加载状态 */
+  /** Streaming loading state */
  streamLoading: boolean;
-  /** 空状态显示内容 */
+  /** Empty state display content */
  empty?: ReactNode;
-  /** 标签位置：顶部或底部 */
+  /** Label position: top or bottom */
  labelPosition?: 'top' | 'bottom';
-  /** 标签格式化函数 */
+  /** Label format function */
  labelFormat: (item: ChatItem) => any;
  errorDesc?: string;
  renderRuntime?: (item: ChatItem, index: number) => ReactNode;
--- a/web/src/components/Upload/UploadFiles.tsx
+++ b/web/src/components/Upload/UploadFiles.tsx
@@ -1,12 +1,14 @@
-import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Upload, Button, Modal, Progress, App } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps, UploadFile } from 'antd';
+import type { UploadRequestOption } from 'rc-upload/lib/interface';
 // import { request } from '@/utils/request';
 import type { UploadProps as RcUploadProps } from 'antd/es/upload/interface';
 import CloudUploadOutlined from '@/assets/images/CloudUploadOutlined.png'
 import { useTranslation } from 'react-i18next';
 import { cookieUtils } from '@/utils/request'
+import { fileUpload } from '@/api/fileStorage'

 const { confirm } = Modal;
 const { Dragger } = Upload;
@@ -61,6 +63,8 @@ const ALL_FILE_TYPE: {
  ttl: 'text/turtle',
  rdf: 'application/rdf+xml',
  xml: 'application/rdf+xml',
+  yaml: 'application/x-yaml',
+  yml: 'application/x-yaml',
 }
 export interface UploadFilesRef {
  fileList: UploadFile[];
@@ -157,45 +161,6 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({

    return isAutoUpload;
  };
-
-  // 自定义上传方法
-  /*
-    const customRequest: RcUploadProps['customRequest'] = ({ file, onSuccess, onError, onProgress }) => {
-      setLoading(true);
-      
-      const formData = new FormData();
-      formData.append('file', file as RcFile);
-      
-      // 添加额外的请求参数
-      const requestData = requestConfig.data;
-      if (requestData) {
-        Object.keys(requestData).forEach(key => {
-          const value = requestData[key];
-          formData.append(key, String(value));
-        });
-      }
-
-      request.post(action, formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          ...requestConfig.headers,
-        },
-        ...requestConfig,
-      })
-        .then((response) => {
-          if (onSuccess) onSuccess(response);
-        })
-        .catch((error) => {
-          message.error('上传失败，请重试');
-          if (onError) onError(error);
-          // setFileList(fileList.filter((item) => item.uid !== (file as UploadFile).uid));
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    };
-  */
-
  // 处理上传状态变化
  const handleChange: UploadProps['onChange'] = ({ fileList: newFileList, event }) => {
    console.log('event', event)
@@ -240,7 +205,7 @@ const UploadFiles = forwardRef<UploadFilesRef, UploadFilesProps>(({
    fileList,
    beforeUpload,
    headers: {
-      authorization: `Bearer ${cookieUtils.get('authToken')}`,
+      authorization: `Bearer ${cookieUtils.get('authToken') || ''}`,
    },
    onRemove: handleRemove,
    onChange: handleChange,