@gientech/modual 1.9.3 → 1.9.4-fix.1

package/src/examples/headlessChat/index.tsx

@@ -0,0 +1,218 @@
+import { useState, useEffect } from 'react';
+import withHeadLessChatAdopter from '../../modules/headlessChat';
+import { Paperclip } from 'lucide-react';
+import { rag_dev_server } from '../../utils/testconfigs';
+import LoginMain from '../../modules/login';
+import { decryptApiKey } from '../../utils/decryptApiKey';
+import { getQueryParam } from '../../utils';
+const mockSenderConfig = {
+  actions: [
+    {
+      name: 'history',
+      icon: <Paperclip color="#4E5969" size={20} />,
+      tip: `最多上传10个文件（每个最大 50 MB），支持单次或批量上传ppt（x）、doc（x）、xlsx、pdf、text、html、jpg、png`,
+    },
+  ],
+};
+
+const HeadlessChat = withHeadLessChatAdopter();
+
+export default function HeadlessChatExample() {
+  // 从 URL 路径获取 configId（格式：/791）
+  const pathname = window.location.pathname;
+  const pathConfigId =
+    pathname && pathname !== '/' && pathname !== '/index.html'
+      ? pathname.replace(/^\//, '').replace(/\/$/, '') // 去掉首尾的斜杠
+      : null;
+
+  // 从 URL 查询参数获取 token、apiKey、configId
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlToken = getQueryParam('token');
+  const urlApiKey = getQueryParam('apiKey'); // new URLSearchParams解码会丢失+
+  const urlConfigId = urlParams.get('configId');
+  const urlBaseUrl = urlParams.get('url') || rag_dev_server.url;
+
+  // 合并路径参数和查询参数的 configId，路径参数优先
+  const finalConfigId = pathConfigId || urlConfigId;
+
+  // 状态管理
+  const [token, setToken] = useState<string | null>(() => {
+    // 优先从 sessionStorage 获取
+    const storedToken = sessionStorage.getItem('headless_chat_token');
+    if (storedToken) return storedToken;
+
+    // 其次从 URL 参数获取
+    if (urlToken) return urlToken;
+
+    // 尝试解密 API Key
+    if (urlApiKey) {
+      const decrypted = decryptApiKey(urlApiKey);
+      if (decrypted && decrypted.apiKey) {
+        return decrypted.apiKey;
+      }
+    }
+
+    // 如果没有从 URL 获取到 token，返回 null（后续判断是否需要登录）
+    return null;
+  });
+
+  const [configId] = useState<string>(() => {
+    // 优先从路径参数或 URL 查询参数获取
+    if (finalConfigId) return finalConfigId;
+
+    // 尝试从 API Key 解密获取 targetId（作为 configId）
+    if (urlApiKey) {
+      const decrypted = decryptApiKey(urlApiKey);
+      if (decrypted && decrypted.targetId) {
+        return String(decrypted.targetId);
+      }
+    }
+
+    return '';
+  });
+
+  const [url] = useState(urlBaseUrl);
+  const [showLogin, setShowLogin] = useState(false);
+
+  // 检查是否需要显示登录页面
+  useEffect(() => {
+    // 如果没有 token，但有 configId（路径参数或查询参数），则显示登录页面
+    if (!token && finalConfigId) {
+      setShowLogin(true);
+    } else if (token) {
+      // 有 token 时，不显示登录页面
+      setShowLogin(false);
+    }
+  }, [token, finalConfigId]);
+
+  // 处理登录成功后的回调
+  const handleAfterLogin = (loginToken: string) => {
+    // 存储 token 到 sessionStorage
+    sessionStorage.setItem('headless_chat_token', loginToken);
+    setToken(loginToken);
+    setShowLogin(false);
+  };
+
+  // 如果显示登录页面，渲染登录组件
+  if (showLogin) {
+    return (
+      <LoginMain
+        eventsEmit={(eventName, data) => {
+          if (eventName === 'afterLogin') {
+            handleAfterLogin(data);
+          }
+        }}
+      />
+    );
+  }
+
+  // 如果没有 token 且不在登录页面，显示登录组件（只有在没有 configId 时才显示）
+  if (!token && !showLogin && !finalConfigId) {
+    return (
+      <LoginMain
+        eventsEmit={(eventName, data) => {
+          if (eventName === 'afterLogin') {
+            handleAfterLogin(data);
+          }
+        }}
+      />
+    );
+  }
+
+  const 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/answerAwartar.png',
+        userAvatar: '/icons/questionAwartar.png',
+        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',
+      },
+    },
+  };
+
+  // 确保 token 不为 null
+  if (!token) {
+    return null; // 这种情况应该已经被上面的逻辑处理了
+  }
+
+  return (
+    <div className="w-screen h-screen relative overflow-hidden">
+      <HeadlessChat
+        token={token}
+        url={url}
+        configId={configId} // 从 URL 参数或 API Key 解密获取
+        welcomeContent="欢迎来到小鲸智能助手，有什么能帮你的么？"
+        senderConfig={mockSenderConfig}
+        styles={parsedStyles}
+        eventsEmit={(eventName, data) => {
+          console.log('事件触发:', eventName, data);
+          // 可以在这里处理各种事件
+          switch (eventName) {
+            case 'action_retrive_tag':
+              console.log('点击了引用标签:', data);
+              break;
+            case 'referenceFile_view':
+              console.log('查看文件:', data);
+              break;
+            case 'referenceFile_download':
+              console.log('下载文件:', data);
+              break;
+            default:
+              break;
+          }
+        }}
+        onError={error => {
+          console.error('HeadlessChat 错误:', error);
+        }}
+      />
+    </div>
+  );
+}

package/src/examples/ragDatabaseDataPage/index.tsx

@@ -0,0 +1,40 @@
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@mxmweb/zui-theme';
+import DatabaseTableView from '../../modules/databaseTable';
+import { rag_dev_database_data } from '../../utils/testconfigs';
+
+export default function DatabaseDataPage() {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabaseIdPage] pageEventsEmit ', name, data);
+  };
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <DatabaseTableView
+        url={rag_dev_database_data.url}
+        token={rag_dev_database_data.token}
+        role="admin"
+        fileId={rag_dev_database_data.fileId}
+        dbId={rag_dev_database_data.dbId}
+        tableId={rag_dev_database_data.tableId}
+        tableName={rag_dev_database_data.tableName}
+        dbType={rag_dev_database_data.dbType}
+        eventsEmit={handlePageEventsEmit}
+        // getBtnDisabled={getBtnDisabled}
+        CustomComponents={customComponents}
+      />
+    </ThemeProvider>
+  );
+}

package/src/examples/ragDatabaseIdPage/index.tsx

@@ -0,0 +1,47 @@
+import { ThemeProvider } from 'styled-components';
+import { defaultTheme } from '@mxmweb/zui-theme';
+import DatabaseIdView from '../../modules/databaseId';
+
+import { rag_dev_database_id } from '../../utils/testconfigs';
+
+export default function DatabaseIdPage() {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+    ContainerLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabaseIdPage] pageEventsEmit ', name, data);
+  };
+  return (
+    <DatabaseIdView
+      url={rag_dev_database_id.url}
+      token={rag_dev_database_id.token}
+      role="admin"
+      id={rag_dev_database_id.id}
+      dbType={rag_dev_database_id.dbType as 'DataTable' | 'DirectDB'}
+      CustomComponents={customComponents}
+      uploadUrl="http://10.15.12.11:8889/index/database/dataTable/uploadFile"
+      eventsEmit={handlePageEventsEmit}
+      // getBtnDisabled={getBtnDisabled}
+    />
+  );
+}

package/src/examples/ragDatabasePage/index.tsx

@@ -0,0 +1,36 @@
+import DatabaseView from '../../modules/database';
+import { rag_dev_database } from '../../utils/testconfigs';
+
+const token = rag_dev_database.token;
+const url = rag_dev_database.url;
+
+const DatabasePage = () => {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabasePage] pageEventsEmit ', name, data);
+  };
+  return (
+    <DatabaseView
+      url={url}
+      token={token}
+      role="admin"
+      eventsEmit={handlePageEventsEmit}
+      CustomComponents={customComponents}
+      // getBtnDisabled={getBtnDisabled}
+    />
+  );
+};
+
+export default DatabasePage;

package/src/examples/ragModelManagePage/index.tsx

@@ -0,0 +1,37 @@
+import ModelManageView from '../../modules/modelManage';
+import { rag_dev_model_manage } from '../../utils/testconfigs';
+
+const token = rag_dev_model_manage.token;
+const url = rag_dev_model_manage.url;
+
+export default function DatabasePage() {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabasePage] pageEventsEmit ', name, data);
+  };
+
+  return (
+    <>
+      <ModelManageView
+        url={url}
+        token={token}
+        role={'admin'}
+        eventsEmit={handlePageEventsEmit}
+        CustomComponents={customComponents}
+        // getBtnDisabled={getBtnDisabled}
+      />
+    </>
+  );
+}

package/src/examples/ragSensitiveWordsPage/index.tsx

@@ -0,0 +1,32 @@
+import SensitivityView from '../../modules/sensitive';
+import { rag_dev_sensitive_words } from '../../utils/testconfigs';
+
+const token = rag_dev_sensitive_words.token;
+const url = rag_dev_sensitive_words.url;
+
+export default function DatabasePage() {
+  const customComponents: any = {
+    ContentLoading: () => (
+      <div className="flex flex-col items-center justify-center h-full">
+        <div className="text-xl font-semibold mb-3">
+          {/* <Spin indicator={<LoadingOutlined spin />} size="large" /> */}
+        </div>
+        <div className="text-base mb-2" style={{ color: '#055AFF' }}>
+          加载中...
+        </div>
+      </div>
+    ),
+  };
+  const handlePageEventsEmit = (name: string, data: any) => {
+    console.log('[DatabasePage] pageEventsEmit ', name, data);
+  };
+  return (
+    <SensitivityView
+      url={url}
+      token={token}
+      role="admin"
+      eventsEmit={handlePageEventsEmit}
+      CustomComponents={customComponents}
+    />
+  );
+}