@gientech/modual 1.4.2 → 1.4.3

package/src/modules/chat/Conversations/Item.tsx

@@ -0,0 +1,167 @@
+import React, { useMemo, useState } from 'react';
+import { Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import { MoreHorizontal, Edit2, Trash2 } from 'lucide-react';
+import { ListItemType } from '.';
+import dayjs from 'dayjs';
+
+export interface GientechConversationBarItemProps {
+  isActive: boolean;
+  isDisabled: boolean;
+  data: ListItemType;
+  isNew: boolean;
+  eventsEmit?: (type: string, data?: any) => void;
+  styles?: any;
+  assistantList?: any[];
+}
+
+export function GientechConversationBarItem({ isActive, isNew, isDisabled, data, eventsEmit, styles = {}, assistantList = [] }: GientechConversationBarItemProps) {
+  const [hovered, setHovered] = useState(false);
+  const colors = styles?.colors || {};
+
+  // 由 configId 匹配助手名称（优先用 name，其次 configJson.config_name）
+  const assistantName = useMemo(() => {
+    const id = data?.configId;
+    if (!id || !assistantList || assistantList.length === 0) return '未选择助手';
+    const found = assistantList.find((a: any) => String(a?.id) === String(id));
+    if (!found) return '未选择助手';
+    if (found?.name) return found.name;
+    try {
+      const cj = typeof found.configJson === 'string' ? JSON.parse(found.configJson) : found.configJson;
+      return cj?.config_name || '未选择助手';
+    } catch {
+      return '未选择助手';
+    }
+  }, [assistantList, data?.configId]);
+
+  // antd v5+ menu items
+  const menuItems: MenuProps['items'] = [
+    {
+      key: 'rename',
+      icon: <Edit2 size={12} />,
+      label: '重命名',
+      onClick: (info) => {
+        info.domEvent.stopPropagation();
+        eventsEmit&&eventsEmit('conversations:rename_icon_clicked', data);
+      },
+    },
+    {
+      key: 'delete',
+      icon: <Trash2 size={12} />,
+      label: '删除',
+      danger: true,
+      onClick: (info) => {
+        info.domEvent.stopPropagation();
+        eventsEmit&&eventsEmit('conversations:delete_icon_clicked', data);
+      },
+    },
+  ];
+
+
+  // 动态样式
+  const itemBg = isActive
+    ? colors.activeItemBg || '#f0f4ff'
+    : hovered
+      ? colors.itemHoverBg || '#f5f7fa'
+      : colors.itemBg || 'transparent';
+  const itemText = isActive
+    ? colors.activeItemText || colors.primary || '#0122ff'
+    : colors.itemText || '#333';
+  const borderColor = isActive
+    ? colors.activeItemBorder || colors.primary || '#0122ff'
+    : 'transparent';
+
+  // 格式化时间显示
+  const formatTime = (timestamp: number) => {
+    const now = dayjs();
+    const messageTime = dayjs(timestamp);
+    const isToday = now.isSame(messageTime, 'day');
+
+    if (isToday) {
+      return messageTime.format('HH:mm');
+    } else {
+      return messageTime.format('MM-DD HH:mm');
+    }
+  };
+
+  return (
+    <div
+      className={`flex relative items-center justify-between mb-2 px-4 py-3 rounded-md transition-colors cursor-pointer select-none`}
+      onClick={() => !isDisabled && eventsEmit&&eventsEmit('conversation:item_click', data)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        minHeight: 48,
+        background: itemBg,
+        color: itemText,
+        border: `1px solid ${borderColor}`,
+        ...styles.item,
+        opacity: isDisabled ? 0.5 : 1,
+      }}
+    >
+      <div className="flex flex-col gap-y-2 flex-1 min-w-0">
+        {/* 主标题 */}
+        <span
+          className="truncate text-sm max-w-[160px] font-medium"
+          title={data.label || '未命名会话'}
+          style={{
+            color: itemText,
+            fontSize: '14px',
+            lineHeight: '1.4'
+          }}
+        >
+          {data.label || '未命名会话'}
+        </span>
+
+        {/* 副标题和时间 */}
+        <div className="flex items-center justify-between gap-2">
+          <span
+            className="text-xs truncate flex-1"
+            style={{
+              color: isActive ? colors.activeItemTextSecondary || '#666' : colors.itemTextSecondary || '#666',
+              fontSize: '12px',
+              lineHeight: '1.3'
+            }}
+          >
+            {assistantName}
+          </span>
+
+          {/* 时间显示 */}
+          {data.gmtModified && (
+            <span
+              className="text-xs flex-shrink-0"
+              style={{
+                color: isActive ? colors.activeItemTextSecondary || '#999' : colors.itemTextSecondary || '#999',
+                fontSize: '12px',
+                lineHeight: '1.3'
+              }}
+            >
+              {formatTime(data.gmtModified)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* 省略号菜单 */}
+      {!isDisabled && hovered && !isNew && (
+        <div className="absolute top-2 right-3">
+          <Dropdown
+            menu={{ items: menuItems }}
+            trigger={['click']}
+            placement="bottomRight"
+          >
+            <MoreHorizontal
+              size={16}
+              className="text-gray-600 hover:text-gray-800"
+              style={{
+                cursor: 'pointer',
+                color: isActive ? colors.activeItemTextSecondary || '#999' : colors.itemTextSecondary || '#999'
+              }}
+              onClick={(e: React.MouseEvent) => e.stopPropagation()}
+            />
+          </Dropdown>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/modules/chat/Conversations/List.tsx

@@ -0,0 +1,206 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import { VariableSizeList as List } from 'react-window';
+import { GientechConversationBarItem } from './Item';
+import { groupConversationsByTime, ListItemType } from './groupByTime';
+import { Flipper, Flipped } from 'react-flip-toolkit';
+
+export interface GientechConversationBarListProps {
+  data: ListItemType[];
+  activedItem: string;
+  onChange?: (sessionId: string) => void;
+  onDelete?: (item: ListItemType) => void;
+  sortRules?: { label: string; dayPeriod: number }[];
+  eventsEmit?: (eventName: string, data?: any) => void;
+  assistantList?: any[];
+  height?: number;
+  styles?: any;
+  hasMore?: boolean;
+  loadingMore?: boolean;
+}
+
+export function GientechConversationBarList(
+  props: GientechConversationBarListProps & { styles?: any }
+) {
+  const {
+    data,
+    activedItem,
+    onChange,
+    onDelete,
+    sortRules = [{ label: '当天', dayPeriod: 1 }],
+    eventsEmit,
+    assistantList,
+    height = 400,
+    styles = {},
+    hasMore = false,
+    loadingMore = false,
+  } = props;
+
+  // 用于动画的 flipKey，包含 sessionId 和 gmtModified
+  const flipKey = data.map(i => i.sessionId + '-' + i.gmtModified).join(',');
+
+  const flatList = useMemo(() => {
+    const rules = sortRules.length > 0 ? sortRules : [{ label: '当天', dayPeriod: 1 }];
+    const sortedList = groupConversationsByTime(data, rules);
+    const hasOtherOnly = rules.every(
+      rule => !sortedList[rule.label] || sortedList[rule.label].length === 0
+    );
+    const arr: { type: 'group' | 'item'; label?: string; data?: ListItemType }[] = [];
+    rules.forEach(rule => {
+      if (sortedList[rule.label] && sortedList[rule.label].length > 0) {
+        arr.push({ type: 'group', label: rule.label });
+        sortedList[rule.label].forEach(i => arr.push({ type: 'item', data: i }));
+      }
+    });
+    if (sortedList.other.length > 0 && !hasOtherOnly) {
+      arr.push({ type: 'group', label: '其他' });
+      sortedList.other.forEach(i => arr.push({ type: 'item', data: i }));
+    }
+    if (hasOtherOnly && sortedList.other.length > 0) {
+      sortedList.other.forEach(i => arr.push({ type: 'item', data: i }));
+    }
+    return arr;
+  }, [data, sortRules, flipKey]);
+
+  // 代表当前扁平顺序与类型的签名，用于监测重排
+  const layoutKey = useMemo(() => {
+    return flatList
+      .map(i => (i.type === 'group' ? `g:${i.label}` : `i:${i.data!.sessionId}`))
+      .join('|');
+  }, [flatList]);
+
+  const ITEM_HEIGHT = 56;
+  const ITEM_GAP = 14;
+  const FOOTER_HEIGHT = 36;
+
+  const getItemSize = (index: number) => {
+    // 最后一项为 Footer
+    if (index === flatList.length) return FOOTER_HEIGHT;
+    return flatList[index].type === 'group' ? 32 : ITEM_HEIGHT + ITEM_GAP;
+  };
+
+  // 新增：List ref
+  const listRef = useRef<any>(null);
+  // 新增：当前激活会话在 flatList 的 index（仅依赖 activedItem 与数据映射）
+  const activeIndex = useMemo(() => {
+    return flatList.findIndex(item => item.type === 'item' && item.data?.sessionId === activedItem);
+  }, [flatList, activedItem]);
+  // 新增：flatList 里第一个会话项的 index
+  const firstItemIndex = useMemo(() => {
+    return flatList.findIndex(item => item.type === 'item');
+  }, [flatList]);
+  // 仅在激活项变化时，且激活项恰好是第一项时滚动到顶部；加载更多时不触发
+  const lastActivedRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    const last = lastActivedRef.current;
+    if (activedItem !== last && activeIndex > -1 && activeIndex === firstItemIndex && listRef.current) {
+      listRef.current.scrollToItem(activeIndex, 'start');
+    }
+    lastActivedRef.current = activedItem;
+  }, [activedItem, activeIndex, firstItemIndex]);
+
+  // 轻量刷新缓存：仅在数据长度变化时刷新末尾，避免重置滚动位置
+  const prevCountRef = useRef<number>(0);
+  useEffect(() => {
+    if (listRef.current) {
+      const prev = prevCountRef.current;
+      const curr = flatList.length;
+      prevCountRef.current = curr;
+      if (curr !== prev) {
+        listRef.current.resetAfterIndex(Math.max(0, Math.min(prev, curr) - 1), false);
+      }
+    }
+  }, [flatList.length]);
+
+  // 当分组/顺序发生变化时，重置尺寸缓存，避免位置叠加
+  useEffect(() => {
+    if (listRef.current) {
+      listRef.current.resetAfterIndex(0, false);
+    }
+  }, [layoutKey]);
+
+  // hooks全部调用完后再判断是否为空
+  if (flatList.length === 0) {
+    return <div className="text-center text-zinc-400 py-8">暂无会话</div>;
+  }
+
+  const colors = styles?.colors || {};
+
+  return (
+    <Flipper flipKey={flipKey} spring={{ stiffness: 180, damping: 18 }}>
+      <List
+        ref={listRef}
+        height={height}
+        width={'100%'}
+
+        itemCount={flatList.length + 1}
+        itemSize={getItemSize}
+        itemKey={index => {
+          if (index === flatList.length) return 'footer';
+          const item = flatList[index];
+          return item.type === 'item' ? item.data!.sessionId : `group-${item.label}`;
+        }}
+        onItemsRendered={({ visibleStopIndex }) => {
+          // 接近底部自动加载
+          const threshold = 3;
+          if (
+            hasMore &&
+            !loadingMore &&
+            visibleStopIndex >= flatList.length - 1 - threshold &&
+            typeof eventsEmit === 'function'
+          ) {
+            eventsEmit('conversations:load_more');
+          }
+        }}
+        style={{ overflowX: 'hidden' }}
+      >
+        {({ index, style }) => {
+          // Footer 行
+          if (index === flatList.length) {
+            const colors = styles?.colors || {};
+            return (
+              <div
+                style={{
+                  ...style,
+                  height: FOOTER_HEIGHT,
+                  lineHeight: `${FOOTER_HEIGHT}px`,
+                  textAlign: 'center',
+                  fontSize: '10px',
+                  color: colors.textMuted || '#9ca3af',
+                  background: colors.groupBg || 'white',
+                }}
+              >
+                {loadingMore ? '加载中...' : hasMore ? '' : '没有更多了'}
+              </div>
+            );
+          }
+          const item = flatList[index];
+          if (item.type === 'group') {
+            return (
+              <div
+                style={{ ...style, background: colors.groupBg || 'white', zIndex: 1 }}
+                className="pt-2 pb-1  px-[28px] py-[2px] text-xs text-gray-400"
+              >
+                {item.label}
+              </div>
+            );
+          }
+          return (
+            <Flipped key={item.data!.sessionId} flipId={item.data!.sessionId}>
+              <div style={style} className='px-[12px] py-[2px]'>
+                <GientechConversationBarItem
+                  isActive={activedItem === item.data!.sessionId}
+                  isDisabled={false}
+                  isNew={item.data!.isNew}
+                  data={item.data!}
+                  eventsEmit={eventsEmit}
+                  assistantList={assistantList}
+                  styles={styles}
+                />
+              </div>
+            </Flipped>
+          );
+        }}
+      </List>
+    </Flipper>
+  );
+}

package/src/modules/chat/Conversations/groupByTime.ts

@@ -0,0 +1,39 @@
+export interface ListItemType {
+  label: string;
+  sessionId: string;
+  gmtModified: number;
+  [key: string]: any;
+}
+export interface SortRule {
+  label: string;
+  dayPeriod: number;
+}
+
+/**
+ * 按时间分组会话数据
+ * @param data 会话列表
+ * @param rules 分组规则
+ * @returns 分组后的对象
+ */
+export function groupConversationsByTime(
+  data: ListItemType[],
+  rules: SortRule[] = [{ label: '当天', dayPeriod: 1 }]
+): Record<string, ListItemType[]> {
+  const now = new Date();
+  const sortedList: Record<string, ListItemType[]> = { other: [] };
+  data.forEach(item => {
+    const itemDate = new Date(item.gmtModified);
+    const daysDifference = Math.floor((+now - +itemDate) / (1000 * 60 * 60 * 24));
+    let found = false;
+    for (const rule of rules) {
+      if (daysDifference <= rule.dayPeriod) {
+        if (!sortedList[rule.label]) sortedList[rule.label] = [];
+        sortedList[rule.label].push(item);
+        found = true;
+        break;
+      }
+    }
+    if (!found) sortedList.other.push(item);
+  });
+  return sortedList;
+}

package/src/modules/chat/Conversations/index.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+
+import { GientechConversationBarList } from './List';
+import { Plus, Search, X } from 'lucide-react';
+export interface ListItemType {
+  label: string;
+  sessionId: string;
+  gmtModified: number;
+  [key: string]: any;
+}
+export interface GientechConversationPanelProps {
+  data: ListItemType[];
+  sortRules?: { label: string; dayPeriod: number }[];
+  activedItem: string;
+  eventsEmit?: (eventName: string, data?: any) => void;
+  assistantList?: any[];
+  styles?: any; // 新增，支持动态主题样式
+  hasMore?: boolean;
+  loadingMore?: boolean;
+}
+
+// Header美化：分区更明显，搜索框更圆润，按钮更突出，底部分割线阴影
+const Header: React.FC<{
+  value: string;
+  setSearch: (v: string) => void;
+  eventsEmit?: (eventName: string, data?: any) => void;
+  style?: React.CSSProperties;
+  styles?: any;
+}> = ({ value, eventsEmit, setSearch, style, styles: themeStyles = {} }) => {
+  const colors = themeStyles.colors || {};
+  const radius = themeStyles.radius || '12px';
+  const border = colors.border || '#e5e7eb';
+  const primary = colors.primary || '#2563eb';
+  const headerBg = themeStyles.headerBg || colors.sidebarBg || colors.background || '#fff';
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  return (
+    <div
+      className="flex items-center gap-2 px-4 py-3 sticky top-0 z-10 min-w-0"
+      style={{
+        ...style,
+        background: headerBg,
+        // borderBottom: `1px solid ${border}`,
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+      }}
+    >
+      {/* 新建按钮：通过宽度/透明度动画隐藏，保持DOM稳定 */}
+      <button
+        className="border-none flex items-center justify-center"
+        onClick={() => {
+          // 新建会话后保持默认布局
+          setSearchOpen(false);
+          eventsEmit && eventsEmit('conversation:create');
+        }}
+        title="新建会话"
+        style={{
+          height: 42,
+          borderRadius: '90px',
+          background: primary,
+          color: colors.buttonText || '#fff',
+          fontWeight: 600,
+          boxShadow: themeStyles.shadow || '0 2px 8px 0 rgba(0,0,0,0.04)',
+          padding: searchOpen ? '0 0' : '0 14px',
+          minWidth: searchOpen ? 0 : 180,
+          width: searchOpen ? 0 : undefined,
+          opacity: searchOpen ? 0 : 1,
+          overflow: 'hidden',
+          flexShrink: 0,
+          transition: 'width .22s ease, min-width .22s ease, padding .22s ease, opacity .18s ease',
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <Plus size={18} />
+          <span className="text-sm">新建对话</span>
+        </div>
+      </button>
+
+      {/* 搜索区：折叠图标/展开输入框 */}
+      {!searchOpen ? (
+        <button
+          className="ml-auto flex items-center justify-center transition-colors"
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: '90px',
+            // background: colors.inputBg || '#f4f4f5',
+            border: `1px solid ${border}`,
+            color: primary || '#222',
+            flexShrink: 0,
+          }}
+          onClick={() => setSearchOpen(true)}
+          title="搜索"
+        >
+          <Search size={18} />
+        </button>
+      ) : (
+        <div className="flex-1 min-w-0 flex items-center gap-2">
+          <input
+            className="flex-1 px-3 py-2 text-sm transition-all"
+            placeholder="搜索会话..."
+            value={value}
+            onChange={e => setSearch(e.target.value)}
+            onBlur={() => setSearchOpen(false)}
+            onKeyDown={e => {
+              if (e.key === 'Enter') {
+                setSearchOpen(false);
+              }
+            }}
+            style={{
+              minWidth: 0,
+              width: '100%',
+              maxWidth: '100%',
+              borderRadius: radius,
+              background: colors.inputBg || '#f4f4f5',
+              border: `1px solid ${border}`,
+              color: colors.text || '#222',
+              outline: 'none',
+            }}
+          />
+          <button
+            className="flex items-center justify-center transition-colors"
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: '90px',
+              // background: colors.inputBg || '#f4f4f5',
+              border: `1px solid ${border}`,
+              color: colors.text || '#222',
+              flexShrink: 0,
+            }}
+            onClick={() => setSearchOpen(false)}
+            title="收起搜索"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      )}
+  </div>
+);
+};
+
+export default function GientechConversationPanel(props: GientechConversationPanelProps) {
+  const { data, sortRules, activedItem,eventsEmit,assistantList, styles = {}, hasMore = false, loadingMore = false } = props;
+  const [search, setSearch] = useState('');
+
+  // 本地搜索过滤
+  const filteredData = useMemo(() => {
+    if (!search) return data;
+    return data.filter(item => (item.label || '未命名会话').toLowerCase().includes(search.toLowerCase()));
+  }, [data, search]);
+
+  // 新增：对 filteredData 按 gmtModified 倒序排序
+  const sortedData = useMemo(() => {
+    return [...filteredData].sort((a, b) => new Date(b.gmtModified).getTime() - new Date(a.gmtModified).getTime());
+  }, [filteredData]);
+
+  // 动态获取会话列表容器高度
+  const listContainerRef = useRef<HTMLDivElement>(null);
+  const [listHeight, setListHeight] = useState(400);
+  useEffect(() => {
+    function updateHeight() {
+      if (listContainerRef.current) {
+        setListHeight(listContainerRef.current.clientHeight);
+      }
+    }
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    return () => window.removeEventListener('resize', updateHeight);
+  }, []);
+
+  // 主题色提取
+  const colors = styles?.colors || {};
+  const radius = styles?.radius || '12px';
+  const shadow = styles?.shadow || '0 4px 24px 0 rgba(0,0,0,0.06)';
+  const border = colors.border || '#e5e7eb';
+  const sidebarBg = colors.sidebarBg || colors.background || '#EAEEFF';
+  const textColor = colors.text || '#222';
+
+  return (
+    <div
+      className="h-full flex flex-col overflow-y-hidden"
+      style={{
+        background: sidebarBg,
+        color: textColor,
+       // borderRadius: radius,
+        boxShadow: shadow,
+        border: `1px solid ${border}`,
+        ...styles.container,
+      }}
+    >
+      {/* Header 区域美化 */}
+      <Header value={search} setSearch={setSearch} eventsEmit={eventsEmit} style={styles.header} styles={styles} />
+      {/* 会话列表区域，内容溢出时顶部有阴影提示 */}
+      <div className="flex-1 min-h-0 relative" ref={listContainerRef} style={styles.list}>
+        <GientechConversationBarList
+          eventsEmit={eventsEmit}
+          data={sortedData}
+          assistantList={assistantList}
+          activedItem={activedItem}
+          sortRules={sortRules}
+          height={listHeight}
+          styles={styles}
+          hasMore={hasMore}
+          loadingMore={loadingMore}
+        />
+        {/* 顶部阴影提示 */}
+        <div
+          className="pointer-events-none absolute left-0 right-0 top-0 h-3 z-20"
+          style={{
+            background: `linear-gradient(to bottom, ${sidebarBg}cc, transparent)`
+          }}
+        />
+      </div>
+      {/* Footer 文案改由虚拟列表内部渲染，这里无需再显示 */}
+    </div>
+  );
+}

package/src/modules/chat/constants.tsx

@@ -0,0 +1,33 @@
+import { Icon } from '@mxmweb/zui';
+
+export const DefaultSenderConfig = {
+  actions: [
+    {
+      icon: <Icon type='rag/folder' size={18} />,
+      name: 'history',
+      badgeCount: 0,
+    },
+  ],
+
+  switchs: [
+    {
+      label: '联网搜索',
+      name: 'netSearch',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <Icon type='rag/url' size={12} />,
+    },
+    {
+      label: '推理思考',
+      name: 'reasoning',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <Icon type='rag/think' size={12} />,
+    },
+  ],
+};
+
+export const MaxHistoryChatDisplay = 5000;
+export const MaxHistoryItemDisplay = 3000;