43 lines
No EOL
1.1 KiB
Markdown
43 lines
No EOL
1.1 KiB
Markdown
# 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
|
|
- Auto-title from first user message |