Prompt Bar

Composer with @ sources, / commands, model picker, and dictation.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { PromptBar } from "@aile.sh/elia";

export function Example() {
  return (
    <PromptBar
      variant="Pill"
      sources={[
        { key: "attach", name: "Add photos & files", desc: "Upload from your computer", glyph: "clip", attach: true },
        { key: "metrics", name: "Metrics", desc: "Latency & error rates", glyph: "chart" },
        { key: "runbooks", name: "Runbooks", desc: "Incident playbooks", glyph: "layers" },
        { key: "slack", name: "Slack", desc: "Read and manage Slack", brand: "slack", connect: true },
      ]}
      commands={[
        { key: "triage", name: "/triage", desc: "Rank open incidents" },
        { key: "postmortem", name: "/postmortem", desc: "Draft a postmortem" },
      ]}
      models={[
        { key: "atlas-2", name: "Atlas 2", tag: "Flagship" },
        { key: "scout-1", name: "Scout 1", tag: "Fast" },
      ]}
      onSend={({ text, attachments, model }) =>
        console.log("send", { text, attachments, model })
      }
      onModelChange={(modelKey) => console.log("model", modelKey)}
      onConnect={(sourceKey, connected) => console.log(sourceKey, connected)}
    />
  );
}

— elia design system · MIT · primitives · https://github.com/aile-sh/elia