[v0.4.0] Advanced Interaction Features

[abdullah4tech]

Description

Implement conversation threading, cross-conversation referencing, and text highlighting capabilities for richer user interactions.

User Stories

• As a user, I want to reply to specific messages to create threaded conversations
• As a user, I want to reference previous conversations in new chats for context
• As a user, I want to highlight important text in AI responses with notes
• As a user, I want to export my highlights for external use

Tasks

Conversation Threading

• Update src/store/types.ts

  export interface Message {
    // ...existing fields...
    parentMessageId?: number
    replies?: number[] // Array of reply message IDs
  }

• Create src/components/ThreadedMessage.vue

  • Display message with thread indicators
  • Show reply count
  • Thread indentation (max 3 levels)
  • Collapse/expand thread functionality
  • Thread navigation controls

• Update src/pages/ChatView.vue

  • Add "Reply" button to each message
  • Thread visualization with connecting lines
  • Nested message display
  • Scroll to parent message functionality
  • Highlight active thread

• Update store logic

  • Handle reply message creation
  • Maintain thread relationships
  • Calculate reply counts
  • Thread depth limits

Reference System

• Create reference data structure

  export interface ConversationReference {
    sessionId: string
    messageId?: number
    title: string
    preview: string
  }
  
  export interface Message {
    // ...existing fields...
    references?: ConversationReference[]
  }

• Create src/components/ReferenceSelector.vue

  • Modal/dropdown for selecting conversations
  • Search through past conversations
  • Preview referenced content
  • Select specific messages or entire conversations
  • Display selected references

• Implement reference UI in chat

  • "@" mention-style trigger for references
  • Reference chips/badges in message input
  • Display references in message
  • Click to navigate to referenced content
  • Remove reference before sending

• Context inheritance

  • Include referenced conversation context in API call
  • Show "Using context from..." indicator
  • Limit context size (e.g., last 5 messages from reference)

Text Highlighting

• Update src/store/types.ts

  export interface Highlight {
    id: string
    text: string
    startOffset: number
    endOffset: number
    color: string
    note?: string
    createdAt: Date
  }
  
  export interface Message {
    // ...existing fields...
    highlights?: Highlight[]
  }

• Create src/components/HighlightEditor.vue

  • Text selection handler
  • Highlight toolbar (color picker, add note)
  • Show/edit existing highlights
  • Delete highlight functionality
  • Highlight navigation

• Implement highlighting in messages

  • Detect text selection in ChatView.vue
  • Show highlight toolbar on selection
  • Render highlights with background colors
  • Show highlight notes on hover
  • Click highlight to edit

• Create src/components/HighlightPanel.vue

  • List all highlights across conversations
  • Filter by color
  • Filter by conversation
  • Search through highlight notes
  • Navigate to highlighted message

• Highlight export

  • Export to Markdown format
  • Export to JSON
  • Include highlight notes
  • Include source message context
  • Include document sources

Acceptance Criteria

Threading

• Can reply to any message creating a thread
• Threads display with proper indentation (max 3 levels)
• Can collapse/expand threads
• Thread count shows on parent message
• Visual indicators clearly show thread relationships
• Performance remains good with deeply nested threads

Referencing

• Can reference previous conversations using "@" or button
• Can search and select from past conversations
• Referenced content is clearly indicated in messages
• Can navigate to referenced conversation
• Context is properly included in API requests
• Can reference specific messages or entire conversations

Highlighting

• Can select text and create highlight with single click
• At least 5 highlight colors available
• Can add/edit notes on highlights
• Highlights persist across sessions
• Can see all highlights in dedicated panel
• Can export highlights to Markdown
• Highlights work with markdown-rendered content
• Performance is good with 100+ highlights

Dependencies

• v0.2.0 and v0.3.0 features
• ChatView.vue from src/pages/ChatView.vue
• parseMarkdown from src/utils/markdown.ts
• Existing message store structure

Design Notes

Threading

• Use subtle connecting lines between thread levels
• Indent 20px per thread level, max 60px
• Collapse icon: chevron down/right
• Highlight active thread with subtle background

Referencing

• Use "@" symbol or dedicated button to trigger
• Reference chips similar to labels (but distinct styling)
• Show "Referenced from [Session Title]" in message
• Use subtle background for messages with references

Highlighting Colors

• Yellow: #FEF3C7 (default)
• Green: #D1FAE5
• Blue: #DBEAFE
• Pink: #FCE7F3
• Orange: #FFEDD5

Technical Considerations

• Use window.getSelection() for text highlighting
• Store highlight offsets relative to plain text
• Handle highlights across markdown formatting
• Limit thread depth to prevent UI issues
• Use virtual scrolling for large thread trees
• Debounce text selection events
• Maximum 50 highlights per message
• Maximum 3 referenced conversations per message

Testing Checklist

• Test creating threads with multiple levels
• Test collapsing/expanding threads
• Test referencing bookmarked conversations
• Test referencing with context inheritance
• Test highlighting across markdown elements
• Test adding notes to highlights
• Test exporting highlights to markdown
• Test performance with many highlights
• Test thread navigation
• Test highlight persistence after reload
• Test with overlapping highlights
• Test mobile touch selection for highlights

Related Issues

• Depends on: [v0.2.0] Core Conversation Management #3 (v0.2.0 Conversation Management)
• Depends on: [v0.3.0] Bookmarks & Labels System #4 (v0.3.0 Bookmarks & Labels)

Milestone

v0.4.0 Release