@carto/ps-react-ui 4.14.1 → 4.15.0

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

@@ -1,11 +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} />
 )
 
-export const ChatAgentMessage = styled(InnerBox)(({ theme }) =>
+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/index.ts

@@ -1,4 +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'

package/src/chat/index.ts

@@ -4,6 +4,7 @@ export type {
   ChatErrorAction,
   ChatUserMessageProps,
   ChatAgentMessageProps,
+  ChatAgentMessageMarkdownProps,
   ChatErrorMessageProps,
   ChatSuggestionButtonProps,
   ChatThinkingProps,
@@ -37,6 +38,7 @@ export { useTypewriter } from './use-typewriter'
 // Messages
 export { ChatUserMessage } from './bubbles/chat-user-message'
 export { ChatAgentMessage } from './bubbles/chat-agent-message'
+export { ChatAgentMessageMarkdown } from './bubbles/chat-agent-message-markdown'
 export { ChatErrorMessage } from './bubbles/chat-error-message'
 export { ChatSuggestionButton } from './bubbles/chat-suggestion-button'
 export { ChatMessageOverflow } from './bubbles/styles'

package/src/chat/types.ts

@@ -25,6 +25,16 @@ export interface ChatAgentMessageProps extends ChatSxProps {
   children: ReactNode
 }
 
+export interface ChatAgentMessageMarkdownProps extends ChatSxProps {
+  /**
+   * Markdown source — rendered as GitHub-Flavored Markdown (tables, task lists,
+   * strikethrough) through the library's sanitized renderer, inside a
+   * `ChatAgentMessage`. Raw HTML is skipped and images are stripped, since the
+   * content is model output.
+   */
+  children: string
+}
+
 export interface ChatErrorMessageProps extends ChatSxProps {
   errors: string[]
   icon?: ReactNode

package/src/components/index.ts

@@ -28,11 +28,13 @@ export type {
   LassoGeometryType,
   LassoLayerFiltersUIProps,
   LassoLayerFilterItem,
+  LassoMessageUIProps,
 } from './lasso-tool/types'
 export { LassoToolsUI } from './lasso-tool/lasso-tool'
 export { LassoToolsInlineUI } from './lasso-tool/lasso-tool-inline'
 export { LassoGeometryToolbarUI } from './lasso-tool/geometry-toolbar'
 export { LassoLayerFiltersUI } from './lasso-tool/layer-filters'
+export { LassoMessageUI } from './lasso-tool/message'
 export {
   DEFAULT_LASSO_TOOLS_MODES_MAPPING,
   LASSO_TOOLS_LABELS,

package/src/components/lasso-tool/message.tsx

@@ -0,0 +1,36 @@
+import { Alert, AlertTitle, Snackbar } from '@mui/material'
+import type { LassoMessageUIProps } from './types'
+
+/**
+ * Presentational counterpart of `LassoTools.Message` (`@carto/ps-react-maps`),
+ * positioned by that render-props component. Auto-hides after 5 seconds via
+ * MUI `Snackbar` (calls `onDismiss`, which removes the message from the store).
+ */
+export function LassoMessageUI({
+  message,
+  onDismiss,
+  AlertProps,
+  SnackbarProps,
+}: LassoMessageUIProps) {
+  return (
+    <Snackbar
+      open
+      autoHideDuration={5000}
+      // 'clickaway' is ignored so map interactions don't dismiss the message.
+      onClose={(_, reason) => reason !== 'clickaway' && onDismiss()}
+      // Stay in flow — the maps-side `LassoTools.Message` owns positioning.
+      sx={{ position: 'static', transform: 'none' }}
+      {...SnackbarProps}
+    >
+      <Alert
+        severity={message.severity ?? 'info'}
+        action={message.action}
+        onClose={onDismiss}
+        {...AlertProps}
+      >
+        <AlertTitle>{message.title}</AlertTitle>
+        {message.content}
+      </Alert>
+    </Snackbar>
+  )
+}

package/src/components/lasso-tool/types.ts

@@ -1,11 +1,14 @@
 import type {
+  AlertColor,
+  AlertProps,
   Box,
   ChipProps,
   DialogProps,
   Paper,
+  SnackbarProps,
   TooltipProps,
 } from '@mui/material'
-import type { ComponentProps, ComponentType } from 'react'
+import type { ComponentProps, ComponentType, ReactNode } from 'react'
 import type {
   LassoToolsMode,
   LassoToolsModes,
@@ -153,6 +156,22 @@ export interface LassoGeometryToolbarUIProps {
   PaperProps?: ComponentProps<typeof Paper>
 }
 
+export interface LassoMessageUIProps {
+  /** Message from the lasso tools store (`LassoToolsMessage` in `@carto/ps-react-maps`). */
+  message: {
+    id: string
+    title: string
+    /** Body rendered under the title. */
+    content?: ReactNode
+    /** @default 'info' */
+    severity?: AlertColor
+    action?: ReactNode
+  }
+  onDismiss: () => void
+  AlertProps?: Omit<AlertProps, 'severity' | 'onClose' | 'children' | 'action'>
+  SnackbarProps?: Omit<SnackbarProps, 'open' | 'onClose' | 'children'>
+}
+
 export interface LassoLayerFilterItem {
   id: string
   label: string

package/src/widgets-v2/markdown/markdown-content.test.tsx

@@ -31,6 +31,16 @@ describe('<MarkdownContent>', () => {
     expect(img?.getAttribute('alt')).toBe('alt')
   })
 
+  it('parses GFM tables only when gfm=true', () => {
+    const table = '| a | b |\n| --- | --- |\n| 1 | 2 |'
+    const { container: plain } = render(<MarkdownContent content={table} />)
+    // Without the flag, GFM syntax stays CommonMark text — no table element.
+    expect(plain.querySelector('table')).toBeNull()
+    const { container } = render(<MarkdownContent content={table} gfm />)
+    expect(container.querySelector('table')).not.toBeNull()
+    expect(container.querySelector('td')?.textContent).toBe('1')
+  })
+
   it('parses raw HTML when allowHtml=true', () => {
     const { container } = render(
       <MarkdownContent content={'<span>raw <em>html</em></span>'} allowHtml />,

package/src/widgets-v2/markdown/markdown-content.tsx

@@ -1,6 +1,7 @@
 import ReactMarkdown, { type Components } from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import rehypeSanitize from 'rehype-sanitize'
+import remarkGfm from 'remark-gfm'
 
 export interface MarkdownContentProps {
   /** Markdown source. */
@@ -21,6 +22,12 @@ export interface MarkdownContentProps {
    * Defaults to `false` so caption slots stay text-only by default.
    */
   allowImages?: boolean
+  /**
+   * When `true`, enables GitHub Flavored Markdown (tables, strikethrough,
+   * task lists, autolinks) via `remark-gfm`. Defaults to `false` so existing
+   * consumers keep CommonMark-only parsing.
+   */
+  gfm?: boolean
 }
 
 // Allowlist of URL schemes considered safe for `<a href>` and `<img src>`.
@@ -56,6 +63,7 @@ export function MarkdownContent({
   components,
   allowHtml = false,
   allowImages = false,
+  gfm = false,
 }: MarkdownContentProps) {
   const disallowed = allowImages ? undefined : ['img']
   return (
@@ -63,6 +71,7 @@ export function MarkdownContent({
       components={components}
       disallowedElements={disallowed}
       skipHtml={!allowHtml}
+      remarkPlugins={gfm ? [remarkGfm] : undefined}
       rehypePlugins={allowHtml ? [rehypeRaw, rehypeSanitize] : undefined}
       urlTransform={safeUrlTransform}
     >

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -141,7 +141,10 @@ export function Wrapper({
         }
         aria-label={ariaLabel}
         aria-disabled={disabled || undefined}
-        sx={{ ...styles.summary, ...(disabled ? styles.summaryDisabled : null) }}
+        sx={{
+          ...styles.summary,
+          ...(disabled ? styles.summaryDisabled : null),
+        }}
       >
         <SmartTooltip title={title}>
           {({ ref }) => (