@gientech/modual 2.0.4 → 2.0.5

package/src/modules/headlessChat/ReferenceBar.tsx

@@ -0,0 +1,783 @@
+import { ConfigProvider, Drawer, message, Tooltip } from 'antd';
+import SingleQa from '../../assets/img/singleQa.png';
+import DownLoad from '../../assets/img/downLoad.png';
+import GraphIcon from '../../assets/img/graphIcon.png';
+import WebSearch from '../../assets/img/webSearch.png';
+import Database from '../../assets/img/database.png';
+import { useEffect, useMemo, useState } from 'react';
+import './style.less';
+import DrawerGraphPreview from './referenceCom/DrawerGraphPreview';
+import { DrawerContent } from './referenceCom/DrawerContent';
+import DrawerPreview from './referenceCom/DrawerPreview';
+import DrawerDatabase from './referenceCom/DrawerDatabase';
+import DrawerTitle from './referenceCom/DrawerTitle';
+import TagCom from './referenceCom/TagCom';
+import {
+  downloadByStream,
+  fileViewTypes,
+  getFileIcon,
+  getFileName,
+  getMarkExcludeType,
+  getNameBySource,
+  getTypeBySource,
+  getUrlPrefix,
+  TempBaseUrl,
+} from './utils';
+import { DrawerType } from '../../lib_enter';
+import axios from 'axios';
+
+enum ListName {
+  KNOWLEDGE = 'knowledgeList',
+  SEARCH = 'searchList',
+  DATABASE = 'databaseList',
+  GRAPH = 'graphList',
+}
+
+export const bgColor: any = {
+  [ListName.KNOWLEDGE]: '#EAF4FD',
+  [ListName.SEARCH]: '#E8F7F0',
+  [ListName.DATABASE]: '#FFF4E5',
+  [ListName.GRAPH]: '#E7F8FB',
+};
+
+export const textColor: any = {
+  [ListName.KNOWLEDGE]: '#2072F0',
+  [ListName.SEARCH]: '#39B83F',
+  [ListName.DATABASE]: '#F48C14',
+  [ListName.GRAPH]: '#10BBD9',
+};
+
+const BTNS = [
+  {
+    key: ListName.KNOWLEDGE,
+    name: '知识库文档',
+  },
+  {
+    key: ListName.SEARCH,
+    name: '联网搜索',
+    hideBtns: true,
+  },
+  {
+    key: ListName.DATABASE,
+    name: '数据库',
+    hideBtns: true,
+  },
+  {
+    key: ListName.GRAPH,
+    name: '知识图谱',
+    hideBtns: true,
+  },
+];
+
+export const ReferenceBar = ({
+  type,
+  data,
+  token,
+  is_download,
+}: {
+  type: string;
+  data: any;
+  token: string;
+  is_download: boolean;
+}) => {
+  const [btns, setBtns] = useState(BTNS);
+  const [drawerType, setDrawerType] = useState<string>('mark');
+  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+  const [curFileInfo, setCurFileInfo] = useState<any>({});
+  const [activeBtn, setActiveBtn] = useState<any>(ListName.KNOWLEDGE);
+  const [lists, seLists] = useState<any>({
+    [ListName.KNOWLEDGE]: [],
+    [ListName.SEARCH]: [],
+    [ListName.DATABASE]: [],
+    [ListName.GRAPH]: [],
+  });
+
+  const referenceFile_question_upload = async (data: any) => {
+    if (fileViewTypes.includes(data.file_type)) {
+      setCurFileInfo({
+        ...data,
+        url: data.url || data.metadata.source ? `${TempBaseUrl}${data.metadata.source}` : data.url,
+      });
+
+      setDrawerType('preview');
+      setDrawerOpen(true);
+      return;
+    }
+    try {
+      const res: any = await axios.get(
+        `${getUrlPrefix()}/index/knowledgeBase/file/getFileStatusByUids?uids=${data.uid}`,
+        {
+          headers: { Authorization: token },
+        }
+      );
+      if (res?.length) {
+        const d = res[0];
+        setCurFileInfo({
+          ...data,
+          url: d.convertedFilePath,
+        });
+
+        setDrawerType('preview');
+        setDrawerOpen(true);
+      }
+    } catch (error) {}
+  };
+
+  const eventsEmit = (event: any, data: any) => {
+    console.log('事件触发:', event, data);
+    switch (event) {
+      // 点击title
+      case 'knowledge_referenceFile_title:click':
+        const d3 = data?.data;
+        if (data?.data?.file_type == 'video') {
+          const curTag: any = (d3?.tags || []).find((item: any) => item.id === d3.order_num);
+          setCurFileInfo(curTag.metadata);
+          setDrawerType('video');
+          setDrawerOpen(true);
+          return;
+        }
+        if (!data?.data?.metadata?.source) {
+          if (d3?.tags?.length) {
+            let curTag = d3.tags.find((item: any) => {
+              return item.id === d3.order_num;
+            });
+            if (!curTag) {
+              curTag = d3.tags[0];
+            }
+            d3.metadata = curTag.metadata;
+          }
+        }
+        setCurFileInfo(d3);
+        setDrawerType('preview');
+        setDrawerOpen(true);
+
+        break;
+      case 'graph_reference:click':
+        if (!data) return;
+        setDrawerType('graphPreview');
+        setCurFileInfo(data);
+        setDrawerOpen(true);
+        break;
+      case 'referenceFile_question':
+        referenceFile_question_upload(data.data);
+        break;
+      case 'referenceFile_view':
+        const d2 = data.data;
+        setCurFileInfo({
+          ...d2,
+          url: fileViewTypes.includes(d2.file_type)
+            ? d2.metadata.source
+              ? `${TempBaseUrl}${d2.metadata.source}`
+              : d2.convertedFilePath || d2.parsedFilePath
+            : d2.convertedFilePath || d2.parsedFilePath,
+        });
+
+        setDrawerType('preview');
+        setDrawerOpen(true);
+        break;
+      case 'reference_file:click':
+        if (data.file_type === 'image') return;
+
+        // if (data.file_type === "database") {
+        //   setDrawerType("database");
+        //   setCurFileInfo(data);
+        //   setDrawerOpen(true);
+        //   return;
+        // }
+
+        if (!data.parse_url) {
+          return message.warning('该文件未解析完成，请稍后再试');
+        }
+        setCurFileInfo({
+          ...data,
+          file_type: data.type,
+          file_name: data.file,
+        });
+        setDrawerType('preview');
+        setDrawerOpen(true);
+        break;
+      case 'database_referenceFile_title:click':
+        setDrawerType('database');
+        setCurFileInfo(data.data);
+        setDrawerOpen(true);
+        break;
+      // 点击溯源
+      case 'action_retrive_tag':
+      case 'retrive_tag:click':
+        if (data?.graph?.id) {
+          //图谱溯源
+          setDrawerType('graphPreview');
+          setCurFileInfo({ ...data.graph, traceNode: data.traceNode });
+          setDrawerOpen(true);
+          return;
+        }
+        if (!data?.tagInfo && !data?.file && !data?.referenceDoc) return;
+        const curFile = data?.referenceDoc || data?.file || data?.tagInfo;
+        const { pdfPages, parsedFilePath, order_num, metadata, tags } = curFile;
+        if (curFile.type == 'video') {
+          setCurFileInfo({
+            ...metadata,
+            displayType: 'retrive',
+          });
+          setDrawerType('video');
+          setDrawerOpen(true);
+          return;
+        }
+
+        const id = curFile.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';
+
+        setCurFileInfo({
+          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');
+        setDrawerOpen(true);
+        break;
+    }
+
+    // 监听所有交互事件
+  };
+
+  const getEmptyBoxs = useMemo(() => {
+    const n = 4 - btns.length;
+    const arr = Array(n)
+      .fill(null)
+      .map((v, i) => {
+        return {
+          name: '',
+          key: 100 + i,
+        };
+      });
+
+    const r = [...btns, ...arr];
+    console.log('rrrrrr', r);
+
+    return r;
+  }, [btns]);
+
+  const filterScore = (score: any) => {
+    if (isNaN(score)) {
+      return '';
+    } else {
+      return (+score).toFixed(2);
+    }
+  };
+
+  const getIcon = (btn: string, filtType?: string) => {
+    switch (btn) {
+      case ListName.KNOWLEDGE:
+        return getFileIcon(filtType as any);
+      case ListName.SEARCH:
+        return WebSearch;
+      case ListName.DATABASE:
+        return Database;
+      case ListName.GRAPH:
+        return GraphIcon;
+    }
+  };
+
+  const dealData = (type: string, data: any[]) => {
+    if (type === ListName.GRAPH) {
+      return data
+        .map(item => {
+          return {
+            ...item,
+            name: item.graphName,
+          };
+        })
+        .sort((a, b) => {
+          return (b.score || 0) - (a.score || 0);
+        });
+    }
+
+    if (type === ListName.KNOWLEDGE) {
+      return data
+        .map(item => {
+          return {
+            ...item,
+            file_type: getTypeBySource(item.source) || item.file_type,
+            name: getNameBySource(item.source) || item.file_name,
+            score: item.rrf_score,
+          };
+        })
+        .sort((a, b) => {
+          return (b.score || 0) - (a.score || 0);
+        });
+    }
+
+    if (type === ListName.SEARCH) {
+      return data
+        .map(item => {
+          return {
+            ...item,
+            name: item.file_name,
+          };
+        })
+        .sort((a, b) => {
+          return (b.score || 0) - (a.score || 0);
+        });
+    }
+
+    if (type === ListName.DATABASE) {
+      return data
+        .map(item => {
+          // 数据库引用：使用 databaseName 和 tableName 组合作为名称
+          const name = item.tableName
+            ? `${item.databaseName || '数据库'} - ${item.tableName}`
+            : item.databaseName || item.name || '数据库';
+          return {
+            ...item,
+            name,
+            file_name: name,
+            file_type: 'database',
+          };
+        })
+        .sort((a, b) => {
+          return (b.score || 0) - (a.score || 0);
+        });
+    }
+
+    return data;
+  };
+
+  const clickTag = (file: any, tag: any, btn: any) => {
+    switch (btn.key) {
+      case ListName.KNOWLEDGE:
+        const { pdfPages, parsedFilePath, order_num, tags } = file || {};
+        const id = tag.id || order_num || 'Unknown ID';
+        const curTag: any = (tags || []).find((item: any) => item.id === id);
+        if (file.type === 'video') {
+          console.log('sdgasdgag', {
+            file: {
+              ...file,
+              ...curTag,
+            },
+          });
+
+          return eventsEmit?.('retrive_tag:click', {
+            file: {
+              ...file,
+              ...curTag,
+            },
+          });
+        }
+        console.log('click knowledge tag', file, tag);
+        if (!file) return;
+
+        if (!curTag) return;
+        const { metadata } = curTag;
+        // 解析 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';
+
+        setCurFileInfo({
+          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');
+        setDrawerOpen(true);
+        break;
+      case ListName.SEARCH:
+        console.log('click search tag', file, tag);
+        break;
+      case ListName.DATABASE:
+        console.log('click database tag', file, tag);
+        // 打开数据库详情抽屉
+        setDrawerType('database');
+        setCurFileInfo({
+          ...file,
+          metadata: file.metadata || {},
+          fetchUrl: file.fetchUrl || file.metadata?.fetchUrl || '',
+        });
+        setDrawerOpen(true);
+        break;
+      case ListName.GRAPH:
+        console.log('click graph tag', file, tag);
+        setDrawerType('graphPreview');
+        setCurFileInfo({
+          ...file,
+          traceNode: (data?.traceNode || []).find((item: any) => {
+            return item.id === tag.id;
+          }),
+        });
+        setDrawerOpen(true);
+        break;
+    }
+  };
+
+  useEffect(() => {
+    if (type !== DrawerType.REFERENCELIST) return;
+    console.log('data in reference drawer', data);
+    if (!data) return;
+    const { graphRefs, knowledgeRefs, webRefs, databaseRefs } = data;
+    if (graphRefs?.length) {
+      lists[ListName.GRAPH] = dealData(ListName.GRAPH, graphRefs);
+    }
+    if (knowledgeRefs?.length) {
+      lists[ListName.KNOWLEDGE] = dealData(ListName.KNOWLEDGE, knowledgeRefs);
+    }
+    if (webRefs?.length) {
+      lists[ListName.SEARCH] = dealData(ListName.SEARCH, webRefs);
+    }
+    // 处理数据库引用（使用摘要信息，不包含完整数据行）
+    if (databaseRefs?.length) {
+      lists[ListName.DATABASE] = dealData(ListName.DATABASE, databaseRefs);
+    }
+
+    const curBtns = BTNS.filter((item: any) => {
+      return lists[item.key]?.length;
+    }).sort((a, b) => {
+      return (lists[b.key]?.length || 0) - (lists[a.key]?.length || 0);
+    });
+
+    setBtns(curBtns);
+
+    if (curBtns?.length) {
+      setActiveBtn(curBtns[0].key);
+    }
+
+    seLists({ ...lists });
+  }, [data]);
+
+  return (
+    <>
+      <div className="listWrap w-full h-full">
+        <DrawerTitle
+          title="知识溯源"
+          setOpen={() => {
+            const closeEvent = new CustomEvent('aichat:right_set', {
+              detail: { collapsed: true },
+            });
+            window.dispatchEvent(closeEvent);
+          }}
+        />
+        <div style={{ height: 'calc(100% - 60px)' }}>
+          <div
+            className="tabs"
+            style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 20px' }}
+          >
+            {getEmptyBoxs.map(item => (
+              <div
+                key={item.key}
+                className="tab-item"
+                style={{
+                  padding: '5.5px 12px',
+                  backgroundColor: !item.name
+                    ? 'transparent'
+                    : activeBtn === item.key
+                      ? '#4E6EF2'
+                      : '#F5F6F9',
+                  cursor: 'pointer',
+                  borderRadius: '4px',
+                  color: activeBtn === item.key ? '#FFFFFF' : '#4E5969',
+                  fontSize: '14px',
+                  minWidth: '80px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                onClick={() => {
+                  if (item.name) {
+                    setActiveBtn(item.key);
+                  }
+                }}
+              >
+                {item.name}
+              </div>
+            ))}
+          </div>
+          <div
+            className="listBox"
+            style={{
+              height: 'calc(100% - 66px)',
+              overflowY: 'auto',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              // 优化滚动性能（Windows 上特别重要）
+              willChange: 'scroll-position',
+              // 启用硬件加速
+              transform: 'translateZ(0)',
+            }}
+          >
+            {btns.map((item: any) => {
+              let list: any[] = lists[item.key] || [];
+              if (activeBtn !== item.key) return null;
+              return (
+                <div key={item.key}>
+                  {list.map(
+                    (i: {
+                      name: string;
+                      id: string;
+                      score: number | string;
+                      tags?: any[];
+                      hideBtns?: boolean;
+                      file_type?: string;
+                      link?: string;
+                      metadata: any;
+                      file_name: any;
+                      parsedFilePath: any;
+                      fetchUrl?: string;
+                      type: string;
+                    }) => {
+                      return (
+                        <div
+                          key={i.id}
+                          style={{
+                            width: '360px',
+                            padding: '4px 8px',
+                            borderRadius: '4px',
+                            margin: '6px 0',
+                            cursor: 'pointer',
+                          }}
+                          className="listItemBox"
+                          onClick={() => {
+                            if (item.key === ListName.SEARCH) {
+                              window.open(i.link, '_blank');
+                            }
+                          }}
+                        >
+                          <div
+                            style={{
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                            }}
+                          >
+                            <div
+                              style={{
+                                width: item.hideBtns ? '339px' : '288px',
+                                fontSize: '14px',
+                                color: '#1D2129',
+                                fontWeight: '700',
+                                display: 'flex',
+                                alignItems: 'center',
+                              }}
+                            >
+                              <img
+                                src={getIcon(item.key, i.file_type)}
+                                style={{ width: '16px', height: '16px', marginRight: '2px' }}
+                              />
+                              <Tooltip
+                                placement="topLeft"
+                                title={i?.name?.length > 16 ? i.name : ''}
+                              >
+                                <div
+                                  style={{
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    width: item.hideBtns ? '322px' : '258px',
+                                  }}
+                                  onClick={() => {
+                                    if (item.key === ListName.KNOWLEDGE) {
+                                      eventsEmit?.('knowledge_referenceFile_title:click', {
+                                        data: {
+                                          ...i,
+                                          file_type: i.file_type,
+                                          file_name: i.file_name,
+                                          metadata: i.metadata,
+                                          parsedFilePath: i.parsedFilePath,
+                                        },
+                                      });
+                                    } else if (item.key === ListName.DATABASE) {
+                                      // 点击数据库项标题时，打开数据库详情抽屉
+                                      setDrawerType('database');
+                                      setCurFileInfo({
+                                        ...i,
+                                        metadata: i.metadata || {},
+                                        fetchUrl: i.fetchUrl || i.metadata?.fetchUrl || '',
+                                      });
+                                      setDrawerOpen(true);
+                                    }
+                                  }}
+                                >
+                                  {i.name}
+                                </div>
+                              </Tooltip>
+                            </div>
+                            <div
+                              style={{
+                                width: '52px',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                marginRight: '8px',
+                                display: item.hideBtns || i.type === 'video' ? 'none' : 'flex',
+                              }}
+                            >
+                              <div></div>
+                              {/* <img
+                                src={SingleQa}
+                                style={{ width: '16px', height: '16px', cursor: 'pointer' }}
+                                onClick={() => {
+                                  eventsEmit?.('referenceFile_filechat', {
+                                    data: {
+                                      ...i,
+                                      file_type: i.file_type,
+                                      file_name: i.file_name,
+                                      metadata: i.metadata,
+                                      parsedFilePath: i.parsedFilePath,
+                                    },
+                                  });
+                                }}
+                              />
+                              <div
+                                style={{ borderRight: '1px solid #E5E6EB', height: '14px' }}
+                              ></div> */}
+                              <img
+                                src={DownLoad}
+                                style={{
+                                  width: '16px',
+                                  height: '16px',
+                                  cursor: is_download ? 'pointer' : 'not-allowed',
+                                }}
+                                onClick={() => {
+                                  if ((!i?.tags?.length && !i?.metadata?.source) || !is_download)
+                                    return;
+                                  const metadata: any = (i?.tags || [])[0]?.metadata || i?.metadata;
+                                  downloadByStream({
+                                    filePath: `${TempBaseUrl}${metadata.source}`,
+                                    fileName: getFileName({ metadata }),
+                                    token,
+                                  });
+                                }}
+                              />
+                            </div>
+                          </div>
+                          {!!(
+                            typeof i.score === 'string' ||
+                            typeof i.score === 'number' ||
+                            (i?.tags?.length && i.tags.length > 0 && i.tags.length <= 10)
+                          ) && (
+                            <div
+                              style={{
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                height: '18px',
+                                marginTop: '4px',
+                              }}
+                            >
+                              {(typeof i.score === 'string' || typeof i.score === 'number') && (
+                                <div
+                                  style={{
+                                    backgroundColor: '#F2F2FB',
+                                    borderRadius: '4px',
+                                    padding: '2px 3px',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    fontSize: '12px',
+                                  }}
+                                >
+                                  <span style={{ color: '#4E5969', marginRight: '6px' }}>
+                                    分数:
+                                  </span>
+                                  <span style={{ color: '#1D2129' }}>{filterScore(i.score)}</span>
+                                </div>
+                              )}
+                              <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end' }}>
+                                {(i?.tags?.length && i.tags.length > 0 && i.tags.length <= 10
+                                  ? i.tags
+                                  : []
+                                ).map((j: any) => {
+                                  return (
+                                    <TagCom
+                                      key={j.id}
+                                      i={i}
+                                      item={item}
+                                      j={j}
+                                      clickTag={clickTag}
+                                    />
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          )}
+                          <div
+                            style={{
+                              flex: 1,
+                              display: 'flex',
+                              justifyContent: 'flex-start',
+                              marginTop: '4px',
+                            }}
+                          >
+                            {(i?.tags?.length && i.tags.length > 10 ? i.tags : []).map((j: any) => {
+                              return (
+                                <TagCom key={j.id} i={i} item={item} j={j} clickTag={clickTag} />
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    }
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: 'none' },
+          },
+        }}
+      >
+        <Drawer
+          autoFocus={false}
+          onClose={() => setDrawerOpen(false)}
+          open={drawerOpen}
+          width={activeBtn === ListName.GRAPH ? '100%' : 720}
+          className="overflow-x-hidden"
+          destroyOnClose
+          afterOpenChange={open => {
+            if (!open) {
+              setCurFileInfo(null);
+            }
+          }}
+        >
+          {drawerType === 'graphPreview' && (
+            <DrawerGraphPreview
+              curFileInfo={curFileInfo as any}
+              onClose={setDrawerOpen}
+              token={token}
+            />
+          )}
+          {drawerType === 'mark' && (
+            <DrawerContent content={curFileInfo as any} onClose={setDrawerOpen} token={token} />
+          )}
+          {drawerType === 'preview' && (
+            <DrawerPreview curFileInfo={curFileInfo} onClose={setDrawerOpen} token={token} />
+          )}
+          {drawerType === 'database' && (
+            <DrawerDatabase curFileInfo={curFileInfo} onClose={setDrawerOpen} token={token} />
+          )}
+        </Drawer>
+      </ConfigProvider>
+    </>
+  );
+};