[FEATURE]: Transcript Tab - Implement "Transcripts" Tab in Left Panel with Expandable Functionality

Feature Description

Implement the "Transcripts" tab in the left panel of the Smart Classroom GUI. This tab will display real-time streaming audio transcriptions and should be designed to expand and occupy the entire screen when the right panel is collapsed.

Solution Description

Implementation Strategy

Component Structure:

  • Create TranscriptsTab component for transcription display.
  • Use React state management for real-time updates and panel expansion.

Expandable Panel:

  • Enable left panel to expand fully when the right panel is collapsed.
  • Implement smooth CSS transitions for panel animations.

Socket.IO Integration:

  • Establish WebSocket connection with backend using Socket.IO for real-time transcription data.
  • Manage Socket.IO connection lifecycle with useEffect in React.
  • Dynamically update transcription display as data is received.

Bubble Component:

  • Display each transcription chunk in a BubbleComponent for clear, segmented visualization.
  • Ensure bubbles are styled for readability and easy navigation.

Acceptance Criteria:

  1. "Transcripts" tab displays correctly and updates in real-time via Socket.IO.
  2. Left panel expands to full screen when right panel is collapsed.
  3. Each transcription chunk is displayed in a bubble component.
  4. User interactions are intuitive with visual feedback.
  5. Accessibility features are implemented