#嵌入已有产品与侧边助手

在现有页面放入聊天区，或将它作为侧边助手。布局由宿主 CSS 控制，不需要改 ChatKit 内部组件。

#为什么选择宿主布局

聊天区根节点填满所在容器；布局属于应用。单会话用 useChatRuntime，多会话用 useChatSessions。外置控件需要共享公开 hooks 时使用 ChatkitProvider。

#接入 SOP

1. 给页面容器明确高度；在 flex/grid 子项上设置 min-height: 0 与 min-width: 0，让内部滚动正常工作。
2. 嵌入式只渲染聊天区；完整应用把 SessionList 放在旁边；侧边助手把宿主容器限制为合适宽度。
3. 在需要复用的应用范围创建稳定适配器，避免每次打开面板都重建；按业务明确关闭面板时是否释放运行时。
4. 在窄屏将会话列表收起为抽屉或独立入口，确保聊天输入区保留足够空间。

正在加载真实示例…

源码与预览同源 · 8 个文本文件下载完整示例 ↓本地 SDK ↓场景链接 ↗

#验证结果

在主题工作台切换完整应用、嵌入式与侧边助手；发送消息并检查滚动、输入区和页面高度。再缩到 390px，确认没有主体横向溢出。

#排错

输入框超出页面检查父容器高度和 flex 最小尺寸；切换后任务丢失检查运行时卸载与 release；样式冲突检查包样式层和宿主全局选择器。

#完整代码与 API

下载本页完整示例，宿主布局参数位于示例代码中。见两种用法、主题和Hook 参考。