npm package: @ajunfornet/dify-chat-conversation
Description: dify chat conversation
Latest version: 1.0.3

# Conversation Web App Template
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/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:   
```js
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:
```bash
npm install
# or
yarn
# or
pnpm install
```

Then, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
Open [http://localhost:3000](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](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](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

> ⚠️ If you are using [Vercel Hobby](https://vercel.com/pricing), 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](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) 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. 环境准备
```bash
# 安装依赖
npm install
# 或
yarn install
# 或
pnpm install
```

### 2. 环境配置
创建 `.env.local` 文件并配置以下参数：

```env
# 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. 应用配置
在 <mcfile name="index.ts" path="d:\Project\other\webapp-conversation\config\index.ts"></mcfile> 中自定义应用信息：

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

### 4. 启动开发服务器
```bash
npm run dev
# 或
yarn dev
# 或
pnpm dev
```

访问 [http://localhost:3000](http://localhost:3000) 查看应用。

### 5. Docker 部署
```bash
# 构建镜像
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**: 支持容器化部署
- **静态导出**: 可配置为静态站点部署