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

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

@@ -1,850 +0,0 @@
-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>
-  );
-}