@stack-spot/ai-chat-widget 1.13.2-beta.0 → 1.13.2

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>
-  )
-}