newOS for Developers

PromptSuggestion

input65 lines

Clickable prompt suggestion chips that send pre-written prompts to AI agents. Used to provide quick-start conversation options.

Source Path

apps/web/Components/PromptSuggestion.tsx

Package

@newos/web

Exports

PromptSuggestion

A single clickable prompt chip.

PromptSuggestion: IOView<{
  prompt: string;    // The text to display and send
  agent: string;     // Agent username to prefix (e.g., "sammy.agent")
}>

PromptSuggestions

A container that renders multiple prompt chips in a flex row.

PromptSuggestions: IOView<{
  prompts: string[];  // Array of prompt texts
  agent: string;      // Agent username to prefix all prompts
}>

Data Flow & API Calls

Reads (Input)

current() — Gets current authenticated user

router.query.id — Gets the current folder ID from URL

Writes (Output)

createPostMultiple() — Creates a new post with the prompt content

Called with: { content: finalPrompt, foldersToAttach: [id] }

Hooks Used

useIsWideScreen() — Responsive layout detection

useRouter() — Next.js router for folder ID

Key Features

Agent Prefix Handling

If the prompt doesn't start with /, automatically prefixes with/{agent} . If prompt starts with /, uses it as-is.

Default Agent

Uses "sammy.agent" as the default agent if none is specified.

Click Prevention

Uses e.preventDefault() and e.stopPropagation() to prevent event bubbling when clicking suggestions.

Flex Layout

PromptSuggestions renders chips in a flex row with wrap and 10px gap, using justify-content: space-between.

Edge Cases & Gotchas

Slash Command Detection — Only prompts starting with / bypass the agent prefix. The .trim().startsWith('/') check is performed.

Empty Prompts Array — PromptSuggestions safely handles null/undefined with (prompts || []).

CSS Class — Uses prompt-suggestion CSS class for styling. Styling should be defined in global styles or parent component.

Related Components

ChatInput post.ts (createPostMultiple)useIsWideScreen

View source on GitHub →