# 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)`