@mxmweb/aichat 1.1.7 → 1.1.8

package/src/adopters/gientechCommon/components/Messages/GientechNewChatWelcome.tsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Popover } from 'antd';
+import { AiChatStyles, defaultTheme } from '../../../../components/defaultStyleSet';
+import { uid } from 'uid';
+
+const createWelcomeStyles = (colors: any, classId: string) => {
+  const c = { ...defaultTheme.colors, ...colors };
+  return `
+    .g-welcome-${classId} .g-welcome-title {
+      color: ${c.primary};
+    }
+    .g-welcome-${classId} .g-welcome-subtitle {
+      color: ${c.disabled};
+    }
+    .g-welcome-${classId} .g-welcome-btn {
+      background-color: ${c.background};
+      border-color: ${c.border};
+      color: ${c.text};
+    }
+    .g-welcome-${classId} .g-welcome-btn:hover {
+      border-color: ${c.primary};
+      color: ${c.primary};
+      background-color: ${c.background};
+    }
+    .g-welcome-${classId} .g-welcome-btn.active {
+      background-color: ${c.primary};
+      border-color: ${c.primary};
+      color: #ffffff;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .g-welcome-${classId} .g-welcome-pagination-btn {
+      color: ${c.primary};
+    }
+    .g-welcome-${classId} .g-welcome-pagination-btn:disabled {
+      color: ${c.disabled};
+      cursor: not-allowed;
+    }
+    .g-welcome-${classId} .g-welcome-pagination-text {
+      color: ${c.text};
+    }
+  `;
+}
+
+function AssistantConfigCard({ config, styles }: { config: any, styles?: AiChatStyles }) {
+  if (!config) return null;
+  const parseConfig = JSON.parse(config.configJson);
+  const colors = useMemo(() => ({
+    ...defaultTheme.colors,
+    ...styles?.theme?.colors
+  }), [styles]);
+
+  return (
+    <div className="w-[340px] rounded-xl p-4 animate-fade-in bg-white">
+      {/* 标题区 */}
+      <div className="flex items-center mb-2">
+        <span className="text-md font-bold truncate mr-2" style={{ color: colors.primary }}>{parseConfig.config_name || '助手配置'}</span>
+        <span
+          className="text-xs truncate rounded px-2 py-0.5"
+          style={{
+            backgroundColor: `${colors.primary}1A`,
+            color: colors.disabled
+          }}
+        >{parseConfig.model_name}</span>
+      </div>
+      {/* 默认回复 */}
+      {/* <div className="text-xs text-gray-500 mb-2 break-all whitespace-pre-line">{parseConfig.defaultAnswer}</div> */}
+      <div className="border-b my-2" style={{ borderColor: colors.border }} />
+      {/* 基础参数 */}
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-700 mb-2" style={{ color: colors.text }}>
+        <div>最大轮次：<span className="font-semibold">{parseConfig.max_round}</span></div>
+        <div>最大Token：<span className="font-semibold">{parseConfig.max_tokens}</span></div>
+        <div>温度：<span className="font-semibold">{parseConfig.temperature}</span></div>
+        <div>Top K：<span className="font-semibold">{parseConfig.top_k}</span></div>
+        <div>Top P：<span className="font-semibold">{parseConfig.top_p}</span></div>
+        <div>分数阈值：<span className="font-semibold">{parseConfig.score_threshold}</span></div>
+      </div>
+      {/* 知识库 */}
+      <div className="mb-2">
+        <div className="text-xs text-gray-400 mb-1" style={{ color: colors.disabled }}>关联知识库：</div>
+        <div className="flex flex-wrap gap-1">
+          {parseConfig.selectedKnowledgeBase?.length > 0 ? parseConfig.selectedKnowledgeBase.map((kb: any) => (
+            <span
+              key={kb.id}
+              className="px-2 py-0.5 rounded-full text-xs"
+              style={{
+                backgroundColor: `${colors.primary}1A`,
+                color: colors.primary
+              }}
+            >{kb.name}</span>
+          )) : <span className="text-gray-300" style={{ color: colors.disabled }}>无</span>}
+        </div>
+      </div>
+      {/* 其他开关 */}
+      <div className='mb-2'>
+        <div className="text-xs text-gray-400 mb-1" style={{ color: colors.disabled }}>开启功能:</div>
+        <div className="flex flex-wrap gap-2 text-xs mt-2">
+          {parseConfig.enabled_rerank && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>重排序</span>}
+          {parseConfig.need_trace_source && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>溯源</span>}
+          {parseConfig.enabled_faq && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>FAQ</span>}
+          {parseConfig.enabled_graph && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>图谱</span>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function useTypewriter(text: string, deps: any[] = [], speed = 60) {
+  const [displayed, setDisplayed] = useState('');
+  useEffect(() => {
+    setDisplayed('');
+    if (!text) return;
+    let i = 0;
+    const timer = setInterval(() => {
+      setDisplayed(prev => {
+        if (i >= text.length) {
+          clearInterval(timer);
+          return prev;
+        }
+        i++;
+        return text.slice(0, i);
+      });
+    }, speed);
+    return () => clearInterval(timer);
+  }, [text, ...deps]);
+  return displayed;
+}
+
+export default function GientechNewChatWelcome(props: { assistantList: any[], eventsEmit?: (type: string, data?: any) => void, defaultSelect?: string, styles?: AiChatStyles }) {
+  const { assistantList, eventsEmit, defaultSelect, styles } = props;
+  const [selectedId, setSelectedId] = useState<string | undefined>(defaultSelect);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 12;
+
+  const classId = useMemo(() => uid(), []);
+
+  useEffect(() => {
+    if (styles?.theme?.colors) {
+      const styleTag = document.createElement('style');
+      styleTag.innerHTML = createWelcomeStyles(styles.theme.colors, classId);
+      styleTag.id = `g-welcome-styles-${classId}`;
+      document.head.appendChild(styleTag);
+
+      return () => {
+        const el = document.getElementById(styleTag.id);
+        if (el) {
+          el.remove();
+        }
+      };
+    }
+  }, [styles, classId]);
+
+  useEffect(() => {
+    if (defaultSelect && defaultSelect !== selectedId) {
+      setSelectedId(defaultSelect);
+    }
+  }, [defaultSelect]);
+
+  const selectAssistant = useMemo(() => {
+    return assistantList.find(assistant => assistant.id === selectedId);
+  }, [assistantList, selectedId]);
+
+  const selectAssistantConfig = useMemo(() => {
+    return JSON.parse(selectAssistant?.configJson || '{}');
+  }, [selectAssistant]);
+
+  useEffect(() => {
+    if (selectedId && eventsEmit) {
+      eventsEmit('conversation:new_assistant_change', { assistantId: selectedId });
+    }
+  }, [selectedId]);
+
+  // 分页逻辑
+  const totalPages = Math.ceil((assistantList?.length || 0) / pageSize);
+  const currentAssistants = assistantList?.slice((currentPage - 1) * pageSize, currentPage * pageSize) || [];
+
+  // 当选中助手时，自动跳转到对应页面
+  useEffect(() => {
+    if (selectedId && assistantList) {
+      const selectedIndex = assistantList.findIndex(a => a.id === selectedId);
+      if (selectedIndex !== -1) {
+        const targetPage = Math.floor(selectedIndex / pageSize) + 1;
+        setCurrentPage(targetPage);
+      }
+    }
+  }, [selectedId, assistantList, pageSize]);
+
+  const prologue = selectAssistantConfig.prologue || '您好，我是您的I助理';
+  const prologueTypewriter = useTypewriter(prologue, [selectedId], 30);
+
+  return (
+    <div className={`flex flex-col items-center justify-center h-full w-full g-welcome-${classId}`}>
+      <div className="text-2xl font-bold mb-12 min-h-[2.5em] g-welcome-title">{prologueTypewriter}</div>
+      {!selectedId && <div className="flex mb-2 g-welcome-subtitle">请选择一个智能助手</div>}
+      <div className="flex flex-wrap gap-3 px-5 justify-center mb-4">
+        {currentAssistants && currentAssistants.length > 0 ? (
+          currentAssistants.map(assistant => {
+            const isActive = selectedId === assistant.id;
+            return (
+              <Popover
+                key={assistant.id}
+                content={() => <AssistantConfigCard config={assistantList.find(item => item.id === assistant.id)} styles={styles} />}
+                trigger="hover"
+                placement="bottom"
+              >
+                <button
+                  className={`g-welcome-btn px-4 py-2 cursor-pointer rounded-md border font-medium min-w-[120px] text-sm transition-all ${isActive ? 'active' : ''}`}
+                  onClick={() => {
+                    setSelectedId(assistant.id);
+                  }}
+                  title={assistant.name}
+                >
+                  {assistant.name}
+                </button>
+              </Popover>
+            );
+          })
+        ) : (
+          <div className="g-welcome-subtitle">暂无可用助手</div>
+        )}
+      </div>
+      {/* 分页控制 */}
+      {totalPages > 1 && (
+        <div className="flex items-center gap-3 text-sm">
+          <button
+            className="g-welcome-pagination-btn px-3 py-1 rounded transition-colors"
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+          >
+            上一页
+          </button>
+          <span className="g-welcome-pagination-text">
+            {currentPage} / {totalPages}
+          </span>
+          <button
+            className="g-welcome-pagination-btn px-3 py-1 rounded transition-colors"
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+          >
+            下一页
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/adopters/gientechCommon/components/Messages/ReferenceCard.tsx

@@ -0,0 +1,302 @@
+import React, { useEffect, useMemo } from 'react';
+import { FileSpreadsheet, FileText, FileCode, File, Eye, FolderUp } from 'lucide-react';
+import { getFileTypeIcon } from '../FileManager';
+import { AiChatStyles } from '../../configs/stylesConfig';
+import { dealMinioUrl, TempBaseUrl } from '../../../../utils';
+
+interface ReferenceCardProps {
+  file_type?: string;
+  file_name?: string;
+  url?: string;
+  parse_url?: string;
+  retrieve_tags?: any[];
+  clip_from?: string;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+  styles: any;
+  onlyDownloadTypes?: string[];
+  type?: 'file' | 'image' | 'collection';
+  collectionItems?: Array<Partial<ReferenceCardProps>>;
+  [key: string]: any;
+}
+
+const ReferenceCard: React.FC<ReferenceCardProps> = (props) => {
+  const {
+    file_type,
+    file_name,
+    url,
+    parse_url,
+    retrieve_tags,
+    file_id,
+    parsed_file_type,
+    onlyDownloadTypes,
+    references,
+    eventsEmit,
+    styles,
+    isUploadFile,
+    type,
+    collectionItems,
+  } = props;
+
+  // 新增：集合类型渲染
+  if (type === 'collection' && Array.isArray(collectionItems)) {
+    // 计算宫格item尺寸：父容器与普通item一致（w-24 h-24），gap为1px
+    const gridGap = 1; // px
+    const parentSize = 94; // 24*4=96px
+    const itemSize = `calc(90% - ${gridGap / 2}px)`;
+    // 最多展示4个，超出4个第4格显示省略号
+    const previewItems = collectionItems.slice(0, 4);
+    const showEllipsis = collectionItems.length > 4;
+    // hover 盖层内容
+    const overlayText = `打开合集`;
+    const handleClick = () => {
+      eventsEmit?.('reference_file:click', props);
+    };
+    return (
+      <div
+        className="user-file relative group flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all bg-white shadow"
+        style={{ width: parentSize, height: parentSize, minWidth: parentSize, minHeight: parentSize, borderColor: styles?.theme?.colors?.border }}
+        onClick={handleClick}
+      >
+        <div className="grid grid-cols-2 items-center justify-center grid-rows-2 gap-1 w-full h-full"
+          style={{ width: '100%', height: '100%', gap: gridGap }}
+        >
+          {previewItems.map((item, idx) => {
+            if (showEllipsis && idx === 3) {
+              return (
+                <div key="ellipsis" className="flex items-center justify-center bg-gray-100 rounded" style={{ width: itemSize, height: itemSize }}>
+                  <span className="text-xl text-gray-300 font-bold scale-75">...</span>
+                </div>
+              );
+            }
+            const isImage =
+              item.file_type === 'image' ||
+              item.file_type === 'jpg' ||
+              item.file_type === 'jpeg' ||
+              item.file_type === 'png' ||
+              item.file_type === 'gif' ||
+              item.file_type === 'bmp' ||
+              item.file_type === 'webp';
+            if (isImage) {
+              return (
+                <div
+                  key={item.file_name || idx}
+                  className="relative flex items-center justify-center bg-white rounded-lg border overflow-hidden"
+                  style={{ width: itemSize, height: itemSize, borderColor: styles?.theme?.colors?.border }}
+                >
+                  <div className="flex items-center justify-center w-full h-full scale-75">
+                    <img
+                      src={String(item.url || item.file_path || '')}
+                      alt={item.file_name || ''}
+                      className="object-contain max-w-full max-h-full"
+                    />
+                  </div>
+                </div>
+              );
+            }
+            const icon = getFileTypeIcon(String(item.file_type || ''), styles);
+            return (
+              <div
+                key={item.file_name || idx}
+                className="user-file flex flex-col items-center justify-center rounded-lg border bg-gray-50 p-1 text-sm"
+                title={item.file_name}
+                style={{ width: itemSize, height: itemSize, borderColor: styles?.theme?.colors?.border }}
+              >
+                <div className="flex items-center justify-center w-full h-full scale-75">
+                  {icon}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {/* 整体hover盖层 */}
+        <div className="absolute inset-0 bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg pointer-events-none">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp size={20} className="mb-1 text-white" />
+            <span className="text-white text-center" style={{ fontSize: 12 }}>{overlayText}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // const icon = fileTypeIcons[file_type?.toLowerCase()] || fileTypeIcons.default;
+
+  // 文档引用点击
+  const handleReferenceClick = () => {
+    eventsEmit?.('reference_file:click', {
+      file: file_name,
+      file_type,
+      url,
+      parse_url,
+      retrieve_tags,
+      file_id,
+      parsed_file_type,
+      references,
+      type: fileType,
+      isUploadFile: isUploadFile,
+    });
+  };
+  const fileType = useMemo(() => {
+    return (file_name || '').split('.').pop() || '';
+  }, [file_name]);
+  //console.log('fileType123123123123123123',fileType)
+  const icon = getFileTypeIcon(fileType, styles);
+  // 召回标签点击
+  // const handleRetriveTagClick = (tag: any) => {
+  //   eventsEmit?.('retrive_tag:click', { file: file_name, tag });
+  // };
+
+  const downloadFile = async () => {
+    if (url) {
+      const _url: any = dealMinioUrl(url.indexOf('http') > -1 ? url : `${TempBaseUrl}/${url}`);
+      const fileExt = fileType.toLowerCase();
+      if (fileExt === 'json') {
+        try {
+          const response = await fetch(_url);
+          if (!response.ok) throw new Error('下载失败');
+          const blob = await response.blob();
+          const link = document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.download = file_name || '';
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+        } catch (e) {
+          alert('文件下载失败');
+        }
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = _url;
+      link.download = file_name || '';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  };
+
+  // 只支持下载的文件类型
+  //const onlyDownloadTypes = onlyDownloadTypes ||  ['xlsx', 'csv', 'xls', 'ppt', 'pptx', 'pub', 'json', 'doc', 'docx'];
+  if (onlyDownloadTypes && onlyDownloadTypes.includes(fileType.toLowerCase())) {
+    return (
+      <div
+        key={file_name}
+        className="user-file relative group w-24 h-24 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all"
+        title={file_name}
+        onClick={downloadFile}
+        style={{ borderColor: styles?.theme?.colors?.border }}
+      >
+        {icon}
+        <span
+          className="file-name font-medium truncate text-center px-2 pt-1"
+          style={{ fontSize: 10, maxWidth: '5.5rem' }}
+        >
+          {file_name}
+        </span>
+        <div className="absolute text-center inset-0 cursor-pointer bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center" style={{ fontSize: 10 }}>
+              下载文件
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (
+    fileType === 'image' ||
+    fileType === 'jpg' ||
+    fileType === 'jpeg' ||
+    fileType === 'png' ||
+    fileType === 'gif' ||
+    fileType === 'bmp' ||
+    fileType === 'webp'
+  ) {
+    return (
+      <div
+        key={file_name}
+        className="relative group w-24 h-24 cursor-pointer flex items-center justify-center"
+        onClick={() => handleReferenceClick()}
+      >
+        {url ? (
+          <img
+            src={String(dealMinioUrl(url && url.indexOf('http') > -1 ? url : `${TempBaseUrl}/${url}`) || '')}
+            alt={file_name || ''}
+            className="w-full h-full object-cover rounded-md border"
+            style={{ borderColor: styles?.theme?.colors?.border }}
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <span className="animate-spin rounded-full border-2 border-gray-300 border-t-blue-500 w-8 h-8 inline-block"></span>
+          </div>
+        )}
+        <div className="absolute inset-0 bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-md">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <Eye className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center">查看图片</div>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div
+        key={file_name}
+        className="user-file relative group w-24 h-24 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all"
+        title={file_name}
+        onClick={handleReferenceClick}
+        style={{ borderColor: styles?.theme?.colors?.border }}
+      >
+        {icon}
+        <span
+          className="file-name font-medium truncate text-center px-2 pt-1"
+          style={{ fontSize: 10, maxWidth: '5.5rem' }}
+        >
+          {file_name}
+        </span>
+        <div className="absolute text-center inset-0 cursor-pointer bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg">
+          <div className="flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
+            <FolderUp className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+            <div className="text-white text-center" style={{ fontSize: 10 }}>
+              打开文件
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  //return (
+  // <div
+  //   className="flex items-center bg-white rounded-lg shadow-sm border border-gray-100 px-3 py-2 mb-2 min-w-[220px] max-w-[340px] hover:shadow-md hover:border-blue-200 transition cursor-pointer group"
+  //   style={{ gap: 12 }}
+  //   onClick={handleReferenceClick}
+  // >
+  //   <div className="flex-shrink-0">{icon}</div>
+  //   <div className="flex-1 min-w-0">
+  //     <div
+  //       className="font-medium text-[13px] text-gray-900 truncate group-hover:text-blue-600"
+  //       title={file_name}
+  //     >
+  //       {file_name}
+  //     </div>
+  //   </div>
+  //   {/* {parse_url && (
+  //     <a
+  //       href={parse_url}
+  //       target="_blank"
+  //       rel="noopener noreferrer"
+  //       className="ml-3 px-2 py-0.5 text-xs rounded border border-blue-100 bg-blue-50 text-blue-600 hover:bg-blue-100 hover:border-blue-300 transition"
+  //       onClick={e => { e.stopPropagation(); handleReferenceClick(); }}
+  //     >
+  //       下载
+  //     </a>
+  //   )} */}
+  // </div>
+
+  //);
+};
+
+export default ReferenceCard;