1"use client";
2 
3import * as React from "react";
4import { AudioLines, Globe, PanelLeft, 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: "qwen",
16  maxWidth: "max-w-none",
17  placeholder: "Message Qwen",
18  models: [
19    { id: "qwen3-7-plus", name: "Qwen3.7-Plus", hint: "Flagship" },
20    { id: "qwen3-max", name: "Qwen3-Max", hint: "Most capable" },
21    { id: "qwen3-coder", name: "Qwen3-Coder", hint: "Code" },
22  ],
23  initialToggles: { search: false, thinking: false },
24});
25 
26/** Qwen Chat: gallery-white minimalism, giant capsule, equaliser send. */
27function QwenComposeLayout() {
28  const { toggles, toggle } = useCompose();
29  return (
30    <div className="flex min-h-[400px] w-full flex-col bg-white px-6 pb-5 pt-3 text-[13px] text-[#1a1a1a]">
31      <div className="flex items-center gap-2">
32        <PanelLeft className="h-4 w-4 text-black/55" aria-hidden="true" />
33        <ModelChip
34          tone="light"
35          placement="bottom"
36          className="[&>button]:h-8 [&>button]:gap-1.5 [&>button]:px-1 [&>button]:text-[14px] [&>button]:font-semibold [&>button]:text-[#1a1a1a] [&>button]:hover:bg-black/5"
37        />
38        <div className="ml-auto flex items-center gap-2">
39          <button
40            type="button"
41            className="rounded-full bg-[#1a1a1a] px-3.5 py-1.5 text-[10.5px] font-medium text-white"
42          >
43            Log in
44          </button>
45          <button
46            type="button"
47            className="rounded-full border border-black/10 px-3.5 py-1.5 text-[10.5px] font-medium"
48          >
49            Sign up
50          </button>
51        </div>
52      </div>
53 
54      <div className="my-auto flex w-full flex-col items-center">
55        <h1 className="text-center text-[26px] font-normal tracking-[-0.01em] text-[#2b2b2b]">
56          How can I help you?
57        </h1>
58 
59        <div
60          data-agent-id="compose-card"
61          className="mt-6 flex w-full max-w-[470px] items-center gap-2 rounded-full border border-[#e6e6f0] bg-white py-1.5 pl-4 pr-1.5 shadow-[0_2px_12px_rgba(80,80,160,0.06)] transition-[border-color,box-shadow] duration-200 focus-within:border-[#1a1a1a]/20 focus-within:shadow-[0_4px_20px_rgba(80,80,160,0.12)]"
62        >
63          <button
64            type="button"
65            aria-label="Attach"
66            className="grid h-7 w-7 shrink-0 place-items-center rounded-full text-[#1a1a1a] hover:bg-black/5"
67          >
68            <Plus className="h-[18px] w-[18px]" aria-hidden="true" />
69          </button>
70          <ComposeTextarea
71            aria-label="Message Qwen"
72            placeholder="Message Qwen"
73            rows={1}
74            className="min-w-0 flex-1 px-1 py-1.5 text-[14px] leading-5 placeholder:text-black/35"
75          />
76          <span className="flex shrink-0 items-center gap-1 rounded-full px-2 py-1 text-[11px] text-black/55">
77            Auto
78            <svg viewBox="0 0 24 24" className="h-2.5 w-2.5" aria-hidden="true" fill="none">
79              <path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
80            </svg>
81          </span>
82          <ComposeSendButton
83            aria-label="Send message"
84            className="h-8 w-8 shrink-0 bg-[#1a1a1a] text-white hover:bg-black disabled:bg-[#1a1a1a] disabled:text-white disabled:opacity-100"
85            icon={<AudioLines className="h-4 w-4" strokeWidth={2.2} />}
86          />
87        </div>
88 
89        <div className="mt-3 flex items-center gap-1.5">
90          <button
91            type="button"
92            aria-label="Toggle web search"
93            aria-pressed={toggles.search}
94            onClick={() => toggle("search")}
95            className="flex items-center gap-1 rounded-full border border-[#ececf2] px-2.5 py-1 text-[10px] text-black/45 hover:bg-black/[0.03] aria-pressed:border-black/15 aria-pressed:bg-black/[0.05] aria-pressed:text-black/80"
96          >
97            <Globe className="h-3 w-3" aria-hidden="true" /> Search
98          </button>
99          <button
100            type="button"
101            aria-label="Toggle thinking"
102            aria-pressed={toggles.thinking}
103            onClick={() => toggle("thinking")}
104            className="flex items-center gap-1 rounded-full border border-[#ececf2] px-2.5 py-1 text-[10px] text-black/45 hover:bg-black/[0.03] aria-pressed:border-black/15 aria-pressed:bg-black/[0.05] aria-pressed:text-black/80"
105          >
106            <Sparkles className="h-3 w-3" aria-hidden="true" /> Think
107          </button>
108        </div>
109      </div>
110 
111      <p className="text-center text-[8.5px] text-black/30">
112        By using Qwen, you agree to our{" "}
113        <a href="#" className="underline">
114          Terms of Service
115        </a>{" "}
116        and{" "}
117        <a href="#" className="underline">
118          Privacy Policy
119        </a>
120        .
121      </p>
122    </div>
123  );
124}
125 
126export function QwenCompose(props: ComposeProps) {
127  return (
128    <Root {...props}>
129      <QwenComposeLayout />
130    </Root>
131  );
132}
133