@gientech/modual 1.3.2 → 1.3.3

package/src/utils/gientechCommon/components/FileManager/index.tsx

@@ -0,0 +1,390 @@
+import { Modal,  Button,  Upload, Popconfirm } from "antd";
+import { FileText,  FileImage, FileSpreadsheet, File, Plus, X } from 'lucide-react';
+import { Icon } from '@mxmweb/zui';
+import { useEffect, useState } from "react";
+import './style.css';
+import { type Styles } from '@mxmweb/zui';
+import ReferenceCard from '../Messages/ReferenceCard';
+type ThemeColors = any;
+import { getTypeByName } from "../../../../utils";
+import FileCardCommon from "../FileCardCommon";
+
+// 文件类型icon获取函数，优先用用户传入styles.theme.icons
+export function getFileTypeIcon(type: string, styles?: any) {
+  const icons = styles?.theme?.icons || {};
+  //console.log('type``````````', type,icons)
+  switch (type.toLowerCase()) {
+    case 'docx':
+    case 'doc':
+      return icons.docx ? (
+        <img src={icons.docx} alt="docx" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/word' size={18} />
+      );
+    case 'image':
+    case 'jpg':
+    case 'jpeg':
+    case 'png':
+    case 'gif':
+    case 'bmp':
+    case 'webp':
+    case 'svg':
+    case 'ico':
+      return icons.image ? (
+        <img src={icons.image} alt="image" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/pic' size={18} />
+      );
+    case 'pptx':
+    case 'ppt':
+      return icons.pptx ? (
+        <img src={icons.pptx} alt="pptx" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/ppt' size={18} />
+      );
+    case 'sheets':
+    case 'excel':
+    case 'xls':
+    case 'csv':
+    case 'xlsx':
+    case 'xlsm':
+    case 'xlsb':
+    case 'xltx':
+    case 'xltm':
+    case 'xlt':
+    case 'xlam':
+      return icons.sheets ? (
+        <img src={icons.sheets} alt="sheets" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/excel' size={18} />
+      );
+    case 'pdf':
+      return icons.pdf ? (
+        <img src={icons.pdf} alt="pdf" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/pdf' size={18} />
+      );
+    case 'txt':
+      return icons.txt ? (
+        <img src={icons.txt} alt="txt" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/txt' size={18} />
+      );
+    case 'md':
+      return icons.md ? (
+        <img src={icons.md} alt="txt" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/document' size={18} />
+      );
+    case 'json':
+      return icons.json ? (
+        <img src={icons.json} alt="json" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/json' size={18} />
+      );
+    case 'html':
+    case 'htm':
+      return icons.html ? (
+        <img src={icons.html} alt="html" style={{ width: 20, height: 20 }} />
+      ) : (
+        <Icon type='rag/url' size={18} />
+      );
+    case 'xml':
+    default:
+      return <Icon type='rag/file' size={18} />;
+  }
+}
+interface FileItem {
+  file: File;
+  preview?: string;
+  type: string;
+  status?: 'pending' | 'uploading' | 'uploaded' | 'error';
+  url?: string;
+  error?: string;
+}
+
+// Mock数据
+const mockFiles: FileItem[] = [
+  {
+    file: {
+      name: '产品需求文档.pdf',
+      size: 1024 * 1024 * 2.5, // 2.5MB
+      type: 'application/pdf',
+    } as File,
+    type: 'pdf',
+    status: 'uploaded',
+    url: 'https://example.com/file1.pdf',
+  },
+  {
+    file: {
+      name: '数据分析报告.xlsx',
+      size: 1024 * 1024 * 1.2, // 1.2MB
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    } as File,
+    type: 'excel',
+    status: 'uploaded',
+    url: 'https://example.com/file3.xlsx',
+  },
+  {
+    file: {
+      name: '系统架构图.png',
+      size: 1024 * 512, // 512KB
+      type: 'image/png',
+    } as File,
+    type: 'image',
+    status: 'uploaded',
+    url: 'https://example.com/file2.png',
+  },
+];
+
+const formatFileSize = (bytes: number) => {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+};
+
+export default function FileManager({
+  open,
+  onCancel,
+  files = mockFiles,
+  currentFiles = [],
+  onUpload,
+  onRemoveFile,
+  styles,
+  eventsEmit
+}: {
+  open: boolean;
+  onCancel: () => void;
+  files: FileItem[];
+  styles: Styles;
+  currentFiles: FileItem[];
+  onUpload?: (files: FileList) => void;
+  onRemoveFile?: (file: FileItem, idx: number, type: 'uploaded' | 'pending') => void;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+}) {
+
+
+  // 状态映射
+  const statusMap = {
+    pending: '待上传',
+    uploading: '上传中',
+    uploaded: '已上传',
+    analyzing: '解析中',
+    analyze_failed: '解析失败',
+    error: '失败',
+  };
+
+  // 选中状态
+  const [selectedFiles, setSelectedFiles] = useState<number[]>([]);
+
+  const handleSelect = (idx: number) => {
+    setSelectedFiles(prev => prev.includes(idx) ? prev.filter(i => i !== idx) : [...prev, idx]);
+  };
+
+  // 已上传文件删除事件抛出
+  const handleRemove = (file: FileItem, idx: number) => {
+    eventsEmit && eventsEmit('uploaded_file:removeFromTemp', { file, idx });
+  };
+
+
+  // 主题色，提前定义，避免未初始化访问
+  const themeColors: ThemeColors = (styles && styles.theme && styles.theme.colors) ? styles.theme.colors : {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+    shadow: '#000000',
+    appBackground: '#fff',
+  };
+
+  // 拆分文件
+  const uploadedFileCards = files.map((f:any, idx) => {
+   //  console.log(f,'fffffffff')
+    return  (
+    <div key={f.file.name + idx} className="relative flex flex-col gap-2.5 items-center justify-center">
+      <div className="absolute right-1 top-1 z-10">
+        <Popconfirm
+          title="确认从临时对话知识库移除该文件？"
+          onConfirm={() => handleRemove(f, idx)}
+          okText="确认"
+          cancelText="取消"
+        >
+          <button
+            className="bg-white cursor-pointer rounded-full p-0.5"
+            style={{
+              lineHeight: 0,
+              color: themeColors && themeColors.text ? themeColors.text : '#FF0000',
+              transition: 'background 0.2s, color 0.2s',
+            }}
+            onMouseOver={e => {
+              (e.currentTarget as HTMLElement).style.color = themeColors && themeColors.error ? themeColors.error : '#FF0000';
+            }}
+            onMouseOut={e => {
+              (e.currentTarget as HTMLElement).style.color = themeColors.text!;
+            }}
+            title="移除"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </Popconfirm>
+      </div>
+      <ReferenceCard
+        file_type={getTypeByName(f.file.name||f.name)}
+        file_name={f.name || f.file.name}
+        url={f.url}
+        retrieve_tags={[]}
+        styles={styles}
+        isUploadFile={true}
+        eventsEmit={eventsEmit}
+        parse_url={f.convertedFilePath}
+        pdfPages={f.pdfPages || 0}
+      />
+    </div>
+  )});
+  const pendingFileCards = currentFiles.map((f, idx) => {
+    const fileType = f.file.name.split('.').pop() || '';
+    const icon = getFileTypeIcon(fileType, styles);
+    return (
+      <FileCardCommon
+        key={f.file.name + idx}
+        cardId={`pending-file-card-${idx}`}
+        fileName={f.file.name}
+        fileSize={f.file.size}
+        icon={icon}
+        statusText={statusMap[f.status || 'pending']}
+        statusColor="text-gray-400"
+        showRemove={true}
+        onRemove={() => onRemoveFile && onRemoveFile(f, idx, 'pending')}
+        themeColors={themeColors}
+        style={{ boxShadow: 'none', height: 55, background: '#f8fafc' }}
+      />
+    );
+  });
+
+  // 多选删除
+  const handleBatchRemove = () => {
+    if (eventsEmit) {
+      const filesToRemove = selectedFiles.map(idx => ({ file: files[idx], idx })).filter(f => f.file);
+      eventsEmit('uploaded_file:remove_batch', filesToRemove);
+    }
+    setSelectedFiles([]);
+  };
+
+  // 主题色
+  const batchDeleteBtnStyle = selectedFiles.length > 0
+    ? {
+        borderColor: themeColors && themeColors.error ? themeColors.error : '#FF0000',
+        background: themeColors && themeColors.error ? themeColors.error + '22' : '#FF000022',
+        color: themeColors && themeColors.error ? themeColors.error : '#FF0000',
+      }
+    : {
+        borderColor: themeColors && themeColors.disabledText ? themeColors.disabledText : '#808080',
+        background: themeColors && themeColors.disabledBackground ? themeColors.disabledBackground : '#F5F5F5',
+        color: themeColors && themeColors.disabledText ? themeColors.disabledText : '#808080',
+        cursor: 'not-allowed',
+      };
+
+      //console.log(files,'weljkfewoifho23hf8h3289fh8923hf982h389fh2389fh8923h89')
+  return (
+    <Modal
+      open={open}
+      onCancel={onCancel}
+      footer={null}
+      title={'对话临时文件知识库'}
+      closable={false}
+      width={800}
+      styles={{
+        body: {
+          padding: '0',
+          maxHeight: '70vh',
+          overflow: 'auto',
+        },
+      }}
+    >
+      <div className="file-manager-modal space-y-6 px-4 py-4">
+        {/* 已上传文件区域 */}
+        <div className="">
+          <div className="flex items-center mb-2 justify-between">
+            <div className="flex items-center">
+              <span className="text-xs font-semibold text-gray-700">已上传文件</span>
+              <span className="ml-2 text-xs text-gray-400">{files.length} 个</span>
+            </div>
+            {/* <button
+              className="ml-4 px-2 cursor-pointer py-1 text-xs rounded border"
+              disabled={selectedFiles.length === 0}
+              onClick={handleBatchRemove}
+              style={batchDeleteBtnStyle}
+            >
+              删除知识文档
+            </button> */}
+          </div>
+          <div
+            className="w-full relative min-h-[200px] max-h-[260px] p-2 overflow-y-auto"
+            style={{ overflowX: 'hidden' }}
+          >
+            <div className="flex flex-wrap gap-1">
+              {uploadedFileCards.length > 0 ? (
+                uploadedFileCards
+              ) : (
+                <div className="flex items-center w-full h-full py-10 justify-center text-gray-400 text-sm">
+                  暂无已上传文件
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {/* 待上传文件区域 */}
+        <div>
+          <div className="flex items-center mb-2">
+            <span className="text-xs font-semibold text-gray-700">待上传文件</span>
+            <span className="ml-2 text-xs text-gray-400">{currentFiles.length} 个</span>
+          </div>
+          <div className="flex gap-2 overflow-x-auto pb-2">
+            {pendingFileCards}
+            {/* 上传卡片 */}
+            <Upload.Dragger
+              multiple
+              showUploadList={false}
+              beforeUpload={(file, fileList) => {
+                if (file === fileList[0]) {
+                  onUpload?.(fileList as unknown as FileList);
+                }
+                return false;
+              }}
+              className="!bg-gray-50 !border-dashed !border-gray-300 hover:!border-blue-400 cursor-pointer min-w-[160px] max-w-[220px] flex flex-row items-center justify-center border-2 rounded-lg transition-all"
+              style={{ height: 45, boxShadow: 'none', padding: 0 }}
+            >
+              <div className="flex flex-row items-center pb-8 justify-center">
+                <Plus size={20} className="text-blue-400 mr-2" />
+                <div className="text-xs text-gray-500">上传文件</div>
+              </div>
+            </Upload.Dragger>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button type="primary" onClick={onCancel}>
+            确认
+          </Button>
+          {/* <Button onClick={onCancel}>取消</Button> */}
+        </div>
+      </div>
+      <style>{`
+        .file-manager-modal .ant-upload-wrapper,
+        .file-manager-modal .ant-upload-drag,
+        .file-manager-modal .ant-upload-drag-container {
+          min-height: 55px !important;
+          height: 55px !important;
+          padding: 0 !important;
+        }
+      `}</style>
+    </Modal>
+  );
+}

package/src/utils/gientechCommon/components/FileManager/style.css

@@ -0,0 +1,5 @@
+.ant-upload-drag-container {
+  height: 45px !important;
+  min-height: 45px !important;
+  padding: 0 !important;
+}

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

@@ -0,0 +1,296 @@
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { Popover } from 'antd';
+import { type Styles, defaultTheme } from '@mxmweb/zui';
+import { uid } from 'uid';
+import defaultWeLogo from './defaultWeLogo.svg';
+import defaultBot from './defaultBot.png';
+
+const createWelcomeStyles = (colors: any, classId: string) => {
+  const c = { ...defaultTheme.colors, ...colors };
+  return `
+    .g-welcome-${classId} .g-welcome-title {
+      background-image: linear-gradient(90deg, #3262FA 0%, #6C18FF 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+    }
+    .g-welcome-${classId} .g-welcome-subtitle {
+      color: ${c.disabled};
+    }
+    .g-welcome-${classId} .g-welcome-btn {
+      background-color: #ffffff;
+      border-color: ${c.border};
+      color: ${c.text};
+      height: 36px;
+      border-width: 1px;
+      box-shadow: 0 1px 2px rgba(31,35,41,0.04);
+    }
+    .g-welcome-${classId} .g-welcome-btn:hover {
+      border-color: ${c.primary};
+      color: ${c.primary};
+      background-color: #ffffff;
+      box-shadow: 0 2px 6px rgba(31,35,41,0.08);
+    }
+    .g-welcome-${classId} .g-welcome-btn.active {
+      background-image: linear-gradient(90deg, #F1F8FF 0%, #F9F4FF 100%);
+      border-color: ${c.primary};
+      box-shadow: 0 4px 10px rgba(24, 144, 255, 0.25);
+    }
+    .g-welcome-${classId} .g-welcome-btn .icon-badge {
+      width: 24px;
+      height: 24px;
+      border-radius: 9999px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: radial-gradient(100% 100% at 50% 0%, #F2F3F5 0%, #FFFFFF 100%);
+      box-shadow: inset 0 0 0 1px ${c.border};
+    }
+    .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?: Styles }) {
+  if (!config) return null;
+  const parseConfig = JSON.parse(config.configJson);
+  //console.log('parseConfig',parseConfig);
+
+  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>最大令牌数：<span className="font-semibold">{parseConfig.max_tokens}</span></div>
+        <div>温度：<span className="font-semibold">{parseConfig.temperature}</span></div>
+        <div>召回数：<span className="font-semibold">{parseConfig.top_k}</span></div>
+        <div>多样性：<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.knowledge_base_name ? parseConfig.knowledge_base_name.split(';').map((kb: any,index:number) => (
+            <span
+              key={index}
+              className="px-2 py-0.5 rounded-full text-xs"
+              style={{
+                backgroundColor: `${colors.primary}1A`,
+                color: colors.primary
+              }}
+            >{kb}</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_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>}
+          {!!parseConfig.dependOnKb && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>强知识依赖</span>}
+          {!!parseConfig.enabled_table_select && <span className="px-2 py-0.5 rounded" style={{ backgroundColor: `${colors.success}1A`, color: colors.success }}>表格筛选</span>}
+          {!!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.is_download && <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;
+}
+
+// 添加类型定义，支持 selectedId 和 onSelectAssistant
+interface GientechNewChatWelcomeProps {
+  assistantList: any[];
+  eventsEmit?: (type: string, data?: any) => void;
+  styles?: Styles;
+  selectedId?: string;
+  onSelectAssistant?: (id: string) => void;
+  productLogo?: string; // 外部传入的产品logo
+}
+
+function GientechNewChatWelcome(props: GientechNewChatWelcomeProps) {
+  const { assistantList, eventsEmit, styles, selectedId, onSelectAssistant, productLogo } = props;
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 12;
+
+  // 只在 selectedId 变化时触发事件，且去重
+  const prevSelectedId = useRef<string | undefined>();
+  useEffect(() => {
+    if (selectedId && prevSelectedId.current !== selectedId) {
+      eventsEmit?.('conversation:new_assistant_change', { assistantId: selectedId });
+      prevSelectedId.current = selectedId;
+    }
+  }, [selectedId, eventsEmit]);
+
+  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]);
+
+  const selectAssistant = useMemo(() => {
+    return assistantList.find(assistant => assistant.id === selectedId);
+  }, [assistantList, selectedId]);
+
+  const selectAssistantConfig = useMemo(() => {
+    return JSON.parse(selectAssistant?.configJson || '{}');
+  }, [selectAssistant]);
+
+  // 分页逻辑
+  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 || '您好，欢迎使用小鲸智能问答';
+  const prologueTypewriter = useTypewriter(prologue, [selectedId], 30);
+
+  return (
+    <div className={`flex flex-col items-center justify-center h-full w-full g-welcome-${classId}`}>
+      {/* 产品Logo */}
+      <img
+        src={productLogo || (defaultWeLogo as unknown as string)}
+        alt="logo"
+        className="mb-4"
+        style={{ width: 100, height: 100 }}
+      />
+      <div className="text-3xl font-bold mb-2 g-welcome-title">{prologueTypewriter}</div>
+      <div className="text-sm text-gray-500 mb-20">请选择一个智能助手，开始你的智能问答之旅</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;
+            // 图标解析：优先 assistant.icon，其次配置中的 icon/avatar/logo，最后使用默认
+            let iconSrc: string | undefined = assistant.icon;
+            try {
+              const cfg = JSON.parse(assistant.configJson || '{}');
+              iconSrc = iconSrc || cfg.icon || cfg.avatar || cfg.logo;
+            } catch (e) {
+              // ignore json parse error
+            }
+            iconSrc = iconSrc || (defaultBot as unknown as string);
+            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-3 cursor-pointer rounded-full border font-medium min-w-[160px] text-sm transition-all flex items-center gap-2 ${isActive ? 'active' : ''}`}
+                  onClick={() => onSelectAssistant?.(assistant.id)}
+                  title={assistant.name}
+                >
+                  <span className="icon-badge">
+                    <img src={iconSrc} alt="icon" style={{ width: 16, height: 16, borderRadius: 4 }} />
+                  </span>
+                  <span className="truncate max-w-[180px]">{assistant.name}</span>
+                </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>
+  );
+}
+
+// 只在assistantList、defaultSelect、styles变化时才重渲染
+export default GientechNewChatWelcome;