其他

在 Customware React Router 客户端…

当需要在 Customware React Router 客户端 SPA 模板中添加、放置、配置或修复 Customware 支持聊天组件时使用。

被复用0 次

复用有效—

置信度55%

沉淀时间2026-09-23

🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）

来自 wangmia 的小呱沉淀

GDI C 38/100

进化评分（GDI）

综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」

内在质量 55/100 ×0.35

使用度 0/100 ×0.30

口碑 50/100 ×0.20

新鲜度 56/100 ×0.15

适用场景

在 Customware React R特定

解决思路

阅读 references/component-usage.md 获取完整的 React 代码示例、脚本加载模式、JSX 类型、bubble/full 模式示例、metadata 和 style 选项。
确认 React 应用已有 orgId 和 projectId。
选择模式：chat-bubble 用于浮动支持启动器/对话框；full 用于嵌入式侧栏、抽屉、分屏或固定聊天区域。
在 root.tsx 或定义 HTML 文档 <head> 的 React Router 根文件/组件中添加 script 标签，加载 https://app.customware.ai/support-widget/customware-chat.js，除非已存在。
当模板尚不认识 <customware-chat> 时，在 .d.ts 文件中添加 JSX custom element 类型声明。
在需要支持的具体 route 或 layout 中渲染 <customware-chat>，并传入 org-id 和 project-id。
需要时通过带类型的 React ref 设置可选的 meta 和 styleOptions。
full 模式：确保 wrapper/组件有具体高度，内部滚动由 widget 负责。
bubble 模式：确保 wrapper 不被裁剪，并设置合适的 z-index。
对生成的 React 代码进行语法校验，并在可用时运行 npm run check。
始终渲染真实的 custom element：<customware-chat>。
始终同时传入 org-id 和 project-id。
如果任一 id 不可用，以清晰的 missing-id 原因让任务失败，而不是渲染占位符或追问。
不要将 task ids、domain ids、user ids、API tokens、session tokens、auth cookies 或 secrets 传入组件。
meta 仅用于可选的访客身份：email 和/或 name。
使用 wrapper CSS、styleOptions 或 style-options 进行尺寸设置；不要使用原生 DOM style 属性作为 widget 配置。
工具调用是紧凑的状态徽章，不是按钮。
页面操作由 widget 内部处理；不要在其周围添加自定义 click/fill/page-control 处理器。
不要将页面操作提示或值硬编码到宿主应用中；用户必须将请求输入到 widget 中。
MITB 约束：不要假设可以访问 Playwright、截图、浏览器 DevTools 或视觉测试。
MITB 约束：不要声称 widget 经过了视觉测试。
MITB 约束：不要在生成的应用内编写面向用户的状态报告。
MITB 约束：通过代码检查、TypeScript/编译检查，并确保生成的 React Router/Vite 代码遵循 references/component-usage.md 中的示例来验证。
MITB 约束：如果生成期间运行时 id 不可用，以清晰的 missing-id 原因让任务失败；如果 id 预期在运行时异步加载，用 orgId && projectId 对组件进行条件渲染，使其永远不会以占位符渲染。

适用边界 · 注意事项

不要用于服务端渲染工作；目标模板是客户端 React Router SPA 模式。
不要用于构建自定义聊天 UI、iframe 嵌入 widget、直接调用支持聊天端点，或非模板 React 应用/非 React 应用（除非明确要求）。
如果无法确定 orgId 或 projectId，不要使用；应以清晰的缺少 Customware org/project id 原因让任务失败。