Chat

1"use client";
2
3import { useEffect, useRef, useState } from "react";
4const posthog = { capture: (..._args: any[]) => {} };
5
6/* ─────────────────────────────────────────────────────────
7 * CHAT — interactive panel with tabs, replies, and composer.
8 * The reply sequence begins only after the user sends.
9 * ───────────────────────────────────────────────────────── */
10
11type Phase = "idle" | "sent" | "reply1" | "reply2" | "done";
12
13function Section({
14  label,
15  sub,
16  time,
17  body,
18  resolving,
19}: {
20  label: string;
21  sub: string;
22  time: string;
23  body: string;
24  resolving?: boolean;
25}) {
26  return (
27    <div
28      className="flex w-full flex-col gap-1.5 transition-[opacity,filter,transform] duration-400"
29      style={{
30        opacity: resolving ? 0.55 : 1,
31        filter: resolving ? "blur(0.5px)" : "blur(0)",
32        transform: resolving ? "scale(0.985)" : "scale(1)",
33        transformOrigin: "top left",
34        transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
35        animation: "fade-up 400ms cubic-bezier(0.23,1,0.32,1) both",
36      }}
37    >
38      <div className="flex items-center gap-1 text-[12px] leading-[1.3]">
39        <span className="font-medium text-ink">{label}</span>
40        <span className="text-ink-2">{sub}</span>
41        <span className="text-ink">for {time}</span>
42      </div>
43      <p className="text-[13px] leading-normal text-ink">{body}</p>
44    </div>
45  );
46}
47
48export default function ChatComposer() {
49  const [phase, setPhase] = useState<Phase>("done");
50  const [draft, setDraft] = useState("");
51  const [submitted, setSubmitted] = useState("Compare mint chip to last summer");
52  const [tab, setTab] = useState("Flavors");
53  const inputRef = useRef<HTMLInputElement>(null);
54
55  useEffect(() => {
56    let t: ReturnType<typeof setTimeout>;
57    if (phase === "sent") t = setTimeout(() => setPhase("reply1"), 500);
58    else if (phase === "reply1") t = setTimeout(() => setPhase("reply2"), 1400);
59    else if (phase === "reply2") t = setTimeout(() => setPhase("done"), 1200);
60    else return;
61    return () => clearTimeout(t);
62  }, [phase]);
63
64  const sent = phase !== "idle";
65  const canSend = draft.trim().length > 0;
66
67  const send = () => {
68    if (!canSend) return;
69    setSubmitted(draft.trim());
70    posthog.capture("chat_composer_prompt_sent");
71    setDraft("");
72    setPhase("sent");
73  };
74
75  return (
76    <div className="flex h-[288px] w-full max-w-95 flex-col self-start overflow-hidden rounded-[14px] bg-surface shadow-card">
77      {/* header — tabs + actions */}
78      <div className="flex shrink-0 items-center justify-between border-b border-line p-1.5">
79        <div className="flex items-center">
80          {["Flavors", "Suppliers"].map((item) => (
81            <button
82              key={item}
83              type="button"
84              aria-pressed={tab === item}
85              onClick={() => setTab(item)}
86              className={`rounded-[6px] px-2 py-[3px] text-[13px] text-ink transition-[background-color,opacity] duration-100 ${tab === item ? "bg-field" : "opacity-50 hover:opacity-75"}`}
87            >
88              {item}
89            </button>
90          ))}
91        </div>
92        <div className="flex items-center gap-1">
93          {[
94            <path key="p" d="M12 5v14M5 12h14" />,
95            <g key="h"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></g>,
96            <g key="e" fill="currentColor" stroke="none"><circle cx="5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="19" cy="12" r="1.8" /></g>,
97          ].map((icon, i) => (
98            <button
99              key={i}
100              type="button"
101              aria-label="Action"
102              className="flex size-6 items-center justify-center rounded-[6px] text-ink-3
103                transition-colors duration-100 hover:bg-hover hover:text-ink-2"
104            >
105              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
106                {icon}
107              </svg>
108            </button>
109          ))}
110        </div>
111      </div>
112
113      {/* conversation — fixed region so the card never changes shape */}
114      <div className="flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto px-3 pt-2.5 pb-1">
115        {/* user bubble — right aligned, soft block */}
116        <div className="flex justify-end pl-14">
117          <div
118            className="rounded-xl bg-field px-3 py-1.5 text-[13px] leading-[1.4] text-ink
119              transition-[opacity,transform] duration-300"
120            style={{
121              opacity: sent ? 1 : 0,
122              transform: sent ? "translateY(0)" : "translateY(10px)",
123              transitionTimingFunction: "cubic-bezier(0.23, 1, 0.32, 1)",
124            }}
125          >
126            {submitted}
127          </div>
128        </div>
129
130        {phase === "reply1" || phase === "reply2" || phase === "done" ? (
131          <Section
132            label="Sales History"
133            sub="Flavor Data"
134            time="4s"
135            body="Pulled 3 summers of mint chip sales for comparison."
136          />
137        ) : null}
138        {phase === "reply2" || phase === "done" ? (
139          <Section
140            label="Comparison"
141            sub="Trend Detection"
142            time="2s"
143            body="Mint chip is up 12% with stronger weekend peaks."
144            resolving={phase === "reply2"}
145          />
146        ) : null}
147      </div>
148
149      {/* composer */}
150      <div className="mt-auto shrink-0 p-1.5">
151        <div
152          role="presentation"
153          onClick={() => inputRef.current?.focus()}
154          className="flex cursor-text flex-col gap-2 rounded-control border border-line bg-field p-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.035)] transition-[border-color,box-shadow] duration-150 focus-within:border-line-strong focus-within:shadow-[0_1px_2px_rgba(0,0,0,0.025)]"
155        >
156          <input
157            ref={inputRef}
158            value={draft}
159            onChange={(event) => setDraft(event.target.value)}
160            onKeyDown={(event) => {
161              if (event.key === "Enter") send();
162            }}
163            placeholder="Prompt or tag a flavor with @"
164            aria-label="Chat prompt"
165            className="min-h-4.5 bg-transparent text-[13px] leading-[1.4] text-ink outline-none placeholder:text-ink-3"
166          />
167          <div className="flex items-center justify-end">
168            <button
169              type="button"
170              aria-label="Send"
171              disabled={!canSend}
172              onClick={send}
173              className="flex size-7 items-center justify-center rounded-[8px]
174                transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.96]"
175              style={{
176                background: canSend ? "var(--ink)" : "var(--line-strong)",
177                color: canSend ? "var(--surface)" : "var(--ink-2)",
178              }}
179            >
180              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
181                <path d="M12 19V5M5 12l7-7 7 7" />
182              </svg>
183            </button>
184          </div>
185        </div>
186      </div>
187    </div>
188  );
189}
190