1"use client";
2 
3import * as React from "react";
4import { ArrowRight, Plus } from "lucide-react";
5import {
6  ComposeSendButton,
7  ComposeTextarea,
8  ModelChip,
9  createCompose,
10  type ComposeProps,
11} from "@agent-ui/react";
12 
13const Root = createCompose({
14  id: "cohere",
15  maxWidth: "max-w-none",
16  placeholder: "Message Command",
17  models: [
18    { id: "command-r-plus", name: "Command R+", hint: "Best quality" },
19    { id: "command-r", name: "Command R", hint: "Fast" },
20    { id: "command-a", name: "Command A", hint: "Agentic" },
21  ],
22});
23 
24/** Cohere Coral: chalk canvas, editorial serif, sea-green + coral, soft 3D pebbles. */
25function CohereComposeLayout() {
26  return (
27    <div className="relative flex min-h-[400px] w-full flex-col overflow-hidden bg-[#f2f1ee] px-6 pb-5 pt-4 text-[13px] text-[#212121]">
28      <div
29        aria-hidden="true"
30        className="pointer-events-none absolute -left-6 top-24 h-20 w-20 rotate-12 rounded-[38%] bg-[radial-gradient(circle_at_30%_30%,#8fd3c7,#39594d_70%)] opacity-70 blur-[1px]"
31      />
32      <div
33        aria-hidden="true"
34        className="pointer-events-none absolute -right-4 top-16 h-16 w-16 -rotate-12 rounded-[40%] bg-[radial-gradient(circle_at_35%_30%,#ffb59d,#e4552f_75%)] opacity-80 blur-[1px]"
35      />
36      <div
37        aria-hidden="true"
38        className="pointer-events-none absolute -right-2 bottom-24 h-14 w-14 rotate-45 rounded-[42%] bg-[radial-gradient(circle_at_35%_30%,#f9a8d4,#7c3aed_80%)] opacity-60 blur-[1px]"
39      />
40 
41      <div className="relative flex items-center gap-1.5">
42        <span className="flex items-end gap-0.5" aria-hidden="true">
43          <span className="h-2.5 w-2.5 rounded-full bg-[#39594d]" />
44          <span className="h-2 w-2 rounded-full bg-[#e4552f]" />
45        </span>
46        <span className="-ml-0.5 text-[15px] font-semibold tracking-[-0.03em] text-[#39594d]">
47          cohere
48        </span>
49        <button type="button" className="ml-auto text-[10.5px] text-[#39594d]">
50          Sign Up
51        </button>
52      </div>
53 
54      <div className="relative my-auto mx-auto w-full max-w-[420px] rounded-md border border-[#d8d6cf] bg-white px-6 py-5 shadow-[0_2px_10px_rgba(57,89,77,0.06)]">
55        <h1 className="text-center font-serif text-[25px] tracking-[-0.01em]">
56          How can I help you today?
57        </h1>
58        <p className="mt-1 text-center text-[10.5px] text-[#6b6b64]">
59          Chat with Command, grounded in your enterprise data.
60        </p>
61 
62        <div
63          data-agent-id="compose-card"
64          className="mt-4 flex flex-col rounded-md border border-[#c9c7bf] bg-white transition-shadow duration-200 focus-within:border-[#39594d]/60 focus-within:shadow-[0_4px_16px_rgba(57,89,77,0.12)]"
65        >
66          <ComposeTextarea
67            aria-label="Message Command"
68            placeholder="Message Command"
69            rows={2}
70            className="min-h-[42px] px-3 py-2 text-[13.5px] leading-6 placeholder:text-[#9b9b93]"
71          />
72          <div className="flex items-center justify-between border-t border-[#e6e4dd] px-2 py-1.5">
73            <button
74              type="button"
75              aria-label="Attach"
76              className="grid h-6 w-6 place-items-center rounded text-[#6b6b64] hover:bg-[#f2f1ee]"
77            >
78              <Plus className="h-3.5 w-3.5" aria-hidden="true" />
79            </button>
80            <div className="flex items-center gap-1.5">
81              <ModelChip
82                tone="light"
83                className="[&>button]:h-6 [&>button]:px-1 [&>button]:text-[10.5px] [&>button]:text-[#6b6b64] [&>button]:hover:bg-[#f2f1ee]"
84              />
85              <ComposeSendButton
86                aria-label="Send message"
87                className="h-6 rounded-sm bg-[#39594d] px-3 text-[10.5px] font-medium text-white hover:bg-[#2c463c] disabled:bg-[#c9d3cd] disabled:text-white disabled:opacity-100"
88                icon={<ArrowRight className="h-3 w-3" aria-hidden="true" />}
89              />
90            </div>
91          </div>
92        </div>
93 
94        <p className="mt-3 text-center text-[9px] leading-snug text-[#8a8a82]">
95          By signing up, you agree to the{" "}
96          <a href="#" className="underline">
97            Terms of Use
98          </a>{" "}
99          and{" "}
100          <a href="#" className="underline">
101            Privacy Policy
102          </a>
103          .
104        </p>
105      </div>
106 
107      <p className="relative text-center text-[9px] text-[#9b9b93]">
108        Cohere can make mistakes. Check important info.
109      </p>
110    </div>
111  );
112}
113 
114export function CohereCompose(props: ComposeProps) {
115  return (
116    <Root {...props}>
117      <CohereComposeLayout />
118    </Root>
119  );
120}
121