@stack-spot/ai-chat-widget 1.12.4 → 1.13.1

package/dist/views/Tools/StepModal.js

@@ -1,156 +0,0 @@
-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

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

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/dictionary.d.ts.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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.map

@@ -1 +0,0 @@
-{"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/utils.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/views/Tools/StepModal.tsx

@@ -1,247 +0,0 @@
-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'
-import { Markdown } from '../../components/Markdown'
-import { Modal } from '../../components/Modal'
-import { useChatEntry } from '../../context/hooks'
-import { AgentTool, ChatEntry } from '../../state/ChatEntry'
-import { useToolsDictionary } from './dictionary'
-import { getTitle, toPrecision } from './utils'
-
-interface Props {
-  message: ChatEntry,
-  stepId: string | undefined,
-  onClose: () => void,
-}
-
-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 }: { tool: AgentTool }) => {
-  const t = useToolsDictionary()
-  const [showDescription, setShowDescription] = useState(false)
-  return (
-    <AnimatedHeight className="tool-header-wrapper">
-      <div className="tool-header">
-        <div className="title">
-          {tool.image ? <img src={tool.image} className="tool-image" /> : <IconBox className="tool-image"><Cog /></IconBox>}
-          <Text colorScheme="light.700">{tool.name}</Text>
-          {tool.duration && <Text colorScheme="light.700" className="duration">
-            {interpolate(t.thoughtFor, toPrecision(tool.duration))}
-          </Text>}
-          {tool.description && <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">{tool.description}</Text>}
-      </div>
-    </AnimatedHeight>
-  )
-}
-
-export const StepModal = ({ message, stepId: initialStepId, onClose }: Props) => {
-  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 => (
-    <div className="tool" key={tool.id}>
-      <ToolHeader tool={tool} />
-      <Text appearance="microtext1" colorScheme="light.700">{t.input}:</Text>
-      {tool.input && <Code language="json" className="tool-input" showLineNumbers={false}>{tool.input}</Code>}
-    </div>
-  ))
-
-  const outputTools = step?.tools?.filter(tool => !!tool.output)?.map(tool => (
-    <div className="tool output" key={tool.id}>
-      <Badge appearance="square" palette="moss">{t.response}</Badge>
-      <ToolHeader tool={tool} />
-      <Text appearance="microtext1" colorScheme="light.700">{t.response}:</Text>
-      <Text appearance="microtext1">{tool.output}</Text>
-    </div>
-  ))
-
-  function changeStep(amount: number) {
-    const next = entry.steps?.[stepIndex + amount]?.id
-    if (next) setStepId(next)
-  }
-
-  const title = (
-    <Flex flex={1} justifyContent="space-between" alignItems="center">
-      <Text appearance="h6">{getTitle(t, step, stepIndex)}</Text>
-      <ExecutionBox>
-        <Text className="time" appearance="microtext1">
-          {step?.status === 'running' && t.running}
-          {step?.status === 'pending' && t.pending}
-          {step?.status === 'success' && `${t.executionTime}: ${step?.duration ? `${toPrecision(step?.duration)}s` : t.unknown}`}
-        </Text>
-        <div className="navigator">
-          {step?.type !== 'planning' && (
-            <IconButton size="xs" appearance="text" title={t.previousStep} aria-label={t.previousStep} onClick={() => changeStep(-1)}>
-              <ChevronLeft />
-            </IconButton>
-          )}
-          {step?.type === 'step' && <Text appearance="microtext1">{stepIndex}/{(entry.steps?.length ?? 0) - 2}</Text>}
-          {step?.type !== 'answer' && (
-            <IconButton size="xs" appearance="text" title={t.nextStep} aria-label={t.nextStep} onClick={() => changeStep(1)}>
-              <ChevronRight />
-            </IconButton>
-          )}
-        </div>
-      </ExecutionBox>
-    </Flex>
-  )
-
-  return (
-    <Modal open={!!step} onClose={onClose} title={title}>
-      {step?.type === 'answer' && <StyledSection className="restrict-image-size">
-        {entry.type === 'md' ? <Markdown>{entry.content}</Markdown> : <Text>{entry.content}</Text>}  
-      </StyledSection>}
-      {step?.input && <StyledSection>
-        <Badge appearance="square" palette="blue">Prompt</Badge>
-        <Text>{step.input}</Text>
-        {inputTools}
-      </StyledSection>}
-      {(outputTools?.length || step?.output) && (
-        <StyledSection> 
-          {outputTools}
-          {step?.output && !outputTools?.length && <>
-            <Badge appearance="square" palette="moss">{t.response}</Badge>
-            <Text>{step.output}</Text>
-          </>}
-        </StyledSection>
-      )}
-    </Modal>
-  )
-}