Phase 6: Citations & Sources UI - COMPLETE ✓

Status: ✅ Implemented and Deployed Commit: 157e2a3 Date: 2025-11-23

Overview

Phase 6 adds a comprehensive citation sidebar that displays and manages all citations from the current conversation, with search and export functionality. This phase enhances the credibility and traceability of medical information provided by the AI assistant.

Features Implemented

1. Citation Sidebar Component

Location: apps/web-app/src/components/citations/CitationSidebar.tsx

• Citation Aggregation: Automatically collects all citations from conversation messages
• Search & Filter: Real-time search across:
  • Title and subtitle
  • Authors
  • Snippet/excerpt
  • Reference
  • DOI and PubMed ID
  • Location/page information
• Empty States:
  • "No citations yet" when conversation has no citations
  • "No citations found" when search returns no results
• Export Functionality: Bulk export all citations via CitationDisplay component
• Responsive Design: Mobile-first design with backdrop on mobile, fixed sidebar on desktop

2. ChatPage Integration

Location: apps/web-app/src/pages/ChatPage.tsx

• State Management: Added isCitationSidebarOpen state
• Toggle Button: Citations button in header with book icon
• Keyboard Shortcut: ⌘C / Ctrl+C to toggle citation sidebar
• Conditional Rendering: Shows sidebar when open, passes message data

3. Keyboard Shortcuts

Location: apps/web-app/src/components/KeyboardShortcutsDialog.tsx

• Added "Citations" category
• ⌘C / Ctrl+C shortcut documented in help dialog
• Consistent with other sidebar shortcuts (⌘B for branches, ⌘I for clinical context)

Technical Implementation

Citation Aggregation

const allCitations = useMemo(() => {
  const citationsMap = new Map<string, Citation>();

  messages.forEach((message) => {
    // Check metadata.citations first, then top-level citations
    const citations = message.metadata?.citations || message.citations || [];
    citations.forEach((citation: Citation) => {
      if (!citationsMap.has(citation.id)) {
        citationsMap.set(citation.id, citation);
      }
    });
  });

  return Array.from(citationsMap.values());
}, [messages]);

Search Implementation

const filteredCitations = useMemo(() => {
  if (!searchQuery.trim()) return allCitations;

  const query = searchQuery.toLowerCase();
  return allCitations.filter((citation) => {
    const searchableText = [
      citation.title,
      citation.subtitle,
      citation.reference,
      citation.snippet,
      citation.authors?.join(" "),
      citation.location,
      citation.doi,
      citation.pubmedId,
    ]
      .filter(Boolean)
      .join(" ")
      .toLowerCase();

    return searchableText.includes(query);
  });
}, [allCitations, searchQuery]);

User Experience

Visual Design

• Sidebar Pattern: Consistent with Branch and Clinical Context sidebars
• Search Bar: Sticky at top of sidebar with clear button
• Citation Count: Shows "X of Y" when filtering
• Icons: Book icon for citations sidebar, search icon in search bar
• Empty States: Helpful messaging with large icons

Keyboard Navigation

Mobile Responsiveness

• Mobile: Full-screen overlay with backdrop
• Desktop: Fixed sidebar (320px width)
• Adaptive: Search bar and export buttons available on all screen sizes

Integration Points

Data Flow

1. Messages → ChatPage receives messages from useChatSession hook
2. Citations → CitationSidebar extracts citations from message metadata
3. Display → CitationDisplay component renders each citation
4. Export → CitationDisplay handles Markdown/Text export

Component Hierarchy

ChatPage
├── CitationSidebar (conditional)
│   ├── Search Bar
│   ├── CitationDisplay (reused)
│   └── Footer Info
├── ClinicalContextSidebar
├── BranchSidebar
└── KeyboardShortcutsDialog

Testing Checklist

• Citation aggregation from multiple messages
• Search functionality across all fields
• Empty state display
• No results state display
• Export functionality (via CitationDisplay)
• Keyboard shortcut (⌘C)
• Mobile responsive design
• Sidebar toggle and close
• Integration with ChatPage

Next Steps (Future Enhancements)

1. Source Highlighting: Click citation number in message to highlight in sidebar
2. Citation Grouping: Group by source type (Knowledge Base, PubMed, external)
3. Citation Analytics: Track most-cited sources
4. Direct Navigation: Jump to message containing specific citation
5. Inline Citations: Render citation numbers inline with message content

Files Modified

• apps/web-app/src/components/citations/CitationSidebar.tsx (created)
• apps/web-app/src/components/KeyboardShortcutsDialog.tsx (modified)
• apps/web-app/src/pages/ChatPage.tsx (modified)

Dependencies

• Existing CitationDisplay component (reused)
• Message type with citations support
• Citation type definition

Documentation Updates

• ✅ This completion document
• ✅ Updated KeyboardShortcutsDialog with ⌘C shortcut
• 📝 TODO: Update CLIENT_DEV_ROADMAP.md with Phase 6 completion

Phase 6 Status: ✅ COMPLETE

Moving forward to Phase 7: Conversation Management Features