@lostgradient/cinder 0.5.0 → 0.7.0

package/src/components/chat/input/chat-input.svelte

@@ -1,455 +1,314 @@
 <script lang="ts" module>
-  import type { Snippet } from 'svelte';
-  import type { HTMLFormAttributes } from 'svelte/elements';
-  import type { MessageInput } from '../conversation-model.ts';
-  import type { ChatAttachment } from './chat-attachment.ts';
-  import type { AttachmentKind } from './attachment-kind.js';
-
-  export type { ChatAttachment } from './chat-attachment.ts';
-
-  export type ChatInputProps = Omit<HTMLFormAttributes, 'onsubmit' | 'class'> & {
-    /** Unique ID for accessibility (required) */
-    id: string;
-    /** Current markdown content (two-way bindable) */
-    value?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Accessible label passed to the inner message editor */
-    composerLabel?: string;
-    /** Whether the input is disabled */
-    disabled?: boolean;
-    /** Whether a submission is in progress */
-    sending?: boolean;
-    /** Error message to display */
-    error?: string;
-    /** Additional CSS class */
-    class?: string;
-
-    // Form action support
-    /** Form action URL (enables form action mode) */
-    action?: string;
-    /** Name for the hidden input field (default: 'content') */
-    name?: string;
-
-    // Submission behavior
-    /** Whether to clear input after submit (default: true). Set to false for error recovery. */
-    clearOnSubmit?: boolean;
-
-    // Attachment configuration
-    /** Enable file attachments (default: true) */
-    allowAttachments?: boolean;
-    /** Maximum file size in bytes (default: 10MB) */
-    maxFileSize?: number;
-    /** Accepted MIME types (default: ['image/*']) */
-    acceptedTypes?: string[];
-
-    // Events
-    /** Called when the message is submitted */
-    onsubmit?: (message: MessageInput, attachments: ChatAttachment[]) => void;
-    /** Called when stop is requested (transforms send button into stop button when sending=true) */
-    onstop?: (() => void) | undefined;
-    /** Called when an attachment is added */
-    onattachmentadd?: ((attachment: ChatAttachment) => void) | undefined;
-    /** Called when an attachment is removed */
-    onattachmentremove?: ((attachment: ChatAttachment) => void) | undefined;
-    /** Called when an attachment fails validation */
-    onattachmentfailure?: ((file: File, error: string) => void) | undefined;
-
-    // Snippets for extensibility
-    /** Custom actions area (e.g., additional buttons) */
-    actions?: Snippet;
-  };
+export {};
 </script>
 
 <script lang="ts">
-  /**
-   * ChatInput is a ChatGPT/Claude-style chat composer.
-   *
-   * Features:
-   * - Wraps MarkdownEditor in lightweight mode (no toolbar/mode toggle)
-   * - Keyboard shortcuts: Enter to send, Shift+Enter for newline
-   * - IME-aware: composition input (Japanese/Chinese/Korean) won't trigger send
-   * - File attachments (images, code, documents) via paste, drag-drop, or file picker
-   * - Blocks whitespace-only submit
-   * - Works standalone or with SvelteKit form actions
-   *
-   * @example
-   * ```svelte
-   * <ChatInput
-   *   id="chat"
-   *   bind:value={message}
-   *   onsubmit={(msg, attachments) => sendMessage(msg, attachments)}
-   * />
-   * ```
-   */
-
-  import { onDestroy } from 'svelte';
-  import { classNames } from '../../../utilities/class-names.ts';
-  import { useAnnouncer } from '../../../utilities/use-announcer.svelte.ts';
-  import { createIdFactory, useStableId } from '../../../utilities/id-factory.ts';
-  import ArrowUp from 'lucide-svelte/icons/arrow-up';
-  import Paperclip from 'lucide-svelte/icons/paperclip';
-  import Square from 'lucide-svelte/icons/square';
-  import X from 'lucide-svelte/icons/x';
-  import Button from '../../button/button.svelte';
-  import MarkdownEditor from '../../markdown-editor/markdown-editor.svelte';
-  import { deriveAttachmentKind } from './attachment-kind.js';
-  import ChatAttachmentPreview from './chat-attachment-preview.svelte';
-
-  // Per-instance fallback factory for attachments whose file metadata is unavailable
-  // AND as a collision-disambiguation counter when two files share identical metadata.
-  const attachmentIdFactory = createIdFactory('attachment');
-  // Tracks hash-derived IDs used in this instance so collisions (same name/size/mtime)
-  // get a unique suffix rather than a duplicate DOM ID.
-  const usedAttachmentIds = new Set<string>();
-
-  let {
-    id,
-    value = $bindable(''),
-    placeholder = 'Type a message...',
-    composerLabel = 'Message',
-    disabled = false,
-    sending = false,
-    error,
-    class: className,
-    action,
-    name = 'content',
-    clearOnSubmit = true,
-    allowAttachments = true,
-    maxFileSize = 10 * 1024 * 1024, // 10MB
-    acceptedTypes = [
-      'image/*',
-      'text/*',
-      'application/json',
-      'application/pdf',
-      'application/javascript',
-      'application/typescript',
-      'application/xml',
-      'application/yaml',
-      'application/x-yaml',
-      // Keep in sync with CODE_MIME_TYPES in attachment-kind.ts
-      'application/x-sh',
-      'application/sql',
-      'application/toml',
-    ],
-    onsubmit,
-    onstop,
-    onattachmentadd,
-    onattachmentremove,
-    onattachmentfailure,
-    actions,
-    ...rest
-  }: ChatInputProps = $props();
-
-  // Derived: show stop button when sending and onstop is provided
-  const showStopButton = $derived(sending && onstop !== undefined);
-
-  // Refs
-  let formElement = $state<HTMLFormElement | null>(null);
-  let editorRef: { focus: () => void; getMarkdown: () => string } | undefined;
-  let fileInputRef = $state<HTMLInputElement | null>(null);
-
-  // Internal state
-  let attachments = $state<ChatAttachment[]>([]);
-  let isDragOver = $state(false);
-  let isComposing = $state(false);
-
-  // Screen reader announcements
-  const announcer = useAnnouncer();
-
-  // Derived state
-  const errorId = $derived(`${id}-error`);
-  const hintId = $derived(`${id}-hint`);
-  const shortcutDescriptionId = $derived(`${id}-shortcut-description`);
-  const isWhitespaceOnly = $derived(value.trim().length === 0);
-  const hasPendingAttachments = $derived(
-    attachments.some((a) => a.status === 'pending' || a.status === 'uploading'),
-  );
-  // Allow submit when text is present, even if some attachments errored.
-  // Only block on pending/uploading attachments (they're not yet ready to send).
-  const canSubmit = $derived(!isWhitespaceOnly && !disabled && !sending && !hasPendingAttachments);
-
-  // Determine if we're in form action mode
-  const isFormActionMode = $derived(!!action);
-
-  // =========================================================================
-  // Attachment Handling
-  // =========================================================================
-
-  function isValidType(file: File): boolean {
+/**
+ * ChatInput is a ChatGPT/Claude-style chat composer.
+ *
+ * Features:
+ * - Uses a native textarea composer so Chat does not require the rich editor bundle
+ * - Keyboard shortcuts: Enter to send, Shift+Enter for newline
+ * - IME-aware: composition input (Japanese/Chinese/Korean) won't trigger send
+ * - File attachments (images, code, documents) via paste, drag-drop, or file picker
+ * - Blocks whitespace-only submit
+ * - Works standalone or with SvelteKit form actions
+ *
+ * @example
+ * ```svelte
+ * <ChatInput
+ *   id="chat"
+ *   bind:value={message}
+ *   onsubmit={(msg, attachments) => sendMessage(msg, attachments)}
+ * />
+ * ```
+ */
+import { onDestroy } from 'svelte';
+import { classNames } from '../../../utilities/class-names.ts';
+import { useAnnouncer } from '../../../utilities/use-announcer.svelte.ts';
+import { createIdFactory, useStableId } from '../../../utilities/id-factory.ts';
+import ArrowUp from 'lucide-svelte/icons/arrow-up';
+import Paperclip from 'lucide-svelte/icons/paperclip';
+import Square from 'lucide-svelte/icons/square';
+import X from 'lucide-svelte/icons/x';
+import Button from '../../button/button.svelte';
+import { deriveAttachmentKind } from './attachment-kind.js';
+import ChatAttachmentPreview from './chat-attachment-preview.svelte';
+// Per-instance fallback factory for attachments whose file metadata is unavailable
+// AND as a collision-disambiguation counter when two files share identical metadata.
+const attachmentIdFactory = createIdFactory('attachment');
+// Tracks hash-derived IDs used in this instance so collisions (same name/size/mtime)
+// get a unique suffix rather than a duplicate DOM ID.
+const usedAttachmentIds = new Set();
+let { id, value = $bindable(''), placeholder = 'Type a message...', composerLabel = 'Message', disabled = false, sending = false, error, class: className, action, name = 'content', clearOnSubmit = true, allowAttachments = true, maxFileSize = 10 * 1024 * 1024, // 10MB
+acceptedTypes = [
+    'image/*',
+    'text/*',
+    'application/json',
+    'application/pdf',
+    'application/javascript',
+    'application/typescript',
+    'application/xml',
+    'application/yaml',
+    'application/x-yaml',
+    // Keep in sync with CODE_MIME_TYPES in attachment-kind.ts
+    'application/x-sh',
+    'application/sql',
+    'application/toml',
+], onsubmit, onstop, onattachmentadd, onattachmentremove, onattachmentfailure, actions, ...rest } = $props();
+const resolvedComposerLabel = $derived(composerLabel.trim() || 'Message');
+// Derived: show stop button when sending and onstop is provided
+const showStopButton = $derived(sending && onstop !== undefined);
+// Refs
+let formElement = $state(null);
+let editorElement = $state(null);
+let fileInputRef = $state(null);
+// Internal state
+let attachments = $state([]);
+let isDragOver = $state(false);
+let isComposing = $state(false);
+// Screen reader announcements
+const announcer = useAnnouncer();
+// Derived state
+const errorId = $derived(`${id}-error`);
+const hintId = $derived(`${id}-hint`);
+const shortcutDescriptionId = $derived(`${id}-shortcut-description`);
+const isWhitespaceOnly = $derived(value.trim().length === 0);
+const hasPendingAttachments = $derived(attachments.some((a) => a.status === 'pending' || a.status === 'uploading'));
+// Allow submit when text is present, even if some attachments errored.
+// Only block on pending/uploading attachments (they're not yet ready to send).
+const canSubmit = $derived(!isWhitespaceOnly && !disabled && !sending && !hasPendingAttachments);
+// Determine if we're in form action mode
+const isFormActionMode = $derived(!!action);
+// =========================================================================
+// Attachment Handling
+// =========================================================================
+function isValidType(file) {
     return acceptedTypes.some((type) => {
-      if (type.endsWith('/*')) {
-        const category = type.slice(0, -2);
-        return file.type.startsWith(category);
-      }
-      return file.type === type;
+        if (type.endsWith('/*')) {
+            const category = type.slice(0, -2);
+            return file.type.startsWith(category);
+        }
+        return file.type === type;
     });
-  }
-
-  const KIND_LABELS: Record<AttachmentKind, string> = {
+}
+const KIND_LABELS = {
     image: 'Image',
     code: 'Code file',
     document: 'Document',
-  };
-
-  function addAttachment(file: File): void {
+};
+function addAttachment(file) {
     // Type validation
     if (!isValidType(file)) {
-      onattachmentfailure?.(
-        file,
-        `Invalid file type: ${file.type}. Accepted types: ${acceptedTypes.join(', ')}.`,
-      );
-      return;
+        onattachmentfailure?.(file, `Invalid file type: ${file.type}. Accepted types: ${acceptedTypes.join(', ')}.`);
+        return;
     }
-
     // Size validation
     if (file.size > maxFileSize) {
-      const maxSizeMB = Math.round(maxFileSize / (1024 * 1024));
-      onattachmentfailure?.(file, `File exceeds ${maxSizeMB}MB limit`);
-      return;
+        const maxSizeMB = Math.round(maxFileSize / (1024 * 1024));
+        onattachmentfailure?.(file, `File exceeds ${maxSizeMB}MB limit`);
+        return;
     }
-
     const kind = deriveAttachmentKind(file.type);
-
     // Derive a stable ID from the file's identity metadata so repeated snapshot
     // renders of the same attachment produce the same DOM ID. Fall back to the
     // per-instance counter when lastModified is absent (e.g. synthetic File objects
     // constructed in tests with lastModified = 0).
     // If two different files hash to the same ID (identical name/size/mtime),
     // append the counter-factory suffix to guarantee document-level uniqueness.
-    let attachmentId =
-      file.lastModified !== 0
+    let attachmentId = file.lastModified !== 0
         ? useStableId(`${file.name}\0${file.size}\0${file.lastModified}`)
         : attachmentIdFactory.next();
     if (usedAttachmentIds.has(attachmentId)) {
-      attachmentId = `${attachmentId}-${attachmentIdFactory.next()}`;
+        attachmentId = `${attachmentId}-${attachmentIdFactory.next()}`;
     }
     usedAttachmentIds.add(attachmentId);
-
-    const attachment: ChatAttachment = {
-      id: attachmentId,
-      file,
-      previewUrl: URL.createObjectURL(file),
-      kind,
-      status: kind === 'code' ? 'pending' : 'ready',
+    const attachment = {
+        id: attachmentId,
+        file,
+        previewUrl: URL.createObjectURL(file),
+        kind,
+        status: kind === 'code' ? 'pending' : 'ready',
     };
-
     attachments = [...attachments, attachment];
     onattachmentadd?.(attachment);
     announcer.announce(`${KIND_LABELS[kind]} attached: ${file.name}`);
-
     // Fire-and-forget text extraction for code files
     if (kind === 'code') {
-      file.text().then(
-        (text) => {
-          attachments = attachments.map((a) =>
-            a.id === attachment.id ? { ...a, textContent: text, status: 'ready' as const } : a,
-          );
-        },
-        () => {
-          attachments = attachments.map((a) =>
-            a.id === attachment.id
-              ? { ...a, status: 'error' as const, error: 'Failed to read file' }
-              : a,
-          );
-        },
-      );
+        file.text().then((text) => {
+            attachments = attachments.map((a) => a.id === attachment.id ? { ...a, textContent: text, status: 'ready' } : a);
+        }, () => {
+            attachments = attachments.map((a) => a.id === attachment.id
+                ? { ...a, status: 'error', error: 'Failed to read file' }
+                : a);
+        });
     }
-  }
-
-  function removeAttachment(attachmentId: string): void {
+}
+function removeAttachment(attachmentId) {
     const attachment = attachments.find((a) => a.id === attachmentId);
     if (attachment) {
-      URL.revokeObjectURL(attachment.previewUrl);
-      attachments = attachments.filter((a) => a.id !== attachmentId);
-      onattachmentremove?.(attachment);
-      announcer.announce(`${KIND_LABELS[attachment.kind]} removed`);
+        URL.revokeObjectURL(attachment.previewUrl);
+        attachments = attachments.filter((a) => a.id !== attachmentId);
+        onattachmentremove?.(attachment);
+        announcer.announce(`${KIND_LABELS[attachment.kind]} removed`);
     }
-  }
-
-  function handleFileSelect(event: Event): void {
-    const input = event.target as HTMLInputElement;
+}
+function handleFileSelect(event) {
+    const input = event.target;
     const files = input.files;
     if (files) {
-      Array.from(files).forEach(addAttachment);
+        Array.from(files).forEach(addAttachment);
     }
     // Reset input for re-selection of same file
     input.value = '';
-  }
-
-  function handlePaste(event: ClipboardEvent): void {
-    if (!allowAttachments) return;
-
+}
+function handlePaste(event) {
+    if (!allowAttachments)
+        return;
     const items = event.clipboardData?.items;
-    if (!items) return;
-
+    if (!items)
+        return;
     // Collect all files from clipboard
-    const files: File[] = [];
+    const files = [];
     for (const item of items) {
-      if (item.kind === 'file') {
-        const file = item.getAsFile();
-        if (file) {
-          files.push(file);
+        if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file) {
+                files.push(file);
+            }
         }
-      }
     }
-
     // If we have files, prevent default and let addAttachment handle all validation
     // (including calling onattachmentfailure for invalid types/sizes)
     if (files.length > 0) {
-      event.preventDefault();
-      files.forEach(addAttachment);
+        event.preventDefault();
+        files.forEach(addAttachment);
     }
-  }
-
-  function handleDrop(event: DragEvent): void {
+}
+function handleDrop(event) {
     isDragOver = false;
-
-    if (!allowAttachments) return;
-
+    if (!allowAttachments)
+        return;
     // Prevent default (browser opening/downloading the file) and stop propagation
     // only when attachments are enabled and we are actually handling the drop.
     // When attachments are disabled, the event bubbles and the browser's default
     // behavior is preserved.
     event.preventDefault();
     event.stopPropagation();
-
     const files = event.dataTransfer?.files;
     if (files) {
-      // Let addAttachment handle all validation (type and size)
-      Array.from(files).forEach(addAttachment);
+        // Let addAttachment handle all validation (type and size)
+        Array.from(files).forEach(addAttachment);
     }
-  }
-
-  function handleDragOver(event: DragEvent): void {
-    if (!allowAttachments) return;
+}
+function handleDragOver(event) {
+    if (!allowAttachments)
+        return;
     event.preventDefault();
     isDragOver = true;
-  }
-
-  function handleDragLeave(event: DragEvent): void {
+}
+function handleDragLeave(event) {
     // Only set isDragOver to false if we're leaving the form entirely
-    if (!formElement?.contains(event.relatedTarget as Node)) {
-      isDragOver = false;
+    if (!formElement?.contains(event.relatedTarget)) {
+        isDragOver = false;
     }
-  }
-
-  // =========================================================================
-  // Form Submission
-  // =========================================================================
-
-  function handleSubmit(event: SubmitEvent): void {
+}
+// =========================================================================
+// Form Submission
+// =========================================================================
+function handleSubmit(event) {
     if (!canSubmit) {
-      event.preventDefault();
-      return;
+        event.preventDefault();
+        return;
     }
-
-    // Get the latest content directly from the editor to avoid debounce lag.
+    // Get the latest content directly from the textarea to avoid bind update lag.
     // The bound `value` may be stale if the user typed and pressed Enter quickly.
-    const latestContent = editorRef?.getMarkdown() ?? value;
+    const latestContent = editorElement?.value ?? value;
     const trimmedContent = latestContent.trim();
-
     // Re-check for whitespace-only after getting latest content
     if (trimmedContent.length === 0) {
-      event.preventDefault();
-      return;
+        event.preventDefault();
+        return;
     }
-
-    const message: MessageInput = {
-      role: 'user',
-      content: trimmedContent,
+    const message = {
+        role: 'user',
+        content: trimmedContent,
     };
-
     const readyAttachments = attachments.filter((a) => a.status === 'ready');
-
     // Call onsubmit callback
     onsubmit?.(message, readyAttachments);
-
     // In standalone mode, prevent default form submission
     if (!isFormActionMode) {
-      event.preventDefault();
-
-      if (clearOnSubmit) {
-        // Clear state
-        value = '';
-        attachments.forEach((a) => URL.revokeObjectURL(a.previewUrl));
-        attachments = [];
-      }
-
-      // Restore focus to editor
-      editorRef?.focus();
-      announcer.announce('Message sent');
-    } else {
-      // In form action mode, sync the bound value with trimmed content
-      // so the hidden input sends the same content as the callback.
-      // This fixes debounce lag and ensures consistent data.
-      value = trimmedContent;
+        event.preventDefault();
+        if (clearOnSubmit) {
+            // Clear state
+            value = '';
+            attachments.forEach((a) => URL.revokeObjectURL(a.previewUrl));
+            attachments = [];
+        }
+        // Restore focus to editor
+        editorElement?.focus();
+        announcer.announce('Message sent');
     }
-  }
-
-  // =========================================================================
-  // Keyboard Handling
-  // =========================================================================
-
-  function handleKeyDown(event: KeyboardEvent): void {
+    else {
+        // In form action mode, sync the bound value with trimmed content
+        // so the hidden input sends the same content as the callback.
+        // This fixes debounce lag and ensures consistent data.
+        value = trimmedContent;
+    }
+}
+// =========================================================================
+// Keyboard Handling
+// =========================================================================
+function handleKeyDown(event) {
     // Ignore keydown events during IME composition (e.g., Japanese/Chinese/Korean input).
     // During composition, Enter confirms the candidate, not sends the message.
     if (event.isComposing || isComposing) {
-      return;
+        return;
     }
-
     // Shift+Enter: Newline (let editor handle it)
     if (event.key === 'Enter' && event.shiftKey) {
-      return;
+        return;
     }
-
     // Enter (no modifiers): Submit
     if (event.key === 'Enter' && !event.metaKey && !event.ctrlKey && !event.altKey) {
-      event.preventDefault();
-      if (canSubmit) {
-        formElement?.requestSubmit();
-      }
+        event.preventDefault();
+        if (canSubmit) {
+            formElement?.requestSubmit();
+        }
     }
-  }
-
-  function handleCompositionStart(): void {
+}
+function handleCompositionStart() {
     isComposing = true;
-  }
-
-  function handleCompositionEnd(): void {
+}
+function handleCompositionEnd() {
     isComposing = false;
-  }
-
-  // =========================================================================
-  // Imperative API
-  // =========================================================================
-
-  export function focus(): void {
-    editorRef?.focus();
-  }
-
-  export function clear(): void {
+}
+// =========================================================================
+// Imperative API
+// =========================================================================
+export function focus() {
+    editorElement?.focus();
+}
+export function clear() {
     value = '';
     attachments.forEach((a) => URL.revokeObjectURL(a.previewUrl));
     attachments = [];
-  }
-
-  export function getAttachments(): ChatAttachment[] {
+}
+export function getAttachments() {
     return [...attachments];
-  }
-
-  export function addFiles(files: File[]): void {
-    if (!allowAttachments) return;
+}
+export function addFiles(files) {
+    if (!allowAttachments)
+        return;
     files.forEach(addAttachment);
-  }
-
-  // =========================================================================
-  // Cleanup
-  // =========================================================================
-
-  onDestroy(() => {
+}
+// =========================================================================
+// Cleanup
+// =========================================================================
+onDestroy(() => {
     attachments.forEach((a) => URL.revokeObjectURL(a.previewUrl));
-  });
+});
 </script>
 
 <form
@@ -486,7 +345,7 @@
             onclick={() => removeAttachment(attachment.id)}
             aria-label={`Remove ${attachment.file.name}`}
           >
-            <X class="icon-xs" />
+            <X class="cinder-icon-xs" />
           </button>
         </div>
       {/each}
@@ -495,18 +354,18 @@
 
   <!-- Editor area -->
   <div class="chat-input-editor-container">
-    <MarkdownEditor
+    <textarea
+      bind:this={editorElement}
       id={`${id}-editor`}
       bind:value
-      bind:this={editorRef}
       {placeholder}
-      label={composerLabel}
-      readonly={disabled || sending}
-      showToolbar={false}
-      showModeToggle={false}
+      aria-label={resolvedComposerLabel}
+      {disabled}
+      readonly={sending}
       class="chat-input-editor"
       aria-describedby={shortcutDescriptionId}
-    />
+      rows="1"
+    ></textarea>
   </div>
 
   <!-- Footer with actions -->
@@ -532,7 +391,7 @@
           disabled={disabled || sending}
           aria-label="Attach file"
         >
-          <Paperclip class="icon-sm" />
+          <Paperclip class="cinder-icon-sm" />
         </Button>
       {/if}
 
@@ -566,7 +425,7 @@
           aria-label="Stop generating"
           aria-describedby={shortcutDescriptionId}
         >
-          <Square class="icon-sm" />
+          <Square class="cinder-icon-sm" />
         </button>
       {:else}
         <!-- Send button: shows spinner when sending (without onstop), otherwise arrow -->
@@ -600,7 +459,7 @@
               ></path>
             </svg>
           {:else}
-            <ArrowUp class="icon-sm" />
+            <ArrowUp class="cinder-icon-sm" />
           {/if}
         </button>
       {/if}
@@ -749,52 +608,38 @@
 
   /* Editor container */
   .chat-input-editor-container {
-    --editor-min-height: 2.5rem;
-  }
-
-  .chat-input-editor-container :global(.markdown-editor-wrapper) {
-    min-height: auto;
-    gap: 0;
+    min-height: 2.5rem;
   }
 
-  .chat-input-editor-container :global(.markdown-editor) {
+  .chat-input-editor {
+    display: block;
+    width: 100%;
     min-height: 2.5rem;
     max-height: 12rem;
+    padding: var(--cinder-space-1) var(--cinder-space-3);
+    resize: none;
+    field-sizing: content;
     overflow-y: auto;
-    border: none;
-    padding: 0;
+    font: inherit;
+    line-height: var(--cinder-leading-normal);
+    color: var(--cinder-text);
     background: transparent;
+    border: none;
     border-radius: 0;
   }
 
-  .chat-input-editor-container :global(textarea.markdown-editor),
-  .chat-input-editor-container :global(.ProseMirror) {
-    field-sizing: content;
-    max-height: 12rem;
-    overflow-y: auto;
-  }
-
-  .chat-input-editor-container :global(.markdown-editor:focus-within) {
-    border-color: transparent;
-    box-shadow: none;
-    outline: none;
-  }
-
-  /* Remove focus ring from the inner textarea - the container handles focus styling */
-  .chat-input-editor-container :global(textarea.markdown-editor:focus) {
-    border-color: transparent;
-    outline: none;
-    box-shadow: none;
+  .chat-input-editor::placeholder {
+    color: var(--cinder-text-subtle);
   }
 
-  /* Remove focus ring from ProseMirror when inside chat input */
-  .chat-input-editor-container :global(.ProseMirror:focus) {
+  .chat-input-editor:focus {
     outline: none;
   }
 
-  .chat-input-editor-container :global(.ProseMirror) {
-    padding: var(--cinder-space-1) 0;
-    min-height: 2.5rem;
+  .chat-input-editor:read-only,
+  .chat-input-editor:disabled {
+    color: var(--cinder-text-muted);
+    cursor: not-allowed;
   }
 
   /* Footer */