@carto/ps-react-ui 4.4.0-chat-ui.3 → 4.4.0-chat-ui.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.4.0-chat-ui.3",
+  "version": "4.4.0-chat-ui.5",
   "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-common-types": "1.0.0",
-    "@carto/ps-utils": "2.0.1"
+    "@carto/ps-utils": "2.0.1",
+    "@carto/ps-common-types": "1.0.0"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.0.0",

package/src/chat/containers/styles.ts

@@ -45,7 +45,7 @@ export const styles = {
   footer: {
     maxWidth: CHAT_MAX_WIDTH,
     margin: '0 auto',
-    '& textarea': {
+    '& .MuiInputBase-multiline.MuiInputBase-sizeSmall textarea': {
       resize: 'none',
       maxHeight: '10em',
       overflowY: 'auto !important',

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,
+  }
+}