euedujbarrios-ui
Back to components

Inputs

AI Chat Input

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform

Installation

Copy and paste the code into your project.

Accessibility notes

The textarea includes a label for screen readers; connect submit behavior to your own handler.

Preview accent

TypeScript
export function AiChatInput() {
  return (
    <form className="w-[min(28rem,100%)] rounded-lg border border-white/12 bg-[#0b0f14]/70 p-2 shadow-2xl">
      <label htmlFor="ai-message" className="sr-only">Message</label>
      <div className="flex min-w-0 items-end gap-2">
        <textarea
          id="ai-message"
          className="min-h-20 min-w-0 flex-1 resize-none rounded-md border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-[#40E0D0]/40"
          placeholder="Ask the agent to design a flow..."
        />
        <button className="shrink-0 rounded-md bg-[#40E0D0] px-4 py-2 text-sm font-bold text-[#0b0f14]">Send</button>
      </div>
    </form>
  );
}
Usage
<AiChatInput />

Related components

Inputs

Schema Field Row

Beginner

A labeled schema input row for structured prompt builders and data-mapping interfaces.

schemafieldform
View component

Auto-run evals

Start checks whenever a prompt version changes.

Inputs

Toggle Setting Row

Beginner

A settings row with a clear label, helper text, and active toggle state.

togglesettingsform
View component

Use environment variables in production.

Inputs

API Key Field

Beginner

A guarded credential input for settings screens, integrations, and developer tools.

apisecuritysettings
View component