import { jsx as t, jsxs as s, Fragment as f } from "react/jsx-runtime";
import { a as i, c as m } from "./twind.Cg2g8xBZ.js";
import { f as p } from "./index.DpxLxIqU.js";
import { useState as g } from "react";
import "./index.D1n9HtNk.js";
import { f as d } from "./use-editor.CLs27I-R.js";
import { T as x } from "./ThemePreview.DFB-KRuT.js";
import { A as w, m as u } from "./ChatComponent.DuJivMsp.js";
import { s as y } from "./base-button.DeoDB8N9.js";
function D({
  toolPart: e,
  error: n
}) {
  const a = d(), [c, h] = g(!1);
  if (n || e.state === "output-error" && !a)
    return null;
  const l = typeof e.output == "object" && e.output !== null && "waitingMessage" in e.output ? e.output : typeof e.input == "object" && e.input !== null && "waitingMessage" in e.input ? e.input : null;
  return l ? /* @__PURE__ */ t(w, { children: e.state === "input-available" || e.state === "output-available" && e.preliminary ? /* @__PURE__ */ t(v, { part: e }) : e.state === "output-available" ? /* @__PURE__ */ s(
    u.div,
    {
      className: i("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__ */ t(p, { className: i("w-4 h-4 text-green-600") }),
        /* @__PURE__ */ t("span", { children: l.waitingMessage }),
        (e.type === "tool-searchImages" || e.type === "tool-generateImages") && /* @__PURE__ */ s(f, { children: [
          /* @__PURE__ */ s(
            "button",
            {
              type: "button",
              className: i(
                "text-sm text-upstart-700 font-medium inline-flex items-center hover:underline"
              ),
              onClick: () => h((r) => !r),
              children: [
                c ? "Hide" : "Show",
                " Preview"
              ]
            }
          ),
          c && /* @__PURE__ */ t(b, { images: e.output }, e.toolCallId)
        ] }),
        e.type === "tool-createThemes" && /* @__PURE__ */ t("div", { className: i("basis-full flex flex-wrap justify-evenly gap-2 mt-4 mb-2"), children: e.output.map((r) => /* @__PURE__ */ t("div", { className: "flex-shrink-0 basis-[calc(33%-2rem)] h-16", children: /* @__PURE__ */ t(
          x,
          {
            noPreview: !0,
            className: "!h-full",
            selected: !1,
            theme: r,
            onClick: () => {
            }
          }
        ) }, r.id)) }),
        a && /* @__PURE__ */ t(o, { part: e })
      ]
    }
  ) : e.state === "output-error" ? /* @__PURE__ */ s(
    u.div,
    {
      className: i("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__ */ t(p, { className: i("w-4 h-4 text-red-600") }),
        /* @__PURE__ */ s("span", { children: [
          l.waitingMessage,
          " (Error: ",
          e.errorText,
          ")"
        ] }),
        a && /* @__PURE__ */ t(o, { part: e })
      ]
    }
  ) : null }, e.toolCallId) : a ? /* @__PURE__ */ t(o, { part: e }, e.toolCallId) : null;
}
function o({ part: e }) {
  const n = i(
    m({
      display: "block",
      fontFamily: "monospace",
      fontSize: "0.7rem",
      lineHeight: "1.3",
      wordWrap: "break-word",
      whiteSpace: "pre-wrap"
    })
  );
  return /* @__PURE__ */ s("details", { children: [
    /* @__PURE__ */ s("summary", { className: i("cursor-pointer list-none flex gap-1 items-center"), children: [
      /* @__PURE__ */ s(
        "svg",
        {
          className: i("-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__ */ t("title", { children: "Arrow" }),
            /* @__PURE__ */ t("polyline", { points: "6 9 12 15 18 9" })
          ]
        }
      ),
      /* @__PURE__ */ s("span", { className: i("text-xs font-normal"), children: [
        "Tool: ",
        e.type,
        " (",
        e.state,
        ")"
      ] })
    ] }),
    /* @__PURE__ */ t("pre", { className: n, children: JSON.stringify(e, null, 2) })
  ] });
}
function v({
  part: e
}) {
  const n = d();
  return typeof e.input != "object" || e.input === null || !("waitingMessage" in e.input) && !(typeof e.output == "object" && e.output !== null && "waitingMessage" in e.output) ? null : /* @__PURE__ */ s(
    u.div,
    {
      className: i("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__ */ t(y, { size: "1", className: i("w-4 mx-0.5") }),
        /* @__PURE__ */ t("span", { children: e.input.waitingMessage ?? e.output.waitingMessage }),
        n && /* @__PURE__ */ s("details", { className: i("cursor-pointer basis-full"), children: [
          /* @__PURE__ */ s("summary", { className: i("cursor-pointer list-none flex gap-1 items-center"), children: [
            /* @__PURE__ */ s(
              "svg",
              {
                className: i("-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__ */ t("title", { children: "Arrow" }),
                  /* @__PURE__ */ t("polyline", { points: "6 9 12 15 18 9" })
                ]
              }
            ),
            /* @__PURE__ */ s("span", { className: i("text-xs font-normal"), children: [
              "[",
              e.type,
              "] View tool call"
            ] })
          ] }),
          /* @__PURE__ */ t("pre", { className: i("whitespace-pre-wrap text-xs"), children: JSON.stringify({ type: e.type, input: e.input, output: e.output }, null, 2) })
        ] })
      ]
    }
  );
}
function b({ images: e }) {
  return /* @__PURE__ */ t("div", { className: i("basis-full flex flex-col gap-2 mt-1 mb-6 text-sm ml-6 font-normal"), children: /* @__PURE__ */ t("div", { className: i("grid grid-cols-3 gap-1 min-h-60 max-h-60"), children: e.map((n, a) => /* @__PURE__ */ s(
    "div",
    {
      className: i(
        "rounded-md relative z-10 hover:z-50 hover:(scale-110 shadow-2xl) transition-transform duration-150"
      ),
      children: [
        /* @__PURE__ */ t(
          "img",
          {
            src: n.url,
            alt: n.description,
            className: i(
              "rounded-md h-auto !object-cover object-center w-full aspect-video",
              m({
                // animation delay
                animationDelay: `${a * 100}ms`
              })
            ),
            loading: "lazy"
          },
          n.url
        ),
        n.author?.name && /* @__PURE__ */ s(
          "div",
          {
            className: i(
              "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",
              " ",
              n.author.profileUrl ? /* @__PURE__ */ t(
                "a",
                {
                  href: n.author.profileUrl,
                  target: "_blank",
                  rel: "noreferrer",
                  className: i("underline hover:text-upstart-300"),
                  children: n.author.name
                }
              ) : n.author.name,
              " ",
              "/ ",
              n.provider
            ]
          }
        )
      ]
    },
    n.url
  )) }) });
}
export {
  D as default
};
