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

package/src/views/Chat/StepsList.tsx

@@ -0,0 +1,394 @@
+import { Accordion, Badge, Button, Card, Column, Divider, Icon, IconBox, ImageWithFallback, ProgressCircular, Row, Skeleton, Text } from '@stack-spot/citric-react'
+import { AnimatedHeight } from '@stack-spot/portal-components/AnimatedHeight'
+import { ChatStep, StepChatStep, ToolChatStep } from '@stack-spot/portal-network'
+import { theme } from '@stack-spot/portal-theme'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { findLast, findLastIndex } from 'lodash'
+import React, { useEffect, useMemo } from 'react'
+import styled from 'styled-components'
+import { Markdown } from '../../components/Markdown'
+import { useChat, useChatMessages, useCurrentChat, useCurrentChatMessages, useIsLastEntryInCurrentChat, useWidget } from '../../context/hooks'
+import { ChatEntry } from '../../state/ChatEntry'
+import { planningToolDictionaryHelper } from '../../utils/planning-tool'
+import { updateToolStep } from '../../utils/update-tool-step'
+import { onCopyCode } from './events'
+
+interface Props {
+  steps: ChatStep[],
+  messageId: number,
+  chatId: string,
+}
+
+interface StepChatStepWithTarget extends Omit<StepChatStep, 'status' | 'id' | 'type'> {
+  status: 'pending' | 'running' | 'success' | 'error' | 'target' | 'awaiting_approval',
+}
+
+interface StepProps {
+  step: StepChatStepWithTarget,
+  index: number,
+  total?: number,
+  totalTools?: number,
+  isAllDone?: boolean,
+  onClick?: () => void,
+}
+
+function getStatusIcon(status: StepChatStepWithTarget['status'] | 'target', isDone?: boolean) {
+  const iconProps = { style: { color: theme.color.light[700] }, size: 'xs' } as const
+  switch (status) {
+    case 'error': return <Icon group="fill" icon="TimesCircle" {...iconProps} />
+    case 'success': return <Icon group="fill" icon="CheckCircle" {...iconProps} />
+    case 'pending': return <Icon group="fill" icon="Circle" {...iconProps} style={{ color: theme.color.light[600] }} />
+    case 'awaiting_approval': return <Icon group="fill" icon="ExclamationTriangle" {...iconProps} />
+    case 'target': return <Icon icon="Target" {...iconProps} style={{ color: isDone ? theme.color.light[700] : theme.color.light[600] }} />
+    case 'running': return <ProgressCircular className="loading" colorScheme="inverse" size="xs" />
+  }
+}
+
+const StepAccordionHeader = ({ step, index, expand }: Pick<StepProps, 'step' | 'index'> & { expand: React.ReactElement }) => {
+  const t = useTranslate(dictionary)
+  return <Row gap="8px">
+    {expand}
+    {step.status === 'target' ? <Text className="step-title" appearance="body2" color="light.700">{t.planGoal}:</Text> :
+      <Badge colorScheme="inverse" appearance="square" style={{ whiteSpace: 'nowrap' }}>
+        {t.step} {index}
+      </Badge>}
+    <Text className="step-title" appearance="body2">
+      {step.input}
+    </Text>
+    {step.status === 'awaiting_approval' &&
+      <Badge appearance="square" style={{ backgroundColor: theme.color.gray[800], color: theme.color.gray[50], whiteSpace: 'nowrap' }}>
+        <Icon icon="Security" />
+        {t.pendingReview}
+      </Badge>}
+  </Row>
+}
+
+const StyledCard = styled(Card)`
+  &:hover { 
+    background-color: ${theme.color.light[500]}
+  }
+`
+
+const Step = ({ step, index, onClick, total, totalTools, isAllDone }: StepProps) => {
+  const t = useTranslate(dictionary)
+  const status = getStatusIcon(step.status, isAllDone)
+  const hasTools = step.attempts?.[0]?.tools && step.attempts?.[0]?.tools?.length > 0
+
+  return (
+    <li tabIndex={onClick ? 0 : undefined} onClick={onClick} role={onClick ? 'button' : 'listitem'}>
+      <Row gap="4px" alignItems="center">
+        <div className="step-status-icon">{status}</div>
+        <StyledCard p="8px" w="80%">
+          <Accordion header={expand => <StepAccordionHeader step={step} index={index} expand={expand} />}>
+            <Column pt="12px">
+              {total ?
+                <Row gap="40px">
+                  <Row gap="4px">
+                    <Icon icon="Hashtag" size="sm" color="light.700" />
+                    <Text color="light.700">{t.totalSteps}</Text>
+                    {total}
+                  </Row>
+                  <Row gap="4px">
+                    <Icon icon="BorderRadius" size="sm" color="light.700" />
+                    <Text color="light.700">{t.totalTools}</Text>
+                    {totalTools ?? 0}
+                  </Row>
+                </Row>
+                : <>
+                  <Row pb="8px">
+                    <Icon icon="Target" size="sm" color="light.700" />
+                    <Text color="light.700" tag="span" style={{ margin: '0 4px' }}>{t.stepGoal}:</Text>
+                    <Text tag="span">
+                      {step.input}
+                    </Text>
+                  </Row>
+                  {hasTools ? <>
+                    <Row gap="4px">
+                      <Icon icon="BorderRadius" size="sm" color="light.700" />
+                      <Text color="light.700">{t.toolsToBeExecuted}:</Text>
+                    </Row>
+                    <ul className="tools-list">
+                      {step.attempts?.[0]?.tools?.map((tool, index) => (<li key={`${tool.id}-${index}`}>
+                        <Text>{tool.name}: {tool.goal}</Text>
+                      </li>))}
+                    </ul>
+                  </> : <Row gap="4px">
+                    <Icon icon="BorderRadius" size="sm" color="light.700" />
+                    <Text color="light.700">{t.noToolToBeUsed}</Text>
+                  </Row>
+                  }
+                </>
+              }
+            </Column>
+          </Accordion>
+        </StyledCard>
+      </Row>
+    </li>
+  )
+}
+
+export const StepsPlaceholder = () => {
+  const t = useTranslate(dictionary)
+  return <Card gap="8px">
+    <Row gap="8px">
+      <ProgressCircular colorScheme="inverse" size="xs" />
+      <Text color="light.700">{t.generatingPlan}</Text>
+    </Row>
+    <Text color="light.700">
+      {t.analyzingRequirements}
+    </Text>
+    <Row gap="12px">
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+      <Skeleton height="31px" width="148px" bgLevel={600} />
+    </Row>
+  </Card>
+}
+
+const AwaitingApproval = ({ customApproveText, chatId }: { chatId: string, customApproveText?: string }) => {
+  const t = useTranslate(dictionary)
+  const chat = useChat(chatId)
+
+  const onAnswer = (response: string) => {
+    chat.pushMessage(ChatEntry.createUserEntry(response))
+  }
+
+  return <>
+    <Row gap="8px">
+      <Button colorScheme="light" onClick={() => onAnswer(t.cancel)}>
+        <Row gap="8px">
+          <Icon icon="Stop" />
+          {t.cancel}
+        </Row>
+      </Button>
+
+      <Button colorScheme="inverse" onClick={() => onAnswer(customApproveText ?? t.approve)}>
+        <Row gap="8px">
+          <Icon group="fill" icon="Play" />
+          {customApproveText ?? t.approve}
+        </Row>
+      </Button>
+    </Row>
+  </>
+}
+
+const ToolStepsList = ({ toolStep, messageId, chatId }: { toolStep: ToolChatStep, messageId: number, chatId: string }) => {
+  const t = useTranslate(dictionary)
+  const chat = useCurrentChat()
+  const messages = useCurrentChatMessages()
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
+  const inputParsed = `\`\`\`json
+    ${JSON.stringify(toolStep?.input, null, 2)}
+  \`\`\``
+
+  const tool = useMemo(() => {
+    if (!toolStep) return undefined
+    return toolStep.attempts?.[0].tools?.[0]
+  }, [toolStep])
+
+  useEffect(() => {
+    if (!toolStep) return undefined
+    const executionId = toolStep.attempts?.[0]?.tools?.[0]?.executionId
+    if (!executionId) return
+
+    updateToolStep(messages, executionId, toolStep.status)
+
+  }, [messages, toolStep, toolStep.status])
+
+  return <>
+    {toolStep && tool ? <AnimatedHeight>
+      <div className="steps">
+        <Badge colorPalette="yellow" appearance="square" style={{ whiteSpace: 'nowrap' }}>
+          <Icon icon="StopWatch" />
+          <Text>{tool.name} {t.keepWorking}</Text>
+        </Badge>
+        <Card mt="16px" gap="8px" bgLevel={500}>
+          <Row>
+            <ImageWithFallback src={tool.image} width="32px" fallback={<IconBox appearance="circle" icon="StackSpot" />} />
+            <Text>{tool.name}</Text>
+          </Row>
+
+          <Text>
+            {toolStep.user_question}
+          </Text>
+
+          <Accordion header={expand => <Row gap="8px" mb="4px">
+            <Card p="4px" bgLevel={400}>{expand}</Card>
+            <Text > {t.viewDetails} </Text>
+          </Row>}>
+            <Markdown onCopyCode={(code) => onCopyCode(code, `${messageId}`, chat)}>
+              {inputParsed}
+            </Markdown>
+          </Accordion>
+
+          {isLastMessage && <AwaitingApproval customApproveText={t.approveTool} chatId={chatId} />}
+        </Card>
+      </div>
+    </AnimatedHeight> : null}
+  </>
+}
+
+export const StepsList = ({ steps, messageId, chatId }: Props) => {
+  const t = useTranslate(dictionary)
+  const isLastMessage = useIsLastEntryInCurrentChat(messageId)
+  
+  const filteredSteps = steps.filter(s => s.type === 'step')
+  const actualSteps = useMemo(() => filteredSteps.filter((item) => {
+    const messageIdForStep = planningToolDictionaryHelper.getMessageIdFromStepId(item.id)
+    if (!messageIdForStep) {
+      planningToolDictionaryHelper.setMessageIdForStepId(messageId, item.id)
+      return true
+    } else if (messageIdForStep === messageId) {
+      return true
+    }
+    // If a step is from a planning and it is already inserted in the planningToolDictionaryHelper it means the step is already in a 
+    // previous message and we do not want to show it again (for instance, when required a approval in the planning, we will have 
+    // two messages with the same step id one for the planning awaiting and one for the planning end, so we want to show only one) 
+    return false
+  }), [filteredSteps])
+
+  const planning = steps.filter(s => s.type === 'planning')
+
+  useEffect(() => {
+    actualSteps.map((item) => {
+      const executionId = item.attempts[0]?.tools?.[0]?.executionId
+      if (executionId) {
+        planningToolDictionaryHelper.setMessageIdPlanningStepToolExecutionId(`${messageId}`, executionId)
+      }
+    })
+  }, [actualSteps, messageId])
+
+  const toolsStep = findLast(steps, s => s.type === 'tool')
+
+  useEffect(() => {
+    const executionId = toolsStep?.attempts?.[0]?.tools?.[0]?.executionId
+    if (executionId) {
+      planningToolDictionaryHelper.setMessageIdToolStepToolExecutionId(`${messageId}`, executionId)
+    }
+  }, [toolsStep, messageId])
+
+  const planningGoal = planning?.[0]?.goal
+  const isLastStepDone = actualSteps[actualSteps.length - 1]?.status !== 'running' &&
+    actualSteps[actualSteps.length - 1]?.status !== 'pending'
+  const totalTools = useMemo(() => actualSteps?.reduce((sum, step) => {
+    const firstAttempt = step?.attempts && step.attempts[0]
+    const toolsCount = firstAttempt?.tools?.length ?? 0
+    return sum + toolsCount
+  }, 0), [steps])
+
+  let currentStepIndex = findLastIndex(actualSteps, s => s.status === 'running' || s.status === 'success')
+  if (currentStepIndex === -1) currentStepIndex = 0
+
+  return (<>
+    {actualSteps.length > 0 ? <AnimatedHeight>
+      <div className="steps">
+        <Row gap="14px" mb="8px" ml="5px">
+          <Icon icon="Target" size="sm" color="light.600" />
+          <Text>{t.executionPlan}</Text>
+        </Row>
+
+        <ul className="steps-list">
+          {actualSteps.map((s, i) => <Step step={s} key={i} index={i + 1} />)}
+
+          <Step
+            step={{ status: 'target', input: planningGoal, attempts: [] }}
+            index={currentStepIndex + 1}
+            total={actualSteps.length}
+            totalTools={totalTools}
+            isAllDone={isLastStepDone}
+          />
+        </ul>
+
+        <Column gap="8px" mt="8px">
+          <Divider colorScheme="light" />
+          <Text color="light.700">{planning?.[0]?.user_question}</Text>
+          {isLastMessage && planning?.[0]?.status === 'awaiting_approval' && <AwaitingApproval chatId={chatId} />}
+        </Column>
+
+        {planning?.[0]?.status === 'success' && <ViewToolsDetails chatId={chatId} messageId={messageId}/>}
+
+      </div>
+    </AnimatedHeight> : null}
+
+    {toolsStep && toolsStep.status === 'awaiting_approval' && <ToolStepsList toolStep={toolsStep} messageId={messageId} chatId={chatId} />}
+  </>
+  )
+}
+
+export const ViewToolsDetails = ({ chatId, messageId }: { chatId: string, messageId: number }) => {
+  const t = useTranslate(dictionary)
+  const messages = useChatMessages(chatId)
+  const widget = useWidget()
+  const getPlanningMessageId = () => {
+    const messageEntry = messages.find((message) => message.id === messageId)
+    const messageStep = messageEntry?.getValue().steps?.find((step) => step.type === 'step')
+    const messageWithPlanning = findLast(messages, (message) => {
+      const steps = message.getValue().steps
+      const planningStep = steps?.find((step) => step.id === messageStep?.id)
+      return planningStep ? true : false
+    })
+    return messageWithPlanning?.id
+  }
+
+  function openToolsPanel() {
+    const messageId = getPlanningMessageId()
+
+    if (messageId) {
+      widget.set('currentMessageInPanel', { chatId, messageId })
+      widget.set('panel', 'steps')
+    }
+  }
+
+  return <>
+    <div className="step-actions">
+      <Button colorScheme="light" size="sm" className="icon-button details" onClick={openToolsPanel}>
+        <Icon group="fill" icon="Play" size="xs" />
+        {t.detailed}
+      </Button>
+    </div>
+  </>
+}
+
+const dictionary = {
+  en: {
+    step: 'Step',
+    hideSteps: 'Hide steps',
+    detailed: 'View detailed mode',
+    generatingPlan: 'Generating execution plan...',
+    analyzingRequirements: 'Analyzing task requirements',
+    executionPlan: 'Execution Plan',
+    planGoal: 'Plan Goal',
+    toolsToBeExecuted: 'Tools to be executed',
+    totalSteps: 'Total Steps',
+    totalTools: 'Total Tools',
+    stepGoal: 'Step Goal',
+    cancel: 'Cancel execution',
+    approve: 'Approve & Execute Plan',
+    keepWorking: 'will keep working after your answer',
+    viewDetails: 'View details',
+    approveTool: 'Approve execution',
+    pendingReview: 'Pending review',
+    noToolToBeUsed: 'No tool will be needed',
+  },
+  pt: {
+    step: 'Passo',
+    hideSteps: 'Esconder passos',
+    detailed: 'Ver modo detalhado',
+    generatingPlan: 'Gerando plano de execução...',
+    analyzingRequirements: 'Analisando os requisitos da task',
+    executionPlan: 'Plano de Execução',
+    planGoal: 'Finalidade do Plano',
+    toolsToBeExecuted: 'Tools a serem executadas',
+    totalSteps: 'Total de Passos',
+    totalTools: 'Total de Tools',
+    stepGoal: 'Objetivo do passo',
+    cancel: 'Cancelar execução',
+    approve: 'Aprovar & Executar plano',
+    keepWorking: 'continuará trabalhando após a sua resposta',
+    viewDetails: 'Ver detalhes',
+    approveTool: 'Aprovar execução',
+    pendingReview: 'Revisão pendente',
+    noToolToBeUsed: 'Nenhuma tool será necessária',
+  },
+} satisfies Dictionary

package/src/views/Chat/chat-scroll.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 
 /**
  * Scrolls the closest chat (upwards in the tree) to its bottom.
- * @param ref the reference element.
+ * @param ref the reference to the element contained the chat we want to scroll.
  * @param deps when the deps changes, the chat is scrolled.
  */
 export function useChatScrollToBottomEffect(ref: React.RefObject<HTMLElement>, deps: any[]) {

package/src/views/Chat/events.ts

@@ -0,0 +1,71 @@
+import { aiClient } from '@stack-spot/portal-network'
+import { TextChatEntry } from '../../state/ChatEntry'
+import { ChatState } from '../../state/ChatState'
+import { buildConversationContext } from '../../utils/chat'
+import { copyTextToClipboardWithFallback } from '../../utils/copy-to-clipboard'
+import { getSizeOfString } from '../../utils/string'
+
+/**
+ * Creates the event of copying a code.
+ * @param code the code copied.
+ * @param messageId the id of the message containing the code.
+ * @param chat the chat state.
+ */
+export async function onCopyCode(code: string, messageId: string, chat: ChatState) {
+  try {
+    await aiClient.createEvent.mutate({
+      body: [{
+        type: 'code_copied',
+        code,
+        context: buildConversationContext(chat),
+        size: getSizeOfString(code),
+        generated_at: new Date().getTime(),
+        message_id: messageId,
+      }],
+    })
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to register event: code copied.')
+  }
+}
+
+
+/**
+ * Creates the event of copying a whole message.
+ * @param entry the message copied.
+ * @param chat the chat state.
+ */
+export function onCopyAll(entry: TextChatEntry, chat: ChatState) {
+  copyTextToClipboardWithFallback(entry.content)
+  return aiClient.createEvent.mutate({
+    body: [
+      {
+        code: entry.content,
+        size: getSizeOfString(entry.content),
+        generated_at: new Date().getTime(),
+        type: 'copied_all',
+        knowledge_sources: entry.knowledgeSources?.map(ks => ({ slug: ks.slug, type: 'knowledge_source', name: ks.name })),
+        context: buildConversationContext(chat),
+        message_id: entry.messageId,
+      },
+    ],
+  })
+}
+
+/**
+ * Creates an event of like or dislike for a message.
+ * @param messageId the id of the message.
+ * @param like true if it's a like, false if it's a dislike.
+ */
+export function onLikeOrDislike(messageId: string, like: boolean) {
+  return aiClient.createEvent.mutate({
+    body: [{
+      feedback: like ? 'LIKE' : 'DISLIKE',
+      message_id: messageId,
+      type: 'user_feedback_provided',
+      code: '',
+      generated_at: Math.floor(new Date().getTime() / 1000),
+      size: 0,
+    }],
+  })
+}

package/src/views/Chat/index.tsx

@@ -1,11 +1,25 @@
 import { useChatTabs } from '../../context/hooks'
+import { CustomMessage } from './ChatMessage'
 import { ChatMessages } from './ChatMessages'
 
-interface Props {
+interface Props extends CustomMessage {
+  /**
+   * The name of the user currently logged in.
+   */
   username: string,
 }
 
-export const Chat = ({ username }: Props) => {
+/**
+ * Renders the chat panel, with all of its messages.
+ */
+export const Chat = ({ username, beforeMessage, afterMessage, customRenderer }: Props) => {
   const { active } = useChatTabs()
-  return <ChatMessages key={active} chatId={active} username={username} />
+  return <ChatMessages
+    key={active.id}
+    chatId={active.id}
+    username={username}
+    beforeMessage={beforeMessage}
+    afterMessage={afterMessage}
+    customRenderer={customRenderer}
+  />
 }