@mxmweb/aichat 1.1.7 → 1.1.8

package/src/HeadlessChat.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useMemo, useState } from 'react';
+import { HeadLessChat } from './lib_enter';
+import AppLoading from './adopters/gientechCommon/components/AppLoading';
+import AppError from './adopters/gientechCommon/components/AppError';
+import { ConfigProvider, Drawer } from 'antd';
+import { getMarkExcludeType, TempBaseUrl } from './utils';
+import { DrawerContent } from './components/DrawerContent';
+import DrawerPreview from './components/DrawerPreview';
+
+export default function HeadlessChat() {
+  const [curFileInfo, setCurFileInfo] = useState({
+    url: '',
+    parse_url: '',
+    file_type: '',
+    file_name: '',
+  });
+  const [drawerType, setDrawerType] = useState<string>('mark');
+  const [showError, setShowError] = useState<boolean>(false);
+  const [errorMsg, setErrorMsgr] = useState({ msg: '', subMsg: '' });
+  const [token, setToken] = useState<string>('');
+  const [url, setUrl] = useState<string>('/proxy');
+  const [configId, setConfigId] = useState<string>('668');
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState<
+    | {
+        title: '';
+        file_type: '';
+        metadata: { offset: [] };
+      }
+    | any
+  >(null);
+  const HeadLessChatComponent = useMemo(() => {
+    return HeadLessChat();
+  }, []);
+  const defaultStyles: any = {
+    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',
+      },
+      space: {
+        sidebar: 'md',
+        size: 'md',
+        radius: 'md',
+        padding: 'md',
+        margin: 'md',
+        shadow: 'md',
+        lineHeight: 'md',
+      },
+      icons: {
+        aiAvatar: '/icons/questionAwartar.png',
+        userAvatar: '/icons/answerAwartar.png',
+        pdf: '/icons/pdf.png',
+        docx: '/icons/docx-file.png',
+        doc: '/icons/docx-file.png',
+        image: '/icons/image.png',
+        sheets: '/icons/sheets.png',
+        pptx: '/icons/pptx.png',
+        ppt: '/icons/pptx.png',
+        pub: '/icons/pptx.png',
+        txt: '/icons/txt.png',
+        xls: '/icons/sheets.png',
+        xlsx: '/icons/sheets.png',
+        csv: '/icons/sheets.png',
+        png: '/icons/image.png',
+        jpg: '/icons/image.png',
+        jpge: '/icons/image.png',
+        html: '/icons/html.png',
+        htm: '/icons/html.png',
+        json: '/icons/json.png',
+        md: '/icons/md.png',
+      },
+      others: {
+        baseFontWeight: 'normal',
+      },
+    },
+  };
+
+  useEffect(() => {
+    const host = location.host;
+    const href = location.href;
+    const search = location.search;
+    const url = href.replace(host, '').replace(search, '');
+    const urlArr = url.split('/');
+    const lastSegment = +urlArr[urlArr.length - 1];
+
+    if (lastSegment && !isNaN(lastSegment)) {
+      setConfigId(lastSegment.toString());
+    } else {
+      setErrorMsgr({
+        msg: '没有助手ID',
+        subMsg: ' ',
+      });
+      setShowError(true);
+      return;
+    }
+    const urlParams = new URLSearchParams(search);
+    const curToken = urlParams.get('token');
+    if (curToken) {
+      setToken(curToken);
+    } else {
+      setErrorMsgr({
+        msg: '没有token',
+        subMsg: ' ',
+      });
+      setShowError(true);
+    }
+  }, []);
+
+  return (
+    <div className="h-[100vh] w-[100vw]">
+      {showError ? (
+        <AppError msg={errorMsg.msg} subMsg={errorMsg.subMsg} />
+      ) : token ? (
+        <HeadLessChatComponent
+          token={token}
+          url={url}
+          configId={configId}
+          useLogin={false}
+          styles={defaultStyles}
+          eventsEmit={(event: any, data: any) => {
+            console.log('事件触发:', event, data);
+            switch (event) {
+              // case 'conversations:rename_icon_clicked':
+              //   setCurEditData(data);
+              //   setisRenameModalOpen(true);
+              //   break;
+              // case 'conversations:delete_icon_clicked':
+              //   setCurEditData(data);
+              //   setisRemoveModalOpen(true);
+              //   break;
+              case 'reference_file:click':
+                if (data.isUploadFile) {
+                  setCurFileInfo({
+                    ...data,
+                    file_type: data.type,
+                    file_name: data.file,
+                  });
+                } else {
+                  setCurFileInfo({ ...data, file_name: data.file });
+                }
+                setDrawerType('preview');
+                setOpen(true);
+                break;
+              case 'action_retrive_tag':
+                if (!data?.tagInfo) return;
+                const { pdfPages, parsedFilePath, order_num, metadata } = data.tagInfo;
+                const id = data.tagInfo.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';
+
+                setContent({
+                  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');
+                setOpen(true);
+                break;
+            }
+
+            // 监听所有交互事件
+          }}
+          onError={error => {
+            if (error?.origin?.status === 401) {
+              setErrorMsgr({
+                msg: '登录失效已过，请重新登录',
+                subMsg: ' ',
+              });
+              setShowError(true);
+            } else {
+              setErrorMsgr({
+                msg: '',
+                subMsg: '',
+              });
+              setShowError(true);
+            }
+            console.log('Error in HeadlessChat:', JSON.stringify(error));
+          }}
+        />
+      ) : (
+        <AppLoading />
+      )}
+      <ConfigProvider
+        drawer={{
+          styles: {
+            body: { padding: 0 },
+            header: { display: 'none' },
+          },
+        }}
+      >
+        <Drawer
+          title={
+            drawerType === 'mark' ? (
+              <div className="flex items-center">
+                <img
+                  src={defaultStyles.theme.icons[content?.file_type || 'doc']}
+                  width={18}
+                  height={18}
+                  className="mr-[6px]"
+                />
+                <div>{`${content?.title}.${content?.file_type}`}</div>
+              </div>
+            ) : (
+              false
+            )
+          }
+          autoFocus={false}
+          onClose={() => setOpen(false)}
+          open={open}
+          width={600}
+          className="overflow-x-hidden"
+          destroyOnClose
+          afterOpenChange={open => {
+            if (!open) {
+              setContent(null);
+            }
+          }}
+        >
+          {drawerType === 'mark' ? (
+            <DrawerContent content={content as any} onClose={() => setOpen(false)} />
+          ) : (
+            <DrawerPreview curFileInfo={curFileInfo} onClose={() => setOpen(false)} />
+          )}
+        </Drawer>
+      </ConfigProvider>
+    </div>
+  );
+}

package/src/LoginPage/components/Login/LoginBox/index.tsx

@@ -0,0 +1,103 @@
+import { Loader2, ShoppingCart, User } from 'lucide-react';
+import { Button, Flex, Form, FormInstance, Input, Typography } from 'antd';
+import React, { useState } from 'react';
+const { Text } = Typography;
+export enum LoginFormActionEnum {
+  CANCEL = 'cancel',
+  SUBMIT = 'submit',
+  REFRESH = 'refresh',
+  REGISTER = 'register',
+}
+
+interface Iprops {
+  setIsRegister: React.Dispatch<React.SetStateAction<boolean>>;
+  logoImg?: string;
+  eventEmit?: (n: string, d: any) => void;
+  form: FormInstance<any>;
+  codeImgSrc?: string;
+  loginLoading?: boolean;
+}
+
+const LoginBox: React.FC<Iprops> = props => {
+  const { logoImg, setIsRegister, eventEmit, form, codeImgSrc, loginLoading = false } = props;
+  const [codeLoading, setCodeLoading] = useState<boolean>(false);
+  const handleLogin = () => {
+    form.validateFields().then(async res => {
+      eventEmit && (await eventEmit('login:login', res));
+    });
+  };
+
+  const handleClickCode = async () => {
+    setCodeLoading(true);
+    eventEmit && (await eventEmit('login:codeClick', ''));
+    setCodeLoading(false);
+  };
+  return (
+    <Flex vertical justify="center">
+      <img
+        style={{
+          display: 'inline-block',
+          width: '100%',
+          objectFit: 'cover',
+          marginTop: '12px',
+          marginBottom: '20px',
+          textAlign: 'center',
+        }}
+        src={logoImg}
+      />
+      <Form.Item name={'userName'} rules={[{ required: true, message: '请输入用户名字' }]}>
+        <Input placeholder="输入用户名字" prefix={<User size={16} />} />
+      </Form.Item>
+      <Form.Item name={'password'} rules={[{ required: true, message: '请输入密码' }]}>
+        <Input placeholder="输入密码" prefix={<ShoppingCart size={16} />} type="password" />
+      </Form.Item>
+      {codeImgSrc && (
+        <Form.Item name={'verifyCode'} rules={[{ required: true, message: '请输入验证码' }]}>
+          <Flex>
+            <Input placeholder="输入验证码" />
+
+            {codeLoading ? (
+              <Flex style={{ width: '96px', height: '40px' }} justify="center">
+                <Loader2 className="animate-spin" size={20} />
+              </Flex>
+            ) : (
+              <img
+                onClick={handleClickCode}
+                src={codeImgSrc}
+                style={{
+                  width: '96px',
+                  height: '40px',
+                  background: 'white',
+                  border: 'solid 1px #d9d9d9',
+                  cursor: 'pointer',
+                  borderRadius: '6px',
+                }}
+              />
+            )}
+          </Flex>
+        </Form.Item>
+      )}
+      <Form.Item>
+        <Button
+          style={{ width: '100%' }}
+          type="primary"
+          loading={loginLoading}
+          onClick={handleLogin}
+        >
+          登录
+        </Button>
+      </Form.Item>
+      {/* <Text
+        style={{
+          textAlign: "right",
+          cursor: "pointer"
+        }}
+        onClick={() => setIsRegister(true)}
+      >
+        点击注册
+      </Text> */}
+    </Flex>
+  );
+};
+
+export default LoginBox;

package/src/LoginPage/components/Login/RegisterBox/index.tsx

@@ -0,0 +1,181 @@
+import { Button, Flex, Form, FormInstance, Input, Typography } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+const { Title } = Typography;
+
+export enum RegisterFormActionEnum {
+  CANCEL = "cancel",
+  SUBMIT = "submit"
+}
+
+//不能用数字开头，长度不超过25，无特殊符号，无空格
+const REG_NAME = /^[\u4e00-\u9fa5A-Za-z_][\u4e00-\u9fa5A-Za-z0-9_]{0,24}$/;
+const REG_NAME_MSG = "不能用数字开头，长度不超过25，无特殊符号，无空格";
+
+const REG_PHONE =
+  /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
+const REF_PHONE_MSG = "手机号格式不正确";
+
+const REG_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const REF_EMAIL_MSG = "邮箱格式不正确";
+
+const REG_PASSWORD = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
+const REF_PASSWORD_MSG =
+  "密码必须包含大小写字母和数字，不包含特殊字符，长度至少是8";
+
+interface Iprops {
+  eventEmit?: (name: string, data: any) => void;
+  setIsRegister: React.Dispatch<React.SetStateAction<boolean>>;
+  form: FormInstance<any>;
+  registerLoading?: boolean;
+  registreKaptchaUrl?: string;
+}
+
+const RegisterBox: React.FC<Iprops> = (props) => {
+  const {
+    eventEmit,
+    setIsRegister,
+    form,
+    registreKaptchaUrl,
+    registerLoading = false
+  } = props;
+
+  const [codeLoading, setCodeLoading] = useState<boolean>(false);
+
+  const handleRegister = async () => {
+    form.validateFields().then(async (res) => {
+      eventEmit && (await eventEmit("login:register", res));
+    });
+  };
+
+  const handleClickCode = async () => {
+    setCodeLoading(true);
+    eventEmit && (await eventEmit("login:registerCodeClick", ""));
+    setCodeLoading(false);
+  };
+
+  return (
+    <Flex style={{ paddingTop: "35px" }} vertical>
+      <Form.Item
+        label="用户名"
+        name={"userName"}
+        rules={[
+          { required: true, message: "请输入名称" },
+          {
+            pattern: new RegExp(REG_NAME),
+            message: `名称${REG_NAME_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder="输入用户名字" />
+      </Form.Item>
+      <Form.Item
+        label="手机号"
+        name={"userIphone"}
+        rules={[
+          { required: true, message: "请输入手机号" },
+          {
+            pattern: new RegExp(REG_PHONE),
+            message: `${REF_PHONE_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder="请输入手机号" />
+      </Form.Item>
+      <Form.Item
+        label="邮箱"
+        name={"userEmail"}
+        rules={[
+          { required: true, message: "请输入邮箱" },
+          {
+            pattern: new RegExp(REG_EMAIL),
+            message: `${REF_EMAIL_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder="输入邮箱" />
+      </Form.Item>
+      <Form.Item
+        label="密码"
+        name={"password"}
+        rules={[
+          { required: true, message: "请输入密码" },
+          {
+            pattern: new RegExp(REG_PASSWORD),
+            message: `${REF_PASSWORD_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder="请输入密码" type="password" />
+      </Form.Item>
+      <Form.Item
+        label="确认密码"
+        name={"passwordAffirm"}
+        dependencies={["password"]}
+        rules={[
+          {
+            required: true,
+            message: "请确认新密码"
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue("password") === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(new Error("两次密码不一致!"));
+            }
+          })
+        ]}
+      >
+        <Input placeholder="请确认新密码" type="password" />
+      </Form.Item>
+      {registreKaptchaUrl && (
+        <Form.Item
+          label="验证码"
+          name={"verifyCode"}
+          rules={[{ required: true, message: "请输入验证码" }]}
+        >
+          <Flex>
+            <Input placeholder="输入验证码" />
+
+            {codeLoading ? (
+              <Flex style={{ width: "96px", height: "40px" }} justify="center">
+                <LoadingOutlined />
+              </Flex>
+            ) : (
+              <img
+                onClick={handleClickCode}
+                src={registreKaptchaUrl}
+                style={{
+                  width: "96px",
+                  height: "40px",
+                  background: "white",
+                  border: "solid 1px #d9d9d9",
+                  cursor: "pointer",
+                  borderRadius: "6px"
+                }}
+              />
+            )}
+          </Flex>
+        </Form.Item>
+      )}
+      <Form.Item>
+        <Flex justify="space-between">
+          <Button style={{ width: "48%" }} onClick={() => setIsRegister(false)}>
+            取消
+          </Button>
+          <Button
+            style={{ width: "48%" }}
+            onClick={handleRegister}
+            type="primary"
+            loading={registerLoading}
+          >
+            注册
+          </Button>
+        </Flex>
+      </Form.Item>
+    </Flex>
+  );
+};
+
+export default RegisterBox;

package/src/LoginPage/components/Login/index.tsx

@@ -0,0 +1,101 @@
+import { ConfigProvider, Flex, Form } from 'antd';
+import { useState } from 'react';
+import LoginBox from './LoginBox';
+import RegisterBox from './RegisterBox';
+
+const defaultStyle = {
+  colorPrimary: '#1677ff',
+  defaultBg: '#ffffff',
+};
+
+interface LoginStyle {
+  defaultBg?: string;
+  colorPrimary?: string;
+}
+interface LoginProps {
+  homeBg?: string;
+  leftImg?: string;
+  logoImg?: string;
+  eventEmit?: (n: string, d: any) => void;
+  loginLoading?: boolean;
+  registerLoading?: boolean;
+  codeImgSrc?: string;
+  loginStyle?: LoginStyle;
+  registreKaptchaUrl?: string;
+}
+const Login = (props: LoginProps) => {
+  const {
+    homeBg,
+    leftImg,
+    logoImg,
+    eventEmit,
+    codeImgSrc = '',
+    loginStyle,
+    loginLoading,
+    registerLoading,
+    registreKaptchaUrl,
+  } = props;
+  const [isRegister, setIsRegister] = useState<boolean>(false);
+  const [form] = Form.useForm();
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: loginStyle?.colorPrimary || defaultStyle.colorPrimary,
+        },
+        components: {
+          Button: {
+            defaultBg: loginStyle?.defaultBg || defaultStyle.defaultBg,
+          },
+        },
+      }}
+    >
+      <Flex
+        style={{
+          width: '100%',
+          height: '100%',
+          background: `url('${homeBg}') no-repeat center/cover`,
+        }}
+        justify="center"
+        align="center"
+      >
+        <Flex
+          style={{
+            background: 'white',
+            height: '55vh',
+            minHeight: '393px',
+            width: 'calc(55vh * 2)',
+            minWidth: '840px',
+            borderRadius: '10px',
+            overflow: 'hidden',
+          }}
+        >
+          {leftImg && (
+            <img
+              style={{
+                objectFit: 'cover',
+                width: '50%',
+              }}
+              src={leftImg}
+            />
+          )}
+          <Flex flex={1} style={{ padding: '0 50px' }} justify="center" align="center">
+            <Form form={form} labelCol={{ span: 8 }}>
+              <LoginBox
+                loginLoading={loginLoading}
+                form={form}
+                logoImg={logoImg}
+                setIsRegister={setIsRegister}
+                codeImgSrc={codeImgSrc}
+                eventEmit={eventEmit}
+              />
+            </Form>
+          </Flex>
+        </Flex>
+      </Flex>
+    </ConfigProvider>
+  );
+};
+
+export default Login;