@gientech/modual 2.0.9 → 2.0.11

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

@@ -1,252 +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; // 新增，支持动态主题样式
-  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);
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  // 搜索展开时自动聚焦
-  React.useEffect(() => {
-    if (searchOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [searchOpen]);
-
-  const handleCloseSearch = () => {
-    setSearchOpen(false);
-    setSearch(''); // 关闭时清空搜索内容
-  };
-
-  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',
-          pointerEvents: searchOpen ? 'none' : 'auto',
-        }}
-      >
-        <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 hover:bg-gray-50"
-          style={{
-            width: 36,
-            height: 36,
-            borderRadius: '90px',
-            border: `1px solid ${border}`,
-            color: primary || '#222',
-            flexShrink: 0,
-          }}
-          onClick={() => setSearchOpen(true)}
-          title="搜索"
-        >
-          <Search size={18} />
-        </button>
-      ) : (
-        <div className="flex-1 min-w-0 relative">
-          <input
-            ref={inputRef}
-            className="w-full px-3 py-2 pr-10 text-sm transition-all"
-            placeholder="搜索历史记录"
-            value={value}
-            onChange={e => setSearch(e.target.value)}
-            onKeyDown={e => {
-              if (e.key === 'Escape') {
-                handleCloseSearch();
-              }
-            }}
-            style={{
-              minWidth: 0,
-              width: '100%',
-              borderRadius: radius,
-              background: colors.inputBg || '#f4f4f5',
-              border: `1px solid ${border}`,
-              color: colors.text || '#222',
-              outline: 'none',
-              paddingRight: 40, // 为关闭按钮留出空间
-            }}
-          />
-          {/* 关闭按钮：在搜索栏内部最右侧尾部 */}
-          <button
-            className="absolute right-3 flex items-center justify-center transition-colors hover:bg-gray-200 rounded-full"
-            style={{
-              width: 20,
-              height: 20,
-              color: colors.text || '#666',
-              flexShrink: 0,
-              position: 'absolute',
-              right: '12px',
-              top: '9px',
-            }}
-            onClick={handleCloseSearch}
-            title="关闭搜索"
-            onMouseDown={e => e.preventDefault()} // 防止触发 input 的 blur
-          >
-            <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>
-  );
-}