import { jsxs as d, jsx as r } from "react/jsx-runtime";
import { Paperclip as B, Square as I, Mic as F, Loader2 as O, MoveUp as G, ChevronDown as J, Check as Q } from "lucide-react";
import { useState as R, useRef as M, useEffect as T } from "react";
import { createPortal as X } from "react-dom";
import { useAudioRecorder as Y } from "../../hooks/useAudioRecorder.es.js";
import { useModels as Z } from "../../hooks/use-models.es.js";
import { cn as E } from "../../utils/tailwindUtil.es.js";
function de({
  input: p,
  inputFileAccept: u = ".png,.jpg,.jpeg,.pdf,.docx",
  setInput: x,
  textToSpeechVoice: s,
  handleSubmit: k,
  fileInput: h,
  setFileInput: f,
  handleFileSelect: i,
  isLoading: a = !1,
  onCancel: y,
  filePreview: b
}) {
  const l = (p.trim().length > 0 || h.length > 0) && !a, [g, w] = R(!1), n = M(null), { models: C, selectedModel: t, setSelectedModel: v } = Z(), P = C.map((e) => ({ id: e.id, label: e.name || e.id })), { isRecording: z, recordingTime: H, isTranscribing: S, startRecording: K, stopRecording: W, transcribeAudio: $ } = Y(), L = async () => {
    if (z) {
      const e = await W();
      if (e)
        try {
          const c = await $(e, s?.apiKey || "", s?.apiUrl || "", s?.model || "Systran/faster-whisper-small");
          c && (x(c), n.current && setTimeout(() => {
            if (n.current) {
              n.current.style.height = "auto";
              const N = 300;
              n.current.style.height = Math.min(n.current.scrollHeight, N) + "px";
            }
          }, 0));
        } catch {
          alert("Failed to transcribe audio. Please try again.");
        }
    } else
      await K();
  };
  return /* @__PURE__ */ d(
    "form",
    {
      onSubmit: (e) => {
        k(e), n.current && (n.current.style.height = "auto");
      },
      className: `relative flex flex-col  border rounded-xl m-2 bg-zinc-900 border-zinc-800 transition-colors ${g ? "border-blue-500 bg-zinc-800" : ""}`,
      onDragOver: (e) => {
        e.preventDefault(), e.stopPropagation(), w(!0);
      },
      onDragLeave: (e) => {
        e.preventDefault(), e.stopPropagation(), w(!1);
      },
      onDrop: async (e) => {
        e.preventDefault(), e.stopPropagation(), w(!1);
        const c = Array.from(e.dataTransfer.files);
        if (c.length === 0) return;
        const N = c.filter((o) => u ? u.split(",").map((m) => m.trim()).some((m) => m.startsWith(".") ? o.name.toLowerCase().endsWith(m.toLowerCase()) : o.type.match(m.replace("*", ".*"))) : !0);
        if (N.length === 0) return;
        const U = await Promise.all(
          N.map(async (o) => {
            const j = await new Promise((m, q) => {
              const D = new FileReader();
              D.onload = () => {
                const A = D.result;
                m(A.split(",")[1]);
              }, D.onerror = q, D.readAsDataURL(o);
            });
            return {
              fileName: o.name,
              fileType: o.type,
              file: o,
              fileData: j
            };
          })
        );
        f((o) => [...o, ...U]);
      },
      children: [
        b && b(h, f),
        /* @__PURE__ */ r(
          "textarea",
          {
            ref: n,
            placeholder: "Type your message...",
            value: p,
            onChange: (e) => {
              x(e.target.value);
              const c = 300;
              e.target.style.height = "auto", e.target.style.height = Math.min(e.target.scrollHeight, c) + "px";
            },
            onKeyDown: (e) => {
              e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.nativeEvent.isComposing && (e.preventDefault(), l && e.currentTarget.form?.requestSubmit());
            },
            disabled: a,
            className: "w-full field-sizing-content resize-none px-2.5 pt-2.5 bg-transparent text-white placeholder-zinc-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto thread-scrollbar",
            rows: 1
          }
        ),
        /* @__PURE__ */ d("div", { className: "flex justify-between items-center px-1 pb-2", children: [
          /* @__PURE__ */ d("div", { className: "flex gap-1 m-2", children: [
            /* @__PURE__ */ r(
              "label",
              {
                htmlFor: "file-input",
                className: `cursor-pointer ${a ? "opacity-50 cursor-not-allowed" : ""}`,
                children: /* @__PURE__ */ r(
                  B,
                  {
                    size: 30,
                    className: "text-zinc-400 hover:text-white hover:bg-zinc-800 rounded p-1 transition-colors"
                  }
                )
              }
            ),
            /* @__PURE__ */ r(
              "input",
              {
                id: "file-input",
                type: "file",
                multiple: !0,
                disabled: a,
                accept: u,
                className: "hidden",
                onChange: i
              }
            ),
            s?.apiKey && s?.apiUrl && s?.model && /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: L,
                disabled: a || S,
                className: `${z ? "text-red-500 hover:bg-red-900/20" : "text-zinc-400 hover:text-white hover:bg-zinc-800"} rounded p-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed`,
                title: z ? `Recording... ${H}s` : "Record audio",
                children: z ? /* @__PURE__ */ r(I, { size: 24, className: "animate-pulse" }) : /* @__PURE__ */ r(F, { size: 24 })
              }
            )
          ] }),
          /* @__PURE__ */ d("div", { className: "flex gap-2 items-center", children: [
            S && /* @__PURE__ */ d("span", { className: "text-xs text-zinc-400 flex items-center gap-1", children: [
              /* @__PURE__ */ r(O, { size: 14, className: "animate-spin" }),
              "Transcribing..."
            ] }),
            P.length > 1 && /* @__PURE__ */ r(
              _,
              {
                items: P,
                selected: t,
                onSelect: v,
                placeholder: "Model",
                maxWidth: 160
              }
            ),
            a && y && /* @__PURE__ */ r(
              "button",
              {
                type: "button",
                onClick: y,
                className: "px-3 py-1 text-xs text-zinc-400 hover:text-white hover:bg-zinc-800 rounded transition-colors",
                children: "Cancel"
              }
            ),
            /* @__PURE__ */ r(
              "button",
              {
                type: "submit",
                disabled: !l,
                className: "focus:outline-none transition-all bg-zinc-300 border rounded-full p-1 mx-2 cursor-pointer",
                style: { border: "none" },
                children: a ? /* @__PURE__ */ r(O, { size: 24, className: "animate-spin text-black p-1" }) : /* @__PURE__ */ r(G, { size: 24, className: "text-black p-1" })
              }
            )
          ] })
        ] })
      ]
    }
  );
}
function _({
  items: p,
  selected: u,
  onSelect: x,
  placeholder: s,
  maxWidth: k = 160,
  maxLength: h = 20,
  dropDown: f = !1
}) {
  const [i, a] = R(!1), [y, b] = R({}), l = M(null), g = M(null);
  T(() => {
    if (!i) return;
    const t = (v) => {
      l.current && !l.current.contains(v.target) && g.current && !g.current.contains(v.target) && a(!1);
    };
    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
  }, [i]), T(() => {
    if (!i || !l.current) return;
    const t = l.current.getBoundingClientRect();
    b(f ? {
      position: "fixed",
      top: t.bottom + 4,
      right: window.innerWidth - t.right
    } : {
      position: "fixed",
      bottom: window.innerHeight - t.top + 4,
      right: window.innerWidth - t.right
    });
  }, [i, f]);
  const n = p.find((t) => t.id === u)?.label || s, C = n.length > h ? `${n.slice(0, Math.max(0, h - 1))}…` : n;
  return /* @__PURE__ */ d("div", { className: "relative", children: [
    /* @__PURE__ */ d(
      "button",
      {
        ref: l,
        type: "button",
        onClick: () => a((t) => !t),
        className: "flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white",
        children: [
          /* @__PURE__ */ r("span", { className: "truncate", style: { maxWidth: k }, title: n, children: C }),
          /* @__PURE__ */ r(J, { className: E("size-3 shrink-0 transition-transform", i && "rotate-180") })
        ]
      }
    ),
    i && X(
      /* @__PURE__ */ r(
        "div",
        {
          ref: g,
          style: y,
          className: "z-[9999] min-w-[14rem] max-h-[19rem] overflow-y-auto rounded-xl border border-zinc-700 bg-zinc-900 text-white p-1 shadow-lg [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-600 [&::-webkit-scrollbar-track]:bg-transparent",
          children: p.map((t) => /* @__PURE__ */ d(
            "button",
            {
              type: "button",
              onClick: () => {
                x(t.id), a(!1);
              },
              className: E(
                "flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-white",
                t.id === u && "bg-zinc-800 font-medium text-white"
              ),
              children: [
                /* @__PURE__ */ r("span", { className: "truncate", children: t.label }),
                t.id === u && /* @__PURE__ */ r(Q, { className: "size-4 shrink-0 text-zinc-300" })
              ]
            },
            t.id
          ))
        }
      ),
      document.body
    )
  ] });
}
export {
  de as default
};
//# sourceMappingURL=ChatInput.es.js.map
