ai-chat-widget-vanilla

ai-chat-widget-vanilla

框架无关的智能问答悬浮组件库（原生 JS，零依赖，兼容 Firefox 53）。

• 统一模型配置：普通大模型和单位封装模型都可写入 models；每项自行命名并配置 IP/路由，showModelSelector 控制是否显示下拉框
• 跨域接入：支持 withCredentials，跨域接口需服务端配置 CORS 或由宿主工程提供同源反向代理
• 图标可配置：AI 回复头像、标题栏图标、悬浮入口图标默认统一使用 assets/pic/1.png，可通过 icons 单独覆盖，图片加载失败自动回退内置 SVG
• 悬浮小窗 + 主窗口两种模式：默认右下角悬浮入口，可一键切换到豆包风格的"左侧对话列表 + 右侧对话区"主窗口
• 豆包风格输入框：textarea + 下方工具栏（+ 新建 / 模型名▾ 切换器 / 快速 / 更多 / ▶发送）
• 标题栏标准窗口按钮：最大化 / 全屏 / 切换主窗口 / 关闭
• 思考过程展示：自动识别 reasoning_content 字段（DeepSeek R1 / OpenAI o 系列），AI 气泡顶部可折叠展开
• 多模型切换：每个模型独立配置 baseURL / apiKey / model / temperature / maxTokens / stream / headers
• Markdown 富文本：图片 / 表格 / 代码块 / 标题 / 列表 / 引用 / 粗斜体删除线 / 行内代码
• 三套主题：深蓝色 / 标准色 / 深绿色

npm i ai-chat-widget-vanilla

import AIChat from 'ai-chat-widget-vanilla';

// 普通模型与单位模型都配置在 models；下拉框隐藏时固定调用第一项。
const chat = AIChat.init({
  showModelSelector: false,
  models: [
    {
      id: 'glm',
      name: 'GLM-5.3',
      // backend 不填写时默认按 OpenAI 兼容协议调用，不会调用 createSession
      baseURL: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
      apiKey: 'your-api-key',
      model: 'glm-5v-turbo'
    },
    {
      id: 'company-assistant',
      name: '单位智能助手',
      backend: 'unit', // 只有显式 unit 才调用 createSession / history
      baseURL: 'http://10.10.10.8:8080',
      token: 'Bearer xxx',
      routes: { chat: '/dialogue/dialogue/chat' }
    }
  ]
});

// 运行时显示下拉框，可在 GLM 与单位智能助手之间切换。
chat.setConfig({ showModelSelector: true });

详细文档见 docs/README.md，API 说明见 docs/API.md，多框架集成见 docs/INTEGRATION.md。

快速构建

npm install        # 安装构建依赖
npm run build      # 构建核心库（dist/ai-chat-widget.js / .min.js）
npm run zip        # 全量打包为 zip（含源码 + 产物 + 文档 + 演示工程）