ChatGPT

1"use client";
2 
3import { loadFont } from "@remotion/google-fonts/Inter";
4import {
5  AbsoluteFill,
6  interpolate,
7  spring,
8  useCurrentFrame,
9  useVideoConfig,
10} from "remotion";
11import { Caret } from "@/components/remocn/caret";
12import { useTypewriter } from "@/lib/remocn-ui";
13 
14const { fontFamily: SANS_FAMILY } = loadFont();
15 
16export interface ChatGptProps {
17  greeting?: string;
18  placeholder?: string;
19  prompt?: string;
20  accentColor?: string;
21  speed?: number;
22}
23 
24interface Theme {
25  page: string;
26  inputBg: string;
27  inputBorder: string;
28  fg: string;
29  fgMuted: string;
30  chipBorder: string;
31  chipFg: string;
32  sendBg: string;
33  sendArrow: string;
34  iconColor: string;
35}
36 
37export const THEMES: Record<"light" | "dark", Theme> = {
38  light: {
39    page: "#FFFFFF",
40    inputBg: "#FFFFFF",
41    inputBorder: "#E3E3E3",
42    fg: "#0D0D0D",
43    fgMuted: "#9B9B9B",
44    chipBorder: "#E3E3E3",
45    chipFg: "#5D5D5D",
46    sendBg: "#0D0D0D",
47    sendArrow: "#FFFFFF",
48    iconColor: "#5D5D5D",
49  },
50  dark: {
51    page: "#212121",
52    inputBg: "#303030",
53    inputBorder: "#454545",
54    fg: "#ECECEC",
55    fgMuted: "#9B9B9B",
56    chipBorder: "#454545",
57    chipFg: "#C5C5C5",
58    sendBg: "#FFFFFF",
59    sendArrow: "#0D0D0D",
60    iconColor: "#C5C5C5",
61  },
62};
63 
64export const TYPING_START_FRAME = 42;
65 
66export const TYPING_CPS = 22;
67 
68export function morphProgressAt(
69  frame: number,
70  opts: { startFrame?: number; fps: number; speed: number },
71): number {
72  const startFrame = opts.startFrame ?? TYPING_START_FRAME;
73  const value = spring({
74    fps: opts.fps,
75    frame: frame * opts.speed - startFrame,
76    config: { damping: 14, stiffness: 200, mass: 0.6 },
77  });
78  return Math.max(0, Math.min(value, 1));
79}
80 
81function introBounceIn(
82  frame: number,
83  fps: number,
84): { translateY: number; scale: number } {
85  const s = spring({
86    fps,
87    frame,
88    config: { damping: 14, stiffness: 110, mass: 0.7 },
89  });
90  const translateY = interpolate(s, [0, 1], [28, 0]);
91  const scale = interpolate(s, [0, 1], [0.97, 1]);
92  return { translateY, scale };
93}
94 
95function fadeUpAt(
96  frame: number,
97  range: [number, number],
98): { opacity: number; translateY: number } {
99  const opts = {
100    extrapolateLeft: "clamp" as const,
101    extrapolateRight: "clamp" as const,
102  };
103  return {
104    opacity: interpolate(frame, range, [0, 1], opts),
105    translateY: interpolate(frame, range, [12, 0], opts),
106  };
107}
108 
109function PlusIcon({ size, color }: { size: number; color: string }) {
110  return (
111// … truncated