@stack-spot/ai-chat-widget 2.2.0 → 2.2.1-beta.1

package/dist/views/MessageInput/styled.js

@@ -1,3 +1,4 @@
+import { Flex } from '@citric/core';
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
 const CONTEXT_BAR_HEIGHT = 38;
@@ -299,4 +300,15 @@ export const MessageInputBox = styled.div `
     }
   }
 `;
+export const RowWrapperStyled = styled(Flex) `
+  width: 100%;
+  justify-content: end;
+  margin-right: 4px;
+  ul {
+    margin: 0;
+  }
+  .button-select-model {
+    border-radius: 15px !important;
+  }
+`;
 //# sourceMappingURL=styled.js.map

package/dist/views/MessageInput/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAC7B,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAClC,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAC5B,MAAM,uBAAuB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKvB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;wBAcpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;0BAgBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;0BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAG/C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0B1B,kBAAkB,GAAG,wBAAwB;wBAC3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA2BpB,iBAAiB,GAAG,uBAAuB;wBACzC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0Bf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;0BAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;wBAOxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAuEhB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;8BAmBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;cAStC,gBAAgB;;;;;;;;CAQ7B,CAAA"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../src/views/MessageInput/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,kBAAkB,GAAG,EAAE,CAAA;AAC7B,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAClC,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAC5B,MAAM,uBAAuB,GAAG,CAAC,CAAA;AACjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKvB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;wBAcpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;0BAgBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;0BAGtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;CAG/C,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;sBA0B1B,kBAAkB,GAAG,wBAAwB;wBAC3C,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA2BpB,iBAAiB,GAAG,uBAAuB;wBACzC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0Bf,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;0BAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;wBAOxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAuEhB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;8BACtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;gCAQpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;oBAOlC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY;;;;;;;;;;;;;;;;;;;8BAmBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;cAStC,gBAAgB;;;;;;;;CAQ7B,CAAA;AACD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;;;;CAU3C,CAAA"}

package/dist/views/Steps/FlowChart/NodeStep.js

@@ -8,6 +8,6 @@ import { getStatusIcon, getTitle, getTypeIcon } from '../utils.js';
 import { HandleGroup } from './HandleGroup.js';
 export const NodeStep = ({ data: { step, index, nextStatus, onClick } }) => {
     const t = useStepsDictionary();
-    return (_jsxs("div", { className: listToClass(['chart-node', step.type, nextStatus]), onClick: onClick, onKeyDown: e => e.key === 'Enter' && onClick?.(), tabIndex: 0, role: "button", "aria-label": getTitle(t, step, index), children: [_jsxs("header", { children: [_jsx(Icon, { ...getTypeIcon(step.type) }), _jsx(Text, { className: "step-index", children: getTitle(t, step, index) }), getStatusIcon(step.status)] }), step.type === 'planning' && _jsx(Text, { className: "step-title", children: step.goal }), step.type === 'step' && step.input && _jsx(Text, { className: "step-title", children: step.input }), step.type === 'step' && _jsxs("div", { className: "step-details", children: [_jsx(Text, { className: listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools']), children: step.output }), !!step.attempts[0].tools?.length && _jsx(StackedBadge, { label: t.tools, images: step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name, url: tool.image, icon: _jsx(Icon, { icon: "Cog" }) })) })] }), _jsx(HandleGroup, { renderSource: step.type !== 'answer', renderTarget: step.type !== 'planning' })] }));
+    return (_jsxs("div", { className: listToClass(['chart-node', step.type, nextStatus]), onClick: onClick, onKeyDown: e => e.key === 'Enter' && onClick?.(), tabIndex: 0, role: "button", "aria-label": getTitle(t, step, index), children: [_jsxs("header", { children: [_jsx(Icon, { ...getTypeIcon(step.type) }), _jsx(Text, { className: "step-index", children: getTitle(t, step, index) }), getStatusIcon(step.status)] }), step.type === 'planning' && _jsx(Text, { className: "step-title", children: step.goal }), step.type === 'step' && step.input && _jsx(Text, { className: "step-title", children: step.input }), step.type === 'step' && _jsxs("div", { className: "step-details", children: [_jsx(Text, { className: listToClass(['step-description', !!step.attempts[0].tools?.length && 'with-tools']), children: step.output }), !!step.attempts[0].tools?.length && _jsx(StackedBadge, { label: t.tools, images: step.attempts[0].tools?.slice(0, 3).map(tool => ({ key: tool.id, name: tool.name ?? '', url: tool.image, icon: _jsx(Icon, { icon: "Cog" }) })) })] }), _jsx(HandleGroup, { renderSource: step.type !== 'answer', renderTarget: step.type !== 'planning' })] }));
 };
 //# sourceMappingURL=NodeStep.js.map

package/dist/views/Steps/FlowChart/NodeStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeStep.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO3C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAS,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,EAAE,EAChD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,aAEpC,6BACE,KAAC,IAAI,OAAK,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EACpC,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,GAAQ,EAC7D,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IACpB,EACR,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC3E,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,GAAQ,EACtF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,eAAK,SAAS,EAAC,cAAc,aACpD,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,YAAY,CAAC,CAAC,YACjG,IAAI,CAAC,MAAM,GACP,EACN,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAC,YAAY,IAChD,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAC7C,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAAE,CAAC,CACxF,GACD,IACE,EACN,KAAC,WAAW,IAAC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,GAAI,IACzF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"NodeStep.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/NodeStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAO3C,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,EAAS,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAE9B,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CAAC,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE,EAAE,EAChD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,gBACD,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,aAEpC,6BACE,KAAC,IAAI,OAAK,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,EACpC,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,GAAQ,EAC7D,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IACpB,EACR,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC3E,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,YAAY,YAAE,IAAI,CAAC,KAAK,GAAQ,EACtF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,eAAK,SAAS,EAAC,cAAc,aACpD,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,YAAY,CAAC,CAAC,YACjG,IAAI,CAAC,MAAM,GACP,EACN,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAC,YAAY,IAChD,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAC7C,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,KAAK,GAAG,EAAE,CAAC,CAC9F,GACD,IACE,EACN,KAAC,WAAW,IAAC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU,GAAI,IACzF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/views/Steps/FlowChart/layout.d.ts

@@ -9,7 +9,7 @@ export declare function useLayoutedElements(nodes: NodeWithoutLayout[], edges: E
             y: number;
         };
         id: string;
-        type: "step" | "planning" | "answer";
+        type: "step" | "planning" | "answer" | "tool";
         data?: import("./types.js").NodeData;
     }[];
     edges: Edge[];

package/dist/views/Steps/FlowChart/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAGpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAQ3C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;;;;;;;;;;;;;EAoC5E"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAGpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAS3C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;;;;;;;;;;;;;EAoC5E"}

package/dist/views/Steps/FlowChart/layout.js

@@ -5,6 +5,7 @@ const nodesSizes = {
     step: stepNodeSize,
     planning: planningNodeSize,
     answer: answerNodeSize,
+    tool: stepNodeSize,
 };
 export function useLayoutedElements(nodes, edges) {
     const dagreGraph = useMemo(() => new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({})), []);

package/dist/views/Steps/FlowChart/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGzE,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,UAAU,mBAAmB,CAAC,KAA0B,EAAE,KAAa;IAC3E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IAChG,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAEtC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC/C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAChD,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QAExB,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC/C,MAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YACjD,MAAM,OAAO,GAAG;gBACd,GAAG,IAAI;gBACP,cAAc,EAAE,MAAM;gBACtB,cAAc,EAAE,OAAO;gBACvB,iFAAiF;gBACjF,6DAA6D;gBAC7D,QAAQ,EAAE;oBACR,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;oBACjC,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC;iBACnC;aACF,CAAA;YAED,OAAO,OAAO,CAAA;QAChB,CAAC,CAAC,CAAA;QAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IACnC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;AACpB,CAAC"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGzE,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,cAAc;IACtB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED,MAAM,UAAU,mBAAmB,CAAC,KAA0B,EAAE,KAAa;IAC3E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,mBAAmB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IAChG,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAEtC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC/C,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;QAChD,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACrB,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;QAExB,MAAM,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC/C,MAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YACjD,MAAM,OAAO,GAAG;gBACd,GAAG,IAAI;gBACP,cAAc,EAAE,MAAM;gBACtB,cAAc,EAAE,OAAO;gBACvB,iFAAiF;gBACjF,6DAA6D;gBAC7D,QAAQ,EAAE;oBACR,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC;oBACjC,CAAC,EAAE,gBAAgB,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC;iBACnC;aACF,CAAA;YAED,OAAO,OAAO,CAAA;QAChB,CAAC,CAAC,CAAA;QAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAA;IACnC,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;AACpB,CAAC"}

package/dist/views/Steps/FlowChart/types.d.ts

@@ -7,7 +7,7 @@ export interface NodeData {
 }
 export interface NodeWithoutLayout {
     id: string;
-    type: 'step' | 'planning' | 'answer';
+    type: 'step' | 'planning' | 'answer' | 'tool';
     data?: NodeData;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/views/Steps/FlowChart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAErD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/Steps/FlowChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAErD,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB"}

package/dist/views/Steps/StepModal.js

@@ -115,8 +115,8 @@ export const StepModal = ({ message, stepId, onClose }) => {
     const [attempt, setAttempt] = useState(0);
     const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId]);
     const step = entry.steps?.[stepIndex];
-    const tools = step?.type === 'step' ? step.attempts[attempt]?.tools?.map(tool => (_jsxs("div", { className: "tool", children: [_jsx(ToolBadge, { name: tool.name, duration: tool.duration, image: tool.image, description: tool.description }), tool.input && _jsxs(_Fragment, { children: [_jsxs(Text, { appearance: "microtext1", color: "light.700", children: [t.input, ":"] }), _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, showActionBar: true, children: tool.input })] }), tool.output && _jsxs(_Fragment, { children: [_jsxs(Text, { appearance: "microtext1", color: "light.700", children: [t.response, ":"] }), _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, showActionBar: true, children: tool.output })] })] }, tool.id))) : undefined;
+    const tools = step?.type === 'step' ? step.attempts[attempt]?.tools?.map(tool => (_jsxs("div", { className: "tool", children: [_jsx(ToolBadge, { name: tool.name ?? '', duration: tool.duration, image: tool.image, description: tool.description }), tool.input && _jsxs(_Fragment, { children: [_jsxs(Text, { appearance: "microtext1", color: "light.700", children: [t.input, ":"] }), _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, showActionBar: true, children: tool.input })] }), tool.output && _jsxs(_Fragment, { children: [_jsxs(Text, { appearance: "microtext1", color: "light.700", children: [t.response, ":"] }), _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, showActionBar: true, children: tool.output })] })] }, tool.id))) : undefined;
     const title = (_jsxs(Row, { flex: 1, justifyContent: "space-between", children: [_jsx(Text, { appearance: "h6", children: getTitle(t, step, stepIndex) }), _jsxs(ExecutionBox, { children: [_jsxs(Text, { className: "time", appearance: "microtext1", children: [step?.status === 'running' && t.running, step?.status === 'pending' && t.pending, step?.status === 'success' && `${t.executionTime}: ${step?.duration ? `${toPrecision(step?.duration)}s` : t.unknown}`] }), step?.type === 'step' && step.attempts.length > 1 && _jsxs("div", { className: "navigator", children: [attempt > 0 && (_jsx(IconButton, { icon: "ChevronLeft", size: "xs", title: t.previousAttempt, "aria-label": t.previousAttempt, onClick: () => setAttempt(attempt - 1) })), _jsxs(Text, { appearance: "microtext1", children: [attempt + 1, "/", step.attempts.length] }), attempt < step.attempts.length - 1 && (_jsx(IconButton, { icon: "ChevronRight", size: "xs", title: t.nextAttempt, "aria-label": t.nextAttempt, onClick: () => setAttempt(attempt + 1) }))] })] })] }));
-    return (_jsxs(Modal, { open: !!step, onClose: onClose, title: title, children: [step?.type === 'answer' && _jsx(StyledSection, { className: "restrict-image-size", children: entry.type === 'md' ? _jsx(Markdown, { children: entry.content }) : _jsx(Text, { children: entry.content }) }), step?.type === 'planning' && _jsxs(StyledSection, { style: { alignItems: 'stretch' }, children: [_jsx(Badge, { appearance: "square", colorPalette: "blue", style: { alignSelf: 'start' }, children: "Prompt" }), _jsx(Text, { children: step.goal }), _jsx("ul", { className: "steps", children: entry.steps?.filter(s => s.type === 'step').map((s, index) => (_jsxs("li", { children: [_jsx(Row, { mb: 2, children: _jsxs(Text, { children: [t.step, " ", index + 1, ": ", _jsx("span", { className: "step-description", children: s.input })] }) }), !!s.attempts[0].tools?.length && _jsx("ul", { className: "side-by-side-tools", children: s.attempts[0].tools.map((tool) => (_jsx("li", { children: _jsx(ToolBadge, { name: tool.name, image: tool.image }) }, tool.id))) })] }, index))) })] }), step?.type === 'step' && step?.input && _jsxs(StyledSection, { children: [_jsx(Badge, { appearance: "square", colorPalette: "blue", children: "Prompt" }), _jsx(Text, { children: step.input })] }), !!tools?.length && _jsx(StyledSection, { children: tools })] }));
+    return (_jsxs(Modal, { open: !!step, onClose: onClose, title: title, children: [step?.type === 'answer' && _jsx(StyledSection, { className: "restrict-image-size", children: entry.type === 'md' ? _jsx(Markdown, { children: entry.content }) : _jsx(Text, { children: entry.content }) }), step?.type === 'planning' && _jsxs(StyledSection, { style: { alignItems: 'stretch' }, children: [_jsx(Badge, { appearance: "square", colorPalette: "blue", style: { alignSelf: 'start' }, children: "Prompt" }), _jsx(Text, { children: step.goal }), _jsx("ul", { className: "steps", children: entry.steps?.filter(s => s.type === 'step').map((s, index) => (_jsxs("li", { children: [_jsx(Row, { mb: 2, children: _jsxs(Text, { children: [t.step, " ", index + 1, ": ", _jsx("span", { className: "step-description", children: s.input })] }) }), !!s.attempts[0].tools?.length && _jsx("ul", { className: "side-by-side-tools", children: s.attempts[0].tools.map((tool) => (_jsx("li", { children: _jsx(ToolBadge, { name: tool.name ?? '', image: tool.image }) }, tool.id))) })] }, index))) })] }), step?.type === 'step' && step?.input && _jsxs(StyledSection, { children: [_jsx(Badge, { appearance: "square", colorPalette: "blue", children: "Prompt" }), _jsx(Text, { children: step.input })] }), !!tools?.length && _jsx(StyledSection, { children: tools })] }));
 };
 //# sourceMappingURL=StepModal.js.map

package/dist/views/Steps/StepModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepModal.js","sourceRoot":"","sources":["../../../src/views/Steps/StepModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StepModal.js","sourceRoot":"","sources":["../../../src/views/Steps/StepModal.tsx"],"names":[],"mappings":"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"}

package/dist/views/Steps/dictionary.d.ts

@@ -34,6 +34,6 @@ export declare const dictionary: {
         input: string;
     };
 };
-export declare function useStepsDictionary(): Record<"pending" | "input" | "step" | "steps" | "tools" | "answer" | "running" | "unknown" | "planning" | "stepsPanelDescription" | "response" | "executionTime" | "nextAttempt" | "previousAttempt", string>;
+export declare function useStepsDictionary(): Record<"pending" | "input" | "step" | "steps" | "tools" | "answer" | "planning" | "running" | "unknown" | "stepsPanelDescription" | "response" | "executionTime" | "nextAttempt" | "previousAttempt", string>;
 export type ToolsDictionary = typeof dictionary['en'];
 //# sourceMappingURL=dictionary.d.ts.map

package/dist/views/Steps/utils.d.ts

@@ -2,6 +2,6 @@ import { WithIcon } from '@stack-spot/citric-icons';
 import { ChatStep } from '@stack-spot/portal-network';
 export declare function getStatusIcon(status: ChatStep['status']): import("react/jsx-runtime").JSX.Element | null;
 export declare function getTypeIcon(type: ChatStep['type']): WithIcon;
-export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number): string;
+export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number): string | undefined;
 export declare function toPrecision(n: number, precisionDigits?: number): number;
 //# sourceMappingURL=utils.d.ts.map

package/dist/views/Steps/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,kDAOvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAK5D;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,UAO9H;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAGrD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,kDAOvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAK5D;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,sBAO9H;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.2.0",
+  "version": "2.2.1-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,12 +11,12 @@
   },
   "peerDependencies": {
     "@stack-spot/citric-react": "^0.36.0",
-    "@stack-spot/citric-icons": "^0.2.2",
+    "@stack-spot/citric-icons": "^0.2.3",
     "@stack-spot/portal-theme": "^1.2.1",
     "@citric/core": "^6.4.0",
     "@stack-spot/portal-components": "^2.26.0",
     "@citric/icons": "^5.13.0",
-    "@stack-spot/portal-network": "0.181.0",
+    "@stack-spot/portal-network": "0.189.0-beta.1",
     "@citric/ui": "^6.10.2",
     "@stack-spot/portal-translate": "^2.1.0",
     "lodash": "^4.17.0",

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "2.2.0",
-  "date": "Mon Oct 13 2025 13:44:47 GMT+0000 (Coordinated Universal Time)",
+  "version": "2.2.1-beta.1",
+  "date": "Tue Oct 28 2025 14:41:58 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -109,11 +109,11 @@
     },
     {
       "name": "@stack-spot/citric-icons",
-      "version": "0.2.2"
+      "version": "0.2.3"
     },
     {
       "name": "@stack-spot/citric-react",
-      "version": "0.36.0(@stack-spot/citric-icons@0.2.2)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.36.0(@stack-spot/citric-icons@0.2.3)(@stack-spot/portal-theme@1.2.1(@citric/core@6.4.0(lodash@4.17.21)(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(styled-components@6.1.10(react-dom@18.2.0(react@18.2.0))(react@18.2.0)))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(lodash@4.17.21)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-components",
@@ -121,7 +121,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.181.0(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.189.0-beta.1(@stack-spot/auth@6.1.0)(@stack-spot/opa@2.5.0(@stack-spot/auth@6.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@2.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-theme",

package/src/chat-interceptors/send-message.ts

@@ -1,11 +1,13 @@
-import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
+import { AgentInfo, aiClient, ChatResponseWithSteps, ChatStep, StackspotAPIError, StreamCanceledError } from '@stack-spot/portal-network'
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
+import { findLast } from 'lodash'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
 import { LabeledWithImage } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
 import { treatHTMLInErrorMessage } from '../utils/error'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
+import { planningToolDictionaryHelper } from '../utils/planning-tool'
 
 /**
  * Transforms a chat response from the backend into a chat entry that can be added to the chat.
@@ -22,7 +24,7 @@ function createEntryValueFromChatResponse(
   agent: LabeledWithImage | undefined,
   includeDate = false,
 ): TextChatEntry {
-  return {
+  const entry= {
     agentType: 'bot',
     type: 'md',
     content: response.answer ?? '',
@@ -33,6 +35,7 @@ function createEntryValueFromChatResponse(
     steps: response.steps,
     tools: response.tools,
   }
+  return entry as TextChatEntry
 }
 
 function buildPrompt(content: string, data?: any) {
@@ -61,6 +64,18 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.set('label', content || entry.getValue().upload?.[0]?.name || 'Chat')
     chat.untitled = false
   }
+
+  //Verify if the last planning in the messages has status awaiting_approval
+  const messages = chat.getMessages()
+  const lastPlanningAwaiting = findLast(messages, item => {
+    const steps = item.getValue().steps
+    if (steps) {
+      const hasPlanning = steps.find((step) => step.type === 'planning')
+      return hasPlanning ? hasPlanning.status === 'awaiting_approval' : false
+    }
+    return false
+  })
+
   const stream = aiClient.sendChatMessage({ context, user_prompt: buildPrompt(content, data) })
   signal.addEventListener('abort', () => stream.cancel())
   const botEntry = ChatEntry.createStreamedBotEntry()
@@ -69,15 +84,135 @@ export async function sendMessageInterceptor(entry: ChatEntry, chat: ChatState,
     chat.pushMessage(botEntry)
   }
   let knowledgeSources: KnowledgeSource[] | undefined
+
+  const updatePlanningMessage = () => {
+    if (lastPlanningAwaiting) {
+      const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
+      const originalItemValue = originalItem?.getValue()
+      originalItemValue?.steps?.map((step) => {
+        if (step.type === 'planning' && step.status === 'awaiting_approval') {
+          step.status = 'success'
+        }
+      })
+      originalItem?.setValue({ ...originalItemValue as TextChatEntry })
+    }
+  }
+  
+  const updateStepMessage = (step: ChatStep) => {
+    if (lastPlanningAwaiting) {
+      const originalItem = messages.find((message) => message.id === lastPlanningAwaiting.id)
+      const originalItemValue = originalItem?.getValue()
+      originalItemValue?.steps?.filter((messageStep) => {
+        if (messageStep.id === step.id) {
+          messageStep = { ...step }
+        }
+      })
+      originalItem?.setValue({ ...originalItemValue as TextChatEntry })
+    }
+  }
+
+  const updateToolStatus = (agentInfo: AgentInfo) => {
+    const executionId = agentInfo.id
+    if (executionId) {
+      //Update message with type step which contains the planning steps
+      const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
+      const originalItem = messages.find((message) => `${message.id}` === messageId)
+      const originalItemValue = originalItem?.getValue()
+      let update = false
+      const status = agentInfo.action === 'start' ? 'running' : 'success'
+      const step = originalItemValue?.steps?.find(step => step.type === 'step' && step.attempts?.[0].tools?.[0].executionId === executionId)
+      if (step && step.status !== status) {
+        step.status = status
+        update = true
+      }
+      if (update) {
+        originalItem?.setValue({ ...originalItemValue as TextChatEntry })
+      }
+
+      //Updates message with type tool which contains the actually tool steps
+      //We only want to show tools banner when they are awaiting_approval, by removing the step
+      // we avoid the entire bot message to be visible
+      const toolMessageId = planningToolDictionaryHelper.getMessageIdToolStepFromToolExecutionId(executionId)
+      const toolOriginalItem = messages.find((message) => `${message.id}` === toolMessageId)
+      const toolOriginalItemValue = toolOriginalItem?.getValue()
+      const toolStep = toolOriginalItemValue?.steps?.find(step => 
+        step.type === 'tool' && step.attempts?.[0].tools?.[0].executionId === executionId)
+      update = false
+      if (toolOriginalItemValue && toolStep && toolStep.status !== status) {
+        toolOriginalItemValue.steps = undefined
+        update = true
+      }
+      if (update) {
+        toolOriginalItem?.setValue({ ...toolOriginalItemValue as TextChatEntry })
+      }
+    }
+  }
+
   stream.onChange(value => {
+    if (value.agent_info?.type === 'planning') {
+      if (value.agent_info.action === 'start') {
+        chat.set('isPlaning', true)
+      } else {
+        chat.set('isPlaning', false)
+      }
+    }
+
     if (value.sources?.length !== knowledgeSources?.length && chat.get('features').showSourcesInResponse) {
       knowledgeSources = genericSourcesToKnowledgeSources(value.sources)
     }
+
+    if (lastPlanningAwaiting && value.steps) {
+      value.steps?.map(step => {
+        if (step.type === 'planning') {
+          updatePlanningMessage()
+        } else if (step.type === 'step') {
+          updateStepMessage(step)
+        }
+      })
+    }
+
+    if (value.agent_info?.type === 'tool' && value.agent_info?.action !== 'awaiting_approval') {
+      updateToolStatus(value.agent_info)
+    }
+
+    if (value.steps) {
+      const tool = findLast(value.steps, (item) => item.type === 'tool')
+
+      if (tool && tool.status === 'running') {
+        const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(tool.id)
+        const originalItem = messages.find((message) => `${message.id}` === messageId)
+        const originalItemValue = originalItem?.getValue()
+        let update = false
+        const step = originalItemValue?.steps?.find(step => step.type === 'step')
+        if (step && step.attempts?.[0].tools?.[0].executionId === tool.id) {
+          step.attempts?.map((attempt, i) => {
+            const newAttempt = tool.attempts?.[i]
+            if (!newAttempt) return
+            attempt.tools?.map((origTool, j) => {
+              const newTool = newAttempt.tools?.[j]
+              if (!newTool || origTool.executionId !== newTool.executionId) return origTool
+              update = true
+              return { ...origTool, ...newTool }
+            })
+          })
+        }
+        if (update) {
+          originalItem?.setValue({ ...originalItemValue as TextChatEntry })
+        }
+      }
+    }
+
     botEntry.setValue(createEntryValueFromChatResponse(value, knowledgeSources, chat.get('agent')))
   })
+
   let finalValue: Partial<ChatResponse3> | undefined
   try {
     finalValue = await stream.getValue()
+    if (lastPlanningAwaiting) {
+      const value = lastPlanningAwaiting.getValue()
+      value.content = finalValue.answer || value.content
+      lastPlanningAwaiting.setValue(value)
+    }
     // if the streaming feature is not enabled, we only add the chat entry once the streaming has finished
     if (!chat.get('features').streaming) {
       chat.pushMessage(botEntry)

package/src/state/ChatEntry.ts

@@ -205,13 +205,14 @@ export class ChatEntry {
    * @param hiddenContent the message's content.
    * @returns a new ChatEntry.
    */
-  static createUserEntry(content: string, isMd = false, fieldName?: string, hiddenContent?: string[]) {
+  static createUserEntry(content: string, isMd = false, fieldName?: string, hiddenContent?: string[], data?: any) {
     return new ChatEntry({
       agentType: 'user',
       type: isMd ? 'md' : 'text',
       content,
       name: fieldName,
       hiddenContent, 
+      data,
       updated: new Date().toISOString(),
     })
   }

package/src/state/ChatState.ts

@@ -33,6 +33,10 @@ export interface ChatPropertiesWithOptionalFeatures {
    * Whether or not the chat is in a loading state.
    */
   isLoading?: boolean,
+  /**
+   * Whether or not the chat is planning.
+   */
+  isPlaning?: boolean,
   /**
    * The value of the next message. This is the value of the text typed in the textarea below the chat.
    */
@@ -55,6 +59,10 @@ export interface ChatPropertiesWithOptionalFeatures {
    * If a feature is marked as false, it's disabled, otherwise it's enabled.
    */
   features?: Partial<ChatFeatures>,
+  /**
+   * The current LLM (Large Language Model) being used for this chat.
+   */
+  selected_model_id?: string,
 }
 
 export interface ChatProperties extends ChatPropertiesWithOptionalFeatures {

package/src/utils/chat.ts

@@ -26,5 +26,6 @@ export function buildConversationContext(state: ChatState, message?: ChatEntry):
     platform: 'web-widget',
     platform_version: navigator.userAgent,
     stackspot_ai_version: appData.version,
+    selected_model_id: state.get('selected_model_id'),
   }
 }

package/src/utils/planning-tool.ts

@@ -0,0 +1,41 @@
+class PlanningToolDictionaryHelper {
+  static instance: PlanningToolDictionaryHelper | undefined
+  private toolExecutionIdPlanningStep: Record<string, string> = {}
+  private toolExecutionIdToolStep: Record<string, string> = {}
+  private stepId: Record<string, number> = {}
+
+  private constructor() {
+    PlanningToolDictionaryHelper.instance = this
+  }
+
+  static create() {
+    return PlanningToolDictionaryHelper.instance ?? new PlanningToolDictionaryHelper()
+  }
+
+  setMessageIdPlanningStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdPlanningStep[toolExecutionId] = messageId
+  }
+
+  setMessageIdToolStepToolExecutionId(messageId: string, toolExecutionId: string){
+    this.toolExecutionIdToolStep[toolExecutionId] = messageId
+  }
+  
+  setMessageIdForStepId(messageId: number, stepId: string){
+    this.stepId[stepId] = messageId
+  }
+
+  getMessageIdFromStepId(stepId: string){
+    return this.stepId[stepId]
+  }
+
+  getMessageIdPlanningStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdPlanningStep[toolExecutionId]
+  }
+
+  getMessageIdToolStepFromToolExecutionId(toolExecutionId: string){
+    return this.toolExecutionIdToolStep[toolExecutionId]
+  }
+}
+
+export const planningToolDictionaryHelper = PlanningToolDictionaryHelper.create()
+

package/src/utils/update-tool-step.tsx

@@ -0,0 +1,27 @@
+import { ChatEntry, TextChatEntry } from '../state/ChatEntry'
+import { planningToolDictionaryHelper } from './planning-tool'
+
+export const updateToolStep = (messages: ChatEntry[], executionId: string, 
+  newStatus: 'pending' | 'running' | 'success' | 'error' | 'awaiting_approval') => {
+  
+  // if last message is a user message, no update in tool status is needed
+  if (messages[messages.length-1].getValue().agentType === 'user') return
+  
+  const messageId = planningToolDictionaryHelper.getMessageIdPlanningStepFromToolExecutionId(executionId)
+  const message = messages.find((message) => `${message.id}` === messageId)
+  let update = false
+  const messageValue = message?.getValue()
+  messageValue?.steps?.map((step) => {
+    if (step.type === 'step') {
+      const tool = step.attempts?.[0].tools?.[0]
+      if (tool?.executionId === executionId && step.status !== newStatus) {
+        step.status = newStatus
+        update = true
+      }
+    }
+  })
+  
+  if (update) {
+    message?.setValue({ ...messageValue as TextChatEntry })
+  }
+}

package/src/views/Chat/ChatMessage.tsx

@@ -9,7 +9,7 @@ import { PhoneInput } from 'react-international-phone'
 import 'react-international-phone/style.css'
 import { FileDescription } from '../../components/FileDescription'
 import { Markdown } from '../../components/Markdown'
-import { useChatEntry, useCurrentChat, useWidget } from '../../context/hooks'
+import { useChatEntry, useChatMessages, useCurrentChat, useCurrentChatState, useWidget } from '../../context/hooks'
 import { useMidnightUpdateView } from '../../hooks/midnight-update-view'
 import { ChatEntry, SerializableAction, TextChatEntry } from '../../state/ChatEntry'
 import { useDateFormatter } from '../../utils/date'
@@ -17,7 +17,7 @@ import { toolById } from '../../utils/tools'
 import { AgentInfo } from './AgentInfo'
 import { useChatScrollToBottomEffect } from './chat-scroll'
 import { onCopyAll, onCopyCode, onLikeOrDislike } from './events'
-import { StepsList } from './StepsList'
+import { StepsList, StepsPlaceholder, ViewToolsDetails } from './StepsList'
 
 export interface CustomRenderResult {
   /**
@@ -218,7 +218,21 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     { searchAgentsRequest: { ids: entry.tools || [''] } }, { enabled: !!entry.tools })
   const [copied, setCopied] = useState(false)
   const [showUserButtonCopy, setShowUserButtonCopy] = useState(false)
-
+  const isPlanning = useCurrentChatState('isPlaning') ?? false
+  
+  // when we have a steps but we are not showing any content of the step
+  // (because it is a tool and the user has already answered the question)
+  // we do not want to show an avatar with empty content, so we hide the entire message
+  const toolsStep = entry.steps?.find(s => s.type === 'tool')
+  const messages = useChatMessages(chat.id)
+  const userHasAlreadyAnswered = useMemo(() => {
+    const messageIndex = messages.findIndex((messageItem) => messageItem.id === message.id)
+    if (messages.length-1 === messageIndex) return false
+    const nextMessage = messages[messageIndex+1].getValue()
+    return nextMessage.agentType === 'user'
+  }, [messages, messages.length])
+  const isMessageHidden = toolsStep && userHasAlreadyAnswered
+  
   useChatScrollToBottomEffect(ref, [entry])
   useMidnightUpdateView()
 
@@ -343,7 +357,8 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
     widget.set('panel', 'resources')
   }
 
-  return (entry.content || entry.error || !!entry.steps?.length || entry.upload?.length) && (
+  return (entry.content || entry.error || !!entry.steps?.length  ||
+    entry.upload?.length) && (!isMessageHidden || !toolsStep || isPlanning) && (
     <li key={entry.messageId} className={entry.agentType} ref={ref}>
       <div className="chat-message-container"
         onMouseEnter={entry.agentType === 'user' ? () => setShowUserButtonCopy(true) : undefined}
@@ -356,11 +371,15 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
               {!!entry.badges?.length && <div className="badges">
                 {entry.badges.map((b, index) => <Badge key={index} colorPalette={b.color ?? 'cyan'} appearance="square">{b.label}</Badge>)}
               </div>}
+              
+              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} 
+                userHasAlreadyAnswered={userHasAlreadyAnswered} />}
+
               {renderContent()}
             
-              {!!entry.steps?.length && <StepsList steps={entry.steps} chatId={chat.id} messageId={message.id} />}
             </div>
           )}
+          {isPlanning && entry.agentType === 'bot' && isLast && <StepsPlaceholder /> }
           
           {entry.error && <Alert type="error">{entry.error}</Alert>}
         </div>
@@ -416,6 +435,7 @@ export const ChatMessage = ({ message, isLast, beforeMessage, afterMessage, cust
                 </ImageBox>
               )})}
           </Button>
+          <ViewToolsDetails chatId={chat.id} />
         </div>}
     
         {shouldShowFooter && <div className="message-footer">