@carto/ps-react-ui 5.0.0-widgets.9 → 5.1.0

package/package.json

@@ -1,49 +1,127 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "5.0.0-widgets.9",
+  "version": "5.1.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
-    "@carto/meridian-ds": "2.6.1",
+    "@carto/meridian-ds": "2.14.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/styled": "11.14.1",
-    "@mui/material": "5.18.0",
     "@mui/icons-material": "5.18.0",
-    "echarts": "6.0.0",
+    "@mui/material": "5.18.0",
+    "@mui/x-date-pickers": "7.29.4",
+    "echarts": "6.1.0",
     "html2canvas": "1.4.1",
+    "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
-    "zustand": "5.0.8",
-    "@carto/ps-utils": "2.0.1"
+    "zustand": "5.0.15",
+    "@carto/ps-utils": "2.2.0",
+    "@carto/ps-common-types": "1.0.0"
   },
   "peerDependencies": {
+    "@carto/meridian-ds": "^2.0.0",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.0.0",
     "@emotion/styled": "^11.0.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
+    "@mui/x-date-pickers": "^7.0.0",
     "echarts": "^6.0.0",
     "html2canvas": "^1.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-markdown": "^10.0.0",
-    "react": "^18.0.0 || ^19.0.0",
     "zustand": "^5.0.0",
-    "@carto/ps-utils": "2.0.1"
+    "@carto/ps-utils": "2.2.0"
   },
   "exports": {
+    "./chat": {
+      "import": "./dist/chat.js",
+      "types": "./dist/types/chat/index.d.ts"
+    },
     "./components": {
       "import": "./dist/components.js",
       "types": "./dist/types/components/index.d.ts"
     },
-    "./widgets": {
-      "import": "./dist/widgets.js",
-      "types": "./dist/types/widgets/index.d.ts"
+    "./legend": {
+      "import": "./dist/legend.js",
+      "types": "./dist/types/legend/index.d.ts"
+    },
+    "./legend/stores": {
+      "import": "./dist/legend/stores.js",
+      "types": "./dist/types/legend/stores/index.d.ts"
     },
     "./widgets/actions": {
       "import": "./dist/widgets/actions.js",
       "types": "./dist/types/widgets/actions/index.d.ts"
     },
+    "./widgets-v2": {
+      "import": "./dist/widgets-v2.js",
+      "types": "./dist/types/widgets-v2/index.d.ts"
+    },
+    "./widgets-v2/stores": {
+      "import": "./dist/widgets-v2/stores.js",
+      "types": "./dist/types/widgets-v2/stores/index.d.ts"
+    },
+    "./widgets-v2/utils": {
+      "import": "./dist/widgets-v2/utils.js",
+      "types": "./dist/types/widgets-v2/utils/index.d.ts"
+    },
+    "./widgets-v2/bar": {
+      "import": "./dist/widgets-v2/bar.js",
+      "types": "./dist/types/widgets-v2/bar/index.d.ts"
+    },
+    "./widgets-v2/formula": {
+      "import": "./dist/widgets-v2/formula.js",
+      "types": "./dist/types/widgets-v2/formula/index.d.ts"
+    },
+    "./widgets-v2/histogram": {
+      "import": "./dist/widgets-v2/histogram.js",
+      "types": "./dist/types/widgets-v2/histogram/index.d.ts"
+    },
+    "./widgets-v2/markdown": {
+      "import": "./dist/widgets-v2/markdown.js",
+      "types": "./dist/types/widgets-v2/markdown/index.d.ts"
+    },
+    "./widgets-v2/pie": {
+      "import": "./dist/widgets-v2/pie.js",
+      "types": "./dist/types/widgets-v2/pie/index.d.ts"
+    },
+    "./widgets-v2/timeseries": {
+      "import": "./dist/widgets-v2/timeseries.js",
+      "types": "./dist/types/widgets-v2/timeseries/index.d.ts"
+    },
+    "./widgets-v2/scatterplot": {
+      "import": "./dist/widgets-v2/scatterplot.js",
+      "types": "./dist/types/widgets-v2/scatterplot/index.d.ts"
+    },
+    "./widgets-v2/spread": {
+      "import": "./dist/widgets-v2/spread.js",
+      "types": "./dist/types/widgets-v2/spread/index.d.ts"
+    },
+    "./widgets-v2/range": {
+      "import": "./dist/widgets-v2/range.js",
+      "types": "./dist/types/widgets-v2/range/index.d.ts"
+    },
+    "./widgets-v2/category": {
+      "import": "./dist/widgets-v2/category.js",
+      "types": "./dist/types/widgets-v2/category/index.d.ts"
+    },
+    "./widgets-v2/table": {
+      "import": "./dist/widgets-v2/table.js",
+      "types": "./dist/types/widgets-v2/table/index.d.ts"
+    },
+    "./widgets-v2/actions": {
+      "import": "./dist/widgets-v2/actions.js",
+      "types": "./dist/types/widgets-v2/actions/index.d.ts"
+    },
+    "./widgets-v2/echart": {
+      "import": "./dist/widgets-v2/echart.js",
+      "types": "./dist/types/widgets-v2/echart/index.d.ts"
+    },
     "./widgets/bar": {
       "import": "./dist/widgets/bar.js",
       "types": "./dist/types/widgets/bar/index.d.ts"
@@ -88,9 +166,9 @@
       "import": "./dist/widgets/range.js",
       "types": "./dist/types/widgets/range/index.d.ts"
     },
-    "./widgets/root": {
-      "import": "./dist/widgets/root.js",
-      "types": "./dist/types/widgets/root/index.d.ts"
+    "./widgets/loader": {
+      "import": "./dist/widgets/loader.js",
+      "types": "./dist/types/widgets/loader/index.d.ts"
     },
     "./widgets/selection-summary": {
       "import": "./dist/widgets/selection-summary.js",
@@ -114,7 +192,7 @@
     },
     "./widgets/stores": {
       "import": "./dist/widgets/stores.js",
-      "types": "./dist/types/stores/index.d.ts"
+      "types": "./dist/types/widgets/stores/index.d.ts"
     },
     "./widgets/table": {
       "import": "./dist/widgets/table.js",
@@ -128,16 +206,24 @@
       "import": "./dist/widgets/toolbar-actions.js",
       "types": "./dist/types/widgets/toolbar-actions/index.d.ts"
     },
+    "./widgets/utils": {
+      "import": "./dist/widgets/utils.js",
+      "types": "./dist/types/widgets/utils/index.d.ts"
+    },
     "./widgets/wrapper": {
       "import": "./dist/widgets/wrapper.js",
       "types": "./dist/types/widgets/wrapper/index.d.ts"
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "files": [
+      "dist"
+    ]
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "keywords": [
     "carto",
@@ -155,6 +241,12 @@
     "url": "https://github.com/CartoDB/carto-ps-lib/issues"
   },
   "homepage": "https://github.com/CartoDB/carto-ps-lib#readme",
+  "dependencies": {
+    "rehype-raw": "7.0.0",
+    "rehype-sanitize": "6.0.0",
+    "remark-gfm": "4.0.1",
+    "type-fest": "5.8.0"
+  },
   "scripts": {
     "dev": "vite build --watch --emptyOutDir=false",
     "build": "vite build",

package/src/chat/bubbles/chat-agent-message-markdown.test.tsx

@@ -0,0 +1,38 @@
+import { describe, test, expect } from 'vitest'
+import { render, waitFor } from '@testing-library/react'
+import { ChatAgentMessageMarkdown } from './chat-agent-message-markdown'
+
+// MarkdownContent is lazy-loaded, so these await the chunk resolving.
+describe('ChatAgentMessageMarkdown', () => {
+  test('renders emphasis as elements', async () => {
+    const { container } = render(
+      <ChatAgentMessageMarkdown>
+        {'Some **bold** text'}
+      </ChatAgentMessageMarkdown>,
+    )
+    await waitFor(() =>
+      expect(container.querySelector('strong')?.textContent).toBe('bold'),
+    )
+  })
+
+  test('renders GFM tables', async () => {
+    const md = '| name | pop |\n| --- | --- |\n| CA | 39M |'
+    const { container } = render(
+      <ChatAgentMessageMarkdown>{md}</ChatAgentMessageMarkdown>,
+    )
+    await waitFor(() => expect(container.querySelector('table')).toBeTruthy())
+    expect(container.querySelector('td')?.textContent).toBe('CA')
+  })
+
+  test('skips raw HTML and strips images (model output)', async () => {
+    // Separate paragraphs: a CommonMark HTML block swallows its whole line,
+    // so inline content sharing the script's line would be skipped with it.
+    const md = '<script>alert(1)</script>\n\nsafe ![alt](https://x/y.png)'
+    const { container } = render(
+      <ChatAgentMessageMarkdown>{md}</ChatAgentMessageMarkdown>,
+    )
+    await waitFor(() => expect(container.textContent).toContain('safe'))
+    expect(container.querySelector('script')).toBeNull()
+    expect(container.querySelector('img')).toBeNull()
+  })
+})

package/src/chat/bubbles/chat-agent-message-markdown.tsx

@@ -0,0 +1,34 @@
+import { lazy, Suspense } from 'react'
+import { ChatAgentMessage } from './chat-agent-message'
+import type { ChatAgentMessageMarkdownProps } from '../types'
+
+// Lazy-loaded so the markdown engine (`react-markdown` + remark/rehype plugins)
+// stays in a separate async chunk: consumers only pay its bundle cost when they
+// actually import this component. The Suspense fallback renders the raw text
+// until the chunk resolves.
+const MarkdownContent = lazy(() =>
+  import('../../widgets-v2/markdown/markdown-content').then((m) => ({
+    default: m.MarkdownContent,
+  })),
+)
+
+/**
+ * Agent reply bubble that renders its (string) children as GitHub-Flavored
+ * Markdown through the library's sanitized renderer — raw HTML is skipped and
+ * images are stripped, since the content is model output; tables / task lists /
+ * strikethrough pick up the bubble's element styling. Composition over
+ * `ChatAgentMessage`, which stays a plain styles container.
+ */
+export function ChatAgentMessageMarkdown({
+  children,
+  ...props
+}: ChatAgentMessageMarkdownProps) {
+  return (
+    <ChatAgentMessage {...props}>
+      <Suspense fallback={children}>
+        <MarkdownContent content={children} gfm />
+      </Suspense>
+    </ChatAgentMessage>
+  )
+}
+ChatAgentMessageMarkdown.displayName = 'ChatAgentMessageMarkdown'

package/src/chat/bubbles/chat-agent-message.test.tsx

@@ -0,0 +1,42 @@
+import { createRef } from 'react'
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ChatAgentMessage } from './chat-agent-message'
+import { ChatLoader } from '../feedback/chat-loader'
+import { ChatThinking } from '../feedback/chat-thinking'
+
+describe('ChatAgentMessage', () => {
+  test('renders text as child', () => {
+    render(<ChatAgentMessage>Agent response</ChatAgentMessage>)
+    expect(screen.getByText('Agent response')).toBeTruthy()
+  })
+
+  test('forwards ref to the underlying element', () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<ChatAgentMessage ref={ref}>Agent response</ChatAgentMessage>)
+    expect(ref.current).toBeInstanceOf(HTMLElement)
+  })
+
+  test('renders ChatLoader as child', () => {
+    const { container } = render(
+      <ChatAgentMessage>
+        <ChatLoader />
+      </ChatAgentMessage>,
+    )
+    expect(container.querySelector('[role="status"]')).toBeTruthy()
+  })
+
+  test('renders ChatThinking as child', () => {
+    render(
+      <ChatAgentMessage>
+        <ChatThinking>Processing...</ChatThinking>
+      </ChatAgentMessage>,
+    )
+    expect(screen.getByText('Processing...')).toBeTruthy()
+  })
+
+  test('renders string children verbatim (no markdown)', () => {
+    render(<ChatAgentMessage>{'Some **bold** text'}</ChatAgentMessage>)
+    expect(screen.getByText('Some **bold** text')).toBeTruthy()
+  })
+})

package/src/chat/bubbles/chat-agent-message.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react'
+import { Box, styled, type BoxProps } from '@mui/material'
+import type { ChatAgentMessageProps } from '../types'
+import { styles } from './styles'
+
+const InnerBox = ({ className, ...props }: BoxProps) => (
+  <Box className={`PsChat--agent-message ${className ?? ''}`} {...props} />
+)
+
+const StyledAgentMessage = styled(InnerBox)(({ theme }) =>
+  styles.agentMessageContainer(theme),
+)
+
+/**
+ * Agent reply bubble. A styles container that positions the reply and its
+ * composed pieces (text, loaders, tool traces, …); it renders `children`
+ * verbatim and forwards its `ref` to the underlying element. For Markdown
+ * replies, compose `ChatAgentMessageMarkdown` instead of teaching this
+ * container about the markdown engine.
+ */
+export const ChatAgentMessage = forwardRef<
+  HTMLDivElement,
+  ChatAgentMessageProps
+>(function ChatAgentMessage({ children, ...props }, ref) {
+  return (
+    <StyledAgentMessage ref={ref} {...props}>
+      {children}
+    </StyledAgentMessage>
+  )
+})
+ChatAgentMessage.displayName = 'ChatAgentMessage'

package/src/chat/bubbles/chat-error-message.test.tsx

@@ -0,0 +1,40 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatErrorMessage } from './chat-error-message'
+
+describe('ChatErrorMessage', () => {
+  test('renders error messages', () => {
+    render(<ChatErrorMessage errors={['Something went wrong']} />)
+    expect(screen.getByText('Something went wrong')).toBeTruthy()
+  })
+
+  test('renders multiple error messages', () => {
+    render(<ChatErrorMessage errors={['Error 1', 'Error 2']} />)
+    expect(screen.getByText('Error 1')).toBeTruthy()
+    expect(screen.getByText('Error 2')).toBeTruthy()
+  })
+
+  test('renders action links', () => {
+    const onRetry = vi.fn()
+    render(
+      <ChatErrorMessage
+        errors={['Failed']}
+        actions={[{ label: 'Retry', onClick: onRetry }]}
+      />,
+    )
+    const retryLink = screen.getByText('Retry')
+    expect(retryLink).toBeTruthy()
+    fireEvent.click(retryLink)
+    expect(onRetry).toHaveBeenCalledTimes(1)
+  })
+
+  test('renders custom icon', () => {
+    render(
+      <ChatErrorMessage
+        errors={['Error']}
+        icon={<span data-testid='custom-icon'>!</span>}
+      />,
+    )
+    expect(screen.getByTestId('custom-icon')).toBeTruthy()
+  })
+})

package/src/chat/bubbles/chat-error-message.tsx

@@ -0,0 +1,47 @@
+import { Box, Link, Typography } from '@mui/material'
+import { ErrorOutline } from '@mui/icons-material'
+import type { ChatErrorMessageProps } from '../types'
+import { styles } from './styles'
+
+export function ChatErrorMessage({
+  errors,
+  icon,
+  actions,
+  sx,
+}: ChatErrorMessageProps) {
+  return (
+    <Box sx={{ ...styles.errorMessage, ...sx }}>
+      {icon ?? <ErrorOutline fontSize='medium' color='error' />}
+      {errors.map((error, index) => (
+        <Typography key={index} variant='subtitle2' color='error.relatedDark'>
+          {error}
+        </Typography>
+      ))}
+      {actions?.length ? (
+        <Box sx={styles.errorActions}>
+          {(actions ?? []).map((action, index) => (
+            <span key={index}>
+              {index > 0 && (
+                <Typography
+                  component='span'
+                  variant='body2'
+                  sx={styles.errorActionSeparator}
+                >
+                  &middot;
+                </Typography>
+              )}
+              <Link
+                component='button'
+                variant='body2'
+                onClick={action.onClick}
+                sx={styles.errorAction}
+              >
+                {action.label}
+              </Link>
+            </span>
+          ))}
+        </Box>
+      ) : null}
+    </Box>
+  )
+}

package/src/chat/bubbles/chat-suggestion-button.test.tsx

@@ -0,0 +1,24 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatSuggestionButton } from './chat-suggestion-button'
+
+describe('ChatSuggestionButton', () => {
+  test('renders label text', () => {
+    render(<ChatSuggestionButton label='Try this' onClick={vi.fn()} />)
+    expect(screen.getByText('Try this')).toBeTruthy()
+  })
+
+  test('calls onClick when clicked', () => {
+    const onClick = vi.fn()
+    render(<ChatSuggestionButton label='Click me' onClick={onClick} />)
+    fireEvent.click(screen.getByText('Click me'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('is disabled when disabled prop is true', () => {
+    const onClick = vi.fn()
+    render(<ChatSuggestionButton label='Disabled' onClick={onClick} disabled />)
+    const button = screen.getByRole('button')
+    expect(button.hasAttribute('disabled')).toBeTruthy()
+  })
+})

package/src/chat/bubbles/chat-suggestion-button.tsx

@@ -0,0 +1,27 @@
+import { ButtonBase, Typography } from '@mui/material'
+import { ArrowUpward } from '@mui/icons-material'
+import type { ChatSuggestionButtonProps } from '../types'
+import { styles } from './styles'
+
+export function ChatSuggestionButton({
+  label,
+  color,
+  sx,
+  ...props
+}: ChatSuggestionButtonProps) {
+  return (
+    <ButtonBase
+      sx={{
+        ...styles.suggestionButton,
+        ...(color ? { backgroundColor: color } : undefined),
+        ...sx,
+      }}
+      {...props}
+    >
+      <Typography color='inherit' variant='body2'>
+        {label}
+      </Typography>
+      <ArrowUpward />
+    </ButtonBase>
+  )
+}

package/src/chat/bubbles/chat-user-message.test.tsx

@@ -0,0 +1,27 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { ChatUserMessage } from './chat-user-message'
+
+describe('ChatUserMessage', () => {
+  test('renders children content', () => {
+    render(<ChatUserMessage>Hello world</ChatUserMessage>)
+    expect(screen.getByText('Hello world')).toBeTruthy()
+  })
+
+  test('renders secondary content when provided', () => {
+    render(
+      <ChatUserMessage topContext={<span>Secondary</span>}>
+        Primary
+      </ChatUserMessage>,
+    )
+    expect(screen.getByText('Primary')).toBeTruthy()
+    expect(screen.getByText('Secondary')).toBeTruthy()
+  })
+
+  test('does not render secondary content when not provided', () => {
+    const { container } = render(
+      <ChatUserMessage>Only primary</ChatUserMessage>,
+    )
+    expect(container.textContent).toBe('Only primary')
+  })
+})

package/src/chat/bubbles/chat-user-message.tsx

@@ -0,0 +1,27 @@
+import { Box } from '@mui/material'
+import type { ChatUserMessageProps } from '../types'
+import { ChatMessageOverflow, styles } from './styles'
+
+export function ChatUserMessage({
+  children,
+  muted = false,
+  topContext,
+  sx,
+}: ChatUserMessageProps) {
+  return (
+    <Box className='PsChat--user-message' sx={styles.userMessageContainer}>
+      {topContext && <Box sx={styles.userMessageTop}>{topContext}</Box>}
+      <ChatMessageOverflow
+        className='PsChat--user-message-inner'
+        variant='body2'
+        sx={{
+          ...styles.userMessage,
+          ...(muted ? styles.muted : undefined),
+          ...sx,
+        }}
+      >
+        {children}
+      </ChatMessageOverflow>
+    </Box>
+  )
+}

package/src/chat/bubbles/index.ts

@@ -0,0 +1,5 @@
+export { ChatUserMessage } from './chat-user-message'
+export { ChatAgentMessage } from './chat-agent-message'
+export { ChatAgentMessageMarkdown } from './chat-agent-message-markdown'
+export { ChatErrorMessage } from './chat-error-message'
+export { ChatSuggestionButton } from './chat-suggestion-button'