@gientech/modual 2.0.8 → 2.0.9

package/src/utils/gientechCommon/components/Messages/WebRetriveItem.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { ArrowDownToLine, ArrowUpToLine, Link } from 'lucide-react';
+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;
+  link: string;
+}
+
+interface RetriveItemProps {
+  is_download?: string;
+  from?: string;
+  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 WebRetriveItem: React.FC<any> = ({
+  files,
+  onQa,
+  onPreview,
+  onDownload,
+  styles,
+  onTagClick,
+  eventsEmit,
+  from,
+  is_download,
+}) => {
+  // 主题色
+  const bgHover = getThemeColor(styles, 'background', '#F5F6FA');
+  const textColor = getThemeColor(styles, 'text', '#1F2329');
+  const disabledText = getThemeColor(styles, 'disabledText', '#8F959E');
+  const [open, setOpen] = useState(false);
+  const [showImage, setShowImage] = useState(true);
+  const getIcon = (url: string) => {
+    const origin = new URL(url).origin;
+    // 2. 尝试获取网页中定义的 favicon
+    if (origin) {
+      return `${origin}/favicon.ico`;
+    } else {
+      return false;
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <ul className="divide-y divide-gray-50 flex flex-col gap-2">
+        {(open ? files : files.slice(0, 2)).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-[4px] group transition"
+              style={{
+                minHeight: 32,
+                borderRadius: 6,
+                cursor: 'default',
+                border: 'none',
+              }}
+              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)} */}
+                {showImage ? (
+                  <img
+                    src={getIcon(file.link) as any}
+                    width={20}
+                    height={20}
+                    onError={() => {
+                      setShowImage(false);
+                    }}
+                  />
+                ) : (
+                  <Link width={18} height={18} />
+                )}
+                <Tooltip title={file.file_name}>
+                  <a
+                    className="font-medium text-sm ml-2 truncate max-w-[200px] cursor-pointer hover:underline underline-offset-4  decoration-dashed"
+                    style={{ color: textColor }}
+                    href={file.link}
+                    target="_blank"
+                  >
+                    {file.file_name}
+                  </a>
+                </Tooltip>
+              </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: '#dcf9d8',
+                        color: '#23eb0d',
+                        border: '1px solid #c3f7bd',
+                        borderRadius: 6,
+                        padding: '1px 6px',
+                        margin: '0 2px',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        lineHeight: '17px',
+                        verticalAlign: 'middle',
+                      }}
+                      onClick={e => {
+                        e.stopPropagation();
+                        onTagClick?.({ ...tag, fromtype: '1' }, 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 w-[124px]"></div>
+            </li>
+          );
+        })}
+      </ul>
+      {files?.length > 2 && (
+        <div
+          className="w-full flex justify-center mt-[8px]"
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          {open ? (
+            <ArrowUpToLine className="cursor-pointer w-[16px] text-[#555]" />
+          ) : (
+            <ArrowDownToLine className="cursor-pointer w-[16px] text-[#555]" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WebRetriveItem;

package/src/utils/gientechCommon/components/Messages/defaultStyleSet.tsx

@@ -0,0 +1,148 @@
+// 主题类型定义
+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
+  [key: string]: string | undefined
+}
+
+export interface ThemeOthers {
+
+}
+
+export interface ThemeSpace {
+  sidebar?: string
+  size?: string
+  radius?: string
+  padding?: string
+  margin?: string
+  shadow?: string
+  lineHeight?: string
+  [key: string]: string | undefined
+}
+
+export interface ThemeIcons {
+  aiAvatar?: string
+  userAvatar?: string
+  pdf?: string
+  word?: string
+  image?: string
+  video?: string
+  audio?: string
+  excel?: string
+  ppt?: string
+  docx?: string
+  sheets?: string
+  pptx?: string
+  [key: string]: string | undefined
+}
+
+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: '#fff',
+  },
+  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',
+};
+