add docs

Author: omaroubari

apps/docs/content/components/(chatbot)/prompt-input.mdx

@@ -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 />`
@@ -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

packages/examples/src/prompt-input-richtext.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  PromptInput,
+  PromptInputBody,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputMessage,
+  PromptInputProvider,
+  PromptInputRichtext,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} from "@repo/elements/prompt-input";
+import { GlobeIcon, MicIcon, PaperclipIcon } from "lucide-react";
+
+const handleSubmit = (message: PromptInputMessage) => {
+  const hasText = Boolean(message.text);
+  const hasAttachments = Boolean(message.files?.length);
+
+  if (!(hasText || hasAttachments)) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log("Submitting message:", message);
+};
+
+const Example = () => (
+  <PromptInputProvider initialInput="This **input field** supports *richtext* via the [Lexical editor](https://lexical.dev/)">
+    <PromptInput onSubmit={handleSubmit}>
+      <PromptInputBody>
+        <PromptInputRichtext />
+      </PromptInputBody>
+      <PromptInputFooter>
+        <PromptInputTools>
+          <PromptInputButton tooltip="Attach files">
+            <PaperclipIcon size={16} />
+          </PromptInputButton>
+          <PromptInputButton
+            tooltip={{ content: "Search the web", shortcut: "⌘K" }}
+          >
+            <GlobeIcon size={16} />
+          </PromptInputButton>
+          <PromptInputButton
+            tooltip={{ content: "Voice input", shortcut: "⌘M", side: "bottom" }}
+          >
+            <MicIcon size={16} />
+          </PromptInputButton>
+        </PromptInputTools>
+        <PromptInputSubmit />
+      </PromptInputFooter>
+    </PromptInput>
+  </PromptInputProvider>
+);
+
+export default Example;