@gientech/modual 2.0.8 → 2.0.9

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

@@ -0,0 +1,252 @@
+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>
+  );
+}