AI助手UI组件

一个基于React、Shadcn/UI和Tailwind CSS的AI助手UI组件，用于公司各系统集成。

特性

• 多种显示模式
  • 标准对话框模式 - 居中显示
  • 固定位置模式 - 固定在屏幕右下角
  • 目标DOM模式 - 固定在指定容器元素内
• 响应式设计，适配移动端和桌面端
  • 桌面端按照选择的模式显示
  • 移动端统一以抽屉形式从底部弹出
• 主题支持
  • 内置亮色和暗色两套主题
  • 默认使用暗色主题
  • 支持动态切换
• 功能模块
  • 客户分析
  • 自定义分析
  • 策略计划
• 简单API，易于集成

安装

npm install @company-ai/ai-assistant-ui

使用方法

基本用法

将AI助手添加到你的应用中：

import React from 'react';
import { createAIAssistant, AIAssistantControl } from '@company-ai/ai-assistant-ui';

// 创建AI助手容器组件
const AIAssistantContainer = createAIAssistant();

function App() {
  // 打开AI助手并传入数据
  const handleOpenAIAssistant = () => {
    AIAssistantControl.open({
      customerId: "cust_001",
      customerName: "测试公司",
      score: 85,
      riskLevel: "低",
      riskAnalysis: "客户风险较低，合作稳定",
      analysisResults: {
        // ... 更多数据
      }
    });
  };

  return (
    <div>
      <button onClick={handleOpenAIAssistant}>打开AI助手</button>
      
      {/* 将AI助手容器添加到你的应用 */}
      <AIAssistantContainer />
    </div>
  );
}

export default App;

固定位置模式

在页面右下角显示AI助手：

import React from 'react';
import { createAIAssistant } from '@company-ai/ai-assistant-ui';

// 创建固定位置的AI助手
const FixedAIAssistantContainer = createAIAssistant({
  fixedPosition: true,     // 启用固定位置模式
  rightOffset: 20,         // 距离右侧距离（像素）
  bottomOffset: 20,        // 距离底部距离（像素）
  maxWidth: 400,           // 最大宽度（像素）
  maxHeight: '90vh'        // 最大高度
});

// 在组件中访问控制器
function App() {
  const openAssistant = () => {
    // 通过全局对象访问控制器
    window.fixedAIAssistantControl.open(data);
  };

  return (
    <div>
      <button onClick={openAssistant}>打开固定位置AI助手</button>
      <FixedAIAssistantContainer />
    </div>
  );
}

目标DOM模式

在指定DOM元素内显示AI助手：

import React from 'react';
import { createAIAssistant } from '@company-ai/ai-assistant-ui';

// 创建DOM内固定位置的AI助手
const TargetedAIAssistantContainer = createAIAssistant({
  fixedPosition: true,        // 启用固定位置模式
  targetElementId: 'my-container', // 目标DOM元素ID
  rightOffset: 20,            // 在容器内的右侧偏移
  bottomOffset: 20,           // 在容器内的底部偏移
  maxWidth: 350               // 最大宽度
});

function App() {
  return (
    <div>
      {/* 创建一个相对定位的容器 */}
      <div id="my-container" style={{ position: 'relative', minHeight: '500px' }}>
        <h2>我的容器</h2>
        <p>AI助手将显示在此容器的右下角</p>
        
        <button onClick={() => window.targetedAIAssistantControl.open(data)}>
          在容器内打开AI助手
        </button>
      </div>
      
      <TargetedAIAssistantContainer />
    </div>
  );
}

多实例支持

可以创建多个命名实例：

// 创建多个命名实例
const SalesAIAssistant = createAIAssistant({ 
  instanceName: 'sales',       // 实例名称
  fixedPosition: true,
  maxWidth: 400
});

const SupportAIAssistant = createAIAssistant({ 
  instanceName: 'support',     // 实例名称
  maxWidth: 450
});

// 使用命名实例的控制器
function openSalesAssistant() {
  window.salesAIAssistantControl.open(salesData);
}

function openSupportAssistant() {
  window.supportAIAssistantControl.open(supportData);
}

自定义主题

您可以使用ThemeProvider和useTheme钩子自定义主题切换：

import React from 'react';
import { ThemeProvider, useTheme, createAIAssistant } from '@company-ai/ai-assistant-ui';

// 主题切换按钮组件
const ThemeToggle = () => {
  const { theme, setTheme } = useTheme();
  
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? '切换到亮色主题' : '切换到暗色主题'}
    </button>
  );
};

移动端检测

组件库提供了方便的钩子来检测设备类型：

import { useMobile, useTablet, useDesktop } from '@company-ai/ai-assistant-ui';

function MyComponent() {
  const isMobile = useMobile(); // 屏幕宽度小于640px
  const isTablet = useTablet(); // 屏幕宽度在641px到1024px之间
  const isDesktop = useDesktop(); // 屏幕宽度大于1025px
  
  return (
    <div>
      {isMobile && <p>当前是移动设备视图</p>}
      {isTablet && <p>当前是平板设备视图</p>}
      {isDesktop && <p>当前是桌面设备视图</p>}
    </div>
  );
}

API

组件配置选项

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | fixedPosition | boolean | false | 是否启用固定位置模式 | | targetElementId | string | undefined | 目标DOM元素ID，启用容器内定位 | | rightOffset | number | 20 | 右侧偏移（像素） | | bottomOffset | number | 20 | 底部偏移（像素） | | maxWidth | number | 400 | 最大宽度（像素） | | maxHeight | string | '90vh' | 最大高度 | | instanceName | string | undefined | 实例名称，用于全局访问 | | className | string | undefined | 自定义类名 |

控制方法

// 打开AI助手并传入数据
AIAssistantControl.open(data);

// 关闭AI助手
AIAssistantControl.close();

// 检查AI助手是否打开
const isOpen = AIAssistantControl.isOpen();

// 更新AI助手数据
AIAssistantControl.updateData(newData);

数据格式

interface CustomerDataType {
  customerId: string;
  customerName: string;
  score: number;
  riskLevel: string;
  riskAnalysis: string;
  analysisResults: {
    // ... 详细数据结构
  };
}

开发

# 安装依赖
npm install

# 本地开发服务
npm run dev

# 组件库开发模式（监听文件变化）
npm run dev:build

# 构建
npm run build

本地开发环境

组件库提供了一个本地开发环境，可以实时预览和测试组件的功能：

1. 启动开发服务器：npm run dev
2. 浏览器会自动打开 http://localhost:3000
3. 开发环境包含了以下功能：
   • 不同显示模式测试（对话框、固定位置、目标DOM）
   • 主题切换测试
   • 移动/桌面响应式布局测试
   • 自定义数据测试

开发环境的代码位于 dev 目录，可以根据需要自定义开发环境。

许可证

ISC © Company AI