Voice input and speech playback are optional integrations requiring configured endpoints and browser permission. The catalog demonstrates local message composition.

Usage

tsx

"use client";

import { PromptInput } from "@/components/agents/prompt-input";

export default function Example() {
  return (
    <>
      <PromptInput placeholder="Ask your assistant…" onSubmit={(message) => {}} models={[{ value: "auto", label: "Auto" }]} defaultModel="auto" />
    </>
  );
}

Included variants

Draft
Model menu
Action menu
Busy
Stop

In Ciele

Use the workspace imports shown above inside Ciele. App components use the shared Tailwind tokens in globals.css. For another project, adapt the imports and bring the dependencies listed in the source.

Voice input and speech playback are optional integrations requiring configured endpoints and browser permission. The catalog demonstrates local message composition.

Source files

apps/web/src/components/agents/prompt-input.tsx
apps/web/src/components/chat/composer-pulse.tsx
apps/web/src/components/chat/voice-input-button.tsx
apps/web/src/components/chat/speech-playback.tsx

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousData table

NextStudy exercise

BlocksChat composer

AI & chat

Chat composer

A complete message-entry control with model and action menus, submit and stop states.

DraftModel menuAction menuBusyStop

Live components with example content. Try their controls, or switch the theme and palette.

Voice input and speech playback are optional integrations requiring configured endpoints and browser permission. The catalog demonstrates local message composition.

Usage

tsx

"use client";

import { PromptInput } from "@/components/agents/prompt-input";

export default function Example() {
  return (
    <>
      <PromptInput placeholder="Ask your assistant…" onSubmit={(message) => {}} models={[{ value: "auto", label: "Auto" }]} defaultModel="auto" />
    </>
  );
}

Included variants

Draft
Model menu
Action menu
Busy
Stop

In Ciele

Voice input and speech playback are optional integrations requiring configured endpoints and browser permission. The catalog demonstrates local message composition.

Source files

apps/web/src/components/agents/prompt-input.tsx
apps/web/src/components/chat/composer-pulse.tsx
apps/web/src/components/chat/voice-input-button.tsx
apps/web/src/components/chat/speech-playback.tsx

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousData table

NextStudy exercise