@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/chatCompare/components/Sender/index.tsx

@@ -0,0 +1,850 @@
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { ArrowUp, X } from 'lucide-react';
+import anime from 'animejs';
+import { useBadge } from './contexts/BadgeContext';
+
+// 自定义停止图标组件：圆形外框，中间有圆角正方形
+const StopIcon: React.FC<{
+  size?: number;
+  color?: string;
+  circleColor?: string;
+  className?: string;
+}> = ({ size = 20, color = '#ffffff', circleColor = '#ffffff', className = '' }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      {/* 圆形外框 */}
+      <circle cx="10" cy="10" r="9" fill="none" stroke={circleColor} strokeWidth="1.5" />
+      {/* 中间圆角正方形 - 3px圆角 */}
+      <rect x="7" y="7" width="6" height="6" rx="1" ry="1" fill={color} />
+    </svg>
+  );
+};
+
+import FilesDisplay from './FilesDisplay';
+
+import { Select, Tooltip } from 'antd';
+import { type Styles } from '@mxmweb/zui';
+import { Badge } from 'antd';
+interface SenderConfig {
+  upload_size_limit?: number;
+  upload_number_limit?: number;
+  upload_file_type_limit?: string[];
+  upload_limit_message?: string;
+  actions?: {
+    icon: React.ReactNode;
+    badgeCount?: number;
+    name: string;
+    tip?: string;
+  }[];
+  switchs?: Array<{
+    label: string;
+    name: string;
+    type: 'switch' | 'select';
+    defaultValue?: boolean | string | number;
+    enabled?: boolean;
+    icon?: React.ReactNode;
+    options?: { label: string; value: string | number }[];
+  }>;
+}
+
+interface Action {
+  icon: React.ReactNode;
+  name: string;
+  tip?: string;
+  badgeCount?: number;
+  enabled?: boolean;
+}
+
+interface FilePreview {
+  file: File;
+  preview?: string;
+  type: 'image' | 'document';
+  status?: 'pending' | 'uploading' | 'parsing' | 'done' | 'error';
+  name?: string;
+  uid?: string;
+}
+
+interface SenderProps {
+  value: string;
+  onSend: () => void;
+  onUpload: (files: FileList) => void;
+  onVoice: () => void;
+  styles: Styles;
+  uploadedFiles: FilePreview[];
+  fileUploadStatus?: any[];
+  status: 'ready' | 'loading' | 'error' | 'processing' | 'uploading';
+  onRemoveFile: (index: number) => void;
+  eventsEmit: (eventName: string, data?: any) => void;
+  recommandQuestions?: any;
+  senderConfig?: SenderConfig;
+  onSenderConfigChange?: (data: {
+    name: string;
+    checked: boolean;
+    all: Record<string, boolean>;
+  }) => void;
+  disclaimer?: string | React.ReactNode;
+}
+
+interface YuanbaoCheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  styles?: Styles;
+  disabled?: boolean;
+}
+function YuanbaoCheckbox({
+  checked,
+  onChange,
+  icon,
+  children,
+  styles,
+  disabled,
+}: YuanbaoCheckboxProps) {
+  const primary = styles?.theme?.colors?.primary || '#00C26A';
+  const text = styles?.theme?.colors?.text || '#343a40';
+  const lightText = styles?.theme?.colors?.background || '#fff';
+  const borderColor = styles?.theme?.colors?.border || '#dee2e6';
+  const disabledBg = styles?.theme?.colors?.disabledBackground || '#F5F5F5';
+  const disabledText = styles?.theme?.colors?.disabledText || '#808080';
+  const disabledBorder = styles?.theme?.colors?.disabled || '#808080';
+  const transColor = 'linear-gradient(90deg, #F1F8FF 0%, #F9F4FF 100%)';
+  return (
+    <button
+      type="button"
+      onClick={() => onChange(!checked)}
+      disabled={disabled}
+      className={`flex items-center gap-1 bg-white px-3 py-1 rounded-full border transition-all  duration-200 text-xs select-none`}
+      style={{
+        borderWidth: 1.5,
+        outline: 'none',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        minWidth: 0,
+        background: disabled ? disabledBg : checked ? transColor : 'transparent',
+        color: disabled ? disabledText : checked ? primary : text,
+        borderColor: disabled ? disabledBorder : checked ? primary : borderColor,
+      }}
+    >
+      {icon}
+      <span>{children}</span>
+    </button>
+  );
+}
+
+interface YuanbaoSelectProps {
+  value: string | number;
+  onChange: (value: string | number) => void;
+  options: { label: string; value: string | number }[];
+  styles?: Styles;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+function YuanbaoSelect({
+  value,
+  onChange,
+  options,
+  styles,
+  disabled,
+  placeholder = '请选择',
+}: YuanbaoSelectProps) {
+  const primary = styles?.theme?.colors?.primary || '#00C26A';
+  const text = styles?.theme?.colors?.text || '#343a40';
+  const lightText = styles?.theme?.colors?.background || '#fff';
+  const borderColor = styles?.theme?.colors?.border || '#dee2e6';
+  const disabledBg = styles?.theme?.colors?.disabledBackground || '#F5F5F5';
+  const disabledText = styles?.theme?.colors?.disabledText || '#808080';
+  const disabledBorder = styles?.theme?.colors?.disabled || '#808080';
+
+  return (
+    <div style={{ display: 'inline-block' }}>
+      <Select
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        placeholder={placeholder}
+        size="small"
+        style={{
+          minWidth: 120,
+          fontSize: '12px !important',
+          height: '28px',
+          borderRadius: '14px',
+          border: `1.5px solid ${disabled ? disabledBorder : borderColor}`,
+          backgroundColor: disabled ? disabledBg : 'white',
+          color: disabled ? disabledText : text,
+          fontWeight: '500',
+          transition: 'all 0.2s ease',
+        }}
+        className="yuanbao-select"
+        styles={{
+          popup: {
+            root: {
+              fontSize: '12px',
+              borderRadius: '8px',
+            },
+          },
+        }}
+        options={options}
+      />
+    </div>
+  );
+}
+
+export default function Sender({
+  value: propValue,
+  eventsEmit,
+  styles,
+  status,
+  onUpload,
+  onVoice,
+  uploadedFiles,
+  onRemoveFile,
+  senderConfig = {},
+  recommandQuestions = [],
+  fileUploadStatus = [],
+  disclaimer,
+}: Partial<SenderProps> & { senderConfig?: SenderConfig } = {}) {
+  const { badgeCounts } = useBadge();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  // 受控状态管理
+  const switchList = senderConfig.switchs || [];
+  const [configStates, setConfigStates] = useState(() => {
+    const state: Record<string, any> = {};
+    switchList.forEach(
+      (item: {
+        name: string;
+        type: string;
+        defaultValue?: any;
+        options?: { label: string; value: string | number }[];
+      }) => {
+        if (item.type === 'switch') {
+          state[item.name] = item.defaultValue ?? false;
+        } else if (item.type === 'select') {
+          state[item.name] = item.defaultValue ?? item.options?.[0]?.value ?? '';
+        }
+      }
+    );
+    return state;
+  });
+
+  // 监听 configStates 变化后再 eventsEmit，避免 setState in render
+  useEffect(() => {
+    if (eventsEmit) {
+      eventsEmit('sender:configChange', {
+        all: configStates,
+      });
+    }
+  }, [configStates]);
+
+  // 新增：本地受控 value
+  const [localValue, setLocalValue] = useState(propValue || '');
+  useEffect(() => {
+    setLocalValue(propValue || '');
+  }, [propValue]);
+
+  // 自动调整文本框高度
+  const adjustTextareaHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      const lineHeight = 24;
+      const paddingY = 12;
+      const minHeight = 44;
+      const maxLines = 5;
+      const maxHeight = maxLines * lineHeight + paddingY * 2;
+      const contentHeight = textarea.scrollHeight;
+      if (contentHeight <= maxHeight) {
+        textarea.style.height = `${contentHeight}px`;
+        textarea.style.overflowY = 'hidden';
+      } else {
+        textarea.style.height = `${maxHeight}px`;
+        textarea.style.overflowY = 'auto';
+      }
+    }
+  };
+
+  // 监听输入变化
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setLocalValue(e.target.value);
+    eventsEmit && eventsEmit('sender:change', e.target.value);
+    adjustTextareaHeight();
+  };
+
+  // 处理粘贴事件，确保粘贴内容中的换行符被正确保留
+  const handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    // 让浏览器默认处理粘贴，textarea 会自动保留换行符
+    // 这里不需要阻止默认行为，只需要确保粘贴后触发高度调整
+    setTimeout(() => {
+      adjustTextareaHeight();
+    }, 0);
+  };
+
+  // 处理按键事件
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      // Ctrl/Cmd + Enter -> 插入换行，不发送
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const textarea = textareaRef.current;
+        if (!textarea) return;
+        const start = textarea.selectionStart || 0;
+        const end = textarea.selectionEnd || 0;
+        const nextValue = `${localValue.substring(0, start)}\n${localValue.substring(end)}`;
+        setLocalValue(nextValue);
+        // 光标移动到换行后
+        requestAnimationFrame(() => {
+          textarea.selectionStart = textarea.selectionEnd = start + 1;
+          adjustTextareaHeight();
+        });
+        return;
+      }
+
+      // 单独 Enter -> 发送（保持原行为），Shift+Enter 走默认换行
+      if (!e.shiftKey) {
+        e.preventDefault();
+        eventsEmit && eventsEmit('sender:send');
+      }
+    }
+  };
+
+  // 处理 focus 事件：当 sender 获得焦点时，如果右侧栏打开则自动关闭
+  const handleFocus = () => {
+    // 通过全局事件关闭右侧栏
+    window.dispatchEvent(
+      new CustomEvent('aichat:right_set', {
+        detail: { collapsed: true },
+      })
+    );
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [localValue]);
+
+  // 语音识别回调
+  useEffect(() => {
+    let parsed;
+    try {
+      parsed =
+        typeof recommandQuestions === 'string'
+          ? JSON.parse(recommandQuestions)
+          : recommandQuestions;
+    } catch {
+      parsed = [];
+    }
+  }, [recommandQuestions]);
+  // 推荐问题健壮处理
+  const parsedRecommandQuestions = useMemo(() => {
+    if (
+      recommandQuestions === null ||
+      recommandQuestions === undefined ||
+      recommandQuestions === ''
+    ) {
+      return [];
+    }
+    if (typeof recommandQuestions === 'string') {
+      try {
+        const arr = JSON.parse(recommandQuestions);
+        return Array.isArray(arr) ? arr : [];
+      } catch {
+        return [];
+      }
+    }
+    return Array.isArray(recommandQuestions) ? recommandQuestions : [];
+  }, [recommandQuestions]);
+  const [showRecommandQuestions, setShowRecommandQuestions] = useState(false);
+
+  useEffect(() => {
+    if (!parsedRecommandQuestions || parsedRecommandQuestions.length === 0) {
+      setShowRecommandQuestions(false);
+      return;
+    }
+    setShowRecommandQuestions(false); // 先隐藏
+    // 等下一帧再显示并动画，确保 DOM 已挂载
+    setTimeout(() => {
+      setShowRecommandQuestions(true);
+    }, 0);
+  }, [parsedRecommandQuestions]);
+
+  // 动画逻辑：只有 showRecommandQuestions 为 true 时才执行
+  useEffect(() => {
+    if (!showRecommandQuestions) return;
+    const buttons = document.querySelectorAll('.recommand-question-btn');
+    buttons.forEach(btn => {
+      const el = btn as HTMLElement;
+      el.style.visibility = 'visible';
+      el.style.opacity = '0';
+      el.style.transform = 'translateY(20px)';
+    });
+    anime.remove(buttons);
+    anime({
+      targets: buttons,
+      opacity: [0, 1],
+      translateY: [20, 0],
+      delay: anime.stagger(120), // 依次延迟
+      duration: 400,
+      easing: 'easeOutCubic',
+      complete: () => {
+        buttons.forEach(btn => {
+          const el = btn as HTMLElement;
+          el.removeAttribute('style');
+          el.style.color = disabledTextColor;
+        });
+      },
+    });
+  }, [showRecommandQuestions, parsedRecommandQuestions]);
+  // // 文件上传按钮直接放在语音旁边
+  // const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   if (e.target.files && e.target.files.length > 0) {
+  //     onUpload?.(e.target.files);
+  //   }
+  // };
+
+  const filesToDisplay = useMemo(() => {
+    // 如果有实际的上传状态，优先使用它
+    if (fileUploadStatus && fileUploadStatus.length > 0) {
+      return fileUploadStatus;
+    }
+    // 否则，使用预览文件
+    return uploadedFiles || [];
+  }, [fileUploadStatus, uploadedFiles]);
+
+  // 是否可以发送 (必须有文本)
+  const canSend = useMemo(() => {
+    const hasText = localValue && localValue.trim().length > 0;
+    return hasText;
+  }, [localValue]);
+
+  // 判断是否需要显示清空按钮 (有文本或文件)
+  const showClear = useMemo(() => {
+    const hasText = localValue && localValue.trim().length > 0;
+    const hasFiles = filesToDisplay && filesToDisplay.length > 0;
+    return hasText || hasFiles;
+  }, [localValue, filesToDisplay]);
+
+  // 合并默认actions和用户配置的actions
+  const allActions = useMemo(() => {
+    const defaultActions: Action[] = showClear
+      ? [
+          {
+            icon: <X size={20} color="#4E5969" className="group-hover:text-gray-700" />,
+            name: 'clear',
+            tip: '清空输入和文件',
+          },
+        ]
+      : [];
+
+    // 使用 badgeCounts 来覆盖配置的 badgeCount
+    const configActions = (senderConfig.actions || []).map((action: any) => {
+      const mergedFromBadgeStore = badgeCounts[action.name];
+      const merged = mergedFromBadgeStore !== undefined ? mergedFromBadgeStore : action.badgeCount;
+      return {
+        ...action,
+        // 若未提供 badgeCount，则保持 undefined，用于后续条件渲染
+        badgeCount: merged,
+      };
+    });
+
+    return [...defaultActions, ...configActions] as Action[];
+  }, [showClear, senderConfig.actions, badgeCounts]);
+
+  // 从主题获取颜色
+  const colors = styles?.theme?.colors;
+  const primaryColor = colors?.primary || '#007bff';
+  const textColor = colors?.text || '#343a40';
+  const lightTextColor = colors?.background || '#ffffff';
+  const borderColor = colors?.border || '#dee2e6';
+  const backgroundColor = colors?.background || '#ffffff';
+  const placeholderColor = colors?.disabled || '#808080';
+  const disabledBgColor = colors?.disabledBackground || '#F5F5F5';
+  const errorColor = colors?.error || '#FF0000';
+  const disabledTextColor = colors?.disabledText || '#808080';
+  const recommedBtnBg = 'rgba(255, 255, 255, 0.9)';
+  const recommedBtnText = colors?.disabledText || '#808080';
+  const recommedBtnHoverBg = '#f9fafb';
+  const recommedBtnHoverText = colors?.text || '#000';
+
+  // 为发送图标激活状态添加样式
+  useEffect(() => {
+    const styleId = 'sender-icon-active-style';
+    let styleTag = document.getElementById(styleId);
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = styleId;
+      document.head.appendChild(styleTag);
+    }
+    const errorColor = colors?.error || '#d9534f';
+    styleTag.textContent = `
+      .sender-icon-active {
+        color: #ffffff !important;
+      }
+      .sender-icon-active svg {
+        color: #ffffff !important;
+      }
+      /* lucide-react 图标使用 stroke，确保激活时为白色 */
+      .sender-icon-active svg path,
+      .sender-icon-active svg circle,
+      .sender-icon-active svg line,
+      .sender-icon-active svg polyline {
+        stroke: #ffffff !important;
+        fill: none !important;
+      }
+    `;
+  }, [colors?.error]);
+
+  // 为 placeholder 动态创建样式
+  const placeholderStyleId = 'dynamic-placeholder-style';
+  useEffect(() => {
+    const styleTag = document.getElementById(placeholderStyleId) || document.createElement('style');
+    styleTag.id = placeholderStyleId;
+    styleTag.innerHTML = `
+      .dynamic-placeholder::placeholder {
+        color: ${placeholderColor};
+        opacity: 1; /* Firefox */
+      }
+      .dynamic-placeholder:-ms-input-placeholder { /* Internet Explorer 10-11 */
+        color: ${placeholderColor};
+      }
+      .dynamic-placeholder::-ms-input-placeholder { /* Microsoft Edge */
+        color: ${placeholderColor};
+      }
+      .yuanbao-select .ant-select-selection-item {
+        font-size: 12px !important;
+      }
+      .yuanbao-select .ant-select-selection-placeholder {
+        font-size: 12px !important;
+      }
+      .sender-container-gradient {
+        background: linear-gradient(135deg, #3262FA 0%, #6C18FF 100%) !important;
+      }
+      /* 文件显示区域滚动条样式 - 完全隐藏滚动条 */
+      .files-display-scroll::-webkit-scrollbar {
+        display: none; /* Chrome/Safari/Edge - 完全隐藏 */
+        width: 0;
+        height: 0;
+      }
+      .files-display-scroll {
+        -ms-overflow-style: none; /* IE/Edge - 隐藏滚动条 */
+        scrollbar-width: none; /* Firefox - 隐藏滚动条 */
+      }
+    `;
+    document.head.appendChild(styleTag);
+  }, [placeholderColor, borderColor, colors]);
+
+  return (
+    <div className="absolute w-full bottom-0 z-20 pb-[env(safe-area-inset-bottom)] bg-transparent!">
+      <div className="absolute inset-0 bg-transparent! pointer-events-none" />
+      <div className="absolute inset-0 bg-transparent!  pointer-events-none" />
+      {/* 限制内容宽度不超过 1200px 并居中，与对话款区域对齐 */}
+      <div
+        className="relative mx-auto px-8"
+        style={{ maxWidth: 1000, width: '85%', boxSizing: 'border-box' }}
+      >
+        <div className="p-3" style={{ width: '100%', boxSizing: 'border-box' }}>
+          <div className="mb-3 flex flex-wrap gap-2 animate-fade-in-up">
+            {showRecommandQuestions &&
+              parsedRecommandQuestions.map((question: any, index: number) => (
+                <button
+                  key={index}
+                  onClick={() => {
+                    eventsEmit &&
+                      eventsEmit('sender:send_recommandQuestion', {
+                        content: question,
+                        clearFn: () => {
+                          eventsEmit && eventsEmit('sender:clear');
+                        },
+                      });
+                  }}
+                  className="recommand-question-btn shadow-sm px-3 py-1.5 bg-white cursor-pointer text-xs rounded-full transition-all duration-200 ease-in-out hover:shadow-lg"
+                  style={{
+                    visibility: 'hidden',
+                    transform: 'translateY(20px)',
+                    backgroundColor: recommedBtnBg,
+                    color: disabledTextColor,
+                    border: 'none',
+                  }}
+                  onMouseEnter={e => {
+                    e.currentTarget.style.color = recommedBtnHoverText;
+                  }}
+                  onMouseOut={e => {
+                    e.currentTarget.style.color = disabledTextColor;
+                  }}
+                >
+                  {question}
+                </button>
+              ))}
+          </div>
+          <div
+            className="sender-container-gradient relative w-full rounded-[28px] transition-all duration-200"
+            style={{
+              padding: '1px',
+              background: 'transparent',
+            }}
+          >
+            <div
+              className="flex flex-col items-end w-full rounded-[28px] shadow-sm transition-all duration-200"
+              style={{
+                backgroundColor,
+                border: `0.5px solid ${borderColor}`,
+                padding: '0 16px 12px 16px',
+              }}
+            >
+              {/* 文件预览横向滚动区 - 移动到 sender 内部 */}
+              {filesToDisplay.length > 0 && (
+                <div
+                  className="files-display-wrapper w-full mb-2 overflow-x-auto"
+                  style={{
+                    maxHeight: '120px',
+                    paddingTop: '12px',
+                  }}
+                >
+                  <FilesDisplay
+                    styles={styles}
+                    uploadedFiles={filesToDisplay}
+                    onRemoveFile={onRemoveFile || (() => {})}
+                    eventsEmit={eventsEmit}
+                  />
+                </div>
+              )}
+              <textarea
+                ref={textareaRef}
+                value={localValue}
+                onChange={handleInput}
+                onPaste={handlePaste}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                rows={1}
+                placeholder="输入问题后按Enter发送,Shift+Enter进行换行"
+                className="flex-1 w-full min-w-0 py-2 resize-none outline-none border-none min-h-[85px]
+            max-h-[180px] text-[14px] leading-[24px] dynamic-placeholder"
+                style={{
+                  backgroundColor: 'transparent',
+                  color: textColor,
+                  whiteSpace: 'pre-wrap', // 确保 textarea 本身也保留换行格式
+                }}
+              />
+              <div className="flex items-center justify-between w-full ml-3 space-x-1.5 shrink-0 whitespace-nowrap">
+                <div>
+                  <div className="flex items-center gap-4">
+                    {switchList
+                      .filter((item: { enabled?: boolean }) => item.enabled !== false)
+                      .map(
+                        (item: {
+                          label: string;
+                          name: string;
+                          type: 'switch' | 'select';
+                          defaultValue?: boolean | string | number;
+                          enabled?: boolean;
+                          icon?: React.ReactNode;
+                          options?: { label: string; value: string | number }[];
+                        }) => {
+                          if (item.type === 'select') {
+                            return (
+                              <div key={item.name} className="flex items-center gap-2">
+                                <span className="text-xs" style={{ color: textColor }}>
+                                  {item.label}:
+                                </span>
+                                <YuanbaoSelect
+                                  value={configStates[item.name]}
+                                  onChange={value => {
+                                    setConfigStates(prev => ({
+                                      ...prev,
+                                      [item.name]: value,
+                                    }));
+                                  }}
+                                  options={item.options || []}
+                                  styles={styles}
+                                  disabled={!item.enabled}
+                                  placeholder={item.label}
+                                />
+                              </div>
+                            );
+                          }
+
+                          return (
+                            <YuanbaoCheckbox
+                              key={item.name}
+                              styles={styles}
+                              checked={configStates[item.name]}
+                              disabled={!item.enabled}
+                              onChange={checked => {
+                                setConfigStates(prev => ({
+                                  ...prev,
+                                  [item.name]: checked,
+                                }));
+                              }}
+                              icon={item.icon}
+                            >
+                              {item.label}
+                            </YuanbaoCheckbox>
+                          );
+                        }
+                      )}
+                  </div>
+                </div>
+                <div className="flex items-center justify-end">
+                  {/* 动态渲染actions按钮 */}
+                  {allActions
+                    .filter(action => action.enabled !== false)
+                    .map((action, idx) => {
+                      const button = (
+                        <button
+                          type="button"
+                          className="relative w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer group hover:bg-blue-50 active:bg-blue-100 transition-colors"
+                          style={{
+                            border: 'none',
+                            background: 'transparent',
+                            color: textColor,
+                            fontWeight: 500,
+                            fontSize: 15,
+                            outline: 'none',
+                            padding: 0,
+                            margin: 0,
+                            transition: 'background 0.2s',
+                          }}
+                          onClick={() => {
+                            if (action.name === 'clear') {
+                              eventsEmit && eventsEmit('sender:clear');
+                            } else {
+                              eventsEmit && eventsEmit(`sender:action_${action.name}`);
+                            }
+                          }}
+                        >
+                          {action.icon}
+                        </button>
+                      );
+
+                      const buttonWithTooltip = action.tip ? (
+                        <Tooltip
+                          title={action.tip}
+                          placement="top"
+                          styles={{
+                            body: {
+                              backgroundColor: '#4E5969',
+                              color: '#ffffff',
+                              fontSize: '12px',
+                              padding: '6px 12px',
+                              borderRadius: '6px',
+                            },
+                            root: {
+                              maxWidth: '300px',
+                            },
+                          }}
+                        >
+                          {button}
+                        </Tooltip>
+                      ) : (
+                        button
+                      );
+
+                      if (action.badgeCount === undefined) {
+                        return (
+                          <React.Fragment key={action.name || idx}>
+                            {buttonWithTooltip}
+                          </React.Fragment>
+                        );
+                      }
+
+                      return (
+                        <Badge
+                          key={(action.name || idx) + '-badge'}
+                          count={action.badgeCount}
+                          size="small"
+                          style={{
+                            backgroundColor: primaryColor,
+                            color: lightTextColor,
+                            fontWeight: 500,
+                            fontSize: 9,
+                            minWidth: 16,
+                            height: 16,
+                            lineHeight: '19px',
+                            borderRadius: 9,
+                            marginLeft: 8,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            padding: '0 5px',
+                          }}
+                          offset={[-2, 10]}
+                        >
+                          {buttonWithTooltip}
+                        </Badge>
+                      );
+                    })}
+
+                  <div className="ml-3 mr-3 h-5 w-px" style={{ backgroundColor: borderColor }} />
+
+                  {/* 状态按钮：发送/停止 */}
+                  <div
+                    className={`
+                relative w-[35px] h-8 flex items-center justify-center rounded-full group overflow-hidden shadow-sm
+                transition-all duration-200
+                ${status === 'processing' ? 'animate-pulse' : ''}
+              `}
+                    style={{
+                      cursor: status === 'processing' || canSend ? 'pointer' : 'not-allowed',
+                      background:
+                        status === 'processing'
+                          ? '#222222'
+                          : canSend
+                            ? `linear-gradient(to bottom right, ${primaryColor}, ${colors?.primary || '#0275d8'})`
+                            : disabledBgColor,
+                    }}
+                    onClick={() => {
+                      if (status === 'processing') {
+                        eventsEmit && eventsEmit('sender:stop', {});
+                      } else if (canSend) {
+                        eventsEmit && eventsEmit('sender:send');
+                      }
+                    }}
+                    title={status === 'processing' ? '停止当前对话' : '发送'}
+                  >
+                    <div
+                      className="relative flex items-center gap-x-1 font-medium"
+                      style={{
+                        color: !canSend && status !== 'processing' ? disabledTextColor : '#ffffff',
+                      }}
+                    >
+                      {status === 'processing' ? (
+                        <StopIcon size={46} color="#ffffff" circleColor="#ffffff" />
+                      ) : (
+                        <ArrowUp
+                          size={20}
+                          className={canSend ? 'sender-icon-active' : ''}
+                          style={{
+                            color: canSend ? '#ffffff' : disabledTextColor,
+                            strokeWidth: 2.5,
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* 可选：提示等 */}
+          <div className="mt-2 pt-2 pb-3 px-1 flex items-center justify-between ">
+            <span className="text-[10px]" style={{ color: placeholderColor }}>
+              {/* 支持拖拽或点击上传PDF、Word、图片等文件 */}
+            </span>
+          </div>
+        </div>
+        {disclaimer && (
+          <div className=" absolute bottom-3 left-0 right-0 w-full text-xs text-center">
+            <div className="text-xs text-center" style={{ color: disabledTextColor }}>
+              {disclaimer}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}