@uipath/apollo-react 4.5.1 → 4.5.3

package/dist/material/components/ap-chat/components/message/suggestions/chat-suggestions.cjs

@@ -68,6 +68,7 @@ const Suggestion = (0, material_namespaceObject.styled)('button')(({ padding })=
         outlineColor: 'var(--color-focus-indicator)',
         display: 'flex',
         alignItems: 'center',
+        textAlign: 'left',
         width: 'fit-content',
         gap: apollo_core_default().Spacing.SpacingXs,
         padding,

package/dist/material/components/ap-chat/components/message/suggestions/chat-suggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chat-suggestions.d.ts","sourceRoot":"","sources":["../../../../../../../src/material/components/ap-chat/components/message/suggestions/chat-suggestions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA8B,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AA2C5F,UAAU,6BAA6B;IACrC,WAAW,EAAE,uBAAuB,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,iBAAS,iCAAiC,CAAC,EACzC,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,GACjB,EAAE,6BAA6B,2CA2D/B;AAED,eAAO,MAAM,wBAAwB,qEAAgD,CAAC"}
+{"version":3,"file":"chat-suggestions.d.ts","sourceRoot":"","sources":["../../../../../../../src/material/components/ap-chat/components/message/suggestions/chat-suggestions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA8B,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AA4C5F,UAAU,6BAA6B;IACrC,WAAW,EAAE,uBAAuB,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,iBAAS,iCAAiC,CAAC,EACzC,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,GACjB,EAAE,6BAA6B,2CA2D/B;AAED,eAAO,MAAM,wBAAwB,qEAAgD,CAAC"}

package/dist/material/components/ap-chat/components/message/suggestions/chat-suggestions.js

@@ -29,6 +29,7 @@ const Suggestion = styled('button')(({ padding })=>({
         outlineColor: 'var(--color-focus-indicator)',
         display: 'flex',
         alignItems: 'center',
+        textAlign: 'left',
         width: 'fit-content',
         gap: apollo_core.Spacing.SpacingXs,
         padding,

package/dist/material/components/ap-tool-call/ApToolCall.cjs

@@ -43,12 +43,16 @@ const Error_namespaceObject = require("@mui/icons-material/Error");
 var Error_default = /*#__PURE__*/ __webpack_require__.n(Error_namespaceObject);
 const KeyboardArrowDown_namespaceObject = require("@mui/icons-material/KeyboardArrowDown");
 var KeyboardArrowDown_default = /*#__PURE__*/ __webpack_require__.n(KeyboardArrowDown_namespaceObject);
+const KeyboardArrowRight_namespaceObject = require("@mui/icons-material/KeyboardArrowRight");
+var KeyboardArrowRight_default = /*#__PURE__*/ __webpack_require__.n(KeyboardArrowRight_namespaceObject);
 const material_namespaceObject = require("@mui/material");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
-const external_ToolCallSection_cjs_namespaceObject = require("./ToolCallSection.cjs");
+const external_ApToolCall_types_cjs_namespaceObject = require("./ApToolCall.types.cjs");
+const ToolCallSection_cjs_namespaceObject = require("./components/ToolCallSection.cjs");
+const traceIconUtils_cjs_namespaceObject = require("./utils/traceIconUtils.cjs");
 const Container = (0, material_namespaceObject.styled)('div')({
     fontSize: apollo_core_default().FontFamily.FontMSize,
     padding: apollo_core_default().Spacing.SpacingS,
@@ -94,13 +98,20 @@ const ArrowIcon = (0, material_namespaceObject.styled)(KeyboardArrowDown_default
         marginLeft: apollo_core_default().Spacing.SpacingXs,
         transform: expanded ? 'rotate(180deg)' : 'none'
     }));
+const TraceArrowIcon = (0, material_namespaceObject.styled)(KeyboardArrowRight_default(), {
+    shouldForwardProp: (prop)=>'expanded' !== prop
+})(({ expanded })=>({
+        transition: 'transform 0.2s ease',
+        transform: expanded ? 'rotate(90deg)' : 'none',
+        flexShrink: 0
+    }));
 const SectionsContainer = (0, material_namespaceObject.styled)('div', {
     shouldForwardProp: (prop)=>'expanded' !== prop
 })(({ expanded })=>({
         marginLeft: apollo_core_default().Spacing.SpacingS,
         paddingLeft: apollo_core_default().Spacing.SpacingS,
         borderLeft: `${apollo_core_default().Border.BorderThickS} solid var(--color-border)`,
-        maxHeight: expanded ? '500px' : '0',
+        maxHeight: expanded ? 'fit-content' : '0',
         overflow: 'hidden',
         transition: 'max-height 0.2s ease',
         maxWidth: `calc(100% - ${apollo_core_default().Spacing.SpacingBase})`,
@@ -110,47 +121,107 @@ const SectionsContainer = (0, material_namespaceObject.styled)('div', {
             outlineOffset: '-1px'
         }
     }));
-const ExecutionItemsContainer = (0, material_namespaceObject.styled)('div')({
+const TraceItemsContainer = (0, material_namespaceObject.styled)('div')({
     marginTop: apollo_core_default().Spacing.SpacingMicro,
     paddingLeft: apollo_core_default().Spacing.SpacingMicro
 });
-const ExecutionItemContainer = (0, material_namespaceObject.styled)('div')({
-    display: 'flex',
-    alignItems: 'center',
-    gap: apollo_core_default().Spacing.SpacingS,
-    marginBottom: apollo_core_default().Spacing.SpacingS
+const TraceItemContainer = (0, material_namespaceObject.styled)('div', {
+    shouldForwardProp: (prop)=>'clickable' !== prop
+})(({ clickable })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: apollo_core_default().Spacing.SpacingXs,
+        marginBottom: apollo_core_default().Spacing.SpacingS,
+        ...clickable && {
+            cursor: 'pointer',
+            borderRadius: apollo_core_default().Spacing.SpacingMicro,
+            '&:hover': {
+                backgroundColor: 'var(--color-background-hover)'
+            }
+        }
+    }));
+const TraceName = (0, material_namespaceObject.styled)('span')({
+    display: 'inline-block',
+    flex: 1
 });
-const ExecutionIcon = (0, material_namespaceObject.styled)('span')({
+const ArrowPlaceholder = (0, material_namespaceObject.styled)('span')({
+    width: '20px',
+    flexShrink: 0,
+    display: 'inline-block'
+});
+const TraceIcon = (0, material_namespaceObject.styled)('span')({
     display: 'inline-flex',
     alignItems: 'center',
-    width: apollo_core_default().Spacing.SpacingM,
-    height: apollo_core_default().Spacing.SpacingM
-});
-const ExecutionName = (0, material_namespaceObject.styled)('span')({
-    display: 'inline-block',
-    flex: 1
+    flexShrink: 0,
+    width: '16px',
+    height: '16px',
+    '& svg': {
+        width: '100%',
+        height: '100%'
+    }
 });
-const ExecutionItem = ({ child })=>{
-    const icon = (0, external_react_namespaceObject.useMemo)(()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExecutionIcon, {}), [
+function getVisibleChildren(node) {
+    const result = [];
+    for (const child of node.children ?? [])if ('llmCall' !== child.data.type && 'agentOutput' !== child.data.type) result.push(child);
+    return result;
+}
+const TraceItem = ({ child, depth = 0 })=>{
+    const visibleChildren = (0, external_react_namespaceObject.useMemo)(()=>getVisibleChildren(child), [
+        child
+    ]);
+    const hasChildren = visibleChildren.length > 0;
+    const [itemExpanded, setItemExpanded] = (0, external_react_namespaceObject.useState)(false);
+    const iconSvg = (0, external_react_namespaceObject.useMemo)(()=>(0, traceIconUtils_cjs_namespaceObject.getSpanIconSvg)(child.data), [
         child.data
     ]);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(ExecutionItemContainer, {
+    const handleKeyDown = (event)=>{
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            setItemExpanded((prev)=>!prev);
+        }
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            icon,
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExecutionName, {
-                children: child.name
-            })
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(TraceItemContainer, {
+                clickable: hasChildren,
+                style: {
+                    paddingLeft: depth > 0 ? `calc(${depth} * ${apollo_core_default().Spacing.SpacingM})` : void 0
+                },
+                onClick: hasChildren ? ()=>setItemExpanded((prev)=>!prev) : void 0,
+                role: hasChildren ? 'button' : void 0,
+                tabIndex: hasChildren ? 0 : void 0,
+                onKeyDown: hasChildren ? handleKeyDown : void 0,
+                "aria-expanded": hasChildren ? itemExpanded : void 0,
+                children: [
+                    hasChildren ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceArrowIcon, {
+                        fontSize: "small",
+                        expanded: itemExpanded
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ArrowPlaceholder, {}),
+                    iconSvg && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceIcon, {
+                        dangerouslySetInnerHTML: {
+                            __html: iconSvg
+                        }
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceName, {
+                        children: child.name.replace('_', ' ')
+                    })
+                ]
+            }),
+            hasChildren && itemExpanded && visibleChildren.map((c)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceItemContent, {
+                    child: c,
+                    depth: depth + 1
+                }, c.key))
         ]
     });
 };
-const ExecutionItemContent = /*#__PURE__*/ external_react_default().memo(ExecutionItem);
+const TraceItemContent = /*#__PURE__*/ external_react_default().memo(TraceItem);
 const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref)=>{
-    const { span, toolName, input, output, isError, startTime, endTime } = props;
+    const { span, toolName, input, output, isError, startTime, endTime, displayMode } = props;
     const { _ } = (0, react_namespaceObject.useLingui)();
     const [toolCallExpanded, setToolCallExpanded] = (0, external_react_namespaceObject.useState)(false);
     const [expandedSections, setExpandedSections] = (0, external_react_namespaceObject.useState)({
         input: false,
-        execution: false,
+        traces: false,
         escalation: true,
         output: false,
         errors: false
@@ -278,6 +349,16 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
     }, [
         toolCallExpanded
     ]);
+    if (displayMode === external_ApToolCall_types_cjs_namespaceObject.ConversationalDisplayModeTypes.ToolNameOnly) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Container, {
+        ref: ref,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Header, {
+            children: [
+                renderStatusIcon,
+                " ",
+                getStatusText
+            ]
+        })
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(Container, {
         ref: ref,
         children: [
@@ -299,8 +380,12 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(SectionsContainer, {
                 expanded: toolCallExpanded,
+                "aria-hidden": !toolCallExpanded,
+                ...!toolCallExpanded && {
+                    inert: true
+                },
                 children: [
-                    (input || span && getAttributes(span.data).arguments) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolCallSection_cjs_namespaceObject.ToolCallSection, {
+                    (input || span && getAttributes(span.data).arguments) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCallSection_cjs_namespaceObject.ToolCallSection, {
                         type: "input",
                         title: _({
                             id: 'tool-call.input'
@@ -308,27 +393,28 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
                         isExpanded: expandedSections['input'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['input']: !prev['input']
+                                    input: !prev['input']
                                 })),
                         data: input || (span ? getAttributes(span.data).arguments : void 0)
                     }),
-                    span?.children?.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolCallSection_cjs_namespaceObject.ToolCallSection, {
-                        type: "execution",
+                    displayMode === external_ApToolCall_types_cjs_namespaceObject.ConversationalDisplayModeTypes.FullTrace && span?.children?.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCallSection_cjs_namespaceObject.ToolCallSection, {
+                        type: "traces",
                         title: _({
-                            id: 'tool-call.execution'
+                            id: 'tool-call.traces'
                         }),
-                        isExpanded: expandedSections['execution'],
+                        isExpanded: expandedSections['traces'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['execution']: !prev['execution']
+                                    traces: !prev['traces']
                                 })),
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExecutionItemsContainer, {
-                            children: span.children?.map((child)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ExecutionItemContent, {
-                                    child: child
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceItemsContainer, {
+                            children: getVisibleChildren(span).map((child)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TraceItemContent, {
+                                    child: child,
+                                    depth: 0
                                 }, child.key))
                         })
                     }) : null,
-                    taskUrls.length > 0 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolCallSection_cjs_namespaceObject.ToolCallSection, {
+                    taskUrls.length > 0 ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCallSection_cjs_namespaceObject.ToolCallSection, {
                         type: "escalation",
                         title: _({
                             id: 'tool-call.escalation'
@@ -336,13 +422,13 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
                         isExpanded: expandedSections['escalation'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['escalation']: !prev['escalation']
+                                    escalation: !prev['escalation']
                                 })),
                         data: {
                             taskUrls
                         }
                     }) : null,
-                    (isError && output || span && getAttributes(span.data).error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolCallSection_cjs_namespaceObject.ToolCallSection, {
+                    (isError && output || span && getAttributes(span.data).error) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCallSection_cjs_namespaceObject.ToolCallSection, {
                         type: "errors",
                         title: _({
                             id: 'tool-call.errors'
@@ -350,11 +436,11 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
                         isExpanded: expandedSections['errors'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['errors']: !prev['errors']
+                                    errors: !prev['errors']
                                 })),
                         data: isError && output ? output : span ? getAttributes(span.data).error : {}
                     }),
-                    (!isError && output || span && getAttributes(span.data).result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ToolCallSection_cjs_namespaceObject.ToolCallSection, {
+                    (!isError && output || span && getAttributes(span.data).result) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ToolCallSection_cjs_namespaceObject.ToolCallSection, {
                         type: "output",
                         title: _({
                             id: 'tool-call.output'
@@ -362,7 +448,7 @@ const ApToolCall = /*#__PURE__*/ external_react_default().forwardRef((props, ref
                         isExpanded: expandedSections['output'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['output']: !prev['output']
+                                    output: !prev['output']
                                 })),
                         data: output || (span ? getAttributes(span.data).result : {}) || {}
                     })

package/dist/material/components/ap-tool-call/ApToolCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApToolCall.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tool-call/ApToolCall.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,oBAAoB,CAAC;AAuH5E,eAAO,MAAM,UAAU,wFA2RrB,CAAC"}
+{"version":3,"file":"ApToolCall.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tool-call/ApToolCall.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,oBAAoB,CAAC;AAyL5E,eAAO,MAAM,UAAU,wFAySrB,CAAC"}

package/dist/material/components/ap-tool-call/ApToolCall.js

@@ -1,12 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLingui } from "@lingui/react";
 import CheckCircle from "@mui/icons-material/CheckCircle";
 import Error from "@mui/icons-material/Error";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import { CircularProgress, styled } from "@mui/material";
 import apollo_core from "@uipath/apollo-core";
 import react, { useCallback, useEffect, useMemo, useState } from "react";
-import { ToolCallSection } from "./ToolCallSection.js";
+import { ConversationalDisplayModeTypes } from "./ApToolCall.types.js";
+import { ToolCallSection } from "./components/ToolCallSection.js";
+import { getSpanIconSvg } from "./utils/traceIconUtils.js";
 const Container = styled('div')({
     fontSize: apollo_core.FontFamily.FontMSize,
     padding: apollo_core.Spacing.SpacingS,
@@ -52,13 +55,20 @@ const ArrowIcon = styled(KeyboardArrowDown, {
         marginLeft: apollo_core.Spacing.SpacingXs,
         transform: expanded ? 'rotate(180deg)' : 'none'
     }));
+const TraceArrowIcon = styled(KeyboardArrowRight, {
+    shouldForwardProp: (prop)=>'expanded' !== prop
+})(({ expanded })=>({
+        transition: 'transform 0.2s ease',
+        transform: expanded ? 'rotate(90deg)' : 'none',
+        flexShrink: 0
+    }));
 const SectionsContainer = styled('div', {
     shouldForwardProp: (prop)=>'expanded' !== prop
 })(({ expanded })=>({
         marginLeft: apollo_core.Spacing.SpacingS,
         paddingLeft: apollo_core.Spacing.SpacingS,
         borderLeft: `${apollo_core.Border.BorderThickS} solid var(--color-border)`,
-        maxHeight: expanded ? '500px' : '0',
+        maxHeight: expanded ? 'fit-content' : '0',
         overflow: 'hidden',
         transition: 'max-height 0.2s ease',
         maxWidth: `calc(100% - ${apollo_core.Spacing.SpacingBase})`,
@@ -68,47 +78,107 @@ const SectionsContainer = styled('div', {
             outlineOffset: '-1px'
         }
     }));
-const ExecutionItemsContainer = styled('div')({
+const TraceItemsContainer = styled('div')({
     marginTop: apollo_core.Spacing.SpacingMicro,
     paddingLeft: apollo_core.Spacing.SpacingMicro
 });
-const ExecutionItemContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    gap: apollo_core.Spacing.SpacingS,
-    marginBottom: apollo_core.Spacing.SpacingS
+const TraceItemContainer = styled('div', {
+    shouldForwardProp: (prop)=>'clickable' !== prop
+})(({ clickable })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: apollo_core.Spacing.SpacingXs,
+        marginBottom: apollo_core.Spacing.SpacingS,
+        ...clickable && {
+            cursor: 'pointer',
+            borderRadius: apollo_core.Spacing.SpacingMicro,
+            '&:hover': {
+                backgroundColor: 'var(--color-background-hover)'
+            }
+        }
+    }));
+const TraceName = styled('span')({
+    display: 'inline-block',
+    flex: 1
 });
-const ExecutionIcon = styled('span')({
+const ArrowPlaceholder = styled('span')({
+    width: '20px',
+    flexShrink: 0,
+    display: 'inline-block'
+});
+const TraceIcon = styled('span')({
     display: 'inline-flex',
     alignItems: 'center',
-    width: apollo_core.Spacing.SpacingM,
-    height: apollo_core.Spacing.SpacingM
-});
-const ExecutionName = styled('span')({
-    display: 'inline-block',
-    flex: 1
+    flexShrink: 0,
+    width: '16px',
+    height: '16px',
+    '& svg': {
+        width: '100%',
+        height: '100%'
+    }
 });
-const ExecutionItem = ({ child })=>{
-    const icon = useMemo(()=>/*#__PURE__*/ jsx(ExecutionIcon, {}), [
+function getVisibleChildren(node) {
+    const result = [];
+    for (const child of node.children ?? [])if ('llmCall' !== child.data.type && 'agentOutput' !== child.data.type) result.push(child);
+    return result;
+}
+const TraceItem = ({ child, depth = 0 })=>{
+    const visibleChildren = useMemo(()=>getVisibleChildren(child), [
+        child
+    ]);
+    const hasChildren = visibleChildren.length > 0;
+    const [itemExpanded, setItemExpanded] = useState(false);
+    const iconSvg = useMemo(()=>getSpanIconSvg(child.data), [
         child.data
     ]);
-    return /*#__PURE__*/ jsxs(ExecutionItemContainer, {
+    const handleKeyDown = (event)=>{
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            setItemExpanded((prev)=>!prev);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            icon,
-            /*#__PURE__*/ jsx(ExecutionName, {
-                children: child.name
-            })
+            /*#__PURE__*/ jsxs(TraceItemContainer, {
+                clickable: hasChildren,
+                style: {
+                    paddingLeft: depth > 0 ? `calc(${depth} * ${apollo_core.Spacing.SpacingM})` : void 0
+                },
+                onClick: hasChildren ? ()=>setItemExpanded((prev)=>!prev) : void 0,
+                role: hasChildren ? 'button' : void 0,
+                tabIndex: hasChildren ? 0 : void 0,
+                onKeyDown: hasChildren ? handleKeyDown : void 0,
+                "aria-expanded": hasChildren ? itemExpanded : void 0,
+                children: [
+                    hasChildren ? /*#__PURE__*/ jsx(TraceArrowIcon, {
+                        fontSize: "small",
+                        expanded: itemExpanded
+                    }) : /*#__PURE__*/ jsx(ArrowPlaceholder, {}),
+                    iconSvg && /*#__PURE__*/ jsx(TraceIcon, {
+                        dangerouslySetInnerHTML: {
+                            __html: iconSvg
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(TraceName, {
+                        children: child.name.replace('_', ' ')
+                    })
+                ]
+            }),
+            hasChildren && itemExpanded && visibleChildren.map((c)=>/*#__PURE__*/ jsx(TraceItemContent, {
+                    child: c,
+                    depth: depth + 1
+                }, c.key))
         ]
     });
 };
-const ExecutionItemContent = /*#__PURE__*/ react.memo(ExecutionItem);
+const TraceItemContent = /*#__PURE__*/ react.memo(TraceItem);
 const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
-    const { span, toolName, input, output, isError, startTime, endTime } = props;
+    const { span, toolName, input, output, isError, startTime, endTime, displayMode } = props;
     const { _ } = useLingui();
     const [toolCallExpanded, setToolCallExpanded] = useState(false);
     const [expandedSections, setExpandedSections] = useState({
         input: false,
-        execution: false,
+        traces: false,
         escalation: true,
         output: false,
         errors: false
@@ -236,6 +306,16 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
     }, [
         toolCallExpanded
     ]);
+    if (displayMode === ConversationalDisplayModeTypes.ToolNameOnly) return /*#__PURE__*/ jsx(Container, {
+        ref: ref,
+        children: /*#__PURE__*/ jsxs(Header, {
+            children: [
+                renderStatusIcon,
+                " ",
+                getStatusText
+            ]
+        })
+    });
     return /*#__PURE__*/ jsxs(Container, {
         ref: ref,
         children: [
@@ -257,6 +337,10 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
             }),
             /*#__PURE__*/ jsxs(SectionsContainer, {
                 expanded: toolCallExpanded,
+                "aria-hidden": !toolCallExpanded,
+                ...!toolCallExpanded && {
+                    inert: true
+                },
                 children: [
                     (input || span && getAttributes(span.data).arguments) && /*#__PURE__*/ jsx(ToolCallSection, {
                         type: "input",
@@ -266,23 +350,24 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                         isExpanded: expandedSections['input'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['input']: !prev['input']
+                                    input: !prev['input']
                                 })),
                         data: input || (span ? getAttributes(span.data).arguments : void 0)
                     }),
-                    span?.children?.length ? /*#__PURE__*/ jsx(ToolCallSection, {
-                        type: "execution",
+                    displayMode === ConversationalDisplayModeTypes.FullTrace && span?.children?.length ? /*#__PURE__*/ jsx(ToolCallSection, {
+                        type: "traces",
                         title: _({
-                            id: 'tool-call.execution'
+                            id: 'tool-call.traces'
                         }),
-                        isExpanded: expandedSections['execution'],
+                        isExpanded: expandedSections['traces'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['execution']: !prev['execution']
+                                    traces: !prev['traces']
                                 })),
-                        children: /*#__PURE__*/ jsx(ExecutionItemsContainer, {
-                            children: span.children?.map((child)=>/*#__PURE__*/ jsx(ExecutionItemContent, {
-                                    child: child
+                        children: /*#__PURE__*/ jsx(TraceItemsContainer, {
+                            children: getVisibleChildren(span).map((child)=>/*#__PURE__*/ jsx(TraceItemContent, {
+                                    child: child,
+                                    depth: 0
                                 }, child.key))
                         })
                     }) : null,
@@ -294,7 +379,7 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                         isExpanded: expandedSections['escalation'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['escalation']: !prev['escalation']
+                                    escalation: !prev['escalation']
                                 })),
                         data: {
                             taskUrls
@@ -308,7 +393,7 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                         isExpanded: expandedSections['errors'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['errors']: !prev['errors']
+                                    errors: !prev['errors']
                                 })),
                         data: isError && output ? output : span ? getAttributes(span.data).error : {}
                     }),
@@ -320,7 +405,7 @@ const ApToolCall = /*#__PURE__*/ react.forwardRef((props, ref)=>{
                         isExpanded: expandedSections['output'],
                         onToggle: ()=>setExpandedSections((prev)=>({
                                     ...prev,
-                                    ['output']: !prev['output']
+                                    output: !prev['output']
                                 })),
                         data: output || (span ? getAttributes(span.data).result : {}) || {}
                     })

package/dist/material/components/ap-tool-call/ApToolCall.types.cjs

@@ -1,5 +1,16 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
 (()=>{
     __webpack_require__.r = (exports1)=>{
         if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
@@ -12,7 +23,18 @@ var __webpack_require__ = {};
 })();
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
-for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+__webpack_require__.d(__webpack_exports__, {
+    ConversationalDisplayModeTypes: ()=>ConversationalDisplayModeTypes
+});
+const ConversationalDisplayModeTypes = {
+    FullTrace: 'FullTrace',
+    InputsAndOutputs: 'InputsAndOutputs',
+    ToolNameOnly: 'ToolNameOnly'
+};
+exports.ConversationalDisplayModeTypes = __webpack_exports__.ConversationalDisplayModeTypes;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ConversationalDisplayModeTypes"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/material/components/ap-tool-call/ApToolCall.types.d.ts

@@ -2,6 +2,7 @@ import type React from 'react';
 export interface TSpan {
     id?: string;
     name?: string;
+    type?: string;
     status?: 'unset' | 'ok' | 'error';
     startTime?: string;
     endTime?: string;
@@ -13,6 +14,12 @@ export interface ITreeNode<T = any> {
     data: T;
     children?: ITreeNode<T>[];
 }
+export declare const ConversationalDisplayModeTypes: {
+    readonly FullTrace: "FullTrace";
+    readonly InputsAndOutputs: "InputsAndOutputs";
+    readonly ToolNameOnly: "ToolNameOnly";
+};
+export type ConversationalDisplayMode = 'FullTrace' | 'InputsAndOutputs' | 'ToolNameOnly';
 export interface ApToolCallProps extends React.HTMLAttributes<HTMLDivElement> {
     span?: ITreeNode<TSpan>;
     toolName?: string;
@@ -21,8 +28,9 @@ export interface ApToolCallProps extends React.HTMLAttributes<HTMLDivElement> {
     isError?: boolean;
     startTime?: string;
     endTime?: string;
+    displayMode?: ConversationalDisplayMode;
 }
-export type ToolCallSectionType = 'input' | 'output' | 'execution' | 'errors' | 'escalation';
+export type ToolCallSectionType = 'input' | 'output' | 'traces' | 'errors' | 'escalation';
 export interface ToolCallSectionProps {
     type: ToolCallSectionType;
     title: string;

package/dist/material/components/ap-tool-call/ApToolCall.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApToolCall.types.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tool-call/ApToolCall.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;CAC3C;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAE3E,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IAEtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE7F,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"ApToolCall.types.d.ts","sourceRoot":"","sources":["../../../../src/material/components/ap-tool-call/ApToolCall.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,KAAK;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;CAC3C;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,GAAG,GAAG;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,8BAA8B;;;;CAIjC,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,kBAAkB,GAAG,cAAc,CAAC;AAE1F,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAE3E,IAAI,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IAEtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,CAAC;AAE1F,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}