Heartfelt Companion - 心灵伴侣

一个基于 AI 的智能聊天应用，提供温暖的陪伴和交流体验。

项目简介

Heartfelt Companion 是一个现代化的 Web 应用，使用 React + TypeScript 构建，这是一个典型的 Serverless + BaaS 架构，没有传统的后端服务器，所有后端逻辑都在 Supabase Edge Functions 中实现，集成了 AI 聊天功能和用户认证系统。

技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• UI 组件: shadcn/ui + Radix UI
• 样式: Tailwind CSS
• 状态管理: Zustand
• 数据请求: TanStack Query
• 后端服务: Supabase
• 动画: Framer Motion
• 路由: React Router

功能特性

• 🤖 AI 智能对话
• 🔐 用户认证系统
• 💬 实时聊天界面
• 🎨 现代化 UI 设计
• 📱 响应式布局
• ⚙️ 个性化设置
• 😊 情感识别与分析
• ⚡ 流式响应体验

快速开始

环境要求

• Node.js 16+ 或 Bun
• npm 或 pnpm

安装步骤

# 克隆项目
git clone <YOUR_GIT_URL>

# 进入项目目录
cd heartfelt-companion

# 安装依赖
npm install

# 启动开发服务器
npm run dev

可用命令

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 构建开发版本
npm run build:dev

# 代码检查
npm run lint

# 预览生产构建
npm run preview

项目结构

heartfelt-companion/
├── src/
│   ├── components/     # React 组件
│   │   ├── auth/      # 认证相关组件
│   │   ├── chat/      # 聊天相关组件
│   │   ├── settings/  # 设置相关组件
│   │   ├── sidebar/   # 侧边栏组件
│   │   └── ui/        # UI 基础组件
│   ├── hooks/         # 自定义 Hooks
│   ├── pages/         # 页面组件
│   ├── stores/        # 状态管理
│   ├── lib/           # 工具函数
│   └── integrations/  # 第三方集成
├── supabase/          # Supabase 配置
└── public/            # 静态资源

AI 工程设计

架构概览

前端 (React + Zustand)
    ↓
Supabase Edge Function
    ↓
Lovable AI Gateway
    ↓
Google Gemini 2.5 Flash

核心组件

1. 情感识别系统

• 双重 AI 调用: 先分析情感，再生成回复
• 情感类型: happy, sad, angry, anxious, calm, neutral
• 情感强度: 0.0-1.0 的连续值
• 实现位置: supabase/functions/chat/index.ts

// 第一次调用：情感分析
model: 'google/gemini-2.5-flash'
temperature: 0.3  // 低温度保证准确性

// 第二次调用：对话生成
model: 'google/gemini-2.5-flash'
temperature: 0.7  // 高温度增加创造性
stream: true      // 流式响应

2. 个性化配置

支持 6 个维度的 AI 行为定制：

配置项	选项	说明
aiName	自定义	AI 助手名称
personality	warm / professional / cheerful	性格特点
tone	gentle / formal / casual	语气风格
responseLength	short / medium / long	回复长度
useEmoji	true / false	是否使用表情
empathyLevel	0.0 - 1.0	共情程度

3. 动态 System Prompt

根据用户配置实时生成个性化的系统提示词：

// 示例：温暖性格 + 温和语气 + 高共情
你是"心语"，一个专业的情感陪伴AI助手。
你的性格特点：温暖体贴、富有同理心
你的语气风格：温和柔软
回复长度要求：回复适中，控制在3-5句话
请特别注重情感共鸣和理解用户的感受
可以适当使用表情符号来增添温暖感

4. 流式响应处理

• 前端: 使用 SSE (Server-Sent Events) 接收流式数据
• 实时渲染: 打字机效果，逐字显示 AI 回复
• 情感传递: 通过 HTTP Headers 传递情感数据

// 响应头
X-Emotion: happy
X-Emotion-Intensity: 0.8

5. 上下文管理

• 保留最近 10 条消息 作为对话上下文
• 自动生成会话标题（基于首条用户消息）
• 支持多会话管理和切换

数据流程

1. 用户输入消息
   ↓
2. 前端 Hook (useChatAI) 发送请求
   ↓
3. Edge Function 接收并处理
   ↓
4. 【第一次 AI 调用】情感分析
   - 输入: 用户消息
   - 输出: emotion + intensity
   ↓
5. 构建个性化 System Prompt
   ↓
6. 【第二次 AI 调用】生成回复（流式）
   - 输入: system prompt + 历史对话 + 当前消息
   - 输出: 流式文本
   ↓
7. 前端接收流式响应
   ↓
8. 实时更新 UI（打字机效果）
   ↓
9. 保存到 Supabase 数据库

技术亮点

• ✅ 情感感知: 双重 AI 调用实现情感识别
• ✅ 高度可配置: 6 维度个性化定制
• ✅ 流式体验: SSE 实现实时打字效果
• ✅ 智能上下文: 自动管理对话历史
• ✅ 错误处理: 完善的限流和异常处理
• ✅ 性能优化: 仅保留必要的上下文消息

API 配置

• AI 网关: https://ai.gateway.lovable.dev
• 模型: google/gemini-2.5-flash
• 认证: 需要配置 LOVABLE_API_KEY 环境变量

环境配置

创建 .env 文件并配置以下环境变量：

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Supabase Edge Function 环境变量：

LOVABLE_API_KEY=your_lovable_api_key

部署

项目可以部署到任何支持静态网站的平台：

• Vercel
• Netlify
• GitHub Pages
• 或其他静态托管服务

架构

前端: React + TypeScript + Vite ↓ 后端: Supabase Edge Functions ↓ AI: Lovable Gateway → Gemini 2.5 Flash

开发指南

1. 遵循 TypeScript 类型安全
2. 使用 ESLint 保持代码质量
3. 组件采用函数式编程
4. 使用 Tailwind CSS 进行样式开发

许可证

本项目为私有项目。

联系方式

如有问题或建议，欢迎提交 Issue。