chat-gpt

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