@agents24/chat-react 0.4.0 → 0.5.1

package/scaffold/src/components/ui/tooltip.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "../../lib/utils"
+
+function TooltipProvider({ children }: { children: React.ReactNode }) {
+  return children
+}
+
+function Tooltip({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="tooltip"
+      className={cn("group/tooltip relative inline-flex", className)}
+      {...props}
+    />
+  )
+}
+
+function TooltipTrigger({
+  asChild: _asChild,
+  ...props
+}: React.ComponentProps<typeof Slot.Root> & { asChild?: boolean }) {
+  return <Slot.Root data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  align: _align,
+  side = "top",
+  sideOffset: _sideOffset,
+  ...props
+}: React.ComponentProps<"span"> & {
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  align?: "start" | "center" | "end"
+}) {
+  return (
+    <span
+      role="tooltip"
+      data-side={side}
+      data-slot="tooltip-content"
+      className={cn(
+        "pointer-events-none absolute z-50 hidden w-max max-w-xs items-center gap-1.5 rounded-xl bg-foreground px-3 py-1.5 text-xs text-background group-hover/tooltip:inline-flex group-focus-within/tooltip:inline-flex",
+        "data-[side=top]:bottom-full data-[side=top]:left-1/2 data-[side=top]:mb-2 data-[side=top]:-translate-x-1/2",
+        "data-[side=bottom]:top-full data-[side=bottom]:left-1/2 data-[side=bottom]:mt-2 data-[side=bottom]:-translate-x-1/2",
+        "data-[side=left]:end-full data-[side=left]:top-1/2 data-[side=left]:me-2 data-[side=left]:-translate-y-1/2",
+        "data-[side=right]:start-full data-[side=right]:top-1/2 data-[side=right]:ms-2 data-[side=right]:-translate-y-1/2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/scaffold/src/hooks/use-mobile.ts

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    if (typeof window.matchMedia !== "function") {
+      onChange()
+      window.addEventListener("resize", onChange)
+      return () => window.removeEventListener("resize", onChange)
+    }
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    mql.addEventListener("change", onChange)
+    onChange()
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/scaffold/src/identity.ts

@@ -0,0 +1,17 @@
+export type Agents24ChatIdentityState =
+  | "loading"
+  | "guest"
+  | "authenticated"
+  | "signed_out"
+  | "error"
+
+export type Agents24ChatIdentity = {
+  state: Agents24ChatIdentityState
+  displayName?: string
+  secondaryText?: string
+  avatarUrl?: string
+  onSignIn?: () => void | Promise<void>
+  onSignOut?: () => void | Promise<void>
+}
+
+export const GUEST_CHAT_IDENTITY: Agents24ChatIdentity = { state: "guest" }

package/scaffold/src/index.css

@@ -0,0 +1,222 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/jetbrains-mono";
+@import "@fontsource-variable/merriweather";
+@import "@fontsource-variable/inter";
+
+@source "./**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--a24-font-heading);
+  --font-sans: var(--a24-font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --a24-composer-single-row-radius: 9999px;
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --font-serif: var(--a24-font-heading);
+  --font-mono: var(--a24-font-mono);
+}
+
+[data-agents24-theme-root] {
+  color-scheme: light;
+  --a24-font-heading: 'Inter Variable', sans-serif;
+  --a24-font-sans: 'Inter Variable', sans-serif;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.52 0.105 223.128);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --radius: 0.875rem;
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.609 0.126 221.723);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root].dark {
+  color-scheme: dark;
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.45 0.085 224.283);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.715 0.143 215.221);
+  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.845 0.143 164.978);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.596 0.145 163.225);
+  --chart-4: oklch(0.508 0.118 165.612);
+  --chart-5: oklch(0.432 0.095 166.913);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"] {
+  --a24-composer-single-row-radius: 0;
+  --a24-font-heading: 'Merriweather Variable', serif;
+  --a24-font-sans: 'JetBrains Mono Variable', monospace;
+  --a24-font-mono: 'JetBrains Mono Variable', monospace;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --radius: 0;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+[data-agents24-theme-root][data-agents24-theme="sharp"].dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.865 0.127 207.078);
+  --chart-2: oklch(0.715 0.143 215.221);
+  --chart-3: oklch(0.609 0.126 221.723);
+  --chart-4: oklch(0.52 0.105 223.128);
+  --chart-5: oklch(0.45 0.085 224.283);
+}
+
+@layer base {
+  [data-agents24-theme-root], [data-agents24-theme-root] * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+  [data-agents24-theme-root] {
+    @apply size-full overflow-hidden bg-background font-sans text-foreground antialiased;
+  }
+  [data-agents24-theme-root] button,
+  [data-agents24-theme-root] textarea { font: inherit; }
+}

package/scaffold/src/index.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+
+import { App, type Agents24ChatAppProps } from "./app"
+import {
+  ThemeProvider,
+  type Agents24ChatAppearanceController,
+  type Agents24ChatTheme,
+} from "./components/theme-provider"
+import { TooltipProvider } from "./components/ui/tooltip"
+
+export type Agents24ChatScaffoldProps = Agents24ChatAppProps & {
+  appearanceController?: Agents24ChatAppearanceController
+  theme?: Agents24ChatTheme
+}
+
+export function Agents24ChatScaffold({ appearanceController, theme, ...props }: Agents24ChatScaffoldProps) {
+  return (
+    <ThemeProvider controller={appearanceController} theme={theme}>
+      <TooltipProvider>
+        <App {...props} />
+      </TooltipProvider>
+    </ThemeProvider>
+  )
+}
+
+export { App as Agents24ChatScaffoldApp }
+export { ThemeProvider as Agents24ChatThemeProvider }
+export type {
+  Agents24ChatAppearance,
+  Agents24ChatAppearanceController,
+  Agents24ChatTheme,
+} from "./components/theme-provider"
+export type { Agents24ChatIdentity, Agents24ChatIdentityState } from "./identity"
+export type {
+  ChatHitlResponse,
+  Agents24ChatScaffoldComponents,
+  Agents24ChatTimelineSlotProps,
+} from "./app"
+export { TooltipProvider as Agents24ChatTooltipProvider }

package/scaffold/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/scaffold/styles.css

@@ -0,0 +1,3 @@
+@import "@agents24/chat-react/styles.css";
+@import "./src/index.css";
+@import "./src/chat.css";

package/dist/chunk-CHAU7FNW.js

@@ -1,140 +0,0 @@
-// src/streaming-text.ts
-import { useEffect, useRef, useState } from "react";
-var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
-var defaultCompletedTextCache = /* @__PURE__ */ new Map();
-var defaultStreamingTextCache = {
-  get: (id) => defaultCompletedTextCache.get(id),
-  set: (id, text) => {
-    defaultCompletedTextCache.set(id, text);
-    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {
-      const firstKey = defaultCompletedTextCache.keys().next().value;
-      if (firstKey) defaultCompletedTextCache.delete(firstKey);
-    }
-  }
-};
-var getActiveStreamingTextPartId = (message, streamingMessageId) => {
-  if (message.role !== "assistant" || streamingMessageId !== message.id) return null;
-  return message.parts.slice().reverse().find((part) => part.kind === "text")?.id || null;
-};
-var isActiveStreamingTextPart = (message, part, streamingMessageId) => part.kind === "text" && part.id === getActiveStreamingTextPartId(message, streamingMessageId);
-function useStreamingText({
-  id,
-  isStreaming,
-  text,
-  cache = defaultStreamingTextCache,
-  charsPerSecond = 72,
-  catchupThreshold = 40,
-  maxCatchupChars = 20
-}) {
-  const cacheAdapter = cache === false ? null : cache;
-  const [displayedText, setDisplayedText] = useState(() => {
-    const cachedText = cacheAdapter?.get(id);
-    return cachedText && text.startsWith(cachedText) ? cachedText : text;
-  });
-  const targetRef = useRef(text);
-  const displayedRef = useRef(displayedText);
-  const rafRef = useRef(null);
-  const lastFrameAtRef = useRef(null);
-  const idRef = useRef(id);
-  const shouldAnimateRef = useRef(isStreaming);
-  useEffect(() => {
-    if (isStreaming || !text) return;
-    cacheAdapter?.set(id, text);
-  }, [cacheAdapter, id, isStreaming, text]);
-  useEffect(() => {
-    targetRef.current = text;
-  }, [text]);
-  useEffect(() => {
-    if (idRef.current === id) return;
-    idRef.current = id;
-    const cachedText = cacheAdapter?.get(id);
-    const initial = cachedText && text.startsWith(cachedText) ? cachedText : text;
-    shouldAnimateRef.current = isStreaming && initial !== text;
-    displayedRef.current = initial;
-    setDisplayedText(initial);
-    if (rafRef.current !== null) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-    lastFrameAtRef.current = null;
-  }, [cacheAdapter, id, isStreaming, text]);
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      displayedRef.current = text;
-      setDisplayedText(text);
-      return;
-    }
-    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (reduceMotion) {
-      displayedRef.current = text;
-      setDisplayedText(text);
-      shouldAnimateRef.current = false;
-      return;
-    }
-    const cachedText = cacheAdapter?.get(id);
-    if (cachedText === text) {
-      displayedRef.current = text;
-      setDisplayedText(text);
-      shouldAnimateRef.current = false;
-      return;
-    }
-    if (isStreaming) {
-      shouldAnimateRef.current = true;
-    }
-    if (!shouldAnimateRef.current) {
-      displayedRef.current = text;
-      setDisplayedText(text);
-      return;
-    }
-    if (!text.startsWith(displayedRef.current)) {
-      displayedRef.current = "";
-      setDisplayedText("");
-    }
-    const tick = (timestamp) => {
-      const previousTimestamp = lastFrameAtRef.current ?? timestamp;
-      lastFrameAtRef.current = timestamp;
-      const target = targetRef.current;
-      const current = displayedRef.current;
-      if (current.length >= target.length) {
-        shouldAnimateRef.current = false;
-        rafRef.current = null;
-        return;
-      }
-      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
-      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
-      const gap = target.length - current.length;
-      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
-      const nextLength = Math.min(
-        target.length,
-        current.length + Math.max(charsFromTime, catchupStep)
-      );
-      const next = target.slice(0, nextLength);
-      displayedRef.current = next;
-      setDisplayedText(next);
-      rafRef.current = window.requestAnimationFrame(tick);
-    };
-    if (rafRef.current === null && displayedRef.current.length < text.length) {
-      rafRef.current = window.requestAnimationFrame(tick);
-    }
-    return () => {
-      if (rafRef.current !== null) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      lastFrameAtRef.current = null;
-    };
-  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
-  return {
-    displayedText,
-    isAnimating: isStreaming,
-    mode: isStreaming ? "streaming" : "static",
-    parseIncompleteMarkdown: isStreaming
-  };
-}
-
-export {
-  getActiveStreamingTextPartId,
-  isActiveStreamingTextPart,
-  useStreamingText
-};
-//# sourceMappingURL=chunk-CHAU7FNW.js.map

package/dist/chunk-CHAU7FNW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/streaming-text.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport type { ChatMessage, ChatPart } from \"./types\";\n\nexport type StreamingTextMode = \"streaming\" | \"static\";\n\nexport type StreamingTextCache = {\n  get: (id: string) => string | undefined;\n  set: (id: string, text: string) => void;\n};\n\nexport type UseStreamingTextOptions = {\n  id: string;\n  isStreaming: boolean;\n  text: string;\n  cache?: StreamingTextCache | false;\n  charsPerSecond?: number;\n  catchupThreshold?: number;\n  maxCatchupChars?: number;\n};\n\nexport type UseStreamingTextResult = {\n  displayedText: string;\n  isAnimating: boolean;\n  mode: StreamingTextMode;\n  parseIncompleteMarkdown: boolean;\n};\n\nconst DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;\nconst defaultCompletedTextCache = new Map<string, string>();\n\nconst defaultStreamingTextCache: StreamingTextCache = {\n  get: (id) => defaultCompletedTextCache.get(id),\n  set: (id, text) => {\n    defaultCompletedTextCache.set(id, text);\n    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {\n      const firstKey = defaultCompletedTextCache.keys().next().value;\n      if (firstKey) defaultCompletedTextCache.delete(firstKey);\n    }\n  },\n};\n\nexport const getActiveStreamingTextPartId = (\n  message: ChatMessage,\n  streamingMessageId: string | null\n) => {\n  if (message.role !== \"assistant\" || streamingMessageId !== message.id) return null;\n  return (\n    message.parts\n      .slice()\n      .reverse()\n      .find((part) => part.kind === \"text\")?.id || null\n  );\n};\n\nexport const isActiveStreamingTextPart = (\n  message: ChatMessage,\n  part: ChatPart,\n  streamingMessageId: string | null\n) => part.kind === \"text\" && part.id === getActiveStreamingTextPartId(message, streamingMessageId);\n\nexport function useStreamingText({\n  id,\n  isStreaming,\n  text,\n  cache = defaultStreamingTextCache,\n  charsPerSecond = 72,\n  catchupThreshold = 40,\n  maxCatchupChars = 20,\n}: UseStreamingTextOptions): UseStreamingTextResult {\n  const cacheAdapter = cache === false ? null : cache;\n  const [displayedText, setDisplayedText] = useState(() => {\n    const cachedText = cacheAdapter?.get(id);\n    return cachedText && text.startsWith(cachedText) ? cachedText : text;\n  });\n  const targetRef = useRef(text);\n  const displayedRef = useRef(displayedText);\n  const rafRef = useRef<number | null>(null);\n  const lastFrameAtRef = useRef<number | null>(null);\n  const idRef = useRef(id);\n  const shouldAnimateRef = useRef(isStreaming);\n\n  useEffect(() => {\n    if (isStreaming || !text) return;\n    cacheAdapter?.set(id, text);\n  }, [cacheAdapter, id, isStreaming, text]);\n\n  useEffect(() => {\n    targetRef.current = text;\n  }, [text]);\n\n  useEffect(() => {\n    if (idRef.current === id) return;\n\n    idRef.current = id;\n    const cachedText = cacheAdapter?.get(id);\n    const initial = cachedText && text.startsWith(cachedText) ? cachedText : text;\n    shouldAnimateRef.current = isStreaming && initial !== text;\n    displayedRef.current = initial;\n    setDisplayedText(initial);\n\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n    lastFrameAtRef.current = null;\n  }, [cacheAdapter, id, isStreaming, text]);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      return;\n    }\n\n    const reduceMotion =\n      typeof window.matchMedia === \"function\" &&\n      window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n    if (reduceMotion) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      shouldAnimateRef.current = false;\n      return;\n    }\n\n    const cachedText = cacheAdapter?.get(id);\n    if (cachedText === text) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      shouldAnimateRef.current = false;\n      return;\n    }\n\n    if (isStreaming) {\n      shouldAnimateRef.current = true;\n    }\n\n    if (!shouldAnimateRef.current) {\n      displayedRef.current = text;\n      setDisplayedText(text);\n      return;\n    }\n\n    if (!text.startsWith(displayedRef.current)) {\n      displayedRef.current = \"\";\n      setDisplayedText(\"\");\n    }\n\n    const tick = (timestamp: number) => {\n      const previousTimestamp = lastFrameAtRef.current ?? timestamp;\n      lastFrameAtRef.current = timestamp;\n\n      const target = targetRef.current;\n      const current = displayedRef.current;\n\n      if (current.length >= target.length) {\n        shouldAnimateRef.current = false;\n        rafRef.current = null;\n        return;\n      }\n\n      const elapsedMs = Math.max(8, timestamp - previousTimestamp);\n      const charsFromTime = Math.max(1, Math.floor((elapsedMs / 1000) * charsPerSecond));\n      const gap = target.length - current.length;\n      const catchupStep =\n        gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;\n      const nextLength = Math.min(\n        target.length,\n        current.length + Math.max(charsFromTime, catchupStep)\n      );\n\n      const next = target.slice(0, nextLength);\n      displayedRef.current = next;\n      setDisplayedText(next);\n      rafRef.current = window.requestAnimationFrame(tick);\n    };\n\n    if (rafRef.current === null && displayedRef.current.length < text.length) {\n      rafRef.current = window.requestAnimationFrame(tick);\n    }\n\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      lastFrameAtRef.current = null;\n    };\n  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);\n\n  return {\n    displayedText,\n    isAnimating: isStreaming,\n    mode: isStreaming ? \"streaming\" : \"static\",\n    parseIncompleteMarkdown: isStreaming,\n  };\n}\n"],"mappings":"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","names":[]}