| 1 | import type { ReactNode } from 'react' |
| 2 | import { useSessionDetailUiStore } from '@renderer/store' |
| 3 | import { MessagePanel } from '../../ai-panel' |
| 4 | import { SpeechScriptDrawer } from '../../speech' |
| 5 | import { sessionDetailRightPanelClass } from './styles' |
| 6 | |
| 7 | interface SessionDetailRightPanelProps { |
| 8 | sessionId: string |
| 9 | elementInspector?: ReactNode |
| 10 | } |
| 11 | |
| 12 | export function SessionDetailRightPanel({ |
| 13 | sessionId, |
| 14 | elementInspector |
| 15 | }: SessionDetailRightPanelProps): React.JSX.Element | null { |
| 16 | const workspaceTab = useSessionDetailUiStore((state) => state.workspaceTab) |
| 17 | const speechScriptDialogOpen = useSessionDetailUiStore( |
| 18 | (state) => state.speechScriptDialogOpen |
| 19 | ) |
| 20 | |
| 21 | if (!speechScriptDialogOpen && workspaceTab !== 'ai' && !elementInspector) return null |
| 22 | |
| 23 | return ( |
| 24 | <aside className={sessionDetailRightPanelClass}> |
| 25 | {speechScriptDialogOpen ? ( |
| 26 | <SpeechScriptDrawer sessionId={sessionId} /> |
| 27 | ) : workspaceTab === 'ai' ? ( |
| 28 | <MessagePanel sessionId={sessionId} /> |
| 29 | ) : ( |
| 30 | elementInspector |
| 31 | )} |
| 32 | </aside> |
| 33 | ) |
| 34 | } |
| 35 |