@mxmweb/aichat 1.1.1 → 1.1.8

package/src/UseLogingHeadless.tsx

@@ -0,0 +1,238 @@
+import { useEffect, useMemo, useState } from 'react';
+import { HeadLessChat } from './lib_enter';
+import LoginPage from './LoginPage';
+import { ConfigProvider, Drawer, message } from 'antd';
+import AppError from './adopters/gientechCommon/components/AppError';
+import { DrawerContent } from './components/DrawerContent';
+import { getMarkExcludeType, TempBaseUrl } from './utils';
+import DrawerPreview from './components/DrawerPreview';
+
+export default function HeadlessChat({}) {
+  const [curFileInfo, setCurFileInfo] = useState({
+    url: '',
+    parse_url: '',
+    file_type: '',
+    file_name: '',
+  });
+  const [drawerType, setDrawerType] = useState<string>('mark');
+  const [showError, setShowError] = useState<boolean>(false);
+  const [errorMsg, setErrorMsgr] = useState({ msg: '', subMsg: '' });
+  const [token, setToken] = useState<string>('');
+  const [url, setUrl] = useState<string>('/proxy');
+  const [configId, setConfigId] = useState<string>('');
+  const [useLogin, setUseLogin] = useState<boolean>(true);
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState<
+    | {
+        title: '';
+        file_type: '';
+        metadata: { offset: [] };
+      }
+    | any
+  >(null);
+
+  const HeadLessChatComponent = useMemo(() => {
+    return HeadLessChat();
+  }, []);
+  const defaultStyles: any = {
+    theme: {
+      colors: {
+        primary: '#0122ff',
+        secondary: '#6c757d',
+        success: '#008000',
+        warning: '#FFA500',
+        error: '#FF0000',
+        info: '#0000FF',
+        background: '#ffff',
+        text: '#000000',
+        border: '#dee2e6',
+        disabled: '#808080',
+        disabledBackground: '#F5F5F5',
+        disabledText: '#808080',
+        shadow: '#000000',
+      },
+      space: {
+        sidebar: 'md',
+        size: 'md',
+        radius: 'md',
+        padding: 'md',
+        margin: 'md',
+        shadow: 'md',
+        lineHeight: 'md',
+      },
+      icons: {
+        aiAvatar: '/icons/questionAwartar.png',
+        userAvatar: '/icons/answerAwartar.png',
+        pdf: '/icons/pdf.png',
+        docx: '/icons/docx-file.png',
+        doc: '/icons/docx-file.png',
+        image: '/icons/image.png',
+        sheets: '/icons/sheets.png',
+        pptx: '/icons/pptx.png',
+        ppt: '/icons/pptx.png',
+        pub: '/icons/pptx.png',
+        txt: '/icons/txt.png',
+        xls: '/icons/sheets.png',
+        xlsx: '/icons/sheets.png',
+        csv: '/icons/sheets.png',
+        png: '/icons/image.png',
+        jpg: '/icons/image.png',
+        jpge: '/icons/image.png',
+        html: '/icons/html.png',
+        htm: '/icons/html.png',
+        json: '/icons/json.png',
+        md: '/icons/md.png',
+      },
+      others: {
+        baseFontWeight: 'normal',
+      },
+    },
+  };
+  useEffect(() => {
+    const host = location.host;
+    const href = location.href;
+    const search = location.search;
+    const url = href.replace(host, '').replace(search, '');
+    const urlArr = url.split('/');
+    const lastSegment = +urlArr[urlArr.length - 1];
+    if (lastSegment && !isNaN(lastSegment)) {
+      setConfigId(lastSegment.toString());
+    } else {
+      setErrorMsgr({
+        msg: '没有助手ID',
+        subMsg: ' ',
+      });
+      setShowError(true);
+    }
+  }, []);
+
+  const isLogin = useMemo(() => {
+    return token && configId;
+  }, [token, configId]);
+
+  return (
+    <div className="h-[100vh] w-[100vw]">
+      {showError ? (
+        <AppError msg={errorMsg.msg} subMsg={errorMsg.subMsg} />
+      ) : isLogin ? (
+        <HeadLessChatComponent
+          token={token}
+          url={url}
+          configId={configId}
+          useLogin={useLogin}
+          styles={defaultStyles}
+          eventsEmit={(event: any, data: any) => {
+            console.log('事件触发:', event, data);
+            switch (event) {
+              // case 'conversations:rename_icon_clicked':
+              //   setCurEditData(data);
+              //   setisRenameModalOpen(true);
+              //   break;
+              // case 'conversations:delete_icon_clicked':
+              //   setCurEditData(data);
+              //   setisRemoveModalOpen(true);
+              //   break;
+              case 'reference_file:click':
+                if (data.isUploadFile) {
+                  setCurFileInfo({
+                    ...data,
+                    file_type: data.type,
+                    file_name: data.file,
+                  });
+                } else {
+                  setCurFileInfo({ ...data, file_name: data.file });
+                }
+                setDrawerType('preview');
+                setOpen(true);
+                break;
+              case 'action_retrive_tag':
+                if (!data?.tagInfo) return;
+                const { pdfPages, parsedFilePath, order_num, metadata } = data.tagInfo;
+                const id = data.tagInfo.id || order_num || 'Unknown ID';
+                // 解析 source 字段
+                const sourceParts = metadata.source.split('/');
+                const fileName = sourceParts[sourceParts.length - 1] || '';
+                const fileParts = fileName.split('.');
+                const label = fileParts.slice(0, -1).join('.') || 'Unknown Label';
+                const file_type = fileParts[fileParts.length - 1] || 'Unknown Type';
+
+                setContent({
+                  id,
+                  title: label,
+                  file_name: fileName,
+                  file_type: file_type,
+                  file_source: getMarkExcludeType(file_type)
+                    ? `${TempBaseUrl}${metadata.source}`
+                    : parsedFilePath,
+                  metadata: metadata,
+                  pdfPages: pdfPages,
+                });
+                setDrawerType('mark');
+                setOpen(true);
+                break;
+            }
+
+            // 监听所有交互事件
+          }}
+          onError={error => {
+            if (error?.origin?.status === 401) {
+              message.error('登录失效已过，请重新登录');
+              setToken('');
+            } else {
+              setErrorMsgr({
+                msg: '',
+                subMsg: '',
+              });
+              setShowError(true);
+            }
+          }}
+        />
+      ) : (
+        <LoginPage setToken={setToken} />
+      )}
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: 'none' },
+          },
+        }}
+      >
+        <Drawer
+          title={
+            drawerType === 'mark' ? (
+              <div className="flex items-center">
+                <img
+                  src={defaultStyles.theme.icons[content?.file_type || 'doc']}
+                  width={18}
+                  height={18}
+                  className="mr-[6px]"
+                />
+                <div>{`${content?.title}.${content?.file_type}`}</div>
+              </div>
+            ) : (
+              false
+            )
+          }
+          autoFocus={false}
+          onClose={() => setOpen(false)}
+          open={open}
+          width={600}
+          className="overflow-x-hidden"
+          destroyOnClose
+          afterOpenChange={open => {
+            if (!open) {
+              setContent(null);
+            }
+          }}
+        >
+          {drawerType === 'mark' ? (
+            <DrawerContent content={content as any} onClose={() => setOpen(false)} />
+          ) : (
+            <DrawerPreview curFileInfo={curFileInfo} onClose={() => setOpen(false)} />
+          )}
+        </Drawer>
+      </ConfigProvider>
+    </div>
+  );
+}

package/src/adopters/GientechChat/Conversations/Item.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, 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;
+  assistantList?: any[];
+  styles?: any;
+}
+
+export function GientechConversationBarItem({ isActive, isNew, isDisabled, data, eventsEmit, assistantList, styles = {} }: GientechConversationBarItemProps) {
+  const [hovered, setHovered] = useState(false);
+  const colors = styles?.colors || {};
+
+  // 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 assistantInfo = useMemo(() => {
+    return assistantList?.find(item => item.id === data.configId);
+  }, [assistantList]);
+
+  // 动态样式
+  const itemBg = isActive
+    ? colors.activeItemBg || colors.primary || '#0122ff'
+    : hovered
+      ? colors.itemHoverBg || '#f5f7fa'
+      : colors.itemBg || 'transparent';
+  const itemText = isActive
+    ? colors.activeItemText || '#fff'
+    : colors.itemText || '#333';
+  const borderColor = isActive
+    ? colors.activeItemBorder || colors.primary || '#0122ff'
+    : 'transparent';
+
+  return (
+    <div
+      className={`flex relative items-center justify-between mb-2 px-4 py-2 rounded-md transition-colors cursor-pointer select-none`}
+      onClick={() => !isDisabled && eventsEmit&&eventsEmit('conversation:item_click', data)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        minHeight: 40,
+        background: itemBg,
+        color: itemText,
+        border: `1px solid ${borderColor}`,
+        ...styles.item,
+        opacity: isDisabled ? 0.5 : 1,
+      }}
+    >
+      <div className="flex flex-col  gap-y-0.5 flex-1 min-w-0">
+        <span className="truncate max-w-[160px] text-sm  " title={data.label || '未命名会话'}>
+          {data.label || '未命名会话'}
+        </span>
+
+        <div className="flex items-center justify-between gap-2 text-xs text-gray-400 mt-0.5">
+          {/* 助手名tag样式 */}
+          {isNew ? (
+            <span
+              className="inline-block px-2 py-[1px] rounded-sm font-medium truncate max-w-[140px] mr-1 bg-blue-50 text-blue-600 border border-blue-200"
+              title="请选择智能助手提问"
+            >
+              请选择智能助手提问
+            </span>
+          ) : assistantInfo ? (
+            <span
+              className={`inline-block px-2 py-[1px] rounded-sm font-medium truncate max-w-[140px] mr-1
+                ${isActive ? 'bg-blue-100 text-blue-600 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200'}`}
+              title={assistantInfo.name}
+            >
+              {assistantInfo.name}
+            </span>
+          ) : (
+            <span
+              className={`inline-block px-2 py-[1px] rounded-sm font-medium truncate max-w-[140px] mr-1
+                ${isActive ? 'bg-red-50 text-red-500 border border-red-200 line-through' : 'bg-gray-100 text-gray-500 border border-gray-200'}`}
+              title="助手已无法使用"
+            >
+              助手已无法使用
+            </span>
+          )}
+          {/* 最后更改时间 */}
+          {data.gmtModified && (
+            <span className='text-[10px] text-gray-400'>
+              {dayjs(data.gmtModified).format('MM-DD HH:mm')}
+            </span>
+          )}
+        </div>
+      </div>
+      {!isDisabled && hovered && (
+        <Dropdown
+          menu={{ items: menuItems }}
+          trigger={['click']}
+          placement="bottom"
+        >
+          <MoreHorizontal
+            size={12}
+            className=" text-gray-400 absolute top-2 right-3 self-start hover:text-gray-800"
+            style={{ fontSize: 12, cursor: 'pointer' }}
+            onClick={(e: React.MouseEvent) => e.stopPropagation()}
+          />
+        </Dropdown>
+      )}
+    </div>
+  );
+}

package/src/adopters/GientechChat/Conversations/List.tsx

@@ -0,0 +1,127 @@
+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-2 text-xs text-gray-400">
+                {item.label}
+              </div>
+            );
+          }
+          return (
+            <Flipped key={item.data!.sessionId} flipId={item.data!.sessionId}>
+              <div style={style}>
+                <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/adopters/GientechChat/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/adopters/GientechChat/Conversations/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+
+import { GientechConversationBarList } from './List';
+import { Plus } 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;
+}> = ({ value,eventsEmit,setSearch,style }) => (
+  <div className="flex items-center gap-1 px-4 py-3 bg-white sticky top-0 z-10 border-b border-zinc-100" style={style}>
+    <input
+      className="flex-1 px-4 py-2 rounded-md bg-zinc-50 border border-zinc-200 focus:outline-none focus:border-blue-500 text-sm transition-all placeholder:text-zinc-400"
+      placeholder="搜索会话..."
+      value={value}
+      onChange={e => setSearch(e.target.value)}
+      style={{ minWidth: 0 }}
+    />
+    <button
+      className="flex items-center cursor-pointer justify-center ml-3 w-[38px] h-[38px] rounded-md bg-blue-500 text-white hover:bg-blue-600 transition-colors border-none"
+      onClick={() => {
+        eventsEmit && eventsEmit('conversation:create');
+      }}
+      title="新建会话"
+      style={{ minWidth: 34, minHeight: 34 }}
+    >
+      <Plus size={20} />
+    </button>
+  </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 || {};
+
+  return (
+    <div
+      className="h-full flex flex-col overflow-y-hidden bg-white rounded-2xl shadow-[0_4px_24px_0_rgba(0,0,0,0.06)] border border-zinc-100"
+      style={{ background: colors.sidebarBg || colors.background || undefined, color: colors.text || undefined, ...styles.container }}
+    >
+      {/* Header 区域美化 */}
+      <Header value={search} setSearch={setSearch} eventsEmit={eventsEmit} style={styles.header} />
+      {/* 会话列表区域，内容溢出时顶部有阴影提示 */}
+      <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 bg-gradient-to-b from-zinc-100/80 to-transparent z-20" />
+      </div>
+    </div>
+  );
+}

package/src/adopters/GientechChat/constants.tsx

@@ -0,0 +1,33 @@
+import { Brain, Folder, Search } from 'lucide-react';
+
+export const DefaultSenderConfig = {
+  actions: [
+    {
+      icon: <Folder size={20} />,
+      name: 'history',
+      badgeCount: 0,
+    },
+  ],
+
+  switchs: [
+    {
+      label: '联网搜索',
+      name: 'netSearch',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <Search className="w-3 h-3" />,
+    },
+    {
+      label: '推理思考',
+      name: 'reasoning',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: false,
+      icon: <Brain className="w-3 h-3" />,
+    },
+  ],
+};
+
+export const MaxHistoryChatDisplay = 5000;
+export const MaxHistoryItemDisplay = 3000;