我之前在使用dify平台快速集成来实现智能问答、知识库这些场景的时候,需要对dify集成的chatapp进行定制化的样式、气泡等处理,这是一个比较麻烦的事情。所以这里我自己就写了一个解决方案来实现对dify平台零代码修改的方式来实现我的需求,比如修改我需要的样式、气泡、logo、窗口的自动顺滑拖拽等。
项目简介
Dify-ChatApp-Embedded-Exp 是一个专为 Dify 应用设计的嵌入式聊天组件解决方案。解决了嵌入式应用在用户体验、跨域通信和样式定制方面的核心痛点,为开发者提供集成方案。
项目亮点
🎯 智能窗口交互体验
- 流畅拖拽缩放:支持从左上角进行直观的窗口缩放操作
- 智能防重叠:自动避免聊天窗口与气泡按钮的视觉冲突
- 响应式布局:自适应不同屏幕尺寸,确保最佳显示效果
🎨 深度定制能力
- 动态样式注入:无需修改dify的原始代码即可实现界面样式定制
- 品牌一致性:支持与宿主应用保持统一的视觉风格
- 灵活配置:提供丰富的自定义选项满足不同场景需求
我也不知道还要在介绍啥了,核心思想就是通过代理的方式解决跨域然后嵌入平台在注入代码覆盖,以及使用浏览器的raf机制要求浏览器在下次重绘之前调用指定的回调函数更新动画。对你有帮助的话star下呗!