@mxmweb/aichat 1.1.7 → 1.1.8

package/src/LoginPage/index.tsx

@@ -0,0 +1,103 @@
+import homeBg from '@/assets/login/homeBg.png';
+import leftImg from '@/assets/login/left.jpg';
+import logoImg from '@/assets/login/logoImg.png';
+import { Layout, message } from 'antd';
+import { Encrypt } from './utils';
+import { useEffect, useState } from 'react';
+import Login from './components/Login';
+import { api_getKaptchaImage, login } from './useServices';
+
+const baseUrl = '/proxy';
+
+function LoginPage({ setToken }: { setToken: (token: string) => void }) {
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [registerLoading, setRegisterLoading] = useState(false);
+
+  const handleLogin = async (data: any) => {
+    try {
+      setLoginLoading(true);
+      login(
+        { url: baseUrl },
+        {
+          ...data,
+          password: Encrypt(data.password),
+        },
+        res => {
+          if (res?.success) {
+            setToken(res?.data?.token || '');
+          }
+          setLoginLoading(false);
+        },
+        msg => {
+          setLoginLoading(false);
+          if (msg) {
+            message.error(msg);
+          } else {
+            message.error('登录失败，请稍后再试');
+          }
+        }
+      );
+    } catch (e) {
+      setLoginLoading(false);
+    }
+  };
+
+  const [kaptchaUrl, setKaptchaUrl] = useState('');
+  const [registreKaptchaUrl, setRegistreKaptchaUrl] = useState('');
+
+  const handleGetImage = () => {
+    try {
+      setRegisterLoading(true);
+      api_getKaptchaImage({ url: baseUrl }, data => {
+        setRegisterLoading(false);
+        if (data) {
+          const imgBlob = new Blob([data], { type: 'image/jpeg' });
+          const imageUrl = window.URL.createObjectURL(imgBlob);
+          setKaptchaUrl(imageUrl);
+          setRegistreKaptchaUrl(imageUrl);
+        }
+      });
+    } catch (error) {
+      setRegisterLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleGetImage();
+    return () => {
+      window.URL.revokeObjectURL(kaptchaUrl);
+    };
+  }, []);
+
+  const eventEmit = async (name: string, data: any) => {
+    switch (name) {
+      case 'login:login':
+        await handleLogin(data);
+        break;
+      case 'login:codeClick':
+        handleGetImage();
+        break;
+      case 'login:registerCodeClick':
+        handleGetImage();
+        break;
+      default:
+        break;
+    }
+  };
+  return (
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      <Login
+        loginLoading={loginLoading}
+        registerLoading={registerLoading}
+        homeBg={homeBg}
+        leftImg={leftImg}
+        logoImg={logoImg}
+        codeImgSrc={kaptchaUrl}
+        registreKaptchaUrl={registreKaptchaUrl}
+        eventEmit={eventEmit}
+      />
+    </Layout>
+  );
+}
+
+export default LoginPage;

package/src/LoginPage/useServices.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+export const login = async (
+  config: { url: string },
+  data: { restult: number; queryId: string },
+  sucCb: (arg: any) => void,
+  failCb: (arg: any) => void = () => {}
+) => {
+  try {
+    axios
+      .post(`${config.url}/auth/user/login`, data)
+      .then(res => {
+        if (res.data.success) {
+          sucCb && sucCb(res.data);
+        } else {
+          failCb && failCb(false);
+        }
+      })
+      .catch(error => {
+        failCb && failCb(error?.response?.data?.errorMsg);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    failCb && failCb(false);
+    console.log('error', error);
+  }
+};
+
+export const api_getKaptchaImage = (config: { url: string }, cb: (arg: any) => void) => {
+  try {
+    axios
+      .get(`/user/kaptcha`, {
+        baseURL: '/proxy/auth',
+        responseType: 'arraybuffer', // 关键：必须添加
+        //params: { t: Date.now() },
+        headers: { Accept: '*/*', 'Content-Type': 'application/json' },
+      })
+      .then(res => {
+        if (res.data) {
+          cb && cb(res.data);
+        } else {
+          cb && cb(false);
+        }
+      })
+      .catch(error => {
+        cb && cb(false);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    cb && cb(false);
+    console.log('error', error);
+  }
+};

package/src/LoginPage/utils.ts

@@ -0,0 +1,42 @@
+import CryptoJS from "crypto-js";
+// 默认的 KEY 与 iv
+const KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
+const IV = CryptoJS.enc.Utf8.parse("1234567890123456");
+
+export const Encrypt = (word: any, keyStr?: any, ivStr?: any) => {
+  let key = KEY;
+  let iv = IV;
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+  const srcs = CryptoJS.enc.Utf8.parse(word);
+  const encrypted = CryptoJS.AES.encrypt(srcs, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding,
+  });
+  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
+};
+
+export const Decrypt = (word: string, keyStr: string, ivStr: string) => {
+  let key = KEY;
+  let iv = IV;
+
+  if (keyStr) {
+    key = CryptoJS.enc.Utf8.parse(keyStr);
+    iv = CryptoJS.enc.Utf8.parse(ivStr);
+  }
+
+  const base64 = CryptoJS.enc.Base64.parse(word);
+  const src = CryptoJS.enc.Base64.stringify(base64);
+
+  const decrypt = CryptoJS.AES.decrypt(src, key, {
+    iv: iv,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.ZeroPadding,
+  });
+
+  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+};

package/src/Preview.tsx

@@ -0,0 +1,278 @@
+import React, { useState, useRef } from 'react';
+import withGientechChatAdopter from './adopters/GientechChat';
+
+const defaultToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJHSUVOLVJBRyIsImF1ZCI6IkpJQUJJTkJJTjAwIiwidXNlcklkIjoxMjQzLCJ1c2VyTmFtZSI6IkpJQUJJTkJJTjAwIiwic3ViIjoibWl4ZWRRdWFudHVtIiwiZXhwIjoxNzUyMTEzNDUzLCJpYXQiOjE3NTIwMjcwNTN9.Vi5IhKndoEqH3cTxmC-TSvJTmeKrxvPfL4k8SIq2Mpg';
+const defaultUrl = 'http://10.15.12.13:8888';
+const urlOptions = [
+  { label: '开发环境（10.15.12.13:8888）', value: 'http://10.15.12.13:8888' },
+  { label: '演示环境（10.15.12.11:8889）', value: 'http://10.15.12.11:8889' },
+];
+
+
+const defaultStyles = {
+  theme: {
+    colors: {
+      primary: '#0122ff',
+      secondary: '#6c757d',
+      success: '#008000',
+      warning: '#FFA500',
+      error: '#FF0000',
+      info: '#0000FF',
+      background: '#ffff',
+      text: '#000000',
+      border: '#dee2e6',
+      disabled: '#808080',
+      disabledBackground: '#F5F5F5',
+      disabledText: '#808080',
+      shadow: '#000000',
+      sidebarBg: 'transparent',
+      itemBg: '#fff',
+      itemHoverBg: '#f0f4ff',
+      activeItemBg: '#0122ff',
+      activeItemText: '#fff',
+      itemText: '#333',
+      groupBg: '#f5f7fa',
+      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',
+      docx: '/icons/docx-file.png',
+      image: '/icons/image.png',
+      sheets: '/icons/sheets.png',
+      pptx: '/icons/pptx.png',
+      txt: '/icons/txt.png',
+    },
+    others: {
+      baseFontWeight: 'normal',
+    },
+  },
+};
+
+const GientechChat = withGientechChatAdopter();
+
+export default function Preview() {
+  // 拖拽相关 state
+  const [dragging, setDragging] = useState(false);
+  const [offset, setOffset] = useState({ x: 40, y: 40 });
+  const [panelHeight, setPanelHeight] = useState(420);
+  const dragRef = useRef<HTMLDivElement>(null);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const mouseStart = useRef({ x: 0, y: 0 });
+  const resizeStart = useRef({ height: 420, y: 0 });
+  const [resizing, setResizing] = useState(false);
+
+  // 表单收起/展开
+  const [collapsed, setCollapsed] = useState(false);
+
+  // 表单内容 state
+  const [token, setToken] = useState(defaultToken);
+  const [url, setUrl] = useState(defaultUrl);
+  const [styles, setStyles] = useState(JSON.stringify(defaultStyles, null, 2));
+  const [stylesError, setStylesError] = useState('');
+
+  // 拖拽事件
+  const onMouseDown = (e: React.MouseEvent) => {
+    setDragging(true);
+    dragStart.current = { x: offset.x, y: offset.y };
+    mouseStart.current = { x: e.clientX, y: e.clientY };
+    document.body.style.userSelect = 'none';
+  };
+  React.useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      if (!dragging && !resizing) return;
+      if (dragging) {
+        setOffset({
+          x: dragStart.current.x + e.clientX - mouseStart.current.x,
+          y: dragStart.current.y + e.clientY - mouseStart.current.y,
+        });
+      }
+      if (resizing) {
+        const newHeight = Math.max(
+          220,
+          resizeStart.current.height + e.clientY - resizeStart.current.y
+        );
+        setPanelHeight(newHeight);
+      }
+    };
+    const onMouseUp = () => {
+      setDragging(false);
+      setResizing(false);
+      document.body.style.userSelect = '';
+    };
+    if (dragging || resizing) {
+      window.addEventListener('mousemove', onMouseMove);
+      window.addEventListener('mouseup', onMouseUp);
+    }
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [dragging, resizing]);
+
+  // 拖拽条事件
+  const onResizeMouseDown = (e: React.MouseEvent) => {
+    setResizing(true);
+    resizeStart.current = { height: panelHeight, y: e.clientY };
+    document.body.style.userSelect = 'none';
+  };
+
+  // 解析 styles
+  let parsedStyles = defaultStyles;
+  try {
+    parsedStyles = JSON.parse(styles);
+    if (stylesError) setStylesError('');
+  } catch (e) {
+    parsedStyles = defaultStyles;
+    if (!stylesError) setStylesError('JSON 格式错误');
+  }
+
+  return (
+    <div className="w-screen h-screen relative">
+      {/* 浮动表单 */}
+      <div
+        ref={dragRef}
+        style={{
+          position: 'fixed',
+          left: offset.x,
+          top: offset.y,
+          zIndex: 50,
+          minWidth: 320,
+          maxWidth: 400,
+          boxShadow: '0 4px 24px 0 rgba(0,0,0,0.10)',
+          borderRadius: 12,
+          background: '#000',
+          transition: 'box-shadow 0.2s, height 0.2s',
+          opacity: dragging ? 0.95 : 1,
+          cursor: dragging ? 'grabbing' : 'default',
+          height: collapsed ? 56 : panelHeight,
+          maxHeight: '80vh',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        className="select-none"
+      >
+        {/* 表单头部，可拖拽 */}
+        <div
+          className="flex items-center justify-between px-4 py-2 border-b bg-gradient-to-r from-black to-gray-800 rounded-t-lg cursor-move"
+          onMouseDown={onMouseDown}
+        >
+          <span className="text-yellow-500 font-semibold text-xs">测试参数面板</span>
+          <button
+            className="text-white text-base focus:outline-none bg-gray-900 hover:bg-gray-700 rounded px-2 py-0.5"
+            onClick={() => setCollapsed(c => !c)}
+            style={{ minWidth: 32 }}
+            title={collapsed ? '展开' : '收起'}
+          >
+            {collapsed ? '▼' : '▲'}
+          </button>
+        </div>
+        {/* 表单内容 */}
+        {!collapsed && (
+          <div className="p-4 flex flex-col gap-2 bg-black text-white border-t border-gray-800 rounded-b-lg text-xs flex-1 min-h-0 overflow-auto">
+            <label className="text-[10px] text-white font-medium">Token</label>
+            <textarea
+              className="w-full border border-gray-700 bg-gray-900 text-white rounded px-2 py-1 text-[10px] font-mono resize-none focus:ring focus:border-blue-400 placeholder-gray-400"
+              rows={2}
+              value={token}
+              onChange={e => setToken(e.target.value)}
+            />
+            <label className="text-[10px] text-white font-medium">URL</label>
+            <select
+              className="w-full border border-gray-700 bg-gray-900 text-white rounded px-2 py-1 text-[10px] font-mono focus:ring focus:border-blue-400"
+              value={url}
+              onChange={e => setUrl(e.target.value)}
+            >
+              {urlOptions.map(opt => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+            <label className="text-[10px] text-white font-medium">Styles (JSON)</label>
+            <div className="flex-1 min-h-0 flex flex-col">
+              <textarea
+                className="w-full h-full border border-gray-700 bg-gray-900 text-white rounded px-2 py-1 text-[10px] font-mono resize-none focus:ring focus:border-blue-400 placeholder-gray-400 flex-1 min-h-0"
+                style={{ height: '100%', minHeight: 80, resize: 'none' }}
+                value={styles}
+                onChange={e => setStyles(e.target.value)}
+              />
+            </div>
+            {stylesError && <div className="text-[10px] text-red-400">{stylesError}</div>}
+          </div>
+        )}
+        {/* 拖拽条 */}
+        <div
+          style={{
+            height: 12,
+            cursor: 'ns-resize',
+            background: 'linear-gradient(to bottom, #222 60%, #444 100%)',
+            borderBottomLeftRadius: 12,
+            borderBottomRightRadius: 12,
+          }}
+          className="w-full flex items-center justify-center select-none"
+          onMouseDown={onResizeMouseDown}
+        >
+          <div style={{ width: 40, height: 4, borderRadius: 2, background: '#666' }} />
+        </div>
+      </div>
+
+      {/* 组件预览区 */}
+      <GientechChat
+        token={token}
+        // sidebar={[]}
+        CustomComponents={{
+          LogoBox: null,
+        }}
+        url={url}
+        styles={parsedStyles}
+        eventsEmit={(eventName, data) => {
+          if (eventName === 'conversations:delete_icon_clicked') {
+            const label = data.data?.label || '未命名会话';
+            if (window.confirm(`确定要删除会话「${label}」吗？删除后无法恢复。`)) {
+              data
+                .async_deleteConversation()
+                .then(() => {
+                  data.fn_removeItemFromList();
+                })
+                .catch(() => {
+                  // 删除失败
+                });
+            }
+            return;
+          }
+          if (eventName === '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(() => {
+                  // 重命名失败
+                });
+            }
+            return;
+          }
+          console.log('eventName', eventName, 'data', data);
+        }}
+      />
+    </div>
+  );
+}