2.9 KiB

Raw Permalink Blame History

CLAUDE.md

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

Commands

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

2.9 KiB Raw Permalink Blame History