@mxmweb/aichat 1.1.7 → 1.1.8

package/src/adopters/gientechCommon/components/Messages/RetriveItem.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import { Download, Eye, MessageSquare } from 'lucide-react';
+import { getFileTypeIcon } from '../FileManager';
+import { Tooltip } from 'antd';
+
+// 定义召回文件类型
+interface Tag {
+  id: string;
+  index: string;
+  image_urls: string[];
+}
+
+interface RetriveFile {
+  file_id: string;
+  file_name: string;
+  file_type: string;
+  score: number;
+  tags: Tag[];
+  parsedFilePath?: string;
+}
+
+interface RetriveItemProps {
+  files: RetriveFile[];
+  onQa?: (file: RetriveFile) => void;
+  onPreview?: (file: RetriveFile) => void;
+  onDownload?: (file: RetriveFile) => void;
+  styles?: any;
+  onTagClick?: (tag: Tag, file: RetriveFile) => void;
+  eventsEmit?: (eventName: string, payload?: any) => void;
+}
+
+// const mockFiles: RetriveFile[] = [
+//   {
+//     file_id: '1',
+//     file_name: '测试文档1.pdf',
+//     file_type: 'pdf',
+//     score: 0.98,
+//     tags: [
+//       { id: 't1', name: '标签A' },
+//       { id: 't2', name: '标签B' },
+//     ],
+//   },
+//   {
+//     file_id: '2',
+//     file_name: '说明文档.docx',
+//     file_type: 'docx',
+//     score: 0.87,
+//     tags: [
+//       { id: 't3', name: '标签C' },
+//     ],
+//   },
+//   {
+//     file_id: '3',
+//     file_name: '图片示例.png',
+//     file_type: 'png',
+//     score: 0.92,
+//     tags: [
+//       { id: 't4', name: '图片标签' },
+//     ],
+//   },
+// ];
+
+const getThemeColor = (styles: any, key: string, fallback: string) =>
+  styles?.theme?.colors?.[key] || fallback;
+
+const RetriveItem: React.FC<RetriveItemProps> = ({ files , onQa, onPreview, onDownload, styles, onTagClick, eventsEmit }) => {
+  // 主题色
+  const borderColor = getThemeColor(styles, 'border', '#F2F3F5');
+  const bgHover = getThemeColor(styles, 'background', '#F5F6FA');
+  const textColor = getThemeColor(styles, 'text', '#1F2329');
+  const disabledText = getThemeColor(styles, 'disabledText', '#8F959E');
+
+  const btnHover = getThemeColor(styles, 'btnHover', '#E5E6EB');
+
+  return (
+    <div className="w-full">
+      <ul className="divide-y divide-gray-50 flex flex-col gap-2">
+        {files.map((file: RetriveFile, idx: number) => {
+          console.log('[RetriveItem file]', file);
+          return (
+            <li
+              key={file.parsedFilePath || file.file_id + '-' + idx}
+              className="flex items-center px-3 py-2 group transition"
+              style={{ minHeight: 56, borderColor, borderRadius: 6, cursor: 'default', background: undefined }}
+              onMouseEnter={e => (e.currentTarget.style.background = bgHover)}
+              onMouseLeave={e => (e.currentTarget.style.background = '')}
+            >
+              {/* 文件icon+文件名 */}
+              <div className="flex items-center min-w-0 flex-1">
+                {getFileTypeIcon(file.file_type, styles)}
+                <span
+                  className="font-medium text-sm ml-2 truncate max-w-[200px]"
+                  title={file.file_name}
+                  style={{ color: textColor }}
+                >
+                  {file.file_name}
+                </span>
+              </div>
+              {/* 分数+标签 */}
+              <div className="flex items-center gap-x-1 min-w-[120px] ml-4">
+                {(() => {
+                  // tags去重并排序
+                  const seen = new Set();
+                  const uniqueSortedTags = (file.tags || [])
+                    .filter(tag => {
+                      if (seen.has(tag.id)) return false;
+                      console.log(tag,'tag')
+                      seen.add(tag.id);
+                      return true;
+                    })
+                    .sort((a, b) => Number(a.index) - Number(b.index));
+                  return uniqueSortedTags.map(tag => (
+                    <span
+                      className='cursor-pointer'
+                      key={tag.id}
+                      style={{
+                        display: 'inline-block',
+                        background: '#e6f7ff',
+                        color: '#1890ff',
+                        border: '1px solid rgba(114,187,255,0.3)',
+                        borderRadius: 6,
+                        padding: '1px 6px',
+                        margin: '0 2px',
+                        fontWeight: 600,
+                        width: 21,
+                        fontSize: 12,
+                        lineHeight: '17px',
+                        verticalAlign: 'middle',
+                      }}
+                      onClick={() => {
+                        onTagClick?.(tag, file);
+                        eventsEmit?.('referenceFile_question', { data: file });
+                      }}
+                    >
+                      {tag.index}
+                    </span>
+                  ));
+                })()}
+                <span className="text-xs px-5 border-r border-solid border-gray-300  ml-2" style={{ color: disabledText }}>分数: {Number(file.score).toFixed(2)}</span>
+              </div>
+              {/* 操作按钮组 */}
+              <div className="flex pl-5 items-center gap-1 ml-auto">
+                <Tooltip title="单文档问答" placement="top">
+                  <button
+                    onClick={() => {
+                      onQa?.(file);
+                      eventsEmit?.('referenceFile_question', { data: file });
+                    }}
+                    className="flex cursor-pointer items-center justify-center w-8 h-8 rounded transition group"
+                    style={{ outline: 'none', border: 'none', background: 'none' }}
+                    onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                  >
+                    <MessageSquare className="w-4 h-4" style={{ color: disabledText }} />
+                  </button>
+                </Tooltip>
+                <Tooltip title="预览" placement="top">
+                  <button
+                    onClick={() => {
+                      onPreview?.(file);
+                      eventsEmit?.('referenceFile_view', { data: file });
+                    }}
+                    className="flex cursor-pointer items-center justify-center w-8 h-8 rounded transition group"
+                    style={{ outline: 'none', border: 'none', background: 'none' }}
+                    onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                  >
+                    <Eye className="w-4 h-4" style={{ color: disabledText }} />
+                  </button>
+                </Tooltip>
+                <Tooltip title="下载" placement="top">
+                  <button
+                    onClick={() => {
+                      onDownload?.(file);
+                      eventsEmit?.('referenceFile_download', { data: file });
+                    }}
+                    className="flex cursor-pointer items-center justify-center w-8 h-8 rounded transition group"
+                    style={{ outline: 'none', border: 'none', background: 'none' }}
+                    onMouseEnter={e => (e.currentTarget.style.background = btnHover)}
+                    onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                  >
+                    <Download className="w-4 h-4" style={{ color: disabledText }} />
+                  </button>
+                </Tooltip>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default RetriveItem;

package/src/adopters/gientechCommon/components/Messages/UserChatBox.tsx

@@ -0,0 +1,211 @@
+import dayjs from 'dayjs';
+import { RefreshCcw, File, Eye, FolderUp } from 'lucide-react';
+import { useMemo, useEffect } from 'react';
+import { AiChatStyles, defaultTheme } from '../../../../components/defaultStyleSet';
+import { uid } from 'uid';
+import { getFileTypeIcon } from '../FileManager';
+import ReferenceCard from './ReferenceCard';
+
+
+
+const createUserChatBoxStyles = (colors: any, icons: any, classId: string) => {
+  return `
+    .user-chatbox-${classId} .user-avatar {
+      background: url('${icons.userAvatar}') center/cover no-repeat;
+      border-radius: 50%;
+      width: 2rem; height: 2rem;
+      box-shadow: 0 2px 8px ${colors.shadow}22;
+    }
+    .user-chatbox-${classId} .user-card {
+      background: ${colors.background};
+      border-radius: 0.5rem;
+      box-shadow: 0 2px 8px ${colors.shadow}11;
+    }
+    .user-chatbox-${classId} .user-time {
+      color: ${colors.disabled};
+    }
+    .user-chatbox-${classId} .user-content {
+      color: ${colors.text};
+    }
+    .user-chatbox-${classId} .user-file {
+      background: ${colors.background};
+      border: 1px solid ${colors.border}E6;
+      color: ${colors.disabledText};
+    }
+    .user-chatbox-${classId} .user-file .file-icon {
+      color: ${colors.text};
+    }
+    .user-chatbox-${classId} .user-file .file-name {
+      color: ${colors.text};
+    }
+    .user-chatbox-${classId} .user-file:hover {
+      background: ${colors.background};
+      border-color: ${colors.text};
+    }
+    .user-chatbox-${classId} .user-actions-btns button {
+      color: ${colors.disabled};
+      background: none;
+      border: none;
+      transition: color 0.2s;
+    }
+    .user-chatbox-${classId} .user-actions-btns button:hover {
+      color: ${colors.primary};
+    }
+    .user-chatbox-${classId} .user-actions-btns button.active,
+    .user-chatbox-${classId} .user-actions-btns button.active span,
+    .user-chatbox-${classId} .user-actions-btns button.active svg {
+      color: ${colors.primary} !important;
+      fill: ${colors.primary} !important;
+    }
+  `;
+};
+
+export default function UserChatBox(props: {
+  time: string;
+  content: string;
+  isLast: boolean;
+  eventsEmit: any;
+  idx: number;
+  filePaths: string;
+  audioUrl: string;
+  queryId: string;
+  styles?: AiChatStyles;
+  currentFiles?: any[];
+}) {
+  const { time, content, isLast, eventsEmit, idx, filePaths, audioUrl, queryId, styles, currentFiles } = props;
+  const handleRetry = () => {
+    eventsEmit?.('action_retry', { idx, content, audioUrl, filePaths, queryId });
+  };
+
+  const classId = useMemo(() => uid(), []);
+  const theme = useMemo(() => ({
+    colors: { ...defaultTheme.colors, ...styles?.theme?.colors },
+    icons: { ...defaultTheme.icons, ...styles?.theme?.icons }
+  }), [styles]);
+  const { colors, icons } = theme;
+
+  useEffect(() => {
+    const styleTag = document.createElement('style');
+    styleTag.innerHTML = createUserChatBoxStyles(colors, icons, classId);
+    styleTag.id = `user-chatbox-style-${classId}`;
+    document.head.appendChild(styleTag);
+    return () => {
+      const el = document.getElementById(styleTag.id);
+      if (el) el.remove();
+    };
+  }, [colors, icons, classId]);
+
+  const files = useMemo(() => {
+    if (Array.isArray(currentFiles)) {
+      return currentFiles;
+    }else{
+      const parsed = JSON.parse(currentFiles || '[]');
+      return parsed;
+    }
+    return []
+  }, [filePaths, currentFiles]);
+   // console.log('ccccccc',files,content)
+  return (
+    <div className={`user-chatbox-${classId}`}>
+      <div className="flex items-start mb-2 animate-fadeIn w-full text-wrap">
+        <div className="user-avatar mr-3 shadow-sm flex-shrink-0" />
+        <div className="flex-1">
+          <div className="flex-col">
+            <div className="text-xs user-time mb-3">
+              {dayjs(time).format('YYYY-MM-DD HH:mm:ss')}
+            </div>
+            <div className="user-card p-4 inline-block max-w-[80%] border shadow-sm"
+            style={{borderColor:colors.border}}
+            >
+              {content && <div className="user-content break-words">{content}</div>}
+              {files.length > 0 && (
+                <div className="mt-3 pt-3 border-t" style={{ borderTop: `1px solid ${colors.disabled}33`}}>
+                   <div className="text-sm mt-4 pb-2 ai-time"
+                     style={{color:colors.disabledText}}
+                   >上传文档： </div>
+                  <div className="flex flex-wrap gap-2">
+                    {files.map((file: any) => {
+
+                      return(
+                        <ReferenceCard
+                          key={file.uid || file.name}
+                          file_type={file.type}
+                          file_name={file.name}
+                          url={file.url || file.filePath}
+                          parse_url={file.parseUrl}
+                          retrieve_tags={file.retrieveTags}
+                          eventsEmit={eventsEmit}
+                          styles={styles}
+                          size={file.size}
+                          onlyDownloadTypes={['xlsx', 'csv', 'xls', 'ppt', 'pptx', 'pub', 'json', 'doc', 'docx']}
+                          isUploadFile={true}
+                        />
+                      )
+                      //const fileType = getFileTypeByName(file.name);
+                      // const fileType = file.name.split('.').pop() || '';
+                      // const icon = getFileTypeIcon(fileType, styles);
+                      // if (fileType === 'image' || fileType === 'jpg' || fileType === 'jpeg' || fileType === 'png' || fileType === 'gif' || fileType === 'bmp' || fileType === 'webp') {
+                      //   return (
+                      //     <div
+                      //       key={file.uid || file.name}
+                      //       className="relative group w-24 h-24 cursor-pointer flex items-center justify-center"
+                      //       onClick={() =>
+                      //         eventsEmit?.('user_chat:image_preview_clicked', { file })
+                      //       }
+                      //     >
+                      //       <img
+                      //         src={file.filePath}
+                      //         alt={file.name}
+                      //         className="w-full h-full object-cover rounded-md border"
+                      //         style={{ borderColor: colors.border }}
+                      //       />
+                      //       <div className="absolute inset-0 bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-md">
+                      //         <div className='flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity'>
+                      //           <Eye className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+                      //           <div className='text-white text-center'>查看图片</div>
+                      //         </div>
+                      //       </div>
+                      //     </div>
+                      //   );
+                      // }
+                      // return (
+                      //   <div
+                      //     key={file.uid || file.name}
+                      //     className="user-file relative group w-24 h-24 flex flex-col items-center justify-center cursor-pointer backdrop-blur-sm rounded-lg border p-2 text-sm transition-all"
+                      //     title={file.name}
+                      //     onClick={() => eventsEmit?.('user_chat:file_open_clicked', { file })}
+                      //     style={{ borderColor: colors.border }}
+                      //   >
+                      //     {icon}
+                      //     <span className="file-name font-medium truncate text-center" style={{ fontSize: 10, maxWidth: '5.5rem' }}>{file.name}</span>
+                      //     <div className="absolute text-center inset-0 cursor-pointer bg-transparent group-hover:bg-black/40 transition-all duration-300 flex items-center justify-center rounded-lg">
+                      //       <div className='flex flex-col items-center text-xs justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity'>
+                      //         <FolderUp className="text-white opacity-0 group-hover:opacity-100 transition-opacity mx-auto" />
+                      //         <div className='text-white text-center' style={{ fontSize: 10 }}>打开文件</div>
+                      //       </div>
+                      //     </div>
+                      //   </div>
+                      // );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {isLast && (
+        <div className="w-full mt-2 user-actions-btns flex py-2 items-center justify-end gap-2 px-2">
+          <button
+            className="flex cursor-pointer items-center gap-1 text-sm"
+            onClick={handleRetry}
+            title="重发"
+          >
+            <RefreshCcw size={13} />
+            <span className="hidden text-xs sm:inline">重发</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/adopters/gientechCommon/components/RenameModal.tsx

@@ -0,0 +1,75 @@
+import { Button, ConfigProvider, Form, Input, Modal } from 'antd';
+const { useForm } = Form;
+import { useEffect } from 'react';
+
+export const RenameModal = ({ isModalOpen, handleOk, handleCancel, data }: any) => {
+  const modalStyles = {
+    header: {
+      height: '60px',
+      borderBottom: '1px solid #F0F0F0',
+      display: 'flex',
+      paddingLeft: '24px',
+      alignItems: 'center',
+      marginBottom: '16px',
+    },
+    title: { fontSize: '16px' },
+    body: { padding: '0 24px' },
+    mask: {},
+    footer: { marginTop: '0px', padding: '0 24px 16px 24px' },
+    content: { padding: 0 },
+  };
+  const [rename_form] = useForm();
+  useEffect(() => {
+    if (!isModalOpen) {
+      rename_form.resetFields();
+      return;
+    }
+    rename_form.setFieldValue('new_name', data?.label);
+  }, [data, isModalOpen]);
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles,
+      }}
+    >
+      <Modal
+        title={<div className="text-[16px]">编辑会话名称</div>}
+        closeIcon={null}
+        open={isModalOpen}
+        width={520}
+        className="[&:[.ant-modal-content]]:bg-red"
+        footer={
+          <div className="mt-[16px] flex justify-end">
+            <Button children="取消" onClick={handleCancel} className="mr-[8px]" />
+            <Button
+              children="确认"
+              onClick={async () => {
+                try {
+                  const data = await rename_form.validateFields();
+                  handleOk('ok_rename', data);
+                } catch (e) {
+                  console.log(e);
+                  return;
+                }
+              }}
+              type="primary"
+              className="border-none"
+            />
+          </div>
+        }
+      >
+        <Form form={rename_form}>
+          <Form.Item
+            name="new_name"
+            rules={[
+              { required: true, message: '请输入' },
+              { max: 100, message: '最大字数限制100' },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
+  );
+};

package/src/adopters/gientechCommon/components/style.less

@@ -0,0 +1,11 @@
+.selfTree {
+  .ant-tree .ant-tree-treenode {
+    padding: 4px 0 4px 0;
+  }
+  .ant-tree-switcher {
+    display: none;
+  }
+  .ant-tree-indent {
+    display: none;
+  }
+}

package/src/adopters/gientechCommon/configs/commonConfig.ts

@@ -0,0 +1,2 @@
+export const maxPollCount = 1000;
+export const maxPollInterval = 3000;

package/src/adopters/gientechCommon/configs/stylesConfig.ts

@@ -0,0 +1,142 @@
+// 主题类型定义
+export type SizeType = 'sm' | 'md' | 'lg'
+export type FontWeightType = 'normal' | 'bold' |'thin'
+export type FontFamilyType = 'default' | 'serif' | 'mono'
+
+export interface AiChatStyles {
+  theme?: AppTheme
+  mode?: 'light' | 'dark'
+  [key: string]: any
+}
+
+export interface ThemeColors {
+  primary: string
+  secondary: string
+  success: string
+  warning: string
+  error: string
+  info: string
+  background: string
+  text: string
+  border: string
+  disabled: string
+  disabledBackground: string
+  disabledText: string
+  shadow: string
+  appBackground: string
+}
+
+export interface ThemeOthers {
+
+}
+
+export interface ThemeSpace {
+  sidebar: string
+  size: string
+  radius: string
+  padding: string
+  margin: string
+  shadow: string
+  lineHeight: string
+}
+
+export interface ThemeIcons {
+  aiAvatar: string
+  userAvatar: string
+  pdf: string
+  word: string
+  image: string
+  video: string
+  audio: string
+  excel: string
+  ppt: string
+}
+
+export interface AppTheme {
+  colors: ThemeColors
+
+  space: ThemeSpace
+  icons: ThemeIcons
+  others: ThemeOthers
+}
+
+// 默认主题实现
+export const defaultTheme: AppTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+    shadow: '#000000',
+    appBackground: 'transparent',
+  },
+  space: {
+    sidebar: 'md',
+    size: 'md',
+    radius: 'md',
+    padding: 'md',
+    margin: 'md',
+    shadow: 'md',
+    lineHeight: 'md',
+  },
+  icons: {
+    aiAvatar: 'http://10.15.12.13:9000/dev-rag-data/header_pic/JIABINBIN00/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231212161213.jpg',
+    userAvatar: 'http://10.15.12.13:9005/assets/nav-logo-BKaOCDqi.png',
+    pdf: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/pdf-icon.png',
+    word: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/word-icon.png',
+    image: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/image-icon.png',
+    video: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/video-icon.png',
+    audio: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/audio-icon.png',
+    excel: 'https://ai-chat-1326151111.cos.c zap-shanghai.myqcloud.com/excel-icon.png',
+    ppt: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/ppt-icon.png',
+  },
+  others: {
+    baseFontWeight: 'normal',
+  },
+}
+
+// SizeType 映射表
+export const sidebarMap = {
+  sm: '240px',
+  md: '260px',
+  lg: '280px',
+};
+export const sizeMap = {
+  sm: '12px',
+  md: '16px',
+  lg: '20px',
+};
+export const radiusMap = {
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+};
+export const paddingMap = {
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+};
+export const marginMap = {
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+};
+export const shadowMap = {
+  sm: '0 1px 2px #eee',
+  md: '0 2px 8px #ddd',
+  lg: '0 4px 16px #ccc',
+};
+export const lineHeightMap = {
+  sm: '1.2',
+  md: '1.5',
+  lg: '2',
+};
+