@mxmweb/aichat 1.1.1 → 1.1.8

package/src/components/Sender/index.tsx

@@ -0,0 +1,545 @@
+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

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