@inkeep/agents-ui 0.16.0 → 0.16.2

package/dist/styled/components/message.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),te=require("../../primitives/providers/base-events-provider.cjs"),ae=require("../../primitives/providers/config-provider.cjs"),re=require("../../primitives/providers/message-provider.cjs"),C=require("../../primitives/components/embedded-chat.cjs"),se=require("../../primitives/components/embedded-chat/chat-provider.cjs"),ne=require("../../primitives/utils/misc.cjs"),oe=require("merge-anything"),b=require("../utils.cjs"),ie=require("./ui/markdown-styles.cjs"),le=require("../../primitives/components/embedded-chat/use-stream-processor.cjs"),ce=require("./data-summary-group.cjs"),o=require("react"),T=require("./embedded-chat.cjs"),c=require("lucide-react"),U=require("./ui/recipes/button.cjs"),de={"input-streaming":"Pending","input-available":"Running","approval-requested":"Awaiting Approval","approval-responded":"Responded","output-available":"Completed","output-error":"Error","output-denied":"Denied"};function pe(t){if(!t||typeof t!="object")return!1;const a=t;return typeof a.type=="string"&&a.type.startsWith("tool-")}const ue=t=>{if(!t||typeof t!="object"||!("status"in t))return;const a=t.status;return typeof a=="string"?a:void 0},xe=()=>e.jsx("div",{className:"flex space-x-1",children:[0,1,2].map(t=>e.jsx("span",{className:"animate-bounce-dot opacity-30",style:{animationDelay:`${t*.2}s`},children:"."},t))}),V=({name:t,Icon:a,props:i,componentType:n})=>e.jsxs("div",{className:"border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3",children:[e.jsxs("div",{className:"flex justify-between px-4 py-2 text-xs",children:[e.jsxs("div",{className:"font-medium flex items-center gap-2",children:[e.jsx(a,{className:"w-3 h-3 text-gray-600 dark:text-white-alpha-600"}),e.jsx("span",{children:t})]}),e.jsx("div",{className:"flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono",children:n})]}),e.jsx("pre",{className:"whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2",children:JSON.stringify(i,null,2)})]}),me=({name:t,props:a})=>e.jsx(V,{name:t,Icon:c.ComponentIcon,props:a,componentType:"component"}),he=({name:t,props:a})=>e.jsx(V,{name:t,Icon:c.Library,props:a,componentType:"artifact"}),fe=({tool:t,componentDef:a,renderText:i,approvalId:n,messagePartsLength:m,setApprovalDelayPending:s,addToolApprovalResponse:u,sendMessage:d,conversationId:g})=>{const l=o.useRef(d);l.current=d;const x=o.useRef(u);x.current=u;const p=o.useRef(s);p.current=s;const h=o.useCallback(async(E=!0)=>{n&&(p.current({partCount:m}),x.current({id:n,approved:E}),await l.current(void 0,{body:{conversationId:g}}))},[n,m,g]),k=o.useMemo(()=>({tool:t,approve:h,renderMarkdown:i}),[t]),A=a?T.DynamicComponent:G;return e.jsx(A,{name:t.type,props:k,componentDef:a})};function B(t){return t===null?e.jsx("span",{className:"text-gray-500 dark:text-white-alpha-500 font-mono font-medium text-1xs",children:"null"}):t===void 0?e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 italic text-xs font-medium",children:"undefined"}):typeof t=="boolean"?e.jsx("span",{className:b.cn("inline-flex font-mono font-semibold items-center px-1 py-0.5 text-1xs rounded-md border",t?"bg-inkeep-expanded-primary-50 border-inkeep-expanded-primary-200 text-inkeep-expanded-primary-600 dark:bg-inkeep-expanded-primary-950 dark:border-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200":"bg-gray-100 dark:bg-white-alpha-50 text-gray-700 dark:text-white-alpha-700"),children:t?"true":"false"}):typeof t=="number"?e.jsx("span",{className:"tabular-nums font-medium text-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200",children:t.toLocaleString()}):typeof t=="string"?e.jsx("span",{className:"text-gray-800 dark:text-white-alpha-800 break-words",children:t}):e.jsx("span",{children:String(t)})}const F=({name:t,value:a,isArrayIndex:i,depth:n=0})=>{const[m,s]=o.useState(n<1),u=a!==null&&typeof a=="object"&&!Array.isArray(a),d=Array.isArray(a);if(!(u||d))return e.jsxs("div",{className:"flex items-baseline gap-2 py-1 text-xs",children:[e.jsx("span",{className:b.cn("font-medium shrink-0",i?"text-gray-300 dark:text-white-alpha-300":"text-gray-500 dark:text-white-alpha-500"),children:i?"—":t}),e.jsx("span",{className:"min-w-0",children:B(a)})]});const l=d?a.map((p,h)=>[String(h),p]):Object.entries(a);return l.length===0?e.jsxs("div",{className:"flex items-baseline gap-2 py-1 text-xs",children:[e.jsx("span",{className:"font-medium text-gray-500 dark:text-white-alpha-500 shrink-0",children:t}),e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 italic",children:d?"empty list":"empty"})]}):e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:p=>{p.stopPropagation(),s(!m)},className:"flex items-center gap-1.5 py-1 text-xs hover:bg-gray-50 dark:hover:bg-white-alpha-50 -mx-1.5 px-1.5 rounded transition-colors w-full text-left",children:[e.jsx(c.ChevronDown,{className:b.cn("h-3.5 w-3.5 text-gray-400 dark:text-white-alpha-400 shrink-0 transition-transform",!m&&"-rotate-90")}),e.jsx("span",{className:"font-medium text-gray-500 dark:text-white-alpha-500",children:t}),!m&&e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 text-1xs ml-1",children:d?`${l.length} item${l.length!==1?"s":""}`:`${l.length} field${l.length!==1?"s":""}`})]}),m&&e.jsx("div",{className:"border-l-2 border-gray-200 dark:border-white-alpha-200 ml-1.5 pl-3",children:l.map(([p,h])=>e.jsx(F,{name:p,value:h,isArrayIndex:d,depth:n+1},p))})]})},ge=({value:t})=>{if(t==null||typeof t!="object")return e.jsx("span",{className:"text-xs",children:B(t)});const a=Array.isArray(t)?t.map((i,n)=>[String(n),i]):Object.entries(t);return a.length===0?e.jsx("div",{className:"text-xs text-gray-400 dark:text-white-alpha-400 italic",children:"No arguments"}):e.jsx("div",{className:"space-y-1",children:a.map(([i,n])=>e.jsx(F,{name:i,value:n,isArrayIndex:Array.isArray(t)},i))})},G=({props:t})=>{const{tool:a,approve:i}=t,n=a.type,m=n.startsWith("tool-")?n.slice(5):n,s=a.state,u=a.approval?.id,d=!!u,g=s==="approval-requested",l=ue(a.output),[x,p]=o.useState(d),h=s?de[s]??s:"tool";o.useEffect(()=>{g&&p(!0)},[g]);const k=()=>{switch(s){case"input-streaming":return e.jsx(c.Circle,{className:"w-3 h-3"});case"input-available":return e.jsx(c.Loader2,{className:"w-3 h-3 animate-spin"});case"approval-requested":return e.jsx(c.Clock,{className:"w-3 h-3"});case"approval-responded":return e.jsx(c.CheckCircle,{className:"w-3 h-3"});case"output-available":return e.jsx(c.CheckCircle,{className:"w-3 h-3"});case"output-error":return e.jsx(c.TriangleAlert,{className:"w-3 h-3"});case"output-denied":return e.jsx(c.XCircle,{className:"w-3 h-3"});default:return null}};return e.jsxs("div",{className:"border rounded-lg mb-3 overflow-hidden",children:[e.jsxs("button",{type:"button",className:"inline-flex items-center group gap-2 text-xs text-gray-700 dark:text-white-alpha-700 hover:text-gray-800 dark:hover:text-white-alpha-800 transition-colors cursor-pointer w-full justify-between px-4 py-2 data-[expanded=true]:border-b",onClick:()=>p(!x),"aria-expanded":x,"data-expanded":x,children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs("div",{className:"font-medium flex items-center gap-2",children:[e.jsx(c.Hammer,{className:"w-3 h-3 text-gray-600 dark:text-white-alpha-600"}),e.jsx("span",{children:m})]})}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono",children:[k(),h]}),e.jsx(c.ChevronDown,{className:"w-3.5 h-3.5 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180"})]})]}),e.jsxs("div",{"data-expanded":x,className:b.cn("overflow-hidden transition-all duration-300 ease-in-out data-[expanded=true]:opacity-100 data-[expanded=false]:max-h-0 data-[expanded=false]:opacity-0 max-w-full"),children:[e.jsx("div",{"data-expanded":x,className:b.cn("relative",'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-3 before:pointer-events-none before:z-10','after:content-[""] after:absolute after:inset-x-0 after:bottom-0 after:h-3 after:pointer-events-none after:z-10',"before:bg-[linear-gradient(white,_transparent)] after:bg-[linear-gradient(transparent,_white)]","dark:before:bg-[linear-gradient(var(--ikp-color-gray-dark-950),_transparent)] dark:after:bg-[linear-gradient(transparent,_var(--ikp-color-gray-dark-950))]","data-[expanded=false]:before:opacity-0 data-[expanded=false]:after:opacity-0"),children:e.jsx("div",{"data-expanded":x,className:b.cn("[scrollbar-width:thin] px-4","data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"),children:a.input!=null&&e.jsx("div",{className:"text-xs py-2",children:e.jsx(ge,{value:a.input})})})}),g&&u&&e.jsxs("div",{className:"flex justify-end gap-2 pt-1 pb-3 px-4",children:[e.jsx("button",{type:"button",className:b.cn(U.button({size:"xs",variant:"outline"}),"px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"),onClick:()=>i(!1),children:"Deny"}),e.jsxs("button",{type:"button",className:b.cn(U.button({size:"xs",variant:"primaryFilled"}),"px-2 py-1 rounded-md text-xs gap-1"),onClick:()=>i(!0),children:[e.jsx(c.Check,{className:"w-3 h-3"}),"Approve"]})]}),s==="output-available"&&l&&a.output!=null&&e.jsxs("div",{className:"flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4",children:[l==="approved"&&e.jsx(c.Check,{className:"w-3 h-3"}),l]}),s==="output-denied"&&e.jsxs("div",{className:"flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4",children:[e.jsx(c.X,{className:"w-3 h-3"}),h]})]})]})},ye=({className:t,componentStyles:a,children:i,isLast:n,...m})=>{const{message:s}=re.useMessage(),{logEvent:u}=te.useBaseEvents(),{conversationId:d,isStreaming:g,isLoading:l,setError:x,addToolApprovalResponse:p,sendMessage:h}=se.useChat(),{aiChatSettings:{components:k,artifacts:A,headers:E}}=ae.useInkeepConfig(),K=E?.["x-emit-operations"]==="true",L=s.role==="user",W=(g||l)&&n&&s.role==="assistant",{processedParts:X,summaryTimings:H,shouldShowInitialLoading:J,shouldShowStreamDelayLoading:Q}=le.useStreamProcessor(s.parts,W,x),[S,$]=o.useState(null),[Y,q]=o.useState(!1),y=o.useRef(null);o.useEffect(()=>{if(!S){q(!1),y.current&&(clearTimeout(y.current),y.current=null);return}return q(!1),y.current&&clearTimeout(y.current),y.current=window.setTimeout(()=>{q(!0)},1e3),()=>{y.current&&(clearTimeout(y.current),y.current=null)}},[S]),o.useEffect(()=>{S&&(!n||s.parts.length>S.partCount)&&$(null)},[S,n,s.parts.length]);const _=o.useMemo(()=>s.parts.filter(ne.isCitationArtifact),[s.parts]),I=o.useMemo(()=>oe.merge(ie.markdownStyles,a??{}),[a]),O=o.useCallback((r,f)=>{u({eventName:"assistant_message_inline_link_opened",properties:{title:f?.toString(),url:r}})},[u]),z=o.useCallback((r,f)=>{u({eventName:"assistant_code_block_copied",properties:{conversationId:d,language:r,code:f}})},[u,d]),M=o.useCallback(r=>e.jsx(C.EmbeddedChatPrimitiveMarkdown,{text:r,componentStyles:I,onLinkClick:O,onCodeCopy:z,artifacts:_}),[I,O,z,_]),Z=o.useMemo(()=>b.cn("data-[role=user]:whitespace-pre-wrap mb-3 data-[role=user]:mb-0 [&[data-role=user]>p]:mb-0 max-w-full",t),[t]),ee=!L||s.parts.some(r=>r.type==="text"&&r.text?.trim());return e.jsxs(e.Fragment,{children:[!ee&&e.jsx("span",{className:"text-gray-500 dark:text-white-alpha-500",children:"No message content"}),X.map((r,f)=>{const v={"data-role":s.role,"data-type":r?.type==="data-component"?r.data.type:r?.type,...m,className:Z};switch(r?.type){case"text":return e.jsx(C.PrimitiveMessagePart,{...v,children:L?r.text:M(r.text||"")},f);case"data-component":{const{type:w}=r.data;switch(w){case"text":return e.jsx("div",{...v,children:M(r.data.text||"")},f);default:{const N=r.data,{name:j,props:D}=N,P=k?.[j],R=P?T.DynamicComponent:me;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(R,{name:j,props:D,componentDef:P})},`${j}-${f}`)}}}case"data-artifact":{const w=r.data,{name:N,type:j,artifactSummary:D}=w;if(j==="citation"&&!D?.url)return null;const P=A?.[j],R=P?T.DynamicComponent:he;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(R,{name:j,props:D,componentDef:P})},`${N}-${f}`)}case"summary-group":{const w=H.get(r.groupKey)||{isCompleted:!1};return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(ce.DataSummaryGroup,{summaries:r.summaries||[],isCompleted:w.isCompleted})},`${r.groupKey}-${f}`)}default:{if(!pe(r))return null;const w=r,N=r.approval?.id;return K||N?e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(fe,{tool:w,componentDef:k?.IkpTool,renderText:M,approvalId:N,messagePartsLength:s.parts.length,setApprovalDelayPending:$,addToolApprovalResponse:p,sendMessage:h,conversationId:d})},r.toolCallId??`${r.type}-${f}`):null}}}),J&&e.jsx(T.MessageLoading,{}),(Q||Y)&&e.jsx(xe,{})]})};exports.DefaultToolComponent=G;exports.EmbeddedChatMessagePart=ye;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),ae=require("../../primitives/providers/base-events-provider.cjs"),re=require("../../primitives/providers/config-provider.cjs"),se=require("../../primitives/providers/message-provider.cjs"),C=require("../../primitives/components/embedded-chat.cjs"),ne=require("../../primitives/components/embedded-chat/chat-provider.cjs"),oe=require("../../primitives/utils/misc.cjs"),ie=require("merge-anything"),b=require("../utils.cjs"),le=require("./ui/markdown-styles.cjs"),de=require("../../primitives/components/embedded-chat/use-stream-processor.cjs"),ce=require("./data-summary-group.cjs"),o=require("react"),T=require("./embedded-chat.cjs"),c=require("lucide-react"),V=require("./ui/recipes/button.cjs"),pe={"input-streaming":"Pending","input-available":"Running","approval-requested":"Awaiting Approval","approval-responded":"Responded","output-available":"Completed","output-error":"Error","output-denied":"Denied"};function ue(t){if(!t||typeof t!="object")return!1;const a=t;return typeof a.type=="string"&&a.type.startsWith("tool-")}const me=t=>{if(!t||typeof t!="object"||!("status"in t))return;const a=t.status;return typeof a=="string"?a:void 0},xe=()=>e.jsx("div",{className:"flex space-x-1",children:[0,1,2].map(t=>e.jsx("span",{className:"animate-bounce-dot opacity-30",style:{animationDelay:`${t*.2}s`},children:"."},t))}),B=({name:t,Icon:a,props:l,componentType:n})=>e.jsxs("div",{className:"border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3",children:[e.jsxs("div",{className:"flex justify-between px-4 py-2 text-xs",children:[e.jsxs("div",{className:"font-medium flex items-center gap-2",children:[e.jsx(a,{className:"w-3 h-3 text-gray-600 dark:text-white-alpha-600"}),e.jsx("span",{children:t})]}),e.jsx("div",{className:"flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono",children:n})]}),e.jsx("div",{className:"px-4 py-2",children:e.jsx(K,{value:l})})]}),he=({name:t,props:a})=>e.jsx(B,{name:t,Icon:c.ComponentIcon,props:a,componentType:"component"}),fe=({name:t,props:a})=>e.jsx(B,{name:t,Icon:c.Library,props:a,componentType:"artifact"}),ge=({tool:t,componentDef:a,renderText:l,approvalId:n,messagePartsLength:x,setApprovalDelayPending:r,addToolApprovalResponse:u,sendMessage:i,conversationId:g})=>{const d=o.useRef(i);d.current=i;const m=o.useRef(u);m.current=u;const p=o.useRef(r);p.current=r;const h=o.useCallback(async(E=!0)=>{n&&(p.current({partCount:x}),m.current({id:n,approved:E}),await d.current(void 0,{body:{conversationId:g}}))},[n,x,g]),k=o.useMemo(()=>({tool:t,approve:h,renderMarkdown:l}),[t]),A=a?T.DynamicComponent:W;return e.jsx(A,{name:t.type,props:k,componentDef:a})};function F(t){return t===null?e.jsx("span",{className:"text-gray-500 dark:text-white-alpha-500 font-mono font-medium text-1xs",children:"null"}):t===void 0?e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 italic text-xs font-medium",children:"undefined"}):typeof t=="boolean"?e.jsx("span",{className:b.cn("inline-flex font-mono font-semibold items-center px-1 py-0.5 text-1xs rounded-md border",t?"bg-inkeep-expanded-primary-50 border-inkeep-expanded-primary-200 text-inkeep-expanded-primary-600 dark:bg-inkeep-expanded-primary-950 dark:border-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200":"bg-gray-100 dark:bg-white-alpha-50 text-gray-700 dark:text-white-alpha-700"),children:t?"true":"false"}):typeof t=="number"?e.jsx("span",{className:"tabular-nums font-medium text-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200",children:String(t)}):typeof t=="string"?e.jsx("span",{className:"text-gray-800 dark:text-white-alpha-800 break-words",children:t}):e.jsx("span",{children:String(t)})}const G=({name:t,value:a,isArrayIndex:l,depth:n=0})=>{const[x,r]=o.useState(n<1),u=a!==null&&typeof a=="object"&&!Array.isArray(a),i=Array.isArray(a);if(!(u||i))return e.jsxs("div",{className:"flex items-baseline gap-2 py-1 text-xs",children:[e.jsx("span",{className:b.cn("font-medium shrink-0",l?"text-gray-300 dark:text-white-alpha-300":"text-gray-500 dark:text-white-alpha-500"),children:l?"—":t}),e.jsx("span",{className:"min-w-0",children:F(a)})]});const d=i?a.map((p,h)=>[String(h),p]):Object.entries(a);return d.length===0?e.jsxs("div",{className:"flex items-baseline gap-2 py-1 text-xs",children:[e.jsx("span",{className:"font-medium text-gray-500 dark:text-white-alpha-500 shrink-0",children:t}),e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 italic",children:i?"empty list":"empty"})]}):e.jsxs("div",{children:[e.jsxs("button",{type:"button",onClick:p=>{p.stopPropagation(),r(!x)},className:"flex items-center gap-1.5 py-1 text-xs hover:bg-gray-50 dark:hover:bg-white-alpha-50 -mx-1.5 px-1.5 rounded transition-colors w-full text-left",children:[e.jsx(c.ChevronDown,{className:b.cn("h-3.5 w-3.5 text-gray-400 dark:text-white-alpha-400 shrink-0 transition-transform",!x&&"-rotate-90")}),e.jsx("span",{className:"font-medium text-gray-500 dark:text-white-alpha-500",children:t}),!x&&e.jsx("span",{className:"text-gray-400 dark:text-white-alpha-400 text-1xs ml-1",children:i?`${d.length} item${d.length!==1?"s":""}`:`${d.length} field${d.length!==1?"s":""}`})]}),x&&e.jsx("div",{className:"border-l-2 border-gray-200 dark:border-white-alpha-200 ml-1.5 pl-3",children:d.map(([p,h])=>e.jsx(G,{name:p,value:h,isArrayIndex:i,depth:n+1},p))})]})},K=({value:t})=>{if(t==null||typeof t!="object")return e.jsx("span",{className:"text-xs",children:F(t)});const a=Array.isArray(t)?t.map((l,n)=>[String(n),l]):Object.entries(t);return a.length===0?e.jsx("div",{className:"text-xs text-gray-400 dark:text-white-alpha-400 italic",children:"No arguments"}):e.jsx("div",{className:"space-y-1",children:a.map(([l,n])=>e.jsx(G,{name:l,value:n,isArrayIndex:Array.isArray(t)},l))})},W=({props:t})=>{const{tool:a,approve:l}=t,n=a.type,x=n.startsWith("tool-")?n.slice(5):n,r=a.state,u=a.approval?.id,i=!!u,g=r==="approval-requested",d=me(a.output),[m,p]=o.useState(i),h=r?pe[r]??r:"tool";o.useEffect(()=>{g&&p(!0)},[g]);const k=()=>{switch(r){case"input-streaming":return e.jsx(c.Circle,{className:"w-3 h-3"});case"input-available":return e.jsx(c.Loader2,{className:"w-3 h-3 animate-spin"});case"approval-requested":return e.jsx(c.Clock,{className:"w-3 h-3"});case"approval-responded":return e.jsx(c.CheckCircle,{className:"w-3 h-3"});case"output-available":return e.jsx(c.CheckCircle,{className:"w-3 h-3"});case"output-error":return e.jsx(c.TriangleAlert,{className:"w-3 h-3"});case"output-denied":return e.jsx(c.XCircle,{className:"w-3 h-3"});default:return null}};return e.jsxs("div",{className:"border rounded-lg mb-3 overflow-hidden",children:[e.jsxs("button",{type:"button",className:"inline-flex items-center group gap-2 text-xs text-gray-700 dark:text-white-alpha-700 hover:text-gray-800 dark:hover:text-white-alpha-800 transition-colors cursor-pointer w-full justify-between px-4 py-2 data-[expanded=true]:border-b",onClick:()=>p(!m),"aria-expanded":m,"data-expanded":m,children:[e.jsx("div",{className:"flex items-center gap-2",children:e.jsxs("div",{className:"font-medium flex items-center gap-2",children:[e.jsx(c.Hammer,{className:"w-3 h-3 text-gray-600 dark:text-white-alpha-600"}),e.jsx("span",{children:x})]})}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono",children:[k(),h]}),e.jsx(c.ChevronDown,{className:"w-3.5 h-3.5 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180"})]})]}),e.jsxs("div",{"data-expanded":m,className:b.cn("overflow-hidden transition-all duration-300 ease-in-out data-[expanded=true]:opacity-100 data-[expanded=false]:max-h-0 data-[expanded=false]:opacity-0 max-w-full"),children:[e.jsx("div",{"data-expanded":m,className:b.cn("relative",'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-3 before:pointer-events-none before:z-10','after:content-[""] after:absolute after:inset-x-0 after:bottom-0 after:h-3 after:pointer-events-none after:z-10',"before:bg-[linear-gradient(white,_transparent)] after:bg-[linear-gradient(transparent,_white)]","dark:before:bg-[linear-gradient(var(--ikp-color-gray-dark-950),_transparent)] dark:after:bg-[linear-gradient(transparent,_var(--ikp-color-gray-dark-950))]","data-[expanded=false]:before:opacity-0 data-[expanded=false]:after:opacity-0"),children:e.jsx("div",{"data-expanded":m,className:b.cn("[scrollbar-width:thin] px-4","data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"),children:a.input!=null&&e.jsx("div",{className:"text-xs py-2",children:e.jsx(K,{value:a.input})})})}),g&&u&&e.jsxs("div",{className:"flex justify-end gap-2 pt-1 pb-3 px-4",children:[e.jsx("button",{type:"button",className:b.cn(V.button({size:"xs",variant:"outline"}),"px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"),onClick:()=>l(!1),children:"Deny"}),e.jsxs("button",{type:"button",className:b.cn(V.button({size:"xs",variant:"primaryFilled"}),"px-2 py-1 rounded-md text-xs gap-1"),onClick:()=>l(!0),children:[e.jsx(c.Check,{className:"w-3 h-3"}),"Approve"]})]}),r==="output-available"&&d&&a.output!=null&&e.jsxs("div",{className:"flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4",children:[d==="approved"&&e.jsx(c.Check,{className:"w-3 h-3"}),d]}),r==="output-denied"&&e.jsxs("div",{className:"flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4",children:[e.jsx(c.X,{className:"w-3 h-3"}),h]})]})]})},ye=({className:t,componentStyles:a,children:l,isLast:n,...x})=>{const{message:r}=se.useMessage(),{logEvent:u}=ae.useBaseEvents(),{conversationId:i,isStreaming:g,isLoading:d,setError:m,addToolApprovalResponse:p,sendMessage:h}=ne.useChat(),{aiChatSettings:{components:k,artifacts:A,headers:E}}=re.useInkeepConfig(),X=E?.["x-emit-operations"]==="true",$=r.role==="user",q=(g||d)&&n&&r.role==="assistant",{processedParts:H,summaryTimings:J,shouldShowInitialLoading:Q,shouldShowStreamDelayLoading:Y}=de.useStreamProcessor(r.parts,q,m),[S,L]=o.useState(null),[Z,M]=o.useState(!1),y=o.useRef(null);o.useEffect(()=>{if(!S){M(!1),y.current&&(clearTimeout(y.current),y.current=null);return}return M(!1),y.current&&clearTimeout(y.current),y.current=window.setTimeout(()=>{M(!0)},1e3),()=>{y.current&&(clearTimeout(y.current),y.current=null)}},[S]),o.useEffect(()=>{S&&(!n||r.parts.length>S.partCount||!q)&&L(null)},[S,n,r.parts.length,q]);const _=o.useMemo(()=>r.parts.filter(oe.isCitationArtifact),[r.parts]),O=o.useMemo(()=>ie.merge(le.markdownStyles,a??{}),[a]),z=o.useCallback((s,f)=>{u({eventName:"assistant_message_inline_link_opened",properties:{conversationId:i,messageId:r.id,title:f?.toString(),url:s}})},[u,i,r.id]),U=o.useCallback((s,f)=>{u({eventName:"assistant_code_block_copied",properties:{conversationId:i,messageId:r.id,language:s,code:f}})},[u,i,r.id]),R=o.useCallback(s=>e.jsx(C.EmbeddedChatPrimitiveMarkdown,{text:s,componentStyles:O,onLinkClick:z,onCodeCopy:U,artifacts:_}),[O,z,U,_]),ee=o.useMemo(()=>b.cn("data-[role=user]:whitespace-pre-wrap mb-3 data-[role=user]:mb-0 [&[data-role=user]>p]:mb-0 max-w-full",t),[t]),te=!$||r.parts.some(s=>s.type==="text"&&s.text?.trim());return e.jsxs(e.Fragment,{children:[!te&&e.jsx("span",{className:"text-gray-500 dark:text-white-alpha-500",children:"No message content"}),H.map((s,f)=>{const v={"data-role":r.role,"data-type":s?.type==="data-component"?s.data.type:s?.type,...x,className:ee};switch(s?.type){case"text":return e.jsx(C.PrimitiveMessagePart,{...v,children:$?s.text:R(s.text||"")},f);case"data-component":{const{type:w}=s.data;switch(w){case"text":return e.jsx("div",{...v,children:R(s.data.text||"")},f);default:{const N=s.data,{name:j,props:D}=N,P=k?.[j],I=P?T.DynamicComponent:he;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(I,{name:j,props:D,componentDef:P})},`${j}-${f}`)}}}case"data-artifact":{const w=s.data,{name:N,type:j,artifactSummary:D}=w;if(j==="citation"&&!D?.url)return null;const P=A?.[j],I=P?T.DynamicComponent:fe;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(I,{name:j,props:D,componentDef:P})},`${N}-${f}`)}case"summary-group":{const w=J.get(s.groupKey)||{isCompleted:!1};return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(ce.DataSummaryGroup,{summaries:s.summaries||[],isCompleted:w.isCompleted})},`${s.groupKey}-${f}`)}default:{if(!ue(s))return null;const w=s,N=s.approval?.id;return X||N?e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(ge,{tool:w,componentDef:k?.IkpTool,renderText:R,approvalId:N,messagePartsLength:r.parts.length,setApprovalDelayPending:L,addToolApprovalResponse:p,sendMessage:h,conversationId:i})},s.toolCallId??`${s.type}-${f}`):null}}}),Q&&e.jsx(T.MessageLoading,{}),(Y||Z)&&e.jsx(xe,{})]})};exports.DefaultToolComponent=W;exports.EmbeddedChatMessagePart=ye;

package/dist/styled/components/message.js

@@ -1,21 +1,21 @@
 "use client";
-import { jsx as e, jsxs as o, Fragment as ie } from "react/jsx-runtime";
-import { useBaseEvents as le } from "../../primitives/providers/base-events-provider.js";
-import { useInkeepConfig as de } from "../../primitives/providers/config-provider.js";
-import { useMessage as pe } from "../../primitives/providers/message-provider.js";
-import { EmbeddedChatPrimitiveMarkdown as ce, PrimitiveMessagePart as D } from "../../primitives/components/embedded-chat.js";
-import { useChat as me } from "../../primitives/components/embedded-chat/chat-provider.js";
-import { isCitationArtifact as ue } from "../../primitives/utils/misc.js";
-import { merge as he } from "merge-anything";
+import { jsxs as o, jsx as e, Fragment as le } from "react/jsx-runtime";
+import { useBaseEvents as de } from "../../primitives/providers/base-events-provider.js";
+import { useInkeepConfig as pe } from "../../primitives/providers/config-provider.js";
+import { useMessage as ce } from "../../primitives/providers/message-provider.js";
+import { EmbeddedChatPrimitiveMarkdown as me, PrimitiveMessagePart as S } from "../../primitives/components/embedded-chat.js";
+import { useChat as ue } from "../../primitives/components/embedded-chat/chat-provider.js";
+import { isCitationArtifact as he } from "../../primitives/utils/misc.js";
+import { merge as xe } from "merge-anything";
 import { cn as y } from "../utils.js";
-import { markdownStyles as xe } from "./ui/markdown-styles.js";
-import { useStreamProcessor as fe } from "../../primitives/components/embedded-chat/use-stream-processor.js";
-import { DataSummaryGroup as ge } from "./data-summary-group.js";
-import { useState as L, useRef as A, useEffect as $, useMemo as E, useCallback as P } from "react";
-import { DynamicComponent as M, MessageLoading as ye } from "./embedded-chat.js";
-import { Hammer as be, ChevronDown as X, Check as F, X as we, Library as ke, ComponentIcon as Ne, XCircle as ve, TriangleAlert as Ce, CheckCircle as K, Clock as Se, Loader2 as De, Circle as Te } from "lucide-react";
-import { button as W } from "./ui/recipes/button.js";
-const Ae = {
+import { markdownStyles as fe } from "./ui/markdown-styles.js";
+import { useStreamProcessor as ge } from "../../primitives/components/embedded-chat/use-stream-processor.js";
+import { DataSummaryGroup as ye } from "./data-summary-group.js";
+import { useState as I, useEffect as M, useRef as A, useMemo as E, useCallback as P } from "react";
+import { DynamicComponent as R, MessageLoading as be } from "./embedded-chat.js";
+import { Hammer as we, ChevronDown as G, Check as K, X as ke, XCircle as Ne, TriangleAlert as ve, CheckCircle as W, Clock as Ce, Loader2 as De, Circle as Se, Library as Te, ComponentIcon as Ae } from "lucide-react";
+import { button as X } from "./ui/recipes/button.js";
+const Ee = {
   "input-streaming": "Pending",
   "input-available": "Running",
   "approval-requested": "Awaiting Approval",
@@ -24,16 +24,16 @@ const Ae = {
   "output-error": "Error",
   "output-denied": "Denied"
 };
-function Ee(t) {
+function Pe(t) {
   if (!t || typeof t != "object") return !1;
   const a = t;
   return typeof a.type == "string" && a.type.startsWith("tool-");
 }
-const Pe = (t) => {
+const Ie = (t) => {
   if (!t || typeof t != "object" || !("status" in t)) return;
   const a = t.status;
   return typeof a == "string" ? a : void 0;
-}, Le = () => /* @__PURE__ */ e("div", { className: "flex space-x-1", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(
+}, je = () => /* @__PURE__ */ e("div", { className: "flex space-x-1", children: [0, 1, 2].map((t) => /* @__PURE__ */ e(
   "span",
   {
     className: "animate-bounce-dot opacity-30",
@@ -43,7 +43,7 @@ const Pe = (t) => {
     children: "."
   },
   t
-)) }), G = ({ name: t, Icon: a, props: i, componentType: s }) => /* @__PURE__ */ o("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
+)) }), H = ({ name: t, Icon: a, props: l, componentType: s }) => /* @__PURE__ */ o("div", { className: "border rounded-lg bg-gray-50 dark:bg-gray-dark-800 mb-3", children: [
   /* @__PURE__ */ o("div", { className: "flex justify-between px-4 py-2 text-xs", children: [
     /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
       /* @__PURE__ */ e(a, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
@@ -51,33 +51,33 @@ const Pe = (t) => {
     ] }),
     /* @__PURE__ */ e("div", { className: "flex items-center px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-200 dark:bg-white-alpha-200 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: s })
   ] }),
-  /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 font-mono px-4 py-2", children: JSON.stringify(i, null, 2) })
-] }), je = ({ name: t, props: a }) => /* @__PURE__ */ e(G, { name: t, Icon: Ne, props: a, componentType: "component" }), Ie = ({ name: t, props: a }) => /* @__PURE__ */ e(G, { name: t, Icon: ke, props: a, componentType: "artifact" }), _e = ({
+  /* @__PURE__ */ e("div", { className: "px-4 py-2", children: /* @__PURE__ */ e(Y, { value: l }) })
+] }), Le = ({ name: t, props: a }) => /* @__PURE__ */ e(H, { name: t, Icon: Ae, props: a, componentType: "component" }), _e = ({ name: t, props: a }) => /* @__PURE__ */ e(H, { name: t, Icon: Te, props: a, componentType: "artifact" }), $e = ({
   tool: t,
   componentDef: a,
-  renderText: i,
+  renderText: l,
   approvalId: s,
   messagePartsLength: u,
-  setApprovalDelayPending: n,
+  setApprovalDelayPending: r,
   addToolApprovalResponse: c,
-  sendMessage: d,
+  sendMessage: i,
   conversationId: f
 }) => {
-  const l = A(d);
-  l.current = d;
+  const d = A(i);
+  d.current = i;
   const m = A(c);
   m.current = c;
-  const p = A(n);
-  p.current = n;
+  const p = A(r);
+  p.current = r;
   const h = P(
     async (j = !0) => {
-      s && (p.current({ partCount: u }), m.current({ id: s, approved: j }), await l.current(void 0, { body: { conversationId: f } }));
+      s && (p.current({ partCount: u }), m.current({ id: s, approved: j }), await d.current(void 0, { body: { conversationId: f } }));
     },
     [s, u, f]
-  ), v = E(() => ({ tool: t, approve: h, renderMarkdown: i }), [t]);
-  return /* @__PURE__ */ e(a ? M : Me, { name: t.type, props: v, componentDef: a });
+  ), v = E(() => ({ tool: t, approve: h, renderMarkdown: l }), [t]);
+  return /* @__PURE__ */ e(a ? R : Me, { name: t.type, props: v, componentDef: a });
 };
-function H(t) {
+function J(t) {
   return t === null ? /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500 font-mono font-medium text-1xs", children: "null" }) : t === void 0 ? /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 italic text-xs font-medium", children: "undefined" }) : typeof t == "boolean" ? /* @__PURE__ */ e(
     "span",
     {
@@ -87,45 +87,45 @@ function H(t) {
       ),
       children: t ? "true" : "false"
     }
-  ) : typeof t == "number" ? /* @__PURE__ */ e("span", { className: "tabular-nums font-medium text-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200", children: t.toLocaleString() }) : typeof t == "string" ? /* @__PURE__ */ e("span", { className: "text-gray-800 dark:text-white-alpha-800 break-words", children: t }) : /* @__PURE__ */ e("span", { children: String(t) });
+  ) : typeof t == "number" ? /* @__PURE__ */ e("span", { className: "tabular-nums font-medium text-inkeep-expanded-primary-600 dark:text-inkeep-expanded-primary-200", children: String(t) }) : typeof t == "string" ? /* @__PURE__ */ e("span", { className: "text-gray-800 dark:text-white-alpha-800 break-words", children: t }) : /* @__PURE__ */ e("span", { children: String(t) });
 }
-const J = ({
+const Q = ({
   name: t,
   value: a,
-  isArrayIndex: i,
+  isArrayIndex: l,
   depth: s = 0
 }) => {
-  const [u, n] = L(s < 1), c = a !== null && typeof a == "object" && !Array.isArray(a), d = Array.isArray(a);
-  if (!(c || d))
+  const [u, r] = I(s < 1), c = a !== null && typeof a == "object" && !Array.isArray(a), i = Array.isArray(a);
+  if (!(c || i))
     return /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2 py-1 text-xs", children: [
       /* @__PURE__ */ e(
         "span",
         {
           className: y(
             "font-medium shrink-0",
-            i ? "text-gray-300 dark:text-white-alpha-300" : "text-gray-500 dark:text-white-alpha-500"
+            l ? "text-gray-300 dark:text-white-alpha-300" : "text-gray-500 dark:text-white-alpha-500"
           ),
-          children: i ? "—" : t
+          children: l ? "—" : t
         }
       ),
-      /* @__PURE__ */ e("span", { className: "min-w-0", children: H(a) })
+      /* @__PURE__ */ e("span", { className: "min-w-0", children: J(a) })
     ] });
-  const l = d ? a.map((p, h) => [String(h), p]) : Object.entries(a);
-  return l.length === 0 ? /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2 py-1 text-xs", children: [
+  const d = i ? a.map((p, h) => [String(h), p]) : Object.entries(a);
+  return d.length === 0 ? /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2 py-1 text-xs", children: [
     /* @__PURE__ */ e("span", { className: "font-medium text-gray-500 dark:text-white-alpha-500 shrink-0", children: t }),
-    /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 italic", children: d ? "empty list" : "empty" })
+    /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 italic", children: i ? "empty list" : "empty" })
   ] }) : /* @__PURE__ */ o("div", { children: [
     /* @__PURE__ */ o(
       "button",
       {
         type: "button",
         onClick: (p) => {
-          p.stopPropagation(), n(!u);
+          p.stopPropagation(), r(!u);
         },
         className: "flex items-center gap-1.5 py-1 text-xs hover:bg-gray-50 dark:hover:bg-white-alpha-50 -mx-1.5 px-1.5 rounded transition-colors w-full text-left",
         children: [
           /* @__PURE__ */ e(
-            X,
+            G,
             {
               className: y(
                 "h-3.5 w-3.5 text-gray-400 dark:text-white-alpha-400 shrink-0 transition-transform",
@@ -134,20 +134,20 @@ const J = ({
             }
           ),
           /* @__PURE__ */ e("span", { className: "font-medium text-gray-500 dark:text-white-alpha-500", children: t }),
-          !u && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 text-1xs ml-1", children: d ? `${l.length} item${l.length !== 1 ? "s" : ""}` : `${l.length} field${l.length !== 1 ? "s" : ""}` })
+          !u && /* @__PURE__ */ e("span", { className: "text-gray-400 dark:text-white-alpha-400 text-1xs ml-1", children: i ? `${d.length} item${d.length !== 1 ? "s" : ""}` : `${d.length} field${d.length !== 1 ? "s" : ""}` })
         ]
       }
     ),
-    u && /* @__PURE__ */ e("div", { className: "border-l-2 border-gray-200 dark:border-white-alpha-200 ml-1.5 pl-3", children: l.map(([p, h]) => /* @__PURE__ */ e(J, { name: p, value: h, isArrayIndex: d, depth: s + 1 }, p)) })
+    u && /* @__PURE__ */ e("div", { className: "border-l-2 border-gray-200 dark:border-white-alpha-200 ml-1.5 pl-3", children: d.map(([p, h]) => /* @__PURE__ */ e(Q, { name: p, value: h, isArrayIndex: i, depth: s + 1 }, p)) })
   ] });
-}, $e = ({ value: t }) => {
+}, Y = ({ value: t }) => {
   if (t == null || typeof t != "object")
-    return /* @__PURE__ */ e("span", { className: "text-xs", children: H(t) });
-  const a = Array.isArray(t) ? t.map((i, s) => [String(s), i]) : Object.entries(t);
-  return a.length === 0 ? /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-white-alpha-400 italic", children: "No arguments" }) : /* @__PURE__ */ e("div", { className: "space-y-1", children: a.map(([i, s]) => /* @__PURE__ */ e(J, { name: i, value: s, isArrayIndex: Array.isArray(t) }, i)) });
+    return /* @__PURE__ */ e("span", { className: "text-xs", children: J(t) });
+  const a = Array.isArray(t) ? t.map((l, s) => [String(s), l]) : Object.entries(t);
+  return a.length === 0 ? /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-white-alpha-400 italic", children: "No arguments" }) : /* @__PURE__ */ e("div", { className: "space-y-1", children: a.map(([l, s]) => /* @__PURE__ */ e(Q, { name: l, value: s, isArrayIndex: Array.isArray(t) }, l)) });
 }, Me = ({ props: t }) => {
-  const { tool: a, approve: i } = t, s = a.type, u = s.startsWith("tool-") ? s.slice(5) : s, n = a.state, c = a.approval?.id, d = !!c, f = n === "approval-requested", l = Pe(a.output), [m, p] = L(d), h = n ? Ae[n] ?? n : "tool";
-  return $(() => {
+  const { tool: a, approve: l } = t, s = a.type, u = s.startsWith("tool-") ? s.slice(5) : s, r = a.state, c = a.approval?.id, i = !!c, f = r === "approval-requested", d = Ie(a.output), [m, p] = I(i), h = r ? Ee[r] ?? r : "tool";
+  return M(() => {
     f && p(!0);
   }, [f]), /* @__PURE__ */ o("div", { className: "border rounded-lg mb-3 overflow-hidden", children: [
     /* @__PURE__ */ o(
@@ -160,34 +160,34 @@ const J = ({
         "data-expanded": m,
         children: [
           /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ o("div", { className: "font-medium flex items-center gap-2", children: [
-            /* @__PURE__ */ e(be, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
+            /* @__PURE__ */ e(we, { className: "w-3 h-3 text-gray-600 dark:text-white-alpha-600" }),
             /* @__PURE__ */ e("span", { children: u })
           ] }) }),
           /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ o("div", { className: "flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-2xs uppercase tracking-wider bg-gray-100 dark:bg-white-alpha-100 font-medium text-gray-700 dark:text-white-alpha-700 font-mono", children: [
               (() => {
-                switch (n) {
+                switch (r) {
                   case "input-streaming":
-                    return /* @__PURE__ */ e(Te, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(Se, { className: "w-3 h-3" });
                   case "input-available":
                     return /* @__PURE__ */ e(De, { className: "w-3 h-3 animate-spin" });
                   case "approval-requested":
-                    return /* @__PURE__ */ e(Se, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(Ce, { className: "w-3 h-3" });
                   case "approval-responded":
-                    return /* @__PURE__ */ e(K, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(W, { className: "w-3 h-3" });
                   case "output-available":
-                    return /* @__PURE__ */ e(K, { className: "w-3 h-3" });
+                    return /* @__PURE__ */ e(W, { className: "w-3 h-3" });
                   case "output-error":
-                    return /* @__PURE__ */ e(Ce, { className: "w-3 h-3" });
-                  case "output-denied":
                     return /* @__PURE__ */ e(ve, { className: "w-3 h-3" });
+                  case "output-denied":
+                    return /* @__PURE__ */ e(Ne, { className: "w-3 h-3" });
                   default:
                     return null;
                 }
               })(),
               h
             ] }),
-            /* @__PURE__ */ e(X, { className: "w-3.5 h-3.5 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180" })
+            /* @__PURE__ */ e(G, { className: "w-3.5 h-3.5 text-gray-500 dark:text-white-alpha-500 transition-all duration-200 transform rotate-0 group-data-[expanded=true]:rotate-180" })
           ] })
         ]
       }
@@ -220,7 +220,7 @@ const J = ({
                     "[scrollbar-width:thin] px-4",
                     "data-[expanded=true]:max-h-48 data-[expanded=true]:overflow-y-auto"
                   ),
-                  children: a.input != null && /* @__PURE__ */ e("div", { className: "text-xs py-2", children: /* @__PURE__ */ e($e, { value: a.input }) })
+                  children: a.input != null && /* @__PURE__ */ e("div", { className: "text-xs py-2", children: /* @__PURE__ */ e(Y, { value: a.input }) })
                 }
               )
             }
@@ -231,10 +231,10 @@ const J = ({
               {
                 type: "button",
                 className: y(
-                  W({ size: "xs", variant: "outline" }),
+                  X({ size: "xs", variant: "outline" }),
                   "px-2 py-1 rounded-md text-xs text-gray-700 dark:text-white-alpha-700"
                 ),
-                onClick: () => i(!1),
+                onClick: () => l(!1),
                 children: "Deny"
               }
             ),
@@ -243,23 +243,23 @@ const J = ({
               {
                 type: "button",
                 className: y(
-                  W({ size: "xs", variant: "primaryFilled" }),
+                  X({ size: "xs", variant: "primaryFilled" }),
                   "px-2 py-1 rounded-md text-xs gap-1"
                 ),
-                onClick: () => i(!0),
+                onClick: () => l(!0),
                 children: [
-                  /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
+                  /* @__PURE__ */ e(K, { className: "w-3 h-3" }),
                   "Approve"
                 ]
               }
             )
           ] }),
-          n === "output-available" && l && a.output != null && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
-            l === "approved" && /* @__PURE__ */ e(F, { className: "w-3 h-3" }),
-            l
+          r === "output-available" && d && a.output != null && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
+            d === "approved" && /* @__PURE__ */ e(K, { className: "w-3 h-3" }),
+            d
           ] }),
-          n === "output-denied" && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
-            /* @__PURE__ */ e(we, { className: "w-3 h-3" }),
+          r === "output-denied" && /* @__PURE__ */ o("div", { className: "flex justify-end items-center gap-1 whitespace-pre-wrap text-xs text-gray-700 dark:text-white-alpha-700 capitalize pb-3 px-4", children: [
+            /* @__PURE__ */ e(ke, { className: "w-3 h-3" }),
             h
           ] })
         ]
@@ -269,137 +269,140 @@ const J = ({
 }, Ze = ({
   className: t,
   componentStyles: a,
-  children: i,
+  children: l,
   isLast: s,
   ...u
 }) => {
-  const { message: n } = pe(), { logEvent: c } = le(), { conversationId: d, isStreaming: f, isLoading: l, setError: m, addToolApprovalResponse: p, sendMessage: h } = me(), {
-    aiChatSettings: { components: v, artifacts: R, headers: j }
-  } = de(), Q = j?.["x-emit-operations"] === "true", O = n.role === "user", Y = (f || l) && s && n.role === "assistant", { processedParts: Z, summaryTimings: ee, shouldShowInitialLoading: te, shouldShowStreamDelayLoading: ae } = fe(n.parts, Y, m), [C, z] = L(null), [re, I] = L(!1), g = A(null);
-  $(() => {
+  const { message: r } = ce(), { logEvent: c } = de(), { conversationId: i, isStreaming: f, isLoading: d, setError: m, addToolApprovalResponse: p, sendMessage: h } = ue(), {
+    aiChatSettings: { components: v, artifacts: O, headers: j }
+  } = pe(), Z = j?.["x-emit-operations"] === "true", z = r.role === "user", L = (f || d) && s && r.role === "assistant", { processedParts: ee, summaryTimings: te, shouldShowInitialLoading: ae, shouldShowStreamDelayLoading: re } = ge(r.parts, L, m), [C, q] = I(null), [ne, _] = I(!1), g = A(null);
+  M(() => {
     if (!C) {
-      I(!1), g.current && (clearTimeout(g.current), g.current = null);
+      _(!1), g.current && (clearTimeout(g.current), g.current = null);
       return;
     }
-    return I(!1), g.current && clearTimeout(g.current), g.current = window.setTimeout(() => {
-      I(!0);
+    return _(!1), g.current && clearTimeout(g.current), g.current = window.setTimeout(() => {
+      _(!0);
     }, 1e3), () => {
       g.current && (clearTimeout(g.current), g.current = null);
     };
-  }, [C]), $(() => {
-    C && (!s || n.parts.length > C.partCount) && z(null);
-  }, [C, s, n.parts.length]);
-  const q = E(() => n.parts.filter(ue), [n.parts]), U = E(
-    () => he(xe, a ?? {}),
+  }, [C]), M(() => {
+    C && (!s || r.parts.length > C.partCount || !L) && q(null);
+  }, [C, s, r.parts.length, L]);
+  const U = E(() => r.parts.filter(he), [r.parts]), V = E(
+    () => xe(fe, a ?? {}),
     [a]
-  ), V = P(
-    (r, x) => {
+  ), B = P(
+    (n, x) => {
       c({
         eventName: "assistant_message_inline_link_opened",
         properties: {
+          conversationId: i,
+          messageId: r.id,
           title: x?.toString(),
-          url: r
+          url: n
         }
       });
     },
-    [c]
-  ), B = P(
-    (r, x) => {
+    [c, i, r.id]
+  ), F = P(
+    (n, x) => {
       c({
         eventName: "assistant_code_block_copied",
         properties: {
-          conversationId: d,
-          language: r,
+          conversationId: i,
+          messageId: r.id,
+          language: n,
           code: x
         }
       });
     },
-    [c, d]
-  ), _ = P(
-    (r) => /* @__PURE__ */ e(
-      ce,
+    [c, i, r.id]
+  ), $ = P(
+    (n) => /* @__PURE__ */ e(
+      me,
       {
-        text: r,
-        componentStyles: U,
-        onLinkClick: V,
-        onCodeCopy: B,
-        artifacts: q
+        text: n,
+        componentStyles: V,
+        onLinkClick: B,
+        onCodeCopy: F,
+        artifacts: U
       }
     ),
-    [U, V, B, q]
-  ), ne = E(
+    [V, B, F, U]
+  ), se = E(
     () => y(
       "data-[role=user]:whitespace-pre-wrap mb-3 data-[role=user]:mb-0 [&[data-role=user]>p]:mb-0 max-w-full",
       t
     ),
     [t]
-  ), se = !O || n.parts.some(
-    (r) => r.type === "text" && r.text?.trim()
+  ), oe = !z || r.parts.some(
+    (n) => n.type === "text" && n.text?.trim()
   );
-  return /* @__PURE__ */ o(ie, { children: [
-    !se && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500", children: "No message content" }),
-    Z.map((r, x) => {
+  return /* @__PURE__ */ o(le, { children: [
+    !oe && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-white-alpha-500", children: "No message content" }),
+    ee.map((n, x) => {
       const k = {
-        "data-role": n.role,
-        "data-type": r?.type === "data-component" ? r.data.type : r?.type,
+        "data-role": r.role,
+        "data-type": n?.type === "data-component" ? n.data.type : n?.type,
         ...u,
-        className: ne
+        className: se
       };
-      switch (r?.type) {
+      switch (n?.type) {
         case "text":
-          return /* @__PURE__ */ e(D, { ...k, children: O ? r.text : _(r.text || "") }, x);
+          return /* @__PURE__ */ e(S, { ...k, children: z ? n.text : $(n.text || "") }, x);
         case "data-component": {
-          const { type: w } = r.data;
+          const { type: w } = n.data;
           switch (w) {
             case "text":
-              return /* @__PURE__ */ e("div", { ...k, children: _(r.data.text || "") }, x);
+              return /* @__PURE__ */ e("div", { ...k, children: $(n.data.text || "") }, x);
             default: {
-              const N = r.data, { name: b, props: T } = N, S = v?.[b];
-              return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(S ? M : je, { name: b, props: T, componentDef: S }) }, `${b}-${x}`);
+              const N = n.data, { name: b, props: T } = N, D = v?.[b];
+              return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(D ? R : Le, { name: b, props: T, componentDef: D }) }, `${b}-${x}`);
             }
           }
         }
         case "data-artifact": {
-          const w = r.data, { name: N, type: b, artifactSummary: T } = w;
+          const w = n.data, { name: N, type: b, artifactSummary: T } = w;
           if (b === "citation" && !T?.url) return null;
-          const S = R?.[b];
-          return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(S ? M : Ie, { name: b, props: T, componentDef: S }) }, `${N}-${x}`);
+          const D = O?.[b];
+          return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(D ? R : _e, { name: b, props: T, componentDef: D }) }, `${N}-${x}`);
         }
         case "summary-group": {
-          const w = ee.get(r.groupKey) || {
+          const w = te.get(n.groupKey) || {
             isCompleted: !1
           };
-          return /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(
-            ge,
+          return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(
+            ye,
             {
-              summaries: r.summaries || [],
+              summaries: n.summaries || [],
               isCompleted: w.isCompleted
             }
-          ) }, `${r.groupKey}-${x}`);
+          ) }, `${n.groupKey}-${x}`);
         }
         default: {
-          if (!Ee(r))
+          if (!Pe(n))
             return null;
-          const w = r, N = r.approval?.id;
-          return Q || N ? /* @__PURE__ */ e(D, { ...k, children: /* @__PURE__ */ e(
-            _e,
+          const w = n, N = n.approval?.id;
+          return Z || N ? /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(
+            $e,
             {
               tool: w,
               componentDef: v?.IkpTool,
-              renderText: _,
+              renderText: $,
               approvalId: N,
-              messagePartsLength: n.parts.length,
-              setApprovalDelayPending: z,
+              messagePartsLength: r.parts.length,
+              setApprovalDelayPending: q,
               addToolApprovalResponse: p,
               sendMessage: h,
-              conversationId: d
+              conversationId: i
             }
-          ) }, r.toolCallId ?? `${r.type}-${x}`) : null;
+          ) }, n.toolCallId ?? `${n.type}-${x}`) : null;
         }
       }
     }),
-    te && /* @__PURE__ */ e(ye, {}),
-    (ae || re) && /* @__PURE__ */ e(Le, {})
+    ae && /* @__PURE__ */ e(be, {}),
+    (re || ne) && /* @__PURE__ */ e(je, {})
   ] });
 };
 export {

package/dist/styled/components/modal.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import { Modal as l, Overlay as i, Content as n, Close as r } from "../../primitives/components/modal.js";
+import { Modal as l, Close as i, Content as n, Overlay as r } from "../../primitives/components/modal.js";
 import { cn as e } from "../utils.js";
 import { button as m } from "./ui/recipes/button.js";
 import { modal as s } from "./ui/recipes/modal.js";
 const M = l, C = ({
   className: t,
   ...a
-}) => /* @__PURE__ */ o(i, { className: e(s({ slot: "overlay" }), t), ...a }), h = ({
+}) => /* @__PURE__ */ o(r, { className: e(s({ slot: "overlay" }), t), ...a }), h = ({
   className: t,
   ...a
 }) => /* @__PURE__ */ o(
@@ -26,7 +26,7 @@ const M = l, C = ({
   className: t,
   ...a
 }) => /* @__PURE__ */ o(
-  r,
+  i,
   {
     className: e(
       s({ slot: "close" }),