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

package/src/views/Tools/StepModal.tsx

@@ -0,0 +1,247 @@
+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>
+  )
+}

package/src/views/Tools/ToolsPanel.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-default-export */
+
+import { useMemo, useState } from 'react'
+import { useWidget } from '../../context/hooks'
+import { FlowChart } from './FlowChart'
+import { StepModal } from './StepModal'
+
+const ToolsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+  const [currentStepId, setCurrentStepId] = useState<string | undefined>()
+  const widget = useWidget()
+  const message = useMemo(
+    () => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId),
+    [chatId, messageId],
+  )
+
+  return message ? (
+    <>
+      <FlowChart message={message} onClick={(step) => setCurrentStepId(step.id)} />
+      <StepModal message={message} stepId={currentStepId} onClose={() => setCurrentStepId(undefined)} />
+    </>
+  ) : null
+}
+
+export default ToolsPanel

package/src/views/Tools/dictionary.ts

@@ -0,0 +1,46 @@
+import { Dictionary, 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',
+  },
+} satisfies Dictionary
+
+export function useToolsDictionary() {
+  return useTranslate(dictionary)
+}
+
+export type ToolsDictionary = typeof dictionary['en']

package/src/views/Tools/index.tsx

@@ -0,0 +1,37 @@
+import { Flex } from '@citric/core'
+import { LoadingCircular } from '@citric/ui'
+import { lazy, Suspense, useEffect } from 'react'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { useToolsDictionary } from './dictionary'
+
+const LazyToolsPanel = lazy(() =>  import('./ToolsPanel'))
+
+/**
+ * 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(
+      <Suspense fallback={<Flex alignItems="center" justifyContent="center" flex={1}><LoadingCircular /></Flex>}>
+        <LazyToolsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
+      </Suspense>,
+      {
+        title: t.tools,
+        description: t.toolsDescription,
+        onClose: () => {
+          widget.set('panel', undefined)
+          widget.set('currentMessageInToolsPanel', undefined)
+        },
+      },
+    )
+  }, [panel, t, message])
+
+  return null
+}

package/src/views/Tools/utils.tsx

@@ -0,0 +1,34 @@
+import { IconBox } from '@citric/core'
+import { CheckCircleFill, ListUnordered, PlayFill, TimesCircleFill } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { ChatEntryStep } from '../../state/ChatEntry'
+
+export function getStatusIcon(status: ChatEntryStep['status']) {
+  switch (status) {
+    case 'success': return <IconBox colorIcon="success.500"><CheckCircleFill /></IconBox>
+    case 'error': return <IconBox colorIcon="danger.500"><TimesCircleFill /></IconBox>
+    case 'running': return <LoadingCircular colorScheme="inverse" size="xs" />
+    default: return null
+  }
+}
+
+export function getTypeIcon(type: ChatEntryStep['type']) {
+  switch (type) {
+    case 'planning': return <ListUnordered />
+    default: return <PlayFill />
+  }
+}
+
+export function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatEntryStep | undefined, index: number) {
+  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: number, precisionDigits = 1) {
+  const factor = Math.pow(10, precisionDigits)
+  return Math.round(n * factor) / factor
+}