Conversation Web App Template

This is a Next.js project bootstrapped with create-next-app.

Config App

Create a file named .env.local in the current directory and copy the contents from .env.example. Setting the following content:

# APP ID: This is the unique identifier for your app. You can find it in the app's detail page URL. 
# For example, in the URL `https://cloud.dify.ai/app/xxx/workflow`, the value `xxx` is your APP ID.
NEXT_PUBLIC_APP_ID=

# APP API Key: This is the key used to authenticate your app's API requests. 
# You can generate it on the app's "API Access" page by clicking the "API Key" button in the top-right corner.
NEXT_PUBLIC_APP_KEY=

# APP URL: This is the API's base URL. If you're using the Dify cloud service, set it to: https://api.dify.ai/v1.
NEXT_PUBLIC_API_URL=

Config more in config/index.ts file:

export const APP_INFO: AppInfo = {
  title: 'Chat APP',
  description: '',
  copyright: '',
  privacy_policy: '',
  default_language: 'zh-Hans'
}

export const isShowPrompt = true
export const promptTemplate = ''

Getting Started

First, install dependencies:

npm install
# or
yarn
# or
pnpm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Using Docker

docker build . -t <DOCKER_HUB_REPO>/webapp-conversation:latest
# now you can access it in port 3000
docker run -p 3000:3000 <DOCKER_HUB_REPO>/webapp-conversation:latest

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

⚠️ If you are using Vercel Hobby, your message will be truncated due to the limitation of vercel.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

项目架构分析报告

项目概述

这是一个基于 Next.js 14 构建的现代化对话式 Web 应用模板，专门用于集成 Dify AI 平台的智能对话功能。项目采用了现代化的前端技术栈，具有完整的国际化支持和响应式设计。

技术架构

🏗️ 核心框架

• Next.js 14: 使用 App Router 架构的 React 全栈框架
• React 18.2.0: 前端 UI 框架，支持最新的 React 特性
• TypeScript: 提供类型安全和更好的开发体验
• Tailwind CSS: 原子化 CSS 框架，配合自定义主题

🎨 UI 组件库

• @headlessui/react: 无样式的可访问性组件
• @heroicons/react: 图标库
• @remixicon/react: 额外的图标支持
• Monaco Editor: 代码编辑器组件

🌐 国际化支持

• i18next: 国际化框架
• 支持语言：英语(en)、西班牙语(es)、中文(zh-Hans)、日语(ja)
• 服务端和客户端渲染都支持国际化

📡 状态管理与数据处理

• ahooks: React Hooks 工具库
• immer: 不可变状态更新
• zustand (隐式): 轻量级状态管理
• axios: HTTP 客户端

🔧 开发工具

• ESLint: 代码质量检查
• Husky: Git hooks 管理
• PostCSS: CSS 后处理器

项目结构分析

📁 核心目录结构

├── app/                    # Next.js App Router 主目录
│   ├── api/               # API 路由
│   ├── components/        # React 组件
│   │   ├── chat/         # 聊天相关组件
│   │   ├── base/         # 基础 UI 组件
│   │   ├── sidebar/      # 侧边栏组件
│   │   └── welcome/      # 欢迎页组件
│   ├── layout.tsx        # 根布局组件
│   └── page.tsx          # 首页
├── config/               # 应用配置
├── hooks/                # 自定义 React Hooks
├── i18n/                 # 国际化配置和语言文件
├── service/              # API 服务层
├── types/                # TypeScript 类型定义
└── utils/                # 工具函数

🔑 核心功能模块

1. 聊天系统 (app/components/chat/)

• 实时对话: 支持流式响应的聊天界面
• 多媒体支持: 图片上传和显示功能
• 消息反馈: 点赞/点踩功能
• 工作流支持: 支持 Dify 工作流的可视化展示

2. 会话管理 (hooks/use-conversation.ts)

• 会话持久化: 本地存储会话状态
• 多会话支持: 支持创建和切换多个对话
• 输入状态管理: 管理用户输入和表单状态

3. API 集成 (service/)

• Dify API 集成: 完整的 Dify 平台 API 封装
• 流式响应处理: SSE (Server-Sent Events) 支持
• 错误处理: 统一的错误处理机制

🚀 快速上手指南

1. 环境准备

# 安装依赖
npm install
# 或
yarn install
# 或
pnpm install

2. 环境配置

创建 .env.local 文件并配置以下参数：

# Dify 应用 ID (在应用详情页面 URL 中获取)
NEXT_PUBLIC_APP_ID=your_app_id

# Dify API 密钥 (在应用的 "API 访问" 页面生成)
NEXT_PUBLIC_APP_KEY=your_api_key

# Dify API 基础 URL (云服务使用: https://api.dify.ai/v1)
NEXT_PUBLIC_API_URL=https://api.dify.ai/v1

3. 应用配置

在 中自定义应用信息：

export const APP_INFO: AppInfo = {
  title: '智能AI助手',
  description: '营销智能AI助手，基于大模型的智能助手',
  copyright: '2023 智能AI助手',
  privacy_policy: '',
  default_language: 'zh-Hans'
}

4. 启动开发服务器

npm run dev
# 或
yarn dev
# 或
pnpm dev

访问 http://localhost:3000 查看应用。

5. Docker 部署

# 构建镜像
docker build . -t webapp-conversation:latest

# 运行容器
docker run -p 3000:3000 webapp-conversation:latest

🎯 核心特性

✨ 功能特性

• 🤖 智能对话: 集成 Dify AI 平台的强大对话能力
• 📱 响应式设计: 支持桌面端、平板和移动端
• 🌍 多语言支持: 内置 4 种语言的国际化
• 🖼️ 多媒体交互: 支持图片上传和显示
• ⚡ 实时响应: 流式消息传输，提供流畅的对话体验
• 💾 会话持久化: 自动保存和恢复对话历史
• 🎨 主题定制: 基于 Tailwind CSS 的灵活主题系统

🔧 技术特性

• 类型安全: 完整的 TypeScript 类型定义
• 组件化架构: 高度模块化的组件设计
• 性能优化: React.memo 和 useMemo 优化渲染性能
• 错误边界: 完善的错误处理和用户反馈
• 代码质量: ESLint + Husky 保证代码质量

📋 开发建议

自定义开发

1. 组件扩展: 在 app/components/ 下添加新的 UI 组件
2. API 扩展: 在 service/ 下添加新的 API 服务
3. 类型定义: 在 types/ 下添加新的 TypeScript 类型
4. 工具函数: 在 utils/ 下添加通用工具函数

部署选项

• Vercel: 推荐的部署平台，与 Next.js 完美集成
• Docker: 支持容器化部署
• 静态导出: 可配置为静态站点部署