@gientech/modual 2.0.9 → 2.0.10

package/src/modules/headlessChat/ReferenceBar.tsx

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