@gientech/modual 2.0.9 → 2.0.11

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

@@ -1,581 +0,0 @@
-import { useEffect, useMemo, useState, useRef } from 'react';
-import { Popover, Input } from 'antd';
-import { Search, X, ChevronLeft, ChevronRight } from 'lucide-react';
-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 {
-      background: transparent;
-      border: none;
-      color: ${c.disabled};
-      padding: 6px 10px;
-      border-radius: 9999px;
-      transition: all 0.2s;
-      font-size: 14px;
-      line-height: 1;
-      min-width: 32px;
-      height: 32px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-btn:hover:not(:disabled) {
-      color: ${c.text};
-      background-color: ${c.border}33;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-btn.active {
-      color: ${c.primary};
-      background: radial-gradient(100% 100% at 50% 50%, ${c.primary}10 0%, ${c.primary}08 100%);
-      box-shadow: 0 2px 10px ${c.primary}12, inset 0 0 0 1px ${c.primary}1A;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-btn:disabled {
-      color: ${c.disabled};
-      cursor: not-allowed;
-      background: transparent;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-text {
-      color: ${c.disabled};
-      font-size: 14px;
-      padding: 0 8px;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: ${c.border};
-      transition: all 0.2s;
-    }
-    .g-welcome-${classId} .g-welcome-pagination-dot.active {
-      background-color: ${c.primary};
-      width: 20px;
-      border-radius: 3px;
-    }
-    .g-welcome-${classId} .g-welcome-search-btn {
-      background-color: #ffffff;
-      border: 1px solid ${c.border};
-      color: ${c.text};
-      padding: 8px 8px;
-      border-radius: 100%;
-      cursor: pointer;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 14px;
-      box-shadow: 0 1px 2px rgba(31,35,41,0.04);
-    }
-    .g-welcome-${classId} .g-welcome-search-btn:hover {
-      border-color: ${c.primary};
-      color: ${c.primary};
-      box-shadow: 0 2px 6px rgba(31,35,41,0.08);
-    }
-    .g-welcome-${classId} .g-welcome-search-input {
-      border: 1px solid ${c.border};
-      border-radius: 9999px;
-      transition: all 0.2s;
-      height: 40px;
-      padding: 0 14px;
-    }
-    .g-welcome-${classId} .g-welcome-search-input:focus,
-    .g-welcome-${classId} .g-welcome-search-input:hover {
-      border-color: ${c.primary};
-      box-shadow: 0 0 0 2px ${c.primary}1A;
-    }
-  `;
-}
-
-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 [searchVisible, setSearchVisible] = useState(false);
-  const [searchKeyword, setSearchKeyword] = useState('');
-  // 搜索框打开时每页显示6个，否则显示12个
-  const pageSize = (searchVisible || searchKeyword.trim()) ? 6 : 12;
-
-  // 只在 selectedId 变化时触发事件，且去重
-  const prevSelectedId = useRef<string | undefined>();
-  // 标记是否是选择助手导致的搜索关键词清空
-  const isClearingSearchForSelection = useRef(false);
-  // 记录选择助手时的目标页面，用于防止被重置
-  const targetPageForSelection = useRef<number | null>(null);
-  // 记录是否已经为当前 selectedId 设置了目标页面，避免重复设置
-  const hasSetPageForSelectedId = useRef<string | null>(null);
-  // 记录上一次的搜索关键词，用于判断是否真正变化
-  const prevSearchKeyword = useRef<string>('');
-
-  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 filteredAssistants = useMemo(() => {
-    if (!searchKeyword.trim()) {
-      return assistantList || [];
-    }
-    const keyword = searchKeyword.toLowerCase().trim();
-    return (assistantList || []).filter(assistant => {
-      const name = assistant.name?.toLowerCase() || '';
-      // 也可以搜索配置中的信息
-      try {
-        const cfg = JSON.parse(assistant.configJson || '{}');
-        const configName = cfg.config_name?.toLowerCase() || '';
-        return name.includes(keyword) || configName.includes(keyword);
-      } catch {
-        return name.includes(keyword);
-      }
-    });
-  }, [assistantList, searchKeyword]);
-
-  // 分页逻辑
-  const totalPages = Math.ceil((filteredAssistants?.length || 0) / pageSize);
-  const currentAssistants = filteredAssistants?.slice((currentPage - 1) * pageSize, currentPage * pageSize) || [];
-
-  // 当选中助手时，自动跳转到对应页面（只在 selectedId 变化时执行）
-  useEffect(() => {
-    if (selectedId && selectedId !== hasSetPageForSelectedId.current) {
-      // 如果正在清空搜索（选择助手导致的），已经有目标页面了，不重复计算
-      if (isClearingSearchForSelection.current && targetPageForSelection.current !== null) {
-        hasSetPageForSelectedId.current = selectedId;
-        return;
-      }
-      // 如果有搜索关键词，基于过滤后的列表跳转；否则基于完整列表跳转
-      const targetList = searchKeyword.trim() ? filteredAssistants : assistantList;
-      if (targetList && targetList.length > 0) {
-        const selectedIndex = targetList.findIndex(a => a.id === selectedId);
-        if (selectedIndex !== -1) {
-          const targetPage = Math.floor(selectedIndex / pageSize) + 1;
-          setCurrentPage(targetPage);
-          hasSetPageForSelectedId.current = selectedId;
-        }
-      }
-    }
-  }, [selectedId, assistantList, filteredAssistants, pageSize, searchKeyword]);
-
-  // 当搜索关键词变化时，重置到第一页（但选择助手导致的清空除外）
-  useEffect(() => {
-    // 如果搜索关键词没有真正变化，不执行任何操作
-    if (searchKeyword === prevSearchKeyword.current) {
-      return;
-    }
-
-    // 如果是选择助手导致的搜索关键词清空，跳转到目标页面并清除标记
-    if (isClearingSearchForSelection.current && targetPageForSelection.current !== null) {
-      setCurrentPage(targetPageForSelection.current);
-      isClearingSearchForSelection.current = false;
-      targetPageForSelection.current = null;
-      prevSearchKeyword.current = searchKeyword;
-      return;
-    }
-
-    // 如果已经为 selectedId 设置了页面（说明是选择助手导致的），不重置页面
-    if (hasSetPageForSelectedId.current === selectedId) {
-      prevSearchKeyword.current = searchKeyword;
-      return;
-    }
-
-    // 用户主动输入搜索关键词时，重置到第一页，并清除已设置的页面标记
-    if (!isClearingSearchForSelection.current) {
-      // 如果用户主动输入搜索关键词，清除已设置的页面标记，允许重新计算
-      if (searchKeyword.trim()) {
-        hasSetPageForSelectedId.current = null;
-      }
-      setCurrentPage(1);
-    }
-
-    prevSearchKeyword.current = searchKeyword;
-  }, [searchKeyword, selectedId]);
-
-  // 当过滤结果变化时，如果当前页超出总页数，自动调整到最后一页
-  useEffect(() => {
-    if (totalPages > 0 && currentPage > totalPages) {
-      setCurrentPage(totalPages);
-    }
-  }, [totalPages, currentPage]);
-
-  const prologue = selectAssistantConfig.prologue || '您好，欢迎使用小鲸智能问答';
-  const prologueTypewriter = useTypewriter(prologue, [selectedId], 30);
-
-  return (
-    <div className={`flex flex-col relative 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: 68, height: 68 }}
-      />
-      <div className="text-3xl font-bold mb-2 g-welcome-title">{prologueTypewriter}</div>
-      {!selectedId && <div className="flex mb-2 g-welcome-subtitle">请选择一个智能助手</div>}
-
-      <div
-       style={{
-        maxWidth: '1200px',
-       }}
-      className="flex mt-8 flex-wrap gap-3
-       max-w-[1200px] px-8 w-full mx-auto justify-center mb-4">
-        {/* 搜索按钮/输入框 - 永远渲染为第一个元素 */}
-        {!searchVisible ? (
-          <button type="button" className="g-welcome-search-btn" onClick={() => setSearchVisible(true)}>
-            <Search   size={16} />
-          </button>
-        ) : (
-          <div className="flex items-center gap-2 px-5 w-full" style={{ flexBasis: '100%' }}>
-            <Input
-              className="g-welcome-search-input w-full"
-              placeholder="搜索助手名称"
-              prefix={<Search size={16} />}
-              suffix={
-                <button
-                  type="button"
-                  onClick={() => {
-                    setSearchVisible(false);
-                    setSearchKeyword('');
-                  }}
-                  style={{ background: 'transparent', border: 'none', cursor: 'pointer' }}
-                >
-                  <X size={14} />
-                </button>
-              }
-              value={searchKeyword}
-              onChange={(e) => setSearchKeyword(e.target.value)}
-              autoFocus
-            />
-          </div>
-        )}
-
-        {/* 助手列表或空状态 */}
-        {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
-                  type="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);
-
-                    // 计算目标页面：如果在搜索中，基于完整列表（因为搜索会被清空）；否则基于当前列表
-                    const isInSearch = searchVisible || searchKeyword.trim();
-                    const targetList = isInSearch ? assistantList : (searchKeyword.trim() ? filteredAssistants : assistantList);
-                    const selectedIndex = targetList.findIndex(a => a.id === assistant.id);
-
-                    if (selectedIndex !== -1) {
-                      // 如果在搜索中，清空后 pageSize 会变成 12；否则使用当前的 pageSize
-                      const targetPageSize = isInSearch ? 12 : pageSize;
-                      const targetPage = Math.floor(selectedIndex / targetPageSize) + 1;
-
-                      // 立即跳转到目标页面
-                      setCurrentPage(targetPage);
-                      // 标记已经为当前 selectedId 设置了页面
-                      hasSetPageForSelectedId.current = assistant.id;
-
-                      // 若在搜索视图中选择了助手，需要清空搜索
-                      if (isInSearch) {
-                        // 保存目标页面，用于在搜索关键词清空时跳转
-                        targetPageForSelection.current = targetPage;
-                        // 设置标记，表示这是选择助手导致的清空
-                        isClearingSearchForSelection.current = true;
-                        // 延迟清空搜索，确保跳转逻辑先执行
-                        setTimeout(() => {
-                          setSearchKeyword('');
-                          setSearchVisible(false);
-                        }, 100);
-                      }
-                    }
-                  }}
-                  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-2">
-          <button
-            type="button"
-            className="g-welcome-pagination-btn"
-            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
-            disabled={currentPage === 1}
-          >
-            <ChevronLeft size={16} />
-          </button>
-
-          {/* 页码显示 */}
-          <div className="flex items-center gap-1">
-            {(() => {
-              const pages: (number | string)[] = [];
-              const maxVisible = 7; // 最多显示7个页码
-
-              if (totalPages <= maxVisible) {
-                // 如果总页数少于等于7，显示所有页码
-                for (let i = 1; i <= totalPages; i++) {
-                  pages.push(i);
-                }
-              } else {
-                // 总是显示第一页
-                pages.push(1);
-
-                if (currentPage <= 4) {
-                  // 当前页在前4页，显示 1 2 3 4 5 ... totalPages
-                  for (let i = 2; i <= 5; i++) {
-                    pages.push(i);
-                  }
-                  pages.push('...');
-                  pages.push(totalPages);
-                } else if (currentPage >= totalPages - 3) {
-                  // 当前页在后4页，显示 1 ... totalPages-4 totalPages-3 totalPages-2 totalPages-1 totalPages
-                  pages.push('...');
-                  for (let i = totalPages - 4; i <= totalPages; i++) {
-                    pages.push(i);
-                  }
-                } else {
-                  // 当前页在中间，显示 1 ... currentPage-1 currentPage currentPage+1 ... totalPages
-                  pages.push('...');
-                  for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-                    pages.push(i);
-                  }
-                  pages.push('...');
-                  pages.push(totalPages);
-                }
-              }
-
-              return pages.map((page, index) => {
-                if (page === '...') {
-                  return (
-                    <span key={`ellipsis-${index}`} className="g-welcome-pagination-text px-1">
-                      ...
-                    </span>
-                  );
-                }
-
-                const pageNum = page as number;
-                const isActive = currentPage === pageNum;
-
-                return (
-                  <button
-                    type="button"
-                    key={pageNum}
-                    className={`g-welcome-pagination-btn ${isActive ? 'active' : ''}`}
-                    onClick={() => setCurrentPage(pageNum)}
-                  >
-                    {pageNum}
-                  </button>
-                );
-              });
-            })()}
-          </div>
-
-          <button
-            type="button"
-            className="g-welcome-pagination-btn"
-            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
-            disabled={currentPage === totalPages}
-          >
-            <ChevronRight size={16} />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// 只在assistantList、defaultSelect、styles变化时才重渲染
-export default GientechNewChatWelcome;