SuperAPI AI 工具集

iblai-agent-chat-sidebar

智能体与模型

查看项目

更新于 10-15 22:16

技能介绍

用途:该技能在已正常渲染的 Chat 组件旁挂载 SDK 的 AppSidebar,得到 ibl.ai 完整外壳,包含 Projects 下拉(列出、创建、重命名、删除、跳转)、Pinned Messages、Recent Messages,以及宿主定义的顶部 contentItems 和底部 footerItems。侧边栏通过 shadcn 的 SidebarProvider 实现主题化,建立在 /iblai-agent-chat 路由之上。

前提:/iblai-agent-chat 必须已可用,Chat 组件在 /agents/<mentorId>/chat-new 正常渲染;@iblai/iblai-js 需从 @iblai/iblai-js/web-containers/next 导出 SidebarProvider 与 AppSidebar,否则会报 useSidebar must be used within a SidebarProvider。

主要改动:新增 app/agents/[mentorId]/chat-projects/page.tsx 路由,用 <SidebarProvider> 包裹,并排渲染 <AppSidebar> 与 <Chat>;同时把 SDK 引用的图标复制到 public/ 目录。

使用方式:先复制图标,命令为 mkdir -p public/icons,然后 cp <ibl-web-frontend-checkout>/apps/mentor/public/icons/new-project.svg public/icons/new-project.svg,cp <ibl-web-frontend-checkout>/apps/mentor/public/icons/projects.svg public/icons/projects.svg,cp <ibl-web-frontend-checkout>/apps/skills/public/placeholder.svg public/placeholder.svg。若不使用 monorepo,可复制任意 24×24 SVG 到相同路径。随后创建路由文件,在 SidebarProvider 内挂载 AppSidebar 与 Chat。AppSidebar 的必需属性为 contentItems 与 footerItems(可为空数组);showProjects、showPinnedMessages、showRecentMessages 用于切换各面板;projectsConfig 需提供 tenantKey、username、isLoggedIn、navigateToProject、navigateToMentorInProject,可选 activeProjectId、activeMentorId、executeWithTrialCheck、renderUnauthenticatedTrigger。

验证:运行 pnpm build 必须零错误;pnpm dev 后打开 http://localhost:3000/agents/<NEXT_PUBLIC_DEFAULT_AGENT_ID>/chat-projects,SSO 登录后检查侧边栏内容、项目列表与 Chat 表面。点击项目应更新 URL 为 /agents/<projectMentorId>/chat-projects?project=<projectId>,点击 New Project 应打开创建弹窗并跳转到新项目。

限制:不要给 SDK 的 AppSidebar 添加自定义样式、颜色或 CSS 覆盖;除用户明确要求外不要实现暗色模式。图标由 SDK 以绝对路径引用但未随包发布,需宿主自行提供。已知 SDK 缺口:SidebarProvider 等未出现在公开 barrel,图标未打包;CLI 集成仅为提议,尚未实现。缺少更多收费、平台或效果信息。