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

package/src/chat/bubbles/styles.ts

@@ -21,6 +21,48 @@ export const styles = {
     '& + .PsChat--user-message': {
       marginTop: theme.spacing(3),
     },
+    '& > p:first-of-type': {
+      marginTop: 0,
+    },
+    '& table': {
+      alignSelf: 'stretch',
+      display: 'block',
+      overflowX: 'auto',
+      maxWidth: '100%',
+      borderCollapse: 'collapse',
+      margin: theme.spacing(1, 0),
+      fontSize: '0.875em',
+    },
+    '& th, & td': {
+      border: `1px solid ${theme.palette.divider}`,
+      padding: theme.spacing(0.5, 1),
+      textAlign: 'left',
+    },
+    '& th': {
+      backgroundColor: theme.palette.action.hover,
+      fontWeight: 600,
+    },
+    '& tr:nth-of-type(even) td': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '& ul.contains-task-list': {
+      listStyle: 'none',
+      paddingLeft: 0,
+    },
+    '& .task-list-item input[type="checkbox"]': {
+      marginRight: theme.spacing(0.5),
+    },
+    '& del': {
+      textDecoration: 'line-through',
+      opacity: 0.7,
+    },
+    '& > ul, & > ol': {
+      margin: theme.spacing(1, 0),
+      paddingLeft: theme.spacing(3),
+      '& > li + li': {
+        marginTop: theme.spacing(1),
+      },
+    },
   }),
   userMessageContainer: {
     width: '100%',

package/src/chat/containers/styles.ts

@@ -45,6 +45,12 @@ export const styles = {
   footer: {
     maxWidth: CHAT_MAX_WIDTH,
     margin: '0 auto',
+    '& textarea': {
+      resize: 'none',
+      maxHeight: '10em',
+      overflowY: 'auto !important',
+      paddingRight: ({ spacing }) => spacing(5),
+    },
   },
   footerCaption: {
     textAlign: 'center',

package/src/chat/index.ts

@@ -30,6 +30,9 @@ export {
   CHAT_TOOL_CODE_AREA_MAX_HEIGHT,
 } from './const'
 
+// Hooks
+export { useTypewriter } from './use-typewriter'
+
 // Messages
 export { ChatUserMessage } from './bubbles/chat-user-message'
 export { ChatAgentMessage } from './bubbles/chat-agent-message'

package/src/chat/use-typewriter.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useTypewriter } from './use-typewriter'
+
+describe('useTypewriter', () => {
+  test('starts with empty text and isTyping=true when fullText is non-empty', () => {
+    const { result } = renderHook(() => useTypewriter('hello'))
+    expect(result.current.displayedText).toBe('')
+    expect(result.current.isTyping).toBe(true)
+  })
+
+  test('returns the full text immediately when skipAnimation is true', () => {
+    const { result } = renderHook(() =>
+      useTypewriter('hello', { skipAnimation: true }),
+    )
+    expect(result.current.displayedText).toBe('hello')
+    expect(result.current.isTyping).toBe(false)
+  })
+
+  test('isTyping=false for empty fullText', () => {
+    const { result } = renderHook(() => useTypewriter(''))
+    expect(result.current.displayedText).toBe('')
+    expect(result.current.isTyping).toBe(false)
+  })
+
+  test('skipAnimation captured at mount — toggling later does not retrigger reveal', () => {
+    const { result, rerender } = renderHook(
+      ({ skip }: { skip: boolean }) =>
+        useTypewriter('hello', { skipAnimation: skip }),
+      { initialProps: { skip: true } },
+    )
+    expect(result.current.displayedText).toBe('hello')
+
+    rerender({ skip: false })
+    expect(result.current.displayedText).toBe('hello')
+    expect(result.current.isTyping).toBe(false)
+  })
+})

package/src/chat/use-typewriter.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface UseTypewriterOptions {
+  /** Characters revealed per second (default: `500`). */
+  speed?: number
+  /** When true on mount, skip the animation and reveal the full text immediately. */
+  skipAnimation?: boolean
+}
+
+interface UseTypewriterResult {
+  /** The portion of `fullText` revealed so far. */
+  displayedText: string
+  /** `true` while characters are still being revealed. */
+  isTyping: boolean
+}
+
+/**
+ * Reveals a string character-by-character at a steady rate via
+ * `requestAnimationFrame`. Useful for smoothing out bursty WebSocket-streamed
+ * agent message text — pair it with `ChatAgentMessage`.
+ *
+ * @example
+ * ```tsx
+ * const { displayedText, isTyping } = useTypewriter(message)
+ * return (
+ *   <ChatAgentMessage>
+ *     <Markdown>{displayedText}</Markdown>
+ *     {isTyping ? <Cursor /> : null}
+ *   </ChatAgentMessage>
+ * )
+ * ```
+ */
+export function useTypewriter(
+  fullText: string,
+  options: UseTypewriterOptions = {},
+): UseTypewriterResult {
+  const { speed = 500, skipAnimation = false } = options
+
+  const skipRef = useRef(skipAnimation)
+
+  const [charIndex, setCharIndex] = useState(() =>
+    skipRef.current ? fullText.length : 0,
+  )
+
+  useEffect(() => {
+    if (skipRef.current) {
+      setCharIndex(fullText.length)
+      return
+    }
+
+    if (charIndex >= fullText.length) {
+      return
+    }
+
+    const msPerChar = 1000 / speed
+    let rafId: number
+    let lastTime: number | null = null
+
+    function tick(timestamp: number) {
+      lastTime ??= timestamp
+
+      const elapsed = timestamp - lastTime
+      const charsToAdd = Math.floor(elapsed / msPerChar)
+
+      if (charsToAdd > 0) {
+        lastTime = timestamp
+        setCharIndex((prev) => Math.min(prev + charsToAdd, fullText.length))
+      }
+
+      rafId = requestAnimationFrame(tick)
+    }
+
+    rafId = requestAnimationFrame(tick)
+
+    return () => cancelAnimationFrame(rafId)
+  }, [fullText, charIndex, speed])
+
+  return {
+    displayedText: fullText.slice(0, charIndex),
+    isTyping: charIndex < fullText.length,
+  }
+}