langgraph-ui-components 0.0.24 → 0.0.27

package/dist/components/messages/AgentMessage.es.js

@@ -1,149 +1,243 @@
-import { jsxs as g, jsx as t, Fragment as u } from "react/jsx-runtime";
-import { cn as w } from "../../utils/tailwindUtil.es.js";
-import { getContentString as A } from "../../utils/utils.es.js";
-import { BotMessageSquare as b, Loader2 as T, LoaderCircle as z, Sparkles as C, ChevronRight as v } from "lucide-react";
-import R, { useState as _, useEffect as M } from "react";
-import { AgentMarkdown as x } from "../ui/AgentMarkdown.es.js";
-import { BranchSwitcher as B } from "./BranchSwitcher.es.js";
-import { MessageActions as F } from "./MessageActions.es.js";
-function j(n) {
-  if (!n) return null;
-  const e = n.additional_kwargs;
+import { jsxs as m, jsx as s, Fragment as F } from "react/jsx-runtime";
+import { cn as O } from "../../utils/tailwindUtil.es.js";
+import { getContentString as q } from "../../utils/utils.es.js";
+import { BotMessageSquare as J, LoaderCircle as S, Sparkles as W, ChevronRight as D, Wrench as G } from "lucide-react";
+import H, { useState as Q, useEffect as U } from "react";
+import { AgentMarkdown as $ } from "../ui/AgentMarkdown.es.js";
+import { BranchSwitcher as V } from "./BranchSwitcher.es.js";
+import { MessageActions as X } from "./MessageActions.es.js";
+function Y(t) {
+  if (!t) return null;
+  const e = t.additional_kwargs;
   return e && typeof e.reasoning_content == "string" && e.reasoning_content.length > 0 ? e.reasoning_content : null;
 }
-function p({ text: n, isStreaming: e, fontSize: l }) {
-  const [i, a] = _(!1);
-  return M(() => {
-    a(!!e);
-  }, [e]), /* @__PURE__ */ g("div", { className: "my-1", children: [
-    /* @__PURE__ */ g(
+function Z({
+  reasoningText: t,
+  toolStatuses: e,
+  isStreaming: n,
+  fontSize: p
+}) {
+  const [u, a] = Q(!1);
+  U(() => {
+    a(!!n);
+  }, [n]);
+  const y = e && e.length > 0, b = !!t && t.length > 0;
+  return !y && !b && !n ? null : /* @__PURE__ */ m("div", { className: "my-1", children: [
+    /* @__PURE__ */ m(
       "button",
       {
         type: "button",
-        onClick: () => a((h) => !h),
+        onClick: () => a((f) => !f),
         className: "inline-flex items-center gap-1.5 text-xs text-zinc-400/80 transition-colors hover:text-zinc-300",
         children: [
-          e ? /* @__PURE__ */ t(z, { className: "size-3 animate-spin" }) : /* @__PURE__ */ t(C, { className: "size-3" }),
-          /* @__PURE__ */ t("span", { children: e ? "Thinking" : "Thought" }),
-          /* @__PURE__ */ t(
-            v,
+          n ? /* @__PURE__ */ s(S, { className: "size-3 animate-spin" }) : /* @__PURE__ */ s(W, { className: "size-3" }),
+          /* @__PURE__ */ s("span", { children: n ? "Thinking" : "Thought" }),
+          /* @__PURE__ */ s(
+            D,
             {
-              className: w(
+              className: O(
                 "size-3 transition-transform duration-200",
-                i && "rotate-90"
+                u && "rotate-90"
               )
             }
           )
         ]
       }
     ),
-    i && /* @__PURE__ */ t("div", { className: "mt-1.5 border-l-2 border-white/10 pl-4 text-sm text-zinc-300", children: /* @__PURE__ */ t(x, { fontSize: l, children: n }) })
+    u && /* @__PURE__ */ m("div", { className: "mt-1.5 border-l-2 border-white/10 pl-4 space-y-1", children: [
+      y && e.map((f) => /* @__PURE__ */ m("div", { className: "flex items-center gap-2 text-sm text-zinc-300 py-0.5", children: [
+        !f.isCompleted && /* @__PURE__ */ s(S, { className: "size-3.5 animate-spin text-zinc-400" }),
+        /* @__PURE__ */ s(G, { className: "size-3.5 text-zinc-500" }),
+        /* @__PURE__ */ s("span", { children: f.label })
+      ] }, f.key)),
+      b && /* @__PURE__ */ s("div", { className: "text-sm text-zinc-300", children: /* @__PURE__ */ s($, { fontSize: p, children: t }) })
+    ] })
   ] });
 }
-function I(n, e, l) {
-  if (!n) return null;
-  const i = n.content, a = [], h = j(n);
-  if (h) {
-    const r = typeof i == "string" ? i.length > 0 : Array.isArray(i) && i.some(
-      (s) => s.type === "text" && typeof s.text == "string" && s.text.length > 0
-    );
-    a.push(
-      /* @__PURE__ */ t(
-        p,
-        {
-          text: h,
-          isStreaming: e && !r,
-          fontSize: l
-        },
-        "kwargs-reasoning"
-      )
-    );
+function P(t) {
+  if (!t || typeof t != "object") return null;
+  const e = t, n = typeof e.visible == "boolean" ? e.visible : typeof e.show == "boolean" ? e.show : typeof e.display == "boolean" ? e.display : typeof e.hidden == "boolean" ? !e.hidden : !0;
+  return {
+    id: typeof e.id == "string" ? e.id : void 0,
+    name: typeof e.name == "string" ? e.name : void 0,
+    label: typeof e.label == "string" ? e.label : void 0,
+    event: typeof e.event == "string" ? e.event : void 0,
+    visible: n
+  };
+}
+function ee(t) {
+  if (!t) return [];
+  const e = t.additional_kwargs;
+  return !e || !Array.isArray(e.tool_status) ? [] : e.tool_status.map(P).filter((n) => n !== null);
+}
+function te(t) {
+  if (!t) return !1;
+  const e = t.additional_kwargs;
+  return e ? Object.prototype.hasOwnProperty.call(e, "tool_status") : !1;
+}
+function z(t) {
+  return t ? t.toLowerCase().replace(/\s+/g, " ").replace(/\s*event:\s*metadata\s*$/i, "").trim() : "";
+}
+function ne(t) {
+  return !(t.visible === !1 || z(t.label).length === 0 || t.event?.toLowerCase() === "metadata" || /\bevent:\s*metadata\b/i.test(t.label ?? ""));
+}
+function oe(t, e) {
+  if (!e) return t;
+  if (typeof e == "string") {
+    const n = e.trim();
+    return n.length === 0 ? t : `${t} ${n.slice(0, 80)}${n.length > 80 ? "..." : ""}`;
   }
-  if (typeof i == "string")
-    return i.length > 0 && a.push(
-      /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ t(x, { fontSize: l, children: i }) }, "text-content")
-    ), a.length > 0 ? /* @__PURE__ */ t(u, { children: a }) : null;
-  if (!Array.isArray(i)) return null;
-  const d = i;
-  let o = "", c = 0;
-  const f = () => {
-    o.length > 0 && (a.push(
-      /* @__PURE__ */ t("div", { className: "py-1", children: /* @__PURE__ */ t(x, { fontSize: l, children: o }) }, `text-${c}`)
-    ), o = "", c++);
+  if (typeof e == "object")
+    try {
+      const n = JSON.stringify(e);
+      return `${t} ${n.length > 80 ? `${n.slice(0, 80)}...` : n}`;
+    } catch {
+      return t;
+    }
+  return t;
+}
+function se(t, e, n, p) {
+  if (!t || t.length === 0) return null;
+  const u = t, a = u.filter((o) => o.type === "tool"), y = u.some((o) => te(o)), b = new Set(
+    a.map((o) => o.tool_call_id).filter((o) => typeof o == "string" && o.length > 0)
+  ), f = new Set(
+    a.map((o) => o.name).filter((o) => typeof o == "string" && o.length > 0)
+  ), d = [], h = [], g = [], x = /* @__PURE__ */ new Set();
+  let r = 0;
+  const I = (o) => {
+    if (e)
+      for (const i of ee(o)) {
+        if (!ne(i)) continue;
+        const c = z(i.label) || z(i.name) || "tool";
+        if (x.has(c)) continue;
+        x.add(c);
+        const w = i.label ?? i.name ?? "Running tool", k = (i.id ? b.has(i.id) : !1) || (i.name ? f.has(i.name) : !1) || !n;
+        d.push({ key: c, label: w, isCompleted: k });
+      }
   };
-  for (let r = 0; r < d.length; r++) {
-    const s = d[r];
-    if (s.type === "text" && typeof s.text == "string")
-      o += s.text;
-    else if (s.type === "reasoning" && typeof s.reasoning == "string" || s.type === "thinking" && typeof s.thinking == "string") {
-      f();
-      const k = s.reasoning ?? s.thinking, y = d.slice(r + 1).some(
-        (m) => m.type === "text" && typeof m.text == "string" && m.text.length > 0
-      ), N = e && !y;
-      a.push(
-        /* @__PURE__ */ t(p, { text: k, isStreaming: N, fontSize: l }, `thinking-${c}`)
-      ), c++;
+  for (const o of u) {
+    if (o.type !== "ai") continue;
+    const i = o.content, c = Y(o);
+    if (I(o), typeof i == "string") {
+      c ? h.push(c) : i.length > 0 && (g.push(
+        /* @__PURE__ */ s("div", { className: "py-1", children: /* @__PURE__ */ s($, { fontSize: p, children: i }) }, `text-content-${o.id ?? r}`)
+      ), r++);
+      continue;
+    }
+    if (!Array.isArray(i)) {
+      c && h.push(c);
+      continue;
+    }
+    const w = i;
+    let k = "", K = !1;
+    const _ = () => {
+      k.length > 0 && (g.push(
+        /* @__PURE__ */ s("div", { className: "py-1", children: /* @__PURE__ */ s($, { fontSize: p, children: k }) }, `text-${o.id ?? r}-${r}`)
+      ), k = "", r++);
+    };
+    for (let v = 0; v < w.length; v++) {
+      const l = w[v];
+      if (l.type === "text" && typeof l.text == "string") {
+        k += l.text;
+        continue;
+      }
+      if (l.type === "reasoning" && typeof l.reasoning == "string" || l.type === "thinking" && typeof l.thinking == "string") {
+        _(), K = !0;
+        const T = l.reasoning ?? l.thinking;
+        h.push(T);
+        continue;
+      }
+      if (e && !y && l.type === "tool_use") {
+        _();
+        const T = typeof l.id == "string" ? l.id : void 0, j = typeof l.name == "string" ? l.name : "tool", C = z(j) || `tool-${v}`;
+        if (!x.has(C)) {
+          x.add(C);
+          const L = oe(j, l.input), E = T ? b.has(T) : !n;
+          d.push({ key: C, label: L, isCompleted: E });
+        }
+      }
     }
+    !K && c ? (k = "", h.push(c)) : _();
   }
-  return f(), a.length > 0 ? /* @__PURE__ */ t(u, { children: a }) : null;
+  if (e && !n && !y && d.length === 0 && g.length === 0 && a.length > 0)
+    for (const o of a)
+      d.push({
+        key: `tool-msg-${o.id ?? r}`,
+        label: "Tool call completed",
+        isCompleted: !0
+      }), r++;
+  const N = [], M = g.length > 0, R = h.join(`
+
+`), B = e && d.length > 0 || R.length > 0, A = !!n && !M;
+  return (B || A) && N.push(
+    /* @__PURE__ */ s(
+      Z,
+      {
+        reasoningText: R || void 0,
+        toolStatuses: e ? d : void 0,
+        isStreaming: A,
+        fontSize: p
+      },
+      "agent-activity"
+    )
+  ), N.push(...g), N.length > 0 ? /* @__PURE__ */ s(F, { children: N }) : null;
 }
-function L({
-  agentName: n,
+function ie({
+  agentName: t,
   fontSize: e,
-  message: l,
-  isStreaming: i = !1,
-  onRegenerate: a,
-  feedback: h,
-  onFeedback: d,
-  branch: o,
-  branchOptions: c,
-  onBranchSelect: f
+  message: n,
+  groupedMessages: p,
+  showToolActivity: u = !0,
+  isStreaming: a = !1,
+  onRegenerate: y,
+  feedback: b,
+  onFeedback: f,
+  branch: d,
+  branchOptions: h,
+  onBranchSelect: g
 }) {
-  const r = A(l?.content), s = I(l, i, e);
-  return /* @__PURE__ */ g("div", { className: "agent-message flex flex-col gap-1 w-full group", children: [
-    /* @__PURE__ */ g("div", { className: "flex items-center gap-3 w-full", children: [
-      /* @__PURE__ */ t(
+  const x = q(n?.content), r = se(p ?? [n], u, a, e);
+  return /* @__PURE__ */ m("div", { className: "agent-message flex flex-col gap-1 w-full group", children: [
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-3 w-full", children: [
+      /* @__PURE__ */ s(
         "div",
         {
           className: "rounded-full size-8 shrink-0 bg-zinc-800 flex items-center justify-center p-2",
           "data-alt": "AI Avatar",
-          children: /* @__PURE__ */ t(b, { className: "text-xs", color: "white" })
+          children: /* @__PURE__ */ s(J, { className: "text-xs", color: "white" })
         }
       ),
-      /* @__PURE__ */ t("span", { className: "text-zinc-500 text-sm", children: n || "Agent" })
+      /* @__PURE__ */ s("span", { className: "text-zinc-500 text-sm", children: t || "Agent" })
     ] }),
-    /* @__PURE__ */ g("div", { className: "flex flex-1 flex-col gap-1 items-start min-w-0", children: [
-      /* @__PURE__ */ t("div", { className: "text-content text-foreground", style: e ? { fontSize: e } : void 0, children: s || /* @__PURE__ */ g(u, { children: [
-        /* @__PURE__ */ g("div", { className: "flex items-center gap-2 text-zinc-500", children: [
-          /* @__PURE__ */ t(T, { className: "animate-spin", size: 16 }),
-          /* @__PURE__ */ t("span", { children: "Thinking..." })
-        ] }),
-        i && r && /* @__PURE__ */ t("span", { className: "inline-block w-2 h-4 ml-1 bg-zinc-400 animate-pulse" })
+    /* @__PURE__ */ m("div", { className: "flex flex-1 flex-col gap-1 items-start min-w-0", children: [
+      /* @__PURE__ */ s("div", { className: "text-content text-foreground", style: e ? { fontSize: e } : void 0, children: r || /* @__PURE__ */ m(F, { children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 text-zinc-500", children: /* @__PURE__ */ s("span", { children: "Thinking..." }) }),
+        a && x && /* @__PURE__ */ s("span", { className: "inline-block w-2 h-4 ml-1 bg-zinc-400 animate-pulse" })
       ] }) }),
-      !i && o && c && f && c.length > 1 && /* @__PURE__ */ t(
-        B,
+      !a && d && h && g && h.length > 1 && /* @__PURE__ */ s(
+        V,
         {
-          branch: o,
-          branchOptions: c,
-          onSelect: f,
-          isLoading: i
+          branch: d,
+          branchOptions: h,
+          onSelect: g,
+          isLoading: a
         }
       ),
-      !i && r && /* @__PURE__ */ t(
-        F,
+      !a && x && /* @__PURE__ */ s(
+        X,
         {
-          message: l,
-          onRegenerate: a,
-          feedback: h,
-          onFeedback: d,
+          message: n,
+          onRegenerate: y,
+          feedback: b,
+          onFeedback: f,
           className: ""
         }
       )
     ] })
   ] });
 }
-const O = R.memo(L, (n, e) => e.isStreaming ? !1 : n.message.id === e.message.id && n.isStreaming === e.isStreaming && n.feedback === e.feedback && n.onRegenerate === e.onRegenerate && n.onFeedback === e.onFeedback && n.branch === e.branch && n.branchOptions?.length === e.branchOptions?.length && n.onBranchSelect === e.onBranchSelect);
+const ge = H.memo(ie, (t, e) => e.isStreaming ? !1 : t.message.id === e.message.id && t.groupedMessages?.length === e.groupedMessages?.length && t.showToolActivity === e.showToolActivity && t.isStreaming === e.isStreaming && t.feedback === e.feedback && t.onRegenerate === e.onRegenerate && t.onFeedback === e.onFeedback && t.branch === e.branch && t.branchOptions?.length === e.branchOptions?.length && t.onBranchSelect === e.onBranchSelect);
 export {
-  O as default
+  ge as default
 };
 //# sourceMappingURL=AgentMessage.es.js.map

package/dist/components/messages/AgentMessage.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentMessage.es.js","sources":["../../../src/components/messages/AgentMessage.tsx"],"sourcesContent":["import { cn } from \"@/utils/tailwindUtil\";\nimport { getContentString } from \"@/utils/utils\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport { BotMessageSquare, ChevronRight, Loader2, LoaderCircle, Sparkles } from \"lucide-react\";\nimport React, { useEffect, useState } from \"react\";\nimport { AgentMarkdown } from \"../ui/AgentMarkdown\";\nimport { BranchSwitcher } from \"./BranchSwitcher\";\nimport { MessageActions, type MessageFeedback } from \"./MessageActions\";\n\nfunction getReasoningFromKwargs(message: Message | undefined): string | null {\n  if (!message) return null;\n  const ak = (message as Record<string, unknown>).additional_kwargs as\n    | Record<string, unknown>\n    | undefined;\n  if (\n    ak &&\n    typeof ak.reasoning_content === \"string\" &&\n    ak.reasoning_content.length > 0\n  ) {\n    return ak.reasoning_content;\n  }\n  return null;\n}\n\nfunction InlineThinking({ text, isStreaming, fontSize }: { text: string; isStreaming?: boolean; fontSize?: string }) {\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    setExpanded(!!isStreaming);\n  }, [isStreaming]);\n\n  return (\n    <div className=\"my-1\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((p) => !p)}\n        className=\"inline-flex items-center gap-1.5 text-xs text-zinc-400/80 transition-colors hover:text-zinc-300\"\n      >\n        {isStreaming ? (\n          <LoaderCircle className=\"size-3 animate-spin\" />\n        ) : (\n          <Sparkles className=\"size-3\" />\n        )}\n        <span>{isStreaming ? \"Thinking\" : \"Thought\"}</span>\n        <ChevronRight\n          className={cn(\n            \"size-3 transition-transform duration-200\",\n            expanded && \"rotate-90\",\n          )}\n        />\n      </button>\n      {expanded && (\n        <div className=\"mt-1.5 border-l-2 border-white/10 pl-4 text-sm text-zinc-300\">\n          <AgentMarkdown fontSize={fontSize}>{text}</AgentMarkdown>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction renderContentInline(message: Message | undefined, isActivelyStreaming?: boolean, fontSize?: string) {\n  if (!message) return null;\n  const content = message.content;\n  const parts: React.ReactNode[] = [];\n\n  const kwargsReasoning = getReasoningFromKwargs(message);\n  if (kwargsReasoning) {\n    const hasTextContent =\n      typeof content === \"string\"\n        ? content.length > 0\n        : Array.isArray(content) &&\n          (content as Record<string, unknown>[]).some(\n            (b) =>\n              b.type === \"text\" &&\n              typeof b.text === \"string\" &&\n              (b.text as string).length > 0,\n          );\n    parts.push(\n      <InlineThinking\n        key=\"kwargs-reasoning\"\n        text={kwargsReasoning}\n        isStreaming={isActivelyStreaming && !hasTextContent}\n        fontSize={fontSize}\n      />,\n    );\n  }\n\n  if (typeof content === \"string\") {\n    if (content.length > 0) {\n      parts.push(\n        <div key=\"text-content\" className=\"py-1\">\n          <AgentMarkdown fontSize={fontSize}>{content}</AgentMarkdown>\n        </div>,\n      );\n    }\n    return parts.length > 0 ? <>{parts}</> : null;\n  }\n\n  if (!Array.isArray(content)) return null;\n\n  const blocks = content as Record<string, unknown>[];\n  let textAccum = \"\";\n  let idx = 0;\n\n  const flushText = () => {\n    if (textAccum.length > 0) {\n      parts.push(\n        <div key={`text-${idx}`} className=\"py-1\">\n          <AgentMarkdown fontSize={fontSize}>{textAccum}</AgentMarkdown>\n        </div>,\n      );\n      textAccum = \"\";\n      idx++;\n    }\n  };\n\n  for (let i = 0; i < blocks.length; i++) {\n    const block = blocks[i];\n    if (block.type === \"text\" && typeof block.text === \"string\") {\n      textAccum += block.text;\n    } else if (\n      (block.type === \"reasoning\" && typeof block.reasoning === \"string\") ||\n      (block.type === \"thinking\" && typeof block.thinking === \"string\")\n    ) {\n      flushText();\n      const text = (block.reasoning ?? block.thinking) as string;\n      const hasTextAfter = blocks.slice(i + 1).some(\n        (b) =>\n          b.type === \"text\" &&\n          typeof b.text === \"string\" &&\n          (b.text as string).length > 0,\n      );\n      const isThisBlockStreaming = isActivelyStreaming && !hasTextAfter;\n      parts.push(\n        <InlineThinking key={`thinking-${idx}`} text={text} isStreaming={isThisBlockStreaming} fontSize={fontSize} />,\n      );\n      idx++;\n    }\n  }\n\n  flushText();\n  return parts.length > 0 ? <>{parts}</> : null;\n}\n\nfunction AgentMessage({\n  agentName,\n  fontSize,\n  message,\n  isStreaming = false,\n  onRegenerate,\n  feedback,\n  onFeedback,\n  branch,\n  branchOptions,\n  onBranchSelect,\n}: {\n  agentName?: string;\n  fontSize?: string;\n  message: Message;\n  isStreaming?: boolean;\n  onRegenerate?: (parentCheckpoint: any | null | undefined, messageId: string, currentMessage: any) => void;\n  feedback?: MessageFeedback;\n  onFeedback?: (messageId: string, feedback: MessageFeedback) => void;\n  branch?: string;\n  branchOptions?: string[];\n  onBranchSelect?: (branch: string) => void;\n}) {\n  const content = getContentString(message?.content);\n  const inlineContent = renderContentInline(message, isStreaming, fontSize);\n\n  return (\n    <div className=\"agent-message flex flex-col gap-1 w-full group\">\n      <div className=\"flex items-center gap-3 w-full\">\n        <div\n          className=\"rounded-full size-8 shrink-0 bg-zinc-800 flex items-center justify-center p-2\"\n          data-alt=\"AI Avatar\"\n        >\n          <BotMessageSquare className=\"text-xs\" color=\"white\" />\n        </div>\n        <span className=\"text-zinc-500 text-sm\">{agentName || \"Agent\"}</span>\n      </div>\n      <div className=\"flex flex-1 flex-col gap-1 items-start min-w-0\">\n        <div className=\"text-content text-foreground\" style={fontSize ? { fontSize } : undefined}>\n          {inlineContent ? (\n            inlineContent\n          ) : (\n            <>\n              <div className=\"flex items-center gap-2 text-zinc-500\">\n                <Loader2 className=\"animate-spin\" size={16} />\n                <span>Thinking...</span>\n              </div>\n              {isStreaming && content && (\n                <span className=\"inline-block w-2 h-4 ml-1 bg-zinc-400 animate-pulse\" />\n              )}\n            </>\n          )}\n        </div>\n\n        {/* Branch switcher - show when multiple branches exist */}\n        {!isStreaming && branch && branchOptions && onBranchSelect && branchOptions.length > 1 && (\n          <BranchSwitcher\n            branch={branch}\n            branchOptions={branchOptions}\n            onSelect={onBranchSelect}\n            isLoading={isStreaming}\n          />\n        )}\n\n        {/* Show actions only when not streaming and content exists */}\n        {!isStreaming && content && (\n          <MessageActions\n            message={message}\n            onRegenerate={onRegenerate}\n            feedback={feedback}\n            onFeedback={onFeedback}\n            className=\"\"\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// Memoize - only re-render if message ID changes or streaming state changes\nexport default React.memo(AgentMessage, (prevProps, nextProps) => {\n  // If it's streaming, we need to re-render to show updates\n  if (nextProps.isStreaming) {\n    return false; // Always re-render when streaming\n  }\n\n  // Otherwise, only re-render if the message ID, feedback, branch, or callbacks changed\n  return (\n    prevProps.message.id === nextProps.message.id &&\n    prevProps.isStreaming === nextProps.isStreaming &&\n    prevProps.feedback === nextProps.feedback &&\n    prevProps.onRegenerate === nextProps.onRegenerate &&\n    prevProps.onFeedback === nextProps.onFeedback &&\n    prevProps.branch === nextProps.branch &&\n    prevProps.branchOptions?.length === nextProps.branchOptions?.length &&\n    prevProps.onBranchSelect === nextProps.onBranchSelect\n  );\n});\n"],"names":["getReasoningFromKwargs","message","ak","InlineThinking","text","isStreaming","fontSize","expanded","setExpanded","useState","useEffect","jsxs","p","jsx","LoaderCircle","Sparkles","ChevronRight","cn","AgentMarkdown","renderContentInline","isActivelyStreaming","content","parts","kwargsReasoning","hasTextContent","b","Fragment","blocks","textAccum","idx","flushText","i","block","hasTextAfter","isThisBlockStreaming","AgentMessage","agentName","onRegenerate","feedback","onFeedback","branch","branchOptions","onBranchSelect","getContentString","inlineContent","BotMessageSquare","Loader2","BranchSwitcher","MessageActions","AgentMessage$1","React","prevProps","nextProps"],"mappings":"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"}
+{"version":3,"file":"AgentMessage.es.js","sources":["../../../src/components/messages/AgentMessage.tsx"],"sourcesContent":["import { cn } from \"@/utils/tailwindUtil\";\nimport { getContentString } from \"@/utils/utils\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport { BotMessageSquare, ChevronRight, LoaderCircle, Sparkles, Wrench } from \"lucide-react\";\nimport React, { useEffect, useState } from \"react\";\nimport { AgentMarkdown } from \"../ui/AgentMarkdown\";\nimport { BranchSwitcher } from \"./BranchSwitcher\";\nimport { MessageActions, type MessageFeedback } from \"./MessageActions\";\n\ntype ToolStatusEntry = {\n  id?: string;\n  name?: string;\n  label?: string;\n  event?: string;\n  visible?: boolean;\n};\n\nfunction getReasoningFromKwargs(message: Message | undefined): string | null {\n  if (!message) return null;\n  const ak = (message as Record<string, unknown>).additional_kwargs as\n    | Record<string, unknown>\n    | undefined;\n  if (\n    ak &&\n    typeof ak.reasoning_content === \"string\" &&\n    ak.reasoning_content.length > 0\n  ) {\n    return ak.reasoning_content;\n  }\n  return null;\n}\n\nfunction AgentActivity({\n  reasoningText,\n  toolStatuses,\n  isStreaming,\n  fontSize,\n}: {\n  reasoningText?: string;\n  toolStatuses?: Array<{ key: string; label: string; isCompleted: boolean }>;\n  isStreaming?: boolean;\n  fontSize?: string;\n}) {\n  const [expanded, setExpanded] = useState(false);\n\n  useEffect(() => {\n    setExpanded(!!isStreaming);\n  }, [isStreaming]);\n\n  const hasTools = toolStatuses && toolStatuses.length > 0;\n  const hasReasoning = !!reasoningText && reasoningText.length > 0;\n\n  if (!hasTools && !hasReasoning && !isStreaming) return null;\n\n  return (\n    <div className=\"my-1\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((p) => !p)}\n        className=\"inline-flex items-center gap-1.5 text-xs text-zinc-400/80 transition-colors hover:text-zinc-300\"\n      >\n        {isStreaming ? (\n          <LoaderCircle className=\"size-3 animate-spin\" />\n        ) : (\n          <Sparkles className=\"size-3\" />\n        )}\n        <span>{isStreaming ? \"Thinking\" : \"Thought\"}</span>\n        <ChevronRight\n          className={cn(\n            \"size-3 transition-transform duration-200\",\n            expanded && \"rotate-90\",\n          )}\n        />\n      </button>\n      {expanded && (\n        <div className=\"mt-1.5 border-l-2 border-white/10 pl-4 space-y-1\">\n          {hasTools && toolStatuses!.map((ts) => (\n            <div key={ts.key} className=\"flex items-center gap-2 text-sm text-zinc-300 py-0.5\">\n              {!ts.isCompleted && (\n                <LoaderCircle className=\"size-3.5 animate-spin text-zinc-400\" />\n              )}\n              <Wrench className=\"size-3.5 text-zinc-500\" />\n              <span>{ts.label}</span>\n            </div>\n          ))}\n          {hasReasoning && (\n            <div className=\"text-sm text-zinc-300\">\n              <AgentMarkdown fontSize={fontSize}>{reasoningText!}</AgentMarkdown>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction toToolStatusEntry(value: unknown): ToolStatusEntry | null {\n  if (!value || typeof value !== \"object\") return null;\n  const v = value as Record<string, unknown>;\n\n  const visible =\n    typeof v.visible === \"boolean\"\n      ? v.visible\n      : typeof v.show === \"boolean\"\n        ? v.show\n        : typeof v.display === \"boolean\"\n          ? v.display\n          : typeof v.hidden === \"boolean\"\n            ? !v.hidden\n            : true;\n\n  return {\n    id: typeof v.id === \"string\" ? v.id : undefined,\n    name: typeof v.name === \"string\" ? v.name : undefined,\n    label: typeof v.label === \"string\" ? v.label : undefined,\n    event: typeof v.event === \"string\" ? v.event : undefined,\n    visible,\n  };\n}\n\nfunction getToolStatusFromKwargs(message: Message | undefined): ToolStatusEntry[] {\n  if (!message) return [];\n  const ak = (message as Record<string, unknown>).additional_kwargs as\n    | Record<string, unknown>\n    | undefined;\n\n  if (!ak || !Array.isArray(ak.tool_status)) return [];\n\n  return (ak.tool_status as unknown[])\n    .map(toToolStatusEntry)\n    .filter((s): s is ToolStatusEntry => s !== null);\n}\n\nfunction hasToolStatusFieldInKwargs(message: Message | undefined): boolean {\n  if (!message) return false;\n  const ak = (message as Record<string, unknown>).additional_kwargs as\n    | Record<string, unknown>\n    | undefined;\n  if (!ak) return false;\n  return Object.prototype.hasOwnProperty.call(ak, \"tool_status\");\n}\n\nfunction normalizeSemanticKey(value: string | undefined): string {\n  if (!value) return \"\";\n  return value\n    .toLowerCase()\n    .replace(/\\s+/g, \" \")\n    .replace(/\\s*event:\\s*metadata\\s*$/i, \"\")\n    .trim();\n}\n\nfunction shouldRenderToolStatus(status: ToolStatusEntry): boolean {\n  if (status.visible === false) return false;\n\n  const labelKey = normalizeSemanticKey(status.label);\n  if (labelKey.length === 0) return false;\n\n  // Filter transport/debug noise like \"event: metadata\".\n  if (status.event?.toLowerCase() === \"metadata\") return false;\n  if (/\\bevent:\\s*metadata\\b/i.test(status.label ?? \"\")) return false;\n\n  return true;\n}\n\nfunction normalizeToolLabel(name: string, input: unknown): string {\n  if (!input) return name;\n  if (typeof input === \"string\") {\n    const trimmed = input.trim();\n    if (trimmed.length === 0) return name;\n    return `${name} ${trimmed.slice(0, 80)}${trimmed.length > 80 ? \"...\" : \"\"}`;\n  }\n  if (typeof input === \"object\") {\n    try {\n      const json = JSON.stringify(input);\n      return `${name} ${json.length > 80 ? `${json.slice(0, 80)}...` : json}`;\n    } catch {\n      return name;\n    }\n  }\n  return name;\n}\n\nfunction renderContentInline(\n  groupedMessages: Message[] | undefined,\n  showToolActivity: boolean,\n  isActivelyStreaming?: boolean,\n  fontSize?: string,\n) {\n  if (!groupedMessages || groupedMessages.length === 0) return null;\n\n  const timeline = groupedMessages;\n  const toolMessages = timeline.filter((m) => m.type === \"tool\");\n  const hasBackendToolStatus = timeline.some((m) => hasToolStatusFieldInKwargs(m));\n\n  const completedToolIds = new Set(\n    toolMessages\n      .map((m) => (m as Record<string, unknown>).tool_call_id)\n      .filter((id): id is string => typeof id === \"string\" && id.length > 0),\n  );\n  const completedToolNames = new Set(\n    toolMessages\n      .map((m) => (m as Record<string, unknown>).name)\n      .filter((name): name is string => typeof name === \"string\" && name.length > 0),\n  );\n\n  // ── Collect activity (reasoning + tool statuses) and text content separately ──\n  const collectedToolStatuses: Array<{ key: string; label: string; isCompleted: boolean }> = [];\n  const reasoningTexts: string[] = [];\n  const textParts: React.ReactNode[] = [];\n  const renderedToolKeys = new Set<string>();\n  let textIdx = 0;\n\n  const collectToolStatusFromKwargs = (message: Message) => {\n    if (!showToolActivity) return;\n    for (const status of getToolStatusFromKwargs(message)) {\n      if (!shouldRenderToolStatus(status)) continue;\n      const semanticKey =\n        normalizeSemanticKey(status.label) || normalizeSemanticKey(status.name) || \"tool\";\n      if (renderedToolKeys.has(semanticKey)) continue;\n      renderedToolKeys.add(semanticKey);\n      const label = status.label ?? status.name ?? \"Running tool\";\n      const isCompleted =\n        (status.id ? completedToolIds.has(status.id) : false) ||\n        (status.name ? completedToolNames.has(status.name) : false) ||\n        !isActivelyStreaming;\n      collectedToolStatuses.push({ key: semanticKey, label, isCompleted });\n    }\n  };\n\n  for (const message of timeline) {\n    if (message.type !== \"ai\") continue;\n\n    const content = message.content;\n    const kwargsReasoning = getReasoningFromKwargs(message);\n\n    // Collect tool statuses from kwargs\n    collectToolStatusFromKwargs(message);\n\n    if (typeof content === \"string\") {\n      if (kwargsReasoning) {\n        // When reasoning_content exists in kwargs, the string content is the\n        // same thinking text (set by messages-tuple before wrapModelCall clears\n        // it). Capture it only as reasoning to avoid duplication.\n        reasoningTexts.push(kwargsReasoning);\n      } else if (content.length > 0) {\n        textParts.push(\n          <div key={`text-content-${message.id ?? textIdx}`} className=\"py-1\">\n            <AgentMarkdown fontSize={fontSize}>{content}</AgentMarkdown>\n          </div>,\n        );\n        textIdx++;\n      }\n      continue;\n    }\n\n    if (!Array.isArray(content)) {\n      if (kwargsReasoning) reasoningTexts.push(kwargsReasoning);\n      continue;\n    }\n\n    const blocks = content as Record<string, unknown>[];\n    let textAccum = \"\";\n    let hasReasoningBlock = false;\n\n    const flushText = () => {\n      if (textAccum.length > 0) {\n        textParts.push(\n          <div key={`text-${message.id ?? textIdx}-${textIdx}`} className=\"py-1\">\n            <AgentMarkdown fontSize={fontSize}>{textAccum}</AgentMarkdown>\n          </div>,\n        );\n        textAccum = \"\";\n        textIdx++;\n      }\n    };\n\n    for (let i = 0; i < blocks.length; i++) {\n      const block = blocks[i];\n      if (block.type === \"text\" && typeof block.text === \"string\") {\n        textAccum += block.text;\n        continue;\n      }\n\n      if (\n        (block.type === \"reasoning\" && typeof block.reasoning === \"string\") ||\n        (block.type === \"thinking\" && typeof block.thinking === \"string\")\n      ) {\n        flushText();\n        hasReasoningBlock = true;\n        const text = (block.reasoning ?? block.thinking) as string;\n        reasoningTexts.push(text);\n        continue;\n      }\n\n      if (showToolActivity && !hasBackendToolStatus && block.type === \"tool_use\") {\n        flushText();\n        const toolId = typeof block.id === \"string\" ? block.id : undefined;\n        const toolName = typeof block.name === \"string\" ? block.name : \"tool\";\n        const semanticKey = normalizeSemanticKey(toolName) || `tool-${i}`;\n        if (!renderedToolKeys.has(semanticKey)) {\n          renderedToolKeys.add(semanticKey);\n          const label = normalizeToolLabel(toolName, (block as Record<string, unknown>).input);\n          const isCompleted = toolId ? completedToolIds.has(toolId) : !isActivelyStreaming;\n          collectedToolStatuses.push({ key: semanticKey, label, isCompleted });\n        }\n      }\n    }\n\n    if (!hasReasoningBlock && kwargsReasoning) {\n      // Same as the string-content case: kwargs reasoning duplicates the\n      // text blocks, so discard accumulated text and capture as reasoning only.\n      textAccum = \"\";\n      reasoningTexts.push(kwargsReasoning);\n    } else {\n      flushText();\n    }\n  }\n\n  // Fallback for legacy payloads without backend tool_status (only after streaming completes)\n  if (showToolActivity && !isActivelyStreaming && !hasBackendToolStatus && collectedToolStatuses.length === 0 && textParts.length === 0 && toolMessages.length > 0) {\n    for (const toolMessage of toolMessages) {\n      collectedToolStatuses.push({\n        key: `tool-msg-${toolMessage.id ?? textIdx}`,\n        label: \"Tool call completed\",\n        isCompleted: true,\n      });\n      textIdx++;\n    }\n  }\n\n  // ── Assemble output: AgentActivity block first, then text content ──\n  const parts: React.ReactNode[] = [];\n  const hasTextContent = textParts.length > 0;\n  const combinedReasoning = reasoningTexts.join(\"\\n\\n\");\n  const hasActivity =\n    (showToolActivity && collectedToolStatuses.length > 0) ||\n    combinedReasoning.length > 0;\n  const activityIsStreaming = !!isActivelyStreaming && !hasTextContent;\n\n  if (hasActivity || activityIsStreaming) {\n    parts.push(\n      <AgentActivity\n        key=\"agent-activity\"\n        reasoningText={combinedReasoning || undefined}\n        toolStatuses={showToolActivity ? collectedToolStatuses : undefined}\n        isStreaming={activityIsStreaming}\n        fontSize={fontSize}\n      />,\n    );\n  }\n\n  parts.push(...textParts);\n\n  return parts.length > 0 ? <>{parts}</> : null;\n}\n\nfunction AgentMessage({\n  agentName,\n  fontSize,\n  message,\n  groupedMessages,\n  showToolActivity = true,\n  isStreaming = false,\n  onRegenerate,\n  feedback,\n  onFeedback,\n  branch,\n  branchOptions,\n  onBranchSelect,\n}: {\n  agentName?: string;\n  fontSize?: string;\n  message: Message;\n  groupedMessages?: Message[];\n  showToolActivity?: boolean;\n  isStreaming?: boolean;\n  onRegenerate?: (parentCheckpoint: any | null | undefined, messageId: string, currentMessage: any) => void;\n  feedback?: MessageFeedback;\n  onFeedback?: (messageId: string, feedback: MessageFeedback) => void;\n  branch?: string;\n  branchOptions?: string[];\n  onBranchSelect?: (branch: string) => void;\n}) {\n  const content = getContentString(message?.content);\n  const inlineContent = renderContentInline(groupedMessages ?? [message], showToolActivity, isStreaming, fontSize);\n\n  return (\n    <div className=\"agent-message flex flex-col gap-1 w-full group\">\n      <div className=\"flex items-center gap-3 w-full\">\n        <div\n          className=\"rounded-full size-8 shrink-0 bg-zinc-800 flex items-center justify-center p-2\"\n          data-alt=\"AI Avatar\"\n        >\n          <BotMessageSquare className=\"text-xs\" color=\"white\" />\n        </div>\n        <span className=\"text-zinc-500 text-sm\">{agentName || \"Agent\"}</span>\n      </div>\n      <div className=\"flex flex-1 flex-col gap-1 items-start min-w-0\">\n        <div className=\"text-content text-foreground\" style={fontSize ? { fontSize } : undefined}>\n          {inlineContent ? (\n            inlineContent\n          ) : (\n            <>\n              <div className=\"flex items-center gap-2 text-zinc-500\">\n                {/* <Loader2 className=\"animate-spin\" size={16} /> */}\n                <span>Thinking...</span>\n              </div>\n              {isStreaming && content && (\n                <span className=\"inline-block w-2 h-4 ml-1 bg-zinc-400 animate-pulse\" />\n              )}\n            </>\n          )}\n        </div>\n\n        {/* Branch switcher - show when multiple branches exist */}\n        {!isStreaming && branch && branchOptions && onBranchSelect && branchOptions.length > 1 && (\n          <BranchSwitcher\n            branch={branch}\n            branchOptions={branchOptions}\n            onSelect={onBranchSelect}\n            isLoading={isStreaming}\n          />\n        )}\n\n        {/* Show actions only when not streaming and content exists */}\n        {!isStreaming && content && (\n          <MessageActions\n            message={message}\n            onRegenerate={onRegenerate}\n            feedback={feedback}\n            onFeedback={onFeedback}\n            className=\"\"\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// Memoize - only re-render if message ID changes or streaming state changes\nexport default React.memo(AgentMessage, (prevProps, nextProps) => {\n  // If it's streaming, we need to re-render to show updates\n  if (nextProps.isStreaming) {\n    return false; // Always re-render when streaming\n  }\n\n  // Otherwise, only re-render if the message ID, feedback, branch, or callbacks changed\n  return (\n    prevProps.message.id === nextProps.message.id &&\n    prevProps.groupedMessages?.length === nextProps.groupedMessages?.length &&\n    prevProps.showToolActivity === nextProps.showToolActivity &&\n    prevProps.isStreaming === nextProps.isStreaming &&\n    prevProps.feedback === nextProps.feedback &&\n    prevProps.onRegenerate === nextProps.onRegenerate &&\n    prevProps.onFeedback === nextProps.onFeedback &&\n    prevProps.branch === nextProps.branch &&\n    prevProps.branchOptions?.length === nextProps.branchOptions?.length &&\n    prevProps.onBranchSelect === nextProps.onBranchSelect\n  );\n});\n"],"names":["getReasoningFromKwargs","message","ak","AgentActivity","reasoningText","toolStatuses","isStreaming","fontSize","expanded","setExpanded","useState","useEffect","hasTools","hasReasoning","jsxs","p","jsx","LoaderCircle","Sparkles","ChevronRight","cn","ts","Wrench","AgentMarkdown","toToolStatusEntry","value","v","visible","getToolStatusFromKwargs","s","hasToolStatusFieldInKwargs","normalizeSemanticKey","shouldRenderToolStatus","status","normalizeToolLabel","name","input","trimmed","json","renderContentInline","groupedMessages","showToolActivity","isActivelyStreaming","timeline","toolMessages","m","hasBackendToolStatus","completedToolIds","id","completedToolNames","collectedToolStatuses","reasoningTexts","textParts","renderedToolKeys","textIdx","collectToolStatusFromKwargs","semanticKey","label","isCompleted","content","kwargsReasoning","blocks","textAccum","hasReasoningBlock","flushText","i","block","text","toolId","toolName","toolMessage","parts","hasTextContent","combinedReasoning","hasActivity","activityIsStreaming","Fragment","AgentMessage","agentName","onRegenerate","feedback","onFeedback","branch","branchOptions","onBranchSelect","getContentString","inlineContent","BotMessageSquare","BranchSwitcher","MessageActions","AgentMessage$1","React","prevProps","nextProps"],"mappings":"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"}

package/dist/components/sidebar/ChatInput.cjs.js

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

package/dist/components/sidebar/ChatInput.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.cjs.js","sources":["../../../src/components/sidebar/ChatInput.tsx"],"sourcesContent":["import type { FileInfo } from \"@/types/fileInput\";\nimport { MoveUp, Paperclip, Loader2, Mic, Square, ChevronDown, Check } from \"lucide-react\";\nimport React, {\n  type ChangeEvent,\n  type Dispatch,\n  type FormEvent,\n  type SetStateAction,\n  useState,\n  type DragEvent,\n  useRef,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAudioRecorder } from \"@/hooks/useAudioRecorder\";\nimport type { textToSpeechVoice } from \"@/types/ChatProps\";\nimport { useModels } from \"@/hooks/use-models\";\nimport { cn } from \"@/utils/tailwindUtil\";\n\nexport default function ChatInput({\n  input,\n  inputFileAccept = \".png,.jpg,.jpeg,.pdf,.docx\",\n  setInput,\n  textToSpeechVoice,\n  handleSubmit,\n  fileInput,\n  setFileInput,\n  handleFileSelect,\n  isLoading = false,\n  onCancel,\n  filePreview,\n}: {\n  input: string;\n  setInput: (value: string) => void;\n  textToSpeechVoice?: textToSpeechVoice;\n  handleSubmit: (e: FormEvent<HTMLFormElement>) => void;\n  fileInput: FileInfo[];\n  setFileInput: Dispatch<SetStateAction<FileInfo[]>>;\n  handleFileSelect: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputFileAccept?: string;\n  isLoading?: boolean;\n  onCancel?: () => void;\n  filePreview?: (files: FileInfo[], setFileInput: Dispatch<SetStateAction<FileInfo[]>>) => React.ReactNode;\n}) {\n  const canSubmit =\n    (input.trim().length > 0 || fileInput.length > 0) && !isLoading;\n\n  const [isDragOver, setIsDragOver] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const { models, selectedModel, setSelectedModel } = useModels();\n  const modelItems = models.map((m) => ({ id: m.id, label: m.name || m.id }));\n\n  // Audio recording and transcription\n  const { isRecording, recordingTime, isTranscribing, startRecording, stopRecording, transcribeAudio } = useAudioRecorder();\n\n  const handleMicClick = async () => {\n    if (isRecording) {\n      // Stop recording and transcribe\n      const audioBlob = await stopRecording();\n\n      if (audioBlob) {\n        try {\n          const transcribedText = await transcribeAudio(audioBlob, textToSpeechVoice?.apiKey || \"\", textToSpeechVoice?.apiUrl || \"\", textToSpeechVoice?.model || \"Systran/faster-whisper-small\");\n\n          if (transcribedText) {\n            setInput(transcribedText);\n            // Expand textarea to fit content\n            if (textareaRef.current) {\n              setTimeout(() => {\n                if (textareaRef.current) {\n                  textareaRef.current.style.height = \"auto\";\n                  const maxHeight = 300;\n                  textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, maxHeight) + \"px\";\n                }\n              }, 0);\n            }\n          }\n        } catch (error) {\n          alert(\"Failed to transcribe audio. Please try again.\");\n        }\n      }\n    } else {\n      // Start recording\n      await startRecording();\n    }\n  };\n\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    handleSubmit(e);\n    // Reset textarea height to initial size\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n  };\n\n  const handleDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(false);\n  };\n\n  const handleDrop = async (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(false);\n\n    const files = Array.from(e.dataTransfer.files);\n    if (files.length === 0) return;\n\n    const acceptedFiles = files.filter(file => {\n      if (!inputFileAccept) return true;\n      const acceptTypes = inputFileAccept.split(',').map(type => type.trim());\n      return acceptTypes.some(type => {\n        if (type.startsWith('.')) {\n          return file.name.toLowerCase().endsWith(type.toLowerCase());\n        }\n        return file.type.match(type.replace('*', '.*'));\n      });\n    });\n\n    if (acceptedFiles.length === 0) return;\n\n    const fileDetails: FileInfo[] = await Promise.all(\n      acceptedFiles.map(async (file) => {\n        const base64Data = await new Promise<string>((resolve, reject) => {\n          const reader = new FileReader();\n          reader.onload = () => {\n            const result = reader.result as string;\n            resolve(result.split(\",\")[1]);\n          };\n          reader.onerror = reject;\n          reader.readAsDataURL(file);\n        });\n\n        return {\n          fileName: file.name,\n          fileType: file.type,\n          file: file,\n          fileData: base64Data,\n        };\n      })\n    );\n\n    setFileInput((prevFile) => [...prevFile, ...fileDetails]);\n  };\n\n  return (\n    <form\n      onSubmit={onSubmit}\n      className={`relative flex flex-col  border rounded-xl m-2 bg-zinc-900 border-zinc-800 transition-colors ${isDragOver ? 'border-blue-500 bg-zinc-800' : ''\n        }`}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n    >\n      {/* File attachments preview */}\n      {filePreview && filePreview(fileInput, setFileInput)}\n\n      {/* Text input */}\n      <textarea\n        ref={textareaRef}\n        placeholder=\"Type your message...\"\n        value={input}\n        onChange={(e) => {\n          setInput(e.target.value)\n          const maxHeight = 300; // max height in pixels\n          e.target.style.height = \"auto\"; // reset height\n          e.target.style.height = Math.min(e.target.scrollHeight, maxHeight) + \"px\";\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Enter\" &&\n            !e.shiftKey &&\n            !e.metaKey &&\n            !e.nativeEvent.isComposing\n          ) {\n            e.preventDefault();\n            if (canSubmit) {\n              e.currentTarget.form?.requestSubmit();\n            }\n          }\n        }}\n        disabled={isLoading}\n        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\"\n        rows={1}\n      />\n\n      {/* Footer with controls */}\n      <div className=\"flex justify-between items-center px-1 pb-2\">\n        <div className=\"flex gap-1 m-2\">\n          <label\n            htmlFor=\"file-input\"\n            className={`cursor-pointer ${isLoading ? \"opacity-50 cursor-not-allowed\" : \"\"\n              }`}\n          >\n            <Paperclip\n              size={30}\n              className=\"text-zinc-400 hover:text-white hover:bg-zinc-800 rounded p-1 transition-colors\"\n            />\n          </label>\n          <input\n            id=\"file-input\"\n            type=\"file\"\n            multiple\n            disabled={isLoading}\n            accept={inputFileAccept}\n            className=\"hidden\"\n            onChange={handleFileSelect}\n          />\n\n          {/* Microphone Button */}\n          {textToSpeechVoice?.apiKey && textToSpeechVoice?.apiUrl && textToSpeechVoice?.model && (\n            <button\n              type=\"button\"\n              onClick={handleMicClick}\n              disabled={isLoading || isTranscribing}\n              className={`${isRecording\n                ? \"text-red-500 hover:bg-red-900/20\"\n                : \"text-zinc-400 hover:text-white hover:bg-zinc-800\"\n                } rounded p-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}\n              title={isRecording ? `Recording... ${recordingTime}s` : \"Record audio\"}\n            >\n              {isRecording ? <Square size={24} className=\"animate-pulse\" /> : <Mic size={24} />}\n            </button>\n          )}\n        </div>\n\n        <div className=\"flex gap-2 items-center\">\n          {isTranscribing && (\n            <span className=\"text-xs text-zinc-400 flex items-center gap-1\">\n              <Loader2 size={14} className=\"animate-spin\" />\n              Transcribing...\n            </span>\n          )}\n\n          {modelItems.length > 1 && (\n            <DropdownSelector\n              items={modelItems}\n              selected={selectedModel}\n              onSelect={setSelectedModel}\n              placeholder=\"Model\"\n              maxWidth={160}\n            />\n          )}\n\n          {isLoading && onCancel && (\n            <button\n              type=\"button\"\n              onClick={onCancel}\n              className=\"px-3 py-1 text-xs text-zinc-400 hover:text-white hover:bg-zinc-800 rounded transition-colors\"\n            >\n              Cancel\n            </button>\n          )}\n\n          <button\n            type=\"submit\"\n            disabled={!canSubmit}\n            className=\"focus:outline-none transition-all bg-zinc-300 border rounded-full p-1 mx-2 cursor-pointer\"\n            style={{ border: \"none\" }}\n          >\n            {isLoading ? (\n              <Loader2 size={24} className=\"animate-spin text-black p-1\" />\n            ) : (\n              <MoveUp size={24} className=\"text-black p-1\" />\n            )}\n          </button>\n        </div>\n      </div>\n    </form>\n  );\n}\n\nfunction DropdownSelector<T extends { id: string; label: string }>({\n  items,\n  selected,\n  onSelect,\n  placeholder,\n  maxWidth = 160,\n  maxLength = 20,\n  dropDown = false,\n}: {\n  items: T[];\n  selected: string;\n  onSelect: (id: string) => void;\n  placeholder: string;\n  maxWidth?: number;\n  maxLength?: number;\n  dropDown?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        buttonRef.current && !buttonRef.current.contains(e.target as Node) &&\n        menuRef.current && !menuRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !buttonRef.current) return;\n    const rect = buttonRef.current.getBoundingClientRect();\n    if (dropDown) {\n      setMenuStyle({\n        position: \"fixed\",\n        top: rect.bottom + 4,\n        right: window.innerWidth - rect.right,\n      });\n    } else {\n      setMenuStyle({\n        position: \"fixed\",\n        bottom: window.innerHeight - rect.top + 4,\n        right: window.innerWidth - rect.right,\n      });\n    }\n  }, [open, dropDown]);\n\n  const selectedItem = items.find((i) => i.id === selected);\n  const fullLabel = selectedItem?.label || placeholder;\n  const displayLabel =\n    fullLabel.length > maxLength\n      ? `${fullLabel.slice(0, Math.max(0, maxLength - 1))}…`\n      : fullLabel;\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={() => setOpen((p) => !p)}\n        className=\"flex items-center gap-1.5 rounded-lg border border-border/50 bg-background px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground\"\n      >\n        <span className=\"truncate\" style={{ maxWidth }} title={fullLabel}>\n          {displayLabel}\n        </span>\n        <ChevronDown className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")} />\n      </button>\n      {open && createPortal(\n        <div\n          ref={menuRef}\n          style={menuStyle}\n          className=\"z-9999 min-w-55 max-h-77 overflow-y-auto rounded-xl border bg-popover p-1 shadow-lg [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent\"\n        >\n          {items.map((item) => (\n            <button\n              key={item.id}\n              type=\"button\"\n              onClick={() => {\n                onSelect(item.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-accent\",\n                item.id === selected && \"bg-accent/50 font-medium\",\n              )}\n            >\n              <span className=\"truncate\">{item.label}</span>\n              {item.id === selected && <Check className=\"size-4 shrink-0 text-primary\" />}\n            </button>\n          ))}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n}"],"names":["ChatInput","input","inputFileAccept","setInput","textToSpeechVoice","handleSubmit","fileInput","setFileInput","handleFileSelect","isLoading","onCancel","filePreview","canSubmit","isDragOver","setIsDragOver","useState","textareaRef","useRef","models","selectedModel","setSelectedModel","useModels","modelItems","m","isRecording","recordingTime","isTranscribing","startRecording","stopRecording","transcribeAudio","useAudioRecorder","handleMicClick","audioBlob","transcribedText","maxHeight","onSubmit","handleDragOver","handleDragLeave","handleDrop","files","acceptedFiles","file","type","fileDetails","base64Data","resolve","reject","reader","result","prevFile","jsxs","jsx","Paperclip","Square","Mic","Loader2","DropdownSelector","MoveUp","items","selected","onSelect","placeholder","maxWidth","maxLength","dropDown","open","setOpen","menuStyle","setMenuStyle","buttonRef","menuRef","useEffect","handler","e","rect","fullLabel","i","displayLabel","p","ChevronDown","cn","createPortal","item","Check"],"mappings":"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"}
+{"version":3,"file":"ChatInput.cjs.js","sources":["../../../src/components/sidebar/ChatInput.tsx"],"sourcesContent":["import type { FileInfo } from \"@/types/fileInput\";\nimport { MoveUp, Paperclip, Loader2, Mic, Square, ChevronDown, Check } from \"lucide-react\";\nimport React, {\n  type ChangeEvent,\n  type Dispatch,\n  type FormEvent,\n  type SetStateAction,\n  useState,\n  type DragEvent,\n  useRef,\n  useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useAudioRecorder } from \"@/hooks/useAudioRecorder\";\nimport type { textToSpeechVoice } from \"@/types/ChatProps\";\nimport { useModels } from \"@/hooks/use-models\";\nimport { cn } from \"@/utils/tailwindUtil\";\n\nexport default function ChatInput({\n  input,\n  inputFileAccept = \".png,.jpg,.jpeg,.pdf,.docx\",\n  setInput,\n  textToSpeechVoice,\n  handleSubmit,\n  fileInput,\n  setFileInput,\n  handleFileSelect,\n  isLoading = false,\n  onCancel,\n  filePreview,\n}: {\n  input: string;\n  setInput: (value: string) => void;\n  textToSpeechVoice?: textToSpeechVoice;\n  handleSubmit: (e: FormEvent<HTMLFormElement>) => void;\n  fileInput: FileInfo[];\n  setFileInput: Dispatch<SetStateAction<FileInfo[]>>;\n  handleFileSelect: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputFileAccept?: string;\n  isLoading?: boolean;\n  onCancel?: () => void;\n  filePreview?: (files: FileInfo[], setFileInput: Dispatch<SetStateAction<FileInfo[]>>) => React.ReactNode;\n}) {\n  const canSubmit =\n    (input.trim().length > 0 || fileInput.length > 0) && !isLoading;\n\n  const [isDragOver, setIsDragOver] = useState(false);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const { models, selectedModel, setSelectedModel } = useModels();\n  const modelItems = models.map((m) => ({ id: m.id, label: m.name || m.id }));\n\n  // Audio recording and transcription\n  const { isRecording, recordingTime, isTranscribing, startRecording, stopRecording, transcribeAudio } = useAudioRecorder();\n\n  const handleMicClick = async () => {\n    if (isRecording) {\n      // Stop recording and transcribe\n      const audioBlob = await stopRecording();\n\n      if (audioBlob) {\n        try {\n          const transcribedText = await transcribeAudio(audioBlob, textToSpeechVoice?.apiKey || \"\", textToSpeechVoice?.apiUrl || \"\", textToSpeechVoice?.model || \"Systran/faster-whisper-small\");\n\n          if (transcribedText) {\n            setInput(transcribedText);\n            // Expand textarea to fit content\n            if (textareaRef.current) {\n              setTimeout(() => {\n                if (textareaRef.current) {\n                  textareaRef.current.style.height = \"auto\";\n                  const maxHeight = 300;\n                  textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, maxHeight) + \"px\";\n                }\n              }, 0);\n            }\n          }\n        } catch (error) {\n          alert(\"Failed to transcribe audio. Please try again.\");\n        }\n      }\n    } else {\n      // Start recording\n      await startRecording();\n    }\n  };\n\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    handleSubmit(e);\n    // Reset textarea height to initial size\n    if (textareaRef.current) {\n      textareaRef.current.style.height = \"auto\";\n    }\n  };\n\n  const handleDragOver = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(false);\n  };\n\n  const handleDrop = async (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragOver(false);\n\n    const files = Array.from(e.dataTransfer.files);\n    if (files.length === 0) return;\n\n    const acceptedFiles = files.filter(file => {\n      if (!inputFileAccept) return true;\n      const acceptTypes = inputFileAccept.split(',').map(type => type.trim());\n      return acceptTypes.some(type => {\n        if (type.startsWith('.')) {\n          return file.name.toLowerCase().endsWith(type.toLowerCase());\n        }\n        return file.type.match(type.replace('*', '.*'));\n      });\n    });\n\n    if (acceptedFiles.length === 0) return;\n\n    const fileDetails: FileInfo[] = await Promise.all(\n      acceptedFiles.map(async (file) => {\n        const base64Data = await new Promise<string>((resolve, reject) => {\n          const reader = new FileReader();\n          reader.onload = () => {\n            const result = reader.result as string;\n            resolve(result.split(\",\")[1]);\n          };\n          reader.onerror = reject;\n          reader.readAsDataURL(file);\n        });\n\n        return {\n          fileName: file.name,\n          fileType: file.type,\n          file: file,\n          fileData: base64Data,\n        };\n      })\n    );\n\n    setFileInput((prevFile) => [...prevFile, ...fileDetails]);\n  };\n\n  return (\n    <form\n      onSubmit={onSubmit}\n      className={`relative flex flex-col  border rounded-xl m-2 bg-zinc-900 border-zinc-800 transition-colors ${isDragOver ? 'border-blue-500 bg-zinc-800' : ''\n        }`}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n    >\n      {/* File attachments preview */}\n      {filePreview && filePreview(fileInput, setFileInput)}\n\n      {/* Text input */}\n      <textarea\n        ref={textareaRef}\n        placeholder=\"Type your message...\"\n        value={input}\n        onChange={(e) => {\n          setInput(e.target.value)\n          const maxHeight = 300; // max height in pixels\n          e.target.style.height = \"auto\"; // reset height\n          e.target.style.height = Math.min(e.target.scrollHeight, maxHeight) + \"px\";\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Enter\" &&\n            !e.shiftKey &&\n            !e.metaKey &&\n            !e.nativeEvent.isComposing\n          ) {\n            e.preventDefault();\n            if (canSubmit) {\n              e.currentTarget.form?.requestSubmit();\n            }\n          }\n        }}\n        disabled={isLoading}\n        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\"\n        rows={1}\n      />\n\n      {/* Footer with controls */}\n      <div className=\"flex justify-between items-center px-1 pb-2\">\n        <div className=\"flex gap-1 m-2\">\n          <label\n            htmlFor=\"file-input\"\n            className={`cursor-pointer ${isLoading ? \"opacity-50 cursor-not-allowed\" : \"\"\n              }`}\n          >\n            <Paperclip\n              size={30}\n              className=\"text-zinc-400 hover:text-white hover:bg-zinc-800 rounded p-1 transition-colors\"\n            />\n          </label>\n          <input\n            id=\"file-input\"\n            type=\"file\"\n            multiple\n            disabled={isLoading}\n            accept={inputFileAccept}\n            className=\"hidden\"\n            onChange={handleFileSelect}\n          />\n\n          {/* Microphone Button */}\n          {textToSpeechVoice?.apiKey && textToSpeechVoice?.apiUrl && textToSpeechVoice?.model && (\n            <button\n              type=\"button\"\n              onClick={handleMicClick}\n              disabled={isLoading || isTranscribing}\n              className={`${isRecording\n                ? \"text-red-500 hover:bg-red-900/20\"\n                : \"text-zinc-400 hover:text-white hover:bg-zinc-800\"\n                } rounded p-1 transition-colors disabled:opacity-50 disabled:cursor-not-allowed`}\n              title={isRecording ? `Recording... ${recordingTime}s` : \"Record audio\"}\n            >\n              {isRecording ? <Square size={24} className=\"animate-pulse\" /> : <Mic size={24} />}\n            </button>\n          )}\n        </div>\n\n        <div className=\"flex gap-2 items-center\">\n          {isTranscribing && (\n            <span className=\"text-xs text-zinc-400 flex items-center gap-1\">\n              <Loader2 size={14} className=\"animate-spin\" />\n              Transcribing...\n            </span>\n          )}\n\n          {modelItems.length > 1 && (\n            <DropdownSelector\n              items={modelItems}\n              selected={selectedModel}\n              onSelect={setSelectedModel}\n              placeholder=\"Model\"\n              maxWidth={160}\n            />\n          )}\n\n          {isLoading && onCancel && (\n            <button\n              type=\"button\"\n              onClick={onCancel}\n              className=\"px-3 py-1 text-xs text-zinc-400 hover:text-white hover:bg-zinc-800 rounded transition-colors\"\n            >\n              Cancel\n            </button>\n          )}\n\n          <button\n            type=\"submit\"\n            disabled={!canSubmit}\n            className=\"focus:outline-none transition-all bg-zinc-300 border rounded-full p-1 mx-2 cursor-pointer\"\n            style={{ border: \"none\" }}\n          >\n            {isLoading ? (\n              <Loader2 size={24} className=\"animate-spin text-black p-1\" />\n            ) : (\n              <MoveUp size={24} className=\"text-black p-1\" />\n            )}\n          </button>\n        </div>\n      </div>\n    </form>\n  );\n}\n\nfunction DropdownSelector<T extends { id: string; label: string }>({\n  items,\n  selected,\n  onSelect,\n  placeholder,\n  maxWidth = 160,\n  maxLength = 20,\n  dropDown = false,\n}: {\n  items: T[];\n  selected: string;\n  onSelect: (id: string) => void;\n  placeholder: string;\n  maxWidth?: number;\n  maxLength?: number;\n  dropDown?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({});\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        buttonRef.current && !buttonRef.current.contains(e.target as Node) &&\n        menuRef.current && !menuRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  useEffect(() => {\n    if (!open || !buttonRef.current) return;\n    const rect = buttonRef.current.getBoundingClientRect();\n    if (dropDown) {\n      setMenuStyle({\n        position: \"fixed\",\n        top: rect.bottom + 4,\n        right: window.innerWidth - rect.right,\n      });\n    } else {\n      setMenuStyle({\n        position: \"fixed\",\n        bottom: window.innerHeight - rect.top + 4,\n        right: window.innerWidth - rect.right,\n      });\n    }\n  }, [open, dropDown]);\n\n  const selectedItem = items.find((i) => i.id === selected);\n  const fullLabel = selectedItem?.label || placeholder;\n  const displayLabel =\n    fullLabel.length > maxLength\n      ? `${fullLabel.slice(0, Math.max(0, maxLength - 1))}…`\n      : fullLabel;\n\n  return (\n    <div className=\"relative\">\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        onClick={() => setOpen((p) => !p)}\n        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\"\n      >\n        <span className=\"truncate\" style={{ maxWidth }} title={fullLabel}>\n          {displayLabel}\n        </span>\n        <ChevronDown className={cn(\"size-3 shrink-0 transition-transform\", open && \"rotate-180\")} />\n      </button>\n      {open && createPortal(\n        <div\n          ref={menuRef}\n          style={menuStyle}\n          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\"\n        >\n          {items.map((item) => (\n            <button\n              key={item.id}\n              type=\"button\"\n              onClick={() => {\n                onSelect(item.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"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\",\n                item.id === selected && \"bg-zinc-800 font-medium text-white\",\n              )}\n            >\n              <span className=\"truncate\">{item.label}</span>\n              {item.id === selected && <Check className=\"size-4 shrink-0 text-zinc-300\" />}\n            </button>\n          ))}\n        </div>,\n        document.body\n      )}\n    </div>\n  );\n}"],"names":["ChatInput","input","inputFileAccept","setInput","textToSpeechVoice","handleSubmit","fileInput","setFileInput","handleFileSelect","isLoading","onCancel","filePreview","canSubmit","isDragOver","setIsDragOver","useState","textareaRef","useRef","models","selectedModel","setSelectedModel","useModels","modelItems","m","isRecording","recordingTime","isTranscribing","startRecording","stopRecording","transcribeAudio","useAudioRecorder","handleMicClick","audioBlob","transcribedText","maxHeight","onSubmit","handleDragOver","handleDragLeave","handleDrop","files","acceptedFiles","file","type","fileDetails","base64Data","resolve","reject","reader","result","prevFile","jsxs","jsx","Paperclip","Square","Mic","Loader2","DropdownSelector","MoveUp","items","selected","onSelect","placeholder","maxWidth","maxLength","dropDown","open","setOpen","menuStyle","setMenuStyle","buttonRef","menuRef","useEffect","handler","e","rect","fullLabel","i","displayLabel","p","ChevronDown","cn","createPortal","item","Check"],"mappings":"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"}