@stack-spot/ai-chat-widget 1.8.5 → 1.10.0

package/dist/views/Tools/StepModal.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Flex, IconBox, Text } from '@citric/core';
+import { ChevronDown, ChevronLeft, ChevronRight, Cog } from '@citric/icons';
+import { Badge, IconButton } from '@citric/ui';
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { interpolate } from '@stack-spot/portal-translate';
+import { useEffect, 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 { useChatEntry } from '../../context/hooks.js';
+import { useToolsDictionary } 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%;
+  }
+
+  .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;
+
+    &.output {
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .tool-header-wrapper {
+      background-color: ${theme.color.light[300]};
+      border-radius: 8px;
+    }
+
+    .tool-header {
+      padding: 4px 8px 4px 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      position: relative;
+
+      &:before {
+        content: '';
+        top: 32px;
+        bottom: 8px;
+        left: 15px;
+        width: 1px;
+        background-color: ${theme.color.light[700]};
+        opacity: 0.3;
+        position: absolute;
+      }
+
+      .title {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        .tool-image {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          overflow: hidden;
+          flex-shrink: 0;
+        }
+      }
+
+      .btn-expand {
+        transition: transform 0.3s ease-in-out;
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      .duration {
+        opacity: 0.7;
+        text-align: right;
+      }
+
+      .description {
+        padding: 0 0 10px 20px;
+        opacity: 0.7;
+      }
+    }
+
+    .tool-input {
+      align-self: stretch;
+      &, .highlighter {
+        background: ${theme.color.light[300]} !important;
+      }
+    }
+  }
+`;
+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;
+    }
+  }
+`;
+const ToolHeader = ({ tool }) => {
+    const t = useToolsDictionary();
+    const [showDescription, setShowDescription] = useState(false);
+    return (_jsx(AnimatedHeight, { className: "tool-header-wrapper", children: _jsxs("div", { className: "tool-header", children: [_jsxs("div", { className: "title", children: [tool.image ? _jsx("img", { src: tool.image, className: "tool-image" }) : _jsx(IconBox, { className: "tool-image", children: _jsx(Cog, {}) }), _jsx(Text, { colorScheme: "light.700", children: tool.name }), tool.duration && _jsx(Text, { colorScheme: "light.700", className: "duration", children: interpolate(t.thoughtFor, toPrecision(tool.duration)) }), tool.description && _jsx(IconButton, { size: "xs", className: listToClass(['btn-expand', showDescription && 'open']), onClick: () => setShowDescription(v => !v), "aria-label": showDescription ? t.close : t.open, children: _jsx(ChevronDown, {}) })] }), showDescription && _jsx(Text, { className: "description", colorScheme: "light.700", children: tool.description })] }) }));
+};
+export const StepModal = ({ message, stepId: initialStepId, onClose }) => {
+    const t = useToolsDictionary();
+    const [stepId, setStepId] = useState(initialStepId);
+    const entry = useChatEntry(message);
+    const stepIndex = useMemo(() => entry.steps?.findIndex(s => s.id === stepId) ?? -1, [entry, stepId]);
+    const step = entry.steps?.[stepIndex];
+    useEffect(() => setStepId(initialStepId), [initialStepId]);
+    const inputTools = step?.tools?.map(tool => (_jsxs("div", { className: "tool", children: [_jsx(ToolHeader, { tool: tool }), _jsxs(Text, { appearance: "microtext1", colorScheme: "light.700", children: [t.input, ":"] }), tool.input && _jsx(Code, { language: "json", className: "tool-input", showLineNumbers: false, children: tool.input })] }, tool.id)));
+    const outputTools = step?.tools?.filter(tool => !!tool.output)?.map(tool => (_jsxs("div", { className: "tool output", children: [_jsx(Badge, { appearance: "square", palette: "moss", children: t.response }), _jsx(ToolHeader, { tool: tool }), _jsxs(Text, { appearance: "microtext1", colorScheme: "light.700", children: [t.response, ":"] }), _jsx(Text, { appearance: "microtext1", children: tool.output })] }, tool.id)));
+    function changeStep(amount) {
+        const next = entry.steps?.[stepIndex + amount]?.id;
+        if (next)
+            setStepId(next);
+    }
+    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}`] }), _jsxs("div", { className: "navigator", children: [step?.type !== 'planning' && (_jsx(IconButton, { size: "xs", appearance: "text", title: t.previousStep, "aria-label": t.previousStep, onClick: () => changeStep(-1), children: _jsx(ChevronLeft, {}) })), step?.type === 'step' && _jsxs(Text, { appearance: "microtext1", children: [stepIndex, "/", (entry.steps?.length ?? 0) - 2] }), step?.type !== 'answer' && (_jsx(IconButton, { size: "xs", appearance: "text", title: t.nextStep, "aria-label": t.nextStep, onClick: () => changeStep(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?.input && _jsxs(StyledSection, { children: [_jsx(Badge, { appearance: "square", palette: "blue", children: "Prompt" }), _jsx(Text, { children: step.input }), inputTools] }), (outputTools?.length || step?.output) && (_jsxs(StyledSection, { children: [outputTools, step?.output && !outputTools?.length && _jsxs(_Fragment, { children: [_jsx(Badge, { appearance: "square", palette: "moss", children: t.response }), _jsx(Text, { children: step.output })] })] }))] }));
+};
+//# sourceMappingURL=StepModal.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolsPanel.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/ToolsPanel.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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable import/no-default-export */
+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 [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

package/dist/views/Tools/ToolsPanel.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+export declare const dictionary: {
+    en: {
+        toolsDescription: string;
+        step: string;
+        response: string;
+        tools: string;
+        planning: string;
+        answer: string;
+        executionTime: string;
+        unknown: string;
+        running: string;
+        pending: string;
+        nextStep: string;
+        previousStep: string;
+        thoughtFor: string;
+        open: string;
+        close: string;
+        input: string;
+    };
+    pt: {
+        toolsDescription: string;
+        step: string;
+        response: string;
+        tools: string;
+        planning: string;
+        answer: string;
+        executionTime: string;
+        unknown: string;
+        running: string;
+        pending: string;
+        nextStep: string;
+        previousStep: string;
+        thoughtFor: string;
+        open: string;
+        close: 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 type ToolsDictionary = typeof dictionary['en'];
+//# sourceMappingURL=dictionary.d.ts.map

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

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

package/dist/views/Tools/dictionary.js

@@ -0,0 +1,43 @@
+import { useTranslate } from '@stack-spot/portal-translate';
+export const dictionary = {
+    en: {
+        toolsDescription: 'A description for tools',
+        step: 'Step',
+        response: 'Response',
+        tools: 'Tools',
+        planning: 'Planning',
+        answer: 'Final answer',
+        executionTime: 'Time',
+        unknown: 'unknown',
+        running: 'Running',
+        pending: 'Pending',
+        nextStep: 'Next step',
+        previousStep: 'Previous step',
+        thoughtFor: 'Thought for $0 seconds',
+        open: 'Open',
+        close: 'Close',
+        input: 'Input',
+    },
+    pt: {
+        toolsDescription: 'Uma descrição para as Ferramentas',
+        step: 'Passo',
+        response: 'Resposta',
+        tools: 'Ferramentas',
+        planning: 'Planejamento',
+        answer: 'Resposta final',
+        executionTime: 'Tempo',
+        unknown: 'desconhecido',
+        running: 'Executando',
+        pending: 'Aguardando',
+        nextStep: 'Próximo passo',
+        previousStep: 'Passo anterior',
+        thoughtFor: 'Pensado por $0 segundos',
+        open: 'Open',
+        close: 'Close',
+        input: 'Entrada',
+    },
+};
+export function useToolsDictionary() {
+    return useTranslate(dictionary);
+}
+//# sourceMappingURL=dictionary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.js","sourceRoot":"","sources":["../../../src/views/Tools/dictionary.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAEvE,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,EAAE,EAAE;QACF,gBAAgB,EAAE,yBAAyB;QAC3C,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,QAAQ,EAAE,WAAW;QACrB,YAAY,EAAE,eAAe;QAC7B,UAAU,EAAE,wBAAwB;QACpC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,mCAAmC;QACrD,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,QAAQ,EAAE,eAAe;QACzB,YAAY,EAAE,gBAAgB;QAC9B,UAAU,EAAE,yBAAyB;QACrC,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,SAAS;KACjB;CACmB,CAAA;AAEtB,MAAM,UAAU,kBAAkB;IAChC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAA;AACjC,CAAC"}

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

@@ -0,0 +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;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/views/Tools/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@citric/core';
+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'));
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const Tools = () => {
+    const t = useToolsDictionary();
+    const panel = useWidgetState('panel');
+    const message = useWidgetState('currentMessageInToolsPanel');
+    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,
+                onClose: () => {
+                    widget.set('panel', undefined);
+                    widget.set('currentMessageInToolsPanel', undefined);
+                },
+            });
+    }, [panel, t, message]);
+    return null;
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Tools/index.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+import { ChatEntryStep } from '../../state/ChatEntry.js';
+export declare function getStatusIcon(status: ChatEntryStep['status']): import("react/jsx-runtime").JSX.Element | null;
+export declare function getTypeIcon(type: ChatEntryStep['type']): import("react/jsx-runtime").JSX.Element;
+export declare function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatEntryStep | undefined, index: number): string;
+export declare function toPrecision(n: number, precisionDigits?: number): number;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/views/Tools/utils.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAErD,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,kDAO5D;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,2CAKtD;AAED,wBAAgB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,UAAU,GAAG,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,IAAI,EAAE,aAAa,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,UAOnI;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,SAAI,UAGzD"}

package/dist/views/Tools/utils.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconBox } from '@citric/core';
+import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons';
+import { LoadingCircular } from '@citric/ui';
+export function getStatusIcon(status) {
+    switch (status) {
+        case 'success': return _jsx(IconBox, { colorIcon: "success.500", children: _jsx(CheckCircleFill, {}) });
+        case 'error': return _jsx(IconBox, { colorIcon: "danger.500", children: _jsx(TimesCircleFill, {}) });
+        case 'running': return _jsx(LoadingCircular, { colorScheme: "inverse", size: "xs" });
+        default: return null;
+    }
+}
+export function getTypeIcon(type) {
+    switch (type) {
+        case 'planning': return _jsx(ListUnordered, {});
+        default: return _jsx(PlayFill, {});
+    }
+}
+export function getTitle(translation, step, index) {
+    if (!step)
+        return '';
+    switch (step.type) {
+        case 'planning': return translation.planning;
+        case 'step': return `${translation.step} ${index}`;
+        case 'answer': return translation.answer;
+    }
+}
+export function toPrecision(n, precisionDigits = 1) {
+    const factor = Math.pow(10, precisionDigits);
+    return Math.round(n * factor) / factor;
+}
+//# sourceMappingURL=utils.js.map

package/dist/views/Tools/utils.js.map

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.8.5",
+  "version": "1.10.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,11 +10,11 @@
     "generate:metadata": "pnpm app-metadata --lockfile ../../pnpm-lock.yaml --path packages/widget"
   },
   "peerDependencies": {
-    "@citric/core": "^6.0.0",
-    "@citric/icons": "^5.4.0 || ^6.0.0",
-    "@citric/ui": "^5.4.0 || ^6.0.0",
+    "@citric/core": "^6.4.0",
+    "@citric/icons": "^5.9.0",
+    "@citric/ui": "^6.7.0",
     "@stack-spot/portal-components": "^2.8.1",
-    "@stack-spot/portal-network": "^0.48.0",
+    "@stack-spot/portal-network": "^0.102.0",
     "@stack-spot/portal-theme": "^1.0.0",
     "@stack-spot/portal-translate": "^1.1.0",
     "lodash": "^4.17.0",
@@ -49,9 +49,12 @@
     "@monaco-editor/react": "^4.6.0",
     "monaco-editor": "^0.52.0",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-international-phone": "^4.5.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "remark-gfm": "^4.0.0",
-    "ulid": "^2.3.0"
+    "ulid": "^2.3.0",
+    "@xyflow/react": "^12.3.2",
+    "@dagrejs/dagre": "^1.1.4"
   }
 }

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 { Tools } from './views/Tools'
 import { Workspaces } from './views/Workspaces'
 
 export interface AIWidgetProps extends WithStyle {
@@ -32,13 +33,17 @@ export interface AIWidgetProps extends WithStyle {
    * If the chat can be minimized, this set of functions tells what to do when minimization related buttons are clicked.
    */
   minimizedActions?: MinimizedActions,
+  /**
+   * A boolean indicating whether or not the chat should have a visible header.
+   */
+  hasHeader?: boolean,
 }
 
 /**
  * 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 = {}, children, className, style }: AIWidgetProps) => {
+export const StackspotAIWidget = ({ username, minimizedActions = {}, children, className, style, hasHeader = true }: AIWidgetProps) => {
   const rightPanelRef = useRef<HTMLDivElement>(null)
   const chatWindowRef = useRef<HTMLDivElement>(null)
   const currentChat = useCurrentChatMessages()
@@ -50,9 +55,12 @@ export const StackspotAIWidget = ({ username, minimizedActions = {}, children, c
       <RightPanelProvider chatWindow={chatWindowRef} panel={rightPanelRef}>
         <div className={listToClass(['ai-chat-widget', isMinimized && 'minimized', className])} translate="no" style={style}>
           <div className="chat-window" ref={chatWindowRef}>
-            {isMinimized
-              ? <MinimizedHeader {...minimizedActions} />
-              : <ChatTabSelection />
+            {hasHeader &&<>
+              {isMinimized
+                ? <MinimizedHeader {...minimizedActions} />
+                : <ChatTabSelection />
+              }
+            </>
             }
             <div className="chat-container">
               <div className="chat-content">
@@ -68,6 +76,7 @@ export const StackspotAIWidget = ({ username, minimizedActions = {}, children, c
           <Agents />
           <Editor />
           <ChatHistory />
+          <Tools />
           <div className="chat-right-panel" ref={rightPanelRef}><RightPanel /></div>
         </div>
       </RightPanelProvider>

package/src/app-metadata.json

@@ -1,7 +1,7 @@
 {
   "name": "@stack-spot/ai-chat-widget",
-  "version": "1.8.5",
-  "date": "Thu Mar 20 2025 18:29:57 GMT+0000 (Coordinated Universal Time)",
+  "version": "1.10.0",
+  "date": "Tue Mar 25 2025 17:02:17 GMT+0000 (Coordinated Universal Time)",
   "dependencies": [
     {
       "name": "@stack-spot/app-metadata",
@@ -9,15 +9,15 @@
     },
     {
       "name": "@types/lodash",
-      "version": "4.17.9"
+      "version": "4.17.16"
     },
     {
       "name": "@types/react",
-      "version": "18.3.11"
+      "version": "18.3.20"
     },
     {
       "name": "@types/react-dom",
-      "version": "18.3.0"
+      "version": "18.3.5(@types/react@18.3.20)"
     },
     {
       "name": "@types/react-syntax-highlighter",
@@ -25,11 +25,11 @@
     },
     {
       "name": "@typescript-eslint/eslint-plugin",
-      "version": "6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint@8.57.1)(typescript@5.6.2)"
+      "version": "6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)(typescript@5.8.2)"
     },
     {
       "name": "@typescript-eslint/parser",
-      "version": "6.21.0(eslint@8.57.1)(typescript@5.6.2)"
+      "version": "6.21.0(eslint@8.57.1)(typescript@5.8.2)"
     },
     {
       "name": "cpy-cli",
@@ -45,7 +45,7 @@
     },
     {
       "name": "eslint-plugin-import",
-      "version": "2.30.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.2))(eslint@8.57.1)"
+      "version": "2.31.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1)"
     },
     {
       "name": "eslint-plugin-lodash",
@@ -57,7 +57,7 @@
     },
     {
       "name": "eslint-plugin-react",
-      "version": "7.37.1(eslint@8.57.1)"
+      "version": "7.37.4(eslint@8.57.1)"
     },
     {
       "name": "eslint-plugin-react-hooks",
@@ -85,7 +85,7 @@
     },
     {
       "name": "typescript",
-      "version": "5.6.2"
+      "version": "5.8.2"
     },
     {
       "name": "@citric/core",
@@ -97,19 +97,23 @@
     },
     {
       "name": "@citric/ui",
-      "version": "6.5.5(@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)))(@citric/icons@5.9.0(react@18.2.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))"
+      "version": "6.7.0(@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)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(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))"
+    },
+    {
+      "name": "@dagrejs/dagre",
+      "version": "1.1.4"
     },
     {
       "name": "@monaco-editor/react",
-      "version": "4.6.0(monaco-editor@0.52.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "4.7.0(monaco-editor@0.52.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-components",
-      "version": "2.8.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)))(@citric/icons@5.9.0(react@18.2.0))(@citric/ui@6.5.5(@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)))(@citric/icons@5.9.0(react@18.2.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)))(@stack-spot/portal-theme@1.1.0(@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@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.11)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "version": "2.8.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)))(@citric/icons@5.9.0(react@18.2.0))(@citric/ui@6.7.0(@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)))(@citric/icons@5.9.0(react@18.2.0))(lodash@4.17.21)(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-theme@1.1.0(@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@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(@types/react@18.3.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
     {
       "name": "@stack-spot/portal-network",
-      "version": "0.48.0(@stack-spot/auth@5.3.2)(@stack-spot/opa@2.5.0(@stack-spot/auth@5.3.2)(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.59.16(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+      "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)"
     },
     {
       "name": "@stack-spot/portal-theme",
@@ -119,33 +123,41 @@
       "name": "@stack-spot/portal-translate",
       "version": "1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
     },
+    {
+      "name": "@xyflow/react",
+      "version": "12.4.4(@types/react@18.3.20)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)"
+    },
     {
       "name": "lodash",
       "version": "4.17.21"
     },
     {
       "name": "monaco-editor",
-      "version": "0.52.0"
+      "version": "0.52.2"
     },
     {
       "name": "react-infinite-scroll-component",
       "version": "6.1.0(react@18.2.0)"
     },
+    {
+      "name": "react-international-phone",
+      "version": "4.5.0(react@18.2.0)"
+    },
     {
       "name": "react-markdown",
-      "version": "9.0.1(@types/react@18.3.11)(react@18.2.0)"
+      "version": "9.1.0(@types/react@18.3.20)(react@18.2.0)"
     },
     {
       "name": "react-syntax-highlighter",
-      "version": "15.5.0(react@18.2.0)"
+      "version": "15.6.1(react@18.2.0)"
     },
     {
       "name": "remark-gfm",
-      "version": "4.0.0"
+      "version": "4.0.1"
     },
     {
       "name": "ulid",
-      "version": "2.3.0"
+      "version": "2.4.0"
     }
   ]
 }