THU-MAIC / THU-MAIC/OpenMAIC

refactor: extract presentation mode UI from roundtable/index.tsx

Open
#200 2 comments 0 reactions 0 assignees View on GitHub
area:playback priority:P2 status:icebox type:task
Dominant language
TypeScript
Stars
37.2k
Forks
5.9k
Avg merge
1d 3h
Merged PRs (30d)
195

Description

## Background

Per [PR #195 review feedback](https://github.com/THU-MAIC/OpenMAIC/pull/195#pullrequestreview-3986064644), `components/roundtable/index.tsx` is now ~1900 lines. The presentation mode branch alone is ~360 lines of JSX + associated state/effects.

> *"roundtable/index.tsx is now 1881 lines. The presentation mode branch alone is ~360 lines. Long-term, consider extracting the presentation mode UI into its own component."*

## Challenge

This is not a simple cut-and-paste. The presentation mode and normal mode **deeply share** state, hooks, callbacks, and effects:

- **State variables**: `isInputOpen`, `isVoiceOpen`, `userMessage`, `isSendCooldown`, etc.
- **Hooks**: `useAudioRecorder`, `useI18n`
- **Callbacks**: `showLocalUserMessage`, `handleSendMessage`, `handleToggleInput`, `handleToggleVoice`
- **Effects**: Timer management, auto-scroll, `prevHasAgentFeedbackRef` tracking
- **Derived state**: `sourceText`, `enrichedPlaybackView`, `getAgentConfig`

A naive extraction risks either:
1. **Props explosion** — 20+ props passed in, reducing readability
2. **Hook duplication** — Both components calling `useAudioRecorder` separately, causing state divergence
3. **Silent regressions** — Missed effect dependencies leading to subtle bugs

## Possible Approaches

- Extract a `usePresentationMode()` custom hook that encapsulates shared state
- Create `PresentationRoundtable.tsx` as a wrapper that receives a structured context object
- Use a context provider pattern to avoid prop drilling

Refs #102, PR #195

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.