OpenClaw Gateway Chat Demo (React 版本)

基于 React 19 + Vite + Tailwind CSS 4 的 OpenClaw Gateway WebSocket 聊天演示客户端。

技术栈

• 框架: React 19
• 构建工具: Vite 8
• 样式: Tailwind CSS 4
• 语言: TypeScript 5.9
• 加密: @noble/ed25519 3.0

项目结构

src/
├── main.tsx                           # 入口文件
├── App.tsx                            # 主应用组件
├── index.css                          # Tailwind CSS 入口
│
├── components/
│   ├── ChatPanel.tsx                  # 聊天面板组件
│   ├── ChatMessageBubble.tsx          # 消息气泡组件
│   ├── ConnectionSidebar.tsx          # 连接配置侧边栏
│   └── LogPanel.tsx                   # 原始日志面板
│
├── hooks/
│   └── useGatewayChat.ts              # 核心 WebSocket 连接逻辑
│
├── types/
│   └── gateway.ts                     # TypeScript 类型定义
│
└── utils/
    └── deviceIdentity.ts              # 设备身份管理 (Ed25519)

功能特性

• ✅ WebSocket 连接管理（连接/断开/重连）
• ✅ 协议握手（connect.challenge 挑战响应认证）
• ✅ Ed25519 设备身份认证
• ✅ 消息管理（用户/助手/系统/错误消息）
• ✅ 流式响应支持（assistant 流式增量更新）
• ✅ 请求/响应匹配（基于 ID 的异步请求追踪）
• ✅ 日志记录（支持筛选/复制/自动滚动）
• ✅ 响应式布局（移动端适配）

安装与运行

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

默认配置

• Gateway URL: ws://127.0.0.1:18789
• Token: 628567e2508a81fb41e976b2c16fc2abe33de269a0dcd26b
• Session Key: agent:clawagent:test

与 Vue 版本的对比

方面	Vue 版本	React 版本
框架	Vue 3.5	React 19
样式	Scoped CSS	Tailwind CSS 4
状态管理	Composables	Custom Hooks
构建工具	Vite 7	Vite 8
组件数	6	4
代码行数	~1800	~1200

核心逻辑移植说明

useGatewayChat Hook

完全复刻了 Vue 版本的 useGatewayChat composable：

• 使用 useState 管理状态
• 使用 useCallback 优化回调函数
• 使用 useRef 存储可变引用（socket、pending requests 等）
• 使用 useEffect 处理清理逻辑

设备身份认证

deviceIdentity.ts 完全沿用 Vue 版本的逻辑：

• Ed25519 密钥对生成
• Base64Url 编码/解码
• SHA-256 指纹计算
• localStorage 持久化存储

UI 组件

所有组件使用 Tailwind CSS 4 重写，实现了与 Vue 版本相同的视觉效果：

• 毛玻璃效果（backdrop-blur）
• 渐变背景
• 圆角卡片
• 响应式布局

License

MIT