digitalsee-chatbox-sdk/examples/basic-usage.js

A flexible chatbox SDK for AI conversations with support for text, file, and voice input

// 基础使用示例
import { ChatBoxSDK } from 'digitalsee-chatbox-sdk';

// 1. 创建悬浮小部件
const widget = ChatBoxSDK.createWidget({
  title: '智能客服',
  placeholder: '请输入您的问题...',
  welcomeMessage: '您好！有什么可以帮助您的吗？',
  enableFileUpload: true,
  enableVoiceInput: true,
  position: 'bottom-right',
  onSend: async (content, files) => {
    try {
      // 模拟API调用
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          message: content, 
          files: files?.map(f => ({
            name: f.name,
            type: f.type,
            data: f.data
          }))
        }),
      });
      
      if (!response.ok) {
        throw new Error('API request failed');
      }
      
      const data = await response.json();
      return data.reply || '收到您的消息了！';
    } catch (error) {
      console.error('发送消息失败:', error);
      return '抱歉，发送消息时出现错误，请稍后重试。';
    }
  },
  onError: (error) => {
    console.error('ChatBox错误:', error);
  }
});

// 2. 创建嵌入式聊天
const embedded = ChatBoxSDK.createEmbedded('#chat-container', {
  title: '客服聊天',
  enableFileUpload: true,
  maxFileSize: 5, // 5MB
  allowedFileTypes: ['image/jpeg', 'image/png', 'application/pdf'],
  onSend: async (content) => {
    // 自定义处理逻辑
    return `您说: ${content}`;
  }
});

// 3. 动态更新配置
widget.updateConfig({
  title: '新标题',
  enableVoiceInput: false
});