UI AI Prompt Flow

1"use client";
2 
3import { Button } from "@/components/remocn/button";
4import { Input } from "@/components/remocn/input";
5import { Skeleton } from "@/components/remocn/skeleton";
6import { SkeletonBlock } from "@/components/remocn/skeleton-block";
7import { Toast } from "@/components/remocn/toast";
8import { useButtonTransition } from "@/components/remocn/use-button-transition";
9import { useInputTransition } from "@/components/remocn/use-input-transition";
10import { useSkeletonTransition } from "@/components/remocn/use-skeleton-transition";
11import { useToastTransition } from "@/components/remocn/use-toast-transition";
12import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
13 
14export interface AiPromptFlowProps {
15  prompt?: string;
16  buttonLabel?: string;
17  answerLines?: string[];
18  toastTitle?: string;
19  theme?: Partial<RemocnTheme>;
20}
21 
22const STAGE_W = 1280;
23const PROMPT_W = 520;
24const PROMPT_LEFT = (STAGE_W - PROMPT_W) / 2;
25const PROMPT_TOP = 168;
26const PROMPT_H = 92;
27 
28const BTN_W = 200;
29const BTN_LEFT = (STAGE_W - BTN_W) / 2;
30const BTN_TOP = 278;
31const BTN_H = 64;
32 
33const ANSWER_W = 560;
34const ANSWER_LEFT = (STAGE_W - ANSWER_W) / 2;
35const ANSWER_TOP = 380;
36 
37const DEFAULT_ANSWER = [
38  "The thread debates the Q3 roadmap: ship the editor first,",
39  "defer billing to Q4, and pull the migration forward so",
40  "infra is unblocked before the team scales next quarter.",
41];
42 
43export function AiPromptFlow({
44  prompt = "Summarize this thread",
45  buttonLabel = "Generate",
46  answerLines = DEFAULT_ANSWER,
47  toastTitle = "Response ready",
48  theme,
49}: AiPromptFlowProps) {
50  const resolved = useRemocnTheme(theme);
51  const opts = { theme };
52 
53  const inputStyle = useInputTransition(
54    [
55      { at: 0, state: "active", duration: 1 },
56      { at: 0, state: "typing", duration: 50 },
57    ],
58    opts,
59  );
60 
61  const buttonStyle = useButtonTransition(
62    [
63      { at: 52, state: "hover", duration: 6 },
64      { at: 58, state: "press", duration: 4 },
65      { at: 62, state: "loading", duration: 4 },
66    ],
67    opts,
68  );
69 
70  const skeletonStyle = useSkeletonTransition(
71    [
72      { at: 64, state: "loading", duration: 1 },
73      { at: 150, state: "loaded", duration: 16 },
74    ],
75    {},
76  );
77 
78  const panelOpacity = buttonStyle.spinnerOpacity;
79 
80  const toastStyle = useToastTransition(
81    [
82      { at: 160, state: "visible", duration: 14 },
83      { at: 220, state: "hidden", duration: 14 },
84    ],
85    {},
86  );
87 
88  return (
89    <div
90      style={{
91        position: "relative",
92// … truncated