聊天插件
<universal-chat-bot>：一个可嵌入的Web组件，可以将平台的聊天助手添加到任何网站。
flowchart LR
site[Host website] --> el["<universal-chat-bot> launcher"]
el -- first open --> panel[Chat panel, shadow DOM]
panel -. built from .-> core[chat-core]
panel -- "/v1/public + X-Widget-Key" --> rag[rag]
panel -- challenge --> turnstile[Cloudflare Turnstile]
关键部件
src/element-自定义元素，液体玻璃发射器（SVG边缘折射在铬），设置，移动页面锁定src/element/orb-动画帆布球src/panel-惰性加载React聊天面板src/embed.ts- script-tag loaderbuild/chatCore.ts-解析共享的聊天核心导入demo/-纯HTML， React和Vue主机
技术堆栈
- TypeScript， Web组件，Shadow DOM
- React 19（仅限面板），chat-core
- 维特（图书馆建设），维特，剧作家
安装
npm install @faysal1000/universal-chatbot
import '@faysal1000/universal-chatbot';
如果没有捆绑器，请改为从CDN加载它(参见 API）。
配置
设置为元素的属性。在管理控制台中创建可发布密钥 RAG→网站小部件.
| 属性 | 描述 | 默认的 |
|---|---|---|
api-key | 可发布密钥(pk_…） | 要求 |
api-url | rag的公共URL | 要求 |
position | top/middle/bottom + -left/-center/-right | bottom-right |
theme | light， dark 或者 auto | auto |
primary-color | 任何CSS颜色 | #6d5dfc |
offset-x | 左/右边缘间隙(24， 2rem） | 20px |
offset-y | 到上/下边缘的间隙(96， 6rem） | 20px |
greeting | 发射器的标签 | Chat |
language | en 或者 bn | 页面的语言 |
open | 当面板打开时在场 | 缺席 |
API
- 方法:
open()，close()，toggle()，isOpen - 事件:
chat-open，chat-close
<script src="https://cdn.jsdelivr.net/npm/@faysal1000/universal-chatbot@0/dist/embed.js" async></script>
<universal-chat-bot api-key="pk_your_key" api-url="https://chat-api.example.com"></universal-chat-bot>
在本地运行
npm ci
npm run dev # rebuild dist/ on change
npm run demo # demo hosts on http://localhost:5391
检查: npm run check;端到端: npm run test:e2e 对着运行的堆栈。