import { ChatInput } from "../components/chat/ChatInput";
import { ExtensionDialogModal } from "../components/chat/ExtensionDialogModal";
import { ExtensionWidgetPanel } from "../components/chat/ExtensionWidgetPanel";
import { MessageList } from "../components/chat/MessageList";
import { PendingQueueBar } from "../components/chat/PendingQueueBar";
import { RunStatusBar } from "../components/chat/RunStatusBar";
import { Header } from "../components/layout/Header";
import { useChatContext } from "../context/ChatContext";

export function ChatPage() {
	const {
		pendingSteering,
		pendingFollowUp,
		isStreaming,
		isCompacting,
		retryState,
		extensionWidgets,
		extensionDialog,
		abortStream,
		abortRetry,
		respondExtensionDialog,
		dismissExtensionDialog,
	} = useChatContext();

	return (
		<>
			<Header />
			<MessageList />
			<ExtensionWidgetPanel widgets={extensionWidgets} />
			<PendingQueueBar steering={pendingSteering} followUp={pendingFollowUp} />
			<RunStatusBar
				isStreaming={isStreaming}
				isCompacting={isCompacting}
				retryState={retryState}
				onAbort={() => void abortStream()}
				onAbortRetry={() => void abortRetry()}
			/>
			<ChatInput />
			{extensionDialog ? (
				<ExtensionDialogModal
					dialog={extensionDialog}
					onSubmit={respondExtensionDialog}
					onDismiss={dismissExtensionDialog}
				/>
			) : null}
		</>
	);
}