@inkeep/agents-ui 0.17.3 → 0.17.5

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"),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;
+"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"),se=require("../../primitives/providers/config-provider.cjs"),re=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:s,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(s);p.current=s;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,s]=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(),s(!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,s=a.state,u=a.approval?.id,i=!!u,g=s==="approval-requested",d=me(a.output),[m,p]=o.useState(i),h=s?pe[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(!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"]})]}),s==="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]}),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:l,isLast:n,...x})=>{const{message:s}=re.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}}=se.useInkeepConfig(),X=E?.["x-emit-operations"]==="true",$=s.role==="user",q=(g||d)&&n&&s.role==="assistant",{processedParts:H,summaryTimings:J,shouldShowInitialLoading:Q,shouldShowStreamDelayLoading:Y}=de.useStreamProcessor(s.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||s.parts.length>S.partCount||!q)&&L(null)},[S,n,s.parts.length,q]);const _=o.useMemo(()=>s.parts.filter(oe.isCitationArtifact),[s.parts]),O=o.useMemo(()=>ie.merge(le.markdownStyles,a??{}),[a]),z=o.useCallback((r,f)=>{u({eventName:"assistant_message_inline_link_opened",properties:{conversationId:i,messageId:s.id,title:f?.toString(),url:r}})},[u,i,s.id]),U=o.useCallback((r,f)=>{u({eventName:"assistant_code_block_copied",properties:{conversationId:i,messageId:s.id,language:r,code:f}})},[u,i,s.id]),I=o.useCallback(r=>e.jsx(C.EmbeddedChatPrimitiveMarkdown,{text:r,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=!$||s.parts.some(r=>r.type==="text"&&r.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((r,f)=>{const v={"data-role":s.role,"data-type":r?.type==="data-component"?r.data.type:r?.type,...x,className:ee};switch(r?.type){case"text":return e.jsx(C.PrimitiveMessagePart,{...v,children:$?r.text:I(r.text||"")},f);case"data-component":{const{type:w}=r.data;switch(w){case"text":return e.jsx("div",{...v,children:I(r.data.text||"")},f);default:{const N=r.data,{name:j,props:D}=N,P=k?.[j],R=P?T.DynamicComponent:he;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(R,{name:j,props:{...D,messageId:s.id},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:fe;return e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(R,{name:j,props:{...D,messageId:s.id},componentDef:P})},`${N}-${f}`)}case"summary-group":{const w=J.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(!ue(r))return null;const w=r,N=r.approval?.id;return X||N?e.jsx(C.PrimitiveMessagePart,{...v,children:e.jsx(ge,{tool:w,componentDef:k?.IkpTool,renderText:I,approvalId:N,messagePartsLength:s.parts.length,setApprovalDelayPending:L,addToolApprovalResponse:p,sendMessage:h,conversationId:i})},r.toolCallId??`${r.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

@@ -11,7 +11,7 @@ import { cn as y } from "../utils.js";
 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 { useState as P, useEffect as M, useRef as A, useMemo as E, useCallback as I } 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";
@@ -24,12 +24,12 @@ const Ee = {
   "output-error": "Error",
   "output-denied": "Denied"
 };
-function Pe(t) {
+function Ie(t) {
   if (!t || typeof t != "object") return !1;
   const a = t;
   return typeof a.type == "string" && a.type.startsWith("tool-");
 }
-const Ie = (t) => {
+const Pe = (t) => {
   if (!t || typeof t != "object" || !("status" in t)) return;
   const a = t.status;
   return typeof a == "string" ? a : void 0;
@@ -69,7 +69,7 @@ const Ie = (t) => {
   m.current = c;
   const p = A(r);
   p.current = r;
-  const h = P(
+  const h = I(
     async (j = !0) => {
       s && (p.current({ partCount: u }), m.current({ id: s, approved: j }), await d.current(void 0, { body: { conversationId: f } }));
     },
@@ -95,7 +95,7 @@ const Q = ({
   isArrayIndex: l,
   depth: s = 0
 }) => {
-  const [u, r] = I(s < 1), c = a !== null && typeof a == "object" && !Array.isArray(a), i = Array.isArray(a);
+  const [u, r] = P(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(
@@ -146,7 +146,7 @@ const Q = ({
   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: 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";
+  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 = Pe(a.output), [m, p] = P(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: [
@@ -275,7 +275,7 @@ const Q = ({
 }) => {
   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);
+  } = 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] = P(null), [ne, _] = P(!1), g = A(null);
   M(() => {
     if (!C) {
       _(!1), g.current && (clearTimeout(g.current), g.current = null);
@@ -292,7 +292,7 @@ const Q = ({
   const U = E(() => r.parts.filter(he), [r.parts]), V = E(
     () => xe(fe, a ?? {}),
     [a]
-  ), B = P(
+  ), B = I(
     (n, x) => {
       c({
         eventName: "assistant_message_inline_link_opened",
@@ -305,7 +305,7 @@ const Q = ({
       });
     },
     [c, i, r.id]
-  ), F = P(
+  ), F = I(
     (n, x) => {
       c({
         eventName: "assistant_code_block_copied",
@@ -318,7 +318,7 @@ const Q = ({
       });
     },
     [c, i, r.id]
-  ), $ = P(
+  ), $ = I(
     (n) => /* @__PURE__ */ e(
       me,
       {
@@ -358,7 +358,14 @@ const Q = ({
               return /* @__PURE__ */ e("div", { ...k, children: $(n.data.text || "") }, x);
             default: {
               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}`);
+              return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(
+                D ? R : Le,
+                {
+                  name: b,
+                  props: { ...T, messageId: r.id },
+                  componentDef: D
+                }
+              ) }, `${b}-${x}`);
             }
           }
         }
@@ -366,7 +373,14 @@ const Q = ({
           const w = n.data, { name: N, type: b, artifactSummary: T } = w;
           if (b === "citation" && !T?.url) return null;
           const D = O?.[b];
-          return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(D ? R : _e, { name: b, props: T, componentDef: D }) }, `${N}-${x}`);
+          return /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(
+            D ? R : _e,
+            {
+              name: b,
+              props: { ...T, messageId: r.id },
+              componentDef: D
+            }
+          ) }, `${N}-${x}`);
         }
         case "summary-group": {
           const w = te.get(n.groupKey) || {
@@ -381,7 +395,7 @@ const Q = ({
           ) }, `${n.groupKey}-${x}`);
         }
         default: {
-          if (!Pe(n))
+          if (!Ie(n))
             return null;
           const w = n, N = n.approval?.id;
           return Z || N ? /* @__PURE__ */ e(S, { ...k, children: /* @__PURE__ */ e(

package/dist/styled/inkeep.css.cjs

@@ -654,6 +654,9 @@ video {
 .top-\\[5\\%\\] {
   top: 5%;
 }
+.isolate {
+  isolation: isolate;
+}
 .z-10 {
   z-index: 10;
 }

package/dist/styled/inkeep.css.js

@@ -655,6 +655,9 @@ video {
 .top-\\[5\\%\\] {
   top: 5%;
 }
+.isolate {
+  isolation: isolate;
+}
 .z-10 {
   z-index: 10;
 }

package/dist/types/config/ai.d.ts

@@ -3,6 +3,7 @@ import { GetHelpOption, CustomMessageAction } from './settings/actions';
 import { SearchAndChatFilters } from './filters';
 import { ComponentsConfig } from './components';
 import { FileUIPart } from 'ai';
+export type { FileUIPart } from 'ai';
 export interface InkeepAIChatSettings {
     /**
      * Headers for requests
@@ -43,6 +44,27 @@ export interface InkeepAIChatSettings {
      * @beta This type is subject to change.
      */
     files?: FileUIPart[];
+    /**
+     * Transform the file attachments displayed on a user message before they render as
+     * chips. Called per message at render time with the message's file parts, for live
+     * and history-loaded messages alike. The input includes all of the message's file
+     * parts regardless of MIME type; the widget's accepted-file-types filter is
+     * re-applied to the returned list, so unsupported types still never render. Return
+     * the parts to display: omit entries to hide them, or return shallow-modified copies
+     * (for example, with a friendlier filename) to rename them. Display-only, so it does
+     * not affect what is sent to the agent, stored, or visible to the LLM. Not a
+     * security boundary: hidden parts are still sent, stored in conversation history,
+     * and present in client memory, and if the transformer throws or returns a
+     * non-array, the widget fails open and renders the original untransformed parts.
+     * Null entries in a returned array are dropped, treated as intent to omit rather
+     * than as a failure. Every returned (whitelisted) part is displayed verbatim, so
+     * returning entries that were not in the input adds chips for files the user never
+     * attached. Must be pure and cheap, since it runs on every message render.
+     * Return new or copied objects and do not mutate the input parts.
+     *
+     * @beta This type is subject to change.
+     */
+    transformMessageFiles?: (files: FileUIPart[]) => Array<FileUIPart | null | undefined>;
     /**
      * The placeholder text to display in the chat input field when empty.
      * Use this to provide guidance on what kind of questions users can ask.

package/dist/types/config/components.d.ts

@@ -1,7 +1,9 @@
 import { ToolUIPart } from 'ai';
 import { Message } from '../message';
 export type ComponentsConfig<A extends Record<string, unknown>> = {
-    [K in keyof A]: (props: A[K], target: HTMLElement, context: null) => void | React.ReactNode;
+    [K in keyof A]: (props: A[K] & {
+        messageId: string;
+    }, target: HTMLElement, context: null) => void | React.ReactNode;
 } & {
     IkpMessage?(props: {
         message: Message;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkeep/agents-ui",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "description": "",
   "homepage": "",
   "repository": {