refactor: extract presentation mode UI from roundtable/index.tsx
- 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
Assessment
This issue has not been assessed yet.