1"use client";
2 
3import * as React from "react";
4import { ArrowUp, ChevronDown, 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: "mimo",
15  maxWidth: "max-w-none",
16  placeholder: "Ask MiMo anything…",
17  models: [
18    { id: "mimo-v2-6", name: "MiMo-V2.6", hint: "Flagship" },
19    { id: "mimo-v2-5", name: "MiMo-V2.5", hint: "Balanced" },
20    { id: "mimo-v2-5-tts", name: "MiMo-V2.5-TTS", hint: "Speech" },
21  ],
22});
23 
24const PATTERN = ["M O M I M O", "M I M O M I", "O M I M O M", "I M O M I M", "M O M I M O"];
25 
26/** Xiaomi MiMo: bone grid paper, brutalist black display type, squared controls. */
27function MimoComposeLayout() {
28  return (
29    <div className="relative flex min-h-[400px] w-full flex-col overflow-hidden bg-[#f7f2e8] px-5 pb-4 pt-3 text-[13px] text-[#111]">
30      <div
31        aria-hidden="true"
32        className="pointer-events-none absolute inset-0 flex flex-col justify-between py-6 text-[26px] font-black tracking-[0.35em] text-[#111] opacity-[0.045]"
33      >
34        {PATTERN.map((row, i) => (
35          <span key={`${row}-${i}`} className="whitespace-nowrap">
36            {row} {row} {row}
37          </span>
38        ))}
39      </div>
40 
41      <div className="relative flex items-center gap-2">
42        <span className="text-[13.5px] font-semibold tracking-tight">Xiaomi MiMo</span>
43        <nav className="ml-auto flex items-center gap-3 text-[10.5px] text-black/70">
44          <span className="flex items-center gap-1">
45            Product <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />
46          </span>
47          <span className="flex items-center gap-1">
48            Research <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />
49          </span>
50          <span>Join Us</span>
51        </nav>
52      </div>
53 
54      <h1 className="relative my-auto text-center text-[38px] font-black uppercase leading-none tracking-[-0.03em]">
55        HELLO, I&apos;M MiMo
56      </h1>
57 
58      <div
59        data-agent-id="compose-card"
60        className="relative mx-auto w-full max-w-[480px] border border-black bg-white p-2.5 shadow-[3px_3px_0_0_#111] transition-[box-shadow,transform] duration-150 focus-within:-translate-y-0.5 focus-within:shadow-[5px_5px_0_0_#111]"
61      >
62        <ComposeTextarea
63          aria-label="Message MiMo"
64          placeholder="Ask MiMo anything…"
65          rows={1}
66          className="min-h-[30px] px-0.5 py-1 text-[13.5px] leading-5 placeholder:text-black/40"
67        />
68        <div className="mt-1 flex items-center justify-between">
69          <div className="flex items-center gap-1.5">
70            <button
71              type="button"
72              aria-label="Attach"
73              className="grid h-6 w-6 place-items-center border border-black/40 hover:bg-black/5"
74            >
75              <Plus className="h-3.5 w-3.5" aria-hidden="true" />
76            </button>
77            <span className="font-mono text-[8.5px] uppercase tracking-[0.12em] text-black/55">
78              MiMo-V2.6 · built in public
79            </span>
80          </div>
81          <div className="flex items-center gap-1">
82            <ModelChip
83              tone="light"
84              className="[&>button]:h-6 [&>button]:rounded-none [&>button]:border [&>button]:border-transparent [&>button]:px-1 [&>button]:font-mono [&>button]:text-[9px] [&>button]:uppercase [&>button]:tracking-wider [&>button]:hover:border-black/20"
85            />
86            <ComposeSendButton
87              aria-label="Send message"
88              className="h-7 w-7 rounded-none bg-[#111] text-white hover:bg-black disabled:bg-[#d8d2c6] disabled:text-white disabled:opacity-100"
89              icon={<ArrowUp className="h-3.5 w-3.5" strokeWidth={2.6} />}
90            />
91          </div>
92        </div>
93      </div>
94 
95      <div className="relative mt-3 grid grid-cols-2 gap-2">
96        {[
97          {
98            title: "Xiaomi MiMo-V2.6-Series",
99            sub: "Frontier intelligence, all the modalities, built in public.",
100          },
101          { title: "Xiaomi MiMo-V2.5-TTS Series", sub: "Give your agent a voice. Give it a soul." },
102        ].map(({ title, sub }) => (
103          <div key={title} className="border border-black bg-[#f7f2e8] p-2">
104            <p className="text-[10px] font-bold tracking-tight">{title}</p>
105            <p className="mt-0.5 text-[8.5px] leading-snug text-black/50">{sub}</p>
106          </div>
107        ))}
108      </div>
109    </div>
110  );
111}
112 
113export function MimoCompose(props: ComposeProps) {
114  return (
115    <Root {...props}>
116      <MimoComposeLayout />
117    </Root>
118  );
119}
120