Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/docs/app/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@

@source "../**/*.{ts,tsx,mdx}";
@source "../node_modules/@repo/*/**/*.{ts,tsx}";
@source "../../../packages/elements/src/**/*.{ts,tsx}";
61 changes: 61 additions & 0 deletions apps/docs/content/components/(chatbot)/prompt-input.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,14 @@ Buttons can display tooltips with optional keyboard shortcut hints. Hover over t

<Preview path="prompt-input-tooltip" />

### Richtext input

`PromptInputRichtext` is an alternative text input to `PromptInputTextarea` when you want an extensible composer-style input with markdown shortcuts, autolink support, and Lexical plugins.

<Preview path="prompt-input-richtext" />

`PromptInputRichtext` integrates with `PromptInputProvider`, so the editor content can stay in sync with external state. On submit, the rich text content is serialized back to markdown and returned as `message.text`.

## Props

### `<PromptInput />`
Expand Down Expand Up @@ -330,6 +338,59 @@ Buttons can display tooltips with optional keyboard shortcut hints. Hover over t
}}
/>

### `<PromptInputRichtext />`

Lexical-powered rich text input for `PromptInput`. It supports markdown import/export, URL autolinking, keyboard submit behavior, attachment paste, and custom Lexical plugins.

<TypeTable
type={{
editorConfig: {
description:
"Optional Lexical initial config merged with the default PromptInput configuration.",
type: "InitialConfigType",
},
autoFocus: {
description: "Whether to focus the editor on mount.",
type: "boolean",
default: "true",
},
onChange: {
description:
"Called when the Lexical editor state changes. In provider mode, markdown text is also synced to controller state.",
type: "(editorState: EditorState) => void",
},
onKeyDown: {
description:
"Optional keydown handler attached to the editor root element.",
type: "(event: KeyboardEvent) => void",
},
placeholder: {
description: "Placeholder text shown when the editor is empty.",
type: "string",
default: '"What would you like to know?"',
},
placeholderClassName: {
description: "Additional class names for the placeholder element.",
type: "string",
},
className: {
description: "Additional class names for the content editable element.",
type: "string",
},
children: {
description: "Optional Lexical plugins rendered inside the composer.",
type: "React.ReactNode",
},
"...props": {
description:
"Any other props are spread to the underlying Lexical `ContentEditable` element.",
type: 'Omit<ContentEditableProps, "placeholder">',
},
}}
/>

`PromptInputRichtext` submits on `Enter`, inserts a newline on `Shift+Enter`, removes the last attachment with `Backspace` when empty, and converts pasted files into prompt attachments.

### `<PromptInputFooter />`

<TypeTable
Expand Down
Loading