@asteby/metacore-ai-chat (英语)
Metacore apps 的副驾驶聊天:浮动部件(可移动 FAB),聊天面板, 启动提示,提议(同意/拒绝)和一个可注入的聊天客户端. 所有特定应用都被注入; 包导入没有商店, API 客户或路线.
安装
pnpm add @asteby/metacore-ai-chat @asteby/metacore-app-providers lucide-react
尾风必须扫描软件包(与其他元核UI软件包相同):
@source "../node_modules/@asteby/metacore-ai-chat/dist/**/*.{js,mjs}";
你注射的东西
| 关切 | 怎么样 |
|---|---|
| HTTP 客户端 | createHttpChatClient(api, { basePath: '/chat' }) 或属于自己的 ChatClient |
| 权限 | permissions={{ canChat, canDecideProposals }} (单位:千美元)canChat: false 隐藏部件并显示拒绝的通知 CopilotChat(中文(简体) ) |
| 标记 | branding={{ name, mascotSkin, avatar }};吉祥物是: Mascot 从 @asteby/metacore-app-providers |
| 建议 | suggestions={[...]},或省略使用 useAgentSuggestions() (租户) agent_suggestions中性默认值) |
| 复制 | labels={{ ... }} 部分覆盖( 西班牙默认值) |
REST默认合同createHttpChatClient:
POST {base}/send{message, session_id, attachments}- > (中文){success, session_id, reply|response, proposals?}GET {base}/sessions, (中文(简体) ),GET {base}/history/:idPOST {base}/proposals/:id/decide{approve}
不同的后端吗? 执行 ChatClient (单位:千美元)send 需要; listSessions, (中文(简体) ),
loadHistory, (中文(简体) ), decideProposal (可选).
建议格式
答复可能包含 proposals两种形状都得到接受并正常化(normalizeProposal(中文(简体) )
打开 ChatClient.send, (中文(简体) ), loadHistory 和 HTTP 客户端 :
// A) display shape
{ "id": "p1", "title": "Archivar hallazgo", "summary": "Motivo…", "status": "pending" }
// B) action shape: title = "action · model", summary = compact JSON of payload
{ "id": "p2", "action": "archive", "model": "finding", "payload": { "id": 7 }, "status": "pending" }
id 需要(字符串或数字,被强迫字符串); status 实值 pending (默认) approved | rejected。 。 。 .
明确 title编号 :summary 胜过所得者。 无行 id 或无所显示 被放弃.
action, (中文(简体) ), model 财务报告和审定财务报表 payload 保留在规范化的提案上 decideProposal 主机可以使用它们.
标记回复
AI的答复是安全的 Markdown + GFM(Markdown表格(横向卷轴),
blockquotes,内置/封装代码,并带有副本按钮,链接和图像. Raw HTML 从未被渲染过, 危险的 URL
放弃方案,打开外部链接 noopener noreferrer,图像仅限于http(s)/同源.
未终止的代码栅栏在输入回复时被关闭 。 只使用主题符号样式( 没有打字插件) .
过 onLinkClick 改为 CopilotProvider 以通过您的路由器( 返回) 路径内应用链接 true 处理时).
通道:机器人+代理+团队
给部件一个适配器,它就成为一个统一的收件箱。 软件包没有端点或套接字;您绘制了您的后端:
const channels: ChannelAdapter = {
listChannels: () => api.get('/internal-chat/channels').then(toChannels), // kind: 'bot' | 'agent' | 'team'
loadMessages: (id) => api.get(`/internal-chat/channels/${id}/messages`).then(toMessages),
send: (id, body) => api.post(`/internal-chat/channels/${id}/messages`, { body }).then(toMessage),
markRead: (id) => api.post(`/internal-chat/channels/${id}/read`),
subscribe: (on) => ws.subscribe('INTERNAL_CHAT_MESSAGE', (e) => on({ type: 'message', message: toMessage(e.payload) })),
}
<CopilotWidget channels={channels} fullscreenHref="/agent" />
- 机器人频道(你的)
ChatClient)首先注入(includeBot={false}(删除)。 一个agent带有自己的频道client: ChatClient获得完整的 AI 聊天( 提议, 历史); 没有一个, 它由适配器像团队线程一样服务 . - 未读计数驱动一个 FAB 徽章(即使面板关闭时仍然有效);最后打开的频道被记住.
subscribe事件:message, (中文(简体) ),unread, (中文(简体) ),presence, (中文(简体) ),channels(etch.
全屏幕
页眉的扩展按钮将部件变成一个取景口填充表面(列表+线程相并从 md 上升;
电话总是得到它. Escape 步骤后退: 扩大 / 浮动 / 关闭. fullscreenHref 编号 : onOpenFullscreen 添加一个
"开通全景"链接应用与自己的工作空间路线. hidden 删除已显示的路由中的部件 .
演示徽章
警徽显示何时 CopilotProvider demo 编号 : CopilotWidget demo 设置,或当后端显示回复时
demo: true (单位:千美元)createHttpChatClient 读取 demo 编号 : is_demo) (中文(简体) ). 永远不要把它永远留在 真实的数据.
无障碍性和状态
CopilotWidget面板为role="dialog"(单位:千美元)aria-label=品牌名称,aria-modal="false": 页面仍然可用). 重点转到作曲家的开场,然后回到FAB的关闭;Escape关闭( 任意)CopilotChat与onClose) (中文(简体) ).- 控件至少是44x44px 有明显的焦点环; 动画荣誉
prefers-reduced-motion。 。 。 . - 离线( E)
navigator.onLine) 显示状态横幅并禁用发送. 转弯失败时显示提示labels.retry· ;loadHistory财务报告和审定财务报表decideProposal失败显示警告( 历史带有重试) , 而不是沉默地失败 . demo打开CopilotProvider(或CopilotChat使labels.demo徽章("Datos destrativos").- 可选会话选择器 :
<CopilotChat sessions={list} sessionId={id} onSelectSession={setId} />(获得)list从client.listSessions()) (中文(简体) ).
通过
业务(ERP)
import { CopilotProvider, CopilotWidget, createHttpChatClient } from '@asteby/metacore-ai-chat'
import { api } from '@/lib/api'
import { useAuthStore } from '@/stores/auth-store'
const client = createHttpChatClient(api) // ops exposes /chat/send, /chat/sessions, /chat/history/:id
export function Copilot() {
const canChat = useAuthStore((s) => s.can('chat.use')) // adapt to your permission check
return (
<CopilotProvider client={client} permissions={{ canChat }}>
<CopilotWidget />
</CopilotProvider>
)
}
挂载 <Copilot /> 在认证的布局中替换 AIChatWidget。 。 。 .
这个软件包尚未覆盖( 在操作中停留直到后续): 语音/ 活模式,
文件上传、导游、团队对话嵌入、图表/舞蹈嵌入、火花丸.
使用 CopilotChat 直接面板( e)/agent 页 次) className="h-full"。 。 。 .
恶作剧
<CopilotProvider
client={createHttpChatClient(api, { basePath: '/api/v1/chat' })}
branding={{ name: 'Gobi', mascotSkin: 'gobi-navy' }}
permissions={{ canChat: hasPermission('copilot:use') }}
suggestions={['Resumen del tablero', 'Hallazgos pendientes de revisión']}
>
<CopilotWidget defaultPosition={{ bottom: 24, right: 24 }} />
</CopilotProvider>
如果gobiernos的后端使用不同的合同,通过习惯 ChatClient。 。 。 .
使用 suggestions (c) 省去它来继承租户的品牌.
还出口
useChat (状态机器), chatReducer, (中文(简体) ), useDraggableFab 编号 : computePanelLayout, (中文(简体) ),
useRevealText,则 AGENT_* 地表类常数( 使用主题符号)
--surface-*, (中文(简体) ), --elevation-*) (中文(简体) ).