1"use client";
2 
3import * as React from "react";
4import { ArrowUp, Globe, Plus, Settings } from "lucide-react";
5import {
6  ComposeDisclaimer,
7  ComposeSendButton,
8  ComposeTextarea,
9  ModelChip,
10  createCompose,
11  useCompose,
12  type ComposeProps,
13} from "@agent-ui/react";
14 
15const Root = createCompose({
16  id: "xai",
17  maxWidth: "max-w-none",
18  models: [
19    { id: "fast", name: "Fast", hint: "Grok 4.1" },
20    { id: "expert", name: "Expert", hint: "Reasons longer" },
21    { id: "heavy", name: "Heavy", hint: "Multi-agent" },
22  ],
23  initialToggles: { search: false },
24});
25 
26function GrokMark({ className }: { className?: string }) {
27  return (
28    <svg viewBox="0 0 24 24" className={className} aria-hidden="true" fill="none">
29      <path
30        d="M20.6 3.4 3.4 20.6M3.9 3.9a7.7 7.7 0 0 1 10.9 0l5.3 5.3a7.7 7.7 0 0 1 0 10.9"
31        stroke="currentColor"
32        strokeWidth="1.7"
33        strokeLinecap="round"
34      />
35    </svg>
36  );
37}
38 
39/** Grok: near-white canvas, oversized soft composer, blue send, stark pills. */
40function GrokComposeLayout() {
41  const { toggles, toggle } = useCompose();
42  return (
43    <div className="relative flex min-h-[400px] w-full flex-col bg-[#fafafa] px-6 pb-7 pt-4 text-[13px] text-[#0a0a0a]">
44      <div className="flex items-center">
45        <GrokMark className="h-6 w-6" />
46        <div className="ml-auto flex items-center gap-2">
47          <button
48            type="button"
49            aria-label="Settings"
50            className="grid h-8 w-8 place-items-center rounded-full hover:bg-black/5"
51          >
52            <Settings className="h-4 w-4" aria-hidden="true" />
53          </button>
54          <button
55            type="button"
56            className="rounded-full border border-black/[0.12] px-3.5 py-1.5 text-[11.5px] font-medium"
57          >
58            Sign in
59          </button>
60          <button
61            type="button"
62            className="rounded-full bg-[#0a0a0a] px-3.5 py-1.5 text-[11.5px] font-medium text-white"
63          >
64            Sign up
65          </button>
66        </div>
67      </div>
68 
69      <div className="my-auto flex w-full flex-col items-center pt-4">
70        <h1 className="text-center text-[26px] font-semibold tracking-[-0.02em]">
71          What should we explore?
72        </h1>
73 
74        <div
75          data-agent-id="compose-card"
76          className="mt-6 flex w-full max-w-[470px] flex-col rounded-3xl border border-black/[0.08] bg-white p-3.5 shadow-[0_2px_14px_rgba(0,0,0,0.05)] transition-[border-color,box-shadow] duration-200 focus-within:border-black/20 focus-within:shadow-[0_4px_24px_rgba(0,0,0,0.09)]"
77        >
78          <ComposeTextarea
79            aria-label="Ask anything"
80            placeholder="Switch to Build Mode to create apps"
81            rows={2}
82            className="min-h-[46px] px-1 py-1 text-[15px] leading-6 placeholder:text-black/40"
83          />
84          <div className="mt-2 flex items-center justify-between gap-2">
85            <div className="flex items-center gap-1">
86              <button
87                type="button"
88                aria-label="Attach"
89                className="grid h-8 w-8 place-items-center rounded-full text-[#0a0a0a] hover:bg-black/5"
90              >
91                <Plus className="h-[18px] w-[18px]" aria-hidden="true" />
92              </button>
93              <button
94                type="button"
95                aria-label="Live search"
96                aria-pressed={toggles.search}
97                onClick={() => toggle("search")}
98                className="flex items-center gap-1 rounded-full px-2 py-1.5 text-[11.5px] text-black/50 hover:bg-black/5 aria-pressed:bg-black/[0.06] aria-pressed:text-black"
99              >
100                <Globe className="h-3.5 w-3.5" aria-hidden="true" /> Live search
101              </button>
102            </div>
103            <div className="flex items-center gap-2">
104              <ModelChip
105                tone="light"
106                className="[&>button]:h-7 [&>button]:px-1 [&>button]:text-[12px] [&>button]:text-black/70 [&>button]:hover:bg-transparent"
107              />
108              <ComposeSendButton
109                aria-label="Send message"
110                className="h-8 w-8 bg-[#a9c8ff] text-white hover:bg-[#93b8fb] disabled:bg-[#a9c8ff] disabled:text-white disabled:opacity-100"
111                icon={<ArrowUp className="h-[17px] w-[17px]" strokeWidth={2.4} />}
112              />
113            </div>
114          </div>
115        </div>
116      </div>
117 
118      <ComposeDisclaimer className="mt-0 text-[10px] text-black/50">
119        By messaging Grok, you agree to our{" "}
120        <a href="#" className="underline">
121          Terms
122        </a>{" "}
123        and{" "}
124        <a href="#" className="underline">
125          Privacy Policy
126        </a>
127        .
128      </ComposeDisclaimer>
129    </div>
130  );
131}
132 
133export function GrokCompose(props: ComposeProps) {
134  return (
135    <Root {...props}>
136      <GrokComposeLayout />
137    </Root>
138  );
139}
140