import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { a as tx, c as css } from "./twind.DdSZmZu6.js";
import { f as MdDone } from "./index.CNpSgpKM.js";
import { useState } from "react";
import "./index.NovFngrl.js";
import { f as useDebugMode } from "./use-editor.BcGWPSSE.js";
import { T as ThemePreview } from "./ThemePreview.BTU09Boj.js";
import { A as AnimatePresence, m as motion } from "./ChatComponent.CXSgWJNA.js";
import { s } from "./base-button.dY2fIaam.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__ */ jsx(AnimatePresence, { children: toolPart.state === "input-available" && /* @__PURE__ */ jsx(
      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: /* @__PURE__ */ jsx(
          UserChoicesButtons,
          {
            part: toolPart,
            addToolResult,
            addToolResultMessage
          },
          toolPart.toolCallId
        )
      }
    ) }, toolPart.toolCallId);
  }
  if (typeof toolPart.input === "object" && toolPart.input !== null && "waitingMessage" in toolPart.input) {
    return /* @__PURE__ */ jsx(AnimatePresence, { children: toolPart.state === "input-available" ? /* @__PURE__ */ jsx(RunningToolDisplay, { part: toolPart }) : toolPart.state === "output-available" ? /* @__PURE__ */ 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__ */ jsx(MdDone, { className: tx("w-4 h-4 text-green-600") }),
          /* @__PURE__ */ jsx("span", { children: toolPart.input.waitingMessage }),
          (toolPart.type === "tool-searchImages" || toolPart.type === "tool-generateImages") && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ 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__ */ jsx(ImagesPreview, { images: toolPart.output }, toolPart.toolCallId)
          ] }),
          toolPart.type === "tool-createThemes" && /* @__PURE__ */ jsx("div", { className: tx("basis-full flex justify-evenly gap-3 mt-4 mb-2"), children: toolPart.output.map((theme) => /* @__PURE__ */ jsx(ThemePreview, { noPreview: true, selected: false, theme, onClick: () => {
          } }, theme.id)) }),
          debug && /* @__PURE__ */ jsx(ToolCallDebugInfo, { part: toolPart })
        ]
      }
    ) : toolPart.state === "output-error" ? /* @__PURE__ */ 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__ */ jsx(MdDone, { className: tx("w-4 h-4 text-red-600") }),
          /* @__PURE__ */ jsxs("span", { children: [
            toolPart.input.waitingMessage,
            " (Error: ",
            toolPart.errorText,
            ")"
          ] }),
          debug && /* @__PURE__ */ jsx(ToolCallDebugInfo, { part: toolPart })
        ]
      }
    ) : null }, toolPart.toolCallId);
  }
  if (debug) {
    return /* @__PURE__ */ 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__ */ jsxs("details", { children: [
    /* @__PURE__ */ jsxs("summary", { className: tx("cursor-pointer list-none flex gap-1 items-center"), children: [
      /* @__PURE__ */ 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__ */ jsx("title", { children: "Arrow" }),
            /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs("span", { className: tx("text-xs font-normal"), children: [
        "Tool: ",
        part.type,
        " (",
        part.state,
        ")"
      ] })
    ] }),
    /* @__PURE__ */ 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__ */ 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__ */ jsx(s, { size: "1", className: tx("w-4 mx-0.5") }),
        /* @__PURE__ */ jsx("span", { children: part.input.waitingMessage }),
        debug && /* @__PURE__ */ jsxs("details", { className: tx("cursor-pointer basis-full"), children: [
          /* @__PURE__ */ jsxs("summary", { className: tx("cursor-pointer list-none flex gap-1 items-center"), children: [
            /* @__PURE__ */ 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__ */ jsx("title", { children: "Arrow" }),
                  /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
                ]
              }
            ),
            /* @__PURE__ */ jsxs("span", { className: tx("text-xs font-normal"), children: [
              "[",
              part.type,
              "] View tool call"
            ] })
          ] }),
          /* @__PURE__ */ 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__ */ jsx(
    motion.div,
    {
      className: tx("flex flex-wrap gap-2 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__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("div", { className: tx("flex flex-col flex-wrap gap-1.5"), children: part.input.choices.map((choice, i) => {
          return /* @__PURE__ */ 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__ */ jsx("span", { className: tx("text-nowrap", selectedChoices.includes(choice) ? "font-bold" : ""), children: choice })
            },
            `multi-${i}`
          );
        }) }),
        /* @__PURE__ */ jsx("div", { className: tx("basis-full w-full mt-6 flex justify-end"), children: /* @__PURE__ */ 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__ */ 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({ images }) {
  return /* @__PURE__ */ jsx("div", { className: tx("basis-full flex flex-col gap-2 mt-1 mb-6 text-sm ml-6 font-normal"), children: /* @__PURE__ */ jsx("div", { className: tx("grid grid-cols-3 gap-1 min-h-60 max-h-60"), children: images.map((image, index) => /* @__PURE__ */ jsxs(
    "div",
    {
      className: tx(
        "rounded-md relative z-10 hover:z-50 hover:(scale-110 shadow-2xl) transition-transform duration-150"
      ),
      children: [
        /* @__PURE__ */ 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__ */ 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.profileUrl ? /* @__PURE__ */ jsx(
                "a",
                {
                  href: image.author.profileUrl,
                  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.DxceAOYy.js.map
