@carto/ps-react-ui 4.4.0-chat-ui.0 → 4.4.0-chat-ui.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.4.0-chat-ui.0",
+  "version": "4.4.0-chat-ui.2",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -15,8 +15,8 @@
     "html2canvas": "1.4.1",
     "react-markdown": "10.1.0",
     "zustand": "5.0.11",
-    "@carto/ps-utils": "2.0.1",
-    "@carto/ps-common-types": "1.0.0"
+    "@carto/ps-common-types": "1.0.0",
+    "@carto/ps-utils": "2.0.1"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.0.0",

package/src/chat/const.ts

@@ -1,3 +1,4 @@
 export const CHAT_MAX_WIDTH = 768
 export const CHAT_SCROLL_DELAY = 300
 export const CHAT_DIVIDER_DELAY = 100
+export const CHAT_TOOL_CODE_AREA_MAX_HEIGHT = 126

package/src/chat/containers/styles.ts

@@ -85,6 +85,9 @@ export const styles = {
       animation: `${showFab} linear both`,
       animationTimeline: 'scroll(nearest)',
     },
+    '@supports not (animation-timeline: scroll())': {
+      display: 'none',
+    },
   },
   starter: {
     display: 'flex',

package/src/chat/feedback/chat-tool-code-area.test.tsx

@@ -0,0 +1,23 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ChatToolCodeArea } from './chat-tool-code-area'
+
+describe('ChatToolCodeArea', () => {
+  test('renders code content', () => {
+    render(<ChatToolCodeArea content='{"status": 200}' />)
+    expect(screen.getByText('{"status": 200}')).toBeTruthy()
+  })
+
+  test('applies error styling via isError prop', () => {
+    const { container } = render(
+      <ChatToolCodeArea content='Error output' isError />,
+    )
+    const pre = container.querySelector('pre')
+    expect(pre).toBeTruthy()
+  })
+
+  test('does not show Full view button when content fits', () => {
+    render(<ChatToolCodeArea content='short' />)
+    expect(screen.queryByText('Full view')).toBeNull()
+  })
+})

package/src/chat/feedback/chat-tool-code-area.tsx

@@ -0,0 +1,71 @@
+import { useRef, useState, useEffect, useCallback } from 'react'
+import { Box, IconButton, Tooltip } from '@mui/material'
+import type { ChatToolCodeAreaProps } from '../types'
+import { CHAT_TOOL_CODE_AREA_MAX_HEIGHT } from '../const'
+import { ChatToolFullViewDialog } from './chat-tool-full-view-dialog'
+import { styles } from './styles'
+import { OpenDiagonallyRight } from '@carto/meridian-ds/custom-icons'
+
+export function ChatToolCodeArea({
+  content,
+  title = '',
+  isError = false,
+  labels = {},
+  sx,
+}: ChatToolCodeAreaProps & { isError?: boolean }) {
+  const preRef = useRef<HTMLPreElement>(null)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const checkOverflow = useCallback(() => {
+    const el = preRef.current
+    if (el) {
+      setIsOverflowing(el.scrollHeight > el.clientHeight)
+    }
+  }, [])
+
+  useEffect(() => {
+    checkOverflow()
+    const el = preRef.current
+    if (!el) return
+
+    const observer = new ResizeObserver(checkOverflow)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [checkOverflow, content])
+
+  const fullViewLabel = labels.fullView ?? 'Full view'
+
+  return (
+    <Box sx={{ ...styles.codeArea, ...sx }}>
+      <Box
+        component='pre'
+        ref={preRef}
+        sx={{
+          ...styles.codeAreaPre,
+          maxHeight: CHAT_TOOL_CODE_AREA_MAX_HEIGHT,
+          ...(isError ? styles.codeAreaPreError : {}),
+        }}
+      >
+        {content}
+      </Box>
+      {isOverflowing && (
+        <Tooltip title={fullViewLabel}>
+          <IconButton
+            size='small'
+            onClick={() => setDialogOpen(true)}
+            sx={styles.codeAreaFullViewButton}
+          >
+            <OpenDiagonallyRight />
+          </IconButton>
+        </Tooltip>
+      )}
+      <ChatToolFullViewDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        title={title}
+        content={content}
+      />
+    </Box>
+  )
+}

package/src/chat/feedback/chat-tool-full-view-dialog.test.tsx

@@ -0,0 +1,39 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatToolFullViewDialog } from './chat-tool-full-view-dialog'
+
+describe('ChatToolFullViewDialog', () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+    title: 'Tool executed: Output',
+    content: '{"status": 200,\n"data": "test"}',
+  }
+
+  test('renders dialog with title when open', () => {
+    render(<ChatToolFullViewDialog {...defaultProps} />)
+    expect(screen.getByText('Tool executed: Output')).toBeTruthy()
+  })
+
+  test('renders content with line numbers', () => {
+    render(<ChatToolFullViewDialog {...defaultProps} />)
+    // NOTE: need to query outside of component to reach dialog portal
+    const pre = document.querySelector('pre')
+    expect(pre).toBeTruthy()
+    // NOTE: json text is tokenized and split into various tokens so we cannot reach it fully with `queryByText`
+    expect(pre!.textContent).toContain('{"status": 200,')
+    expect(pre!.textContent).toContain('"data": "test"}')
+  })
+
+  test('does not render content when closed', () => {
+    render(<ChatToolFullViewDialog {...defaultProps} open={false} />)
+    expect(screen.queryByText('Tool executed: Output')).toBeNull()
+  })
+
+  test('calls onClose when close button is clicked', () => {
+    const onClose = vi.fn()
+    render(<ChatToolFullViewDialog {...defaultProps} onClose={onClose} />)
+    fireEvent.click(screen.getByLabelText('close'))
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})

package/src/chat/feedback/chat-tool-full-view-dialog.tsx

@@ -0,0 +1,121 @@
+import { useMemo } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  Box,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
+import { CopyButton } from '../../components/copy-button/copy-button'
+import type { ChatToolFullViewDialogProps } from '../types'
+import { styles } from './styles'
+
+interface Token {
+  type: 'key' | 'string' | 'number' | 'boolean' | 'null' | 'punctuation'
+  value: string
+}
+
+const NUMBER_START_REGEX = /^-?\d/
+
+function tokenizeLine(line: string): (Token | string)[] {
+  const tokens: (Token | string)[] = []
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  // First, find all key positions by looking for "...": patterns
+  const keyPositions = new Set<number>()
+  const keyRegex = /("(?:[^"\\]|\\.)*")\s*:/g
+  let keyMatch: RegExpExecArray | null
+  while ((keyMatch = keyRegex.exec(line)) !== null) {
+    keyPositions.add(keyMatch.index)
+  }
+
+  const tokenRegex = // eslint-disable-next-line no-useless-escape
+    /"(?:[^"\\]|\\.)*"|\b(?:true|false)\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[{}\[\]:,]/g
+
+  while ((match = tokenRegex.exec(line)) !== null) {
+    if (match.index > lastIndex) {
+      tokens.push(line.slice(lastIndex, match.index))
+    }
+    const value = match[0]
+    if (value.startsWith('"')) {
+      if (keyPositions.has(match.index)) {
+        tokens.push({ type: 'key', value })
+      } else {
+        tokens.push({ type: 'string', value })
+      }
+    } else if (NUMBER_START_REGEX.test(value)) {
+      tokens.push({ type: 'number', value })
+    } else if (value === 'true' || value === 'false') {
+      tokens.push({ type: 'boolean', value })
+    } else if (value === 'null') {
+      tokens.push({ type: 'null', value })
+    } else {
+      tokens.push({ type: 'punctuation', value })
+    }
+    lastIndex = match.index + value.length
+  }
+
+  if (lastIndex < line.length) {
+    tokens.push(line.slice(lastIndex))
+  }
+
+  return tokens
+}
+
+export function ChatToolFullViewDialog({
+  open,
+  onClose,
+  title,
+  content,
+}: ChatToolFullViewDialogProps) {
+  const tokenizedLines = useMemo(
+    () => content.split('\n').map((line) => tokenizeLine(line)),
+    [content],
+  )
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      sx={styles.fullViewDialog}
+      PaperProps={{ sx: styles.fullViewPaper }}
+      fullScreen
+    >
+      <DialogTitle sx={styles.fullViewTitle}>
+        {title}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <CopyButton copyText={content} aria-label='Copy content' />
+          <IconButton onClick={onClose} aria-label='close'>
+            <Close />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent sx={styles.fullViewDialogContent}>
+        <Box component='pre' sx={styles.fullViewPre}>
+          {tokenizedLines.map((tokens, i) => (
+            <Box component='span' key={i} sx={styles.fullViewLine}>
+              {tokens.map((token, j) =>
+                typeof token === 'string' ? (
+                  token
+                ) : (
+                  <Box
+                    component='span'
+                    key={j}
+                    sx={
+                      styles[`syntaxToken_${token.type}` as keyof typeof styles]
+                    }
+                  >
+                    {token.value}
+                  </Box>
+                ),
+              )}
+              {'\n'}
+            </Box>
+          ))}
+        </Box>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/chat/feedback/chat-tool-group.test.tsx

@@ -0,0 +1,84 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatToolGroup } from './chat-tool-group'
+import type { ChatToolItem } from '../types'
+
+describe('ChatToolGroup', () => {
+  const tools: ChatToolItem[] = [
+    {
+      id: '1',
+      name: 'Tool #1',
+      status: 'complete',
+      reference: 'tool_1',
+      duration: 1.2,
+    },
+    {
+      id: '2',
+      name: 'Tool #2',
+      status: 'complete',
+      reference: 'tool_2',
+      duration: 0.8,
+    },
+    {
+      id: '3',
+      name: 'Tool #3',
+      status: 'error',
+      reference: 'tool_3',
+      duration: 2.1,
+    },
+  ]
+
+  test('renders "N tools used" label when collapsed', () => {
+    render(<ChatToolGroup tools={tools} />)
+    expect(screen.getByText('3 tools used')).toBeTruthy()
+  })
+
+  test('renders individual tool names when expanded', () => {
+    render(<ChatToolGroup tools={tools} expanded />)
+    expect(screen.getByText(/Tool #1/)).toBeTruthy()
+    expect(screen.getByText(/Tool #2/)).toBeTruthy()
+    expect(screen.getByText(/Tool #3/)).toBeTruthy()
+  })
+
+  test('shows "Error" label on failed tools in the expanded list', () => {
+    render(<ChatToolGroup tools={tools} expanded />)
+    expect(screen.getByText('Error')).toBeTruthy()
+  })
+
+  test('shows error count badge at group level when any tool has error', () => {
+    render(<ChatToolGroup tools={tools} />)
+    // New UI shows error count ("1") + error icon instead of "Error" text
+    expect(screen.getByTestId('ErrorOutlineIcon')).toBeTruthy()
+    expect(screen.getByText('1')).toBeTruthy()
+  })
+
+  test('calls onExpandedChange when group header is clicked', () => {
+    const onChange = vi.fn()
+    render(<ChatToolGroup tools={tools} onExpandedChange={onChange} />)
+    const summary = screen.getByText('3 tools used').closest('button')
+    if (summary) fireEvent.click(summary)
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  test('preserves individual tool expansion states via expandedTools prop', () => {
+    render(
+      <ChatToolGroup
+        tools={tools}
+        expanded
+        expandedTools={{ '1': true, '2': false, '3': false }}
+      />,
+    )
+    // Tool #1 should be expanded (shows its reference chip)
+    expect(screen.getByText(/tool_1/)).toBeTruthy()
+  })
+
+  test('uses custom toolsUsed label', () => {
+    render(
+      <ChatToolGroup
+        tools={tools}
+        labels={{ toolsUsed: 'herramientas usadas' }}
+      />,
+    )
+    expect(screen.getByText('3 herramientas usadas')).toBeTruthy()
+  })
+})

package/src/chat/feedback/chat-tool-group.tsx

@@ -0,0 +1,156 @@
+import { Box, Button, Collapse, Typography } from '@mui/material'
+import { ArrowRight, ChevronRight, ErrorOutline } from '@mui/icons-material'
+import type { ChatToolGroupProps } from '../types'
+import { ChatToolTrace, ChatToolTraceDetails } from './chat-tool-trace'
+import { styles } from './styles'
+import { getToolLabel } from './get-tool-label'
+import { useState } from 'react'
+
+function useController<T>(value: T, setter?: (value: T) => void) {
+  const [_value, _setter] = useState<T>(value)
+  if (setter) {
+    return [value, setter] as const
+  } else {
+    return [_value, _setter] as const
+  }
+}
+
+export function ChatToolGroup({
+  tools,
+  expanded: _expanded = false,
+  onExpandedChange: _setExpanded,
+  expandedTools: _expandedTools = {},
+  onToolExpandedChange: _setExpandedTools,
+  labels = {},
+  sx,
+}: ChatToolGroupProps) {
+  const [expanded, setExpanded] = useController(_expanded, _setExpanded)
+  const [expandedTools, setExpandedTools] = useController(
+    _expandedTools,
+    _setExpandedTools,
+  )
+
+  const numErrors = tools.filter((t) => t.status === 'error').length
+  const runningTools = tools.filter((t) => t.status === 'running')
+  const nonRunningTools = tools.filter((t) => t.status !== 'running')
+  const toolsUsedLabel = labels.toolsUsed ?? 'tools used'
+  const errorLabel = labels.error ?? 'Error'
+
+  if (tools.length === 1) {
+    return (
+      <ChatToolTrace
+        tool={tools[0]!}
+        expanded={expanded}
+        onExpandedChange={setExpanded}
+        labels={labels}
+        sx={sx}
+      />
+    )
+  }
+
+  return (
+    <Box width='100%' sx={sx} className='PsChat--tool-group'>
+      <Button
+        size='small'
+        variant='text'
+        onClick={() => setExpanded(!expanded)}
+        aria-expanded={expanded}
+        sx={{
+          ...styles.traceHeader,
+          pr: numErrors > 0 ? 0.5 : 0,
+        }}
+      >
+        <Typography variant='caption' fontWeight={600} color='text.secondary'>
+          {tools.length} {toolsUsedLabel}
+        </Typography>
+        <ArrowRight
+          sx={{
+            ...styles.traceChevron,
+            transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+          }}
+        />
+        {numErrors > 0 && (
+          <Typography variant='code3' sx={styles.errorBadge}>
+            {numErrors}
+            <ErrorOutline sx={{ fontSize: 12 }} color='error' />
+          </Typography>
+        )}
+      </Button>
+      <Collapse in={expanded} unmountOnExit>
+        <Box
+          component='ul'
+          sx={{
+            ...styles.traceDetailsWrapper,
+            p: 0,
+            listStyle: 'none',
+          }}
+        >
+          {nonRunningTools.map((tool) => {
+            const isExpanded = expandedTools[tool.id] ?? false
+            return (
+              <Box
+                key={tool.id}
+                component='li'
+                sx={styles.groupListItem}
+                aria-expanded={isExpanded}
+              >
+                <Button
+                  variant='text'
+                  color='inherit'
+                  fullWidth
+                  onClick={() =>
+                    setExpandedTools({
+                      ...expandedTools,
+                      [tool.id]: !isExpanded,
+                    })
+                  }
+                  aria-expanded={isExpanded}
+                  sx={styles.groupHeader}
+                >
+                  <Typography
+                    flexGrow={1}
+                    flexShrink={0}
+                    variant='caption'
+                    color='text.secondary'
+                  >
+                    {getToolLabel(tool)}
+                  </Typography>
+                  {tool.status === 'error' && (
+                    <Typography variant='code3' color='error.main'>
+                      {errorLabel}
+                    </Typography>
+                  )}
+                  <ChevronRight
+                    sx={{
+                      ...styles.traceChevron,
+                      transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                    }}
+                  />
+                </Button>
+                <Collapse in={isExpanded} unmountOnExit>
+                  <Box px={1.5} py={1}>
+                    <ChatToolTraceDetails tool={tool} labels={labels} />
+                  </Box>
+                </Collapse>
+              </Box>
+            )
+          })}
+        </Box>
+      </Collapse>
+      {runningTools.map((tool) => (
+        <ChatToolTrace
+          key={tool.id}
+          tool={tool}
+          labels={labels}
+          expanded={expandedTools[tool.id]}
+          onExpandedChange={() =>
+            setExpandedTools({
+              ...expandedTools,
+              [tool.id]: !expandedTools[tool.id],
+            })
+          }
+        />
+      ))}
+    </Box>
+  )
+}

package/src/chat/feedback/chat-tool-trace.test.tsx

@@ -0,0 +1,81 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatToolTrace } from './chat-tool-trace'
+import type { ChatToolItem } from '../types'
+
+describe('ChatToolTrace', () => {
+  const completeTool: ChatToolItem = {
+    id: '1',
+    name: 'add_marker',
+    status: 'complete',
+    reference: 'add_marker',
+    duration: 1.8,
+    inputArguments:
+      '{"latitude": 39.610861,\n"label": "Calle Toledo 1, Ciudad Real",\n"longitude": -4.2393630}',
+    output: '{ "success": true, "data": {} }',
+  }
+
+  const runningTool: ChatToolItem = {
+    id: '2',
+    name: 'execute_sql',
+    status: 'running',
+  }
+
+  const errorTool: ChatToolItem = {
+    id: '3',
+    name: 'execute_sql',
+    status: 'error',
+    reference: 'execute_sql',
+    duration: 1.8,
+    inputArguments: '{"datasetId": "abc123"}',
+    output: 'HTTP 400: Bad Request\n{"status":400,"error":"Syntax error"}',
+  }
+
+  test('renders "Tool executed" label for completed tools', () => {
+    render(<ChatToolTrace tool={completeTool} />)
+    expect(screen.getByText('Tool executed')).toBeTruthy()
+  })
+
+  test('renders reference name when provided', () => {
+    render(<ChatToolTrace tool={completeTool} expanded />)
+    expect(screen.getByText('add_marker')).toBeTruthy()
+  })
+
+  test('renders duration when provided', () => {
+    render(<ChatToolTrace tool={completeTool} expanded />)
+    expect(screen.getByText('1.8s')).toBeTruthy()
+  })
+
+  test('renders Success status for completed tools', () => {
+    render(<ChatToolTrace tool={completeTool} expanded />)
+    expect(screen.getByText('Success')).toBeTruthy()
+  })
+
+  test('renders Error status for failed tools', () => {
+    render(<ChatToolTrace tool={errorTool} expanded />)
+    expect(screen.getByText('Error')).toBeTruthy()
+  })
+
+  test('is NOT expandable when status is running', () => {
+    const { container } = render(<ChatToolTrace tool={runningTool} />)
+    expect(container.querySelector('button')).toBeNull()
+  })
+
+  test('renders input arguments code area', () => {
+    render(<ChatToolTrace tool={completeTool} expanded />)
+    expect(screen.getByText(/latitude/)).toBeTruthy()
+  })
+
+  test('renders output code area', () => {
+    render(<ChatToolTrace tool={completeTool} expanded />)
+    expect(screen.getByText(/success/)).toBeTruthy()
+  })
+
+  test('calls onExpandedChange callback', () => {
+    const onChange = vi.fn()
+    render(<ChatToolTrace tool={completeTool} onExpandedChange={onChange} />)
+    const summary = screen.getByText('Tool executed').closest('button')
+    if (summary) fireEvent.click(summary)
+    expect(onChange).toHaveBeenCalled()
+  })
+})