@devicai/ui 0.50.0 → 0.52.0

package/dist/esm/components/ChatDrawer/ChatDrawer.types.d.ts

@@ -1,5 +1,6 @@
-import type { ChatMessage, ModelInterfaceTool, ChatFile, AgentThreadDto, AgentDto, ToolGroupConfig, WhisperTranscriptionResponse, TenantLimitExceeded, RecalledMemoryRecord } from '../../api/types';
+import type { ChatMessage, ModelInterfaceTool, ChatFile, AgentThreadDto, AgentDto, ToolGroupConfig, WhisperTranscriptionResponse, TenantLimitExceeded, RecalledMemoryRecord, QueueDisposition } from '../../api/types';
 import type { PendingWidgetCall } from '../../hooks/useModelInterface';
+import type { SendMessageResult } from '../../hooks/useDevicChat';
 import type { AIReference } from '../../provider/types';
 import type { UsageBarDisplay, UsageBarData } from './UsageBar';
 import type { RecalledMemoriesRenderer } from './RecalledMemoriesWidget';
@@ -83,6 +84,13 @@ export interface CustomPromptBoxProps {
      * their own notice.
      */
     limitExceeded?: TenantLimitExceeded | null;
+    /**
+     * Whether this assistant accepts messages written while it is working. With
+     * it off, sending during a run is refused and the box should stay closed.
+     */
+    queueEnabled?: boolean;
+    /** How many messages are waiting their turn on this conversation. */
+    queuedCount?: number;
 }
 /**
  * Allowed file types for upload. Each flag turns on a family of MIME types:
@@ -469,6 +477,32 @@ export interface ChatDrawerOptions {
      * The input is disabled regardless while the limit is active.
      */
     limitBannerRenderer?: (limit: TenantLimitExceeded) => React.ReactNode;
+    /**
+     * Hide the notice shown above the input while a message can be — or already
+     * is — queued. The queue itself keeps working; only the explanation goes.
+     * @default false
+     */
+    hideQueueNotice?: boolean;
+    /**
+     * Render your own version of that notice. Receives how many messages are
+     * waiting (0 while the user is only writing) and what the last accepted one
+     * was told about when it will be picked up.
+     */
+    queueNoticeRenderer?: (state: {
+        queuedCount: number;
+        willProcess?: QueueDisposition;
+        /** Set when a message was refused, or discarded by a stop. */
+        alert?: string;
+    }) => React.ReactNode;
+    /**
+     * Whether messages may be written while the assistant is working.
+     *
+     * Left unset it follows the assistant's own `messageQueueEnabled` setting,
+     * resolved through the lookup the drawer already makes. Set it to pin the
+     * behaviour regardless — `false` keeps the input closed during a run, which is
+     * how the drawer behaved before queueing existed.
+     */
+    messageQueue?: boolean;
     /**
      * Show the "Recalled memories" strip interleaved with the messages that
      * brought long-term memories into the conversation (including while the
@@ -745,9 +779,14 @@ export interface ChatMessagesProps {
  * Props for ChatInput component
  */
 export interface ChatInputProps {
+    /**
+     * Sends the message. May report back that the conversation turned it down —
+     * the input clears itself on submit, so a rejected send has to hand the text
+     * back or it is gone.
+     */
     onSend: (message: string, files?: File[], meta?: {
         transcriptId?: string;
-    }) => void;
+    }) => void | Promise<SendMessageResult | void>;
     disabled?: boolean;
     placeholder?: string;
     enableFileUploads?: boolean;
@@ -793,8 +832,21 @@ export interface ChatInputProps {
     disabledMessage?: string;
     /** Whether the assistant is currently processing (shows stop button) */
     isProcessing?: boolean;
-    /** Callback to stop the current processing */
-    onStop?: () => void;
+    /**
+     * Stops the current processing. May return the text of anything the stop
+     * discarded, so it can be put back in the box rather than lost.
+     */
+    onStop?: () => void | Promise<{
+        restoredText?: string;
+    } | void>;
+    /**
+     * Whether a message may be written while the assistant is working. With it
+     * on, stop and send are shown together and the textarea stays live; with it
+     * off the box closes during a run, as it always has.
+     */
+    allowQueueing?: boolean;
+    /** Notice rendered above the textarea while messages can be, or are, queued. */
+    queueNotice?: React.ReactNode;
     /** Custom stop button content */
     stopButtonContent?: React.ReactNode;
     /** Pending widget tool call to render replacing the input (render: 'input') */

package/dist/esm/components/ChatDrawer/ChatInput.js

@@ -62,7 +62,7 @@ function ChatInput(props) {
     return jsx(ChatInputBox, { ...props });
 }
 function ChatInputBox({ onSend, disabled = false, placeholder = 'Type a message...', enableFileUploads = false, allowedFileTypes = { images: true, documents: true }, maxFileSize = 10 * 1024 * 1024, // 10MB
-enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText = false, speechLanguage, speechTenantId, speechAutoStop = true, speechAutoStopCountdownMs, speechAutoStopSilenceMs, speechAutoStopSilenceRatio, speechAutoStopSilenceLevel, speechAutoStopSpeechLevel, speechHandoff = false, speechHandoffSendDelayMs, speechHandoffHoldMs, apiKey, baseUrl, sendButtonContent, disabledMessage, isProcessing = false, onStop, stopButtonContent, references, onRemoveReference, usageBar, limitBanner, integrationsHint, integrationsToggle, }) {
+enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText = false, speechLanguage, speechTenantId, speechAutoStop = true, speechAutoStopCountdownMs, speechAutoStopSilenceMs, speechAutoStopSilenceRatio, speechAutoStopSilenceLevel, speechAutoStopSpeechLevel, speechHandoff = false, speechHandoffSendDelayMs, speechHandoffHoldMs, apiKey, baseUrl, sendButtonContent, disabledMessage, isProcessing = false, onStop, allowQueueing = false, queueNotice, stopButtonContent, references, onRemoveReference, usageBar, limitBanner, integrationsHint, integrationsToggle, }) {
     const [message, setMessage] = useState('');
     const [files, setFiles] = useState([]);
     // Long blocks of pasted text, kept out of the textarea and shown as cards.
@@ -182,11 +182,22 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
             textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
         }
     }, []);
+    /** Whether there is anything to send. */
+    const hasContent = !!message.trim() || files.length > 0 || pastedTexts.length > 0;
+    /**
+     * Busy, and this assistant does not queue: writing is pointless because the
+     * message would be refused. Kept apart from `disabled`, which the stop button
+     * also answers to — it lives in this same box and has to stay clickable.
+     */
+    const busyWithoutQueue = isProcessing && !allowQueueing;
+    const inputDisabled = disabled || busyWithoutQueue;
     // Handle send
-    const handleSend = useCallback(() => {
+    const handleSend = useCallback(async () => {
         const trimmedMessage = message.trim();
         if (!trimmedMessage && files.length === 0 && pastedTexts.length === 0)
             return;
+        if (inputDisabled)
+            return;
         // Pasted text is shown as a card but still reaches the model in full: each
         // block is prepended to the message inside a delimiter the thread can parse
         // back out (see parsePastedBlocks in ChatMessages).
@@ -195,7 +206,13 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
                 .filter(Boolean)
                 .join('\n\n')
             : trimmedMessage;
-        onSend(composedMessage, files.length > 0 ? files : undefined, transcriptId ? { transcriptId } : undefined);
+        // Cleared straight away so the box is ready for the next message, and put
+        // back if the conversation turned this one down — the text is the user's,
+        // and losing it is not an acceptable way to report a refusal.
+        const sentMessage = message;
+        const sentFiles = files;
+        const sentPastedTexts = pastedTexts;
+        const sentTranscriptId = transcriptId;
         setMessage('');
         setFiles([]);
         setPastedTexts([]);
@@ -204,9 +221,32 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
         if (textareaRef.current) {
             textareaRef.current.style.height = 'auto';
         }
-    }, [message, files, pastedTexts, onSend, transcriptId]);
+        const result = await onSend(composedMessage, sentFiles.length > 0 ? sentFiles : undefined, sentTranscriptId ? { transcriptId: sentTranscriptId } : undefined);
+        if (result && 'rejected' in result) {
+            // Only restores what the user has not started replacing already.
+            setMessage((current) => current || sentMessage);
+            setFiles((current) => (current.length ? current : sentFiles));
+            setPastedTexts((current) => (current.length ? current : sentPastedTexts));
+            setTranscriptId((current) => current ?? sentTranscriptId);
+        }
+    }, [message, files, pastedTexts, onSend, transcriptId, inputDisabled]);
     // Keep a fresh send fn for the deferred handoff auto-send.
     handleSendRef.current = handleSend;
+    /**
+     * Stopping the run hands back whatever was queued behind it. Put that text
+     * back where it was written — quietly discarding something the user typed is
+     * the one outcome a stop should not have.
+     */
+    const handleStop = useCallback(async () => {
+        if (!onStop)
+            return;
+        const result = await onStop();
+        const restoredText = result
+            ?.restoredText;
+        if (!restoredText)
+            return;
+        setMessage((current) => [current, restoredText].filter(Boolean).join('\n'));
+    }, [onStop]);
     // --- Speech-to-text handlers ---
     const clearPending = useCallback(() => {
         if (pendingRafRef.current !== null) {
@@ -517,23 +557,23 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
     }, [enableFileUploads, enableLongTextPaste, longTextPasteThreshold, addFiles]);
     // --- Drag & drop ---
     const handleDragEnter = useCallback((e) => {
-        if (!enableFileUploads || disabled)
+        if (!enableFileUploads || inputDisabled)
             return;
         if (!e.dataTransfer.types.includes('Files'))
             return;
         e.preventDefault();
         dragDepthRef.current += 1;
         setIsDraggingOver(true);
-    }, [enableFileUploads, disabled]);
+    }, [enableFileUploads, inputDisabled]);
     const handleDragOver = useCallback((e) => {
-        if (!enableFileUploads || disabled)
+        if (!enableFileUploads || inputDisabled)
             return;
         if (!e.dataTransfer.types.includes('Files'))
             return;
         // Without this the browser navigates away to open the dropped file.
         e.preventDefault();
         e.dataTransfer.dropEffect = 'copy';
-    }, [enableFileUploads, disabled]);
+    }, [enableFileUploads, inputDisabled]);
     const handleDragLeave = useCallback((e) => {
         e.preventDefault();
         dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
@@ -541,16 +581,22 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
             setIsDraggingOver(false);
     }, []);
     const handleDrop = useCallback((e) => {
-        if (!enableFileUploads || disabled)
+        if (!enableFileUploads || inputDisabled)
             return;
         e.preventDefault();
         dragDepthRef.current = 0;
         setIsDraggingOver(false);
         addFiles(Array.from(e.dataTransfer.files || []));
-    }, [enableFileUploads, disabled, addFiles]);
-    return (jsxs("div", { className: "devic-input-area", "data-dragging": isDraggingOver ? 'true' : 'false', onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDraggingOver && (jsxs("div", { className: "devic-drop-overlay", children: [jsx(AttachIcon, {}), jsx("span", { children: "Drop files to attach" })] })), limitBanner, usageBar, integrationsHint, disabledMessage && disabled && (jsxs("div", { className: "devic-input-disabled-notice", children: [jsx(WaitingIcon, {}), disabledMessage] })), speechError && (jsx("div", { className: "devic-speech-error", role: "alert", children: speechError })), handoffActive && (jsxs("div", { className: "devic-handoff-bar", "data-waiting": isProcessing ? 'true' : 'false', children: [jsx("span", { className: "devic-handoff-dot", "aria-hidden": "true" }), jsx("span", { className: "devic-handoff-label", children: isProcessing ? 'Hands-free · waiting for reply' : 'Hands-free on' }), jsx("button", { type: "button", className: "devic-handoff-stop", onClick: cancelHandoff, title: "Stop hands-free", "aria-label": "Stop hands-free", children: jsx(CloseIcon, {}) })] })), references && references.length > 0 && (jsx("div", { className: "devic-reference-chips", children: references.map((ref) => (jsx(ReferenceChip, { label: ref.label, variant: "input", onRemove: () => onRemoveReference?.(ref.id) }, ref.id))) })), pastedTexts.length > 0 && (jsx("div", { className: "devic-pasted-cards", children: pastedTexts.map((pasted) => (jsxs("div", { className: "devic-pasted-card", children: [jsx("p", { className: "devic-pasted-card-preview", children: pastedPreview(pasted.text) }), jsxs("div", { className: "devic-pasted-card-footer", children: [jsx("span", { className: "devic-pasted-card-badge", children: "PASTED" }), jsxs("span", { className: "devic-pasted-card-meta", children: [pastedLineCount(pasted.text), " lines"] })] }), jsx("button", { className: "devic-file-remove devic-pasted-card-remove", onClick: () => removePastedText(pasted.id), type: "button", title: "Remove pasted text", "aria-label": "Remove pasted text", children: "\u00D7" })] }, pasted.id))) })), files.length > 0 && (jsx("div", { className: "devic-file-preview", children: files.map((file, idx) => (jsxs("div", { className: "devic-file-preview-item", children: [filePreviews[idx] ? (jsx("img", { className: "devic-file-preview-thumb", src: filePreviews[idx], alt: file.name })) : (jsx(FileIcon, {})), jsx("span", { children: file.name }), jsx("button", { className: "devic-file-remove", onClick: () => removeFile(idx), type: "button", children: "\u00D7" })] }, idx))) })), jsx("div", { className: "devic-input-wrapper", children: pendingSend ? (jsx("div", { className: "devic-speech-panel", "data-state": "pending", children: jsxs("div", { className: "devic-handoff-pending", children: [jsxs("div", { className: "devic-handoff-pending-icon", children: [jsx(SendCountdownRing, { progress: pendingProgress }), jsx(SendIcon, {})] }), jsxs("div", { className: "devic-handoff-pending-text", children: [jsx("span", { className: "devic-handoff-pending-title", children: "Sending\u2026 interact to cancel" }), message.trim() && (jsx("span", { className: "devic-handoff-pending-preview", children: message.trim() }))] })] }) })) : isTranscribing ? (jsxs("div", { className: "devic-speech-panel", "data-state": "processing", children: [jsx("span", { className: "devic-speech-spinner", "aria-hidden": "true" }), jsx("span", { className: "devic-speech-status", children: "Transcribing\u2026" })] })) : isRecordingActive ? (jsxs("div", { className: "devic-speech-panel", "data-state": "recording", children: [jsx("button", { className: "devic-input-btn devic-speech-cancel", onClick: cancelRecording, type: "button", title: "Cancel recording", children: jsx(CloseIcon, {}) }), jsxs("div", { className: "devic-speech-live", children: [jsx(Equalizer, { levels: recording.levels, paused: recording.isPaused }), jsx("span", { className: "devic-speech-timer", children: formatDuration(recording.durationMs) })] }), jsx("button", { className: "devic-input-btn", onClick: recording.isPaused ? recording.resume : recording.pause, type: "button", title: recording.isPaused ? 'Resume' : 'Pause', children: recording.isPaused ? jsx(PlayIcon, {}) : jsx(PauseIcon, {}) }), jsxs("div", { className: "devic-speech-confirm-wrap", "data-autostop": recording.isAutoStopping ? 'true' : 'false', children: [recording.isAutoStopping && (jsx(AutoStopRing, { progress: recording.autoStopProgress })), jsx("button", { className: "devic-input-btn devic-speech-confirm", onClick: () => void handleConfirm(), type: "button", title: recording.isAutoStopping
+    }, [enableFileUploads, inputDisabled, addFiles]);
+    return (jsxs("div", { className: "devic-input-area", "data-dragging": isDraggingOver ? 'true' : 'false', onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [isDraggingOver && (jsxs("div", { className: "devic-drop-overlay", children: [jsx(AttachIcon, {}), jsx("span", { children: "Drop files to attach" })] })), limitBanner, usageBar, integrationsHint, queueNotice, disabledMessage && disabled && (jsxs("div", { className: "devic-input-disabled-notice", children: [jsx(WaitingIcon, {}), disabledMessage] })), speechError && (jsx("div", { className: "devic-speech-error", role: "alert", children: speechError })), handoffActive && (jsxs("div", { className: "devic-handoff-bar", "data-waiting": isProcessing ? 'true' : 'false', children: [jsx("span", { className: "devic-handoff-dot", "aria-hidden": "true" }), jsx("span", { className: "devic-handoff-label", children: isProcessing ? 'Hands-free · waiting for reply' : 'Hands-free on' }), jsx("button", { type: "button", className: "devic-handoff-stop", onClick: cancelHandoff, title: "Stop hands-free", "aria-label": "Stop hands-free", children: jsx(CloseIcon, {}) })] })), references && references.length > 0 && (jsx("div", { className: "devic-reference-chips", children: references.map((ref) => (jsx(ReferenceChip, { label: ref.label, variant: "input", onRemove: () => onRemoveReference?.(ref.id) }, ref.id))) })), pastedTexts.length > 0 && (jsx("div", { className: "devic-pasted-cards", children: pastedTexts.map((pasted) => (jsxs("div", { className: "devic-pasted-card", children: [jsx("p", { className: "devic-pasted-card-preview", children: pastedPreview(pasted.text) }), jsxs("div", { className: "devic-pasted-card-footer", children: [jsx("span", { className: "devic-pasted-card-badge", children: "PASTED" }), jsxs("span", { className: "devic-pasted-card-meta", children: [pastedLineCount(pasted.text), " lines"] })] }), jsx("button", { className: "devic-file-remove devic-pasted-card-remove", onClick: () => removePastedText(pasted.id), type: "button", title: "Remove pasted text", "aria-label": "Remove pasted text", children: "\u00D7" })] }, pasted.id))) })), files.length > 0 && (jsx("div", { className: "devic-file-preview", children: files.map((file, idx) => (jsxs("div", { className: "devic-file-preview-item", children: [filePreviews[idx] ? (jsx("img", { className: "devic-file-preview-thumb", src: filePreviews[idx], alt: file.name })) : (jsx(FileIcon, {})), jsx("span", { children: file.name }), jsx("button", { className: "devic-file-remove", onClick: () => removeFile(idx), type: "button", children: "\u00D7" })] }, idx))) })), jsx("div", { className: "devic-input-wrapper", children: pendingSend ? (jsx("div", { className: "devic-speech-panel", "data-state": "pending", children: jsxs("div", { className: "devic-handoff-pending", children: [jsxs("div", { className: "devic-handoff-pending-icon", children: [jsx(SendCountdownRing, { progress: pendingProgress }), jsx(SendIcon, {})] }), jsxs("div", { className: "devic-handoff-pending-text", children: [jsx("span", { className: "devic-handoff-pending-title", children: "Sending\u2026 interact to cancel" }), message.trim() && (jsx("span", { className: "devic-handoff-pending-preview", children: message.trim() }))] })] }) })) : isTranscribing ? (jsxs("div", { className: "devic-speech-panel", "data-state": "processing", children: [jsx("span", { className: "devic-speech-spinner", "aria-hidden": "true" }), jsx("span", { className: "devic-speech-status", children: "Transcribing\u2026" })] })) : isRecordingActive ? (jsxs("div", { className: "devic-speech-panel", "data-state": "recording", children: [jsx("button", { className: "devic-input-btn devic-speech-cancel", onClick: cancelRecording, type: "button", title: "Cancel recording", children: jsx(CloseIcon, {}) }), jsxs("div", { className: "devic-speech-live", children: [jsx(Equalizer, { levels: recording.levels, paused: recording.isPaused }), jsx("span", { className: "devic-speech-timer", children: formatDuration(recording.durationMs) })] }), jsx("button", { className: "devic-input-btn", onClick: recording.isPaused ? recording.resume : recording.pause, type: "button", title: recording.isPaused ? 'Resume' : 'Pause', children: recording.isPaused ? jsx(PlayIcon, {}) : jsx(PauseIcon, {}) }), jsxs("div", { className: "devic-speech-confirm-wrap", "data-autostop": recording.isAutoStopping ? 'true' : 'false', children: [recording.isAutoStopping && (jsx(AutoStopRing, { progress: recording.autoStopProgress })), jsx("button", { className: "devic-input-btn devic-speech-confirm", onClick: () => void handleConfirm(), type: "button", title: recording.isAutoStopping
                                         ? 'Auto-sending… keep talking to cancel'
-                                        : 'Confirm', children: jsx(CheckIcon, {}) })] })] })) : (jsxs(Fragment, { children: [integrationsToggle, enableFileUploads && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedTypes, multiple: true, onChange: handleFileSelect, style: { display: 'none' } }), jsx("button", { className: "devic-input-btn", onClick: () => fileInputRef.current?.click(), disabled: disabled, type: "button", title: "Attach file", children: jsx(AttachIcon, {}) })] })), speechEnabled && (jsxs("div", { className: "devic-speech-mic-wrap", "data-holding": isHolding ? 'true' : 'false', children: [isHolding && jsx(HoldRing, { progress: holdProgress }), jsx("button", { className: "devic-input-btn devic-speech-mic", onClick: speechHandoff ? undefined : startOneShotRecording, onPointerDown: speechHandoff ? handleMicPointerDown : undefined, onPointerUp: speechHandoff ? handleMicPointerUp : undefined, onPointerCancel: speechHandoff ? handleMicPointerCancel : undefined, disabled: disabled || isProcessing, type: "button", title: speechHandoff
+                                        : 'Confirm', children: jsx(CheckIcon, {}) })] })] })) : (jsxs(Fragment, { children: [integrationsToggle, enableFileUploads && (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: acceptedTypes, multiple: true, onChange: handleFileSelect, style: { display: 'none' } }), jsx("button", { className: "devic-input-btn", onClick: () => fileInputRef.current?.click(), disabled: inputDisabled, type: "button", title: "Attach file", children: jsx(AttachIcon, {}) })] })), speechEnabled && (jsxs("div", { className: "devic-speech-mic-wrap", "data-holding": isHolding ? 'true' : 'false', children: [isHolding && jsx(HoldRing, { progress: holdProgress }), jsx("button", { className: "devic-input-btn devic-speech-mic", onClick: speechHandoff ? undefined : startOneShotRecording, onPointerDown: speechHandoff ? handleMicPointerDown : undefined, onPointerUp: speechHandoff ? handleMicPointerUp : undefined, onPointerCancel: speechHandoff ? handleMicPointerCancel : undefined, 
+                                    // Dictating a message for the assistant to pick up next is a
+                                    // reasonable thing to do mid-answer, and on a phone it is the
+                                    // natural one. The hands-free loop is another matter: it
+                                    // auto-sends when the assistant finishes, which with a queue
+                                    // would chain sends — see the handoff effect below.
+                                    disabled: inputDisabled || (isProcessing && speechHandoff), type: "button", title: speechHandoff
                                         ? 'Tap to dictate · hold to start hands-free'
                                         : 'Record voice message', children: jsx(MicIcon, {}) })] })), jsx("textarea", { ref: textareaRef, className: "devic-input", value: message, onChange: (e) => {
                                 const value = e.target.value;
@@ -560,7 +606,17 @@ enableLongTextPaste = false, longTextPasteThreshold = 2000, enableSpeechToText =
                                 if (transcriptId && value.trim() === '')
                                     setTranscriptId(undefined);
                                 handleInput();
-                            }, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, rows: 1 }), isProcessing ? (stopButtonContent ? (jsxs("div", { className: "devic-send-btn-wrapper", children: [jsx("div", { className: "devic-send-btn-custom", "aria-hidden": "true", children: stopButtonContent }), jsx("button", { className: "devic-send-btn-overlay", onClick: onStop, type: "button", title: "Stop" })] })) : (jsx("button", { className: "devic-input-btn devic-stop-btn", onClick: onStop, type: "button", title: "Stop", children: jsx(StopIcon, {}) }))) : sendButtonContent ? (jsxs("div", { className: "devic-send-btn-wrapper", children: [jsx("div", { className: "devic-send-btn-custom", "aria-hidden": "true", children: sendButtonContent }), jsx("button", { className: "devic-send-btn-overlay", onClick: handleSend, disabled: disabled || (!message.trim() && files.length === 0 && pastedTexts.length === 0), type: "button", title: "Send message" })] })) : (jsx("button", { className: "devic-input-btn devic-send-btn", onClick: handleSend, disabled: disabled || (!message.trim() && files.length === 0 && pastedTexts.length === 0), type: "button", title: "Send message", children: jsx(SendIcon, {}) }))] })) })] }));
+                            }, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: busyWithoutQueue
+                                ? 'The assistant is answering…'
+                                : isProcessing
+                                    ? 'Write while the assistant answers — it will be queued'
+                                    : placeholder, disabled: inputDisabled, rows: 1 }), isProcessing &&
+                            (stopButtonContent ? (jsxs("div", { className: "devic-send-btn-wrapper", children: [jsx("div", { className: "devic-send-btn-custom", "aria-hidden": "true", children: stopButtonContent }), jsx("button", { className: "devic-send-btn-overlay", onClick: handleStop, type: "button", title: "Stop" })] })) : (jsx("button", { className: "devic-input-btn devic-stop-btn", onClick: handleStop, type: "button", title: "Stop", children: jsx(StopIcon, {}) }))), (!isProcessing || (allowQueueing && hasContent)) &&
+                            (sendButtonContent ? (jsxs("div", { className: "devic-send-btn-wrapper", children: [jsx("div", { className: "devic-send-btn-custom", "aria-hidden": "true", children: sendButtonContent }), jsx("button", { className: "devic-send-btn-overlay", onClick: handleSend, disabled: inputDisabled || !hasContent, type: "button", title: isProcessing
+                                            ? "Queue this message for the assistant's next turn"
+                                            : 'Send message' })] })) : (jsx("button", { className: "devic-input-btn devic-send-btn", onClick: handleSend, disabled: inputDisabled || !hasContent, type: "button", title: isProcessing
+                                    ? "Queue this message for the assistant's next turn"
+                                    : 'Send message', children: jsx(SendIcon, {}) })))] })) })] }));
 }
 /**
  * Live equalizer rendered from the recording amplitude levels (0..1 per bar).