ChatAssistant

"use client";

import type { ReactNode } from "react";
import { cn, SurfaceLayout, ChatSidebar, ChatInput, ChatMessageList } from "@reopt-ai/opt-ui";
import type { ChatConversationDef, ChatMessageDef, ChatModelDef, ChatStylePresetDef, ChatSidebarLabels, ChatInputLabels, ChatMessageListLabels } from "@reopt-ai/opt-ui";

/** Localized labels for the chat assistant component. */
export interface ChatAssistantLabels {
  sidebar?: ChatSidebarLabels;
  input?: ChatInputLabels;
  messageList?: ChatMessageListLabels;
  emptyHistoryAnnouncement?: string;
}

/** Props for the chat assistant component. */
export interface ChatAssistantProps {
  conversations?: ChatConversationDef[];
  activeConversationId?: string;
  onConversationSelect?: (conversation: ChatConversationDef) => void;
  onNewChat?: () => void;
  messages?: ChatMessageDef[];
  onSend?: (message: string) => void;
  onFileAttach?: () => void;
  models?: ChatModelDef[];
  selectedModel?: string;
  onModelChange?: (modelId: string) => void;
  stylePresets?: ChatStylePresetDef[];
  selectedStyle?: string;
  onStyleChange?: (styleId: string) => void;
  assistantTyping?: boolean;
  assistantAvatar?: string;
  userName?: string;
  renderContent?: (message: ChatMessageDef) => ReactNode;
  showSidebar?: boolean;
  header?: ReactNode;
  actions?: ReactNode;
  loading?: boolean;
  labels?: ChatAssistantLabels;
  className?: string;
}

/** Renders the chat assistant component. */
export function ChatAssistant({
  conversations = [],
  activeConversationId,
  onConversationSelect,
  onNewChat,
  messages = [],
  onSend,
  onFileAttach,
  models,
  selectedModel,
  onModelChange,
  stylePresets,
  selectedStyle,
  onStyleChange,
  assistantTyping = false,
  assistantAvatar,
  userName,
  renderContent,
  showSidebar = true,
  header,
  actions,
  loading = false,
  labels,
  className,
}: ChatAssistantProps) {
  const isEmptyAssistant = conversations.length === 0 && messages.length === 0;

  return (
    <SurfaceLayout
      loading={loading}
      className={cn("h-full flex-row gap-0", className)}
      data-opt-id="AB2NY"
      data-opt-slug="chat-assistant.ChatAssistant"
    >
      {/* Sidebar */}
      {showSidebar && (
        <aside className="border-border flex w-[260px] shrink-0 flex-col border-r p-4">
          <ChatSidebar
            conversations={conversations}
            activeConversationId={activeConversationId}
            onConversationSelect={onConversationSelect}
            onNewChat={onNewChat}
            labels={labels?.sidebar}
          />
        </aside>
      )}

      {/* Main area */}
      <div className="flex min-w-0 flex-1 flex-col">
        {isEmptyAssistant && !loading && (
          <div className="sr-only" aria-live="polite">
            {labels?.emptyHistoryAnnouncement ?? "No chat history yet"}
          </div>
        )}
        {/* Header */}
        {(header || actions) && (
          <div className="border-border flex items-center justify-between border-b px-6 py-3">
            <div>{header}</div>
            {actions && (
              <div className="gap-element flex items-center">{actions}</div>
            )}
          </div>
        )}

        {/* Messages */}
        <ChatMessageList
          messages={messages}
          loading={assistantTyping}
          renderContent={renderContent}
          assistantAvatar={assistantAvatar}
          userName={userName}
          labels={labels?.messageList}
          className="flex-1"
        />

        {/* Input */}
        <div className="border-border shrink-0 border-t px-6 py-4">
          <ChatInput
            onSend={onSend}
            onFileAttach={onFileAttach}
            models={models}
            selectedModel={selectedModel}
            onModelChange={onModelChange}
            stylePresets={stylePresets}
            selectedStyle={selectedStyle}
            onStyleChange={onStyleChange}
            labels={labels?.input}
          />
        </div>
      </div>
    </SurfaceLayout>
  );
}

ChatAssistant.displayName = "ChatAssistant";