1"use client";
2 
3import * as React from "react";
4import { ArrowUp, Globe, Plus, Sparkles } from "lucide-react";
5import {
6  ComposeSendButton,
7  ComposeTextarea,
8  ModelChip,
9  createCompose,
10  useCompose,
11  type ComposeProps,
12} from "@agent-ui/react";
13 
14const Root = createCompose({
15  id: "anthropic",
16  maxWidth: "max-w-none",
17  placeholder: "How can I help you today?",
18  models: [
19    { id: "claude-sonnet-4-5", name: "Claude Sonnet 4.5", hint: "Best for most tasks" },
20    { id: "claude-opus-4-1", name: "Claude Opus 4.1", hint: "Most capable" },
21    { id: "claude-haiku-4-5", name: "Claude Haiku 4.5", hint: "Fastest" },
22  ],
23  initialToggles: { search: false, thinking: false },
24});
25 
26function ClaudeStar({ className }: { className?: string }) {
27  return (
28    <svg viewBox="0 0 24 24" className={className} aria-hidden="true" fill="none">
29      <g stroke="currentColor" strokeWidth="2.1" strokeLinecap="round">
30        <path d="M12 2.5v19M2.5 12h19M5.3 5.3l13.4 13.4M18.7 5.3 5.3 18.7" />
31      </g>
32    </svg>
33  );
34}
35 
36/** Claude: parchment canvas, Copernicus-style serif, terracotta accents. */
37function AnthropicComposeLayout() {
38  const { toggles, toggle } = useCompose();
39  return (
40    <div className="relative flex min-h-[400px] w-full flex-col overflow-hidden bg-[#f7f4ed] px-6 pb-6 pt-4 text-[13px] text-[#3d3929]">
41      <div className="flex items-center gap-2">
42        <ClaudeStar className="h-5 w-5 text-[#c96442]" />
43        <span className="font-serif text-[19px] leading-none tracking-[-0.01em]">Claude</span>
44        <span className="ml-auto rounded-full border border-[#d9d3c7] px-3 py-1 text-[10.5px] text-[#6b6455]">
45          Try Claude free
46        </span>
47      </div>
48 
49      <div className="my-auto flex w-full flex-col items-center">
50        <h1 className="text-center font-serif text-[32px] leading-[1.1] tracking-[-0.02em] text-[#3d3929]">
51          What can I help with?
52        </h1>
53        <p className="mt-2 font-serif text-[12.5px] italic text-[#6b6455]">
54          Your thinking partner for big ambitions
55        </p>
56 
57        <div
58          data-agent-id="compose-card"
59          className="mt-5 flex w-full max-w-[468px] flex-col rounded-2xl border border-[#d9d3c7] bg-[#fbfaf7] p-3 shadow-[0_1px_3px_rgba(61,57,41,0.05)] transition-[border-color,box-shadow] duration-200 focus-within:border-[#c96442]/50 focus-within:shadow-[0_2px_16px_rgba(201,100,66,0.12)]"
60        >
61          <ComposeTextarea
62            aria-label="Reply to Claude"
63            placeholder="How can I help you today?"
64            rows={2}
65            className="min-h-[48px] px-1 py-1 text-[14px] leading-6 text-[#3d3929] placeholder:text-[#9a9384]"
66          />
67          <div className="mt-2 flex items-center justify-between gap-2">
68            <div className="flex min-w-0 items-center gap-1.5">
69              <button
70                type="button"
71                aria-label="Attach"
72                className="grid h-7 w-7 place-items-center rounded-lg border border-[#d9d3c7] bg-white/60 text-[#6b6455] transition-colors hover:bg-white"
73              >
74                <Plus className="h-3.5 w-3.5" aria-hidden="true" />
75              </button>
76              <button
77                type="button"
78                aria-label="Toggle web search"
79                aria-pressed={toggles.search}
80                onClick={() => toggle("search")}
81                className="flex items-center gap-1 rounded-full border border-transparent px-2 py-1 text-[11px] text-[#6b6455] transition-colors hover:bg-[#efeae0] aria-pressed:border-[#d9d3c7] aria-pressed:bg-white aria-pressed:text-[#3d3929]"
82              >
83                <Globe className="h-3 w-3" aria-hidden="true" /> Research
84              </button>
85              <button
86                type="button"
87                aria-label="Toggle extended thinking"
88                aria-pressed={toggles.thinking}
89                onClick={() => toggle("thinking")}
90                className="flex items-center gap-1 rounded-full border border-transparent px-2 py-1 text-[11px] text-[#6b6455] transition-colors hover:bg-[#efeae0] aria-pressed:border-[#d9d3c7] aria-pressed:bg-white aria-pressed:text-[#3d3929]"
91              >
92                <Sparkles className="h-3 w-3" aria-hidden="true" /> Think
93              </button>
94            </div>
95            <div className="flex shrink-0 items-center gap-1.5">
96              <ModelChip
97                tone="light"
98                className="[&>button]:h-7 [&>button]:px-1.5 [&>button]:text-[11px] [&>button]:text-[#6b6455] [&>button]:hover:bg-[#efeae0]"
99              />
100              <ComposeSendButton
101                aria-label="Send message"
102                className="h-7 w-7 bg-[#c96442] text-white hover:bg-[#b5593a] disabled:bg-[#d9c3b8] disabled:text-white disabled:opacity-100"
103                icon={<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.4} />}
104              />
105            </div>
106          </div>
107        </div>
108 
109        <p className="mt-3 text-[10px] text-[#8a8375]">
110          Claude can make mistakes. Check important info.
111        </p>
112      </div>
113 
114      <p className="text-center text-[9px] text-[#a39c8d]">
115        By chatting, you agree to Anthropic&apos;s{" "}
116        <a href="#" className="underline">
117          Terms
118        </a>{" "}
119        and{" "}
120        <a href="#" className="underline">
121          Privacy Policy
122        </a>
123        .
124      </p>
125    </div>
126  );
127}
128 
129export function AnthropicCompose(props: ComposeProps) {
130  return (
131    <Root {...props}>
132      <AnthropicComposeLayout />
133    </Root>
134  );
135}
136