'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {ChatHeader} from './ChatHeader';
import {Conversation} from './Conversation';
import {HistoryDrawer} from './HistoryDrawer';
import {ResizeHandle} from './ResizeHandle';

/**
 * The assistant surface, identical inline and in the slide-over.
 *
 * Three children and no branching: a header, the conversation, and the history
 * overlay that covers the conversation when it is open. Everything it renders
 * reads from LoyalyAiProvider, so it is safe to unmount and remount when the
 * breakpoint changes presentation.
 *
 * `relative` on the frame is load-bearing — it is the positioning context
 * HistoryDrawer's `absolute inset-0` resolves against, which is what keeps the
 * overlay inside the panel instead of over the whole workspace.
 */
export function LoyalyAiPanel({onClose}: {onClose?: () => void}) {
  return (
    <VStack gap={0} height="100%" width="100%" className="relative">
      <ResizeHandle />
      <ChatHeader onClose={onClose} />
      <Conversation />
      <HistoryDrawer />
    </VStack>
  );
}
