Chat to Preview Layout

1"use client";
2 
3import type { ReactNode } from "react";
4import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
5 
6export interface ChatToPreviewLayoutProps {
7  chat?: ReactNode;
8  preview?: ReactNode;
9  startChatRatio?: number;
10  endChatRatio?: number;
11  speed?: number;
12  className?: string;
13}
14 
15const FONT_FAMILY =
16  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
17 
18function DefaultChat() {
19  const messages = [
20    { from: "user", text: "Build me a landing page" },
21    { from: "ai", text: "Sure — what should it feature?" },
22    { from: "user", text: "Hero, pricing, footer." },
23    { from: "ai", text: "On it. Generating now..." },
24  ];
25  return (
26    <div
27      style={{
28        position: "absolute",
29        inset: 0,
30        padding: 24,
31        display: "flex",
32        flexDirection: "column",
33        gap: 12,
34        fontFamily: FONT_FAMILY,
35        background: "#111",
36      }}
37    >
38      <div
39        style={{
40          color: "#888",
41          fontSize: 12,
42          fontWeight: 600,
43          letterSpacing: "0.08em",
44          textTransform: "uppercase",
45          marginBottom: 8,
46        }}
47      >
48        Chat
49      </div>
50      {messages.map((m, i) => (
51        <div
52          key={i}
53          style={{
54            alignSelf: m.from === "user" ? "flex-end" : "flex-start",
55            background: m.from === "user" ? "#0ea5e9" : "#262626",
56            color: "white",
57            padding: "10px 14px",
58            borderRadius: 14,
59            fontSize: 14,
60            maxWidth: "85%",
61          }}
62        >
63          {m.text}
64        </div>
65      ))}
66    </div>
67  );
68}
69 
70function DefaultPreview() {
71  return (
72    <div
73      style={{
74        position: "absolute",
75        inset: 0,
76        background: "white",
77        display: "flex",
78        flexDirection: "column",
79        fontFamily: FONT_FAMILY,
80      }}
81    >
82      <div
83        style={{
84          height: 36,
85          background: "#f4f4f5",
86          borderBottom: "1px solid #e4e4e7",
87          display: "flex",
88          alignItems: "center",
89          gap: 6,
90          padding: "0 12px",
91        }}
92      >
93        <div
94          style={{
95            width: 10,
96            height: 10,
97            borderRadius: 999,
98            background: "#ef4444",
99          }}
100        />
101        <div
102          style={{
103            width: 10,
104            height: 10,
105            borderRadius: 999,
106            background: "#f59e0b",
107          }}
108        />
109        <div
110// … truncated