@gientech/modual 2.0.4 → 2.0.5

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

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