import type { UseChatType } from '../../../hooks/useChat';
import { useEmbeddableChat } from './useEmbeddableChat';
import { MessageList } from '../components/MessageList';
import { InputArea } from '../components/InputArea';

type EmbeddableChatProps = {
  sessionId?: string;
  initialModel?: string | null;
  initialMessage?: {
    text: string;
    attachmentIds?: string[];
    images?: { filename: string; dataUrl: string }[];
    cwd?: { root?: string; path: string };
  };
  defaultInput?: string;
  promptPrefix?: string;
  className?: string;
  cwd?: { root?: string; path: string };
  replaceUrl?: boolean;
  autoSend?: boolean;
  chat?: UseChatType;
  context?: string;
  contextId?: string;
  onMessageComplete?: () => void;
};

export const EmbeddableChat = ({ className, onMessageComplete, ...params }: EmbeddableChatProps) => {
  const manager = useEmbeddableChat(params, onMessageComplete);

  // Escape stops the turn from anywhere in the chat, not only the composer — you might have clicked into
  // the transcript to read what it was doing when you decided to stop it. Keydown bubbles, so one handler
  // on the container covers the whole subtree without a document-level listener.
  return (
    <div className={`flex flex-col ${className ?? ''}`} onKeyDown={manager.handleEscape}>
      <MessageList manager={manager} />
      <InputArea manager={manager} />
    </div>
  );
};
