import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { a as tx, c as css } from "./twind.B1qQmF_s.js";
import { f as MdDone } from "./index.C4ysnl8v.js";
import { useState } from "react";
import "./index.bXWE_wTx.js";
import { w as useDebugMode } from "./use-editor.CurXdZnZ.js";
import Markdown from "./Markdown.BlIgLrkl.js";
import { A as AnimatePresence, m as motion } from "./ChatComponent.uKhBO3AI.js";
import { s } from "./base-button.DGf1UrDq.js";
function ToolRenderer({
  toolPart,
  addToolResultMessage,
  addToolResult,
  error,
  hasToolsRunning
}) {
  const debug = useDebugMode();
  const [showPreview, setShowPreview] = useState(false);
  if (error) {
    return null;
  }
  if (toolPart.type === "tool-askUserChoice" && hasToolsRunning) {
    return null;
  }
  if (toolPart.type === "tool-askUserChoice") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
      motion.div,
      {
        className: tx("bg-black/5 p-4 rounded-md text-[90%] mt-3"),
        initial: { opacity: 0, height: 0 },
        animate: { opacity: 1, height: "auto" },
        exit: { opacity: 0, height: 0 },
        transition: { type: "tween", duration: 0.3, ease: "easeOut" },
        children: [
          toolPart.input?.question && /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { content: toolPart.input.question }),
          toolPart.state === "input-available" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
            UserChoicesButtons,
            {
              part: toolPart,
              addToolResult,
              addToolResultMessage
            },
            toolPart.toolCallId
          ) : null
        ]
      }
    ) }, toolPart.toolCallId);
  }
  if (toolPart.input && "waitingMessage" in toolPart.input) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: toolPart.state === "input-available" ? /* @__PURE__ */ jsxRuntimeExports.jsx(RunningToolDisplay, { part: toolPart }) : toolPart.state === "output-available" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
      motion.div,
      {
        className: tx("flex items-center gap-1.5 flex-wrap font-medium"),
        initial: { opacity: 0, height: 0 },
        animate: { opacity: 1, height: "auto" },
        exit: { opacity: 0, height: 0 },
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(MdDone, { className: tx("w-4 h-4 text-green-600") }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: toolPart.input.waitingMessage }),
          (toolPart.type === "tool-searchImages" || toolPart.type === "tool-generateImages") && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "button",
              {
                type: "button",
                className: tx(
                  "text-sm text-upstart-700 font-medium inline-flex items-center hover:underline"
                ),
                onClick: () => setShowPreview((val) => !val),
                children: [
                  showPreview ? "Hide" : "Show",
                  " Preview"
                ]
              }
            ),
            showPreview && /* @__PURE__ */ jsxRuntimeExports.jsx(
              ImagesPreview,
              {
                query: toolPart.input.query,
                images: toolPart.output
              },
              toolPart.toolCallId
            )
          ] }),
          debug && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolCallDebugInfo, { part: toolPart })
        ]
      }
    ) : toolPart.state === "output-error" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
      motion.div,
      {
        className: tx("flex items-center gap-1.5 font-medium"),
        initial: { opacity: 0, height: 0 },
        animate: { opacity: 1, height: "auto" },
        exit: { opacity: 0, height: 0 },
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(MdDone, { className: tx("w-4 h-4 text-red-600") }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
            toolPart.input.waitingMessage,
            " (Error: ",
            toolPart.errorText,
            ")"
          ] }),
          debug && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolCallDebugInfo, { part: toolPart })
        ]
      }
    ) : null }, toolPart.toolCallId);
  }
  if (debug) {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(ToolCallDebugInfo, { part: toolPart }, toolPart.toolCallId);
  }
  return null;
}
function ToolCallDebugInfo({ part }) {
  const codeClassName = tx(
    css({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("summary", { className: tx("cursor-pointer list-none flex gap-1 items-center"), children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "svg",
        {
          className: tx("-rotate-90 transform opacity-60 transition-all duration-300"),
          fill: "none",
          height: "14",
          width: "14",
          stroke: "currentColor",
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: "2",
          viewBox: "0 0 24 24",
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Arrow" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "6 9 12 15 18 9" })
          ]
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: tx("text-xs font-normal"), children: [
        "Tool: ",
        part.type,
        " (",
        part.state,
        ")"
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: codeClassName, children: JSON.stringify(part, null, 2) })
  ] });
}
function RunningToolDisplay({ part }) {
  const debug = useDebugMode();
  if (typeof part.input !== "object" || part.input === null || !("waitingMessage" in part.input)) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    motion.div,
    {
      className: tx("flex items-center gap-1.5 font-medium flex-wrap"),
      initial: { opacity: 0, height: 0 },
      animate: { opacity: 1, height: "auto" },
      exit: { opacity: 0, height: 0 },
      transition: { type: "tween", duration: 0.3, ease: "easeOut" },
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(s, { size: "1", className: tx("w-4 mx-0.5") }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: part.input.waitingMessage }),
        debug && /* @__PURE__ */ jsxRuntimeExports.jsxs("details", { className: tx("cursor-pointer basis-full"), children: [
          /* @__PURE__ */ jsxRuntimeExports.jsxs("summary", { className: tx("cursor-pointer list-none flex gap-1 items-center"), children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "svg",
              {
                className: tx("-rotate-90 transform opacity-60 transition-all duration-300"),
                fill: "none",
                height: "14",
                width: "14",
                stroke: "currentColor",
                strokeLinecap: "round",
                strokeLinejoin: "round",
                strokeWidth: "2",
                viewBox: "0 0 24 24",
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Arrow" }),
                  /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "6 9 12 15 18 9" })
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: tx("text-xs font-normal"), children: [
              "[",
              part.type,
              "] View tool call"
            ] })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: tx("whitespace-pre-wrap text-xs"), children: JSON.stringify({ type: part.type, input: part.input }, null, 2) })
        ] })
      ]
    }
  );
}
function UserChoicesButtons({
  part,
  addToolResult,
  addToolResultMessage
}) {
  const [selectedChoices, setSelectedChoices] = useState([]);
  const handleChoiceClick = (choice) => {
    if (part.input.allowMultiple) {
      setSelectedChoices(
        (prev) => prev.includes(choice) ? prev.filter((c) => c !== choice) : [...prev, choice]
      );
    } else {
      setSelectedChoices([choice]);
    }
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    motion.div,
    {
      className: tx("flex flex-wrap gap-2 mt-4 justify-between"),
      initial: { opacity: 0, height: 0 },
      animate: { opacity: 1, height: "auto" },
      exit: { opacity: 0, height: 0 },
      transition: { type: "tween", duration: 0.3, ease: "easeOut" },
      children: part.input.allowMultiple ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("flex flex-col flex-wrap gap-1.5"), children: part.input.choices.map((choice, i) => {
          return /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              className: tx(
                "inline-flex justify-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md",
                {
                  "border !border-upstart-300 !text-gray-700 hover:border-upstart-300": !selectedChoices.includes(choice),
                  "border !border-transparent !bg-upstart-700 text-white": selectedChoices.includes(choice)
                }
              ),
              onClick: async () => {
                console.log("addtoolresult to part", part);
                handleChoiceClick(choice);
              },
              children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tx("text-nowrap", selectedChoices.includes(choice) ? "font-bold" : ""), children: choice })
            },
            `multi-${i}`
          );
        }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("basis-full w-full mt-6 flex justify-end"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            disabled: selectedChoices.length === 0,
            className: tx(
              "inline-flex justify-center content-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md !bg-upstart-700 hover:opacity-90 text-white disabled:opacity-50 disabled:cursor-not-allowed max-w-[150px]"
            ),
            onClick: async () => {
              console.log("addtoolresult to part", part);
              await addToolResult({
                tool: "askUserChoice",
                toolCallId: part.toolCallId,
                output: selectedChoices
              });
              addToolResultMessage(selectedChoices.join(", "));
              setSelectedChoices([]);
            },
            children: "Continue"
          }
        ) })
      ] }) : part.input.choices.map((choice, i) => {
        return /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            className: tx(
              "inline-flex text-nowrap text-center justify-center content-center flex-1 text-[.95em] gap-3 items-center font-medium px-3 py-1.5 rounded-md !bg-upstart-700 hover:opacity-90 text-white"
            ),
            onClick: async () => {
              await addToolResult({
                tool: "askUserChoice",
                toolCallId: part.toolCallId,
                output: choice
              });
              addToolResultMessage(choice);
            },
            children: choice
          },
          `single-${i}`
        );
      })
    }
  );
}
function ImagesPreview({ query, images }) {
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("basis-full flex flex-col gap-2 mt-1 mb-6 text-sm ml-6 font-normal"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tx("grid grid-cols-3 gap-1 min-h-60 max-h-60"), children: images.map((image, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      className: tx(
        "rounded-md relative z-10 hover:z-50 hover:(scale-110 shadow-2xl) transition-transform duration-150"
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "img",
          {
            src: image.url,
            alt: image.description,
            className: tx(
              "rounded-md h-auto !object-cover object-center w-full aspect-video",
              css({
                // animation delay
                animationDelay: `${index * 100}ms`
              })
            ),
            loading: "lazy"
          },
          image.url
        ),
        image.author?.name && /* @__PURE__ */ jsxRuntimeExports.jsxs(
          "div",
          {
            className: tx(
              "absolute px-1.5 bottom-0 left-0 right-0 bg-black/50 text-white text-[0.6rem] p-0.5 rounded-b-md truncate capitalize"
            ),
            children: [
              "By",
              " ",
              image.author.profile_url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                "a",
                {
                  href: image.author.profile_url,
                  target: "_blank",
                  rel: "noreferrer",
                  className: tx("underline hover:text-upstart-300"),
                  children: image.author.name
                }
              ) : image.author.name,
              " ",
              "/ ",
              image.provider
            ]
          }
        )
      ]
    },
    image.url
  )) }) });
}
export {
  ToolRenderer as default
};
//# sourceMappingURL=ChatToolRenderer.DzvdCqRR.js.map
