@sybilion/uilib 1.3.33 → 1.3.36

package/dist/esm/tiptap/slash-mention/defaultChatSlashItems.js

@@ -0,0 +1,12 @@
+/** Empty default: pass `slashCommandItems` from the app to enable `/` palette. */
+const DEFAULT_CHAT_SLASH_ITEMS = [];
+function filterSlashItems(items, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return items;
+    return items.filter(item => item.id.toLowerCase().includes(q) ||
+        item.label.toLowerCase().includes(q) ||
+        (item.description?.toLowerCase().includes(q) ?? false));
+}
+
+export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems };

package/dist/esm/types/src/components/ui/Chat/Chat.types.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 import type { PresetScriptGraph } from './ChatMessage/presetScript';
 export declare enum MessageRole {
     USER = "user",
@@ -81,6 +82,8 @@ export interface ChatPromptProps {
     attachmentAccept?: string;
     /** Called when the user picks files via the attach button. */
     onAttachmentFiles?: (files: File[]) => void;
+    /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
+    slashCommandItems?: SlashCommandItem[];
 }
 export interface ChatMessageProps {
     role: MessageRole;

package/dist/esm/types/src/components/ui/Chat/ChatChrome/ChatChrome.d.ts

@@ -1,2 +1,2 @@
 import type { ChatChromeProps } from './ChatChrome.types';
-export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, promptPlaceholder, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatChrome/ChatChrome.types.d.ts

@@ -2,6 +2,7 @@ import type { RefObject } from 'react';
 import type { ChatAttachmentDropItem, Message } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 import type { ScrollRef } from '@homecode/ui';
 export type ChatChromeResizeHandleConfig = {
     isActive: boolean;
@@ -48,4 +49,8 @@ export interface ChatChromeProps {
     allowPdfAttachments?: boolean;
     /** Optional hook when attachments are sent with a message. */
     onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
+    /** Slash menu (`/`), forwarded to `Chat.Prompt`; omit or pass empty list to disable slash palette. */
+    slashCommandItems?: SlashCommandItem[];
+    /** Composer placeholder forwarded to `Chat.Prompt`. */
+    promptPlaceholder?: string;
 }

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPrompt.d.ts

@@ -1,2 +1,2 @@
 import type { ChatPromptProps } from '../Chat.types';
-export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, attachments, onRemoveAttachment, disabled, attachmentAccept, onAttachmentFiles, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, attachments, onRemoveAttachment, disabled, attachmentAccept, onAttachmentFiles, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPrompt.helpers.d.ts

@@ -1,6 +1,12 @@
 /** Keep in sync with `ChatPrompt.styl` `INPUT_MAX_HEIGHT` / `min-height`. */
 export declare const PROMPT_INPUT_MAX_HEIGHT_PX = 200;
 export declare const PROMPT_INPUT_MIN_HEIGHT_PX = 40;
+/** ProseMirror `view.dom` exists only after TipTap mounts `<EditorContent />`; accessing `.view` can throw earlier. */
+export declare function chatPromptSafeEditorDom(editor: {
+    readonly isDestroyed?: boolean;
+} | null | undefined): HTMLElement | null;
 export declare function chatPromptTextareaFloorPx(cs: CSSStyleDeclaration): number;
 /** Autosizing textarea inside flex shells: empty → floor only; typed → collapse measure + clamp. */
 export declare function syncChatPromptTextareaHeight(el: HTMLTextAreaElement, message: string): void;
+/** Same sizing rules for TipTap `.ProseMirror` root (`text` mirrors doc plain text length for empty-state). */
+export declare function syncChatPromptComposerHeight(el: HTMLElement, text: string): void;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.d.ts

@@ -0,0 +1,13 @@
+import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type { Editor } from '@tiptap/core';
+import type { ChatAttachmentDropItem } from '../Chat.types';
+export type ChatPromptComposerProps = {
+    editor: Editor;
+    disabled: boolean;
+    trimmedMessage: string;
+    attachments: ChatAttachmentDropItem[];
+    attachmentAccept?: string;
+    onAttachmentFiles?: (files: File[]) => void;
+    onComposerKeyDown: (event: ReactKeyboardEvent) => void;
+};
+export declare function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, onComposerKeyDown, }: ChatPromptComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/chatPromptDoc.d.ts

@@ -0,0 +1,3 @@
+import type { JSONContent } from '@tiptap/core';
+export declare const CHAT_PROMPT_EMPTY_DOC: JSONContent;
+export declare function chatPromptParagraphDoc(text: string): JSONContent;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/useChatPromptEditor.d.ts

@@ -0,0 +1,20 @@
+import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { Editor } from '@tiptap/core';
+export type UseChatPromptEditorOptions = {
+    disabled: boolean;
+    placeholder?: string;
+    slashCommandItems?: SlashCommandItem[];
+    prefillMessage?: string | null;
+    /** Staged attachment count — Enter-to-send when text empty but files present. */
+    attachmentsCount?: number;
+    /** Called when user presses Enter to send (after guards). */
+    onEnterSubmit: () => void;
+};
+export type UseChatPromptEditorResult = {
+    editor: Editor | null;
+    trimmedMessage: string;
+    resetAfterSend: () => void;
+    handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
+};
+export declare function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefillMessage, attachmentsCount, onEnterSubmit, }: UseChatPromptEditorOptions): UseChatPromptEditorResult;

package/dist/esm/types/src/components/ui/Chat/index.d.ts

@@ -15,4 +15,5 @@ export { ChatPresets } from './ChatPresets';
 export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
 export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
 export { MessageRole } from './Chat.types';
+export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/dist/esm/types/src/components/ui/Input/Input.d.ts

@@ -3,7 +3,7 @@ declare const Input: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHT
     type?: React.ComponentProps<"input">["type"];
     size?: "sm" | "md" | "lg";
     variant?: "default" | "clean";
-}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "size" | "type"> & {
+}, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "type" | "size"> & {
     type: "textarea";
     size?: "sm" | "md" | "lg";
     variant?: "default" | "clean";

package/dist/esm/types/src/docs/pages/ChatSlashCommandsPage.d.ts

@@ -0,0 +1 @@
+export default function ChatSlashCommandsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/index.d.ts

@@ -6,6 +6,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
 export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';
+export * from './tiptap/slash-mention';
 export * from './types/chat-api.types';
 export * from './components/ui/AnalysesSelector';
 export * from './components/ui/AnalysisLineIcon';

package/dist/esm/types/src/tiptap/slash-mention/SlashSuggestionList.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { SlashCommandItem } from './types';
+export type SlashSuggestionListHandle = {
+    onKeyboardEvent: (event: KeyboardEvent) => boolean;
+};
+/** Props forwarded from Tiptap suggestion renderer + our wiring. */
+export type SlashSuggestionListProps = {
+    items: SlashCommandItem[];
+    command: (item: SlashCommandItem) => void;
+    listHandleRef: RefObject<SlashSuggestionListHandle | null>;
+};
+export declare function SlashSuggestionList(props: SlashSuggestionListProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/tiptap/slash-mention/createSlashMentionExtension.d.ts

@@ -0,0 +1,21 @@
+import type { MutableRefObject } from 'react';
+import type { SuggestionProps } from '@tiptap/suggestion';
+import { type SlashSuggestionListHandle } from './SlashSuggestionList';
+import type { CreateSlashMentionExtensionOptions, SlashCommandItem } from './types';
+export declare function slashMentionSuggestionRender(uiRef: MutableRefObject<SlashSuggestionListHandle | null>): {
+    onStart?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
+    onUpdate?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
+    onExit?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
+    onKeyDown?: (p: {
+        view: unknown;
+        event: KeyboardEvent;
+        range: {
+            from: number;
+            to: number;
+        };
+    }) => boolean;
+};
+export type CreateSlashMentionExtensionConfiguredOptions = CreateSlashMentionExtensionOptions & {
+    onSuggestionUiActiveChange?: (active: boolean) => void;
+};
+export declare function createSlashMentionExtension({ items: resolvedItems, slashChar, pluginKey, onItemCommand, onSuggestionUiActiveChange, }: CreateSlashMentionExtensionConfiguredOptions): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;

package/dist/esm/types/src/tiptap/slash-mention/defaultChatSlashItems.d.ts

@@ -0,0 +1,4 @@
+import type { SlashCommandItem } from './types';
+/** Empty default: pass `slashCommandItems` from the app to enable `/` palette. */
+export declare const DEFAULT_CHAT_SLASH_ITEMS: SlashCommandItem[];
+export declare function filterSlashItems(items: SlashCommandItem[], query: string): SlashCommandItem[];

package/dist/esm/types/src/tiptap/slash-mention/index.d.ts

@@ -0,0 +1,5 @@
+export type { SlashCommandItem, SlashOnItemCommand, SlashItemCommandContext, CreateSlashMentionExtensionOptions, } from './types';
+export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems, } from './defaultChatSlashItems';
+export { createSlashMentionExtension, slashMentionSuggestionRender, } from './createSlashMentionExtension';
+export type { CreateSlashMentionExtensionConfiguredOptions } from './createSlashMentionExtension';
+export type { SlashSuggestionListHandle } from './SlashSuggestionList';

package/dist/esm/types/src/tiptap/slash-mention/types.d.ts

@@ -0,0 +1,25 @@
+import type { Editor, Range } from '@tiptap/core';
+export type SlashCommandItem = {
+    id: string;
+    label: string;
+    description?: string;
+};
+export type SlashItemCommandContext = {
+    editor: Editor;
+    range: Range;
+    item: SlashCommandItem;
+};
+/**
+ * If provided, run before default mention insertion. Return true to skip inserting a mention node.
+ */
+export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;
+export type CreateSlashMentionExtensionOptions = {
+    /** Items shown in the slash menu (filtered by query after `/`). */
+    items: SlashCommandItem[];
+    /** Trigger character; use `/` for slash commands. */
+    slashChar?: string;
+    /** Optional custom plugin key when multiple slash editors exist. */
+    pluginKey?: import('@tiptap/pm/state').PluginKey;
+    /** Custom handler (e.g. insert a block node instead of a mention). */
+    onItemCommand?: SlashOnItemCommand;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.33",
+  "version": "1.3.36",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -117,6 +117,13 @@
   "peerDependencies": {
     "@auth0/auth0-react": "^2.3.1",
     "@sybilion/platform-sdk": ">=0.0.1",
+    "@tiptap/core": "^3.22.0",
+    "@tiptap/extension-mention": "^3.22.0",
+    "@tiptap/extensions": "^3.22.0",
+    "@tiptap/pm": "^3.22.0",
+    "@tiptap/react": "^3.22.0",
+    "@tiptap/starter-kit": "^3.22.0",
+    "@tiptap/suggestion": "^3.22.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.0.0",
@@ -151,6 +158,13 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@tiptap/core": "^3.22.1",
+    "@tiptap/extension-mention": "^3.22.1",
+    "@tiptap/extensions": "^3.22.1",
+    "@tiptap/pm": "^3.22.1",
+    "@tiptap/react": "^3.22.1",
+    "@tiptap/starter-kit": "^3.22.1",
+    "@tiptap/suggestion": "^3.22.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/jest": "^29.4.0",
     "@types/node": "^18.14.0",

package/src/components/ui/Chat/Chat.types.ts

@@ -1,5 +1,7 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+
 import type { PresetScriptGraph } from './ChatMessage/presetScript';
 
 export enum MessageRole {
@@ -92,6 +94,8 @@ export interface ChatPromptProps {
   attachmentAccept?: string;
   /** Called when the user picks files via the attach button. */
   onAttachmentFiles?: (files: File[]) => void;
+  /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
+  slashCommandItems?: SlashCommandItem[];
 }
 
 export interface ChatMessageProps {

package/src/components/ui/Chat/ChatChrome/ChatChrome.tsx

@@ -56,6 +56,8 @@ export function ChatChrome({
   allowedAttachments,
   allowPdfAttachments = false,
   onAttachmentsDropped,
+  slashCommandItems,
+  promptPlaceholder,
 }: ChatChromeProps) {
   const filteredAllowedAttachments = useMemo(
     () => filterToTextAttachments(allowedAttachments),
@@ -287,6 +289,8 @@ export function ChatChrome({
               attachments={pendingAttachments}
               onRemoveAttachment={handleRemoveAttachment}
               prefillMessage={promptPrefill ?? undefined}
+              placeholder={promptPlaceholder}
+              slashCommandItems={slashCommandItems}
               attachmentAccept={
                 attachmentsDropzoneEnabled ? attachmentAccept : undefined
               }

package/src/components/ui/Chat/ChatChrome/ChatChrome.types.ts

@@ -6,6 +6,7 @@ import type {
 } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 import type { ScrollRef } from '@homecode/ui';
 
 export type ChatChromeResizeHandleConfig = {
@@ -62,4 +63,8 @@ export interface ChatChromeProps {
   onAttachmentsDropped?: (
     items: ChatAttachmentDropItem[],
   ) => void | Promise<void>;
+  /** Slash menu (`/`), forwarded to `Chat.Prompt`; omit or pass empty list to disable slash palette. */
+  slashCommandItems?: SlashCommandItem[];
+  /** Composer placeholder forwarded to `Chat.Prompt`. */
+  promptPlaceholder?: string;
 }

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.helpers.ts

@@ -2,6 +2,20 @@
 export const PROMPT_INPUT_MAX_HEIGHT_PX = 200;
 export const PROMPT_INPUT_MIN_HEIGHT_PX = 40;
 
+/** ProseMirror `view.dom` exists only after TipTap mounts `<EditorContent />`; accessing `.view` can throw earlier. */
+export function chatPromptSafeEditorDom(
+  editor: { readonly isDestroyed?: boolean } | null | undefined,
+): HTMLElement | null {
+  if (!editor || editor.isDestroyed) return null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dom = (editor as any).view?.dom as unknown;
+    return dom instanceof HTMLElement ? dom : null;
+  } catch {
+    return null;
+  }
+}
+
 export function chatPromptTextareaFloorPx(cs: CSSStyleDeclaration): number {
   const padY =
     (Number.parseFloat(cs.paddingTop) || 0) +
@@ -41,3 +55,32 @@ export function syncChatPromptTextareaHeight(
   el.style.overflowY =
     contentHeight > PROMPT_INPUT_MAX_HEIGHT_PX ? 'auto' : 'hidden';
 }
+
+/** Same sizing rules for TipTap `.ProseMirror` root (`text` mirrors doc plain text length for empty-state). */
+export function syncChatPromptComposerHeight(
+  el: HTMLElement,
+  text: string,
+): void {
+  const floor = chatPromptTextareaFloorPx(getComputedStyle(el));
+
+  el.style.overflowY = 'hidden';
+  let contentHeight: number;
+
+  const empty = text.trim() === '';
+
+  if (empty) {
+    contentHeight = floor;
+  } else {
+    el.style.height = '0';
+    contentHeight = el.scrollHeight;
+  }
+
+  const h = Math.min(
+    Math.max(contentHeight, floor),
+    PROMPT_INPUT_MAX_HEIGHT_PX,
+  );
+
+  el.style.height = `${h}px`;
+  el.style.overflowY =
+    contentHeight > PROMPT_INPUT_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+}

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl

@@ -26,20 +26,48 @@ INPUT_MAX_HEIGHT = 200px
   flex-shrink 0
   align-self flex-end
 
-.input
+.editorWrap
   flex 1
   min-width 0
+  align-self stretch
+
+.editorMount
+  display flex
+  flex 1
+  flex-direction column
+  min-width 0
   min-height 40px
   max-height INPUT_MAX_HEIGHT
-  resize none
-  overflow-y auto
   border none
-  padding var(--p-2) 0 0 !important
+  padding 0 !important
   border-radius 0 !important
   box-shadow none !important
+  background transparent
+
+  &:focus-within
+    box-shadow none !important
 
-  &:focus
+  & :global(.ProseMirror)
+    outline none !important
+    border none !important
+    flex 1
+    padding var(--p-2) 0 0 !important
+    margin 0
+    white-space pre-wrap
+    word-break break-word
+    resize none !important
     box-shadow none !important
+    min-height 40px !important
+    max-height INPUT_MAX_HEIGHT !important
+    overflow-y auto !important
+    overflow-x hidden !important
+
+  & :global(.ProseMirror p.is-empty::before)
+    color var(--muted-foreground)
+    content attr(data-placeholder)
+    float left
+    height 0
+    pointer-events none
 
 .submitColumn
   display flex

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl.d.ts

@@ -5,8 +5,9 @@ interface CssExports {
   'attachmentItem': string;
   'attachments': string;
   'composer': string;
+  'editorMount': string;
+  'editorWrap': string;
   'fileInput': string;
-  'input': string;
   'root': string;
   'submitColumn': string;
 }

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.tsx

@@ -1,22 +1,11 @@
 import cn from 'classnames';
-import {
-  ChangeEvent,
-  FormEvent,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { FormEvent, useCallback, useRef } from 'react';
 
-import useEvent from '#uilib/hooks/useEvent';
-import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
-
-import { Button } from '../../Button';
-import { Input } from '../../Input';
 import type { ChatPromptProps } from '../Chat.types';
-import { syncChatPromptTextareaHeight } from './ChatPrompt.helpers';
 import S from './ChatPrompt.styl';
 import { ChatPromptAttachments } from './ChatPromptAttachments';
+import { ChatPromptComposer } from './ChatPromptComposer';
+import { useChatPromptEditor } from './useChatPromptEditor';
 
 export function ChatPrompt({
   onSubmit,
@@ -24,117 +13,72 @@ export function ChatPrompt({
   className,
   footer,
   prefillMessage,
+  slashCommandItems,
   attachments = [],
   onRemoveAttachment,
   disabled = false,
   attachmentAccept,
   onAttachmentFiles,
 }: ChatPromptProps) {
-  const [message, setMessage] = useState('');
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
-
-  useLayoutEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    syncChatPromptTextareaHeight(el, message);
-  }, [message]);
+  const attachmentsCount = attachments.length;
 
-  useEffect(() => {
-    if (prefillMessage != null && prefillMessage !== '') {
-      setMessage(prefillMessage);
-    }
-  }, [prefillMessage]);
+  const emitSubmitRef = useRef(() => {});
+  const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } =
+    useChatPromptEditor({
+      disabled,
+      placeholder,
+      slashCommandItems,
+      prefillMessage,
+      attachmentsCount,
+      onEnterSubmit: () => emitSubmitRef.current(),
+    });
 
-  const handleSubmit = (e: FormEvent | KeyboardEvent) => {
-    const trimmedMessage = message.trim();
-    const hasAttachments = attachments.length > 0;
+  const emitSubmitAndClear = useCallback(() => {
+    if (!editor) return;
+    if (!trimmedMessage && attachmentsCount === 0) return;
 
-    if (trimmedMessage || hasAttachments) {
-      e.preventDefault();
-      onSubmit(trimmedMessage, hasAttachments ? attachments : undefined);
-      setMessage('');
-    }
-  };
+    const msg = trimmedMessage;
+    resetAfterSend();
+    onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
+  }, [
+    attachments,
+    attachmentsCount,
+    editor,
+    onSubmit,
+    resetAfterSend,
+    trimmedMessage,
+  ]);
 
-  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files ?? []);
-    e.target.value = '';
-    if (files.length > 0) {
-      onAttachmentFiles?.(files);
-    }
-  };
+  emitSubmitRef.current = emitSubmitAndClear;
 
-  useEvent({
-    event: 'keydown',
-    callback: (e: KeyboardEvent) => {
-      if (e.key === 'Enter' && !(e.metaKey || e.shiftKey || e.ctrlKey)) {
-        e.preventDefault();
-        handleSubmit(e);
-        setMessage('');
-      }
+  const handleSubmitForm = useCallback(
+    (e?: FormEvent) => {
+      e?.preventDefault();
+      emitSubmitAndClear();
     },
-  });
+    [emitSubmitAndClear],
+  );
+
+  if (!editor) {
+    return null;
+  }
 
   return (
-    <form onSubmit={handleSubmit} className={cn(S.root, className)}>
+    <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
       <ChatPromptAttachments
         attachments={attachments}
         onRemove={index => onRemoveAttachment?.(index)}
         disabled={disabled}
       />
-      <div className={S.composer}>
-        {showAttachButton ? (
-          <>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={attachmentAccept}
-              multiple
-              className={S.fileInput}
-              disabled={disabled}
-              onChange={handleFileInputChange}
-            />
-            <Button
-              type="button"
-              variant="ghost"
-              icon
-              size="sm"
-              className={S.attachButton}
-              aria-label="Attach file"
-              disabled={disabled}
-              onClick={e => {
-                e.preventDefault();
-                fileInputRef.current?.click();
-              }}
-            >
-              <PaperclipIcon size={16} />
-            </Button>
-          </>
-        ) : null}
-
-        <Input
-          ref={inputRef}
-          type="textarea"
-          rows={1}
-          value={message}
-          onChange={e => setMessage(e.target.value)}
-          placeholder={placeholder || 'Type a message...'}
-          className={cn(S.input)}
-        />
-
-        <div className={S.submitColumn}>
-          <Button
-            type="submit"
-            size="sm"
-            disabled={disabled || (!message.trim() && attachments.length === 0)}
-          >
-            <SendHorizontalIcon size={16} />
-          </Button>
-        </div>
-      </div>
-
+      <ChatPromptComposer
+        editor={editor}
+        disabled={disabled}
+        trimmedMessage={trimmedMessage}
+        attachments={attachments}
+        attachmentAccept={attachmentAccept}
+        onAttachmentFiles={onAttachmentFiles}
+        onComposerKeyDown={handleComposerKeyDown}
+      />
       {footer}
     </form>
   );