import { j as s } from "../../../../../_virtual/jsx-runtime.js";
import { tx as o, css as j } from "../../../../style-system/dist/twind.js";
import { useRef as u, useState as v, useEffect as f, useMemo as q, Suspense as V } from "react";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import { toast as F } from "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { DefaultChatTransport as de, lastAssistantMessageIsCompleteWithToolCalls as pe } from "../../../../../node_modules/.pnpm/ai@5.0.39_zod@4.1.5/node_modules/ai/dist/index.js";
import { TbSend2 as me } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/tb/index.js";
import { IoIosAttach as ge } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/io/index.js";
import { useChat as he } from "../../../../../node_modules/.pnpm/@ai-sdk_react@2.0.39_react@18.3.0-canary-3d9b20132-20240124_zod@4.1.5/node_modules/@ai-sdk/react/dist/index.js";
import { useSitePrompt as fe, useDraftHelpers as xe, useAdditionalAssets as be, useGenerationState as ye, useSite as ke, usePage as je, useThemes as we } from "../../../../../use-page-data.js";
import { MdDone as $ } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/md/index.js";
import { useDebounceCallback as Ne } from "../../../../../node_modules/.pnpm/usehooks-ts@3.1.1_react@18.3.0-canary-3d9b20132-20240124/node_modules/usehooks-ts/dist/index.js";
import { BiStopCircle as ve } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/bi/index.js";
import { defineDataRecord as Se } from "../../../../sdk/dist/shared/datarecords.js";
import { useDeepCompareEffect as Re } from "../../../../../node_modules/.pnpm/use-deep-compare@1.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/use-deep-compare/dist-web/index.js";
import { useDebugMode as _ } from "../../../../../use-editor.js";
import { defineDatasource as Ce } from "../../../../sdk/dist/shared/datasources.js";
import S from "./Markdown.js";
import { AnimatePresence as B } from "../../../../../node_modules/.pnpm/motion@12.17.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.0-canary-3d9b20132-20240124__3d3d801e2ca53cf8cd01c816a386b070/node_modules/motion/dist/es/framer-motion/dist/es/components/AnimatePresence/index.js";
import { motion as x } from "../../../../../node_modules/.pnpm/motion@12.17.0_@emotion_is-prop-valid@1.4.0_react-dom@18.3.0-canary-3d9b20132-20240124__3d3d801e2ca53cf8cd01c816a386b070/node_modules/motion/dist/es/framer-motion/dist/es/render/components/motion/proxy.js";
import { Spinner as Y } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/spinner.js";
import { Text as Ae } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/text.js";
import { Button as J } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/button.js";
const Te = !1, K = o(
  "rounded-lg p-6 text-pretty transition-all duration-300 flex flex-col gap-1.5",
  j({
    // whiteSpace: "pre-line",
    "& p": {
      marginBlock: ".5rem",
      lineHeight: "1.625"
    },
    "& p:first-child": {
      marginTop: "0"
    },
    "& p:last-child": {
      marginBottom: "0"
    },
    "& code": {
      fontSize: "88%"
    },
    "& ul, ol": {
      listStyle: "outside",
      listStyleType: "square",
      paddingLeft: "1.6rem",
      marginTop: "0.5rem",
      marginBottom: "0.2rem"
    },
    "& li": {
      marginBottom: "0.25rem",
      paddingLeft: ".3rem"
    },
    "& div.choices": {
      display: "flex",
      flexWrap: "wrap",
      justifyContent: "space-between",
      gap: ".5rem",
      marginBlock: "1rem",
      "& > button": {
        backgroundColor: "var(--violet-10)",
        color: "#fff",
        flexGrow: "1",
        padding: "0.4rem 0.7rem",
        borderRadius: "0.5rem",
        border: "none",
        fontSize: ".95em",
        fontWeight: "500",
        "&:hover": {
          backgroundColor: "var(--violet-9)"
        }
      }
    }
  })
), Le = o(
  "text-gray-800 text-[0.8rem] opacity-70 bg-gradient-to-tr from-gray-200/20 to-gray-100/20 w-fit max-w-[90%] dark:(bg-dark-900 text-white/70) self-end"
);
function rt() {
  const r = fe(), R = u(!1), i = xe(), b = be(), a = ye(), l = ke(), d = je(), X = we(), [y, Z] = v(), [D, I] = v(""), P = _(), [W, De] = v(a.isSetup), [E, ee] = v(!1);
  f(() => {
    const t = (n) => {
      if (n.target && N.current) {
        const { scrollTop: ne, scrollHeight: le, clientHeight: ce } = N.current, ue = ne + ce >= le - 100;
        ee(!ue);
      }
    }, e = N.current;
    if (e)
      return e.addEventListener("scroll", t), () => {
        e.removeEventListener("scroll", t);
      };
  }, []), f(() => {
    W ? F.loading("Setting up your site...", { duration: 1 / 0, id: "chat-setup" }) : F.dismiss("chat-setup");
  }, [W]);
  const C = u(null), A = u(/* @__PURE__ */ new Set()), te = o(
    "text-black/80 dark:text-upstart-200",
    a.isReady ? "bg-gradient-to-tr from-upstart-200/80 to-upstart-100 text-sm" : "bg-white/80 dark:bg-dark-800 text-fluid-sm backdrop-blur-md"
  ), c = u(l), h = u(d), M = u(a), G = u(y), w = u(b);
  f(() => {
    c.current = l, h.current = d, M.current = a, G.current = y, w.current = b;
  }, [l, d, a, y, b]);
  const se = q(() => a.isSetup ? [
    {
      id: "init-setup",
      role: "user",
      parts: [
        {
          type: "text",
          text: `Create a website based on this prompt:
${r}`
        }
      ]
    }
  ] : [
    {
      id: "init-edit",
      role: "assistant",
      parts: [
        {
          type: "text",
          text: `Hey! 👋

Ready to keep building? You can:
- Chat with me to make changes
- Use the visual editor for direct editing

What should we work on together? 🤖`
        }
      ]
    }
  ], [a.isSetup, r]), re = ({ toolCall: t }) => {
    console.log("Tool call: %s: ", t.toolName, t);
    const e = { tool: t.toolName, toolCallId: t.toolCallId };
    switch (t.toolName) {
      case "listThemes": {
        console.debug(
          "Cient tool call %s",
          t.toolName,
          " replying with themes",
          c.current.themes
        ), m({
          ...e,
          output: c.current.themes
        });
        break;
      }
      case "getCurrentTheme": {
        console.debug(
          "Client tool call %s",
          t.toolName,
          " replying with current theme ",
          c.current.theme
        ), m({
          ...e,
          output: c.current.theme
        });
        break;
      }
      case "listImages": {
        console.debug("Client tool call %s", t.toolName, " replying with images ", w.current), m({
          ...e,
          output: w.current ?? []
        });
        break;
      }
      case "getSitemap": {
        console.debug(
          "Client tool call %s",
          t.toolName,
          " replying with sitemap ",
          c.current.sitemap
        ), m({
          ...e,
          output: c.current.sitemap
        });
        break;
      }
      case "getSiteAttributes": {
        console.debug(
          "Client tool call %s",
          t.toolName,
          " replying with site attributes ",
          c.current.attributes
        ), m({
          ...e,
          output: c.current.attributes
        });
        break;
      }
      case "getSection": {
        const n = t.input;
        console.debug(
          "Client tool call %s",
          t.toolName,
          " replying with section ",
          n.id,
          h.current.sections
        ), m({
          ...e,
          output: h.current.sections.find((g) => g.id === n.id) ?? `Section with id '${n.id}' not found`
        });
        break;
      }
      case "listSections": {
        console.debug(
          "Client tool call %s",
          t.toolName,
          " replying with sections ",
          h.current.sections
        ), m({
          ...e,
          output: h.current.sections
        });
        break;
      }
      case "deleteBrick": {
        const n = t.input;
        i.deleteBrick(n.id), m({
          ...e,
          output: !0
        });
        break;
      }
      default:
        (t.toolName.startsWith("get") || t.toolName.startsWith("list")) && console.log("UNHANDLED TOOL CALL client-side", t.toolName);
    }
  }, { messages: p, sendMessage: U, error: T, status: k, regenerate: z, stop: ie, addToolResult: m } = he(
    {
      // resume: generationState.isReady === false,
      transport: new de({
        api: "/editor/chat",
        credentials: "include",
        body: () => ({
          callContext: {
            site: c.current,
            page: h.current,
            generationState: M.current,
            userLanguage: G.current,
            assets: w.current
          }
        })
      }),
      sendAutomaticallyWhen: pe,
      messages: se,
      // generateId: createIdGenerator({
      //   prefix: "ups",
      //   separator: "_",
      //   size: 16,
      // }),
      onError: (t) => {
        console.error("ERROR", t);
      },
      // id: `chat-${site.id}`,
      /**
       * For tools that should be called client-side
       */
      onToolCall: re
    }
  ), L = u(null), N = u(null), H = (t) => {
    t.preventDefault(), U({ text: D }), I(""), L?.current && L.current.focus();
  }, ae = Ne(() => {
    C.current && !E && C.current?.scrollIntoView({ behavior: "smooth" });
  }, 300);
  f(ae, [k, p, E]), f(() => {
    if (!y) {
      for (const t of p)
        if (t.metadata?.userLanguage) {
          console.log("Setting user language to", t.metadata.userLanguage), Z(t.metadata.userLanguage);
          break;
        }
    }
  }, [p, y]), f(() => {
    R.current || (R.current = !0, a.isReady === !1 && (console.log("Chat initialized", { sitePrompt: r }), z()));
  }, []);
  const O = q(() => p.filter((e) => e.role === "assistant").flatMap((e) => e.parts).filter((e) => e.type.startsWith("tool-")).filter(
    (e) => e.state === "output-available" && !A.current.has(e.toolCallId)
  ), [p]), Q = q(() => p.filter((e) => e.role === "assistant").flatMap((e) => e.parts).filter((e) => e.type.startsWith("tool-")).filter((e) => e.state !== "output-available" && e.state !== "output-error").length > 0, [p]);
  Re(() => {
    for (const t of O.filter((e) => e.state === "output-available"))
      if (!A.current.has(t.toolCallId))
        switch (A.current.add(t.toolCallId), t.type) {
          case "tool-createPage": {
            const e = t.output;
            console.log("Generated page", e), i.addPage({ ...e, version: crypto.randomUUID(), sections: [] });
            break;
          }
          case "tool-createNavbar":
            console.log("Generated navbar", t.output), i.updateSiteAttributes({
              navbar: t.output
            });
            break;
          case "tool-createFooter":
            console.log("Generated footer", t.output), i.updateSiteAttributes({
              footer: t.output
            });
            break;
          case "tool-createThemes": {
            const e = t.output;
            console.log("Generated themes", e), i.setThemes(e);
            break;
          }
          case "tool-createDatasource": {
            const e = t.output;
            console.log("Generated datasource", e), i.addDatasource(Ce(e));
            break;
          }
          case "tool-createDatarecord": {
            const e = t.output;
            console.log("Generated data record", e), i.addDatarecord(Se(e));
            break;
          }
          case "tool-createSitemap": {
            const e = t.output;
            console.log("Generated sitemap", e), i.setSitemap(e);
            break;
          }
          case "tool-createSiteAttributes": {
            const e = t.output;
            console.log("Generated site attributes", e), i.updateSiteAttributes(e);
            break;
          }
          case "tool-createSiteQueries": {
            const e = t.output;
            console.log("Generated site queries", e), i.updateSiteAttributes({
              queries: [...l.attributes.queries ?? [], ...e]
            });
            break;
          }
          case "tool-editSiteQueries": {
            const e = t.output;
            console.log("Edited site queries", e), i.updateSiteAttributes({
              queries: [...l.attributes.queries ?? [], ...e]
            });
            break;
          }
          case "tool-createPageQueries": {
            const e = t.output;
            console.log("Generated page queries", e), i.updatePageAttributes({
              ...d.attributes,
              queries: [...d.attributes.queries ?? [], ...e]
            });
            break;
          }
          case "tool-editPageQueries": {
            const e = t.output;
            console.log("Edited page queries", e), i.updatePageAttributes({
              ...d.attributes,
              queries: [...d.attributes.queries ?? [], ...e]
            });
            break;
          }
          case "tool-createSection": {
            const e = t.output;
            console.log("Generated section", e), i.addSection({ bricks: [], ...e });
            break;
          }
          case "tool-createBrick": {
            const e = t.output;
            console.log("Generated brick", e);
            const { sectionId: n, index: g } = t.input;
            i.addBrick(e, n, g);
            break;
          }
          case "tool-editBrick": {
            i.updateBrickProps(t.input.id, t.output.props);
            break;
          }
          case "tool-deleteBrick": {
            const { id: e } = t.input;
            i.deleteBrick(e);
            break;
          }
          case "tool-searchImages": {
            const e = t.output;
            console.log("Generated images", e), i.addAdditionalAssets(e);
            break;
          }
          default:
            console.log("Default tool invocation", t.type, t);
            break;
        }
  }, [O, i, X]);
  const oe = p.filter(
    (t) => t.id !== "init-setup"
    /*&& msg.parts.length > 0*/
  );
  return /* @__PURE__ */ s.jsxs(
    "div",
    {
      className: o(
        "flex flex-col mx-auto w-full",
        {
          "rounded-xl h-[calc(100%-6rem)] max-h-[calc(100%-6rem)] my-[3rem] ": a.isReady === !1,
          "rounded-tr-xl bg-gray-50 max-h-[inherit]": a.isReady === !0
        },
        j({
          gridArea: "chat",
          maxWidth: a.isReady ? "none" : "clamp(500px, 60dvw, 740px)"
        }),
        a.isReady === !1 && j({
          // boxShadow: "rgba(100, 100, 111, 0.3) 0px 0px 36px 0px",
          // padding: "12px",
        })
      ),
      children: [
        /* @__PURE__ */ s.jsxs(
          "div",
          {
            ref: N,
            className: o(
              ` overflow-y-auto h-[calc(100cqh-250px-6rem)]
            flex flex-col gap-y-2.5 flex-grow scroll-smooth relative transition-all duration-300`,
              {
                "rounded-tr-xl shadow-inner": a.isReady === !0,
                "rounded-xl": a.isReady === !1,
                "p-2": a.isReady === !0,
                "p-0": a.isReady === !1
              },
              j({
                scrollbarWidth: "none"
                // scrollbarColor: "var(--violet-a8) var(--violet-a2)",
                // scrollbarColor: "var(--violet-4) var(--violet-2)",
                // scrollbarGutter: "stable",
              })
            ),
            children: [
              oe.map((t, e) => /* @__PURE__ */ s.jsx(
                "div",
                {
                  "data-message-id": t.id,
                  className: o(t.role === "assistant" ? te : Le, K, "empty:hidden"),
                  children: t.parts.map((n, g) => {
                    if (n.type.startsWith("tool-"))
                      return /* @__PURE__ */ s.jsx(
                        Be,
                        {
                          toolPart: n,
                          addToolResult: m,
                          sendMessage: U,
                          error: T
                        },
                        g
                      );
                    switch (n.type) {
                      case "dynamic-tool":
                        return null;
                      case "text":
                        return /* @__PURE__ */ s.jsx(V, { children: /* @__PURE__ */ s.jsx(S, { content: n.text }, g) }, g);
                      // case "source":
                      //   // @ts-ignore
                      //   if (part.sourceType === "images") {
                      //     return (
                      //       <ImagesPreview
                      //         key={i}
                      //         // @ts-ignore
                      //         query={part.source.query as string}
                      //         // @ts-ignore
                      //         images={part.source.images as SimpleImageMetadata[]}
                      //       />
                      //     );
                      //   }
                      //   return <p key={i}>{JSON.stringify(part)}</p>;
                      case "reasoning":
                        return P ? /* @__PURE__ */ s.jsx("div", { className: "flex items-center gap-1.5", children: /* @__PURE__ */ s.jsxs("details", { children: [
                          /* @__PURE__ */ s.jsxs("summary", { className: "cursor-pointer list-none flex gap-1 items-center", children: [
                            /* @__PURE__ */ s.jsxs(
                              "svg",
                              {
                                className: "-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__ */ s.jsx("title", { children: "Arrow" }),
                                  /* @__PURE__ */ s.jsx("polyline", { points: "6 9 12 15 18 9" })
                                ]
                              }
                            ),
                            /* @__PURE__ */ s.jsx("span", { className: "text-xs font-normal", children: "Thinking..." })
                          ] }),
                          /* @__PURE__ */ s.jsx(
                            Ae,
                            {
                              as: "div",
                              size: "2",
                              className: "text-gray-500 mt-2 ml-2 border-l-2 border-gray-300 pl-3",
                              children: /* @__PURE__ */ s.jsx(S, { content: n.text })
                            }
                          )
                        ] }) }, g) : null;
                    }
                  })
                },
                t.id
              )),
              /* @__PURE__ */ s.jsx(B, { initial: !1, children: !Q && (k === "submitted" || k === "streaming") && /* @__PURE__ */ s.jsxs(
                x.div,
                {
                  initial: { opacity: 0, height: 0 },
                  animate: { opacity: 1, height: "1.5rem" },
                  exit: { opacity: 0, height: 0 },
                  transition: { duration: 0.2 },
                  className: o(
                    "p-4 my-4 text-fluid-sm text-gray-600 flex items-center justify-center gap-1.5 backdrop-blur-md bg-white/80 max-w-fit mx-auto rounded-lg"
                  ),
                  children: [
                    /* @__PURE__ */ s.jsx(Y, { size: "2" }),
                    " Please wait..."
                  ]
                }
              ) }),
              T && /* @__PURE__ */ s.jsxs("div", { className: o(K, "bg-red-200 text-red-800 text-sm"), children: [
                /* @__PURE__ */ s.jsxs("p", { children: [
                  "An error occured. ",
                  T.message ?? "Please retry."
                ] }),
                /* @__PURE__ */ s.jsx(
                  "button",
                  {
                    type: "button",
                    className: o(
                      "rounded bg-red-700 text-white border border-red-600 hover:opacity-90 block w-full text-center font-semibold py-1 px-2"
                    ),
                    onClick: () => {
                      z();
                    },
                    children: "Retry"
                  }
                )
              ] }),
              /* @__PURE__ */ s.jsx("div", { ref: C, className: o("h-2"), "aria-label": "separator", "aria-hidden": !0 })
            ]
          }
        ),
        /* @__PURE__ */ s.jsxs(
          "form",
          {
            onSubmit: H,
            className: o(
              "flex flex-col flex-1 min-h-[150px] max-h-[150px] gap-1.5 p-2 justify-center mt-2",
              "bg-upstart-100 border-t border-upstart-300 relative",
              // generationState.isReady === false && "hidden",
              a.isReady === !1 && "rounded-lg"
              // "[&:has(textarea:focus)]:(ring-2 ring-upstart-700)",
            ),
            children: [
              /* @__PURE__ */ s.jsx(
                "textarea",
                {
                  onChange: (t) => I(t.target.value),
                  ref: L,
                  value: D,
                  autoFocus: !0,
                  onKeyDown: (t) => {
                    t.key === "Enter" && !t.shiftKey && H(t);
                  },
                  name: "prompt",
                  spellCheck: !1,
                  autoComplete: "off",
                  autoCorrect: "off",
                  placeholder: p.some((t) => t.role === "user") ? void 0 : "Add a section just below the navbar containing a paragraph with a short description of the site.",
                  className: o(
                    "form-textarea ",
                    a.isReady === !1 ? "!text-fluid-sm" : "text-sm",
                    "h-full w-full rounded scrollbar-thin p-2 !bg-white !pb-9 border-upstart-300 shadow-inner focus:(!outline-0 !ring-upstart-500 !border-upstart-500)"
                  )
                }
              ),
              /* @__PURE__ */ s.jsxs(
                "div",
                {
                  className: o(
                    "flex justify-between items-center h-9 text-gray-500 absolute left-[9px] right-[9px] rounded bottom-2.5 px-2 z-50 bg-white"
                  ),
                  children: [
                    /* @__PURE__ */ s.jsx("button", { type: "button", className: o("hover:bg-upstart-200 p-1 rounded inline-flex text-sm gap-1"), children: /* @__PURE__ */ s.jsx(ge, { className: "h-5 w-5" }) }),
                    a.isReady && Te,
                    k === "submitted" || k === "streaming" ? /* @__PURE__ */ s.jsx(
                      J,
                      {
                        type: "button",
                        size: "1",
                        className: o("flex items-center justify-center gap-0.5"),
                        onClick: ie,
                        children: /* @__PURE__ */ s.jsx(ve, { className: "text-lg" })
                      }
                    ) : /* @__PURE__ */ s.jsx(
                      J,
                      {
                        type: "submit",
                        size: "1",
                        className: o("flex items-center gap-0.5"),
                        disabled: Q,
                        children: /* @__PURE__ */ s.jsx(me, { className: "text-lg" })
                      }
                    )
                  ]
                }
              )
            ]
          }
        )
      ]
    }
  );
}
const qe = ["setUserLanguage", "getUserLanguage"];
function Be({
  toolPart: r,
  sendMessage: R,
  addToolResult: i,
  error: b
}) {
  const a = _();
  if (qe.includes(r.type) || b)
    return null;
  if (r.type === "tool-askUserChoice" && r.state !== "input-streaming")
    return /* @__PURE__ */ s.jsx(V, { children: /* @__PURE__ */ s.jsx(B, { initial: !1, children: r.state === "input-available" ? /* @__PURE__ */ s.jsxs(
      x.div,
      {
        className: "choices",
        initial: { opacity: 0, height: 0 },
        animate: { opacity: 1, height: "auto" },
        exit: { opacity: 0, height: 0 },
        transition: { duration: 0.4 },
        children: [
          r.input.question && /* @__PURE__ */ s.jsx("div", { className: "basis-full", children: /* @__PURE__ */ s.jsx(S, { content: r.input.question }) }),
          r.input.choices.map((l, d) => /* @__PURE__ */ s.jsx(
            "button",
            {
              type: "button",
              onClick: () => {
                console.log("addtoolresult to part", r), i({
                  tool: "askUserChoice",
                  toolCallId: r.toolCallId,
                  output: l
                });
              },
              children: l
            },
            d
          ))
        ]
      }
    ) : /* @__PURE__ */ s.jsxs(
      x.div,
      {
        className: "choices",
        initial: { opacity: 0, height: 0 },
        animate: { opacity: 1, height: "auto" },
        exit: { opacity: 0, height: 0 },
        transition: { duration: 0.4 },
        children: [
          r.input?.question && /* @__PURE__ */ s.jsx("div", { className: "basis-full", children: /* @__PURE__ */ s.jsx(S, { content: r.input.question }) }),
          /* @__PURE__ */ s.jsx("div", { className: "basis-full text-right italic text-gray-800", children: r.output })
        ]
      }
    ) }) }, r.toolCallId);
  if (r.type !== "tool-askUserChoice" && r.input && "waitingMessage" in r.input)
    return /* @__PURE__ */ s.jsx(B, { initial: !1, children: r.state === "input-available" ? /* @__PURE__ */ s.jsxs(
      x.div,
      {
        className: "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 },
        children: [
          /* @__PURE__ */ s.jsx(Y, { size: "1", className: "w-4 mx-0.5" }),
          /* @__PURE__ */ s.jsx("span", { children: r.input.waitingMessage })
        ]
      }
    ) : r.state === "output-available" ? /* @__PURE__ */ s.jsxs(
      x.div,
      {
        className: "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__ */ s.jsx($, { className: "w-4 h-4 text-green-600" }),
          /* @__PURE__ */ s.jsx("span", { children: r.input.waitingMessage }),
          /* @__PURE__ */ s.jsxs("details", { className: "cursor-pointer basis-full", children: [
            /* @__PURE__ */ s.jsxs("summary", { className: "cursor-pointer list-none flex gap-1 items-center", children: [
              /* @__PURE__ */ s.jsxs(
                "svg",
                {
                  className: "-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__ */ s.jsx("title", { children: "Arrow" }),
                    /* @__PURE__ */ s.jsx("polyline", { points: "6 9 12 15 18 9" })
                  ]
                }
              ),
              /* @__PURE__ */ s.jsx("span", { className: "text-xs font-normal", children: "View tool call" })
            ] }),
            /* @__PURE__ */ s.jsx("pre", { className: "whitespace-pre-wrap text-xs", children: JSON.stringify({ input: r.input, output: r.output }, null, 2) })
          ] })
        ]
      }
    ) : r.state === "output-error" ? /* @__PURE__ */ s.jsxs(
      x.div,
      {
        className: "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__ */ s.jsx($, { className: "w-4 h-4 text-red-600" }),
          /* @__PURE__ */ s.jsxs("span", { children: [
            r.input.waitingMessage,
            " (Error: ",
            r.errorText,
            ")"
          ] })
        ]
      }
    ) : null });
  if (a) {
    const l = o(
      j({
        display: "block",
        fontFamily: "monospace",
        fontSize: "0.7rem",
        lineHeight: "1.3",
        wordWrap: "break-word",
        whiteSpace: "pre-wrap"
      })
    );
    return /* @__PURE__ */ s.jsxs("details", { children: [
      /* @__PURE__ */ s.jsxs("summary", { className: "cursor-pointer list-none flex gap-1 items-center", children: [
        /* @__PURE__ */ s.jsxs(
          "svg",
          {
            className: "-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__ */ s.jsx("title", { children: "Arrow" }),
              /* @__PURE__ */ s.jsx("polyline", { points: "6 9 12 15 18 9" })
            ]
          }
        ),
        /* @__PURE__ */ s.jsxs("span", { className: "text-xs font-normal", children: [
          "Tool: ",
          r.type,
          " (",
          r.state,
          ")"
        ] })
      ] }),
      /* @__PURE__ */ s.jsx("pre", { className: l, children: JSON.stringify(r, null, 2) })
    ] });
  }
  return null;
}
export {
  rt as default
};
//# sourceMappingURL=Chat.js.map
