@stack-spot/ai-chat-widget 1.13.2-beta.0 → 1.14.0-beta.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepsPanel.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/StepsPanel.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,UAAU,GAAI,uBAAuB;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,mDAc/E,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/views/{Tools/ToolsPanel.js → Steps/StepsPanel.js}

@@ -4,11 +4,11 @@ import { useMemo, useState } from 'react';
 import { useWidget } from '../../context/hooks.js';
 import { FlowChart } from './FlowChart/index.js';
 import { StepModal } from './StepModal.js';
-const ToolsPanel = ({ chatId, messageId }) => {
+const StepsPanel = ({ chatId, messageId }) => {
     const [currentStepId, setCurrentStepId] = useState();
     const widget = useWidget();
     const message = useMemo(() => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId), [chatId, messageId]);
     return message ? (_jsxs(_Fragment, { children: [_jsx(FlowChart, { message: message, onClick: (step) => setCurrentStepId(step.id) }), _jsx(StepModal, { message: message, stepId: currentStepId, onClose: () => setCurrentStepId(undefined) })] })) : null;
 };
-export default ToolsPanel;
-//# sourceMappingURL=ToolsPanel.js.map
+export default StepsPanel;
+//# sourceMappingURL=StepsPanel.js.map

package/dist/views/{Tools/ToolsPanel.js.map → Steps/StepsPanel.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolsPanel.js","sourceRoot":"","sources":["../../../src/views/Tools/ToolsPanel.tsx"],"names":[],"mappings":";AAAA,6CAA6C;AAE7C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAyC,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,EACtG,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,8BACE,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI,EAC7E,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAI,IACjG,CACJ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
+{"version":3,"file":"StepsPanel.js","sourceRoot":"","sources":["../../../src/views/Steps/StepsPanel.tsx"],"names":[],"mappings":";AAAA,6CAA6C;AAE7C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAyC,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,EACtG,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAA;IAED,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,8BACE,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI,EAC7E,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAI,IACjG,CACJ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/views/{Tools → Steps}/dictionary.d.ts

@@ -1,6 +1,7 @@
 export declare const dictionary: {
     en: {
-        toolsDescription: string;
+        stepsPanelDescription: string;
+        steps: string;
         step: string;
         response: string;
         tools: string;
@@ -10,15 +11,15 @@ export declare const dictionary: {
         unknown: string;
         running: string;
         pending: string;
-        nextStep: string;
-        previousStep: string;
-        thoughtFor: string;
+        nextAttempt: string;
+        previousAttempt: string;
         open: string;
         close: string;
         input: string;
     };
     pt: {
-        toolsDescription: string;
+        stepsPanelDescription: string;
+        steps: string;
         step: string;
         response: string;
         tools: string;
@@ -28,14 +29,11 @@ export declare const dictionary: {
         unknown: string;
         running: string;
         pending: string;
-        nextStep: string;
-        previousStep: string;
-        thoughtFor: string;
-        open: string;
-        close: string;
+        nextAttempt: string;
+        previousAttempt: string;
         input: string;
     };
 };
-export declare function useToolsDictionary(): Record<"close" | "input" | "step" | "open" | "planning" | "answer" | "pending" | "running" | "tools" | "toolsDescription" | "response" | "executionTime" | "unknown" | "nextStep" | "previousStep" | "thoughtFor", string>;
+export declare function useStepsDictionary(): Record<"input" | "step" | "steps" | "tools" | "answer" | "pending" | "running" | "planning" | "unknown" | "stepsPanelDescription" | "response" | "executionTime" | "nextAttempt" | "previousAttempt", string>;
 export type ToolsDictionary = typeof dictionary['en'];
 //# sourceMappingURL=dictionary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/dictionary.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCD,CAAA;AAEtB,wBAAgB,kBAAkB,kNAEjC;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA"}

package/dist/views/{Tools → Steps}/dictionary.js

@@ -1,7 +1,8 @@
 import { useTranslate } from '@stack-spot/portal-translate';
 export const dictionary = {
     en: {
-        toolsDescription: 'A description for tools',
+        stepsPanelDescription: 'The steps and tools used to reach the answer',
+        steps: 'Steps',
         step: 'Step',
         response: 'Response',
         tools: 'Tools',
@@ -11,15 +12,15 @@ export const dictionary = {
         unknown: 'unknown',
         running: 'Running',
         pending: 'Pending',
-        nextStep: 'Next step',
-        previousStep: 'Previous step',
-        thoughtFor: 'Thought for $0 seconds',
+        nextAttempt: 'Next execution',
+        previousAttempt: 'Previous execution',
         open: 'Open',
         close: 'Close',
         input: 'Input',
     },
     pt: {
-        toolsDescription: 'Uma descrição para as Ferramentas',
+        stepsPanelDescription: 'Os passos e ferramentas usados para chegar na resposta',
+        steps: 'Passos',
         step: 'Passo',
         response: 'Resposta',
         tools: 'Ferramentas',
@@ -29,15 +30,12 @@ export const dictionary = {
         unknown: 'desconhecido',
         running: 'Executando',
         pending: 'Aguardando',
-        nextStep: 'Próximo passo',
-        previousStep: 'Passo anterior',
-        thoughtFor: 'Pensado por $0 segundos',
-        open: 'Open',
-        close: 'Close',
+        nextAttempt: 'Próxima execução',
+        previousAttempt: 'Execução anterior',
         input: 'Entrada',
     },
 };
-export function useToolsDictionary() {
+export function useStepsDictionary() {
     return useTranslate(dictionary);
 }
 //# sourceMappingURL=dictionary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/views/Steps/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,qBAAqB,EAAE,8CAA8C;QACrE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,cAAc;QACtB,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,WAAW,EAAE,gBAAgB;QAC7B,eAAe,EAAE,oBAAoB;QACrC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,qBAAqB,EAAE,wDAAwD;QAC/E,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,OAAO;QACtB,OAAO,EAAE,cAAc;QACvB,OAAO,EAAE,YAAY;QACrB,OAAO,EAAE,YAAY;QACrB,WAAW,EAAE,kBAAkB;QAC/B,eAAe,EAAE,mBAAmB;QACpC,KAAK,EAAE,SAAS;KACjB;CACmB,CAAA;AAEtB,MAAM,UAAU,kBAAkB;IAChC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAA;AACjC,CAAC"}

package/dist/views/{Tools → Steps}/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
  */
-export declare const Tools: () => null;
+export declare const Steps: () => null;
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/index.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,eAAO,MAAM,KAAK,YAwBjB,CAAA"}

package/dist/views/{Tools → Steps}/index.js

@@ -4,25 +4,25 @@ import { LoadingCircular } from '@citric/ui';
 import { lazy, Suspense, useEffect } from 'react';
 import { useWidget, useWidgetState } from '../../context/hooks.js';
 import { useRightPanel } from '../../right-panel/hooks.js';
-import { useToolsDictionary } from './dictionary.js';
-const LazyToolsPanel = lazy(() => import('./ToolsPanel.js'));
+import { useStepsDictionary } from './dictionary.js';
+const LazyStepsPanel = lazy(() => import('./StepsPanel.js'));
 /**
  * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
  */
-export const Tools = () => {
-    const t = useToolsDictionary();
+export const Steps = () => {
+    const t = useStepsDictionary();
     const panel = useWidgetState('panel');
-    const message = useWidgetState('currentMessageInToolsPanel');
+    const message = useWidgetState('currentMessageInPanel');
     const { open } = useRightPanel();
     const widget = useWidget();
     useEffect(() => {
-        if (panel === 'tools' && message)
-            open(_jsx(Suspense, { fallback: _jsx(Flex, { alignItems: "center", justifyContent: "center", flex: 1, children: _jsx(LoadingCircular, {}) }), children: _jsx(LazyToolsPanel, { chatId: message.chatId, messageId: message.messageId }, message.messageId) }), {
-                title: t.tools,
-                description: t.toolsDescription,
+        if (panel === 'steps' && message)
+            open(_jsx(Suspense, { fallback: _jsx(Flex, { alignItems: "center", justifyContent: "center", flex: 1, children: _jsx(LoadingCircular, {}) }), children: _jsx(LazyStepsPanel, { chatId: message.chatId, messageId: message.messageId }, message.messageId) }), {
+                title: t.steps,
+                description: t.stepsPanelDescription,
                 onClose: () => {
                     widget.set('panel', undefined);
-                    widget.set('currentMessageInToolsPanel', undefined);
+                    widget.set('currentMessageInPanel', undefined);
                 },
             });
     }, [panel, t, message]);

package/dist/views/{Tools → Steps}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Tools/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEjD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IACrC,MAAM,OAAO,GAAG,cAAc,CAAC,4BAA4B,CAAC,CAAA;IAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,OAAO,IAAI,OAAO;YAAE,IAAI,CACpC,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,YAAE,KAAC,eAAe,KAAG,GAAO,YACvG,KAAC,cAAc,IAAyB,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IAAvE,OAAO,CAAC,SAAS,CAA0D,GACvF,EACX;gBACE,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,WAAW,EAAE,CAAC,CAAC,gBAAgB;gBAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;oBAC9B,MAAM,CAAC,GAAG,CAAC,4BAA4B,EAAE,SAAS,CAAC,CAAA;gBACrD,CAAC;aACF,CACF,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/views/Steps/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEjD,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;AAE1D;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,GAAG,kBAAkB,EAAE,CAAA;IAC9B,MAAM,KAAK,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;IACrC,MAAM,OAAO,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAA;IACvD,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,OAAO,IAAI,OAAO;YAAE,IAAI,CACpC,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,YAAE,KAAC,eAAe,KAAG,GAAO,YACvG,KAAC,cAAc,IAAyB,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,SAAS,IAAvE,OAAO,CAAC,SAAS,CAA0D,GACvF,EACX;gBACE,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,WAAW,EAAE,CAAC,CAAC,qBAAqB;gBACpC,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;oBAC9B,MAAM,CAAC,GAAG,CAAC,uBAAuB,EAAE,SAAS,CAAC,CAAA;gBAChD,CAAC;aACF,CACF,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,CAAC,CAAA;IAEvB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

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

@@ -0,0 +1,6 @@
+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']): import("react/jsx-runtime").JSX.Element;
+export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | undefined, index: number): string;
+export declare function toPrecision(n: number, precisionDigits?: number): number;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAErD,wBAAgB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,kDAOvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,2CAKjD;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"}

package/dist/views/{Tools → Steps}/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/views/Tools/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAG5C,MAAM,UAAU,aAAa,CAAC,MAA+B;IAC3D,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,aAAa,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QACrF,KAAK,OAAO,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,YAAY,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QAClF,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,eAAe,IAAC,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,CAAA;QAC1E,OAAO,CAAC,CAAC,OAAO,IAAI,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAA2B;IACrD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,UAAU,CAAC,CAAC,OAAO,KAAC,aAAa,KAAG,CAAA;QACzC,OAAO,CAAC,CAAC,OAAO,KAAC,QAAQ,KAAG,CAAA;IAC9B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,WAA2D,EAAE,IAA+B,EAAE,KAAa;IAClI,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAA;IACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,UAAU,CAAC,CAAC,OAAO,WAAW,CAAC,QAAQ,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,OAAO,GAAG,WAAW,CAAC,IAAI,IAAI,KAAK,EAAE,CAAA;QAClD,KAAK,QAAQ,CAAC,CAAC,OAAO,WAAW,CAAC,MAAM,CAAA;IAC1C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,CAAS,EAAE,eAAe,GAAG,CAAC;IACxD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,eAAe,CAAC,CAAA;IAC5C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,CAAA;AACxC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/views/Steps/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAG5C,MAAM,UAAU,aAAa,CAAC,MAA0B;IACtD,QAAQ,MAAM,EAAE,CAAC;QACf,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,aAAa,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QACrF,KAAK,OAAO,CAAC,CAAC,OAAO,KAAC,OAAO,IAAC,SAAS,EAAC,YAAY,YAAC,KAAC,eAAe,KAAG,GAAU,CAAA;QAClF,KAAK,SAAS,CAAC,CAAC,OAAO,KAAC,eAAe,IAAC,WAAW,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,CAAA;QAC1E,OAAO,CAAC,CAAC,OAAO,IAAI,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,IAAsB;IAChD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,UAAU,CAAC,CAAC,OAAO,KAAC,aAAa,KAAG,CAAA;QACzC,OAAO,CAAC,CAAC,OAAO,KAAC,QAAQ,KAAG,CAAA;IAC9B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,WAA2D,EAAE,IAA0B,EAAE,KAAa;IAC7H,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAA;IACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,UAAU,CAAC,CAAC,OAAO,WAAW,CAAC,QAAQ,CAAA;QAC5C,KAAK,MAAM,CAAC,CAAC,OAAO,GAAG,WAAW,CAAC,IAAI,IAAI,KAAK,EAAE,CAAA;QAClD,KAAK,QAAQ,CAAC,CAAC,OAAO,WAAW,CAAC,MAAM,CAAA;IAC1C,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,CAAS,EAAE,eAAe,GAAG,CAAC;IACxD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,eAAe,CAAC,CAAA;IAC5C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,MAAM,CAAA;AACxC,CAAC"}

package/dist/views/Tools.d.ts

@@ -0,0 +1,2 @@
+export declare const Tools: () => null;
+//# sourceMappingURL=Tools.d.ts.map

package/dist/views/Tools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tools.d.ts","sourceRoot":"","sources":["../../src/views/Tools.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,KAAK,YAejB,CAAA"}

package/dist/views/Tools.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { agentClient } from '@stack-spot/portal-network';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
+import { ToolBadge } from '../components/ToolBadge.js';
+import { useWidget, useWidgetState } from '../context/hooks.js';
+import { useRightPanel } from '../right-panel/hooks.js';
+import { toolById } from '../utils/tools.js';
+const ToolList = styled.ul `
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+export const Tools = () => {
+    const t = useTranslate(dictionary);
+    const panel = useWidgetState('panel');
+    const message = useWidgetState('currentMessageInPanel');
+    const { open } = useRightPanel();
+    const widget = useWidget();
+    useEffect(() => {
+        if (panel === 'tools' && message)
+            open(_jsx(ToolsPanel, {}, message.messageId), { title: t.title, description: t.description, onClose: () => widget.set('panel', undefined) });
+    }, [panel, t]);
+    return null;
+};
+const ToolsPanel = () => {
+    const { chatId, messageId } = useWidgetState('currentMessageInPanel') ?? {};
+    const widget = useWidget();
+    const message = useMemo(() => {
+        const chat = widget.chatTabs.getAll().find(c => c.id === chatId);
+        return chat?.getMessages().find(m => m.id === messageId)?.getValue();
+    }, [messageId]);
+    const [agent] = agentClient.agent.useStatefulQuery({ agentId: message?.agent?.id ?? '' }, { enabled: !!message?.agent?.id });
+    const tools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits) ?? { id }), [messageId, agent]);
+    return !!tools?.length && (_jsx(ToolList, { children: tools.map((tool) => (_jsx("li", { children: _jsx(ToolBadge, { name: tool.name || tool.id, image: tool.image, description: tool.description, backgroundColor: "light.500" }) }, tool.id))) }));
+};
+const dictionary = {
+    en: {
+        title: 'Tools',
+        description: 'The tools used to generate the answer.',
+    },
+    pt: {
+        title: 'Ferramentas',
+        description: 'As ferramentas usadas para gerar a resposta.',
+    },
+};
+//# sourceMappingURL=Tools.js.map

package/dist/views/Tools.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.13.2-beta.0",
+  "version": "1.14.0-beta.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
     "@citric/icons": "^5.9.0",
     "@citric/ui": "^6.7.0",
     "@stack-spot/portal-components": "^2.8.1",
-    "@stack-spot/portal-network": "^0.102.0",
+    "@stack-spot/portal-network": "^0.113.2",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
     "lodash": "^4.17.0",

package/src/StackspotAIWidget.tsx

@@ -17,6 +17,7 @@ import { KSDocument } from './views/KSDocument'
 import { MessageInput } from './views/MessageInput'
 import { MinimizedHeader } from './views/MinimizedHeader'
 import { Stacks } from './views/Stacks'
+import { Steps } from './views/Steps'
 import { Tools } from './views/Tools'
 import { Workspaces } from './views/Workspaces'
 
@@ -82,6 +83,7 @@ export const StackspotAIWidget = ({ username, minimizedActions = {}, prefix, chi
           <Agents />
           <Editor />
           <ChatHistory />
+          <Steps />
           <Tools />
           <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
         </div>

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.13.2-beta.0",
-  "date": "Tue Apr 01 2025 18:17:41 GMT-0300 (Brasilia Standard Time)",
+  "version": "1.14.0-beta.2",
+  "date": "Thu Apr 03 2025 10:36:32 GMT-0300 (Brasilia Standard Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -113,7 +113,7 @@
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.102.0(@stack-spot/auth@5.3.3)(@stack-spot/opa@2.6.1(@stack-spot/auth@5.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.69.0(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "0.113.2(@stack-spot/auth@5.3.3)(@stack-spot/opa@2.6.1(@stack-spot/auth@5.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@stack-spot/portal-translate@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@tanstack/react-query@5.69.0(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/CustomInputs.ts

@@ -2,7 +2,7 @@ import { CustomInputResponse } from '@stack-spot/portal-network/api/ai'
 import { Dictionary, translate } from '@stack-spot/portal-translate'
 import { ChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
-import { LabeledWithImage } from '../state/types'
+import { LabeledAgent } from '../state/types'
 
 const CUSTOM_INPUTS_KEY = 'customInputs'
 
@@ -12,9 +12,9 @@ export class CustomInputs {
   private index = 0
   private resolve?: (value: Record<string, string>) => void
   private promise: Promise<Record<string, string>>
-  private agent?: LabeledWithImage
+  private agent?: LabeledAgent
 
-  constructor(inputs: CustomInputResponse[], agent?: LabeledWithImage) {
+  constructor(inputs: CustomInputResponse[], agent?: LabeledAgent) {
     this.inputs = inputs
     this.agent = agent
     this.promise = new Promise(resolve => {

package/src/chat-interceptors/quick-commands.ts

@@ -7,7 +7,7 @@ import { AbortedError } from '../AbortedError'
 import { quickCommandRegex } from '../regex'
 import { ChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
-import { LabeledWithImage } from '../state/types'
+import { LabeledAgent } from '../state/types'
 import { WidgetState } from '../state/WidgetState'
 import { buildConversationContext } from '../utils/chat'
 import { getSizeOfString } from '../utils/string'
@@ -110,7 +110,7 @@ export function createQuickCommandInterceptor(widget: WidgetState, getEditor: ()
     })
   }
 
-  function createProgressMessage(agent?: LabeledWithImage) {
+  function createProgressMessage(agent?: LabeledAgent) {
     return new ChatEntry({
       agentType: 'bot',
       content: '',

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

@@ -2,7 +2,7 @@ import { aiClient, ChatResponseWithSteps, StackspotAPIError, StreamCanceledError
 import { ChatResponse3 } from '@stack-spot/portal-network/api/ai'
 import { ChatEntry, KnowledgeSource, TextChatEntry } from '../state/ChatEntry'
 import { ChatState } from '../state/ChatState'
-import { LabeledWithImage } from '../state/types'
+import { LabeledAgent } from '../state/types'
 import { buildConversationContext } from '../utils/chat'
 import { treatHTMLInErrorMessage } from '../utils/error'
 import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
@@ -12,13 +12,14 @@ import { genericSourcesToKnowledgeSources } from '../utils/knowledge-source'
  * @param response the original response.
  * @param knowledgeSources the knowledge sources already in format used by the chat.
  * @param agent the current chat agent.
+ * @param tools the tools for the current chat agent.
  * @param includeDate whether or not to include the date in the chat entry.
  * @returns the TextChatEntry to build a ChatEntry.
  */
 function createEntryValueFromChatResponse(
   response: Partial<ChatResponseWithSteps>,
   knowledgeSources: KnowledgeSource[] | undefined,
-  agent: LabeledWithImage | undefined,
+  agent: LabeledAgent | undefined,
   includeDate = false,
 ): TextChatEntry {
   return {
@@ -30,6 +31,7 @@ function createEntryValueFromChatResponse(
     agent: agent,
     updated: includeDate ? new Date().toISOString() : undefined,
     steps: response.steps,
+    tools: response.tools,
   }
 }
 

package/src/components/Markdown.tsx

@@ -32,6 +32,7 @@ export const Markdown = (
 ) => (
   <>
     <ReactMarkdown
+      className="markdown"
       remarkPlugins={[[remarkGfm]]}
       components={{
         a: props => <a target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'underline' }} {...props} />,

package/src/components/StackedBadge.tsx

@@ -0,0 +1,77 @@
+import { IconBox, Text } from '@citric/core'
+import { theme } from '@stack-spot/portal-theme'
+import { DetailedHTMLProps, HTMLAttributes } from 'react'
+import { styled } from 'styled-components'
+import { FastOmit } from 'styled-components/dist/types'
+
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+  label: string,
+  images: { key?: React.Key, name: string, url?: string, icon?: React.ReactElement }[],
+}
+
+const Styled = styled.div`
+  border-radius: 25px;
+  background-color: ${theme.color.light[600]};
+  border: 1px solid ${theme.color.light[500]};
+  color: ${theme.color.light[700]};
+  padding: 2px 7px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+
+  small {
+    line-height: 0.75rem;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+
+    li {
+      border: 1px solid ${theme.color.light[600]};
+      background-color: ${theme.color.light[400]};
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:first-child) {
+        margin-left: -12px;
+      }
+    }
+
+    i {
+      width: 12px;
+      height: 12px;
+    }
+
+    img, svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`
+
+export const StackedBadge = ({ label, images, ...props }: Props) => (
+  <Styled {...props}>
+    <Text appearance="microtext1">{label}</Text>
+    <ul>
+      {images.map(
+        ({ key, name, url, icon }, i) => (
+          <li key={key || i}>
+            {url
+              ? <img alt={name} aria-label={name} title={name} src={url} />
+              : <IconBox size="xs" aria-label={name} title={name}>{icon}</IconBox>
+            }
+          </li>
+        ),
+      )}
+    </ul>
+  </Styled>
+)

package/src/components/ToolBadge.tsx

@@ -0,0 +1,146 @@
+import { IconBox, Text } from '@citric/core'
+import { ChevronDown, Cog } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ColorSchemeKey, listToClass, theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { get } from 'lodash'
+import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
+import { styled } from 'styled-components'
+import { FastOmit } from 'styled-components/dist/types'
+import { toPrecision } from '../views/Steps/utils'
+
+interface Props extends FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> {
+  name: string,
+  duration?: number,
+  image?: string,
+  description?: string,
+  appearance?: 'round' | 'square',
+  backgroundColor?: ColorSchemeKey,
+}
+
+const Styled = styled.div<{ $backgroundColor: ColorSchemeKey }>`
+ .tool-header-wrapper {
+    background-color: ${({ $backgroundColor }) => get(theme.color, $backgroundColor)};
+    border-radius: 8px;
+  }
+ 
+  .tool-header {
+    padding: 4px 8px 4px 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    position: relative;
+
+    .title {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .tool-image {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .name {
+        flex: 1;
+      }
+    }
+
+    .btn-expand {
+      display: none;
+    }
+
+    .duration {
+      opacity: 0.7;
+      text-align: right;
+    }
+  }
+
+  &.with-description {
+    .tool-header {
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .btn-expand {
+        display: flex;
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &.round {
+    .tool-header-wrapper {
+      border-radius: 30px;
+    }
+    &:not(.with-description) {
+      .tool-header-wrapper {
+        padding-right: 10px;
+      }
+    }
+  }
+`
+
+export const ToolBadge = (
+  { name, duration, image, description, appearance = 'square', backgroundColor = 'light.300', className, ...props }: Props,
+) => {
+  const t = useTranslate(dictionary)
+  const [showDescription, setShowDescription] = useState(false)
+  const rootClass = listToClass([className, appearance, description && 'with-description'])
+  const wrapperClass = 'tool-header-wrapper'
+
+  const content = (
+    <div className="tool-header">
+      <div className="title">
+        {image ? <img src={image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
+        <Text colorScheme="light.700" className="name">{name}</Text>
+        {duration !== undefined && <Text colorScheme="light.700" className="duration">
+          {toPrecision(duration)}s
+        </Text>}
+        <IconButton
+          size="xs"
+          className={listToClass(['btn-expand', showDescription && 'open'])}
+          onClick={() => setShowDescription(v => !v)}
+          aria-label={showDescription ? t.close : t.open}
+        >
+          <ChevronDown />
+        </IconButton>
+      </div>
+      {showDescription && <Text className="description" colorScheme="light.700">{description}</Text>}
+    </div>
+  )
+
+  return (
+    <Styled {...props} $backgroundColor={backgroundColor} className={rootClass}>
+      {description ? <AnimatedHeight className={wrapperClass}>{content}</AnimatedHeight> : <div className={wrapperClass}>{content}</div>}
+    </Styled>
+  )
+}
+
+const dictionary = {
+  en: {
+    open: 'Open',
+    close: 'Close',
+  },
+  pt: {
+    open: 'Abrir',
+    close: 'Fechar',
+  },
+} satisfies Dictionary