1"use client";
2 
3import * as React from "react";
4import { ArrowUp, Globe, Plus, Wrench } 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: "mistral",
17  maxWidth: "max-w-none",
18  placeholder: "Ask Le Chat",
19  models: [
20    { id: "mistral-large-3", name: "Mistral Large 3", hint: "Flagship" },
21    { id: "mistral-medium-3", name: "Mistral Medium 3", hint: "Balanced" },
22    { id: "magistral", name: "Magistral", hint: "Reasoning" },
23  ],
24  initialToggles: { search: false, tools: false },
25});
26 
27function MistralMark({ className }: { className?: string }) {
28  return (
29    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
30      <defs>
31        <linearGradient id="mistral-m" x1="2" y1="20" x2="22" y2="4" gradientUnits="userSpaceOnUse">
32          <stop stopColor="#ff6b2c" />
33          <stop offset="0.55" stopColor="#ff4d00" />
34          <stop offset="1" stopColor="#ffb800" />
35        </linearGradient>
36      </defs>
37      <path d="M2 20V8h4v4h3V5h4v5h3V7h4v13h-4v-5h-3v5H9v-4H6v4H2Z" fill="url(#mistral-m)" />
38    </svg>
39  );
40}
41 
42/** Mistral Le Chat: bone-white workspace, pixel-M accents, capsule prompt bar. */
43function MistralComposeLayout() {
44  const { toggles, toggle } = useCompose();
45  return (
46    <div className="flex min-h-[400px] w-full flex-col bg-[#f7f7f4] px-6 pb-6 pt-4 text-[13px] text-[#1c1c1c]">
47      <div className="flex items-center gap-2.5 border-b border-black/[0.07] pb-3">
48        <MistralMark className="h-5 w-5" />
49        <span className="text-[14px] font-semibold tracking-tight">Mistral</span>
50        <span className="rounded bg-[#ff4d00]/10 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-[#d94300]">
51          Le Chat
52        </span>
53        <div className="ml-auto flex items-center gap-2">
54          <button type="button" className="text-[11px] text-black/60">
55            Sign in
56          </button>
57          <button
58            type="button"
59            className="rounded-full bg-[#141414] px-3.5 py-1.5 text-[11px] font-medium text-white"
60          >
61            Start building
62          </button>
63        </div>
64      </div>
65 
66      <div className="my-auto flex w-full flex-col items-center pt-5">
67        <MistralMark className="h-10 w-10" />
68        <h1 className="mt-3 text-center text-[25px] font-normal tracking-[-0.02em]">
69          What can I help you with?
70        </h1>
71 
72        <div
73          data-agent-id="compose-card"
74          className="mt-5 flex w-full max-w-[480px] items-center gap-2 rounded-full border border-black/[0.09] bg-white py-1.5 pl-4 pr-1.5 shadow-[0_2px_10px_rgba(0,0,0,0.04)] transition-[border-color,box-shadow] duration-200 focus-within:border-black/25 focus-within:shadow-[0_4px_18px_rgba(255,77,0,0.12)]"
75        >
76          <button
77            type="button"
78            aria-label="Attach"
79            className="grid h-7 w-7 shrink-0 place-items-center rounded-full text-black/65 hover:bg-black/5"
80          >
81            <Plus className="h-[18px] w-[18px]" aria-hidden="true" />
82          </button>
83          <ComposeTextarea
84            aria-label="Ask Le Chat"
85            placeholder="Ask Le Chat"
86            rows={1}
87            className="min-w-0 flex-1 px-1 py-1.5 text-[14px] leading-5 placeholder:text-black/35"
88          />
89          <div className="flex shrink-0 items-center gap-1">
90            <button
91              type="button"
92              aria-label="Toggle web search"
93              aria-pressed={toggles.search}
94              onClick={() => toggle("search")}
95              className="grid h-7 w-7 place-items-center rounded-full text-black/45 hover:bg-black/5 aria-pressed:bg-[#ff4d00]/10 aria-pressed:text-[#d94300]"
96            >
97              <Globe className="h-3.5 w-3.5" aria-hidden="true" />
98            </button>
99            <button
100              type="button"
101              aria-label="Toggle tools"
102              aria-pressed={toggles.tools}
103              onClick={() => toggle("tools")}
104              className="grid h-7 w-7 place-items-center rounded-full text-black/45 hover:bg-black/5 aria-pressed:bg-[#ff4d00]/10 aria-pressed:text-[#d94300]"
105            >
106              <Wrench className="h-3.5 w-3.5" aria-hidden="true" />
107            </button>
108            <ModelChip
109              tone="light"
110              className="[&>button]:h-7 [&>button]:px-1.5 [&>button]:text-[11px] [&>button]:text-black/55 [&>button]:hover:bg-black/5"
111            />
112            <ComposeSendButton
113              aria-label="Send message"
114              className="h-8 w-8 bg-[#141414] text-white hover:bg-[#2a2a2a] disabled:bg-[#e4e4de] disabled:text-black/30 disabled:opacity-100"
115              icon={<ArrowUp className="h-[16px] w-[16px]" strokeWidth={2.4} />}
116            />
117          </div>
118        </div>
119 
120        <div className="mt-4 flex flex-wrap items-center justify-center gap-2">
121          {["Write a memo", "Debug this code", "Analyze a document"].map((label) => (
122            <button
123              key={label}
124              type="button"
125              className="rounded-full border border-black/[0.08] bg-white px-3 py-1.5 text-[10.5px] text-black/60 hover:bg-[#ff4d00]/5"
126            >
127              {label}
128            </button>
129          ))}
130        </div>
131      </div>
132 
133      <ComposeDisclaimer className="mt-0 text-[9.5px] text-black/40">
134        Mistral AI can make mistakes. Check important info.
135      </ComposeDisclaimer>
136    </div>
137  );
138}
139 
140export function MistralCompose(props: ComposeProps) {
141  return (
142    <Root {...props}>
143      <MistralComposeLayout />
144    </Root>
145  );
146}
147