@gientech/modual 1.3.0 → 1.3.2

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

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

@@ -1,143 +0,0 @@
-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;
-}
-
-export function GientechConversationBarList(
-  props: GientechConversationBarListProps & { styles?: any }
-) {
-  const {
-    data,
-    activedItem,
-    onChange,
-    onDelete,
-    sortRules = [{ label: '当天', dayPeriod: 1 }],
-    eventsEmit,
-    assistantList,
-    height = 400,
-    styles = {},
-  } = 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 ITEM_HEIGHT = 56;
-  const ITEM_GAP = 14;
-
-  const getItemSize = (index: number) =>
-    flatList[index].type === 'group' ? 32 : ITEM_HEIGHT + ITEM_GAP;
-
-  // 新增：List ref
-  const listRef = useRef<any>(null);
-  // 新增：当前激活会话在 flatList 的 index
-  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]);
-  // 新增：只有激活会话是第一个 item 时才滚动
-  useEffect(() => {
-    if (activeIndex > -1 && activeIndex === firstItemIndex && listRef.current) {
-      listRef.current.scrollToItem(activeIndex, 'start');
-    }
-  }, [activeIndex, firstItemIndex, flatList.length]);
-
-  // 修复：删除/数据变化/flipKey变化后强制刷新缓存，防止重叠
-  useEffect(() => {
-    if (listRef.current) {
-      listRef.current.resetAfterIndex(0, true);
-    }
-  }, [flipKey]);
-
-  // 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}
-        itemSize={getItemSize}
-        itemKey={index => {
-          const item = flatList[index];
-          return item.type === 'item' ? item.data!.sessionId : `group-${item.label}`;
-        }}
-        style={{ overflowX: 'hidden' }}
-      >
-        {({ index, style }) => {
-          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

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

@@ -1,212 +0,0 @@
-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; // 新增，支持动态主题样式
-}
-
-// 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 = {} } = 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}
-        />
-        {/* 顶部阴影提示 */}
-        <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>
-    </div>
-  );
-}

package/src/modules/chat/constants.tsx

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