@marimo-team/frontend 0.20.3-dev87 → 0.20.3-dev89

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-Mpiu_IjZ.js"></script>
+    <script type="module" crossorigin src="./assets/index-CRsKr5CB.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-y72bE5iF.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-A78R3nYl.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-d_A4rA-x.js">
@@ -219,7 +219,7 @@
     <link rel="modulepreload" crossorigin href="./assets/add-cell-with-ai-YgztdOJ9.js">
     <link rel="modulepreload" crossorigin href="./assets/isEmpty-9KlyX4nB.js">
     <link rel="modulepreload" crossorigin href="./assets/bot-message-square-BzawfL5p.js">
-    <link rel="modulepreload" crossorigin href="./assets/chat-display-C40mAvmZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/chat-display-Yag1t1kP.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-F2DZENgf.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DVqP0HiQ.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-HU4WDTN0.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.20.3-dev87",
+  "version": "0.20.3-dev89",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/chat/chat-display.tsx

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { DataUIPart, ToolUIPart, UIMessage } from "ai";
+import React from "react";
+import { renderHTML } from "@/plugins/core/RenderHTML";
 import { logNever } from "@/utils/assertNever";
 import { Logger } from "@/utils/Logger";
 import { MarkdownRenderer } from "../markdown/markdown-renderer";
@@ -46,6 +48,17 @@ export const renderUIMessage = ({
 
     switch (part.type) {
       case "text":
+        // Streamdown sanitizes the HTML which strips out marimo elements
+        // So instead, we render the HTML with our custom renderer.
+        if (part.text.includes("<marimo-")) {
+          return (
+            <React.Fragment key={index}>
+              {renderHTML({
+                html: part.text,
+              })}
+            </React.Fragment>
+          );
+        }
         return <MarkdownRenderer key={index} content={part.text} />;
       case "reasoning":
         return (

package/dist/assets/chat-display-C40mAvmZ.js

@@ -1 +0,0 @@
-import{s as H}from"./chunk-LvLJmgfZ.js";import{t as U}from"./react-Bj1aDYRI.js";import{cr as $,nr as G}from"./cells-DVXjWBHI.js";import{C as z,P as K,R as E,T as Q}from"./zod-H_cgTO0M.js";import{t as J}from"./compiler-runtime-B3qBwwSJ.js";import{n as X}from"./assertNever-Dw9aFN4h.js";import{t as L}from"./isEmpty-9KlyX4nB.js";import{ut as Y}from"./ai-model-dropdown-D0ZKojfQ.js";import{m as W}from"./useEventListener-CjXriKgk.js";import{t as Z}from"./jsx-runtime-CP2fAiZX.js";import{t as A}from"./cn-d_A4rA-x.js";import{u as ee}from"./add-cell-with-ai-YgztdOJ9.js";import{t as te}from"./bot-message-square-BzawfL5p.js";import{t as C}from"./markdown-renderer-BF7gphWI.js";import{n as se}from"./spinner-Cg6xI4rq.js";import{c as ae}from"./datasource-BN9tktls.js";import{a as D,i as I,n as M,r as V}from"./multi-map-CDn9gple.js";var re=J();U();var t=H(Z(),1);const le=n=>{let e=(0,re.c)(13),{reasoning:a,index:l,isStreaming:s}=n,r=l===void 0?0:l,m=s===void 0?!1:s,o=m?"reasoning":void 0,x;e[0]===Symbol.for("react.memo_cache_sentinel")?(x=(0,t.jsx)(te,{className:"h-3 w-3"}),e[0]=x):x=e[0];let p=m?"Thinking":"View reasoning",d;e[1]!==a.length||e[2]!==p?(d=(0,t.jsx)(D,{className:"text-xs text-muted-foreground hover:bg-muted/50 px-2 py-1 h-auto rounded-sm [&[data-state=open]>svg]:rotate-180",children:(0,t.jsxs)("span",{className:"flex items-center gap-2",children:[x,p," (",a.length," ","chars)"]})}),e[1]=a.length,e[2]=p,e[3]=d):d=e[3];let i;e[4]===a?i=e[5]:(i=(0,t.jsx)(V,{className:"pb-2 px-2",children:(0,t.jsx)("div",{className:"bg-muted/30 border border-muted/50 rounded-md p-3 italic text-muted-foreground/90 relative",children:(0,t.jsx)("div",{className:"pr-6",children:(0,t.jsx)(C,{content:a})})})}),e[4]=a,e[5]=i);let c;e[6]!==d||e[7]!==i?(c=(0,t.jsxs)(I,{value:"reasoning",className:"border-0",children:[d,i]}),e[6]=d,e[7]=i,e[8]=c):c=e[8];let u;return e[9]!==r||e[10]!==o||e[11]!==c?(u=(0,t.jsx)(M,{type:"single",collapsible:!0,className:"w-full mb-2",value:o,children:c},r),e[9]=r,e[10]=o,e[11]=c,e[12]=u):u=e[12],u};var F=J(),ne=K({status:E().default("success"),auth_required:Q().default(!1),action_url:z(),next_steps:z(),meta:z(),message:E().nullish()}).passthrough(),oe=n=>{let e=(0,F.c)(12),{data:a}=n,l;if(e[0]!==a){let{status:s,auth_required:r,action_url:m,meta:o,next_steps:x,message:p,...d}=a,i;e[2]===Symbol.for("react.memo_cache_sentinel")?(i=(0,t.jsx)("h3",{className:"text-xs font-semibold text-muted-foreground",children:"Tool Result"}),e[2]=i):i=e[2];let c;e[3]===s?c=e[4]:(c=(0,t.jsx)("span",{className:"text-xs px-2 py-0.5 bg-[var(--grass-2)] text-[var(--grass-11)] rounded-full font-medium capitalize",children:s}),e[3]=s,e[4]=c);let u;e[5]===r?u=e[6]:(u=r&&(0,t.jsx)("span",{className:"text-xs px-2 py-0.5 bg-[var(--amber-2)] text-[var(--amber-11)] rounded-full",children:"Auth Required"}),e[5]=r,e[6]=u);let f;e[7]!==c||e[8]!==u?(f=(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[i,(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[c,u]})]}),e[7]=c,e[8]=u,e[9]=f):f=e[9];let h;e[10]===p?h=e[11]:(h=p&&(0,t.jsxs)("div",{className:"flex items-start gap-2",children:[(0,t.jsx)(G,{className:"h-3 w-3 text-[var(--blue-11)] mt-0.5 flex-shrink-0"}),(0,t.jsx)("div",{className:"text-xs text-foreground",children:p})]}),e[10]=p,e[11]=h),l=(0,t.jsxs)("div",{className:"flex flex-col gap-1.5",children:[f,h,d&&(0,t.jsx)("div",{className:"space-y-3",children:Object.entries(d).map(me)})]}),e[0]=a,e[1]=l}else l=e[1];return l},ie=n=>{let e=(0,F.c)(8),{result:a}=n,l;e[0]===a?l=e[1]:(l=ne.safeParse(a),e[0]=a,e[1]=l);let s=l;if(s.success){let o;return e[2]===s.data?o=e[3]:(o=(0,t.jsx)(oe,{data:s.data}),e[2]=s.data,e[3]=o),o}let r;e[4]===a?r=e[5]:(r=typeof a=="string"?a:JSON.stringify(a,null,2),e[4]=a,e[5]=r);let m;return e[6]===r?m=e[7]:(m=(0,t.jsx)("div",{className:"text-xs font-medium text-muted-foreground mb-1 max-h-64 overflow-y-auto scrollbar-thin",children:r}),e[6]=r,e[7]=m),m},ce=n=>{let e=(0,F.c)(9),{input:a}=n;if(!(a&&a!==null))return null;let l;e[0]===a?l=e[1]:(l=L(a),e[0]=a,e[1]=l);let s=l,r=typeof a=="object"&&Object.keys(a).length>0,m;e[2]===Symbol.for("react.memo_cache_sentinel")?(m=(0,t.jsx)("h3",{className:"text-xs font-semibold text-muted-foreground",children:"Tool Request"}),e[2]=m):m=e[2];let o;e[3]!==a||e[4]!==s||e[5]!==r?(o=s?"{}":r?JSON.stringify(a,null,2):String(a),e[3]=a,e[4]=s,e[5]=r,e[6]=o):o=e[6];let x;return e[7]===o?x=e[8]:(x=(0,t.jsxs)("div",{className:"space-y-2",children:[m,(0,t.jsx)("pre",{className:"bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64",children:o})]}),e[7]=o,e[8]=x),x};const B=n=>{let e=(0,F.c)(38),{toolName:a,result:l,error:s,index:r,state:m,className:o,input:x}=n,p=r===void 0?0:r,d=m==="output-available"&&(l||s),i=s?"error":d?"success":"loading",c;e[0]===i?c=e[1]:(c=()=>{switch(i){case"loading":return(0,t.jsx)(se,{className:"h-3 w-3 animate-spin"});case"error":return(0,t.jsx)($,{className:"h-3 w-3 text-[var(--red-11)]"});case"success":return(0,t.jsx)(Y,{className:"h-3 w-3 text-[var(--grass-11)]"});default:return(0,t.jsx)(ae,{className:"h-3 w-3"})}},e[0]=i,e[1]=c);let u=c,f;e[2]!==s||e[3]!==d||e[4]!==i?(f=()=>i==="loading"?"Running":s?"Failed":d?"Done":"Tool call",e[2]=s,e[3]=d,e[4]=i,e[5]=f):f=e[5];let h=f,T=`tool-${p}`,g;e[6]===o?g=e[7]:(g=A("w-full",o),e[6]=o,e[7]=g);let k=i==="error"&&"text-[var(--red-11)]/80",q=i==="success"&&"text-[var(--grass-11)]/80",v;e[8]!==k||e[9]!==q?(v=A("h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",k,q),e[8]=k,e[9]=q,e[10]=v):v=e[10];let j;e[11]===u?j=e[12]:(j=u(),e[11]=u,e[12]=j);let P=h(),b;e[13]===a?b=e[14]:(b=de(a),e[13]=a,e[14]=b);let N;e[15]===b?N=e[16]:(N=(0,t.jsx)("code",{className:"font-mono text-xs",children:b}),e[15]=b,e[16]=N);let y;e[17]!==P||e[18]!==N||e[19]!==j?(y=(0,t.jsxs)("span",{className:"flex items-center gap-1",children:[j,P,":",N]}),e[17]=P,e[18]=N,e[19]=j,e[20]=y):y=e[20];let w;e[21]!==y||e[22]!==v?(w=(0,t.jsx)(D,{className:v,children:y}),e[21]=y,e[22]=v,e[23]=w):w=e[23];let _;e[24]!==s||e[25]!==d||e[26]!==x||e[27]!==l?(_=d&&(0,t.jsxs)("div",{className:"space-y-3",children:[(0,t.jsx)(ce,{input:x}),l!=null&&(0,t.jsx)(ie,{result:l}),s&&(0,t.jsxs)("div",{className:"bg-[var(--red-2)] border border-[var(--red-6)] rounded-lg p-3",children:[(0,t.jsxs)("div",{className:"text-xs font-semibold text-[var(--red-11)] mb-2 flex items-center gap-2",children:[(0,t.jsx)("div",{className:"w-1.5 h-1.5 bg-[var(--red-9)] rounded-full"}),"Error"]}),(0,t.jsx)("div",{className:"text-sm text-[var(--red-11)] leading-relaxed",children:s})]})]}),e[24]=s,e[25]=d,e[26]=x,e[27]=l,e[28]=_):_=e[28];let S;e[29]===_?S=e[30]:(S=(0,t.jsx)(V,{className:"py-2 px-2",children:_}),e[29]=_,e[30]=S);let O;e[31]!==w||e[32]!==S?(O=(0,t.jsxs)(I,{value:"tool-call",className:"border-0",children:[w,S]}),e[31]=w,e[32]=S,e[33]=O):O=e[33];let R;return e[34]!==O||e[35]!==T||e[36]!==g?(R=(0,t.jsx)(M,{type:"single",collapsible:!0,className:g,children:O},T),e[34]=O,e[35]=T,e[36]=g,e[37]=R):R=e[37],R};function de(n){return n.replace("tool-","")}function me(n){let[e,a]=n;return L(a)?null:(0,t.jsxs)("div",{className:"space-y-1.5",children:[(0,t.jsxs)("div",{className:"text-xs font-medium text-muted-foreground capitalize flex items-center gap-2",children:[(0,t.jsx)("div",{className:"w-1.5 h-1.5 bg-[var(--blue-9)] rounded-full"}),e]}),(0,t.jsx)("pre",{className:"bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64",children:JSON.stringify(a,null,2)})]},e)}const ue=({message:n,isStreamingReasoning:e,isLast:a})=>{return(0,t.jsx)(t.Fragment,{children:n.parts.map((s,r)=>l(s,r))});function l(s,r){if(xe(s))return(0,t.jsx)(B,{index:r,toolName:s.type,result:s.output,className:"my-2",state:s.state,input:s.input},r);if(pe(s))return W.debug("Found data part",s),null;switch(s.type){case"text":return(0,t.jsx)(C,{content:s.text},r);case"reasoning":return(0,t.jsx)(le,{reasoning:s.text,index:r,isStreaming:e&&a&&r===(n.parts.length||0)-1},r);case"file":return(0,t.jsx)(ee,{attachment:s},r);case"dynamic-tool":return(0,t.jsx)(B,{toolName:s.toolName,result:s.output,state:s.state,input:s.input},r);case"source-document":case"source-url":case"step-start":return W.debug("Found non-renderable part",s),null;default:return X(s),null}}};function xe(n){return n.type.startsWith("tool-")}function pe(n){return n.type.startsWith("data-")}export{ue as t};