# Chat Session Structure (AI Feature)

## Design Pattern (like ChatGPT)
- **Sidebar**: List of past chat sessions with title + timestamp
- **Main area**: Active conversation

## Data Structure
```typescript
interface ChatSession {
  id: string;
  title: string; // First question (truncated to ~30 chars)
  messages: AIChat[];
  createdAt: number;
  updatedAt: number;
}

interface AIChat {
  id: string;
  role: "user" | "assistant";
  content: string;
  timestamp: number;
}
```

## Storage
- `tia_chat_sessions`: Array of ChatSession in localStorage
- Current session ID: `tia_current_session`

## UI Pattern
- **Left sidebar (w-64)**: List of sessions with title + date, delete option
- **Right main area**: Chat interface with message bubbles

## User Flow
1. User opens /ai → loads most recent session or creates new
2. User asks question → adds to current session
3. First question becomes session title (truncated)
4. Can switch sessions via sidebar
5. Can start new conversation

## Implementation Notes
- Use React state for current session
- Save to localStorage on each message (for quick access)
- Auto-title from first user message
- **Future**: Move to database (chat_sessions table) for persistence across devices