@stack-spot/ai-chat-widget 0.11.0 → 1.0.0-dev.1768324407795

package/src/views/Steps/FlowChart/styled.ts

@@ -0,0 +1,157 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const stepNodeSize = { width: 400, height: 167 }
+export const planningNodeSize = { width: 400, height: 61 }
+export const answerNodeSize = { width: 400, height: 40 }
+
+export const FlowChartBox = styled.div`
+  width: 100%;
+  height: 100%;
+
+  .chart-node {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 6px;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[600]};
+    background-color: ${theme.color.light[500]};
+    box-sizing: border-box;
+    justify-content: center; 
+    width: 400px;
+
+    &.pending .source-handle {
+      opacity: 0.3;
+    }
+
+    .source-handle {
+      transition: opacity 1s ease; opacity: 1;
+    }
+
+    &.running .source-handle {
+       opacity: 0;
+    }
+    
+    &.step {
+      width: ${stepNodeSize.width}px;
+      min-height: ${stepNodeSize.height}px;
+    }
+
+    &.planning {
+      width: ${planningNodeSize.width}px;
+      min-height: ${planningNodeSize.height}px;
+    }
+
+    &.answer {
+      width: ${answerNodeSize.width}px;
+      min-height: ${answerNodeSize.height}px;
+    }
+    header {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+      .step-index {
+        flex: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .step-title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: ${theme.color.light[700]};
+      overflow-x: clip;
+    }
+
+    .step-details {
+      background-color: ${theme.color.light[400]};
+      border-radius: 2px;
+      padding: 8px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      justify-content: space-between;
+      gap: 8px;
+      overflow: hidden;
+
+      .step-description {
+        flex: 1;
+        line-height: 18px;
+        max-height: 72px; // line-height * 4
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical; 
+
+        &.with-tools {
+          max-height: 36px; // line-height * 2
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+
+    .wrapper-tool {
+      &:not(:last-child) {         
+        border-bottom: 1px solid ${theme.color.light[600]};
+        padding-bottom: 8px;
+      }
+      
+      .tool {
+        padding: 8px;     
+        border-radius: 4px;
+        min-height: 48px;
+        border: 1px solid ${theme.color.light[500]};
+        background-color: ${theme.color.light[400]}; 
+        border-bottom: 1px solid ${theme.color.light[300]}; 
+        cursor: pointer; 
+      
+        &:hover .title {
+          text-decoration: underline;
+        }      
+      }
+    }
+ 
+  }
+
+  .source-handle {
+    background-color: ${theme.color.light[700]};
+    border: none;
+  }
+
+  .target-handle {
+    opacity: 0;
+  }
+
+  .controls {
+    background-color: ${theme.color.light[300]};
+    border-radius: 4px;
+    border: none;
+    display: flex;
+
+    button {
+      background: transparent;
+      border: none;
+    }
+  }
+
+  .edge {
+    path {
+      stroke: ${theme.color.light[700]};
+      stroke-width: 2px;
+    }
+    &.pending path {
+      opacity: 0.3;
+    }
+    &.running path {
+      stroke-dasharray: 5, 5;
+    }
+  }
+
+  .react-flow__attribution {
+    background-color: transparent;
+    opacity: 0.1;
+  }
+`

package/src/views/Steps/FlowChart/types.ts

@@ -0,0 +1,28 @@
+import { ChatStep } from '@stack-spot/portal-network'
+import { Node } from '@xyflow/react'
+import { ChatEntry } from '../../../state/ChatEntry'
+
+export type NodeType = 'step' | 'planning' | 'answer' | 'tool'
+
+export interface NodeData {
+  nextStatus: ChatStep['status'] | undefined,
+  onClick?: (toolIndex?:  number) => void,
+  step: ChatStep,
+  index: number,
+  message: ChatEntry,
+  onResize?: (size: { width: number, height: number }) => void,
+}
+
+export interface NodeWithoutLayout {
+  id: string,
+  type: NodeType,
+  data?: NodeData,
+}
+
+export type NodeDataFullProps = NodeData & Record<string, unknown>
+
+export interface NodeFullProps extends Node<NodeDataFullProps> {
+  type: NodeType,
+}
+
+

package/src/views/Steps/StepModal.tsx

@@ -0,0 +1,233 @@
+import { Avatar, Badge, Divider, IconButton, Row, Text } from '@stack-spot/citric-react'
+import { ChatAgentTool } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
+import { isNil } from 'lodash'
+import { 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 { ToolBadge } from '../../components/ToolBadge'
+import { useChatEntry } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { useStepsDictionary } from './dictionary'
+import { getTitle, toPrecision } from './utils'
+
+interface Props {
+  message: ChatEntry,
+  stepId: string | undefined,
+  toolIndex?: number,
+  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%;
+  }
+
+  .markdown p {
+    margin-top: 0;
+  }
+
+  .tool {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    align-self: stretch;
+    gap: 6px;
+    background-color: ${theme.color.light[400]};
+    border-radius: 5px;
+    padding: 0 6px;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid ${theme.color.light[500]};
+    }
+
+    hr {
+      margin: 16px 0;
+    }
+    
+    .header-code {
+      background-color: ${theme.color.light[300]};
+    }
+
+    .tool-input {
+      align-self: stretch;
+      border: 1px solid ${theme.color.light[600]};
+      margin-top: 8px;
+      &, .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, toolIndex, onClose }: Props) => {
+  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 showSingleTool = !isNil(toolIndex)
+  const attemptTools: ChatAgentTool[] | undefined = step?.type === 'step' ? step.attempts[attempt]?.tools : undefined
+  const toolsToRender = showSingleTool && attemptTools ? [attemptTools[toolIndex]].filter(Boolean) : attemptTools
+
+  const tools = toolsToRender?.map(tool => (
+    <div className="tool" key={tool.id}>
+      {!showSingleTool && <ToolBadge name={tool.name ?? ''} duration={tool.duration} image={tool.image} description={tool.description} />}
+      {tool.input && <>
+        <Badge appearance="square" colorPalette="cyan">{t.input}</Badge>
+        <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.input}</Code>
+      </>}
+      {tool.output && <>
+        <Divider />
+        <Badge appearance="square" colorPalette="cyan">{t.response}</Badge>
+        <Code language="json" className="tool-input" showLineNumbers={false} showActionBar>{tool.output}</Code>
+      </>}
+    </div>
+  ))
+
+  const singleTool = showSingleTool ? toolsToRender?.[0] : undefined
+
+  const title = (showSingleTool
+    ? <Row flex={1} gap="8px">
+      {!!singleTool?.name && <Avatar size="xxs" image={singleTool?.image} name={singleTool?.name} />}
+      <Text appearance="h6">{singleTool?.name ?? t.finalAnswer}</Text>
+    </Row>
+    : <Row flex={1} justifyContent="space-between">
+      <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>
+        {step?.type === 'step' && step.attempts.length > 1 && <div className="navigator">
+          {attempt > 0 && (
+            <IconButton
+              icon="ChevronLeft"
+              size="xs"
+              title={t.previousAttempt}
+              aria-label={t.previousAttempt}
+              onClick={() => setAttempt(attempt - 1)}
+            />
+          )}
+          <Text appearance="microtext1">{attempt + 1}/{step.attempts.length}</Text>
+          {attempt < step.attempts.length - 1 && (
+            <IconButton
+              icon="ChevronRight"
+              size="xs"
+              title={t.nextAttempt}
+              aria-label={t.nextAttempt}
+              onClick={() => setAttempt(attempt + 1)}
+            />
+          )}
+        </div>}
+      </ExecutionBox>
+    </Row>
+  )
+
+  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?.type === 'planning' && <StyledSection style={{ alignItems: 'stretch' }}>
+        <Badge appearance="square" colorPalette="blue" style={{ alignSelf: 'start' }}>Prompt</Badge>
+        <Text>{step.goal}</Text>
+        <ul className="steps">
+          {entry.steps?.filter(s => s.type === 'step').map((s, index) => (
+            <li key={index}>
+              <Row mb={2}>
+                <Text>{t.step} {index + 1}: <span className="step-description">{s.input}</span></Text>
+              </Row>
+              {!!s.attempts[0].tools?.length && <ul className="side-by-side-tools">
+                {s.attempts[0].tools.map((tool) => (
+                  <li key={tool.id}>
+                    <ToolBadge name={tool.name ?? ''} image={tool.image} />
+                  </li>
+                ))}
+              </ul>}
+            </li>
+          ))}
+        </ul>
+      </StyledSection>}
+
+      {step?.type === 'step' && step?.input && <StyledSection>
+        <Badge appearance="square" colorPalette="blue">Prompt</Badge>
+        <Text>{step.input}</Text>
+      </StyledSection>}
+      {!!tools?.length && <StyledSection>{tools}</StyledSection>}
+    </Modal>
+  )
+}

package/src/views/Steps/StepsPanel.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-default-export */
+
+import { ChatStep } from '@stack-spot/portal-network'
+import { useMemo, useState } from 'react'
+import { useWidget } from '../../context/hooks'
+import { FlowChart } from './FlowChart'
+import { StepModal } from './StepModal'
+
+const StepsPanel = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+  const [currentStepId, setCurrentStepId] = useState<string | undefined>()
+  const [toolIndex, setToolIndex] = useState<number | undefined>()
+  const widget = useWidget()
+  const message = useMemo(
+    () => widget.chatTabs.getAll().find(c => c.id === chatId)?.getMessages().find(m => m.id === messageId),
+    [chatId, messageId],
+  )
+
+  const handleClick = (step: ChatStep, tooIndex?: number) => {
+    setCurrentStepId(step.id)
+    setToolIndex(tooIndex)
+  }
+
+  return message ? (
+    <>
+      <FlowChart message={message} onClick={handleClick} direction="TB" />
+      <StepModal message={message} stepId={currentStepId} toolIndex={toolIndex} onClose={() => setCurrentStepId(undefined)} />
+    </>
+  ) : null
+}
+
+export default StepsPanel

package/src/views/Steps/dictionary.ts

@@ -0,0 +1,48 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+export const dictionary = {
+  en: {
+    stepsPanelDescription: 'The steps and tools used to reach the answer',
+    steps: 'Steps',
+    step: 'Step',
+    response: 'Response',
+    tools: 'Tools',
+    planning: 'Planning',
+    answer: 'Final answer',
+    executionTime: 'Time',
+    unknown: 'unknown',
+    running: 'Running',
+    pending: 'Pending',
+    nextAttempt: 'Next execution',
+    previousAttempt: 'Previous execution',
+    open: 'Open',
+    close: 'Close',
+    input: 'Input',
+    finalAnswer: 'Final answer',
+    userPrompt: 'User prompt',
+  },
+  pt: {
+    stepsPanelDescription: 'Os passos e ferramentas usados para chegar na resposta',
+    steps: 'Passos',
+    step: 'Passo',
+    response: 'Resposta',
+    tools: 'Ferramentas',
+    planning: 'Planejamento',
+    answer: 'Resposta final',
+    executionTime: 'Tempo',
+    unknown: 'desconhecido',
+    running: 'Executando',
+    pending: 'Aguardando',
+    nextAttempt: 'Próxima execução',
+    previousAttempt: 'Execução anterior',
+    input: 'Entrada',
+    finalAnswer: 'Resposta final',
+    userPrompt: 'Prompt do usuário',
+  },
+} satisfies Dictionary
+
+export function useStepsDictionary() {
+  return useTranslate(dictionary)
+}
+
+export type ToolsDictionary = typeof dictionary['en']

package/src/views/Steps/index.tsx

@@ -0,0 +1,36 @@
+import { FallbackBoundary } from '@stack-spot/citric-react'
+import { lazy, useEffect } from 'react'
+import { useWidget, useWidgetState } from '../../context/hooks'
+import { useRightPanel } from '../../right-panel/hooks'
+import { useStepsDictionary } from './dictionary'
+
+const LazyStepsPanel = lazy(() =>  import('./StepsPanel'))
+
+/**
+ * Renders the Stack selection form in the Right Panel if this is the panel that is currently opened.
+ */
+export const Steps = () => {
+  const t = useStepsDictionary()
+  const panel = useWidgetState('panel')
+  const message = useWidgetState('currentMessageInPanel')
+  const { open } = useRightPanel()
+  const widget = useWidget()
+
+  useEffect(() => {
+    if (panel === 'steps' && message) open(
+      <FallbackBoundary>
+        <LazyStepsPanel key={message.messageId} chatId={message.chatId} messageId={message.messageId} />
+      </FallbackBoundary>,
+      {
+        title: t.steps,
+        description: t.stepsPanelDescription,
+        onClose: () => {
+          widget.set('panel', undefined)
+          widget.set('currentMessageInPanel', undefined)
+        },
+      },
+    )
+  }, [panel, t, message])
+
+  return null
+}

package/src/views/Steps/utils.tsx

@@ -0,0 +1,34 @@
+import { Icon, WithIcon } from '@stack-spot/citric-icons'
+import { ProgressCircular } from '@stack-spot/citric-react'
+import { ChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
+
+export function getStatusIcon(status: ChatStep['status']) {
+  switch (status) {
+    case 'success': return <Icon group="fill" icon="CheckCircle" style={{ color: theme.color.success[500] }} />
+    case 'error': return <Icon group="fill" icon="TimesCircle" style={{ color: theme.color.danger[500] }} />
+    case 'running': return <ProgressCircular colorScheme="inverse" size="xs" />
+    default: return null
+  }
+}
+
+export function getTypeIcon(type: ChatStep['type']): WithIcon {
+  switch (type) {
+    case 'planning': return { group: 'fill', icon: 'ChevronRight' }
+    default: return { group: 'outline', icon: 'StackSpot' }
+  }
+}
+
+export function getTitle(translation: Record<'planning' | 'step' | 'answer', string>, step: ChatStep | 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
+}

package/src/views/Tools.tsx

@@ -0,0 +1,77 @@
+import { agentToolsClient } from '@stack-spot/portal-network'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useEffect, useMemo } from 'react'
+import styled from 'styled-components'
+import { ToolBadge } from '../components/ToolBadge'
+import { useWidget, useWidgetState } from '../context/hooks'
+import { useRightPanel } from '../right-panel/hooks'
+import { toolById } from '../utils/tools'
+
+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(
+      <ToolsPanel key={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 [toolKits] = agentToolsClient.tools.useStatefulQuery({}, { enabled: !!message?.agent?.id })
+  const [agent] = agentToolsClient.agent.useStatefulQuery({ agentId: message?.agent?.id || '' },
+    { enabled: !!message?.agent?.id })
+  const tools = useMemo(() => message?.tools?.map(id => toolById(id, toolKits)), [messageId, toolKits])
+  const customTools = useMemo(() => message?.tools?.map(id => toolById(id, agent?.toolkits?.custom_toolkits)),
+    [messageId, agent?.toolkits?.custom_toolkits])
+  return !!(tools?.length || customTools?.length) && (
+    <ToolList>
+      {[...(tools || []), ...(customTools || [])].map(
+        (tool) =>
+          tool && (
+            <li key={tool.id}>
+              <ToolBadge
+                name={tool.name || tool.id || ''}
+                image={tool.image ?? ''}
+                description={tool.description ?? ''}
+              />
+            </li>
+          ),
+      )}
+    </ToolList>
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Tools',
+    description: 'The tools used to generate the answer.',
+  },
+  pt: {
+    title: 'Ferramentas',
+    description: 'As ferramentas usadas para gerar a resposta.',
+  },
+} satisfies Dictionary