@carto/ps-react-ui 5.0.0-widgets.8 → 5.0.0

package/src/chat/containers/chat-footer.tsx

@@ -0,0 +1,166 @@
+import { useState } from 'react'
+import {
+  Box,
+  Button,
+  FormControl,
+  FormHelperText,
+  IconButton,
+  InputBase,
+  Menu,
+  MenuItem,
+  Typography,
+} from '@mui/material'
+import {
+  ArrowUpwardOutlined,
+  StopCircleOutlined,
+  KeyboardArrowDown,
+} from '@mui/icons-material'
+import type { ChatFooterProps } from '../types'
+import { styles } from './styles'
+
+const DEFAULT_CAPTION =
+  'Responses are AI-generated. Please verify key information.'
+
+export function ChatFooter({
+  value,
+  onChange,
+  onSend,
+  onStop,
+  isGenerating = false,
+  disabled = false,
+  placeholder = 'Type a message...',
+  labels = {},
+  caption = DEFAULT_CAPTION,
+  models,
+  selectedModel,
+  onModelChange,
+  startToolbarSlot,
+  endToolbarSlot,
+  sx,
+}: ChatFooterProps) {
+  const [modelAnchor, setModelAnchor] = useState<HTMLElement | null>(null)
+  const canSend = value.trim() && !disabled && !isGenerating
+  // Only worth showing when there's an actual choice — a single option is dead UI.
+  const showModelSelector = (models?.length ?? 0) > 1
+  const modelLabel = labels.model ?? 'Select model'
+  // Visible trigger text: the matched option's label, the raw value as a
+  // fallback, or the placeholder when nothing is selected yet.
+  const selectedLabel =
+    models?.find((m) => m.value === selectedModel)?.label ??
+    (selectedModel && selectedModel.length > 0 ? selectedModel : modelLabel)
+
+  // The slots row (start slot + model selector + end slot) renders under the input
+  // only when there's something to show; otherwise the grid is just input | send.
+  const hasSlots =
+    showModelSelector || Boolean(startToolbarSlot) || Boolean(endToolbarSlot)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (canSend) {
+        onSend()
+      }
+    }
+  }
+
+  const sendButton =
+    isGenerating && onStop ? (
+      <IconButton
+        size='small'
+        onClick={onStop}
+        disabled={disabled}
+        aria-label={labels.stop ?? 'Stop'}
+      >
+        <StopCircleOutlined />
+      </IconButton>
+    ) : (
+      <IconButton
+        size='small'
+        variant='contained'
+        color='primary'
+        onClick={onSend}
+        disabled={!canSend}
+        aria-label={labels.send ?? 'Send'}
+      >
+        <ArrowUpwardOutlined />
+      </IconButton>
+    )
+
+  return (
+    <FormControl fullWidth sx={{ ...styles.footerWrapper, ...sx }}>
+      {/* Two grid areas: [input + slots] | [send button, aligned to the end]. */}
+      <Box sx={styles.footerBox}>
+        <Box sx={styles.footerMain}>
+          <InputBase
+            multiline
+            minRows={1}
+            maxRows={8}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled || isGenerating}
+            sx={styles.footerInput}
+          />
+          {hasSlots && (
+            <Box sx={styles.footerSlots}>
+              {startToolbarSlot}
+              {showModelSelector && (
+                <>
+                  <Button
+                    size='small'
+                    variant='text'
+                    color='inherit'
+                    disabled={disabled || isGenerating}
+                    onClick={(e) => setModelAnchor(e.currentTarget)}
+                    aria-label={modelLabel}
+                    aria-haspopup='menu'
+                    aria-expanded={modelAnchor ? 'true' : undefined}
+                    endIcon={<KeyboardArrowDown />}
+                    sx={styles.modelSelector}
+                  >
+                    <Typography
+                      variant='caption'
+                      component='span'
+                      color='inherit'
+                      sx={styles.modelSelectorLabel}
+                    >
+                      {selectedLabel}
+                    </Typography>
+                  </Button>
+                  <Menu
+                    anchorEl={modelAnchor}
+                    open={Boolean(modelAnchor)}
+                    onClose={() => setModelAnchor(null)}
+                    variant='menu'
+                    elevation={8}
+                    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+                    transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+                  >
+                    {models?.map((m) => (
+                      <MenuItem
+                        key={m.value}
+                        selected={m.value === selectedModel}
+                        onClick={() => {
+                          onModelChange?.(m.value)
+                          setModelAnchor(null)
+                        }}
+                      >
+                        {m.label}
+                      </MenuItem>
+                    ))}
+                  </Menu>
+                </>
+              )}
+              {endToolbarSlot}
+            </Box>
+          )}
+        </Box>
+        <Box sx={styles.footerSend}>{sendButton}</Box>
+      </Box>
+      {caption ? (
+        <FormHelperText sx={styles.footerCaption}>{caption}</FormHelperText>
+      ) : null}
+    </FormControl>
+  )
+}

package/src/chat/containers/chat-header.test.tsx

@@ -0,0 +1,28 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatHeader } from './chat-header'
+
+describe('ChatHeader', () => {
+  test('renders title', () => {
+    render(<ChatHeader title='Chat Assistant' />)
+    expect(screen.getByText('Chat Assistant')).toBeTruthy()
+  })
+
+  test('renders close button when onClose provided', () => {
+    const onClose = vi.fn()
+    render(<ChatHeader title='Test' onClose={onClose} />)
+    const closeButton = screen.getByLabelText('Close')
+    fireEvent.click(closeButton)
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
+  test('renders rightSlot', () => {
+    render(<ChatHeader title='Test' rightSlot={<button>Custom</button>} />)
+    expect(screen.getByText('Custom')).toBeTruthy()
+  })
+
+  test('renders leftSlot', () => {
+    render(<ChatHeader title='Test' leftSlot={<button>Back</button>} />)
+    expect(screen.getByText('Back')).toBeTruthy()
+  })
+})

package/src/chat/containers/chat-header.tsx

@@ -0,0 +1,29 @@
+import { Box, IconButton, Typography } from '@mui/material'
+import { Close } from '@mui/icons-material'
+import type { ChatHeaderProps } from '../types'
+import { styles } from './styles'
+
+export function ChatHeader({
+  leftSlot,
+  title,
+  rightSlot,
+  onClose,
+  sx,
+}: ChatHeaderProps) {
+  return (
+    <Box sx={{ ...styles.header, ...sx }}>
+      {leftSlot}
+      <Typography variant='subtitle2' sx={styles.headerTitle}>
+        {title}
+      </Typography>
+      <Box sx={styles.headerActions}>
+        {rightSlot}
+        {onClose && (
+          <IconButton size='medium' onClick={onClose} aria-label='Close'>
+            <Close />
+          </IconButton>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/chat/containers/chat-starter.test.tsx

@@ -0,0 +1,32 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatStarter } from './chat-starter'
+
+describe('ChatStarter', () => {
+  const defaultItems = ['Suggestion 1', 'Suggestion 2']
+
+  test('renders title and description', () => {
+    render(
+      <ChatStarter
+        title='Welcome'
+        description='How can I help?'
+        items={defaultItems}
+      />,
+    )
+    expect(screen.getByText('Welcome')).toBeTruthy()
+    expect(screen.getByText('How can I help?')).toBeTruthy()
+  })
+
+  test('renders suggestion items', () => {
+    render(<ChatStarter items={defaultItems} />)
+    expect(screen.getByText('Suggestion 1')).toBeTruthy()
+    expect(screen.getByText('Suggestion 2')).toBeTruthy()
+  })
+
+  test('calls item onClick when clicked', () => {
+    const onSelect = vi.fn()
+    render(<ChatStarter items={defaultItems} onSelect={onSelect} />)
+    fireEvent.click(screen.getByText('Suggestion 1'))
+    expect(onSelect).toHaveBeenCalledTimes(1)
+  })
+})

package/src/chat/containers/chat-starter.tsx

@@ -0,0 +1,75 @@
+import { Box, Typography } from '@mui/material'
+import type { ChatStarterProps } from '../types'
+import { ChatSuggestionButton } from '../bubbles/chat-suggestion-button'
+import { styles } from './styles'
+
+const DEFAULT_PALETTE = [
+  '#C9DB7440', // pastel green
+  '#FE88B140', // pastel red
+  '#9EB9F340', // pastel blue
+  '#F6CF7140', // pastel yellow
+]
+
+export function ChatStarter({
+  icon,
+  title,
+  description,
+  items,
+  size = 'small',
+  onSelect,
+  sx,
+}: ChatStarterProps) {
+  const fullItems = items.map((item, index) => {
+    if (typeof item === 'string') {
+      return {
+        label: item,
+        color: DEFAULT_PALETTE[index],
+      }
+    } else {
+      return {
+        label: item.label,
+        color: item.color ?? DEFAULT_PALETTE[index],
+      }
+    }
+  })
+  return (
+    <Box
+      sx={{
+        ...styles.starter,
+        gap: size === 'small' ? 1 : 2,
+        ...sx,
+      }}
+    >
+      {icon}
+      {title && (
+        <Typography variant={size === 'small' ? 'h6' : 'h5'}>
+          {title}
+        </Typography>
+      )}
+      {description && (
+        <Typography
+          variant={size === 'small' ? 'body2' : 'body1'}
+          color='text.secondary'
+        >
+          {description}
+        </Typography>
+      )}
+      <Box
+        sx={{
+          ...styles.starterItems,
+          gap: size === 'small' ? 1 : 2,
+          ...(items.length > 2 ? styles.starterItemsTwoCol : undefined),
+        }}
+      >
+        {fullItems.map((item, i) => (
+          <ChatSuggestionButton
+            key={i}
+            label={item.label}
+            onClick={() => onSelect?.(item.label)}
+            color={item.color}
+          />
+        ))}
+      </Box>
+    </Box>
+  )
+}

package/src/chat/containers/index.ts

@@ -0,0 +1,4 @@
+export { ChatContent } from './chat-content'
+export { ChatHeader } from './chat-header'
+export { ChatFooter } from './chat-footer'
+export { ChatStarter } from './chat-starter'

package/src/chat/containers/styles.ts

@@ -0,0 +1,187 @@
+import type { SxProps, Theme } from '@mui/material'
+import { CHAT_MAX_WIDTH } from '../const'
+
+export const styles = {
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: ({ spacing }) => spacing(1),
+  },
+  headerTitle: {
+    flexGrow: 1,
+    px: ({ spacing }) => spacing(0.5),
+  },
+  headerActions: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: ({ spacing }) => spacing(2),
+    gap: ({ spacing }) => spacing(0.5),
+  },
+  footerWrapper: {
+    padding: ({ spacing }) => spacing(1),
+  },
+  /**
+   * Rounded input box, matching the reference ChatFooter. A two-column grid:
+   * main column (input + optional slots) | send button, bottom-aligned so it
+   * stays at the end as the input grows. NO vertical padding — the textarea's own
+   * padding sets the ~32px single-line height, so the box hugs the input.
+   */
+  footerBox: {
+    maxWidth: CHAT_MAX_WIDTH,
+    width: '100%',
+    margin: '0 auto',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto',
+    alignItems: 'end',
+    columnGap: ({ spacing }) => spacing(0.5),
+    backgroundColor: ({ palette }) =>
+      palette.default?.background ?? 'rgba(44, 48, 50, 0.04)',
+    borderRadius: ({ spacing }) => spacing(0.5),
+    paddingInline: ({ spacing }) => spacing(0.5),
+  },
+  /** Main grid area: input stacked above the (optional) slots row. */
+  footerMain: {
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: ({ spacing }) => spacing(0.5),
+  },
+  /**
+   * Send-button grid area, bottom-aligned (matches the reference flex-end row) so
+   * the button stays at the bottom as the input grows. The small bottom padding
+   * keeps it off the box edge — in the single-line state it reads as vertically
+   * centered (4px top / 4px bottom around the 24px button in the 32px row).
+   */
+  footerSend: {
+    alignSelf: 'end',
+    paddingBottom: ({ spacing }) => spacing(0.5),
+    '& .MuiIconButton-root': {
+      padding: ({ spacing }) => spacing(0.5),
+    },
+  },
+  /** The chrome-less multiline input (no underline / no filled affordance). */
+  footerInput: {
+    width: '100%',
+    typography: 'body2',
+    // The Meridian theme styles multiline InputBase as a tall "comment field"
+    // (min-height: 96px on the root, 12px/14px textarea padding). Override both to
+    // get the compact chat field: kill the root min-height and use the reference's
+    // 6px/10px padding — both need !important to beat the theme override. Height
+    // then comes from MUI's TextareaAutosize (minRows=1/maxRows=8): one line
+    // (~32px) → grows → scrolls.
+    //
+    // TextareaAutosize renders a hidden shadow <textarea> (it carries
+    // `aria-hidden="true"`, the same class, and an inline `padding: 0`) to measure
+    // the content height; MUI then applies that height to the visible input. Getting
+    // the compact ~32px single line right needs the two rules below split apart:
+    //
+    //  • Font metrics (size/line-height/letter-spacing) go on BOTH textareas. The
+    //    shadow measures with its own CSS, so if it isn't pinned to body2 it
+    //    measures at the default ~24px line-height and the box ends up too tall.
+    //  • Padding goes on the VISIBLE input ONLY (`:not([aria-hidden])`). A
+    //    `!important` padding that also hit the shadow would clobber its measurement
+    //    `padding: 0`, double-counting the padding (~44px instead of 32px).
+    //
+    // `!important` is required on both to beat the Meridian theme's tall
+    // "comment field" multiline overrides (12px/14px padding, larger metrics); the
+    // root `min-height: 0` kills that theme's 96px min-height.
+    minHeight: '0 !important',
+    '& textarea': {
+      fontSize: ({ typography }) => `${typography.body2.fontSize} !important`,
+      lineHeight: ({ typography }) =>
+        `${typography.body2.lineHeight} !important`,
+      letterSpacing: ({ typography }) =>
+        `${typography.body2.letterSpacing} !important`,
+    },
+    '& textarea:not([aria-hidden])': {
+      resize: 'none',
+      padding: ({ spacing }) => `${spacing(0.75, 1.25)} !important`,
+    },
+  },
+  /**
+   * Slots row under the input: start slot + model selector + end slot. The left
+   * padding lines the row's content up with the input text above it: the input
+   * text is inset ~12px from the box edge (InputBase root padding + the textarea's
+   * 10px left padding) while the model-selector text button only insets ~8px, so a
+   * 4px indent here makes the slot label share the placeholder's left edge instead
+   * of sitting further out.
+   */
+  footerSlots: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: ({ spacing }) => spacing(0.5),
+    minWidth: 0,
+    flexWrap: 'wrap',
+    paddingLeft: ({ spacing }) => spacing(0.5),
+    paddingBottom: ({ spacing }) => spacing(0.5),
+  },
+  modelSelector: {
+    textTransform: 'none',
+    color: ({ palette }) => palette.text.secondary,
+    maxWidth: '100%',
+    minWidth: 0,
+    '& .MuiButton-endIcon': {
+      marginLeft: ({ spacing }) => spacing(0.25),
+    },
+  },
+  modelSelectorLabel: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  footerCaption: {
+    textAlign: 'center',
+  },
+  content: {
+    overflowY: 'auto',
+    flex: 1,
+    position: 'relative',
+    mx: 'auto',
+    maxWidth: CHAT_MAX_WIDTH,
+    width: '100%',
+    maxHeight: '100%',
+    pt: 1,
+    pb: 3,
+    px: 2,
+    display: 'flex',
+    flexDirection: 'column',
+    borderTopWidth: '1px',
+    borderTopStyle: 'solid',
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+  },
+  sentinel: {
+    height: '1px',
+    flexShrink: 0,
+  },
+  jumpToLatestWrapper: {
+    position: 'sticky',
+    bottom: ({ spacing }) => spacing(3),
+    height: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+  jumpToLatest: {
+    transition: 'opacity 0.2s',
+  },
+  starter: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: ({ spacing }) => spacing(3),
+    textAlign: 'center',
+    maxWidth: CHAT_MAX_WIDTH,
+    margin: '0 auto',
+  },
+  starterItems: {
+    display: 'grid',
+    width: '100%',
+    marginTop: ({ spacing }) => spacing(2),
+  },
+  starterItemsTwoCol: {
+    gridTemplateColumns: 'repeat(2, 1fr)',
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/chat/feedback/chat-actions-container.test.tsx

@@ -0,0 +1,64 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatActionsContainer } from './chat-actions-container'
+import { ChatRatingAction } from './chat-rating-action'
+
+describe('ChatActionsContainer', () => {
+  test('renders children', () => {
+    render(
+      <ChatActionsContainer>
+        <span>child content</span>
+      </ChatActionsContainer>,
+    )
+    expect(screen.getByText('child content')).toBeTruthy()
+  })
+})
+
+describe('ChatRatingAction', () => {
+  test('renders thumb up and thumb down buttons', () => {
+    render(<ChatRatingAction />)
+    expect(screen.getByLabelText('Thumbs up')).toBeTruthy()
+    expect(screen.getByLabelText('Thumbs down')).toBeTruthy()
+  })
+
+  test('calls onRatingChange with up when thumbs up clicked', () => {
+    const onRatingChange = vi.fn()
+    render(<ChatRatingAction onRatingChange={onRatingChange} />)
+    fireEvent.click(screen.getByLabelText('Thumbs up'))
+    expect(onRatingChange).toHaveBeenCalledWith('up')
+  })
+
+  test('calls onRatingChange with null when active thumb up clicked', () => {
+    const onRatingChange = vi.fn()
+    render(<ChatRatingAction onRatingChange={onRatingChange} rating='up' />)
+    fireEvent.click(screen.getByLabelText('Thumbs up'))
+    expect(onRatingChange).toHaveBeenCalledWith(null)
+  })
+
+  test('calls onRatingChange with down when thumbs down clicked', () => {
+    const onRatingChange = vi.fn()
+    render(<ChatRatingAction onRatingChange={onRatingChange} />)
+    fireEvent.click(screen.getByLabelText('Thumbs down'))
+    expect(onRatingChange).toHaveBeenCalledWith('down')
+  })
+
+  test('highlights active rating up', () => {
+    const { container } = render(<ChatRatingAction rating='up' />)
+    expect(container.querySelector('[data-testid="ThumbUpIcon"]')).toBeTruthy()
+  })
+
+  test('highlights active rating down', () => {
+    const { container } = render(<ChatRatingAction rating='down' />)
+    expect(
+      container.querySelector('[data-testid="ThumbDownIcon"]'),
+    ).toBeTruthy()
+  })
+
+  test('renders with custom labels', () => {
+    render(
+      <ChatRatingAction labels={{ thumbUp: 'Like', thumbDown: 'Dislike' }} />,
+    )
+    expect(screen.getByLabelText('Like')).toBeTruthy()
+    expect(screen.getByLabelText('Dislike')).toBeTruthy()
+  })
+})

package/src/chat/feedback/chat-actions-container.tsx

@@ -0,0 +1,10 @@
+import { Box, styled, type BoxProps } from '@mui/material'
+import type { FC } from 'react'
+
+// See chat/bubbles/styles.ts: the annotation keeps the declaration emittable,
+// and what it gives up on `component=`.
+export const ChatActionsContainer: FC<BoxProps> = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5),
+}))

package/src/chat/feedback/chat-loader.test.tsx

@@ -0,0 +1,10 @@
+import { describe, test, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { ChatLoader } from './chat-loader'
+
+describe('ChatLoader', () => {
+  test('renders loading indicator', () => {
+    const { container } = render(<ChatLoader />)
+    expect(container.querySelector('[role="status"]')).toBeTruthy()
+  })
+})

package/src/chat/feedback/chat-loader.tsx

@@ -0,0 +1,31 @@
+import { Box } from '@mui/material'
+import type { ChatLoaderProps } from '../types'
+import { styles } from './styles'
+
+export function ChatLoader({ size = 24, labels = {}, sx }: ChatLoaderProps) {
+  return (
+    <Box
+      role='status'
+      aria-busy={true}
+      aria-label={labels.loading ?? 'Loading'}
+      sx={{ ...styles.loader, width: size, height: size, ...sx }}
+    >
+      <Box
+        component='span'
+        sx={{
+          ...styles.loaderOuterCircle,
+          width: size * 0.75,
+          height: size * 0.75,
+        }}
+      />
+      <Box
+        component='span'
+        sx={{
+          ...styles.loaderInnerCircle,
+          width: size * 0.32,
+          height: size * 0.32,
+        }}
+      />
+    </Box>
+  )
+}

package/src/chat/feedback/chat-rating-action.tsx

@@ -0,0 +1,43 @@
+import { IconButton } from '@mui/material'
+import {
+  ThumbUpOutlined,
+  ThumbDownOutlined,
+  ThumbUp,
+  ThumbDown,
+} from '@mui/icons-material'
+import type { ChatRatingActionProps } from '../types'
+
+export function ChatRatingAction({
+  rating,
+  onRatingChange,
+  labels = {},
+}: ChatRatingActionProps) {
+  return (
+    <>
+      <IconButton
+        size='small'
+        onClick={() => onRatingChange?.(rating === 'up' ? null : 'up')}
+        aria-label={labels.thumbUp ?? 'Thumbs up'}
+        color={rating === 'up' ? 'primary' : undefined}
+      >
+        {rating === 'up' ? (
+          <ThumbUp fontSize='small' />
+        ) : (
+          <ThumbUpOutlined fontSize='small' />
+        )}
+      </IconButton>
+      <IconButton
+        size='small'
+        onClick={() => onRatingChange?.(rating === 'down' ? null : 'down')}
+        aria-label={labels.thumbDown ?? 'Thumbs down'}
+        color={rating === 'down' ? 'primary' : undefined}
+      >
+        {rating === 'down' ? (
+          <ThumbDown fontSize='small' />
+        ) : (
+          <ThumbDownOutlined fontSize='small' />
+        )}
+      </IconButton>
+    </>
+  )
+}