Prompt Suggestion

A row of clickable suggestion chips for a PromptInput. Purely presentational — no Morphos equivalent.

Installation

npx kosmesis add prompt-suggestion

pnpm dlx kosmesis add prompt-suggestion

yarn dlx kosmesis add prompt-suggestion

bunx kosmesis add prompt-suggestion

Copy and paste the following code into your project.

prompt-suggestion.tsx

import { StatelessComponent } from "@praxisjs/core";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { cn } from "@/lib/utils";export interface PromptSuggestionsProps {  class?: string;  children?: Children;}@Component()export class PromptSuggestions extends StatelessComponent<PromptSuggestionsProps> {  render() {    const { class: cls, children } = this.props;    return (      <div data-slot="prompt-suggestions" class={cn("flex flex-wrap gap-2", cls)}>        {children}      </div>    );  }}export interface PromptSuggestionProps {  onClick?: () => void;  class?: string;  children?: Children;}@Component()export class PromptSuggestion extends StatelessComponent<PromptSuggestionProps> {  render() {    const { onClick, class: cls, children } = this.props;    return (      <button        type="button"        class={cn(          "rounded-full border bg-background px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground",          cls,        )}        onClick={onClick}      >        {children}      </button>    );  }}

Install the following dependencies:

npm install @praxisjs/css

pnpm add @praxisjs/css

yarn add @praxisjs/css

bun add @praxisjs/css

Copy and paste the following code into your project.

prompt-suggestion.tsx

import { StatelessComponent } from "@praxisjs/core";import { cx, Stylesheet, Styled, tokenVars } from "@praxisjs/css";import { Component } from "@praxisjs/decorators";import type { Children } from "@praxisjs/shared";import { KosmesisTokens } from "@/lib/kosmesis-theme";const t = tokenVars(KosmesisTokens);class PromptSuggestionStyles extends Stylesheet {  $root = this.css({ display: "flex", flexWrap: "wrap", gap: "0.5rem" });  $chip = this.css({    borderRadius: "9999px",    border: `1px solid ${t.border}`,    backgroundColor: t.background,    padding: "0.375rem 0.75rem",    fontSize: "0.75rem",    color: t.mutedForeground,    cursor: "pointer",  }).on("&:hover", { backgroundColor: t.accent, color: t.accentForeground });}export interface PromptSuggestionsProps {  class?: string;  children?: Children;}@Component()export class PromptSuggestions extends StatelessComponent<PromptSuggestionsProps> {  @Styled(PromptSuggestionStyles) $s!: PromptSuggestionStyles;  render() {    const { class: cls, children } = this.props;    return (      <div data-slot="prompt-suggestions" class={cx(this.$s.$root, cls)}>        {children}      </div>    );  }}export interface PromptSuggestionProps {  onClick?: () => void;  class?: string;  children?: Children;}@Component()export class PromptSuggestion extends StatelessComponent<PromptSuggestionProps> {  @Styled(PromptSuggestionStyles) $s!: PromptSuggestionStyles;  render() {    const { onClick, class: cls, children } = this.props;    return (      <button type="button" class={cx(this.$s.$chip, cls)} onClick={onClick}>        {children}      </button>    );  }}

Examples

Open in Storybook

About

Purely presentational — no Morphos equivalent. Pairs with PromptInput: each PromptSuggestion's onClick typically fills the composer with its own text.

Usage

import { PromptSuggestion, PromptSuggestions } from "@/components/ui/prompt-suggestion";

<PromptSuggestions>
  <PromptSuggestion onClick={() => setValue("Summarize this")}>Summarize this</PromptSuggestion>
  <PromptSuggestion onClick={() => setValue("Explain like I'm 5")}>Explain like I'm 5</PromptSuggestion>
</PromptSuggestions>

Props

PromptSuggestions accepts class and children only. PromptSuggestion accepts onClick, class, and children.