@chaibuilder/sdk 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/ai-prompt-input-Bhc0ds7X.js

@@ -0,0 +1,655 @@
+import { jsx as e, jsxs as w, Fragment as ie } from "react/jsx-runtime";
+import { ag as N, T as le, B as V, aA as ce, r as ue, s as de, t as pe, v as me, aB as fe, aC as he, D as ge, aD as ve, d as be, f as xe, C as we, i as Ne, j as Ie, l as ye, m as Se } from "./index-Ct7ElCGK.js";
+import { PaperclipIcon as ke, XIcon as Y, PlusIcon as De, ImageIcon as ze, MicIcon as Pe, CornerDownLeftIcon as Te, Loader2Icon as Ae, SquareIcon as Ce, Cpu as Le, Paperclip as Re, GlobeIcon as Me, Square as je, Send as Ue } from "lucide-react";
+import { nanoid as Oe } from "nanoid";
+import { useContext as W, useRef as M, useEffect as A, useState as P, useCallback as F, useMemo as Fe, createContext as E, Fragment as Ge, Children as Be } from "react";
+import { cva as J } from "class-variance-authority";
+import { useTranslation as _e } from "react-i18next";
+import { a as Ve, g as _, A as We } from "./models-D95ZYr_x.js";
+function Ee({ className: t, ...n }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: N(
+        "group/input-group shadow-xs relative flex w-full items-center rounded-md border border-input outline-none transition-[color,box-shadow] dark:bg-input/30",
+        "h-9 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        t
+      ),
+      ...n
+    }
+  );
+}
+const He = J(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function Q({
+  className: t,
+  align: n = "inline-start",
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": n,
+      className: N(He({ align: n }), t),
+      onClick: (l) => {
+        var i, p;
+        l.target.closest("button") || (p = (i = l.currentTarget.parentElement) == null ? void 0 : i.querySelector("input")) == null || p.focus();
+      },
+      ...o
+    }
+  );
+}
+const qe = J("flex items-center gap-2 text-sm shadow-none", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function Z({
+  className: t,
+  type: n = "button",
+  variant: o = "ghost",
+  size: l = "xs",
+  ...i
+}) {
+  return /* @__PURE__ */ e(
+    V,
+    {
+      type: n,
+      "data-size": l,
+      variant: o,
+      className: N(qe({ size: l }), t),
+      ...i
+    }
+  );
+}
+function Ke({ className: t, ...n }) {
+  return /* @__PURE__ */ e(
+    le,
+    {
+      "data-slot": "input-group-control",
+      className: N(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        t
+      ),
+      ...n
+    }
+  );
+}
+const $e = E(null), Xe = E(null), ee = () => W($e), Ye = () => W(Xe), te = E(null), G = () => {
+  const t = Ye(), n = W(te), o = t ?? n;
+  if (!o)
+    throw new Error("usePromptInputAttachments must be used within a PromptInput or PromptInputProvider");
+  return o;
+};
+function Je({ data: t, className: n, ...o }) {
+  var f;
+  const l = G(), i = t.filename || "", u = ((f = t.mediaType) != null && f.startsWith("image/") && t.url ? "image" : "file") === "image", g = i || (u ? "Image" : "Attachment");
+  return /* @__PURE__ */ w(ut, { children: [
+    /* @__PURE__ */ e(ce, { asChild: !0, children: /* @__PURE__ */ w(
+      "div",
+      {
+        className: N(
+          "group relative flex h-8 cursor-default select-none items-center gap-1.5 rounded-md border border-border px-1.5 text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          n
+        ),
+        ...o,
+        children: [
+          /* @__PURE__ */ w("div", { className: "relative size-5 shrink-0", children: [
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded bg-background transition-opacity group-hover:opacity-0", children: u ? /* @__PURE__ */ e(
+              "img",
+              {
+                alt: i || "attachment",
+                className: "size-5 object-cover",
+                height: 20,
+                src: t.url,
+                width: 20
+              }
+            ) : /* @__PURE__ */ e("div", { className: "flex size-5 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ e(ke, { className: "size-3" }) }) }),
+            /* @__PURE__ */ w(
+              V,
+              {
+                "aria-label": "Remove attachment",
+                className: "absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5",
+                onClick: (y) => {
+                  y.stopPropagation(), l.remove(t.id);
+                },
+                type: "button",
+                variant: "ghost",
+                children: [
+                  /* @__PURE__ */ e(Y, {}),
+                  /* @__PURE__ */ e("span", { className: "sr-only", children: "Remove" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("span", { className: "flex-1 truncate", children: g })
+        ]
+      },
+      t.id
+    ) }),
+    /* @__PURE__ */ e(dt, { className: "w-auto p-2", children: /* @__PURE__ */ w("div", { className: "w-auto space-y-3", children: [
+      u && /* @__PURE__ */ e("div", { className: "flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border", children: /* @__PURE__ */ e(
+        "img",
+        {
+          alt: i || "attachment preview",
+          className: "max-h-full max-w-full object-contain",
+          height: 384,
+          src: t.url,
+          width: 448
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-2.5", children: /* @__PURE__ */ w("div", { className: "min-w-0 flex-1 space-y-1 px-0.5", children: [
+        /* @__PURE__ */ e("h4", { className: "truncate text-sm font-semibold leading-none", children: i || (u ? "Image" : "Attachment") }),
+        t.mediaType && /* @__PURE__ */ e("p", { className: "truncate font-mono text-xs text-muted-foreground", children: t.mediaType })
+      ] }) })
+    ] }) })
+  ] });
+}
+function Qe({ children: t, className: n, ...o }) {
+  const l = G();
+  return l.files.length ? /* @__PURE__ */ e("div", { className: N("flex flex-wrap items-center gap-2 p-3", n), ...o, children: l.files.map((i) => /* @__PURE__ */ e(Ge, { children: t(i) }, i.id)) }) : null;
+}
+const Ze = ({
+  label: t = "Add photos or files",
+  ...n
+}) => {
+  const o = G();
+  return /* @__PURE__ */ w(
+    me,
+    {
+      ...n,
+      onSelect: (l) => {
+        l.preventDefault(), o.openFileDialog();
+      },
+      children: [
+        /* @__PURE__ */ e(ze, { className: "mr-2 size-4" }),
+        " ",
+        t
+      ]
+    }
+  );
+}, et = ({
+  className: t,
+  accept: n,
+  multiple: o,
+  globalDrop: l,
+  syncHiddenInput: i,
+  maxFiles: p,
+  maxFileSize: u,
+  onError: g,
+  onSubmit: f,
+  children: y,
+  ...D
+}) => {
+  const s = ee(), a = !!s, d = M(null), k = M(null), I = M(null);
+  A(() => {
+    var v;
+    const r = (v = k.current) == null ? void 0 : v.closest("form");
+    r instanceof HTMLFormElement && (I.current = r);
+  }, []);
+  const [S, C] = P([]), h = a ? s.attachments.files : S, T = F(() => {
+    var r;
+    (r = d.current) == null || r.click();
+  }, []), j = F(
+    (r) => !n || n.trim() === "" ? !0 : n.includes("image/*") ? r.type.startsWith("image/") : !0,
+    [n]
+  ), U = F(
+    (r) => {
+      const v = Array.from(r), m = v.filter((x) => j(x));
+      if (v.length && m.length === 0) {
+        g == null || g({
+          code: "accept",
+          message: "No files match the accepted types."
+        });
+        return;
+      }
+      const c = (x) => u ? x.size <= u : !0, b = m.filter(c);
+      if (m.length > 0 && b.length === 0) {
+        g == null || g({
+          code: "max_file_size",
+          message: "All files exceed the maximum size."
+        });
+        return;
+      }
+      C((x) => {
+        const L = typeof p == "number" ? Math.max(0, p - x.length) : void 0, oe = typeof L == "number" ? b.slice(0, L) : b;
+        typeof L == "number" && b.length > L && (g == null || g({
+          code: "max_files",
+          message: "Too many files. Some were not added."
+        }));
+        const $ = [];
+        for (const B of oe)
+          $.push({
+            id: Oe(),
+            type: "file",
+            url: URL.createObjectURL(B),
+            mediaType: B.type,
+            filename: B.name
+          });
+        return x.concat($);
+      });
+    },
+    [j, p, u, g]
+  ), z = a ? (r) => s.attachments.add(r) : U, R = a ? (r) => s.attachments.remove(r) : (r) => C((v) => {
+    const m = v.find((c) => c.id === r);
+    return m != null && m.url && URL.revokeObjectURL(m.url), v.filter((c) => c.id !== r);
+  }), O = a ? () => s.attachments.clear() : () => C((r) => {
+    for (const v of r)
+      v.url && URL.revokeObjectURL(v.url);
+    return [];
+  }), q = a ? () => s.attachments.openFileDialog() : T;
+  A(() => {
+    a && s.__registerFileInput(d, () => {
+      var r;
+      return (r = d.current) == null ? void 0 : r.click();
+    });
+  }, [a, s]), A(() => {
+    i && d.current && h.length === 0 && (d.current.value = "");
+  }, [h, i]), A(() => {
+    const r = I.current;
+    if (!r) return;
+    const v = (c) => {
+      var b, x;
+      (x = (b = c.dataTransfer) == null ? void 0 : b.types) != null && x.includes("Files") && c.preventDefault();
+    }, m = (c) => {
+      var b, x, L;
+      (x = (b = c.dataTransfer) == null ? void 0 : b.types) != null && x.includes("Files") && c.preventDefault(), (L = c.dataTransfer) != null && L.files && c.dataTransfer.files.length > 0 && z(c.dataTransfer.files);
+    };
+    return r.addEventListener("dragover", v), r.addEventListener("drop", m), () => {
+      r.removeEventListener("dragover", v), r.removeEventListener("drop", m);
+    };
+  }, [z]), A(() => {
+    if (!l) return;
+    const r = (m) => {
+      var c, b;
+      (b = (c = m.dataTransfer) == null ? void 0 : c.types) != null && b.includes("Files") && m.preventDefault();
+    }, v = (m) => {
+      var c, b, x;
+      (b = (c = m.dataTransfer) == null ? void 0 : c.types) != null && b.includes("Files") && m.preventDefault(), (x = m.dataTransfer) != null && x.files && m.dataTransfer.files.length > 0 && z(m.dataTransfer.files);
+    };
+    return document.addEventListener("dragover", r), document.addEventListener("drop", v), () => {
+      document.removeEventListener("dragover", r), document.removeEventListener("drop", v);
+    };
+  }, [z, l]), A(
+    () => () => {
+      if (!a)
+        for (const r of h)
+          r.url && URL.revokeObjectURL(r.url);
+    },
+    [a, h]
+  );
+  const ne = (r) => {
+    r.currentTarget.files && z(r.currentTarget.files);
+  }, se = async (r) => {
+    const m = await (await fetch(r)).blob();
+    return new Promise((c, b) => {
+      const x = new FileReader();
+      x.onloadend = () => c(x.result), x.onerror = b, x.readAsDataURL(m);
+    });
+  }, re = Fe(
+    () => ({
+      files: h.map((r) => ({ ...r, id: r.id })),
+      add: z,
+      remove: R,
+      clear: O,
+      openFileDialog: q,
+      fileInputRef: d
+    }),
+    [h, z, R, O, q]
+  ), ae = (r) => {
+    r.preventDefault();
+    const v = r.currentTarget, m = a ? s.textInput.value : new FormData(v).get("message") || "";
+    a || v.reset(), Promise.all(
+      h.map(async ({ ...c }) => c.url && c.url.startsWith("blob:") ? {
+        ...c,
+        url: await se(c.url)
+      } : c)
+    ).then((c) => {
+      try {
+        const b = f({ text: m, files: c }, r);
+        b instanceof Promise ? b.then(() => {
+          O(), a && s.textInput.clear();
+        }).catch(() => {
+        }) : (O(), a && s.textInput.clear());
+      } catch {
+      }
+    });
+  }, K = /* @__PURE__ */ w(ie, { children: [
+    /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "hidden", ref: k }),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        accept: n,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple: o,
+        onChange: ne,
+        ref: d,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ e("form", { className: N("w-full", t), onSubmit: ae, ...D, children: /* @__PURE__ */ e(Ee, { className: "overflow-hidden", children: y }) })
+  ] });
+  return a ? K : /* @__PURE__ */ e(te.Provider, { value: re, children: K });
+}, tt = ({
+  onChange: t,
+  className: n,
+  placeholder: o = "What would you like to know?",
+  ...l
+}) => {
+  const i = ee(), p = G(), [u, g] = P(!1), f = (s) => {
+    if (s.key === "Enter") {
+      if (u || s.nativeEvent.isComposing || s.shiftKey)
+        return;
+      s.preventDefault();
+      const a = s.currentTarget.form, d = a == null ? void 0 : a.querySelector('button[type="submit"]');
+      if (d != null && d.disabled)
+        return;
+      a == null || a.requestSubmit();
+    }
+    if (s.key === "Backspace" && s.currentTarget.value === "" && p.files.length > 0) {
+      s.preventDefault();
+      const a = p.files.at(-1);
+      a && p.remove(a.id);
+    }
+  }, y = (s) => {
+    var k;
+    const a = (k = s.clipboardData) == null ? void 0 : k.items;
+    if (!a)
+      return;
+    const d = [];
+    for (const I of a)
+      if (I.kind === "file") {
+        const S = I.getAsFile();
+        S && d.push(S);
+      }
+    d.length > 0 && (s.preventDefault(), p.add(d));
+  }, D = i ? {
+    value: i.textInput.value,
+    onChange: (s) => {
+      i.textInput.setInput(s.currentTarget.value), t == null || t(s);
+    }
+  } : {
+    onChange: t
+  };
+  return /* @__PURE__ */ e(
+    Ke,
+    {
+      className: N("field-sizing-content max-h-48 min-h-16", n),
+      name: "message",
+      onCompositionEnd: () => g(!1),
+      onCompositionStart: () => g(!0),
+      onKeyDown: f,
+      onPaste: y,
+      placeholder: o,
+      ...l,
+      ...D
+    }
+  );
+}, nt = ({ className: t, ...n }) => /* @__PURE__ */ e(Q, { align: "block-end", className: N("order-first flex-wrap gap-1", t), ...n }), st = ({ className: t, ...n }) => /* @__PURE__ */ e(Q, { align: "block-end", className: N("justify-between gap-1", t), ...n }), rt = ({ className: t, ...n }) => /* @__PURE__ */ e("div", { className: N("flex items-center gap-1", t), ...n }), H = ({ variant: t = "ghost", className: n, size: o, ...l }) => {
+  const i = o ?? (Be.count(l.children) > 1 ? "sm" : "icon-sm");
+  return /* @__PURE__ */ e(Z, { className: N(n), size: i, type: "button", variant: t, ...l });
+}, at = (t) => /* @__PURE__ */ e(ue, { ...t }), ot = ({ className: t, children: n, ...o }) => /* @__PURE__ */ e(de, { asChild: !0, children: /* @__PURE__ */ e(H, { className: t, ...o, children: n ?? /* @__PURE__ */ e(De, { className: "size-4" }) }) }), it = ({ className: t, ...n }) => /* @__PURE__ */ e(pe, { align: "start", className: N(t), ...n }), lt = ({
+  className: t,
+  variant: n = "default",
+  size: o = "icon-sm",
+  status: l,
+  children: i,
+  ...p
+}) => {
+  let u = /* @__PURE__ */ e(Te, { className: "size-4" });
+  return l === "submitted" ? u = /* @__PURE__ */ e(Ae, { className: "size-4 animate-spin" }) : l === "streaming" ? u = /* @__PURE__ */ e(Ce, { className: "size-4" }) : l === "error" && (u = /* @__PURE__ */ e(Y, { className: "size-4" })), /* @__PURE__ */ e(
+    Z,
+    {
+      "aria-label": "Submit",
+      className: N(t),
+      size: o,
+      type: "submit",
+      variant: n,
+      ...p,
+      children: i ?? u
+    }
+  );
+}, ct = ({
+  className: t,
+  textareaRef: n,
+  onTranscriptionChange: o,
+  ...l
+}) => {
+  const [i, p] = P(!1), [u, g] = P(null), f = M(null);
+  A(() => {
+    if (typeof window < "u" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window)) {
+      const D = window.SpeechRecognition || window.webkitSpeechRecognition, s = new D();
+      s.continuous = !0, s.interimResults = !0, s.lang = "en-US", s.onstart = () => {
+        p(!0);
+      }, s.onend = () => {
+        p(!1);
+      }, s.onresult = (a) => {
+        var k;
+        let d = "";
+        for (let I = a.resultIndex; I < a.results.length; I++) {
+          const S = a.results[I];
+          S.isFinal && (d += ((k = S[0]) == null ? void 0 : k.transcript) ?? "");
+        }
+        if (d && (n != null && n.current)) {
+          const I = n.current, S = I.value, C = S + (S ? " " : "") + d;
+          I.value = C, I.dispatchEvent(new Event("input", { bubbles: !0 })), o == null || o(C);
+        }
+      }, s.onerror = (a) => {
+        console.error("Speech recognition error:", a.error), p(!1);
+      }, f.current = s, g(s);
+    }
+    return () => {
+      f.current && f.current.stop();
+    };
+  }, [n, o]);
+  const y = F(() => {
+    u && (i ? u.stop() : u.start());
+  }, [u, i]);
+  return /* @__PURE__ */ e(
+    H,
+    {
+      className: N(
+        "relative transition-all duration-200",
+        i && "animate-pulse bg-accent text-accent-foreground",
+        t
+      ),
+      disabled: !u,
+      onClick: y,
+      ...l,
+      children: /* @__PURE__ */ e(Pe, { className: "size-4" })
+    }
+  );
+}, ut = ({ openDelay: t = 0, closeDelay: n = 0, ...o }) => /* @__PURE__ */ e(fe, { closeDelay: n, openDelay: t, ...o }), dt = ({ align: t = "start", ...n }) => /* @__PURE__ */ e(he, { align: t, ...n }), pt = (t) => /* @__PURE__ */ e(ge, { ...t }), mt = (t) => /* @__PURE__ */ e(ve, { ...t }), ft = ({
+  className: t,
+  children: n,
+  title: o = "Model Selector",
+  ...l
+}) => /* @__PURE__ */ w(be, { className: N("p-0", t), ...l, children: [
+  /* @__PURE__ */ e(xe, { className: "sr-only", children: o }),
+  /* @__PURE__ */ e(we, { className: "**:data-[slot=command-input-wrapper]:h-auto", children: n })
+] }), ht = ({ className: t, ...n }) => /* @__PURE__ */ e(Ne, { className: N("h-auto py-3.5", t), ...n }), gt = (t) => /* @__PURE__ */ e(Ie, { ...t }), vt = (t) => /* @__PURE__ */ e(ye, { ...t }), bt = (t) => /* @__PURE__ */ e(Se, { ...t }), xt = ({ provider: t, className: n, ...o }) => /* @__PURE__ */ e(
+  "img",
+  {
+    ...o,
+    alt: `${t} logo`,
+    className: N("size-3 dark:invert", n),
+    height: 12,
+    src: `https://models.dev/logos/${t}.svg`,
+    width: 12
+  }
+), wt = ({ className: t, ...n }) => /* @__PURE__ */ e("span", { className: N("flex-1 truncate text-left", t), ...n }), Nt = ({
+  selectedModel: t,
+  onModelChange: n,
+  disabled: o = !1
+}) => {
+  const [l, i] = P(!1), [p, u] = P(""), g = Ve(t) || _(), y = We.filter(
+    (s) => s.name.toLowerCase().includes(p.toLowerCase()) || s.provider.toLowerCase().includes(p.toLowerCase())
+  ).reduce(
+    (s, a) => (s[a.provider] || (s[a.provider] = []), s[a.provider].push(a), s),
+    {}
+  ), D = (s) => {
+    n(s), i(!1), u("");
+  };
+  return /* @__PURE__ */ w(pt, { open: l, onOpenChange: i, children: [
+    /* @__PURE__ */ e(mt, { asChild: !0, children: /* @__PURE__ */ w(V, { variant: "outline", size: "sm", disabled: o, className: "h-8 gap-1 px-2 text-xs", children: [
+      /* @__PURE__ */ e(Le, { size: 14 }),
+      /* @__PURE__ */ e("span", { className: "max-w-20 truncate", children: g.name })
+    ] }) }),
+    /* @__PURE__ */ w(ft, { className: "w-96 p-0", children: [
+      /* @__PURE__ */ e(ht, { placeholder: "Search models...", value: p, onValueChange: u }),
+      /* @__PURE__ */ e(gt, { children: Object.entries(y).map(([s, a]) => /* @__PURE__ */ e(vt, { heading: s.charAt(0).toUpperCase() + s.slice(1), children: a.map((d) => /* @__PURE__ */ w(
+        bt,
+        {
+          value: d.id,
+          onSelect: () => D(d.id),
+          className: "flex cursor-pointer items-center gap-2 p-2",
+          children: [
+            /* @__PURE__ */ e(xt, { provider: d.provider }),
+            /* @__PURE__ */ w("div", { className: "flex flex-1 flex-col", children: [
+              /* @__PURE__ */ e(wt, { children: d.name }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: d.description })
+            ] }),
+            t === d.id && /* @__PURE__ */ e("div", { className: "h-2 w-2 rounded-full bg-blue-500" })
+          ]
+        },
+        d.id
+      )) }, s)) })
+    ] })
+  ] });
+}, X = "chai-ai-selected-model", At = ({
+  input: t,
+  setInput: n,
+  onSend: o,
+  onStop: l,
+  isLoading: i,
+  disabled: p,
+  selectedLang: u,
+  selectedModel: g = _().id,
+  onModelChange: f
+}) => {
+  const { t: y } = _e(), [D, s] = P(g), [a, d] = P(null), k = M(null), [I, S] = P(!1);
+  return A(() => {
+    if (!u) {
+      const h = localStorage.getItem(X);
+      if (h)
+        s(h), f == null || f(h);
+      else {
+        const T = _().id;
+        s(T), f == null || f(T);
+      }
+    }
+  }, [u, f]), /* @__PURE__ */ e("div", { className: "relative", children: /* @__PURE__ */ e("div", { className: "border-gray-20 rounded-lg border", children: /* @__PURE__ */ w(et, { onSubmit: (h) => {
+    var U;
+    const T = h.files.find((z) => {
+      var R;
+      return (R = z.mediaType) == null ? void 0 : R.startsWith("image/");
+    }), j = (T == null ? void 0 : T.url) || a;
+    o((U = h.text) == null ? void 0 : U.trim(), void 0, j, D), d(null);
+  }, accept: "image/*", className: "flex h-auto w-full flex-col", children: [
+    /* @__PURE__ */ e(nt, { className: "p-0", children: /* @__PURE__ */ e(Qe, { className: "pb-0", children: (h) => /* @__PURE__ */ e(Je, { className: "text-xs", data: h }) }) }),
+    /* @__PURE__ */ e(
+      tt,
+      {
+        ref: k,
+        value: t,
+        onChange: (h) => n(h.target.value),
+        placeholder: y(u ? "Ask to update content" : "Ask me anything..."),
+        disabled: i,
+        className: "max-h-[200px] min-h-[60px] w-full",
+        rows: 3
+      }
+    ),
+    /* @__PURE__ */ w(st, { children: [
+      u ? /* @__PURE__ */ e("div", {}) : /* @__PURE__ */ w(rt, { children: [
+        /* @__PURE__ */ w(at, { children: [
+          /* @__PURE__ */ e(ot, { disabled: i, children: /* @__PURE__ */ e(Re, { size: 16 }) }),
+          /* @__PURE__ */ e(it, { children: /* @__PURE__ */ e(Ze, {}) })
+        ] }),
+        /* @__PURE__ */ e(
+          ct,
+          {
+            textareaRef: k,
+            onTranscriptionChange: n,
+            disabled: i
+          }
+        ),
+        /* @__PURE__ */ e(
+          Nt,
+          {
+            selectedModel: D,
+            onModelChange: (h) => {
+              s(h), f == null || f(h), localStorage.setItem(X, h);
+            },
+            disabled: i
+          }
+        ),
+        /* @__PURE__ */ w(
+          H,
+          {
+            className: "hidden",
+            size: "sm",
+            onClick: () => S(!I),
+            variant: I ? "default" : "ghost",
+            children: [
+              /* @__PURE__ */ e(Me, { size: 16 }),
+              /* @__PURE__ */ e("span", { children: "Search" })
+            ]
+          }
+        )
+      ] }),
+      i ? /* @__PURE__ */ w(
+        "button",
+        {
+          onClick: l,
+          className: "z-50 flex items-center gap-x-1 rounded-md bg-red-500 p-1.5 text-white transition-colors hover:bg-red-600",
+          title: y("Stop generation"),
+          children: [
+            /* @__PURE__ */ e(je, { size: 16 }),
+            " ",
+            /* @__PURE__ */ e("span", { className: "text-xs", children: y("Stop") })
+          ]
+        }
+      ) : /* @__PURE__ */ e(lt, { disabled: !t.trim() || p, children: /* @__PURE__ */ e(Ue, { size: 16 }) })
+    ] })
+  ] }) }) });
+};
+export {
+  At as default
+};