85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Commands
|
|
|
|
```bash
|
|
# Development
|
|
npm run dev # Start Vite dev server
|
|
npm run build # Type-check and build for production
|
|
npm run preview # Preview production build
|
|
```
|
|
|
|
## Architecture Overview
|
|
|
|
This is a Vue 3 + TypeScript AI chat UI application built with the following stack:
|
|
|
|
**Core:**
|
|
- Vue 3 (Composition API with `<script setup>`)
|
|
- Pinia for state management
|
|
- TypeScript with path alias `@/*` → `src/*`
|
|
- Vite for build tooling
|
|
|
|
**Styling:**
|
|
- TailwindCSS 4 + UnoCSS (dual setup)
|
|
- Custom SCSS for global styles
|
|
- Dark mode support via `.dark` class
|
|
|
|
**Key Dependencies:**
|
|
- `markstream-vue` - Streaming markdown rendering
|
|
- `lucide-vue-next` - Icon library
|
|
- `@vueuse/core` - Vue composables utilities
|
|
- `echarts`, `mermaid`, `shiki` - Visualization and code highlighting
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Vue components organized by feature
|
|
│ ├── chat/ # Main chat interface (ChatMain, ChatHeader, MessageList, WelcomeScreen)
|
|
│ ├── message/ # Message rendering (MessageBubble, CodeBlock, ThinkingNode, etc.)
|
|
│ ├── input/ # Chat input and attachments
|
|
│ ├── sidebar/ # Conversation list sidebar
|
|
│ ├── modals/ # Settings and search modals
|
|
│ └── ui/ # Reusable form components
|
|
├── stores/ # Pinia stores
|
|
│ ├── chat.ts # Conversation and message management
|
|
│ └── settings.ts # App settings and theme
|
|
├── composables/ # Reusable composables (useKeyboard)
|
|
├── services/ # API layer (api.ts - chat streaming, file upload)
|
|
├── types/ # TypeScript type definitions
|
|
└── utils/ # Helper functions
|
|
```
|
|
|
|
## State Management
|
|
|
|
Two Pinia stores manage application state:
|
|
|
|
**`useChatStore`** (`src/stores/chat.ts`):
|
|
- Manages conversations (CRUD operations)
|
|
- Handles message streaming state
|
|
- Persists to localStorage
|
|
|
|
**`useSettingsStore`** (`src/stores/settings.ts`):
|
|
- App settings (theme, font size, preferences)
|
|
- Sidebar state
|
|
- Modal visibility controls
|
|
- Persists to localStorage
|
|
|
|
## API Layer
|
|
|
|
`src/services/api.ts` defines the API contract. The backend must implement these endpoints:
|
|
- `POST /api/chat-ui/chat` - Chat (streaming supported)
|
|
- `GET /api/chat-ui/conversations` - List conversations
|
|
- `POST /api/chat-ui/upload` - File upload
|
|
- `GET /api/chat-ui/models` - Model list
|
|
- `POST /api/chat-ui/stop/:id` - Stop generation
|
|
|
|
## Development Notes
|
|
|
|
- Base path configured as `/chat-ui/` in `vite.config.ts`
|
|
- Proxy configured for `/api/chat-ui` → `http://localhost:3000`
|
|
- UnoCSS shortcuts available: `flex-center`, `full`, and regex-based patterns
|
|
- Toast notifications available globally via `window.$toast(message, type)`
|