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

package/dist/views/Steps/StepModal.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex, Text } from '@citric/core';
+import { ChevronLeft, ChevronRight } from '@citric/icons';
+import { Badge, IconButton } from '@citric/ui';
+import { theme } from '@stack-spot/portal-theme';
+import { useMemo, useState } from 'react';
+import { styled } from 'styled-components';
+import { Code } from '../../components/Code.js';
+import { Markdown } from '../../components/Markdown.js';
+import { Modal } from '../../components/Modal.js';
+import { ToolBadge } from '../../components/ToolBadge.js';
+import { useChatEntry } from '../../context/hooks.js';
+import { useStepsDictionary } from './dictionary.js';
+import { getTitle, toPrecision } from './utils.js';
+const StyledSection = styled.section `
+  padding: 18px 14px;
+  border-bottom: 1px solid var(--light-600);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: start;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.restrict-image-size img {
+    max-width: 100%;
+  }
+
+  .markdown p {
+    margin-top: 0;
+  }
+
+  .tool {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    align-self: stretch;
+    gap: 6px;
+    background-color: ${theme.color.light[500]};
+    border-radius: 5px;
+    padding: 6px;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${theme.color.light[500]};
+    }
+
+    .tool-input {
+      align-self: stretch;
+      &, .highlighter {
+        background: ${theme.color.light[300]} !important;
+      }
+    }
+  }
+
+  p {
+    line-height: 20px;
+  }
+
+  ul.steps {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    > li {
+      padding: 8px 12px;
+      background-color: ${theme.color.light[500]};
+      border-radius: 6px;
+    }
+
+    .step-description {
+      color: ${theme.color.light[700]};
+    }
+  }
+
+  ul.side-by-side-tools {
+    margin: 14px 0 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+`;
+const ExecutionBox = styled.div `
+  border-radius: 4px;
+  background-color: ${theme.color.light[500]};
+  color: ${theme.color.light[700]};
+  display: flex;
+  align-items: center;
+  .time {
+    padding: 6px 8px;
+    border-right: 1px solid ${theme.color.light[600]};
+  }
+  .navigator {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    padding: 2px 8px;
+    button {
+      width: 12px;
+      height: 12px;
+      padding: 0;
+    }
+    small {
+      line-height: 0.75rem;
+    }
+  }
+`;
+export const StepModal = ({ message, stepId, onClose }) => {
+    const t = useStepsDictionary();
+    const entry = useChatEntry(message);
+    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", colorScheme: "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", colorScheme: "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(Flex, { flex: 1, justifyContent: "space-between", alignItems: "center", 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, { size: "xs", appearance: "text", title: t.previousAttempt, "aria-label": t.previousAttempt, onClick: () => setAttempt(attempt - 1), children: _jsx(ChevronLeft, {}) })), _jsxs(Text, { appearance: "microtext1", children: [attempt + 1, "/", step.attempts.length] }), attempt < step.attempts.length - 1 && (_jsx(IconButton, { size: "xs", appearance: "text", title: t.nextAttempt, "aria-label": t.nextAttempt, onClick: () => setAttempt(attempt + 1), children: _jsx(ChevronRight, {}) }))] })] })] }));
+    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", palette: "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(Flex, { 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, appearance: "round" }) }, tool.id))) })] }, index))) })] }), step?.type === 'step' && step?.input && _jsxs(StyledSection, { children: [_jsx(Badge, { appearance: "square", palette: "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

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

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

@@ -0,0 +1,6 @@
+declare const StepsPanel: ({ chatId, messageId }: {
+    chatId: string;
+    messageId: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default StepsPanel;
+//# sourceMappingURL=StepsPanel.d.ts.map

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":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;CAOzB,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACxB,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,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,UAAU,MAAM,OAAO,CAAC,SAAS,CAAI,EACtC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,CAC9F,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;IAEd,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC,uBAAuB,CAAC,IAAI,EAAE,CAAA;IAC3E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,CAAA;QAChE,OAAO,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IACf,MAAM,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAA;IAC5H,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAA;IAEnH,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,CACxB,KAAC,QAAQ,cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,uBACE,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAC,WAAW,GAC3B,IANK,IAAI,CAAC,EAAE,CAOX,CACN,CAAC,GACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,KAAK,EAAE,OAAO;QACd,WAAW,EAAE,wCAAwC;KACtD;IACD,EAAE,EAAE;QACF,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,8CAA8C;KAC5D;CACmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.13.2-beta.0",
+  "version": "1.13.2",
   "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.114.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
     "lodash": "^4.17.0",

package/src/StackspotAIWidget.tsx

@@ -6,6 +6,7 @@ import './layout.css'
 import { RightPanel } from './right-panel/RightPanel'
 import { RightPanelProvider } from './right-panel/RightPanelProvider'
 import { MinimizedActions } from './types'
+import { checkIsTrial } from './utils/check-is-trial'
 import { Agents } from './views/Agents'
 import { Chat } from './views/Chat'
 import { ChatHistory } from './views/ChatHistory'
@@ -17,6 +18,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'
 
@@ -47,14 +49,16 @@ export interface AIWidgetProps extends WithStyle {
  * Renders a Chat Widget according to the closest model found in the React tree (AIWidgetProvider). If no model is found, a global version
  * of the Chat Widget will be instantiated and used.
  */
-export const StackspotAIWidget = ({ username, minimizedActions = {}, prefix, children, className, style, hasHeader = true }: 
+export const StackspotAIWidget = ({ username, minimizedActions = {}, prefix, 
+  children, className, style, hasHeader = true }: 
   AIWidgetProps) => {
   const rightPanelRef = useRef<HTMLDivElement>(null)
   const chatWindowRef = useRef<HTMLDivElement>(null)
   const currentChat = useCurrentChatMessages()
   const isMinimized = useWidgetState('isMinimized')
   const isCurrentChatEmpty = currentChat.length === 0
-
+  const isTrial = checkIsTrial()
+  
   return useMemo(() => (
     <TooltipProvider>
       <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
@@ -76,12 +80,13 @@ export const StackspotAIWidget = ({ username, minimizedActions = {}, prefix, chi
             </div>
           </div>
           <Stacks />
-          <Workspaces />
+          {!isTrial && <Workspaces />}
           <KnowledgeSources />
           <KSDocument />
           <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.13.2",
+  "date": "Fri Apr 11 2025 20:03:32 GMT+0000 (Coordinated Universal 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.114.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)"
     },
     {
       "name": "@stack-spot/portal-theme",

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

@@ -12,6 +12,7 @@ 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.
  */
@@ -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>
+)