一个基于 Dify API 的 AI 会话 Web APP, 适配深度思考、Dify Chatflow/Workflow 应用、Agent 思维链输出信息。
如果你觉得这个项目还不错的话，请动动你的小手指点个 Star 吧～
<think> 标签（DeepSeek 深度思考）：
Chatflow 工作流：
知识库引用链接：
Echarts 图表：
单应用模式：
移动端支持：
回复表单：
- 💬 多场景兼容: 支持多应用、多会话视图，支撑不同业务场景
- 💃 灵活部署：自身无任何后端依赖，可无缝接入 Dify Cloud 及私有化部署的 API 服务
- 🚀 高效集成：提供高度可复用的 React 组件，加速开发进程
- 🎨 风格适配：支持深度自定义样式与主题，轻松契合业务系统独特风格
- React v18
- Ant Design v5
- Ant Design X v1
- Rsbuild v1
- Tailwind CSS v3
- TypeScript v5
开发/生产构建环境要求：
- Node.js v18.17.1+
- pnpm v8.x
注意：本应用使用了 pnpm workspace 来实现 Monorepo 管理，其他包管理工具可能无法正常工作，请先确保你的环境满足以上要求。
本项目支持两种开箱即用的使用方式：
- 单应用模式: 全局只需要一个 Dify 应用
- 多应用模式: 支持用户在界面上添加多个 Dify 应用
无论使用哪种模式，我们都需要对接 Dify API，你需要在 Dify 控制台获取几个关键变量：
| 变量 | 说明 |
|---|---|
| API Base | Dify API 请求前缀, 如果你使用的是 Dify 官方提供的云服务，则为 https://api.dify.ai/v1 |
| Api Key | Dify API 密钥，用于访问对应应用的 API, Dify 应用和 API 密钥是一对多的关系 |
进入 Dify 的应用详情，点击左侧的 访问 API：
API 服务器 后展示的域名即为 API Base 变量的值。
点击右侧的 API 密钥 按钮，即可看到 API Key 的管理弹窗：
你可以选择创建一个新的 API Key，或者复制现有的 API Key。
完成以上步骤后，我们将会得到如下信息：
- API Base:
https://api.dify.ai/v1OR${SELF_HOSTED_API_DOMAIN}/v1 - API Key:
app-YOUR_API_KEY
如果你全局只需要一个 Dify 应用, 不想让用户手动修改，可以使用单应用模式。
只需简单修改 src/App.tsx 中 DifyChatProvider 的属性即可：
export default function App() {
return (
<DifyChatProvider
value={{
// 修改为单应用模式
mode: 'singleApp',
// 用户id，可以获取业务系统的用户 ID，动态传入
user: USER,
// 单应用模式下，需要传入 appConfig 配置
appConfig: {
requestConfig: {
apiBase: '上一步中获取到的 API Base',
apiKey: '上一步中获取到的 API Key',
},
},
}}
>
子组件
</DifyChatProvider>
)
}如果你需要支持用户在界面上配置以及/或者切换多个 Dify 应用，多应用模式也是开箱即用的。
如果之前没有存量数据，第一次进入页面时会展示缺省状态，你需要点击页面右上角的 "应用配置管理" 按钮：
会弹出应用配置管理抽屉，点击下面的 "添加应用" 按钮：
即可打开添加配置抽屉：
依次填入我们在上一步中获取的信息：
点击确定按钮，提示 “添加配置成功”，在应用列表中会多出一条数据：
主界面也会默认切换到刚刚添加的应用，加载对话列表，默认渲染第一条对话的历史记录：
默认实现说明
为方便演示, 本项目默认使用 Localstorage 进行应用配置管理。
但实际在生产环境中，我们会将应用数据存储在服务端，此时就需要接入后端服务来实现应用配置管理。
为方便使用方自定义, 应用配置管理的服务是通过 src/App.tsx 中的 DifyChatProvider 组件注入的:
// src/App.tsx
import { DifyChatProvider } from '@dify-chat/core'
import DifyAppService from './services/app/localstorage'
export default function App() {
return (
<DifyChatProvider
value={{
appService: new DifyAppService(),
}}
>
子组件
</DifyChatProvider>
)
}在子组件中，会使用 useDifyChat 钩子获取 appService 实例并调用相关方法进行应用配置的管理。
自定义后端服务示例
在 "./services/app/restful.ts" 文件有一个 Restful API 的最简实现, 你可以根据下面的步骤来进行体验：
- 运行
pnpm --filter dify-chat-app-server start启动后端服务 - 将上面的
DifyAppService导入路径换成"./services/app/restful" - 运行
pnpm dev启动前端应用, 访问http://localhost:5200/dify-chat
自定义后端服务实现
如果需要自定义你的后端服务，请遵循以下步骤：
首先，参考 packages/server，实现以下接口：
- 获取 App 配置列表
- 获取 App 配置详情
- 添加 App 配置
- 更新 App 配置
- 删除 App 配置
然后在 src/services/app 中新建一个文件，只需要继承抽象类 DifyAppStore 并实现它的所有方法, 调用在上述服务中对应的接口即可。
当你不想让用户在界面上管理应用配置, 而是仅提供一个应用列表供用户切换，可以在 src/App.tsx 中添加一个配置项即可：
// src/App.tsx
import { DifyChatProvider } from '@dify-chat/core'
import DifyAppService from './services/app/localstorage'
export default function App() {
return (
<DifyChatProvider
value={{
enableSetting: false,
}}
>
子组件
</DifyChatProvider>
)
}此时，页面上就只会展示应用切换按钮, 用户仍然可以切换应用，但设置入口被隐藏：
Dify Cloud 以及私有化部署的 Dify 服务本身均支持跨域请求，无需额外处理，但如果你的私有化部署环境还存在额外的网关层，且对跨域资源访问有严格的限制，可能就会导致跨域问题，处理方式如下：
在你的网关层的响应 Header 处理中，增加 Access-Control-Allow-Origin 字段，允许 Dify-chat 应用的部署域名访问，以 nginx 为例：
# nginx.conf
server {
listen 443;
server_name dify-chat.com # 这里换成你的前端部署域名
location / {
add_header Access-Control-Allow-Origin https://dify-chat.com; # 这里换成你的前端部署协议+域名
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
}
}在项目根目录新建 .env.local 文件，添加以下内容：
# .env.local
DIFY_API_DOMAIN=https://api.dify.ai # 换成你的 API 部署域名
DIFY_API_PREFIX=/v1 # API 访问前缀，如果你没有对 Dify 进行魔改的话，一般就是 /v1然后，你需要在界面上修改上一步中 API Base 的配置：
- 修改前:
${SELF_HOSTED_API_DOMAIN}/v1 - 修改后:
/v1
在运行 pnpm dev 时，Rsbuild 会自动读取 .env.local 文件中的环境变量，设置正确的 server.proxy 实现本地代理，可以访问 rsbuild.config.ts 文件查看详情。
Dify 支持通过 jinja2 来配置回复表单供用户填写，本项目也支持了对应的功能。
注意：你需要自行在 Chatflow 中对
sys.query进行正确的逻辑处理，区分普通消息、触发表单的消息及提交信息。
默认情况下，在用户点击表单的提交按钮后，会将表单的值对象作为消息发送给 Dify 应用，同时会在消息列表中展示，提交消息的示例文本：
{
"username": "cellerchan",
"phone": "13012345678",
"content": "我要举报你",
"isFormSubmit": true
}其中，isFormSubmit 字段用于标识这是一个表单提交的消息, 你可以在 Chatflow 编排的条件分支中使用它来进行判断。
如果你不想展示具体的表单值对象，而是需要自定义发送的消息文本，可以按照下面的指引，在应用配置中进行配置（此配置只影响界面展示，实际提交到 Dify Chatflow 开始节点的仍然是用户填写的表单值 json 字符串）。
多应用模式
在添加/更新应用配置弹窗中填写字段：
- 表单回复 - 设置为 "启用"
- 提交消息文本 - 用于替换表单值对象的文本
单应用模式
在入口文件中，添加对应的属性即可：
export default function App() {
return (
<DifyChatProvider
value={{
mode: 'singleApp',
user: USER,
appConfig: {
requestConfig: {
apiBase: '你的 API Base',
apiKey: '你的 API Secret',
},
answerForm: {
enabled: true,
feedbackText: '我提交了一个表单',
},
},
}}
>
子组件
</DifyChatProvider>
)
}按照如上配置后，效果如下：
安装依赖:
pnpm install启动开发服务器：
支持子包热更新，无需提前构建
pnpm dev构建生产版本：
pnpm build预览生产版本：
pnpm preview- 支持多个会话切换
- 支持运行时用户自定义 Dify API 配置
- 移动端适配
- 消息更新时自动滚动到最底部
- 拆分独立组件库，方便二次开发
- 会话操作
- 支持会话重命名
- 消息发送区域功能
- 支持发送图片
- 支持发送其他类型的文件
- 支持打断输出
- 消息内容渲染
- 支持深度思考标签展示（如 DeepSeek-R1 的输出）
- 支持工作流信息展示
- 支持思维链展示
- 支持知识库引用列表展示
- 支持图片展示
- 支持图片放大查看
- 支持
Echarts渲染 - 支持数学公式渲染
- 支持文件卡片渲染
- 消息内容交互
- 支持内容复制
- 支持点赞/点踩
- 支持消息文件点击下载
- 支持回复表单展示和提交
- 支持多应用模式
- Localstorage 实现
- Restful API 实现
- 支持自定义后端服务
- 配置和切换功能分离，支持隐藏配置入口
- 支持单应用模式
- 子包发布
- 发布
@dify-chat/core包 - 发布
@dify-chat/helpers包 - 发布
@dify-chat/api包 - 发布
@dify-chat/components包
- 发布
- 国际化
- 支持单个会话视图
- 支持消息触顶/触底自动分页加载
- 支持回复重新生成、父级消息
- 支持夜间模式
- 支持自定义主题
- 补充不同类型应用场景的最佳实践
- 容器化部署支持
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
