ai-smooth-talker: Instructions file for Claude Code

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

项目概述

这是一个基于 React + Trickle 平台的 AI 聊天助手 Web 应用，专注于提供智能化的高情商回复建议。项目使用纯前端架构（无构建系统），通过 CDN 加载 React、Babel 和 TailwindCSS，依赖 Trickle 平台的数据存储和 SiliconFlow API 的 AI 能力。

核心架构

技术栈

• 前端框架: React 18 (UMD 版本，通过 CDN 加载)
• UI 样式: TailwindCSS (CDN) + CSS 变量系统
• 图标: Lucide Icons
• 3D 组件: Spline Viewer
• AI 服务: SiliconFlow API (Qwen/Qwen2.5-72B-Instruct 模型)
• 数据存储: Trickle 平台对象存储 API
• 代理服务: Trickle Proxy API (https://proxy-api.trickle-app.host)

项目结构

EP_Agent/
├── index.html          # 主页面入口
├── admin.html          # 管理后台
├── history.html        # 聊天历史页面
├── app.js              # 主应用入口
├── admin-app.js        # 管理后台入口
├── history-app.js      # 历史记录入口
├── components/         # React 组件库
│   ├── ChatSimulator.js      # 核心聊天模拟器
│   ├── AICustomerService.js  # AI 客服窗口
│   ├── HeroSection.js        # 首页英雄区（含 3D 组件）
│   ├── SuccessStories.js     # 成功案例展示
│   ├── Admin*.js             # 管理后台组件
│   └── ...
├── utils/              # 工具函数
│   ├── chatHelper.js         # AI 回复生成、聊天记录存储
│   ├── customerService.js    # 客服 AI 对话逻辑
│   └── adminHelper.js        # 管理统计数据处理
└── trickle/
    ├── notes/          # 项目文档和改进记录
    ├── rules/          # 设计规范（色彩一致性等）
    └── assets/         # 静态资源配置（JSON 数据）

数据流

1. 用户输入 → ChatSimulator 组件
2. AI 请求 → chatHelper.js:generateReplies() → SiliconFlow API (通过 Trickle Proxy)
3. 回复生成 → 解析 JSON 响应 → 展示多种回复建议
4. 用户选择 → 保存至 Trickle 数据库 (chat_history 对象)
5. 管理查看 → adminHelper.js 读取聊天记录 → 统计分析

关键依赖和 API

Trickle 平台 API

所有数据存储操作都通过 Trickle 平台的全局方法：

• trickleCreateObject(type, data): 创建对象（如聊天记录）
• trickleListObjects(type, limit, reverse): 查询对象列表
• 数据类型: chat_history (存储用户输入、AI 建议、反馈)

SiliconFlow AI API

• 端点: https://api.siliconflow.cn/v1/chat/completions
• 模型: Qwen/Qwen2.5-72B-Instruct (中文优化)
• API Key: 存储在 utils/chatHelper.js:2 (生产环境应移至环境变量)
• 代理: 所有请求通过 https://proxy-api.trickle-app.host 转发
• 降级策略: API 失败时使用 invokeAIAgent() (Trickle 内置 AI)