Changelog — New Chat Components

1"use client";
2 
3import { Caret } from "@/components/remocn/caret";
4import { useTypewriter } from "@/lib/remocn-ui";
5 
6export interface TypewriterProps {
7  text: string;
8  cursor?: boolean;
9  charsPerSecond?: number;
10  speed?: number;
11  fontSize?: number;
12  color?: string;
13  cursorColor?: string;
14  fontWeight?: number;
15  className?: string;
16}
17 
18export function Typewriter({
19  text,
20  cursor = true,
21  charsPerSecond = 22,
22  speed = 1,
23  fontSize = 48,
24  color = "#171717",
25  cursorColor = "#171717",
26  fontWeight = 600,
27  className,
28}: TypewriterProps) {
29  const tw = useTypewriter(text, { cps: charsPerSecond, speed });
30 
31  return (
32    <div
33      style={{
34        position: "absolute",
35        inset: 0,
36        display: "flex",
37        alignItems: "center",
38        justifyContent: "center",
39        background: "transparent",
40      }}
41    >
42      <span
43        className={className}
44        style={{
45          fontSize,
46          fontWeight,
47          color,
48          letterSpacing: "-0.03em",
49          fontFamily:
50            "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
51          whiteSpace: "pre",
52        }}
53      >
54        {tw.text}
55        {cursor && (
56          <Caret
57            color={cursorColor}
58            blink={!tw.typing}
59            speed={speed}
60            radius={0}
61            style={{
62              width: "0.08em",
63              height: "1em",
64              marginLeft: "0.04em",
65              verticalAlign: "text-bottom",
66            }}
67          />
68        )}
69      </span>
70    </div>
71  );
72}