@marimo-team/islands 0.19.3-dev14 → 0.19.3-dev17

package/dist/main.js

@@ -71129,22 +71129,24 @@ Image URL: ${r.imageUrl}`)), contextToXml({
   var import_compiler_runtime$86 = require_compiler_runtime();
   const Chatbot = (e) => {
     var _a2;
-    let [r, c] = (0, import_react.useState)(""), [d, f] = (0, import_react.useState)(e.config), [h, _] = (0, import_react.useState)(void 0), v = (0, import_react.useRef)(null), y = (0, import_react.useRef)(null), S = (0, import_react.useRef)(null), w = (0, import_react.useRef)(null), E = (0, import_react.useRef)(d);
-    E.current = d;
-    let O = (0, import_react.useRef)({
+    let [r, c] = (0, import_react.useState)(""), [d, f] = (0, import_react.useState)(e.config), [h, _] = (0, import_react.useState)(e.config), [v, y] = (0, import_react.useState)(void 0), S = (0, import_react.useRef)(null), w = (0, import_react.useRef)(null), E = (0, import_react.useRef)(null), O = (0, import_react.useRef)(null);
+    Object.keys(e.config).some((r2) => e.config[r2] !== h[r2]) && (f(e.config), _(e.config));
+    let M = (0, import_react.useRef)(d);
+    M.current = d;
+    let I = (0, import_react.useRef)({
       backendMessageId: null,
       frontendMessageIndex: null
-    }), M = (0, import_react.useRef)(null), { data: I } = useAsyncData(async () => (await e.get_chat_history({})).messages, []), z = e.value.length > 0 ? e.value : I, { messages: G, sendMessage: q, setMessages: LY, status: RY, stop: zY, error: BY, regenerate: VY, clearError: HY } = useChat({
+    }), z = (0, import_react.useRef)(null), { data: G } = useAsyncData(async () => (await e.get_chat_history({})).messages, []), q = e.value.length > 0 ? e.value : G, { messages: LY, sendMessage: RY, setMessages: zY, status: BY, stop: VY, error: HY, regenerate: UY, clearError: WY } = useChat({
       transport: new DefaultChatTransport({
         fetch: async (r2, c2) => {
           if (c2 === void 0) return fetch(r2);
           let d2 = JSON.parse(c2.body), f2 = c2.signal, h2 = {
-            max_tokens: E.current.max_tokens,
-            temperature: E.current.temperature,
-            top_p: E.current.top_p,
-            top_k: E.current.top_k,
-            frequency_penalty: E.current.frequency_penalty,
-            presence_penalty: E.current.presence_penalty
+            max_tokens: M.current.max_tokens,
+            temperature: M.current.temperature,
+            top_p: M.current.top_p,
+            top_k: M.current.top_k,
+            frequency_penalty: M.current.frequency_penalty,
+            presence_penalty: M.current.presence_penalty
           };
           try {
             let r3 = d2.messages.map((e2) => {
@@ -71157,7 +71159,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
             if (e.frontendManaged) {
               let c4 = new ReadableStream({
                 start(e2) {
-                  M.current = e2;
+                  z.current = e2;
                   let r4 = () => {
                     try {
                       e2.close();
@@ -71166,14 +71168,14 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                         error: e3
                       });
                     }
-                    M.current = null;
+                    z.current = null;
                   };
                   return f2 == null ? void 0 : f2.addEventListener("abort", r4), () => {
                     f2 == null ? void 0 : f2.removeEventListener("abort", r4);
                   };
                 },
                 cancel() {
-                  M.current = null;
+                  z.current = null;
                 }
               });
               return e.send_prompt({
@@ -71181,7 +71183,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 config: h2
               }).catch((e2) => {
                 var _a3;
-                (_a3 = M.current) == null ? void 0 : _a3.error(e2), M.current = null;
+                (_a3 = z.current) == null ? void 0 : _a3.error(e2), z.current = null;
               }), createUIMessageStreamResponse({
                 stream: c4
               });
@@ -71190,7 +71192,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
               status: 499
             });
             let c3 = Date.now().toString();
-            LY((e2) => [
+            zY((e2) => [
               ...e2,
               {
                 id: c3,
@@ -71218,7 +71220,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
               response: v2
             }), new Response("Internal server error", {
               status: 500
-            })) : (O.current.backendMessageId === null && O.current.frontendMessageIndex === null && LY((e2) => {
+            })) : (I.current.backendMessageId === null && I.current.frontendMessageIndex === null && zY((e2) => {
               let r4 = [
                 ...e2
               ], d3 = r4.findIndex((e3) => e3.id === c3);
@@ -71233,7 +71235,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
               }), r4;
             }), new Response(v2));
           } catch (e2) {
-            if (O.current = {
+            if (I.current = {
               backendMessageId: null,
               frontendMessageIndex: null
             }, e2.name === "AbortError") return new Response("Aborted", {
@@ -71246,15 +71248,15 @@ Image URL: ${r.imageUrl}`)), contextToXml({
           }
         }
       }),
-      messages: z,
+      messages: q,
       onFinish: (r2) => {
-        _(void 0), v.current && (v.current.value = ""), Logger.debug("Finished streaming message:", r2), O.current = {
+        y(void 0), S.current && (S.current.value = ""), Logger.debug("Finished streaming message:", r2), I.current = {
           backendMessageId: null,
           frontendMessageIndex: null
         }, e.frontendManaged && e.setValue(r2.messages);
       },
       onError: (e2) => {
-        Logger.error("An error occurred:", e2), O.current = {
+        Logger.error("An error occurred:", e2), I.current = {
           backendMessageId: null,
           frontendMessageIndex: null
         };
@@ -71264,19 +71266,19 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       let c2 = r2.detail.message;
       if (typeof c2 != "object" || !c2 || !("type" in c2) || c2.type !== "stream_chunk") return;
       if (e.frontendManaged) {
-        let e2 = M.current;
+        let e2 = z.current;
         if (!e2) return;
         let r3 = c2;
-        r3.content && e2.enqueue(r3.content), r3.is_final && (e2.close(), M.current = null);
+        r3.content && e2.enqueue(r3.content), r3.is_final && (e2.close(), z.current = null);
         return;
       }
       let d2 = c2;
-      O.current.backendMessageId === null && LY((e2) => {
+      I.current.backendMessageId === null && zY((e2) => {
         let r3 = [
           ...e2
         ];
         for (let e3 = r3.length - 1; e3 >= 0; e3--) if (r3[e3].role === "assistant") {
-          O.current = {
+          I.current = {
             backendMessageId: d2.message_id,
             frontendMessageIndex: e3
           };
@@ -71284,8 +71286,8 @@ Image URL: ${r.imageUrl}`)), contextToXml({
         }
         return r3;
       });
-      let f2 = O.current.frontendMessageIndex;
-      O.current.backendMessageId === d2.message_id && f2 !== null && (LY((e2) => {
+      let f2 = I.current.frontendMessageIndex;
+      I.current.backendMessageId === d2.message_id && f2 !== null && (zY((e2) => {
         let r3 = [
           ...e2
         ], c3 = f2;
@@ -71302,41 +71304,41 @@ Image URL: ${r.imageUrl}`)), contextToXml({
           });
         }
         return r3;
-      }), d2.is_final && (O.current = {
+      }), d2.is_final && (I.current = {
         backendMessageId: null,
         frontendMessageIndex: null
       }));
     });
-    let UY = RY === "submitted" || RY === "streaming", WY = (r2) => {
-      let c2 = G.findIndex((e2) => e2.id === r2);
+    let GY = BY === "submitted" || BY === "streaming", KY = (r2) => {
+      let c2 = LY.findIndex((e2) => e2.id === r2);
       if (c2 !== -1) {
-        let d2 = G.filter((e2) => e2.id !== r2);
+        let d2 = LY.filter((e2) => e2.id !== r2);
         e.delete_chat_message({
           index: c2
-        }), LY(d2), e.frontendManaged && e.setValue(d2);
+        }), zY(d2), e.frontendManaged && e.setValue(d2);
       }
-    }, GY = Array.isArray(e.allowAttachments) && e.allowAttachments.length > 0 || e.allowAttachments === true, KY = {
+    }, qY = Array.isArray(e.allowAttachments) && e.allowAttachments.length > 0 || e.allowAttachments === true, JY = {
       triggerCompletionRegex: /^\/(\w+)?/,
       completions: e.prompts.map((e2) => ({
         label: `/${e2}`,
         displayLabel: e2,
         apply: e2
       }))
-    }, qY = e.prompts.length > 0 ? "Type your message here, / for prompts" : "Type your message here...";
+    }, YY = e.prompts.length > 0 ? "Type your message here, / for prompts" : "Type your message here...";
     (0, import_react.useEffect)(() => {
       var _a3;
-      (_a3 = w.current) == null ? void 0 : _a3.scrollTo({
-        top: w.current.scrollHeight,
+      (_a3 = O.current) == null ? void 0 : _a3.scrollTo({
+        top: O.current.scrollHeight,
         behavior: "smooth"
       });
     }, [
-      G.length,
-      w
+      LY.length,
+      O
     ]);
-    let JY = (_a2 = S.current) == null ? void 0 : _a2.view, YY = () => {
-      if (JY) {
-        let e2 = JY.state.doc.length;
-        JY.dispatch({
+    let XY = (_a2 = E.current) == null ? void 0 : _a2.view, ZY = () => {
+      if (XY) {
+        let e2 = XY.state.doc.length;
+        XY.dispatch({
           changes: {
             from: 0,
             to: e2,
@@ -71357,9 +71359,9 @@ Image URL: ${r.imageUrl}`)), contextToXml({
           children: (0, import_jsx_runtime.jsx)(Button, {
             variant: "text",
             size: "icon",
-            disabled: G.length === 0,
+            disabled: LY.length === 0,
             onClick: () => {
-              LY([]), e.setValue([]), e.delete_chat_history({}), HY();
+              zY([]), e.setValue([]), e.delete_chat_history({}), WY();
             },
             children: (0, import_jsx_runtime.jsx)(RotateCw, {
               className: "h-3 w-3"
@@ -71368,9 +71370,9 @@ Image URL: ${r.imageUrl}`)), contextToXml({
         }),
         (0, import_jsx_runtime.jsxs)("div", {
           className: "grow overflow-y-auto gap-4 pt-8 pb-4 px-2 flex flex-col",
-          ref: w,
+          ref: O,
           children: [
-            G.length === 0 && (0, import_jsx_runtime.jsxs)("div", {
+            LY.length === 0 && (0, import_jsx_runtime.jsxs)("div", {
               className: "flex flex-col items-center justify-center h-full text-muted-foreground text-center p-4",
               children: [
                 (0, import_jsx_runtime.jsx)(BotMessageSquare, {
@@ -71386,9 +71388,9 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 })
               ]
             }),
-            G.map((e2, r2) => {
+            LY.map((e2, r2) => {
               var _a3;
-              let c2 = (_a3 = e2.parts) == null ? void 0 : _a3.filter((e3) => e3.type === "text").map((e3) => e3.text).join("\n"), d2 = r2 === G.length - 1;
+              let c2 = (_a3 = e2.parts) == null ? void 0 : _a3.filter((e3) => e3.type === "text").map((e3) => e3.text).join("\n"), d2 = r2 === LY.length - 1;
               return (0, import_jsx_runtime.jsxs)("div", {
                 className: cn("flex flex-col group gap-2", e2.role === "user" ? "items-end" : "items-start"),
                 children: [
@@ -71396,7 +71398,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                     className: `max-w-[80%] p-3 rounded-lg ${e2.role === "user" ? "bg-(--sky-11) text-(--slate-1) whitespace-pre-wrap" : "bg-(--slate-4) text-(--slate-12)"}`,
                     children: renderUIMessage({
                       message: e2,
-                      isStreamingReasoning: RY === "streaming",
+                      isStreamingReasoning: BY === "streaming",
                       isLast: d2
                     })
                   }),
@@ -71410,7 +71412,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                       }),
                       (0, import_jsx_runtime.jsx)("button", {
                         type: "button",
-                        onClick: () => WY(e2.id),
+                        onClick: () => KY(e2.id),
                         className: "text-xs text-(--slate-9) hover:text-(--slate-11)",
                         children: (0, import_jsx_runtime.jsx)(Trash2, {
                           className: "h-3 w-3 text-(--red-9)"
@@ -71421,7 +71423,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 ]
               }, e2.id);
             }),
-            UY && (0, import_jsx_runtime.jsxs)("div", {
+            GY && (0, import_jsx_runtime.jsxs)("div", {
               className: "flex items-center justify-center space-x-2 mb-4",
               children: [
                 (0, import_jsx_runtime.jsx)(Spinner, {
@@ -71430,22 +71432,22 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 (0, import_jsx_runtime.jsx)(Button, {
                   variant: "link",
                   size: "sm",
-                  onClick: () => zY(),
+                  onClick: () => VY(),
                   className: "text-(--red-9) hover:text-(--red-11)",
                   children: "Stop"
                 })
               ]
             }),
-            BY && (0, import_jsx_runtime.jsxs)("div", {
+            HY && (0, import_jsx_runtime.jsxs)("div", {
               className: "flex items-center justify-center space-x-2 mb-4",
               children: [
                 (0, import_jsx_runtime.jsx)(ErrorBanner, {
-                  error: BY
+                  error: HY
                 }),
                 (0, import_jsx_runtime.jsx)(Button, {
                   variant: "outline",
                   size: "sm",
-                  onClick: () => VY(),
+                  onClick: () => UY(),
                   children: "Retry"
                 })
               ]
@@ -71455,8 +71457,8 @@ Image URL: ${r.imageUrl}`)), contextToXml({
         (0, import_jsx_runtime.jsxs)("form", {
           onSubmit: async (e2) => {
             e2.preventDefault();
-            let c2 = h ? await convertToFileUIPart(h) : void 0;
-            q({
+            let c2 = v ? await convertToFileUIPart(v) : void 0;
+            RY({
               role: "user",
               parts: [
                 {
@@ -71465,9 +71467,9 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 },
                 ...c2 ?? []
               ]
-            }), YY();
+            }), ZY();
           },
-          ref: y,
+          ref: w,
           className: "flex w-full border-t border-(--slate-6) px-2 py-1 items-center",
           children: [
             e.showConfigurationControls && (0, import_jsx_runtime.jsx)(ConfigPopup, {
@@ -71478,52 +71480,52 @@ Image URL: ${r.imageUrl}`)), contextToXml({
               prompts: e.prompts,
               onSelect: (e2) => {
                 c(e2), requestAnimationFrame(() => {
-                  JY == null ? void 0 : JY.focus(), moveToEndOfEditor(JY);
+                  XY == null ? void 0 : XY.focus(), moveToEndOfEditor(XY);
                 });
               }
             }),
             (0, import_jsx_runtime.jsx)(PromptInput, {
               className: "rounded-sm mr-2",
-              placeholder: qY,
+              placeholder: YY,
               value: r,
-              inputRef: S,
+              inputRef: E,
               maxHeight: e.maxHeight ? `${e.maxHeight / 2}px` : void 0,
               onChange: c,
               onSubmit: (e2, r2) => {
                 var _a3;
-                r2.trim() && ((_a3 = y.current) == null ? void 0 : _a3.requestSubmit());
+                r2.trim() && ((_a3 = w.current) == null ? void 0 : _a3.requestSubmit());
               },
               onClose: () => {
               },
-              additionalCompletions: KY
+              additionalCompletions: JY
             }),
-            h && h.length === 1 && (0, import_jsx_runtime.jsx)("span", {
-              title: h[0].name,
+            v && v.length === 1 && (0, import_jsx_runtime.jsx)("span", {
+              title: v[0].name,
               className: "text-sm text-(--slate-11) truncate shrink-0 w-fit max-w-24",
-              children: h[0].name
+              children: v[0].name
             }),
-            h && h.length > 1 && (0, import_jsx_runtime.jsxs)("span", {
+            v && v.length > 1 && (0, import_jsx_runtime.jsxs)("span", {
               title: [
-                ...h
+                ...v
               ].map((e2) => e2.name).join("\n"),
               className: "text-sm text-(--slate-11) truncate shrink-0",
               children: [
-                h.length,
+                v.length,
                 " files"
               ]
             }),
-            h && h.length > 0 && (0, import_jsx_runtime.jsx)(Button, {
+            v && v.length > 0 && (0, import_jsx_runtime.jsx)(Button, {
               type: "button",
               variant: "text",
               size: "sm",
               onClick: () => {
-                _(void 0), v.current && (v.current.value = "");
+                y(void 0), S.current && (S.current.value = "");
               },
               children: (0, import_jsx_runtime.jsx)(X, {
                 className: "size-3"
               })
             }),
-            GY && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            qY && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
               children: [
                 (0, import_jsx_runtime.jsx)(Button, {
                   type: "button",
@@ -71531,7 +71533,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                   size: "sm",
                   onClick: () => {
                     var _a3;
-                    return (_a3 = v.current) == null ? void 0 : _a3.click();
+                    return (_a3 = S.current) == null ? void 0 : _a3.click();
                   },
                   children: (0, import_jsx_runtime.jsx)(Paperclip, {
                     className: "h-4"
@@ -71539,12 +71541,12 @@ Image URL: ${r.imageUrl}`)), contextToXml({
                 }),
                 (0, import_jsx_runtime.jsx)("input", {
                   type: "file",
-                  ref: v,
+                  ref: S,
                   className: "hidden",
                   multiple: true,
                   accept: Array.isArray(e.allowAttachments) ? e.allowAttachments.join(",") : void 0,
                   onChange: (e2) => {
-                    e2.target.files && _([
+                    e2.target.files && y([
                       ...e2.target.files
                     ]);
                   }
@@ -71553,7 +71555,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
             }),
             (0, import_jsx_runtime.jsx)(Button, {
               type: "submit",
-              disabled: UY || !r,
+              disabled: GY || !r,
               variant: "outline",
               size: "sm",
               className: "text-(--slate-11)",
@@ -71600,25 +71602,24 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       description: "Penalizes new tokens (-2: favor, 2: avoid)"
     }
   }, ConfigPopup = (e) => {
-    let r = (0, import_compiler_runtime$86.c)(16), { config: c, onChange: d } = e, [f, h] = (0, import_react.useState)(c), [_, v] = (0, import_react.useState)(false), y;
-    r[0] !== f || r[1] !== d ? (y = (e2, r2) => {
-      let c2 = r2 === null || Number.isNaN(r2) ? null : r2;
-      if (c2 !== null) {
-        let { min: r3, max: d2 } = configDescriptions[e2];
-        c2 = Math.max(r3, Math.min(d2, c2));
-      }
-      let _2 = {
-        ...f,
-        [e2]: c2
-      };
-      h(_2), d(_2);
-    }, r[0] = f, r[1] = d, r[2] = y) : y = r[2];
+    let r = (0, import_compiler_runtime$86.c)(16), { config: c, onChange: d } = e, [f, h] = (0, import_react.useState)(false), _;
+    r[0] !== c || r[1] !== d ? (_ = (e2, r2) => {
+      let f2 = r2 === null || Number.isNaN(r2) ? null : r2;
+      if (f2 !== null) {
+        let { min: r3, max: c2 } = configDescriptions[e2];
+        f2 = Math.max(r3, Math.min(c2, f2));
+      }
+      d({
+        ...c,
+        [e2]: f2
+      });
+    }, r[0] = c, r[1] = d, r[2] = _) : _ = r[2];
+    let v = _, y;
+    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (y = (e2) => {
+      e2.key === "Enter" && (e2.preventDefault(), h(false));
+    }, r[3] = y) : y = r[3];
     let S = y, w;
-    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = (e2) => {
-      e2.key === "Enter" && (e2.preventDefault(), v(false));
-    }, r[3] = w) : w = r[3];
-    let E = w, O;
-    r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (O = (0, import_jsx_runtime.jsx)(Tooltip, {
+    r[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = (0, import_jsx_runtime.jsx)(Tooltip, {
       content: "Configuration",
       children: (0, import_jsx_runtime.jsx)(PopoverTrigger, {
         asChild: true,
@@ -71631,16 +71632,16 @@ Image URL: ${r.imageUrl}`)), contextToXml({
           })
         })
       })
-    }), r[4] = O) : O = r[4];
-    let M;
-    r[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = (0, import_jsx_runtime.jsx)("h4", {
+    }), r[4] = w) : w = r[4];
+    let E;
+    r[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = (0, import_jsx_runtime.jsx)("h4", {
       className: "font-bold leading-none",
       children: "Configuration"
-    }), r[5] = M) : M = r[5];
-    let I;
-    if (r[6] !== S || r[7] !== f) {
+    }), r[5] = E) : E = r[5];
+    let O;
+    if (r[6] !== c || r[7] !== v) {
       let e2;
-      r[9] === S ? e2 = r[10] : (e2 = (e3) => {
+      r[9] === v ? e2 = r[10] : (e2 = (e3) => {
         let [r2, c2] = e3;
         return (0, import_jsx_runtime.jsxs)("div", {
           className: "grid grid-cols-3 items-center gap-1",
@@ -71671,34 +71672,34 @@ Image URL: ${r.imageUrl}`)), contextToXml({
               minValue: configDescriptions[r2].min,
               maxValue: configDescriptions[r2].max,
               step: configDescriptions[r2].step ?? 1,
-              onChange: (e4) => S(r2, e4),
-              onKeyDown: E,
+              onChange: (e4) => v(r2, e4),
+              onKeyDown: S,
               className: "col-span-3"
             })
           ]
         }, r2);
-      }, r[9] = S, r[10] = e2), I = Objects.entries(f).map(e2), r[6] = S, r[7] = f, r[8] = I;
-    } else I = r[8];
-    let z;
-    r[11] === I ? z = r[12] : (z = (0, import_jsx_runtime.jsx)(PopoverContent, {
+      }, r[9] = v, r[10] = e2), O = Objects.entries(c).map(e2), r[6] = c, r[7] = v, r[8] = O;
+    } else O = r[8];
+    let M;
+    r[11] === O ? M = r[12] : (M = (0, import_jsx_runtime.jsx)(PopoverContent, {
       className: "w-70 border",
       children: (0, import_jsx_runtime.jsxs)("div", {
         className: "grid gap-3",
         children: [
-          M,
-          I
+          E,
+          O
         ]
       })
-    }), r[11] = I, r[12] = z);
-    let G;
-    return r[13] !== _ || r[14] !== z ? (G = (0, import_jsx_runtime.jsxs)(Popover$1, {
-      open: _,
-      onOpenChange: v,
+    }), r[11] = O, r[12] = M);
+    let I;
+    return r[13] !== f || r[14] !== M ? (I = (0, import_jsx_runtime.jsxs)(Popover$1, {
+      open: f,
+      onOpenChange: h,
       children: [
-        O,
-        z
+        w,
+        M
       ]
-    }), r[13] = _, r[14] = z, r[15] = G) : G = r[15], G;
+    }), r[13] = f, r[14] = M, r[15] = I) : I = r[15], I;
   }, PromptsPopover = (e) => {
     let r = (0, import_compiler_runtime$86.c)(18), { prompts: c, onSelect: d } = e, [f, h] = (0, import_react.useState)(false), [_, v] = (0, import_react.useState)(""), y;
     r[0] === d ? y = r[1] : (y = (e2) => {
@@ -101068,7 +101069,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev14"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev17"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.3-dev14",
+  "version": "0.19.3-dev17",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -173,7 +173,7 @@
     "thememirror": "^2.0.1",
     "timestring": "^7.0.0",
     "typescript-memoize": "^1.1.1",
-    "use-acp": "0.2.5",
+    "use-acp": "0.2.6",
     "use-resize-observer": "^9.1.0",
     "vega-lite": "6.3.1",
     "vega-loader": "^5.1.0",

package/src/components/chat/acp/agent-panel.tsx

@@ -677,7 +677,7 @@ const AgentPanel: React.FC = () => {
     ? getAgentWebSocketUrl(selectedTab.agentId)
     : NO_WS_SET;
   const { sendUpdateFile, sendFileDetails } = useRequestClient();
-  const isCreatingNewSession = useRef(false);
+  const creatingOrResumingSession = useRef(false);
 
   const acpClient = useAcpClient({
     wsUrl,
@@ -716,6 +716,7 @@ const AgentPanel: React.FC = () => {
     sessionMode,
     activeSessionId,
     agent,
+    clearNotifications,
   } = acpClient;
 
   useEffect(() => {
@@ -757,40 +758,42 @@ const AgentPanel: React.FC = () => {
       return;
     }
 
-    // If there is an active session, we should stop it
-    if (activeSessionId) {
-      setActiveSessionId(null);
-      await agent.cancel({ sessionId: activeSessionId }).catch((error) => {
-        logger.error("Failed to cancel active session", { error });
-      });
-    }
+    creatingOrResumingSession.current = true;
+
+    try {
+      // If there is an active session, we should stop it
+      if (activeSessionId) {
+        await agent.cancel({ sessionId: activeSessionId }).catch((error) => {
+          logger.error("Failed to cancel active session", { error });
+        });
+        clearNotifications(activeSessionId);
+        setActiveSessionId(null);
+      }
 
-    // Get the selected model from the current session state
-    const currentModel = selectedTab?.selectedModel ?? null;
-    logger.debug("Creating new agent session", { model: currentModel });
-    isCreatingNewSession.current = true;
-    const newSession = await agent
-      .newSession({
+      // Get the selected model from the current session state
+      const currentModel = selectedTab?.selectedModel ?? null;
+      logger.debug("Creating new agent session", { model: currentModel });
+      const newSession = await agent.newSession({
         cwd: getCwd(),
         mcpServers: [],
         _meta: currentModel ? { model: currentModel } : undefined,
-      })
-      .finally(() => {
-        isCreatingNewSession.current = false;
       });
 
-    // Capture models from the response
-    if (newSession.models) {
-      logger.debug("Session models received", { models: newSession.models });
-      setSessionModels(newSession.models);
-    }
+      // Capture models from the response
+      if (newSession.models) {
+        logger.debug("Session models received", { models: newSession.models });
+        setSessionModels(newSession.models);
+      }
 
-    setSessionState((prev) =>
-      updateSessionExternalAgentSessionId(
-        prev,
-        newSession.sessionId as ExternalAgentSessionId,
-      ),
-    );
+      setSessionState((prev) =>
+        updateSessionExternalAgentSessionId(
+          prev,
+          newSession.sessionId as ExternalAgentSessionId,
+        ),
+      );
+    } finally {
+      creatingOrResumingSession.current = false;
+    }
   });
 
   const handleResumeSession = useEvent(
@@ -804,23 +807,28 @@ const AgentPanel: React.FC = () => {
       if (!agent.loadSession) {
         throw new Error("Agent does not support loading sessions");
       }
-      const loadedSession = await agent.loadSession({
-        sessionId: previousSessionId,
-        cwd: getCwd(),
-        mcpServers: [],
-      });
-
-      // Capture models from the response if available
-      if (loadedSession?.models) {
-        logger.debug("Session models received", {
-          models: loadedSession.models,
+      creatingOrResumingSession.current = true;
+      try {
+        const loadedSession = await agent.loadSession({
+          sessionId: previousSessionId,
+          cwd: getCwd(),
+          mcpServers: [],
         });
-        setSessionModels(loadedSession.models);
-      }
 
-      setSessionState((prev) =>
-        updateSessionExternalAgentSessionId(prev, previousSessionId),
-      );
+        // Capture models from the response if available
+        if (loadedSession?.models) {
+          logger.debug("Session models received", {
+            models: loadedSession.models,
+          });
+          setSessionModels(loadedSession.models);
+        }
+
+        setSessionState((prev) =>
+          updateSessionExternalAgentSessionId(prev, previousSessionId),
+        );
+      } finally {
+        creatingOrResumingSession.current = false;
+      }
     },
   );
 
@@ -838,6 +846,11 @@ const AgentPanel: React.FC = () => {
       return;
     }
 
+    // Prevent race conditions
+    if (creatingOrResumingSession.current) {
+      return;
+    }
+
     // If there is an available session, resume it, otherwise create a new one
     const createOrResumeSession = async () => {
       const availableSession = tabLastActiveSessionId ?? activeSessionId;

package/src/plugins/impl/chat/chat-ui.tsx

@@ -75,12 +75,26 @@ interface Props extends PluginFunctions {
 export const Chatbot: React.FC<Props> = (props) => {
   const [input, setInput] = useState("");
   const [config, setConfig] = useState<ChatConfig>(props.config);
+  const [prevPropsConfig, setPrevPropsConfig] = useState<ChatConfig>(
+    props.config,
+  );
   const [files, setFiles] = useState<File[] | undefined>(undefined);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  const configChanged = Object.keys(props.config).some(
+    (key) =>
+      props.config[key as keyof ChatConfig] !==
+      prevPropsConfig[key as keyof ChatConfig],
+  );
+
+  if (configChanged) {
+    setConfig(props.config);
+    setPrevPropsConfig(props.config);
+  }
+
   // Use a ref to avoid stale closure in the fetch callback
   const configRef = useRef<ChatConfig>(config);
   configRef.current = config;
@@ -739,7 +753,6 @@ const ConfigPopup: React.FC<{
   config: ChatConfig;
   onChange: (newConfig: ChatConfig) => void;
 }> = ({ config, onChange }) => {
-  const [localConfig, setLocalConfig] = useState<ChatConfig>(config);
   const [open, setOpen] = useState(false);
 
   const handleChange = (key: keyof ChatConfig, value: number | null) => {
@@ -754,8 +767,7 @@ const ConfigPopup: React.FC<{
       finalValue = clampedValue;
     }
 
-    const newConfig = { ...localConfig, [key]: finalValue };
-    setLocalConfig(newConfig);
+    const newConfig = { ...config, [key]: finalValue };
     onChange(newConfig);
   };
 
@@ -782,7 +794,7 @@ const ConfigPopup: React.FC<{
       <PopoverContent className="w-70 border">
         <div className="grid gap-3">
           <h4 className="font-bold leading-none">Configuration</h4>
-          {Objects.entries(localConfig).map(([key, value]) => (
+          {Objects.entries(config).map(([key, value]) => (
             <div key={key} className="grid grid-cols-3 items-center gap-1">
               <Label
                 htmlFor={key}