langgraph-ui-components 0.0.17 → 0.0.18

package/dist/index.es26.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es26.js","sources":["../src/components/messages/HumanMessage.tsx"],"sourcesContent":["import { useStreamContext } from \"@/providers/Stream\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport { Copy, FileIcon, Pencil, Send, X } from \"lucide-react\";\nimport React, { useState } from \"react\";\n\nfunction HumanMessage({ message }: { message: Message }) {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editedText, setEditedText] = useState(\"\");\n  const thread = useStreamContext();\n  const meta = thread.getMessagesMetadata(message);\n  const parentCheckpoint = meta?.firstSeenState?.parent_checkpoint;\n\n  // Extract text and documents from content\n  const content = message.content;\n  let textContent = \"\";\n  let documents: any[] = [];\n\n  if (typeof content === \"string\") {\n    textContent = content;\n  } else if (Array.isArray(content)) {\n    textContent = content\n      .filter((c: any) => c.type === \"text\")\n      .map((c: any) => (c.type === \"text\" ? c.text : \"\"))\n      .join(\"\");\n    documents = content.filter((c: any) => c.type === \"document\") ?? [];\n  }\n\n  const handleSubmitEdit = () => {\n    // Validate that edited text is not empty\n    if (!editedText.trim()) {\n      return;\n    }\n\n    setIsEditing(false);\n    // console.log(\"Send edited message:\", editedText);\n\n    const newMessage: Message = { type: \"human\", content: editedText };\n    thread.submit(\n      { messages: [newMessage] },\n      {\n        checkpoint: parentCheckpoint,\n        streamMode: [\"values\"],\n        streamSubgraphs: true,\n        streamResumable: true,\n        optimisticValues: (prev) => {\n          const values = meta?.firstSeenState?.values;\n          if (!values) return prev;\n\n          return {\n            ...values,\n            messages: [...(values.messages ?? []), newMessage],\n          };\n        },\n      },\n    );\n  };\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full group my-1\">\n      <div className=\"flex flex-1 flex-col gap-2 items-end min-w-0 mr-4\">\n\n        {documents.length > 0 && (\n          <div className=\"flex flex-col gap-2 max-w-[90%]\">\n            {documents.map((doc, idx) => (\n              <div\n                key={`${message.id}-doc-${idx}`}\n                className=\"flex items-center gap-3 bg-gradient-to-br from-zinc-800/90 to-zinc-900/90 backdrop-blur-sm px-4 py-1 rounded-xl border border-zinc-700/50 shadow-md hover:border-blue-500/40 hover:shadow-lg hover:shadow-blue-500/10 transition-all duration-200 cursor-pointer group/file\"\n              >\n                <div className=\"p-1.5 bg-blue-500/10 rounded-lg border border-blue-500/20 group-hover/file:bg-blue-500/20 transition-colors\">\n                  <FileIcon size={16} className=\"text-blue-400 shrink-0\" />\n                </div>\n                <span className=\"text-sm text-zinc-200 truncate font-medium\">\n                  {doc.source?.filename || `Document ${idx + 1}`}\n                </span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        {textContent && (\n          <div className=\"flex items-start gap-2\">\n            {!isEditing && (\n              <div className=\"flex items-center gap-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pt-4\">\n                <Pencil\n                  size={16}\n                  className=\"text-zinc-500 cursor-pointer hover:text-white\"\n                  onClick={() => {\n                    setIsEditing(true);\n                    setEditedText(textContent);\n                  }}\n                />\n                <Copy\n                  size={16}\n                  className=\"text-zinc-500 cursor-pointer hover:text-white\"\n                  onClick={() => {\n                    navigator.clipboard.writeText(textContent);\n                  }}\n                />\n              </div>\n            )}\n            <div className=\"relative flex-1\">\n              {isEditing ? (\n                <div className=\"flex flex-col gap-2 w-full\">\n                  <textarea\n                    value={editedText}\n                    onChange={(e) => setEditedText(e.target.value)}\n                    onKeyDown={(e)=>{\n                      if(e.key === \"Enter\"){\n                        e.preventDefault();\n                        handleSubmitEdit();\n                      }\n                    }}\n                    className=\"text-[15px] font-normal leading-relaxed rounded-2xl px-5 bg-zinc-900 border border-zinc-800 text-white shadow-lg break-words overflow-wrap-anywhere resize-none focus:outline-none min-h-[60px]\"\n                    autoFocus\n                  />\n                  <div className=\"flex items-center justify-end gap-2\">\n                    <button\n                      onClick={() => {\n                        setIsEditing(false);\n                        setEditedText(\"\");\n                      }}\n                      className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors\"\n                    >\n                      <X size={16} />\n                    </button>\n                    <button\n                      onClick={handleSubmitEdit}\n                      disabled={!editedText.trim()}\n                      className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white text-black text-sm transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n                    >\n                      <Send size={16} />\n                    </button>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"text-[15px] font-normal leading-relaxed rounded-xl py-2 px-4 bg-[#242322] text-white shadow-lg max-w-full break-words overflow-wrap-anywhere \">\n                  {textContent}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// Memoize with deep comparison on message ID\nexport default React.memo(HumanMessage, (prevProps, nextProps) => {\n  return prevProps.message.id === nextProps.message.id;\n});\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.es26.js","sources":["../src/components/Thinking.tsx"],"sourcesContent":["export default function Thinking() {\n    return (\n        <>\n            <style>{`\n                .loader-wrapper {\n                    position: relative;\n                    display: flex;\n                    align-items: center;\n                    justify-content: flex-start;\n                    color: white;\n                    user-select: none;\n                    gap: 10px;\n                }\n\n                .loader {\n                    width: 20px;\n                    height: 20px;\n                    aspect-ratio: 1 / 1;\n                    border-radius: 50%;\n                    background-color: transparent;\n                    animation: loader-rotate 1.5s linear infinite;\n                    z-index: 0;\n                }\n\n                @keyframes loader-rotate {\n                    0% {\n                        transform: rotate(90deg);\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #ff5f9f inset,\n                            0 4px 4px 0 #0693ff inset;\n                    }\n                    50% {\n                        transform: rotate(270deg);\n                        background: #7c0911;\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #d60a47 inset,\n                            0 4px 4px 0 #fbef19 inset;\n                    }\n                    100% {\n                        transform: rotate(450deg);\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #ff5f9f inset,\n                            0 4px 4px 0 #28a9ff inset;\n                    }\n                }\n\n                .letter-wrapper {\n                    display: flex;\n                    gap: 1px;\n                }\n\n                .loader-letter {\n                    display: inline-block;\n                    opacity: 0.4;\n                    transform: translateY(0);\n                    animation: loader-letter-anim 2s infinite;\n                    z-index: 1;\n                    border-radius: 50ch;\n                    border: none;\n                }\n\n                .loader-letter:nth-child(1) { animation-delay: 0s; }\n                .loader-letter:nth-child(2) { animation-delay: 0.1s; }\n                .loader-letter:nth-child(3) { animation-delay: 0.2s; }\n                .loader-letter:nth-child(4) { animation-delay: 0.3s; }\n                .loader-letter:nth-child(5) { animation-delay: 0.4s; }\n                .loader-letter:nth-child(6) { animation-delay: 0.5s; }\n                .loader-letter:nth-child(7) { animation-delay: 0.6s; }\n                .loader-letter:nth-child(8) { animation-delay: 0.7s; }\n\n                @keyframes loader-letter-anim {\n                    0%, 100% {\n                        opacity: 0.4;\n                        transform: translateY(0);\n                    }\n                    20% {\n                        opacity: 1;\n                        transform: scale(1.15);\n                    }\n                    40% {\n                        opacity: 0.7;\n                        transform: translateY(0);\n                    }\n                }\n            `}</style>\n            <div className=\"loader-wrapper\">\n                <div className=\"loader\"></div>\n                <div className=\"letter-wrapper\">\n                    <span className=\"loader-letter\">T</span>\n                    <span className=\"loader-letter\">h</span>\n                    <span className=\"loader-letter\">i</span>\n                    <span className=\"loader-letter\">n</span>\n                    <span className=\"loader-letter\">k</span>\n                    <span className=\"loader-letter\">i</span>\n                    <span className=\"loader-letter\">n</span>\n                    <span className=\"loader-letter\">g</span>\n                </div>\n            </div>\n        </>\n    )\n}\n"],"names":[],"mappings":";AAAA,SAAwB,WAAW;AAC/B,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAoFN;AAAA,IACF,qBAAC,OAAA,EAAI,WAAU,kBACX,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,MACxB,qBAAC,OAAA,EAAI,WAAU,kBACX,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CACrC;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/dist/index.es267.js

@@ -1,4 +1,4 @@
-import { getEnvironmentVariable } from "./index.es191.js";
+import { getEnvironmentVariable } from "./index.es236.js";
 import { Client } from "./index.es285.js";
 import "./index.es125.js";
 import "uuid";

package/dist/index.es27.js

@@ -1,107 +1,72 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-function Thinking() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `
-                .loader-wrapper {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
-                    color: white;
-                    user-select: none;
-                    gap: 10px;
-                }
-
-                .loader {
-                    width: 20px;
-                    height: 20px;
-                    aspect-ratio: 1 / 1;
-                    border-radius: 50%;
-                    background-color: transparent;
-                    animation: loader-rotate 1.5s linear infinite;
-                    z-index: 0;
-                }
-
-                @keyframes loader-rotate {
-                    0% {
-                        transform: rotate(90deg);
-                        box-shadow:
-                            0 1px 1px 0 #fff inset,
-                            0 3px 5px 0 #ff5f9f inset,
-                            0 4px 4px 0 #0693ff inset;
-                    }
-                    50% {
-                        transform: rotate(270deg);
-                        background: #7c0911;
-                        box-shadow:
-                            0 1px 1px 0 #fff inset,
-                            0 3px 5px 0 #d60a47 inset,
-                            0 4px 4px 0 #fbef19 inset;
-                    }
-                    100% {
-                        transform: rotate(450deg);
-                        box-shadow:
-                            0 1px 1px 0 #fff inset,
-                            0 3px 5px 0 #ff5f9f inset,
-                            0 4px 4px 0 #28a9ff inset;
-                    }
-                }
-
-                .letter-wrapper {
-                    display: flex;
-                    gap: 1px;
-                }
-
-                .loader-letter {
-                    display: inline-block;
-                    opacity: 0.4;
-                    transform: translateY(0);
-                    animation: loader-letter-anim 2s infinite;
-                    z-index: 1;
-                    border-radius: 50ch;
-                    border: none;
-                }
-
-                .loader-letter:nth-child(1) { animation-delay: 0s; }
-                .loader-letter:nth-child(2) { animation-delay: 0.1s; }
-                .loader-letter:nth-child(3) { animation-delay: 0.2s; }
-                .loader-letter:nth-child(4) { animation-delay: 0.3s; }
-                .loader-letter:nth-child(5) { animation-delay: 0.4s; }
-                .loader-letter:nth-child(6) { animation-delay: 0.5s; }
-                .loader-letter:nth-child(7) { animation-delay: 0.6s; }
-                .loader-letter:nth-child(8) { animation-delay: 0.7s; }
-
-                @keyframes loader-letter-anim {
-                    0%, 100% {
-                        opacity: 0.4;
-                        transform: translateY(0);
-                    }
-                    20% {
-                        opacity: 1;
-                        transform: scale(1.15);
-                    }
-                    40% {
-                        opacity: 0.7;
-                        transform: translateY(0);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getContentString } from "./index.es22.js";
+import React__default, { useState } from "react";
+function ToolCallFunctions({ title, toolMessages }) {
+  const [open, setOpen] = useState(false);
+  if (!toolMessages || toolMessages.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "accordion-collapse",
+      "data-accordion": "collapse",
+      className: "w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25",
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: "accordion-collapse-heading-1", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent",
+            onClick: () => setOpen((v) => !v),
+            "aria-expanded": open,
+            "aria-controls": "accordion-collapse-body-1",
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                "🔷 ",
+                title
+              ] }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-accordion-icon": true,
+                  className: `w-5 h-5 shrink-0 transition-transform ${open ? "rotate-0" : "rotate-180"}`,
+                  "aria-hidden": "true",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "24",
+                  height: "24",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      stroke: "currentColor",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: "2",
+                      d: "m5 15 7-7 7 7"
                     }
+                  )
                 }
-            ` }),
-    /* @__PURE__ */ jsxs("div", { className: "loader-wrapper", children: [
-      /* @__PURE__ */ jsx("div", { className: "loader" }),
-      /* @__PURE__ */ jsxs("div", { className: "letter-wrapper", children: [
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "T" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "h" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "i" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "n" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "k" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "i" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "n" }),
-        /* @__PURE__ */ jsx("span", { className: "loader-letter", children: "g" })
-      ] })
-    ] })
-  ] });
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: "accordion-collapse-body-1",
+            className: `${open ? "" : "hidden"}`,
+            "aria-labelledby": "accordion-collapse-heading-1",
+            children: /* @__PURE__ */ jsx("div", { className: "md:p-5 text-left space-y-3", children: toolMessages.map((toolMsg) => /* @__PURE__ */ jsx("div", { className: "border-zinc-700", children: /* @__PURE__ */ jsx("p", { className: "text-body text-sm", children: toolMsg.content ? getContentString(toolMsg.content) : "" }) }, toolMsg.id)) })
+          }
+        )
+      ]
+    }
+  );
 }
+const ToolCallFunctions$1 = React__default.memo(ToolCallFunctions, (prevProps, nextProps) => {
+  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;
+});
 export {
-  Thinking as default
+  ToolCallFunctions$1 as default
 };
 //# sourceMappingURL=index.es27.js.map

package/dist/index.es27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es27.js","sources":["../src/components/Thinking.tsx"],"sourcesContent":["export default function Thinking() {\n    return (\n        <>\n            <style>{`\n                .loader-wrapper {\n                    position: relative;\n                    display: flex;\n                    align-items: center;\n                    justify-content: flex-start;\n                    color: white;\n                    user-select: none;\n                    gap: 10px;\n                }\n\n                .loader {\n                    width: 20px;\n                    height: 20px;\n                    aspect-ratio: 1 / 1;\n                    border-radius: 50%;\n                    background-color: transparent;\n                    animation: loader-rotate 1.5s linear infinite;\n                    z-index: 0;\n                }\n\n                @keyframes loader-rotate {\n                    0% {\n                        transform: rotate(90deg);\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #ff5f9f inset,\n                            0 4px 4px 0 #0693ff inset;\n                    }\n                    50% {\n                        transform: rotate(270deg);\n                        background: #7c0911;\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #d60a47 inset,\n                            0 4px 4px 0 #fbef19 inset;\n                    }\n                    100% {\n                        transform: rotate(450deg);\n                        box-shadow:\n                            0 1px 1px 0 #fff inset,\n                            0 3px 5px 0 #ff5f9f inset,\n                            0 4px 4px 0 #28a9ff inset;\n                    }\n                }\n\n                .letter-wrapper {\n                    display: flex;\n                    gap: 1px;\n                }\n\n                .loader-letter {\n                    display: inline-block;\n                    opacity: 0.4;\n                    transform: translateY(0);\n                    animation: loader-letter-anim 2s infinite;\n                    z-index: 1;\n                    border-radius: 50ch;\n                    border: none;\n                }\n\n                .loader-letter:nth-child(1) { animation-delay: 0s; }\n                .loader-letter:nth-child(2) { animation-delay: 0.1s; }\n                .loader-letter:nth-child(3) { animation-delay: 0.2s; }\n                .loader-letter:nth-child(4) { animation-delay: 0.3s; }\n                .loader-letter:nth-child(5) { animation-delay: 0.4s; }\n                .loader-letter:nth-child(6) { animation-delay: 0.5s; }\n                .loader-letter:nth-child(7) { animation-delay: 0.6s; }\n                .loader-letter:nth-child(8) { animation-delay: 0.7s; }\n\n                @keyframes loader-letter-anim {\n                    0%, 100% {\n                        opacity: 0.4;\n                        transform: translateY(0);\n                    }\n                    20% {\n                        opacity: 1;\n                        transform: scale(1.15);\n                    }\n                    40% {\n                        opacity: 0.7;\n                        transform: translateY(0);\n                    }\n                }\n            `}</style>\n            <div className=\"loader-wrapper\">\n                <div className=\"loader\"></div>\n                <div className=\"letter-wrapper\">\n                    <span className=\"loader-letter\">T</span>\n                    <span className=\"loader-letter\">h</span>\n                    <span className=\"loader-letter\">i</span>\n                    <span className=\"loader-letter\">n</span>\n                    <span className=\"loader-letter\">k</span>\n                    <span className=\"loader-letter\">i</span>\n                    <span className=\"loader-letter\">n</span>\n                    <span className=\"loader-letter\">g</span>\n                </div>\n            </div>\n        </>\n    )\n}\n"],"names":[],"mappings":";AAAA,SAAwB,WAAW;AAC/B,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAoFN;AAAA,IACF,qBAAC,OAAA,EAAI,WAAU,kBACX,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,SAAA,CAAS;AAAA,MACxB,qBAAC,OAAA,EAAI,WAAU,kBACX,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,KAAC;AAAA,QACjC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,CACrC;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"index.es27.js","sources":["../src/components/ToolCallFunctions.tsx"],"sourcesContent":["import { getContentString } from \"@/utils/utils\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport React, { useState } from \"react\";\n\nfunction ToolCallFunctions({ title, toolMessages }: {\n  title?: string;\n  toolMessages: Message[];\n}) {\n  const [open, setOpen] = useState(false);\n\n  // Only render if there are tool messages\n  if (!toolMessages || toolMessages.length === 0) return null;\n\n  return (\n    <div\n      id=\"accordion-collapse\"\n      data-accordion=\"collapse\"\n      className=\"w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25\"\n    >\n      <h2 id=\"accordion-collapse-heading-1\">\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent\"\n          onClick={() => setOpen((v) => !v)}\n          aria-expanded={open}\n          aria-controls=\"accordion-collapse-body-1\"\n        >\n          <span>🔷 {title}</span>\n          <svg\n            data-accordion-icon\n            className={`w-5 h-5 shrink-0 transition-transform ${open ? \"rotate-0\" : \"rotate-180\"\n              }`}\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              d=\"m5 15 7-7 7 7\"\n            />\n          </svg>\n        </button>\n      </h2>\n      <div\n        id=\"accordion-collapse-body-1\"\n        className={`${open ? \"\" : \"hidden\"}`}\n        aria-labelledby=\"accordion-collapse-heading-1\"\n      >\n        <div className=\"md:p-5 text-left space-y-3\">\n          {toolMessages.map((toolMsg) => (\n            <div key={toolMsg.id} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm\">{toolMsg.content ? getContentString(toolMsg.content) : \"\"}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default React.memo(ToolCallFunctions, (prevProps, nextProps) => {\n  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;\n});"],"names":["React"],"mappings":";;;AAIA,SAAS,kBAAkB,EAAE,OAAO,gBAGjC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAGtC,MAAI,CAAC,gBAAgB,aAAa,WAAW,EAAG,QAAO;AAEvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,kBAAe;AAAA,MACf,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,IAAG,gCACL,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAChC,iBAAe;AAAA,YACf,iBAAc;AAAA,YAEd,UAAA;AAAA,cAAA,qBAAC,QAAA,EAAK,UAAA;AAAA,gBAAA;AAAA,gBAAI;AAAA,cAAA,GAAM;AAAA,cAChB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,uBAAmB;AAAA,kBACnB,WAAW,yCAAyC,OAAO,aAAa,YACtE;AAAA,kBACF,eAAY;AAAA,kBACZ,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,SAAQ;AAAA,kBAER,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,QAAO;AAAA,sBACP,eAAc;AAAA,sBACd,gBAAe;AAAA,sBACf,aAAY;AAAA,sBACZ,GAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAW,GAAG,OAAO,KAAK,QAAQ;AAAA,YAClC,mBAAgB;AAAA,YAEhB,UAAA,oBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA,aAAa,IAAI,CAAC,YACjB,oBAAC,OAAA,EAAqB,WAAU,mBAC9B,UAAA,oBAAC,KAAA,EAAE,WAAU,qBAAqB,UAAA,QAAQ,UAAU,iBAAiB,QAAQ,OAAO,IAAI,GAAA,CAAG,EAAA,GADnF,QAAQ,EAElB,CACD,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,sBAAeA,eAAM,KAAK,mBAAmB,CAAC,WAAW,cAAc;AACrE,SAAO,UAAU,cAAc,WAAW,UAAU,cAAc;AACpE,CAAC;"}

package/dist/index.es28.js

@@ -1,72 +1,145 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { getContentString } from "./index.es23.js";
-import React__default, { useState } from "react";
-function ToolCallFunctions({ title, toolMessages }) {
-  const [open, setOpen] = useState(false);
-  if (!toolMessages || toolMessages.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id: "accordion-collapse",
-      "data-accordion": "collapse",
-      className: "w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25",
-      children: [
-        /* @__PURE__ */ jsx("h2", { id: "accordion-collapse-heading-1", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent",
-            onClick: () => setOpen((v) => !v),
-            "aria-expanded": open,
-            "aria-controls": "accordion-collapse-body-1",
-            children: [
-              /* @__PURE__ */ jsxs("span", { children: [
-                "🔷 ",
-                title
-              ] }),
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  "data-accordion-icon": true,
-                  className: `w-5 h-5 shrink-0 transition-transform ${open ? "rotate-0" : "rotate-180"}`,
-                  "aria-hidden": "true",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "24",
-                  height: "24",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      stroke: "currentColor",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "m5 15 7-7 7 7"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: "accordion-collapse-body-1",
-            className: `${open ? "" : "hidden"}`,
-            "aria-labelledby": "accordion-collapse-heading-1",
-            children: /* @__PURE__ */ jsx("div", { className: "md:p-5 text-left space-y-3", children: toolMessages.map((toolMsg) => /* @__PURE__ */ jsx("div", { className: "border-zinc-700", children: /* @__PURE__ */ jsx("p", { className: "text-body text-sm", children: toolMsg.content ? getContentString(toolMsg.content) : "" }) }, toolMsg.id)) })
+import { useState, useRef, useCallback } from "react";
+import { webmFixDuration } from "./index.es41.js";
+import { useChatRuntime } from "./index.es5.js";
+function getMimeType() {
+  const types = [
+    "audio/webm",
+    "audio/mp4",
+    "audio/ogg",
+    "audio/wav",
+    "audio/aac"
+  ];
+  for (let i = 0; i < types.length; i++) {
+    if (MediaRecorder.isTypeSupported(types[i])) {
+      return types[i];
+    }
+  }
+  return void 0;
+}
+function useAudioRecorder() {
+  const { identity } = useChatRuntime();
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordingTime, setRecordingTime] = useState(0);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const streamRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const startRecording = useCallback(async () => {
+    try {
+      if (!streamRef.current) {
+        streamRef.current = await navigator.mediaDevices.getUserMedia({
+          audio: true
+        });
+      }
+      const mimeType = getMimeType();
+      const mediaRecorder = new MediaRecorder(streamRef.current, {
+        mimeType
+      });
+      mediaRecorderRef.current = mediaRecorder;
+      chunksRef.current = [];
+      startTimeRef.current = Date.now();
+      mediaRecorder.addEventListener("dataavailable", (event) => {
+        if (event.data.size > 0) {
+          chunksRef.current.push(event.data);
+        }
+      });
+      mediaRecorder.start();
+      setIsRecording(true);
+      timerRef.current = window.setInterval(() => {
+        setRecordingTime(Math.floor((Date.now() - startTimeRef.current) / 1e3));
+      }, 1e3);
+    } catch (error) {
+      console.error("Error accessing microphone:", error);
+      alert("Unable to access microphone. Please check your permissions.");
+    }
+  }, []);
+  const stopRecording = useCallback(() => {
+    return new Promise((resolve) => {
+      if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") {
+        const mimeType = mediaRecorderRef.current.mimeType;
+        const duration = Date.now() - startTimeRef.current;
+        mediaRecorderRef.current.addEventListener("stop", async () => {
+          let blob = new Blob(chunksRef.current, { type: mimeType });
+          if (mimeType === "audio/webm") {
+            blob = await webmFixDuration(blob, duration, blob.type);
           }
-        )
-      ]
+          resolve(blob);
+        });
+        mediaRecorderRef.current.stop();
+        setIsRecording(false);
+        setRecordingTime(0);
+        if (timerRef.current) {
+          window.clearInterval(timerRef.current);
+          timerRef.current = null;
+        }
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach((track) => track.stop());
+          streamRef.current = null;
+        }
+      } else {
+        resolve(null);
+      }
+    });
+  }, []);
+  const transcribeAudio = useCallback(async (audioBlob) => {
+    setIsTranscribing(true);
+    try {
+      const apiUrl = identity?.textToSpeechVoice?.apiUrl || "";
+      const apiKey = identity?.textToSpeechVoice?.apiKey;
+      const formData = new FormData();
+      formData.append("file", audioBlob, "audio.webm");
+      formData.append("model", identity?.textToSpeechVoice?.model || "Systran/faster-whisper-large-v3");
+      formData.append("response_format", "json");
+      const headers = {};
+      if (apiKey) {
+        headers["Authorization"] = `Bearer ${apiKey}`;
+      }
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        headers,
+        body: formData
+      });
+      if (!response.ok) {
+        throw new Error(`Transcription failed: ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data.text || "";
+    } catch (error) {
+      console.error("Transcription error:", error);
+      throw error;
+    } finally {
+      setIsTranscribing(false);
+    }
+  }, [identity]);
+  const cancelRecording = useCallback(() => {
+    if (mediaRecorderRef.current) {
+      mediaRecorderRef.current.stop();
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    if (timerRef.current) {
+      window.clearInterval(timerRef.current);
+      timerRef.current = null;
     }
-  );
+    chunksRef.current = [];
+    setIsRecording(false);
+    setRecordingTime(0);
+  }, []);
+  return {
+    isRecording,
+    recordingTime,
+    isTranscribing,
+    startRecording,
+    stopRecording,
+    transcribeAudio,
+    cancelRecording
+  };
 }
-const ToolCallFunctions$1 = React__default.memo(ToolCallFunctions, (prevProps, nextProps) => {
-  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;
-});
 export {
-  ToolCallFunctions$1 as default
+  useAudioRecorder
 };
 //# sourceMappingURL=index.es28.js.map

package/dist/index.es28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es28.js","sources":["../src/components/ToolCallFunctions.tsx"],"sourcesContent":["import { getContentString } from \"@/utils/utils\";\nimport type { Message } from \"@langchain/langgraph-sdk\";\nimport React, { useState } from \"react\";\n\nfunction ToolCallFunctions({ title, toolMessages }: {\n  title?: string;\n  toolMessages: Message[];\n}) {\n  const [open, setOpen] = useState(false);\n\n  // Only render if there are tool messages\n  if (!toolMessages || toolMessages.length === 0) return null;\n\n  return (\n    <div\n      id=\"accordion-collapse\"\n      data-accordion=\"collapse\"\n      className=\"w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25\"\n    >\n      <h2 id=\"accordion-collapse-heading-1\">\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent\"\n          onClick={() => setOpen((v) => !v)}\n          aria-expanded={open}\n          aria-controls=\"accordion-collapse-body-1\"\n        >\n          <span>🔷 {title}</span>\n          <svg\n            data-accordion-icon\n            className={`w-5 h-5 shrink-0 transition-transform ${open ? \"rotate-0\" : \"rotate-180\"\n              }`}\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              d=\"m5 15 7-7 7 7\"\n            />\n          </svg>\n        </button>\n      </h2>\n      <div\n        id=\"accordion-collapse-body-1\"\n        className={`${open ? \"\" : \"hidden\"}`}\n        aria-labelledby=\"accordion-collapse-heading-1\"\n      >\n        <div className=\"md:p-5 text-left space-y-3\">\n          {toolMessages.map((toolMsg) => (\n            <div key={toolMsg.id} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm\">{toolMsg.content ? getContentString(toolMsg.content) : \"\"}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default React.memo(ToolCallFunctions, (prevProps, nextProps) => {\n  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;\n});"],"names":["React"],"mappings":";;;AAIA,SAAS,kBAAkB,EAAE,OAAO,gBAGjC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAGtC,MAAI,CAAC,gBAAgB,aAAa,WAAW,EAAG,QAAO;AAEvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,kBAAe;AAAA,MACf,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,IAAG,gCACL,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAChC,iBAAe;AAAA,YACf,iBAAc;AAAA,YAEd,UAAA;AAAA,cAAA,qBAAC,QAAA,EAAK,UAAA;AAAA,gBAAA;AAAA,gBAAI;AAAA,cAAA,GAAM;AAAA,cAChB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,uBAAmB;AAAA,kBACnB,WAAW,yCAAyC,OAAO,aAAa,YACtE;AAAA,kBACF,eAAY;AAAA,kBACZ,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,SAAQ;AAAA,kBAER,UAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,QAAO;AAAA,sBACP,eAAc;AAAA,sBACd,gBAAe;AAAA,sBACf,aAAY;AAAA,sBACZ,GAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAW,GAAG,OAAO,KAAK,QAAQ;AAAA,YAClC,mBAAgB;AAAA,YAEhB,UAAA,oBAAC,OAAA,EAAI,WAAU,8BACZ,UAAA,aAAa,IAAI,CAAC,YACjB,oBAAC,OAAA,EAAqB,WAAU,mBAC9B,UAAA,oBAAC,KAAA,EAAE,WAAU,qBAAqB,UAAA,QAAQ,UAAU,iBAAiB,QAAQ,OAAO,IAAI,GAAA,CAAG,EAAA,GADnF,QAAQ,EAElB,CACD,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAA,sBAAeA,eAAM,KAAK,mBAAmB,CAAC,WAAW,cAAc;AACrE,SAAO,UAAU,cAAc,WAAW,UAAU,cAAc;AACpE,CAAC;"}
+{"version":3,"file":"index.es28.js","sources":["../src/hooks/useAudioRecorder.ts"],"sourcesContent":["import { useState, useRef, useCallback } from \"react\";\nimport { webmFixDuration } from \"../utils/BlobFix\";\nimport { useChatRuntime } from \"@/providers/ChatRuntime\";\n\nfunction getMimeType() {\n    const types = [\n        \"audio/webm\",\n        \"audio/mp4\",\n        \"audio/ogg\",\n        \"audio/wav\",\n        \"audio/aac\",\n    ];\n    for (let i = 0; i < types.length; i++) {\n        if (MediaRecorder.isTypeSupported(types[i])) {\n            return types[i];\n        }\n    }\n    return undefined;\n}\n\nexport function useAudioRecorder() {\n    const { identity } = useChatRuntime();\n    const [isRecording, setIsRecording] = useState(false);\n    const [recordingTime, setRecordingTime] = useState(0);\n    const [isTranscribing, setIsTranscribing] = useState(false);\n    \n    const streamRef = useRef<MediaStream | null>(null);\n    const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n    const chunksRef = useRef<Blob[]>([]);\n    const timerRef = useRef<number | null>(null);\n    const startTimeRef = useRef<number>(0);\n\n    const startRecording = useCallback(async () => {\n        try {\n            if (!streamRef.current) {\n                streamRef.current = await navigator.mediaDevices.getUserMedia({\n                    audio: true,\n                });\n            }\n\n            const mimeType = getMimeType();\n            const mediaRecorder = new MediaRecorder(streamRef.current, {\n                mimeType,\n            });\n\n            mediaRecorderRef.current = mediaRecorder;\n            chunksRef.current = [];\n            startTimeRef.current = Date.now();\n\n            mediaRecorder.addEventListener(\"dataavailable\", (event) => {\n                if (event.data.size > 0) {\n                    chunksRef.current.push(event.data);\n                }\n            });\n\n            mediaRecorder.start();\n            setIsRecording(true);\n\n            // Start timer\n            timerRef.current = window.setInterval(() => {\n                setRecordingTime(Math.floor((Date.now() - startTimeRef.current) / 1000));\n            }, 1000);\n        } catch (error) {\n            console.error(\"Error accessing microphone:\", error);\n            alert(\"Unable to access microphone. Please check your permissions.\");\n        }\n    }, []);\n\n    const stopRecording = useCallback((): Promise<Blob | null> => {\n        return new Promise((resolve) => {\n            if (\n                mediaRecorderRef.current &&\n                mediaRecorderRef.current.state === \"recording\"\n            ) {\n                const mimeType = mediaRecorderRef.current.mimeType;\n                const duration = Date.now() - startTimeRef.current;\n\n                mediaRecorderRef.current.addEventListener(\"stop\", async () => {\n                    let blob = new Blob(chunksRef.current, { type: mimeType });\n\n                    if (mimeType === \"audio/webm\") {\n                        blob = await webmFixDuration(blob, duration, blob.type);\n                    }\n\n                    resolve(blob);\n                });\n\n                mediaRecorderRef.current.stop();\n                setIsRecording(false);\n                setRecordingTime(0);\n\n                if (timerRef.current) {\n                    window.clearInterval(timerRef.current);\n                    timerRef.current = null;\n                }\n\n                // Stop all tracks\n                if (streamRef.current) {\n                    streamRef.current.getTracks().forEach((track) => track.stop());\n                    streamRef.current = null;\n                }\n            } else {\n                resolve(null);\n            }\n        });\n    }, []);\n\n    const transcribeAudio = useCallback(async (audioBlob: Blob): Promise<string> => {\n        setIsTranscribing(true);\n        try {\n            const apiUrl = identity?.textToSpeechVoice?.apiUrl || \"\";\n            const apiKey = identity?.textToSpeechVoice?.apiKey;\n\n            const formData = new FormData();\n            formData.append(\"file\", audioBlob, \"audio.webm\");\n            formData.append(\"model\", identity?.textToSpeechVoice?.model || \"Systran/faster-whisper-large-v3\");\n            formData.append(\"response_format\", \"json\");\n\n            const headers: HeadersInit = {};\n            if (apiKey) {\n                headers[\"Authorization\"] = `Bearer ${apiKey}`;\n            }\n\n            const response = await fetch(apiUrl, {\n                method: \"POST\",\n                headers,\n                body: formData,\n            });\n\n            if (!response.ok) {\n                throw new Error(`Transcription failed: ${response.statusText}`);\n            }\n\n            const data = await response.json();\n            return data.text || \"\";\n        } catch (error) {\n            console.error(\"Transcription error:\", error);\n            throw error;\n        } finally {\n            setIsTranscribing(false);\n        }\n    }, [identity]);\n\n    const cancelRecording = useCallback(() => {\n        if (mediaRecorderRef.current) {\n            mediaRecorderRef.current.stop();\n        }\n\n        if (streamRef.current) {\n            streamRef.current.getTracks().forEach((track) => track.stop());\n            streamRef.current = null;\n        }\n\n        if (timerRef.current) {\n            window.clearInterval(timerRef.current);\n            timerRef.current = null;\n        }\n\n        chunksRef.current = [];\n        setIsRecording(false);\n        setRecordingTime(0);\n    }, []);\n\n    return {\n        isRecording,\n        recordingTime,\n        isTranscribing,\n        startRecording,\n        stopRecording,\n        transcribeAudio,\n        cancelRecording,\n    };\n}\n"],"names":[],"mappings":"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"}