AI Message

1"use client";
2 
3import { Copy, Edit, MoreVertical, RotateCcw } from "lucide-react";
4import { useTheme } from "next-themes";
5import React, {
6  startTransition,
7  useCallback,
8  useEffect,
9  useId,
10  useMemo,
11  useRef,
12  useState,
13} from "react";
14import ReactMarkdown from "react-markdown";
15import remarkGfm from "remark-gfm";
16import { type BundledLanguage, codeToHtml } from "shiki";
17import { cn } from "@/lib/utils";
18import { Button } from "@/registry/new-york/ui/button";
19import {
20  DropdownMenu,
21  DropdownMenuContent,
22  DropdownMenuItem,
23  DropdownMenuSeparator,
24  DropdownMenuShortcut,
25  DropdownMenuTrigger,
26} from "@/registry/new-york/ui/dropdown-menu";
27 
28const STREAMING_CONFIG = {
29  CHAR_DELAY: 20,
30  BATCH_SIZE: 3,
31} as const;
32 
33const COPY_FEEDBACK_DURATION = 2000;
34 
35interface AIMessageProps {
36  content: string;
37  isStreaming?: boolean;
38  onRegenerate?: () => void;
39  onEdit?: () => void;
40  className?: string;
41  skipCodeHighlighting?: boolean;
42}
43 
44function useStreamingText(fullText: string, isStreaming: boolean): string {
45  const [displayedText, setDisplayedText] = useState(() =>
46    isStreaming ? "" : fullText
47  );
48  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
49 
50  useEffect(() => {
51    let initialTimeoutId: NodeJS.Timeout | null = null;
52 
53    if (!isStreaming) {
54      initialTimeoutId = setTimeout(() => {
55        setDisplayedText(fullText);
56      }, 0);
57      return () => {
58        if (initialTimeoutId) {
59          clearTimeout(initialTimeoutId);
60        }
61      };
62    }
63 
64    if (typeof window !== "undefined") {
65      const prefersReducedMotion = window.matchMedia(
66        "(prefers-reduced-motion: reduce)"
67      ).matches;
68 
69      if (prefersReducedMotion) {
70        initialTimeoutId = setTimeout(() => {
71          setDisplayedText(fullText);
72        }, 0);
73        return () => {
74          if (initialTimeoutId) {
75            clearTimeout(initialTimeoutId);
76          }
77        };
78      }
79    }
80 
81    initialTimeoutId = setTimeout(() => {
82      setDisplayedText("");
83    }, 0);
84    let currentIndex = 0;
85 
86    const streamNext = () => {
87      if (currentIndex >= fullText.length) {
88        return;
89      }
90 
91      const nextIndex = Math.min(
92        currentIndex + STREAMING_CONFIG.BATCH_SIZE,
93        fullText.length
94      );
95      setDisplayedText(fullText.slice(0, nextIndex));
96      currentIndex = nextIndex;
97 
98      timeoutRef.current = setTimeout(streamNext, STREAMING_CONFIG.CHAR_DELAY);
99    };
100 
101    streamNext();
102 
103    return () => {
104      if (initialTimeoutId) {
105// … truncated