Issue #12 - [FEATURE] Add search functionality to transcript and conversation summary views

[rogelio-cmj]

Motivation

Users currently have to manually scroll through long transcripts and conversation summaries to find specific information, which is time-consuming and inefficient. This is particularly problematic for lengthy conversations where locating a specific topic, keyword, or phrase becomes tedious. Adding search functionality will significantly improve the user experience by allowing users to quickly locate and navigate to relevant content.

Current Behavior

The conversation detail page displays transcripts and summaries without any search capability. Users must manually scroll through the entire content to find specific information.

Reproduction Steps:

1. Navigate to a conversation detail page with a lengthy transcript (multiple segments)
2. Switch to the transcript tab
3. Try to find a specific word or phrase that appears somewhere in the middle of the transcript
4. Observe: You must manually scroll through all segments to locate the text
5. Switch to the summary tab
6. Try to find specific text in the summary
7. Observe: Again, manual scrolling is the only option to locate content

Expected Behavior

Users should be able to search for text within both transcript and summary views, with visual highlighting of matches and navigation controls to jump between results.

Acceptance Criteria:

• A search interface is available on the conversation detail page that allows users to enter search queries
• Search results are highlighted in both transcript segments and summary content with visual indicators
• Users can navigate between multiple search results using next/previous controls
• The current search result is visually distinguished from other matches
• The view automatically scrolls to show the currently selected search result
• Search works case-insensitively and shows a count of total matches found
• Search functionality works independently in both transcript and summary tabs

Steps To Test

1. Open a conversation with a substantial transcript containing multiple segments
2. Activate the search functionality
3. Enter a search term that appears multiple times in the transcript
4. Verify that all instances are highlighted with visual indicators
5. Use navigation controls to move between search results
6. Confirm that the view auto-scrolls to show each result as you navigate
7. Verify the current result is visually distinct from other matches
8. Check that the search counter accurately shows "X of Y results"
9. Switch to the summary tab
10. Perform a search in the summary content
11. Verify highlighting and navigation work correctly in the summary view
12. Confirm that clearing the search removes all highlighting and resets the view

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx