[v0.2.0] Core Conversation Management

[abdullah4tech]

Description

Implement comprehensive conversation history management with sidebar navigation and enhanced message actions.

User Stories

• As a user, I want to see all my past conversations in a sidebar so I can quickly navigate between them
• As a user, I want to search through my conversation history to find specific discussions
• As a user, I want to copy, regenerate, or edit messages for better interaction

Tasks

Conversation Sidebar Component

• Create src/components/ConversationSidebar.vue component
  • Display all sessions from getAllSessions()
  • Implement search functionality
  • Add delete/archive actions
  • Show conversation previews (first message)
  • Add collapsible sidebar functionality
  • Implement keyboard shortcuts for navigation

Store Updates

• Update src/store/types.ts
  • Add title?: string to ChatSession interface
  • Add updatedAt: Date to ChatSession interface
• Update src/store/index.ts
  • Implement auto-title generation for sessions
  • Add session update timestamp tracking
  • Add session archiving functionality

Message Actions

• Enhance src/pages/ChatView.vue
  • Add copy message button with clipboard API
  • Add regenerate response button
  • Add edit user message functionality
  • Add message action toolbar/menu

Acceptance Criteria

• Sidebar displays all conversations with auto-generated titles and timestamps
• Search filters conversations by content (searches through all messages)
• Can delete/archive conversations with confirmation dialog
• Message actions (copy, regenerate, edit) work correctly
• Session titles auto-generate based on first user query
• UI is responsive and matches existing design system
• Sidebar is collapsible and remembers state
• No performance issues with large conversation histories (100+ sessions)

Dependencies

• Current v0.1.0 features
• useChatStore from src/store/index.ts
• ChatSession type from src/store/types.ts
• Existing ChatView.vue component

Design Notes

• Sidebar should be collapsible (default width: 280px)
• Use consistent styling with existing UI theme
• Consider adding keyboard shortcuts:
  • Ctrl+K or Cmd+K for quick search
  • Ctrl+N or Cmd+N for new conversation
• Session preview should show first 50 characters
• Timestamps should use relative time format ("2 hours ago", "Yesterday")

Technical Considerations

• Use virtual scrolling for large conversation lists
• Debounce search input (300ms)
• Implement lazy loading for conversation previews
• Store sidebar state in localStorage
• Use Vue transitions for smooth UI animations

Testing Checklist

• Test with 0 conversations
• Test with 100+ conversations
• Test search with special characters
• Test delete with active conversation
• Test keyboard shortcuts
• Test responsive behavior on mobile
• Test with very long conversation titles

Related Issues

None (First feature release)

Milestone

v0.2.0 Release