@mxmweb/aichat 1.1.8 → 1.2.0

package/src/components/Sender/index.tsx

@@ -1,545 +0,0 @@
-import React, { useRef, useEffect, useState, useMemo } from 'react';
-import { Brain, Search, Send, StopCircle, X, Folder } from 'lucide-react';
-import anime from 'animejs';
-import { useBadge } from './contexts/BadgeContext';
-
-import FileUpload from './FileUpload';
-import FilesDisplay from './FilesDisplay';
-import FileManager from '../../adopters/gientechCommon/components/FileManager';
-
-import { message } from 'antd';
-import { Checkbox as AntdCheckbox } from 'antd';
-import { AiChatStyles } from '../defaultStyleSet';
-import { Tag, Badge } from 'antd';
-import { SenderConfig } from '../AiChat';
-
-interface Action {
-  icon: React.ReactNode;
-  name: string;
-  tip?: string;
-  badgeCount?: number;
-}
-
-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: AiChatStyles;
-  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;
-}
-
-interface YuanbaoCheckboxProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-  icon?: React.ReactNode;
-  children: React.ReactNode;
-  styles?: AiChatStyles;
-  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';
-
-  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 ? primary : 'transparent',
-        color: disabled ? disabledText : checked ? lightText : text,
-        borderColor: disabled ? disabledBorder : checked ? primary : borderColor,
-      }}
-    >
-      {icon}
-      <span>{children}</span>
-    </button>
-  );
-}
-
-export default function Sender({
-  value: propValue,
-  eventsEmit,
-  styles,
-  status,
-  onUpload,
-  onVoice,
-  uploadedFiles,
-  onRemoveFile,
-  senderConfig = {},
-  recommandQuestions = [],
-  fileUploadStatus = [],
-}: Partial<SenderProps> & { senderConfig?: SenderConfig } = {}) {
-  const { badgeCounts } = useBadge();
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  // 受控checkbox状态
-  const switchList = senderConfig.switchs || [];
-  const [checkboxStates, setCheckboxStates] = useState(() => {
-    const state: Record<string, boolean> = {};
-    switchList.forEach((item: { name: string; type: string; defaultValue?: boolean }) => {
-      if (item.type === 'checkbox') {
-        state[item.name] = item.defaultValue ?? false;
-      }
-    });
-    return state;
-  });
-
-  // 新增：本地受控 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 handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      console.log('enter');
-      e.preventDefault();
-      eventsEmit && eventsEmit('sender:send');
-    }
-  };
-
-  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 className="w-[18px] h-[18px] text-gray-500 group-hover:text-gray-700" />,
-            name: 'clear',
-            tip: '清空输入和文件',
-          },
-        ]
-      : [];
-
-    // 使用 badgeCounts 来覆盖配置的 badgeCount
-    const configActions = (senderConfig.actions || []).map(action => ({
-      ...action,
-      badgeCount: badgeCounts[action.name] ?? action.badgeCount ?? 0,
-    }));
-
-    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';
-
-  // 为 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};
-      }
-    `;
-    document.head.appendChild(styleTag);
-  }, [placeholderColor]);
-
-  return (
-    <div className=" absolute  left-0 bottom-0 w-[90%] z-10 mx-[6.5%] px-5 bg-transparent!">
-      <div className="absolute inset-0 bg-transparent! pointer-events-none" />
-      <div className="absolute inset-0 bg-transparent! backdrop-blur-[1px] pointer-events-none" />
-      <div className="relative max-w-[1000px] mx-auto p-3">
-        <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>
-        {/* 文件预览横向滚动区 */}
-        {filesToDisplay.length > 0 && (
-          <FilesDisplay
-            styles={styles}
-            uploadedFiles={filesToDisplay}
-            onRemoveFile={onRemoveFile || (() => {})}
-            eventsEmit={eventsEmit}
-          />
-        )}
-        <div
-          className="flex items-end w-full rounded-2xl shadow-sm"
-          style={{
-            backgroundColor,
-            border: `1px solid ${borderColor}`,
-            padding: '0 12px 8px 12px',
-          }}
-        >
-          <textarea
-            ref={textareaRef}
-            value={localValue}
-            onChange={handleInput}
-            onKeyDown={handleKeyDown}
-            rows={1}
-            placeholder="我可以阅读知识库的资料并使用自然语言回答你的问题..."
-            className="flex-1 py-2 resize-none outline-none border-none min-h-[85px]
-            max-h-[180px] text-[14px] dynamic-placeholder"
-            style={{
-              backgroundColor: 'transparent',
-              color: textColor,
-            }}
-          />
-          <div className="flex items-center ml-2 space-x-1.5">
-            {/* 动态渲染actions按钮 */}
-            {allActions.map((action, idx) => (
-              <Badge
-                key={action.name || idx}
-                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]}
-                showZero
-              >
-                <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',
-                  }}
-                  title={action.tip || action.name}
-                  onClick={() => {
-                    if (action.name === 'clear') {
-                      eventsEmit && eventsEmit('sender:clear');
-                    } else {
-                      eventsEmit && eventsEmit(`sender:action_${action.name}`);
-                    }
-                  }}
-                >
-                  {action.icon}
-                </button>
-              </Badge>
-            ))}
-
-            <div className="ml-3 mr-3 h-5 w-px" style={{ backgroundColor: borderColor }} />
-
-            {/* 状态按钮：发送/停止 */}
-            <div
-              className={`
-                relative w-[85px] h-8 flex items-center justify-center rounded-lg group overflow-hidden shadow-sm
-                transition-all duration-200
-                ${status === 'processing' ? 'animate-pulse' : ''}
-              `}
-              style={{
-                cursor: status === 'processing' || canSend ? 'pointer' : 'not-allowed',
-                background:
-                  status === 'processing'
-                    ? `linear-gradient(to bottom right, ${errorColor}, ${colors?.error || '#d9534f'})`
-                    : 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 : lightTextColor,
-                }}
-              >
-                {status === 'processing' ? (
-                  <>
-                    <StopCircle className="w-[18px] h-[18px]" />
-                    <span className="ml-1 text-[13px]">停止</span>
-                  </>
-                ) : (
-                  <>
-                    <Send size={12} />
-                    <span className="ml-1 text-[13px]">发送</span>
-                  </>
-                )}
-              </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 className="flex items-center gap-4">
-            {switchList
-              .filter((item: { enabled?: boolean }) => item.enabled !== false)
-              .map(
-                (item: {
-                  label: string;
-                  name: string;
-                  type: string;
-                  defaultValue?: boolean;
-                  enabled?: boolean;
-                  icon?: React.ReactNode;
-                }) => (
-                  <YuanbaoCheckbox
-                    key={item.name}
-                    styles={styles}
-                    checked={checkboxStates[item.name]}
-                    disabled={!item.enabled}
-                    onChange={checked => {
-                      setCheckboxStates(prev => {
-                        const newState = { ...prev, [item.name]: checked };
-                        eventsEmit &&
-                          eventsEmit('sender:configChange', {
-                            name: item.name,
-                            checked,
-                            all: newState,
-                          });
-                        return newState;
-                      });
-                    }}
-                    icon={item.icon}
-                  >
-                    {item.label}
-                  </YuanbaoCheckbox>
-                )
-              )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/Sidebar/RetriveConfigPanel.tsx

@@ -1,41 +0,0 @@
-import { Form } from 'antd';
-import { useDynamicFormItems } from './useDynamicFormItems';
-import type { FormItemProps } from '../AiChat.types';
-import React, { useEffect } from 'react';
-
-interface RetriveConfigPanelProps {
-  config?: FormItemProps[];
-  styles?: any;
-  formName: string;
-  onChange?: (formName: string, values: any) => void;
-  initialValues?: any;
-}
-
-export default function RetriveConfigPanel(props: RetriveConfigPanelProps) {
-  const { config = [], styles, formName, onChange, initialValues } = props;
-  const formItems = useDynamicFormItems(config, styles);
-  const [form] = Form.useForm();
-
-  useEffect(() => {
-    if (onChange) {
-      onChange(formName, form.getFieldsValue());
-    }
-    // eslint-disable-next-line
-  }, []);
-
-  return (
-    <div className="px-4 py-2">
-      <h1>RetriveConfigPanel</h1>
-      <Form
-        form={form}
-        layout="vertical"
-        size={styles?.formSize || 'middle'}
-        onValuesChange={(_, values) => onChange?.(formName, values)}
-        initialValues={initialValues}
-        requiredMark={false}
-      >
-        {formItems}
-      </Form>
-    </div>
-  );
-}