claude-chat

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
3import {
4  AI_TYPING_START,
5  Caret,
6  fadeUpAt,
7  introBounceIn,
8  morphProgressAt,
9  stageScale,
10  useTypewriter,
11} from "@/remotion/lib/ai-composer-utils";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["400", "500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18export type ClaudeChatProps = {
19  placeholder?: string;
20  prompt?: string;
21  modelName?: string;
22  modelTier?: string;
23  accentColor?: string;
24  theme?: "light" | "dark";
25  speed?: number;
26};
27 
28type Theme = {
29  page: string;
30  cardBg: string;
31  cardBorder: string;
32  fg: string;
33  fgMuted: string;
34  placeholder: string;
35  iconBtnBorder: string;
36};
37 
38export const THEMES: Record<"light" | "dark", Theme> = {
39  light: {
40    page: "#F5F4EF",
41    cardBg: "#FFFFFF",
42    cardBorder: "#E8E5DD",
43    fg: "#1F1E1D",
44    fgMuted: "#73726C",
45    placeholder: "#A3A097",
46    iconBtnBorder: "#E0DDD4",
47  },
48  dark: {
49    page: "#262624",
50    cardBg: "#1F1E1D",
51    cardBorder: "#3A3936",
52    fg: "#F0EEE6",
53    fgMuted: "#9B9892",
54    placeholder: "#73726C",
55    iconBtnBorder: "#3A3936",
56  },
57};
58 
59const TYPING_CPS = 22;
60 
61function ChevronDown({ size, color }: { size: number; color: string }) {
62  return (
63    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
64      <title>Expand</title>
65      <path
66        d="M6 9l6 6 6-6"
67        stroke={color}
68        strokeWidth={2}
69        strokeLinecap="round"
70        strokeLinejoin="round"
71      />
72    </svg>
73  );
74}
75 
76function PlusIcon({ size, color }: { size: number; color: string }) {
77  return (
78    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
79      <title>Add</title>
80      <path
81        d="M12 5v14M5 12h14"
82        stroke={color}
83        strokeWidth={2}
84        strokeLinecap="round"
85      />
86    </svg>
87  );
88}
89 
90function MicIcon({ size, color }: { size: number; color: string }) {
91  return (
92    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
93      <title>Voice input</title>
94      <rect
95        x={9}
96        y={3}
97        width={6}
98        height={11}
99        rx={3}
100        stroke={color}
101        strokeWidth={1.8}
102      />
103      <path
104        d="M5.5 11a6.5 6.5 0 0013 0M12 17.5V21M9 21h6"
105        stroke={color}
106        strokeWidth={1.8}
107        strokeLinecap="round"
108        strokeLinejoin="round"
109      />
110    </svg>
111  );
112}
113 
114function WaveformIcon({ size, color }: { size: number; color: string }) {
115// … truncated