@mxmweb/aichat 1.1.1 → 1.1.8

package/src/components/Sidebar/useDynamicFormItems.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import { Form, Input, Select, InputNumber, Slider, Switch, Row, Col, Tooltip, DatePicker, Radio, Tag } from 'antd';
+import { CircleHelp,  } from 'lucide-react';
+import type { FormItemProps } from '../AiChat.types';
+
+function renderLabel(item: FormItemProps) {
+  return (
+    <span className="flex items-center gap-1">
+      <span className="font-medium text-gray-800">{item.label}</span>
+      {item.description && (
+        <Tooltip title={item.description} className=' cursor-help'>
+          <CircleHelp className="ml-0.5 text-gray-400" size={12} />
+        </Tooltip>
+      )}
+      {item.required &&  <Tag className='text-[9px]'  bordered={false} color="warning">必填</Tag>}
+    </span>
+  );
+}
+
+export function useDynamicFormItems(config: FormItemProps[] = [], styles?: any, initialValues: Record<string, any> = {}) {
+  // 受控项状态管理
+  const [switchStates, setSwitchStates] = React.useState<Record<string, boolean>>(() => {
+    const state: Record<string, boolean> = {};
+    config.forEach(item => {
+      if (item.type === 'switch') {
+        state[item.name] = initialValues[item.name] ?? item.defaultValue ?? false;
+      }
+    });
+    return state;
+  });
+
+  // 受控项的隐藏与清空逻辑
+  const formRef = React.useRef<any>();
+
+  // 监听switch变化，动态隐藏/清空受控项
+  const handleSwitchChange = (name: string, checked: boolean, controlledItems?: string[]) => {
+    setSwitchStates(prev => ({ ...prev, [name]: checked }));
+    if (formRef.current && controlledItems) {
+      if (!checked) {
+        // 关闭时清空受控项
+        controlledItems.forEach(itemName => {
+          formRef.current.setFieldsValue({ [itemName]: undefined });
+        });
+      }
+    }
+  };
+
+  // 计算哪些项需要隐藏
+  const hiddenItems = new Set<string>();
+  config.forEach(item => {
+    if (item.type === 'switch' && item.controlledItems && switchStates[item.name] === false) {
+      item.controlledItems.forEach(name => hiddenItems.add(name));
+    }
+  });
+
+  // 渲染表单项
+  const formItems = config.map(item => {
+    if (hiddenItems.has(item.name)) return null;
+    if (item.type === 'divider') {
+      return <div key={item.name || Math.random()} className="my-3 border-b border-solid border-gray-200" />;
+    }
+    if (item.type === 'input') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请输入${item.label}` }]}>
+          <Input placeholder={item.placeholder} disabled={item.disabled} className={item.className} />
+        </Form.Item>
+      );
+    }
+    if (item.type === 'select') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请选择${item.label}` }]}>
+          <Select options={item.options} placeholder={item.placeholder} disabled={item.disabled} className={item.className} />
+        </Form.Item>
+      );
+    }
+    if (item.type === 'number') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请输入${item.label}` }]}>
+          <InputNumber
+            addonAfter={item.unit ? <span className='text-[10px] text-gray-300'>{item.unit}</span> : null}
+            min={item.range?.min} max={item.range?.max} step={item.step} placeholder={item.placeholder} disabled={item.disabled} className={item.className} style={{ width: '100%' }} />
+        </Form.Item>
+      );
+    }
+    if (item.type === 'slider') {
+      return (
+        <div key={item.name} className="mb-6">
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center text-sm">
+              {renderLabel(item)}
+            </div>
+            <Form.Item name={item.name} noStyle>
+              <InputNumber
+                min={item.range?.min}
+                max={item.range?.max}
+                step={item.step}
+                disabled={item.disabled}
+                style={{ width: 80, marginLeft: 8 }}
+              />
+            </Form.Item>
+            {item.unit && <span className="ml-2">{item.unit}</span>}
+          </div>
+          <Form.Item name={item.name} noStyle>
+            <Slider
+              min={item.range?.min}
+              max={item.range?.max}
+              step={item.step}
+              disabled={item.disabled}
+              className={item.className}
+            />
+          </Form.Item>
+        </div>
+      );
+    }
+    if (item.type === 'switch') {
+      return (
+        <Form.Item
+          key={item.name}
+          label={null}
+          colon={false}
+          style={{ marginBottom: 16 }}
+        >
+          <Row align="middle" justify="space-between">
+            <Col>
+              {renderLabel(item)}
+            </Col>
+            <Col>
+              <Form.Item
+                name={item.name}
+                valuePropName="checked"
+                noStyle
+              >
+                <Switch
+                  disabled={item.disabled}
+                  checked={switchStates[item.name]}
+                  onChange={checked => handleSwitchChange(item.name, checked, item.controlledItems)}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form.Item>
+      );
+    }
+    if (item.type === 'textarea') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请输入${item.label}` }]}>
+          <Input.TextArea placeholder={item.placeholder} disabled={item.disabled} className={item.className} autoSize={{ minRows: 2, maxRows: 6 }} />
+        </Form.Item>
+      );
+    }
+    if (item.type === 'date') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请选择${item.label}` }]}>
+          <DatePicker placeholder={item.placeholder} disabled={item.disabled} className={item.className} style={{ width: '100%' }} />
+        </Form.Item>
+      );
+    }
+    if (item.type === 'radio') {
+      return (
+        <Form.Item key={item.name} label={renderLabel(item)} name={item.name} rules={[{ required: item.required, message: item.error || `请选择${item.label}` }]}>
+          <Radio.Group options={item.options} disabled={item.disabled} className={item.className} />
+        </Form.Item>
+      );
+    }
+    return null;
+  });
+
+  // 提供 formRef 给外部（如有需要）
+  React.useEffect(() => {
+    if (styles && typeof styles.setFormRef === 'function') {
+      styles.setFormRef(formRef);
+    }
+  }, [styles]);
+
+  return formItems;
+}

package/src/components/SidebarProp.ts

@@ -0,0 +1,41 @@
+export interface SidebarTabConfig {
+  key: string;
+  type: 'custom' | 'form';
+  label: string;
+  icon: any;
+  enabled?: boolean;
+  component?: any; // type=custom
+  formConfig?: any[]; // type=form
+  initialValues?: Record<string, any>;
+  onChange?: (values: any) => void;
+}
+
+export interface SidebarProps {
+  tabs: SidebarTabConfig[];
+  styles?: any;
+}
+
+// mock 示例
+export const sidebarMock: SidebarProps = {
+  tabs: [
+    {
+      key: 'conversations',
+      type: 'custom',
+      label: '对话历史',
+      icon: 'History', // 这里只做示例
+      enabled: true,
+      component: '<ConversationPanel ... />',
+    },
+    {
+      key: 'llmConfig',
+      type: 'form',
+      label: '大模型配置',
+      icon: 'Settings2',
+      enabled: true,
+      formConfig: [], // 这里填表单配置
+      initialValues: {},
+      onChange: (values) => {},
+    },
+  ],
+  styles: {},
+};

package/src/components/common/FileCardCommon.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { X } from 'lucide-react';
+
+export interface FileCardCommonProps {
+  fileName: string;
+  fileSize?: number;
+  icon: React.ReactNode;
+  statusText?: string;
+  statusColor?: string;
+  statusIcon?: React.ReactNode;
+  onRemove?: () => void;
+  themeColors?: any;
+  cardId?: string;
+  showRemove?: boolean;
+  disabledRemove?: boolean;
+  onRemoveWithAnim?: (id: string) => void;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+const formatSize = (size?: number) => {
+  if (!size) return '';
+  if (size < 1024) return `${size}B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)}KB`;
+  return `${(size / 1024 / 1024).toFixed(1)}MB`;
+};
+
+const FileCardCommon: React.FC<FileCardCommonProps> = ({
+  fileName,
+  fileSize,
+  icon,
+  statusText,
+  statusColor = 'text-gray-400',
+  statusIcon,
+  onRemove,
+  themeColors = {},
+  cardId,
+  showRemove = true,
+  disabledRemove = false,
+  onRemoveWithAnim,
+  extra,
+  style
+}) => {
+  return (
+    <div
+      id={cardId}
+      className="group gap-x-2.5 items-center file-display-card relative flex w-[210px] bg-white border border-gray-200 rounded-md shadow-sm px-2 py-1 transition-all hover:shadow-md hover:border-blue-300"
+      style={style}
+    >
+      <div className="pt-1">{icon}</div>
+      <div className="flex-1 min-w-0 flex flex-col justify-center">
+        <div className="flex items-center justify-between gap-1">
+          <span className="text-[12px] font-medium truncate max-w-[120px]" title={fileName}>{fileName}</span>
+          <span className="ml-1 text-[11px] text-gray-400">{formatSize(fileSize)}</span>
+        </div>
+        <div className={`text-[10px] mt-0.5 flex items-center gap-3 ${statusColor}`}>
+          {statusIcon}
+          <span>{statusText}</span>
+        </div>
+      </div>
+      {extra}
+      {showRemove && !disabledRemove && (
+        <button
+          className="absolute top-0.5 right-0.5 opacity-0 group-hover:opacity-100 transition-opacity text-gray-300 hover:text-red-400 text-xs p-0.5 rounded-full bg-white shadow-sm z-10"
+          onClick={() => {
+            if (onRemoveWithAnim && cardId) {
+              onRemoveWithAnim(cardId);
+            } else if (onRemove) {
+              onRemove();
+            }
+          }}
+          title="移除"
+          style={{ lineHeight: 0, color: themeColors.error || '#FF0000' }}
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default FileCardCommon;

package/src/components/defaultStyleSet.tsx

@@ -0,0 +1,142 @@
+// 主题类型定义
+export type SizeType = 'sm' | 'md' | 'lg'
+export type FontWeightType = 'normal' | 'bold' |'thin'
+export type FontFamilyType = 'default' | 'serif' | 'mono'
+
+export interface AiChatStyles {
+  theme?: AppTheme
+  mode?: 'light' | 'dark'
+  [key: string]: any
+}
+
+export interface ThemeColors {
+  primary: string
+  secondary: string
+  success: string
+  warning: string
+  error: string
+  info: string
+  background: string
+  text: string
+  border: string
+  disabled: string
+  disabledBackground: string
+  disabledText: string
+  shadow: string
+  appBackground: string
+}
+
+export interface ThemeOthers {
+
+}
+
+export interface ThemeSpace {
+  sidebar: string
+  size: string
+  radius: string
+  padding: string
+  margin: string
+  shadow: string
+  lineHeight: string
+}
+
+export interface ThemeIcons {
+  aiAvatar: string
+  userAvatar: string
+  pdf: string
+  word: string
+  image: string
+  video: string
+  audio: string
+  excel: string
+  ppt: string
+}
+
+export interface AppTheme {
+  colors: ThemeColors
+
+  space: ThemeSpace
+  icons: ThemeIcons
+  others: ThemeOthers
+}
+
+// 默认主题实现
+export const defaultTheme: AppTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#008000',
+    warning: '#FFA500',
+    error: '#FF0000',
+    info: '#0000FF',
+    background: '#f8f9fa',
+    text: '#343a40',
+    border: '#dee2e6',
+    disabled: '#808080',
+    disabledBackground: '#F5F5F5',
+    disabledText: '#808080',
+    shadow: '#000000',
+    appBackground: 'transparent',
+  },
+  space: {
+    sidebar: 'md',
+    size: 'md',
+    radius: 'md',
+    padding: 'md',
+    margin: 'md',
+    shadow: 'md',
+    lineHeight: 'md',
+  },
+  icons: {
+    aiAvatar: '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',
+    userAvatar: 'http://10.15.12.13:9005/assets/nav-logo-BKaOCDqi.png',
+    pdf: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/pdf-icon.png',
+    word: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/word-icon.png',
+    image: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/image-icon.png',
+    video: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/video-icon.png',
+    audio: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/audio-icon.png',
+    excel: 'https://ai-chat-1326151111.cos.c zap-shanghai.myqcloud.com/excel-icon.png',
+    ppt: 'https://ai-chat-1326151111.cos.ap-shanghai.myqcloud.com/ppt-icon.png',
+  },
+  others: {
+    baseFontWeight: 'normal',
+  },
+}
+
+// SizeType 映射表
+export const sidebarMap = {
+  sm: '240px',
+  md: '260px',
+  lg: '280px',
+};
+export const sizeMap = {
+  sm: '12px',
+  md: '16px',
+  lg: '20px',
+};
+export const radiusMap = {
+  sm: '2px',
+  md: '4px',
+  lg: '8px',
+};
+export const paddingMap = {
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+};
+export const marginMap = {
+  sm: '4px',
+  md: '8px',
+  lg: '16px',
+};
+export const shadowMap = {
+  sm: '0 1px 2px #eee',
+  md: '0 2px 8px #ddd',
+  lg: '0 4px 16px #ccc',
+};
+export const lineHeightMap = {
+  sm: '1.2',
+  md: '1.5',
+  lg: '2',
+};
+

package/src/components/styles.config.ts

@@ -0,0 +1,4 @@
+export const defaultStyles = {
+  sidebarWidth: '320px',
+  formSize: 'small',
+}

package/src/lib_enter.ts

@@ -0,0 +1,12 @@
+import './style.css';
+// 导出 Mermaid 相关组件
+// export { default as MermaidRenderer } from './views/MermaidRenderer';
+// export { default as MermaidContainer } from './views/MermaidContainer';
+
+// // 导出 相关类型
+// export type { MermaidRendererProps, MermaidRendererRef } from './views/MermaidRenderer';
+// export type { MermaidContainerProps } from './views/MermaidContainer';
+
+export { default as AiChat, type AppStatusManager } from './components/AiChat';
+export { default as GientechChat } from './adopters/GientechChat';
+export { default as HeadLessChat } from './adopters/HeadLessChat';

package/src/main.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import './style.css';
+import Preview from './Preview';
+import HeadlessChat from './HeadlessChat';
+import UseLogingHeadless from './UseLogingHeadless';
+import './assets/style.css';
+const App = () => {
+  return <Preview />;
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

package/src/mockForm.ts

@@ -0,0 +1,91 @@
+export const mockFormConfig = [
+  {
+    type: 'input',
+    label: 'API Key',
+    name: 'apiKey',
+    placeholder: '请输入API Key',
+    required: true,
+    error: 'API Key为必填项',
+  },
+  {
+    type: 'switch',
+    label: '启用高级模式',
+    name: 'advanced',
+    defaultValue: false,
+    controlledItems: ['modelType', 'maxTokens'],
+    description: '启用高级模式后，可以启用更多功能',
+  },
+  {
+    type: 'select',
+    label: '模型类型',
+    name: 'modelType',
+    defaultValue: 'gpt-4',
+    options: [
+      { label: 'GPT-4', value: 'gpt-4' },
+      { label: 'GLM-4', value: 'glm-4' },
+      { label: 'Qwen', value: 'qwen' },
+    ],
+  },
+  {
+    type: 'number',
+    label: '最大Token数',
+    name: 'maxTokens',
+    defaultValue: 2048,
+    range: { min: 512, max: 4096 },
+    step: 1,
+    unit: 'tokens',
+  },
+  {
+    type: 'slider',
+    label: '温度',
+    name: 'temperature',
+    defaultValue: 1,
+    range: { min: 0, max: 2 },
+    step: 0.1,
+    unit: '',
+  },
+  {
+    type: 'date',
+    label: '过期日期',
+    name: 'expireDate',
+    placeholder: '请选择日期',
+    required: true,
+  },
+  {
+    type: 'divider',
+    label: '新的分组',
+    name: 'divider',
+  },
+  {
+    type: 'radio',
+    label: '优先级',
+    name: 'priority',
+    defaultValue: 'normal',
+    options: [
+      { label: '高', value: 'high' },
+      { label: '中', value: 'normal' },
+      { label: '低', value: 'low' },
+    ],
+    required: true,
+    description: '优先级越高，越优先处理',
+  },
+  {
+    type: 'textarea',
+    label: '备注',
+    name: 'remark',
+    placeholder: '请输入备注',
+    required: false,
+  },
+]
+
+export const mockNetConfig = [
+
+  {
+    type: 'switch',
+    label: '开启联网功能',
+    name: 'advanced',
+    defaultValue: false,
+    controlledItems: ['modelType', 'maxTokens'],
+    description: '启用高级模式后，可以启用更多功能',
+  }
+]

package/src/servers/chatApi.ts

@@ -0,0 +1,43 @@
+export async function sendChatMessage({ url, token, params, onMessage, onError }: {
+  url: string;
+  token: string;
+  params: any;
+  onMessage: (msg: any) => void;
+  onError?: (err: any) => void;
+}) {
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': token
+      },
+      body: JSON.stringify(params)
+    });
+    if (!response.body) throw new Error('无响应流');
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    let done = false;
+    while (!done) {
+      const { value, done: readDone } = await reader.read();
+      done = readDone;
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+      for (let line of lines) {
+        if (line.startsWith('data:')) {
+          try {
+            const json = JSON.parse(line.replace('data:', '').trim());
+            onMessage(json);
+          } catch (e) {
+            if (onError) onError(e);
+          }
+        }
+      }
+    }
+  } catch (err) {
+    if (onError) onError(err);
+  }
+}

package/src/servers/fileApi.ts

@@ -0,0 +1,12 @@
+export async function uploadFiles({ url, token, files }: { url: string; token: string; files: File[] }) {
+  const formData = new FormData();
+  files.forEach(file => formData.append('files', file));
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Authorization': token
+    },
+    body: formData
+  });
+  return response.json();
+}

package/src/servers/modelApi.ts

@@ -0,0 +1,19 @@
+export async function getModelList({ url, token }: { url: string; token: string }) {
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Authorization': token
+    }
+  });
+  return response.json();
+}
+
+export async function getRecallModelList({ url, token }: { url: string; token: string }) {
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Authorization': token
+    }
+  });
+  return response.json();
+}

package/src/style.css

@@ -0,0 +1,22 @@
+@import 'tailwindcss';
+/* 额外的全局样式 */
+.preview-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.preview-container h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-size: 24px;
+  color: #333;
+}
+
+.custom-background {
+  background-color: var(--custom-background);
+}
+
+body {
+  margin: 0;
+}

package/src/testj.js

@@ -0,0 +1,3 @@
+http://10.15.12.13:9000/dev-rag-data/小鲸智能问答/需求设计--抽取式构建PPT.pptx/V0/parsed/images/image-2.jpg;http://10.15.12.13:9000/dev-rag-data/小鲸智能问答/需求设计--抽取式构建PPT.pptx/V0/parsed/images/image-3.jpg
+
+http://10.15.12.13:9000/dev-rag-data/小鲸智能问答/需求设计--抽取式构建PPT.pptx/V0/parsed/images/image-2.jpg;http://10.15.12.13:9000/dev-rag-data/小鲸智能问答/需求设计--抽取式构建PPT.pptx/V0/parsed/images/image-3.jpg