@gientech/modual 1.3.2 → 1.3.3

package/src/examples/chat/components/DrawerGraphPreview.tsx

@@ -0,0 +1,78 @@
+import axios from 'axios';
+import { useEffect, useMemo, useState } from 'react';
+import { rag_dev_server } from '../../../utils/testconfigs';
+import '@mxmweb/nodegraph/style.css';
+import { KnowledgeGraphPreview, registerPreviewViewer } from '@mxmweb/nodegraph';
+registerPreviewViewer();
+
+const DrawerGraphPreview = ({ curFileInfo, onClose }: { curFileInfo: any; onClose: any }) => {
+  const [config, setConfig] = useState({
+    title: '',
+    subtitle: '',
+    backgroundColor: '#f8f9fa',
+    showGrid: true,
+    showLegend: false,
+    showTooltip: true,
+    showFullscreen: false,
+    showMinimap: false,
+  });
+  const [graphList, setGraphList] = useState<any>({ nodeList: [], edgeList: [] });
+  const getGraphData = async (curFileInfo: any) => {
+    if (!curFileInfo?.id || !curFileInfo?.cyphers || !curFileInfo?.fetchUrl) return;
+    try {
+      const { cyphers, fetchUrl, id } = curFileInfo || {};
+      const res = await axios.post(
+        fetchUrl,
+        {
+          cyphers: ['match (n:`疾病`)-[e]-(m) where id(n) == "疾病上睑下垂" return n,e,m;'],
+          ontologyId: id,
+        },
+        {
+          headers: { Authorization: rag_dev_server.token },
+        }
+      );
+      console.log('getGraphData res', res);
+      setGraphList(res?.data || {});
+    } catch (error) {
+      console.log('error', error);
+    }
+  };
+  //const { getToken } = useAppPassport();
+  useEffect(() => {
+    getGraphData(curFileInfo);
+  }, [curFileInfo]);
+
+  useEffect(() => {
+    console.log('graphList', graphList);
+  }, [graphList]);
+  return (
+    <div>
+      <div className="h-[52px] leading-[52px] font-bold text-[16px] px-[15px] overflow-hidden border-t-none border-l-none border-b-[1px] border-solid border-[rgb(222,226,230)]">
+        {curFileInfo?.name || '图谱预览'}
+      </div>
+      <div
+        className="w-full h-[calc(100vh-52)]"
+        style={{ width: '100%', height: 'calc(100vh - 52px)' }}
+      >
+        <KnowledgeGraphPreview
+          data={graphList}
+          layout={{ type: 'force', linkDistance: 190 }}
+          title={config.title}
+          subtitle={config.subtitle}
+          backgroundColor={config.backgroundColor}
+          showGrid={config.showGrid}
+          showLegend={config.showLegend}
+          showTooltip={config.showTooltip}
+          showFullscreen={config.showFullscreen}
+          showMinimap={config.showMinimap}
+          customPlugins={{}}
+          onReady={(graph: any) => {
+            console.log('KnowledgeGraphPreview ready:', graph);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DrawerGraphPreview;

package/src/examples/chat/index.tsx

@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import withGientechChatAdopter from '../../modules/chat';
+import { Brain, Search } from 'lucide-react';
+import { rag_dev_server } from '../../utils/testconfigs';
+import { ConfigProvider, Drawer } from 'antd';
+import DrawerGraphPreview from './components/DrawerGraphPreview';
+const defaultToken = rag_dev_server.token;
+const defaultUrl = rag_dev_server.url;
+
+const mockSenderConfig = {
+  switchs: [
+    {
+      name: 'qaChannel',
+      label: '问答渠道',
+      type: 'select' as const,
+      defaultValue: 1,
+      enabled: true,
+      options: [
+        { label: '默认', value: 1 },
+        { label: '文档', value: 2 },
+        { label: '视频', value: 3 },
+      ],
+    },
+    {
+      label: '联网搜索',
+      name: 'netSearch',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <Search className="w-3 h-3" />,
+    },
+    {
+      label: '推理思考',
+      name: 'reasoning',
+      type: 'checkbox',
+      defaultValue: false,
+      enabled: true,
+      icon: <Brain className="w-3 h-3" />,
+    },
+  ],
+};
+
+const GientechChat = withGientechChatAdopter();
+
+export default function Preview() {
+  const [token] = useState(defaultToken);
+  const [url] = useState(defaultUrl);
+  const [open, setOpen] = useState(false);
+  const [drawerType, setDrawerType] = useState<string>('graphPreview');
+  const [curFileInfo, setCurFileInfo] = useState<any>({});
+  let parsedStyles = {
+    theme: {
+      colors: {
+        primary: '#4E6EF2',
+        secondary: '#6c757d',
+        success: '#008000',
+        warning: '#FFA500',
+        error: '#FF0000',
+        info: '#0000FF',
+        background: '#ffff',
+        text: '#000000',
+        border: '#dee2e6',
+        disabled: '#808080',
+        disabledBackground: '#F5F5F5',
+        disabledText: '#808080',
+        shadow: '#000000',
+        appBackground: '#fff',
+        listBackground: '#f9f9f9',
+        dashboardBackground: '#ffffff',
+        sidebarBg: 'transparent',
+        itemBg: 'transparent',
+        itemHoverBg: '#f0f4ff',
+        activeItemBg: 'linear-gradient(#E3ECFF, #EEEBFF)',
+        activeItemText: '#1D2129',
+        itemText: '#333',
+        groupBg: 'transparent',
+        groupText: '#333',
+        groupBorder: '#dee2e6',
+      },
+      space: {
+        sidebar: 'md',
+        size: 'md',
+        radius: 'md',
+        padding: 'md',
+        margin: 'md',
+        shadow: 'md',
+        lineHeight: 'md',
+      },
+      icons: {
+        aiAvatar: '/icons/sheets.png',
+        userAvatar:
+          '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',
+        pdf: '/icons/pdf.png',
+        word: '/icons/docx-file.png',
+        image: '/icons/image.png',
+        video: '/icons/video.png',
+        audio: '/icons/audio.png',
+        excel: '/icons/sheets.png',
+        ppt: '/icons/pptx.png',
+        docx: '/icons/docx-file.png',
+        sheets: '/icons/sheets.png',
+        pptx: '/icons/pptx.png',
+        txt: '/icons/txt.png',
+      },
+      others: {
+        baseFontWeight: 'normal',
+      },
+    },
+  };
+  return (
+    <div className="w-screen h-screen relative">
+      <GientechChat
+        token={token}
+        // sidebar={[]}
+        CustomComponents={{
+          LogoBox: null,
+        }}
+        senderConfig={mockSenderConfig}
+        url={url}
+        styles={parsedStyles}
+        eventsEmit={(eventName, data) => {
+          console.log('eventName', eventName, 'data', data);
+          setCurFileInfo(data);
+          setOpen(true);
+          return;
+          switch (eventName) {
+            case 'graph_reference:click':
+              if (!data) return;
+
+              setCurFileInfo(data);
+              setOpen(true);
+              break;
+            case 'conversations:delete_icon_clicked':
+              const label = data.data?.label || '未命名会话';
+              if (window.confirm(`确定要删除会话「${label}」吗？删除后无法恢复。`)) {
+                data
+                  .async_deleteConversation()
+                  .then(() => {
+                    data.fn_removeItemFromList();
+                  })
+                  .catch(() => {
+                    // 删除失败
+                  });
+              }
+              break;
+            case 'conversations:rename_icon_clicked':
+              const oldLabel = data.data?.label || '未命名会话';
+              const newLabel = window.prompt(`请输入新的会话名称（原名：${oldLabel}）：`, oldLabel);
+              if (newLabel && newLabel !== oldLabel) {
+                data
+                  .async_renameConversation(newLabel)
+                  .then(() => {
+                    data.fn_renameItemInList(newLabel);
+                  })
+                  .catch(() => {
+                    // 重命名失败
+                  });
+              }
+          }
+        }}
+      />
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: 'none' },
+          },
+        }}
+      >
+        <Drawer
+          autoFocus={false}
+          onClose={() => setOpen(false)}
+          open={open}
+          width={600}
+          className="overflow-x-hidden"
+          destroyOnClose
+          afterOpenChange={open => {
+            if (!open) {
+              setCurFileInfo(null);
+            }
+          }}
+        >
+          {drawerType === 'graphPreview' && (
+            <DrawerGraphPreview curFileInfo={curFileInfo as any} onClose={() => setOpen(false)} />
+          )}
+        </Drawer>
+      </ConfigProvider>
+    </div>
+  );
+}