{
return { getDisplayMedia, pause, play, stopTrack, toBlob };
};
+const getRichtextEditor = (container: HTMLElement) => {
+ const editor = container.querySelector('[contenteditable="true"]');
+ expect(editor).toBeInstanceOf(HTMLElement);
+ return editor as HTMLElement;
+};
+
describe("promptInput", () => {
it("renders form", () => {
setupPromptInputTests();
@@ -759,6 +768,468 @@ describe("promptInputTextarea", () => {
});
});
+describe("promptInputRichtext", () => {
+ it("renders a contenteditable input with placeholder", () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const { container } = render(
+
+
+
+
+
+ );
+
+ expect(screen.getByText("Ask anything")).toBeInTheDocument();
+ expect(getRichtextEditor(container)).toHaveAttribute(
+ "aria-placeholder",
+ "Ask anything"
+ );
+ });
+
+ it("submits richtext on Enter without provider and clears the editor", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("Hello from Lexical");
+
+ expect(editor).toHaveTextContent("Hello from Lexical");
+
+ await user.keyboard("{Enter}");
+
+ await vi.waitFor(() => {
+ expect(onSubmit).toHaveBeenCalledOnce();
+ });
+
+ const [[message]] = onSubmit.mock.calls;
+ expect(message).toHaveProperty("text", "Hello from Lexical");
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("");
+ });
+ });
+
+ it("submits richtext on Enter with provider and clears the editor", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("Hello with provider");
+ await user.keyboard("{Enter}");
+
+ await vi.waitFor(() => {
+ expect(onSubmit).toHaveBeenCalledOnce();
+ });
+
+ const [[message]] = onSubmit.mock.calls;
+ expect(message).toHaveProperty("text", "Hello with provider");
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("");
+ });
+ });
+
+ it("does not submit on Shift+Enter", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("Line 1");
+ await user.keyboard("{Shift>}{Enter}{/Shift}");
+
+ expect(onSubmit).not.toHaveBeenCalled();
+ });
+
+ it("does not submit on Enter during IME composition", () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ editor.focus();
+
+ const enterKeyDuringComposition = new KeyboardEvent("keydown", {
+ bubbles: true,
+ cancelable: true,
+ key: "Enter",
+ });
+
+ Object.defineProperty(enterKeyDuringComposition, "isComposing", {
+ value: true,
+ writable: false,
+ });
+
+ editor.dispatchEvent(enterKeyDuringComposition);
+
+ expect(onSubmit).not.toHaveBeenCalled();
+ });
+
+ it("renders bold formatting after markdown shortcut resolves", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("**bold** ");
+
+ await vi.waitFor(() => {
+ const boldNode = editor.querySelector("strong, b, span.font-semibold");
+ expect(boldNode).toHaveTextContent("bold");
+ expect(editor).toHaveTextContent("bold");
+ expect(editor.textContent).not.toContain("**");
+ });
+ });
+
+ it("renders italic formatting after underscore markdown shortcut resolves", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("_italic_ ");
+
+ await vi.waitFor(() => {
+ const italicNode = editor.querySelector("em, i, span.italic");
+ expect(italicNode).toHaveTextContent("italic");
+ expect(editor).toHaveTextContent("italic");
+ expect(editor.textContent).not.toContain("_italic_");
+ });
+ });
+
+ it("renders italic formatting after asterisk markdown shortcut resolves", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("*italic* ");
+
+ await vi.waitFor(() => {
+ const italicNode = editor.querySelector("em, i, span.italic");
+ expect(italicNode).toHaveTextContent("italic");
+ expect(editor).toHaveTextContent("italic");
+ expect(editor.textContent).not.toContain("*italic*");
+ });
+ });
+
+ it("syncs initialInput into the richtext editor", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+
+ const { container } = render(
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("Initial provider value");
+ });
+ });
+
+ it("renders provider markdown initialInput as styled text instead of literal markers", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+
+ const { container } = render(
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+
+ await vi.waitFor(() => {
+ const boldNode = editor.querySelector("strong, b, span.font-semibold");
+ expect(boldNode).toHaveTextContent("hello");
+ expect(editor).toHaveTextContent("hello");
+ expect(editor.textContent).not.toContain("**hello**");
+ });
+ });
+
+ it("syncs provider state in both directions", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const ProviderProbe = () => {
+ const controller = usePromptInputController();
+ return (
+ <>
+
+ {controller.textInput.value}
+
+ );
+ };
+
+ const { container } = render(
+
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+
+ await user.click(screen.getByRole("button", { name: "Set Input" }));
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("Updated externally");
+ });
+
+ await user.click(editor);
+ await user.keyboard("!");
+
+ await vi.waitFor(() => {
+ expect(screen.getByTestId("provider-value")).toHaveTextContent(
+ "Updated externally!"
+ );
+ });
+ });
+
+ it("preserves richtext content when async submit rejects", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn(() => Promise.reject(new Error("submit failed")));
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("Keep this content");
+ await user.keyboard("{Enter}");
+
+ await vi.waitFor(() => {
+ expect(onSubmit).toHaveBeenCalledOnce();
+ });
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("Keep this content");
+ });
+ });
+
+ it("submits typed URLs as markdown links", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ await user.click(editor);
+ await user.keyboard("https://example.com ");
+
+ await vi.waitFor(() => {
+ const linkNode = editor.querySelector("a");
+ expect(linkNode).toHaveTextContent("https://example.com");
+ });
+
+ await user.keyboard("{Enter}");
+
+ await vi.waitFor(() => {
+ expect(onSubmit).toHaveBeenCalledOnce();
+ });
+
+ const [[message]] = onSubmit.mock.calls;
+ expect(message.text).toContain("[https://example.com](https://example.com)");
+ });
+
+ it("clears richtext editor when provider textInput.clear() is called", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const ProviderProbe = () => {
+ const controller = usePromptInputController();
+ return (
+ <>
+
+ {controller.textInput.value}
+
+ );
+ };
+
+ const { container } = render(
+
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("Initial text");
+ });
+
+ await user.click(screen.getByRole("button", { name: "Clear Input" }));
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("");
+ });
+
+ await vi.waitFor(() => {
+ expect(screen.getByTestId("provider-value")).toHaveTextContent("");
+ });
+ });
+
+ it("clears richtext editor via external setInput to empty string", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+ const user = userEvent.setup();
+
+ const ProviderProbe = () => {
+ const controller = usePromptInputController();
+ return (
+ <>
+
+
+ );
+ };
+
+ const { container } = render(
+
+
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("Some content");
+ });
+
+ await user.click(screen.getByRole("button", { name: "Clear Input" }));
+
+ await vi.waitFor(() => {
+ expect(editor).toHaveTextContent("");
+ });
+ });
+});
+
describe("promptInputTools", () => {
it("renders tools", () => {
setupPromptInputTests();
@@ -1997,6 +2468,7 @@ describe("paste functionality", () => {
// Mock clipboardData items
pasteEvent.clipboardData = {
+ getData: () => "",
items: [
{
getAsFile: () => file,
@@ -2014,6 +2486,53 @@ describe("paste functionality", () => {
});
});
+ it("adds files from clipboard in richtext editor", async () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+
+ const AttachmentConsumer = () => {
+ const attachments = usePromptInputAttachments();
+ return {attachments.files.length}
;
+ };
+
+ const { container } = render(
+
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ editor.focus();
+
+ const file = new File(["image"], "test.png", { type: "image/png" });
+ const pasteEvent = new Event("paste", {
+ bubbles: true,
+ cancelable: true,
+ // oxlint-disable-next-line typescript-eslint(no-explicit-any)
+ }) as any;
+
+ pasteEvent.clipboardData = {
+ getData: () => "",
+ items: [
+ {
+ getAsFile: () => file,
+ kind: "file",
+ },
+ ],
+ };
+
+ await act(() => {
+ editor.dispatchEvent(pasteEvent);
+ });
+
+ await vi.waitFor(() => {
+ expect(screen.getByTestId("count")).toHaveTextContent("1");
+ });
+ });
+
it("handles paste with no files", () => {
setupPromptInputTests();
const onSubmit = vi.fn();
@@ -2036,11 +2555,36 @@ describe("paste functionality", () => {
cancelable: true,
// oxlint-disable-next-line typescript-eslint(no-explicit-any)
}) as any;
- pasteEvent.clipboardData = { items: [] };
+ pasteEvent.clipboardData = { getData: () => "", items: [] };
// Should not throw
expect(() => textarea.dispatchEvent(pasteEvent)).not.toThrow();
});
+
+ it("handles richtext paste with no files", () => {
+ setupPromptInputTests();
+ const onSubmit = vi.fn();
+
+ const { container } = render(
+
+
+
+
+
+ );
+
+ const editor = getRichtextEditor(container);
+ editor.focus();
+
+ const pasteEvent = new Event("paste", {
+ bubbles: true,
+ cancelable: true,
+ // oxlint-disable-next-line typescript-eslint(no-explicit-any)
+ }) as any;
+ pasteEvent.clipboardData = { getData: () => "", items: [] };
+
+ expect(() => editor.dispatchEvent(pasteEvent)).not.toThrow();
+ });
});
describe("promptInputAttachment", () => {
@@ -3155,7 +3699,9 @@ describe("promptInputSelect components", () => {
// Mock hasPointerCapture and releasePointerCapture for select
vi.spyOn(Element.prototype, "hasPointerCapture").mockReturnValue(false);
- vi.spyOn(Element.prototype, "releasePointerCapture").mockImplementation();
+ vi
+ .spyOn(Element.prototype, "releasePointerCapture")
+ .mockImplementation((_pointerId: number) => {});
render(
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 0ac0705f..39201241 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -12,6 +12,9 @@
"test:coverage": "vitest run --coverage"
},
"dependencies": {
+ "@lexical/link": "^0.42.0",
+ "@lexical/markdown": "^0.42.0",
+ "@lexical/react": "^0.42.0",
"@radix-ui/react-use-controllable-state": "^1.2.2",
"@repo/shadcn-ui": "workspace:*",
"@rive-app/react-webgl2": "^4.26.1",
@@ -24,6 +27,7 @@
"ansi-to-react": "^6.2.6",
"class-variance-authority": "^0.7.1",
"katex": "^0.16.28",
+ "lexical": "^0.42.0",
"lucide-react": "^0.577.0",
"media-chrome": "^4.17.2",
"motion": "^12.26.2",
diff --git a/packages/elements/src/prompt-input.tsx b/packages/elements/src/prompt-input.tsx
index 412c846d..88d28418 100644
--- a/packages/elements/src/prompt-input.tsx
+++ b/packages/elements/src/prompt-input.tsx
@@ -50,6 +50,36 @@ import {
XIcon,
} from "lucide-react";
import { nanoid } from "nanoid";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import type { InitialConfigType } from "@lexical/react/LexicalComposer";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import type { ContentEditableProps } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+ $convertFromMarkdownString,
+ $convertToMarkdownString,
+ LINK,
+ TEXT_FORMAT_TRANSFORMERS,
+ TEXT_MATCH_TRANSFORMERS,
+} from "@lexical/markdown";
+import { $isLinkNode, AutoLinkNode, LinkNode } from "@lexical/link";
+import {
+ $getRoot,
+ COMMAND_PRIORITY_LOW,
+ KEY_BACKSPACE_COMMAND,
+ KEY_ENTER_COMMAND,
+ TextNode,
+} from "lexical";
+import type { EditorState, LexicalEditor, LexicalNode } from "lexical";
import type {
ChangeEvent,
ChangeEventHandler,
@@ -174,6 +204,70 @@ const captureScreenshot = async (): Promise => {
}
};
+const syncEditorTextContent = (editor: LexicalEditor | null, value: string) => {
+ if (!editor) {
+ return;
+ }
+ editor.update(() => {
+ const root = $getRoot();
+ const currentValue = $convertToMarkdownString(PROMPT_INPUT_TRANSFORMERS);
+
+ if (value === currentValue) {
+ return;
+ }
+
+ root.clear();
+
+ if (value) {
+ $convertFromMarkdownString(value, PROMPT_INPUT_TRANSFORMERS);
+ }
+
+ root.selectEnd();
+ });
+};
+
+const URL_MATCHER =
+ /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const AUTO_LINK_MATCHERS = [
+ (text: string) => {
+ const match = URL_MATCHER.exec(text);
+ if (match === null) {
+ return null;
+ }
+ const [fullMatch] = match;
+ return {
+ index: match.index,
+ length: fullMatch.length,
+ text: fullMatch,
+ url: fullMatch.startsWith("http") ? fullMatch : `https://${fullMatch}`,
+ // attributes: { rel: 'noreferrer', target: '_blank' }, // Optional link attributes
+ };
+ },
+];
+
+const LINK_TRANSFORMER = {
+ ...LINK,
+ export: (node: LexicalNode, exportChildren: (node: LinkNode) => string) => {
+ if (!$isLinkNode(node)) {
+ return null;
+ }
+
+ const textContent = exportChildren(node);
+ const title = node.getTitle();
+
+ return title
+ ? `[${textContent}](${node.getURL()} "${title.replaceAll(/([\\"])/g, "\\$1")}")`
+ : `[${textContent}](${node.getURL()})`;
+ },
+};
+
+const PROMPT_INPUT_TRANSFORMERS = [
+ LINK_TRANSFORMER,
+ ...TEXT_FORMAT_TRANSFORMERS,
+ ...TEXT_MATCH_TRANSFORMERS,
+];
+
// ============================================================================
// Provider Context & Types
// ============================================================================
@@ -193,28 +287,41 @@ export interface TextInputContext {
clear: () => void;
}
+interface PromptInputSubmitAdapter {
+ getText: () => string;
+ clear: () => void;
+ setText?: (value: string) => void;
+}
+
export interface PromptInputControllerProps {
textInput: TextInputContext;
attachments: AttachmentsContext;
/** INTERNAL: Allows PromptInput to register its file textInput + "open" callback */
__registerFileInput: (
ref: RefObject,
- open: () => void
+ open: () => void,
) => void;
}
+interface PromptInputSubmitAdapterValue {
+ registerSubmitAdapter: (adapter: PromptInputSubmitAdapter | null) => void;
+}
+
+const PromptInputSubmitAdapterContext =
+ createContext(null);
+
const PromptInputController = createContext(
- null
+ null,
);
const ProviderAttachmentsContext = createContext(
- null
+ null,
);
export const usePromptInputController = () => {
const ctx = useContext(PromptInputController);
if (!ctx) {
throw new Error(
- "Wrap your component inside to use usePromptInputController()."
+ "Wrap your component inside to use usePromptInputController().",
);
}
return ctx;
@@ -228,7 +335,7 @@ export const useProviderAttachments = () => {
const ctx = useContext(ProviderAttachmentsContext);
if (!ctx) {
throw new Error(
- "Wrap your component inside to use useProviderAttachments()."
+ "Wrap your component inside to use useProviderAttachments().",
);
}
return ctx;
@@ -316,7 +423,7 @@ export const PromptInputProvider = ({
}
}
},
- []
+ [],
);
const openFileDialog = useCallback(() => {
@@ -332,7 +439,7 @@ export const PromptInputProvider = ({
openFileDialog,
remove,
}),
- [attachmentFiles, add, remove, clear, openFileDialog]
+ [attachmentFiles, add, remove, clear, openFileDialog],
);
const __registerFileInput = useCallback(
@@ -340,7 +447,7 @@ export const PromptInputProvider = ({
fileInputRef.current = ref.current;
openRef.current = open;
},
- []
+ [],
);
const controller = useMemo(
@@ -353,7 +460,7 @@ export const PromptInputProvider = ({
value: textInput,
},
}),
- [textInput, clearInput, attachments, __registerFileInput]
+ [textInput, clearInput, attachments, __registerFileInput],
);
return (
@@ -378,7 +485,7 @@ export const usePromptInputAttachments = () => {
const context = local ?? provider;
if (!context) {
throw new Error(
- "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider"
+ "usePromptInputAttachments must be used within a PromptInput or PromptInputProvider",
);
}
return context;
@@ -402,7 +509,7 @@ export const usePromptInputReferencedSources = () => {
const ctx = useContext(LocalReferencedSourcesContext);
if (!ctx) {
throw new Error(
- "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider"
+ "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider",
);
}
return ctx;
@@ -425,7 +532,7 @@ export const PromptInputActionAddAttachments = ({
e.preventDefault();
attachments.openFileDialog();
},
- [attachments]
+ [attachments],
);
return (
@@ -470,7 +577,7 @@ export const PromptInputActionAddScreenshot = ({
throw error;
}
},
- [onSelect, attachments]
+ [onSelect, attachments],
);
return (
@@ -507,7 +614,7 @@ export type PromptInputProps = Omit<
}) => void;
onSubmit: (
message: PromptInputMessage,
- event: FormEvent
+ event: FormEvent,
) => void | Promise;
};
@@ -572,7 +679,7 @@ export const PromptInput = ({
return f.type === pattern;
});
},
- [accept]
+ [accept],
);
const addLocal = useCallback(
@@ -623,7 +730,7 @@ export const PromptInput = ({
return [...prev, ...next];
});
},
- [matchesAccept, maxFiles, maxFileSize, onError]
+ [matchesAccept, maxFiles, maxFileSize, onError],
);
const removeLocal = useCallback(
@@ -635,7 +742,7 @@ export const PromptInput = ({
}
return prev.filter((file) => file.id !== id);
}),
- []
+ [],
);
// Wrapper that validates files before calling provider's add
@@ -679,7 +786,7 @@ export const PromptInput = ({
controller?.attachments.add(capped);
}
},
- [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller]
+ [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller],
);
const clearAttachments = useCallback(
@@ -694,12 +801,12 @@ export const PromptInput = ({
}
return [];
}),
- [usingProvider, controller]
+ [usingProvider, controller],
);
const clearReferencedSources = useCallback(
() => setReferencedSources([]),
- []
+ [],
);
const add = usingProvider ? addWithProviderValidation : addLocal;
@@ -797,7 +904,7 @@ export const PromptInput = ({
}
}
},
- [usingProvider]
+ [usingProvider],
);
const handleChange: ChangeEventHandler = useCallback(
@@ -808,7 +915,7 @@ export const PromptInput = ({
// Reset input value to allow selecting files that were previously removed
event.currentTarget.value = "";
},
- [add]
+ [add],
);
const attachmentsCtx = useMemo(
@@ -820,7 +927,7 @@ export const PromptInput = ({
openFileDialog,
remove,
}),
- [files, add, remove, clearAttachments, openFileDialog]
+ [files, add, remove, clearAttachments, openFileDialog],
);
const refsCtx = useMemo(
@@ -838,7 +945,16 @@ export const PromptInput = ({
},
sources: referencedSources,
}),
- [referencedSources, clearReferencedSources]
+ [referencedSources, clearReferencedSources],
+ );
+
+ const promptSubmitAdapterRef = useRef(null);
+
+ const registerSubmitAdapter = useCallback(
+ (adapter: PromptInputSubmitAdapter | null) => {
+ promptSubmitAdapterRef.current = adapter;
+ },
+ [],
);
const handleSubmit: FormEventHandler = useCallback(
@@ -846,13 +962,18 @@ export const PromptInput = ({
event.preventDefault();
const form = event.currentTarget;
- const text = usingProvider
- ? controller.textInput.value
- : (() => {
- const formData = new FormData(form);
- return (formData.get("message") as string) || "";
- })();
-
+ const adapter = promptSubmitAdapterRef.current;
+ let text = "";
+ if (adapter) {
+ text = adapter.getText();
+ } else if (usingProvider) {
+ text = controller.textInput.value;
+ } else {
+ text = (() => {
+ const formData = new FormData(form);
+ return (formData.get("message") as string) || "";
+ })();
+ }
// Reset form immediately after capturing text to avoid race condition
// where user input during async blob conversion would be lost
if (!usingProvider) {
@@ -872,7 +993,7 @@ export const PromptInput = ({
};
}
return item;
- })
+ }),
);
const result = onSubmit({ files: convertedFiles, text }, event);
@@ -882,24 +1003,32 @@ export const PromptInput = ({
try {
await result;
clear();
- if (usingProvider) {
+ adapter?.clear();
+ if (!adapter && usingProvider) {
controller.textInput.clear();
}
+ if (!adapter && !usingProvider) {
+ form.reset();
+ }
} catch {
// Don't clear on error - user may want to retry
}
} else {
// Sync function completed without throwing, clear inputs
clear();
- if (usingProvider) {
+ adapter?.clear();
+ if (!adapter && usingProvider) {
controller.textInput.clear();
}
+ if (!adapter && !usingProvider) {
+ form.reset();
+ }
}
} catch {
// Don't clear on error - user may want to retry
}
},
- [usingProvider, controller, files, onSubmit, clear]
+ [usingProvider, controller, files, onSubmit, clear],
);
// Render with or without local provider
@@ -934,9 +1063,11 @@ export const PromptInput = ({
// Always provide LocalAttachmentsContext so children get validated add function
return (
-
- {withReferencedSources}
-
+
+
+ {withReferencedSources}
+
+
);
};
@@ -986,7 +1117,7 @@ export const PromptInputTextarea = ({
// Check if the submit button is disabled before submitting
const { form } = e.currentTarget;
const submitButton = form?.querySelector(
- 'button[type="submit"]'
+ 'button[type="submit"]',
) as HTMLButtonElement | null;
if (submitButton?.disabled) {
return;
@@ -1008,7 +1139,7 @@ export const PromptInputTextarea = ({
}
}
},
- [onKeyDown, isComposing, attachments]
+ [onKeyDown, isComposing, attachments],
);
const handlePaste: ClipboardEventHandler = useCallback(
@@ -1035,7 +1166,7 @@ export const PromptInputTextarea = ({
attachments.add(files);
}
},
- [attachments]
+ [attachments],
);
const handleCompositionEnd = useCallback(() => setIsComposing(false), []);
@@ -1068,6 +1199,284 @@ export const PromptInputTextarea = ({
);
};
+const PromptInputKeyBindingsPlugin = ({
+ onKeyDown,
+}: {
+ onKeyDown?: (event: KeyboardEvent) => void;
+}) => {
+ const [editor] = useLexicalComposerContext();
+ const attachments = usePromptInputAttachments();
+
+ useEffect(() => {
+ const unregisterEnter = editor.registerCommand(
+ KEY_ENTER_COMMAND,
+ (event: KeyboardEvent | null) => {
+ if (editor.isComposing() || event?.isComposing || event?.shiftKey) {
+ return false;
+ }
+
+ // Check if the submit button is disabled before submitting
+ const form = editor.getRootElement()?.closest("form");
+ const submitButton = form?.querySelector(
+ 'button[type="submit"]',
+ ) as HTMLButtonElement | null;
+
+ if (submitButton?.disabled) {
+ event?.preventDefault();
+ return true;
+ }
+
+ event?.preventDefault();
+ form?.requestSubmit();
+ return true;
+ },
+ COMMAND_PRIORITY_LOW,
+ );
+
+ const unregisterBackspace = editor.registerCommand(
+ KEY_BACKSPACE_COMMAND,
+ (event: KeyboardEvent | null) => {
+ // Remove last attachment when Backspace is pressed and textarea is empty
+ if (
+ $getRoot().getTextContent() !== "" ||
+ attachments.files.length === 0
+ ) {
+ return false;
+ }
+ if (
+ $getRoot().getTextContent() === "" &&
+ attachments.files.length > 0
+ ) {
+ event?.preventDefault();
+ const lastAttachment = attachments.files.at(-1);
+ if (lastAttachment) {
+ attachments.remove(lastAttachment.id);
+ return true;
+ }
+ }
+ return false;
+ },
+ COMMAND_PRIORITY_LOW,
+ );
+
+ const unregisters = [unregisterEnter, unregisterBackspace];
+
+ if (onKeyDown) {
+ unregisters.push(
+ editor.registerRootListener((rootElement, prevRootElement) => {
+ if (prevRootElement) {
+ prevRootElement.removeEventListener("keydown", onKeyDown);
+ }
+ if (rootElement) {
+ rootElement.addEventListener("keydown", onKeyDown);
+ }
+ }),
+ );
+ }
+
+ return () => {
+ for (const unregister of unregisters) {
+ unregister();
+ }
+ };
+ }, [editor, attachments, onKeyDown]);
+
+ return null;
+};
+
+export type PromptInputRichtextProps = Omit<
+ ContentEditableProps,
+ "placeholder"
+> & {
+ className?: string;
+ editorConfig?: InitialConfigType;
+ autoFocus?: boolean;
+ onChange?: (editorState: EditorState) => void;
+ onKeyDown?: (event: KeyboardEvent) => void;
+ placeholder?: string;
+ placeholderClassName?: string;
+};
+
+export const PromptInputRichtext = ({
+ className,
+ editorConfig,
+ autoFocus = true,
+ onChange,
+ onKeyDown,
+ placeholder = "What would you like to know?",
+ placeholderClassName,
+ children,
+ ...props
+}: PromptInputRichtextProps) => {
+ const editorRef = useRef(null);
+ const attachments = usePromptInputAttachments();
+ const submitAdapterContext = useContext(PromptInputSubmitAdapterContext);
+ const controller = useOptionalPromptInputController();
+ const controllerValue = controller?.textInput.value;
+
+ // register adapter into context using editor ref
+ useEffect(() => {
+ if (!submitAdapterContext) {
+ return;
+ }
+
+ const adapter: PromptInputSubmitAdapter = {
+ clear: () => {
+ editorRef.current?.update(() => {
+ const root = $getRoot();
+ root.clear();
+ root.selectEnd();
+ });
+ },
+ getText: () =>
+ editorRef.current
+ ?.getEditorState()
+ .read(() => $convertToMarkdownString(PROMPT_INPUT_TRANSFORMERS)) ??
+ "",
+ setText: (value) => {
+ syncEditorTextContent(editorRef.current, value);
+ },
+ };
+
+ submitAdapterContext.registerSubmitAdapter(adapter);
+
+ return () => {
+ submitAdapterContext.registerSubmitAdapter(null);
+ };
+ }, [submitAdapterContext]);
+
+ // sync editor text content in provider mode
+ useEffect(() => {
+ if (controllerValue === undefined) {
+ return;
+ }
+ syncEditorTextContent(editorRef.current, controllerValue);
+ }, [controllerValue]);
+
+ const handlePaste: ClipboardEventHandler = useCallback(
+ (event) => {
+ const items = event.clipboardData?.items;
+
+ if (!items) {
+ return;
+ }
+
+ const files: File[] = [];
+
+ for (const item of items) {
+ if (item.kind === "file") {
+ const file = item.getAsFile();
+ if (file) {
+ files.push(file);
+ }
+ }
+ }
+
+ if (files.length > 0) {
+ event.preventDefault();
+ attachments.add(files);
+ }
+ },
+ [attachments],
+ );
+
+ const onChangeHandler = useCallback(
+ (editorState: EditorState) => {
+ editorState.read(() => {
+ const markdown = $convertToMarkdownString(PROMPT_INPUT_TRANSFORMERS);
+ controller?.textInput.setInput(markdown);
+ });
+ onChange?.(editorState);
+ },
+ [onChange, controller?.textInput],
+ );
+
+ const initialConfig: InitialConfigType = {
+ namespace: "Editor",
+ nodes: [TextNode, LinkNode, AutoLinkNode],
+ onError: (error: Error) => {
+ console.error(error);
+ },
+ theme: {
+ link: "rounded-md bg-blue-100 px-1 py-0.5 font-medium text-blue-600 dark:bg-blue-950 dark:text-blue-300",
+ paragraph: "mb-0",
+ text: {
+ bold: "font-semibold",
+ italic: "italic",
+ underline: "underline",
+ },
+ },
+ };
+
+ return (
+
+
+
+ {placeholder}
+
+ }
+ aria-placeholder={placeholder}
+ onPaste={handlePaste}
+ {...props}
+ />
+ }
+ ErrorBoundary={LexicalErrorBoundary}
+ />
+ {/*required plugins*/}
+
+
+
+
+ {/*good default plugins*/}
+
+
+
+ {/*optional plugins*/}
+ {autoFocus && }
+ {children}
+