@mxmweb/aichat 1.1.1 → 1.1.8

package/src/adopters/HeadLessChat/types.ts

@@ -0,0 +1,23 @@
+export interface UploadedFile {
+  name: string;
+  size: number;
+  type: string;
+  filePath: string;
+  convertedFilePath?: string;
+  uid: string;
+}
+
+export interface EmptyMessageData {
+  content: string;
+  filePaths?: string;
+  queryId: string;
+  currentFiles?: UploadedFile[];
+}
+
+export interface GientechChatAdopterProps {
+  token: string;
+  url?: string;
+  styles?: any;
+  eventsEmit?: (eventName: string, data: any) => void;
+  [key: string]: any;
+}

package/src/adopters/gientechCommon/components/AppError.tsx

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import { XOctagon, RefreshCw } from 'lucide-react';
+
+export default function AppError({ msg, subMsg }: { msg?: string; subMsg?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center bg-white/80 backdrop-blur-sm">
+      {/* 错误图标 */}
+      <div className="mb-6 animate-bounce">
+        <XOctagon size={64} className="text-[#d70016]" />
+      </div>
+
+      {/* 错误标题 */}
+      <h2 className="text-[20px] font-medium text-[#222222] mb-3">{msg || '应用初始化失败'}</h2>
+
+      {/* 错误描述 */}
+      <p className="text-[14px] text-[#555555] mb-8 max-w-[400px]">
+        {subMsg ||
+          '无法完成应用初始化，这可能是由于网络连接问题或服务配置错误导致的。请检查您的网络连接并重试。'}
+      </p>
+
+      {/* 重试按钮 */}
+      <Button
+        type="primary"
+        icon={<RefreshCw className="w-4 h-4" />}
+        onClick={() => window.location.reload()}
+        className="flex items-center gap-2 bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] border-none hover:opacity-90"
+      >
+        重新加载
+      </Button>
+    </div>
+  );
+}

package/src/adopters/gientechCommon/components/AppLoading.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+
+export default function AppLoading() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let timer: any;
+    if (progress < 98) {
+      timer = setTimeout(() => {
+        setProgress(p => p + Math.random() * 6 + 1);
+      }, 80);
+    } else if (progress < 100) {
+      timer = setTimeout(() => setProgress(100), 400);
+    }
+    return () => clearTimeout(timer);
+  }, [progress]);
+
+  return (
+    <div className="flex flex-col justify-center items-center min-h-screen bg-gradient-to-br from-[#EEF4FF] via-white to-[#F5F8FF]">
+      {/* Logo区域 */}
+      <div className="mb-8 flex flex-col items-center">
+        <div className="w-20 h-20 rounded-full bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] flex items-center justify-center shadow-lg animate-bounce-slow">
+          <svg width="48" height="48" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <ellipse cx="19" cy="19" rx="19" ry="19" fill="url(#paint0_linear)"/>
+            <path d="M12 25c2.5-2 7.5-2 10 0" stroke="#fff" strokeWidth="2.2" strokeLinecap="round"/>
+            <ellipse cx="14.5" cy="16" rx="1.5" ry="2" fill="#fff"/>
+            <ellipse cx="23.5" cy="16" rx="1.5" ry="2" fill="#fff"/>
+            <defs>
+              <linearGradient id="paint0_linear" x1="0" y1="0" x2="38" y2="38" gradientUnits="userSpaceOnUse">
+                <stop stopColor="#2B69FF"/>
+                <stop offset="1" stopColor="#8F91FF"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+        <div className="mt-6 text-2xl font-semibold text-[#222222] tracking-wide">小鲸智能会话助手</div>
+        <div className="mt-2 text-sm text-[#555555]">让智能对话更简单</div>
+      </div>
+
+      {/* 进度条 */}
+      <div className="relative w-80 max-w-sm">
+        <div className="w-full h-2 bg-[#EEF4FF] rounded-full overflow-hidden shadow-inner">
+          <div
+            className="h-full bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] transition-all duration-300 ease-out"
+            style={{ width: `${Math.min(progress, 100)}%` }}
+          />
+        </div>
+        <div className="absolute -right-2 top-5 text-sm text-[#555555]">{Math.min(Math.round(progress), 100)}%</div>
+      </div>
+
+      {/* 加载提示 */}
+      <div className="mt-8 flex flex-col items-center gap-2">
+        <div className="text-sm text-[#555555] animate-pulse">
+          正在初始化应用
+        </div>
+        <div className="text-xs text-[#888888]">
+          首次加载可能需要一些时间，请耐心等待
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// 添加动画样式
+const style = document.createElement('style');
+style.textContent = `
+  .animate-bounce-slow {
+    animation: bounce 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  @keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+  }
+`;
+document.head.appendChild(style);

package/src/adopters/gientechCommon/components/DisplayError.tsx

@@ -0,0 +1,33 @@
+import { Button } from 'antd';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+
+export default function DisplayError() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-8 text-center bg-white/80 backdrop-blur-sm">
+      {/* 错误图标 */}
+      <div className="mb-6 animate-bounce">
+        <AlertCircle size={64} className="text-[#d70016]" />
+      </div>
+
+      {/* 错误标题 */}
+      <h2 className="text-[20px] font-medium text-[#222222] mb-3">
+        抱歉，遇到了一些问题
+      </h2>
+
+      {/* 错误描述 */}
+      <p className="text-[14px] text-[#555555] mb-8 max-w-[400px]">
+        请求失败，请稍后重试
+      </p>
+
+      {/* 重试按钮 */}
+      <Button
+        type="primary"
+        icon={<RefreshCw className="w-4 h-4" />}
+        onClick={() => window.location.reload()}
+        className="flex items-center gap-2 bg-gradient-to-r from-[#2B69FF] to-[#8F91FF] border-none hover:opacity-90"
+      >
+        重新加载
+      </Button>
+    </div>
+  );
+}

package/src/adopters/gientechCommon/components/DisplayLoading.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from 'antd';
+
+export default function DisplayLoading() {
+  return (
+    <div className="flex flex-col gap-8 p-4 w-full  mx-auto">
+      {/* 用户消息骨架 */}
+      <div className="flex items-start gap-4">
+        <div className="w-10 h-10 rounded-full bg-muted/80 animate-pulse" />
+        <div className="flex-1">
+          <Skeleton active paragraph={{ rows: 1 }} />
+        </div>
+      </div>
+
+      {/* AI回复骨架 */}
+      <div className="flex items-start gap-4">
+        <div className="w-10 h-10 rounded-full bg-muted/80 animate-pulse" />
+        <div className="flex-1">
+          <Skeleton active paragraph={{ rows: 3 }} />
+        </div>
+      </div>
+
+      {/* 第二组对话骨架 */}
+      <div className="flex items-start gap-4">
+        <div className="w-10 h-10 rounded-full bg-muted/80 animate-pulse" />
+        <div className="flex-1">
+          <Skeleton active paragraph={{ rows: 1 }} />
+        </div>
+      </div>
+
+      <div className="flex items-start gap-4">
+        <div className="w-10 h-10 rounded-full bg-muted/80 animate-pulse" />
+        <div className="flex-1">
+          <Skeleton active paragraph={{ rows: 2 }} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/adopters/gientechCommon/components/FeedBackModal.tsx

@@ -0,0 +1,310 @@
+import { Button, ConfigProvider, Form, Modal, Input, Tree, Tag } from 'antd';
+import { Key, useEffect, useMemo, useRef, useState } from 'react';
+import downArrow from '../../../assets/img/downArrow.png';
+
+import './style.less';
+import { ChevronRight } from 'lucide-react';
+const { TextArea } = Input;
+const { useForm } = Form;
+const pKey: any = {
+  回答不佳: 'ansPoor',
+  格式问题: 'formatError',
+  理解问题有误: 'harmfulInfo',
+  其他: 'othres',
+};
+const FeedBackModal = ({ open, setOpen, feedBackList, handleConfirm }: any) => {
+  const modalStyles = {
+    header: {
+      padding: '20px 24px',
+      borderBottom: '1px solid #F0F0F0',
+      margin: 0,
+    },
+    body: { padding: '16px 24px 20px 24px', borderBottom: '1px solid #F0F0F0' },
+    mask: {},
+    footer: { padding: '16px 24px', margin: 0 },
+    content: { padding: 0, borderRadius: '4px', width: '563px' },
+  };
+
+  const [form] = useForm();
+  const [treeSelectResult, setTreeSelectResult] = useState<null | any>({});
+
+  const handleOk = async () => {
+    try {
+      const data = await form.validateFields();
+      setOpen(false);
+      const param = {
+        ...data,
+      };
+      Object.entries(treeSelectResult || {}).forEach(item => {
+        const [key, value] = item;
+        if (value) {
+          param[pKey[key]] = value;
+        }
+      });
+      handleConfirm(param);
+    } catch (e) {
+      console.log(e);
+      return;
+    }
+  };
+
+  useEffect(() => {
+    if (!open) {
+      form.resetFields();
+      setTreeSelectResult(null);
+    }
+  }, [open]);
+
+  return (
+    <ConfigProvider
+      modal={{
+        styles: modalStyles,
+      }}
+    >
+      <Modal
+        open={open}
+        onCancel={() => setOpen(false)}
+        title={
+          <div className="text-[16px] text-[#2A2A2A] font-bold leading-[1]">
+            感谢您的反馈！这将帮助我们不断优化与提升。
+          </div>
+        }
+        footer={
+          <div>
+            <Button
+              className="mr-[16px] w-[76px]"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              取消
+            </Button>
+            <Button type="primary" className="w-[76px] border-none" onClick={handleOk}>
+              确认
+            </Button>
+          </div>
+        }
+      >
+        <SelectTreeCom
+          feedBackList={feedBackList}
+          treeSelectResult={treeSelectResult}
+          setTreeSelectResult={setTreeSelectResult}
+        />
+        <Form form={form} layout="vertical">
+          <Form.Item name="supplementExplain" label="补充描述">
+            <TextArea />
+          </Form.Item>{' '}
+          <Form.Item name="idealAnswer" label="您觉得更好的回答是什么？">
+            <TextArea />
+          </Form.Item>
+          <Form.Item name="userPhone" label="联系电话">
+            <Input />
+          </Form.Item>
+          <Form.Item name="deptName" label="部门">
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
+  );
+};
+export default FeedBackModal;
+
+const SelectTreeCom = ({ feedBackList, treeSelectResult, setTreeSelectResult }: any) => {
+  const [openSelect, setOpenSelect] = useState(false);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<Key[] | { checked: Key[]; halfChecked: Key[] }>(
+    []
+  );
+  const [selectedValue, setSelectedValue] = useState<
+    Key[] | { checked: Key[]; halfChecked: Key[] }
+  >([]);
+  const [selectedParent, setSelectedParent] = useState<null | {
+    que_name?: string;
+    items?: string[];
+  }>(null);
+  const curTree = useMemo(() => {
+    setCheckedKeys([]);
+    return selectedParent?.items
+      ? [
+          {
+            title: '全选',
+            key: '全选',
+            children: selectedParent.items.map(item => {
+              return {
+                title: item,
+                key: item,
+              };
+            }),
+          },
+        ]
+      : [];
+  }, [selectedParent]);
+
+  const handleClose = (removedTag: any) => {
+    setSelectedValue((pre: any) => {
+      if (Array.isArray(pre) && Array.isArray(checkedKeys)) {
+        const p = Object.entries(treeSelectResult).reduce((pre: any, current: any) => {
+          const [key, value] = current;
+          const tags = value ? value.split(';') : [];
+          const newTags = tags.filter((tag: any) => tag !== removedTag);
+          setTreeSelectResult((pre: any) => {
+            return {
+              ...(pre || {}),
+              [key]: newTags.join(';'),
+            };
+          });
+          return [...pre, ...newTags];
+        }, []);
+        return p;
+      }
+      return pre;
+    });
+  };
+
+  useEffect(() => {
+    setExpandedKeys(['全选']);
+    if (!treeSelectResult || !selectedParent?.que_name) return;
+    const res = treeSelectResult[selectedParent.que_name] || '';
+    const curSelectedValue = res ? res.split(';') : [];
+    setCheckedKeys(curSelectedValue);
+  }, [curTree, openSelect]);
+
+  useEffect(() => {
+    if (treeSelectResult === null) {
+      setSelectedValue([]);
+      setSelectedParent(null);
+      setCheckedKeys([]);
+    }
+  }, [treeSelectResult]);
+
+  useEffect(() => {
+    console.log('treeSelectResult', treeSelectResult);
+    console.log('selectedValue', selectedValue);
+    console.log('feedBackList', feedBackList);
+    console.log('pKey', pKey);
+    console.log('selectedParent', selectedParent);
+  }, [treeSelectResult, selectedValue]);
+  return (
+    <div className="relative mb-[24px] z-20">
+      <div className="absolute w-full z-10">
+        <div
+          className="h-[32px] box-border flex items-center justify-between border-[1px] border-solid border-[#D9D9D9] rounded-[4px] cursor-pointer"
+          onClick={() => setOpenSelect(!openSelect)}
+        >
+          <div className="ml-[16px]">问题类型</div>
+          <img src={downArrow} width={24} height={24} className="mr-[16px]" />
+        </div>
+        <div
+          style={{ display: openSelect ? '' : 'none' }}
+          className="h-[288px] rounded-[4px] shadow-md mt-[4px] bg-white"
+        >
+          <div className="h-[248px] flex" style={{ borderBottom: '1px solid #F0F0F0' }}>
+            <div
+              className="w-[203px] px-[8px] py-[8px]"
+              style={{ borderRight: '1px solid #F0F0F0' }}
+            >
+              {feedBackList.map((item: any, index: number) => {
+                return (
+                  <div
+                    key={index}
+                    className="rounded-[4px] h-[32px] cursor-pointer flex items-center"
+                    style={{
+                      backgroundColor: selectedParent?.que_name === item.que_name ? '#E6F4FF' : '',
+                    }}
+                  >
+                    <div
+                      className="h-full w-full leading-[32px]"
+                      onClick={() => {
+                        setSelectedParent(item);
+                      }}
+                    >
+                      <div className="ml-[8px] text-[14px] text-[#2A2A2A]">
+                        {item.que_name}(
+                        {treeSelectResult && treeSelectResult[item.que_name]
+                          ? treeSelectResult[item.que_name].split(';').length
+                          : 0}
+                        /{item?.items?.length})
+                      </div>
+                    </div>
+                    <ChevronRight className="mr-[8px] w-3 h-3 text-[rgba(0,0,0,0.45)]" />
+                  </div>
+                );
+              })}
+            </div>
+            <div className="selfTree h-full flex-1 mt-[8px] ml-[16px]">
+              <Tree
+                checkable
+                defaultSelectedKeys={['0-1']}
+                treeData={curTree}
+                blockNode
+                checkedKeys={checkedKeys}
+                expandedKeys={expandedKeys}
+                onCheck={(checkedKeys: Key[] | { checked: Key[]; halfChecked: Key[] }) => {
+                  if (Array.isArray(checkedKeys)) {
+                    setTreeSelectResult((pre: any) => {
+                      return {
+                        ...(pre || {}),
+                        [selectedParent?.que_name || '']: (checkedKeys || [])
+                          .filter(item => item !== '全选')
+                          .join(';'),
+                      };
+                    });
+                  }
+                  setCheckedKeys(checkedKeys);
+                }}
+              />
+            </div>
+          </div>
+          <div className="flex justify-end h-[40px] items-center">
+            <Button size="small" className="mr-[8px]" onClick={() => setOpenSelect(false)}>
+              取消
+            </Button>
+            <Button
+              size="small"
+              type="primary"
+              className="border-none mr-[16px]"
+              onClick={() => {
+                setSelectedValue((pre: any) => {
+                  if (Array.isArray(pre) && Array.isArray(checkedKeys)) {
+                    const p = Object.values(treeSelectResult).reduce((pre: any, current: any) => {
+                      return [...pre, ...(current ? current.split(';') : [])];
+                    }, []);
+                    return p;
+                  }
+                  return pre;
+                });
+                setOpenSelect(false);
+              }}
+            >
+              确认
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="h-[32px]"></div>
+
+      {!!(selectedValue as any)?.length && (
+        <div>
+          <div className="mt-[5px] text-[12px] text-[#555555]">
+            已选择 {(selectedValue as any).length} 个
+          </div>
+          {((selectedValue || []) as any).map((tag: string) => {
+            let qname = '';
+            Object.entries(treeSelectResult || {}).forEach(item => {
+              const [key, value]: any = item;
+              if (value.indexOf(tag) > -1) {
+                qname = key;
+              }
+            });
+            return (
+              <Tag key={tag} closable className="mt-[5px]" onClose={() => handleClose(tag)}>
+                {qname}（{tag}）
+              </Tag>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};