"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useRef, useEffect } from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { Button } from "@open-mercato/ui/primitives/button";
import { MessageBubble } from "./MessageBubble.js";
import { ToolCallConfirmation } from "./ToolCallConfirmation.js";
import { AgentStatusIndicator } from "./AgentStatusIndicator.js";
function ToolChatPage({
  tool,
  messages,
  pendingToolCalls,
  isStreaming,
  isThinking = false,
  agentStatus = { type: "idle" },
  onApproveToolCall,
  onRejectToolCall,
  pendingQuestion,
  onAnswerQuestion
}) {
  const bottomRef = useRef(null);
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
    }, 100);
    return () => clearTimeout(timeoutId);
  }, [messages, pendingToolCalls, isStreaming, isThinking, agentStatus, pendingQuestion]);
  return /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-3", children: [
    tool && /* @__PURE__ */ jsx("div", { className: "-mx-3 -mt-3 mb-3 px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2", children: tool.description }) }),
    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
      messages.map((message) => /* @__PURE__ */ jsx(MessageBubble, { message }, message.id)),
      pendingToolCalls.filter((tc) => tc.status === "pending" || tc.status === "error").map((toolCall) => /* @__PURE__ */ jsx(
        ToolCallConfirmation,
        {
          toolCall,
          onApprove: () => onApproveToolCall(toolCall.id),
          onReject: () => onRejectToolCall(toolCall.id)
        },
        toolCall.id
      )),
      pendingQuestion && pendingQuestion.questions[0] && /* @__PURE__ */ jsxs("div", { className: "p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg space-y-3", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm font-medium", children: [
          /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
          /* @__PURE__ */ jsx("span", { children: pendingQuestion.questions[0].header || "Confirmation Required" })
        ] }),
        /* @__PURE__ */ jsx("div", { className: "text-sm prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_p]:my-1 [&_strong]:font-semibold", children: /* @__PURE__ */ jsx(Markdown, { remarkPlugins: [remarkGfm], children: pendingQuestion.questions[0].question }) }),
        /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", children: pendingQuestion.questions[0].options.map((option, index) => /* @__PURE__ */ jsx(
          Button,
          {
            variant: index === 0 ? "default" : "outline",
            size: "sm",
            onClick: () => onAnswerQuestion?.(index),
            disabled: isStreaming,
            children: option.label
          },
          index
        )) })
      ] }),
      !pendingQuestion && /* @__PURE__ */ jsx(AgentStatusIndicator, { status: agentStatus }),
      /* @__PURE__ */ jsx("div", { ref: bottomRef })
    ] })
  ] });
}
export {
  ToolChatPage
};
//# sourceMappingURL=ToolChatPage.js.map
