重命名前端项目目录：web-flowith -> web

- 将前端项目目录从 web-flowith 重命名为 web，使目录结构更简洁
- 保持所有前端代码和配置文件不变
- 统一项目目录命名规范

web/WebSocket聊天功能完善总结.md

@@ -0,0 +1,136 @@
+# WebSocket聊天功能完善总结
+
+## 概述
+
+根据后端WebSocket接口和聊天接口，对前端聊天页面功能进行了全面完善，提升了用户体验和系统稳定性。
+
+## 完成的功能改进
+
+### 1. ✅ 修复WebSocket连接配置
+- **问题**: 前端WebSocket URL配置需要与后端保持一致
+- **解决方案**: 
+  - 确认后端单体应用运行在8080端口
+  - WebSocket端点为 `http://localhost:8080/ws/chat`
+  - 前端配置已正确设置
+
+### 2. ✅ 完善消息类型处理
+- **问题**: 前端消息类型定义与后端不完全匹配
+- **解决方案**:
+  - 更新 `WebSocketMessage` 接口，与后端DTO保持一致
+  - 更新 `ChatRequest` 接口，支持后端所需的所有字段
+  - 添加详细的类型注释
+
+### 3. ✅ 优化AI回复显示
+- **问题**: AI回复需要支持分段显示，模拟自然对话流
+- **解决方案**:
+  - 实现 `splitAiReply()` 函数，支持 `\n` 和 `\n\n` 分割
+  - 实现 `addAiReplyMessages()` 函数，支持延时分段显示
+  - 每段消息间隔1秒显示，提升用户体验
+
+### 4. ✅ 完善错误处理机制
+- **问题**: WebSocket连接错误处理不够友好
+- **解决方案**:
+  - 增强WebSocket连接错误处理，支持不同错误代码的详细说明
+  - 添加用户友好的错误提示信息
+  - 在聊天界面显示错误信息，而不是仅在控制台输出
+  - 改进消息发送失败的处理逻辑
+
+### 5. ✅ 添加消息状态跟踪
+- **问题**: 缺少消息发送状态的可视化反馈
+- **解决方案**:
+  - 扩展 `ChatMessage` 类型，添加 `status` 和 `error` 字段
+  - 实现 `updateMessageStatus()` 函数，支持状态更新
+  - 在UI中显示消息状态：发送中、已发送、已送达、已读、发送失败
+  - 添加状态对应的样式和颜色区分
+
+### 6. ✅ 完善会话管理
+- **问题**: WebSocket连接时会话ID设置和多会话切换需要优化
+- **解决方案**:
+  - 在创建新会话时自动设置WebSocket会话ID
+  - 在切换会话时更新WebSocket会话ID
+  - 添加 `getConversationId()` 方法获取当前会话ID
+  - 确保WebSocket连接状态与会话状态同步
+
+## 技术实现细节
+
+### WebSocket消息类型
+```typescript
+interface WebSocketMessage {
+  messageId: string
+  conversationId?: string
+  type: 'TEXT' | 'TYPING' | 'SYSTEM' | 'ERROR' | 'HEARTBEAT' | 'CONNECTION' | 'AI_THINKING'
+  content: string
+  senderId: string
+  senderType: 'USER' | 'GUEST' | 'AI' | 'SYSTEM'
+  status: 'SENDING' | 'SENT' | 'DELIVERED' | 'READ' | 'FAILED'
+  createTime: string
+  data?: any
+}
+```
+
+### 消息状态跟踪
+- **发送中**: 用户点击发送按钮后立即显示
+- **已发送**: WebSocket消息发送成功后更新
+- **已送达**: 数据库保存成功后更新
+- **已读**: 收到后端确认后更新（待后端支持）
+- **发送失败**: 发送或保存失败时显示
+
+### AI回复分段显示
+```typescript
+const splitAiReply = (content: string): string[] => {
+  const segments = content.split(/\n\n|\n/).filter(segment => segment.trim().length > 0)
+  return segments
+}
+```
+
+### 错误处理增强
+- WebSocket连接错误代码映射
+- 用户友好的错误信息显示
+- 自动重连机制优化
+
+## 用户体验改进
+
+1. **实时状态反馈**: 用户可以看到消息的发送状态
+2. **自然对话流**: AI回复分段显示，模拟真实对话
+3. **友好错误提示**: 连接问题时显示清晰的错误信息
+4. **会话管理**: 支持多会话切换，状态同步
+5. **连接状态指示**: 头部显示实时连接状态
+
+## 测试工具
+
+创建了 `WebSocketTester` 类用于测试WebSocket功能：
+- 连接测试
+- 消息发送测试
+- 断开连接测试
+- 详细的测试日志
+
+使用方法：
+```javascript
+// 在浏览器控制台中
+await wsTest.runConnectionTest()
+await wsTest.testMessageSending()
+wsTest.testDisconnection()
+console.log(wsTest.getTestResults())
+```
+
+## 后续建议
+
+1. **消息已读状态**: 需要后端支持消息已读确认
+2. **离线消息**: 支持离线消息的缓存和同步
+3. **文件上传**: 扩展支持图片和文件消息
+4. **消息撤回**: 支持消息撤回功能
+5. **群聊支持**: 扩展支持多人聊天
+
+## 配置文件
+
+确保以下配置正确：
+- `.env.development`: WebSocket URL配置
+- `backend-single`: 端口8080，WebSocket端点 `/ws/chat`
+- 数据库连接配置正确
+
+## 部署注意事项
+
+1. 确保后端WebSocket服务正常运行
+2. 检查防火墙和代理配置
+3. 验证WebSocket连接的跨域设置
+4. 监控WebSocket连接的稳定性