@flamingo-stack/openframe-frontend-core 0.0.665 → 0.0.666

package/src/components/chat/chat-composer.tsx

@@ -12,10 +12,20 @@ import { ModelDisplay } from './model-display';
 import type { ChatInputRef, ModelDisplayProps } from './types/component.types';
 import type { ChatContextItem, ChatContextPickerConfig } from './types/context-item.types';
 
+/** Why the composer takes no input, in the user's words — shown where the prompt would be. */
+export interface ChatComposerLock {
+  placeholder: string;
+}
+
 export interface ChatComposerProps {
   /** Read-only archived chat → render the unarchive placeholder instead of the
    *  input (Figma node 7361:426949). */
   archived?: boolean;
+  /** The host cannot take a message right now — e.g. the AI balance is spent
+   *  and the agents are paused (Figma 954:28455). The composer keeps its place
+   *  but takes no input: the editor is disabled with the lock's copy in the
+   *  prompt's place, and the `+` menu, the chips and Send are inert. */
+  lock?: ChatComposerLock | null;
   inputRef: Ref<ChatInputRef>;
   onSend: (text: string) => void;
   onStop: () => void;
@@ -80,6 +90,7 @@ export interface ChatComposerProps {
  */
 export function ChatComposer({
   archived = false,
+  lock = null,
   inputRef,
   onSend,
   onStop,
@@ -107,6 +118,7 @@ export function ChatComposer({
   previewText,
 }: ChatComposerProps) {
   const contextEnabled = !!contextPicker && !archived;
+  const locked = lock != null;
   const selected = selectedContextItems ?? [];
   const memory = contextMemoryItems ?? [];
 
@@ -131,11 +143,15 @@ export function ChatComposer({
       onStop={onStop}
       sending={sending}
       placeholder={placeholder}
+      // Locked: the editor is disabled and the lock's copy stands where the
+      // prompt would; there is nothing to focus, so autofocus stands down too.
+      disabled={locked}
+      disabledPlaceholder={lock?.placeholder}
       previewText={previewText}
       fullWidth
       className="px-0"
       reserveAvatarOffset={false}
-      autoFocus={autoFocus}
+      autoFocus={locked ? false : autoFocus}
       slashCommands={slashCommands}
       onMentionQueryChange={contextEnabled ? onMentionQueryChange : undefined}
       onValueChange={contextEnabled ? onValueChange : undefined}
@@ -148,7 +164,7 @@ export function ChatComposer({
           <ChatComposerPlusMenu
             onToggle={() => (contextPickerOpen ? onCloseContextPicker?.() : onOpenContextPicker?.())}
             open={contextPickerOpen}
-            disabled={attachmentsDisabled}
+            disabled={attachmentsDisabled || locked}
             dropdown={
               contextPicker ? (
                 <ChatContextPicker
@@ -202,7 +218,7 @@ export function ChatComposer({
                 items={memory}
                 onRemove={onRemoveContextMemoryItem}
                 resolveIcon={resolveContextIcon}
-                disabled={sending}
+                disabled={sending || locked}
                 className="rounded-t-md"
               />
               {selected.length > 0 && (
@@ -210,7 +226,7 @@ export function ChatComposer({
                   items={selected}
                   onRemove={onRemoveContextItem}
                   resolveIcon={resolveContextIcon}
-                  disabled={sending}
+                  disabled={sending || locked}
                   className={cn(
                     'border-b border-ods-border bg-ods-bg p-2',
                     // Only the TOP strip rounds into the card corner.
@@ -236,7 +252,7 @@ export function ChatComposer({
             attachmentsEnabled
             attachmentsCount={attachmentsCount}
             onAddFiles={onAddFiles}
-            disabled={attachmentsDisabled}
+            disabled={attachmentsDisabled || locked}
           />
         )}
         <div className="min-w-0 flex-1">

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

@@ -167,6 +167,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     placeholder = 'Enter your Request...',
     reserveAvatarOffset: _reserveAvatarOffset,
     disabled = false,
+    disabledPlaceholder = 'Connection lost. Waiting to reconnect...',
     autoFocus = false,
     fullWidth = false,
     allowEmptySend = false,
@@ -607,8 +608,18 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   the draft is EMPTY, so the editor is always on its plain line
                   box here. */}
               {isEmpty && !showPreview && (
-                <span className="pointer-events-none absolute left-0 top-0 select-none text-ods-text-secondary text-h4">
-                  {disabled ? 'Connection lost. Waiting to reconnect...' : placeholder}
+                <span
+                  className={cn(
+                    // One line, clipped with an ellipsis (Figma 954:28455): the
+                    // disabled copy is a sentence, and the panel's narrowest
+                    // width does not fit it — wrapped, it ran under the row.
+                    'pointer-events-none absolute left-0 top-0 w-full select-none truncate text-h4',
+                    // Disabled reads as disabled (Figma 954:28455): the copy says
+                    // why, and the colour says it is not an invitation to type.
+                    disabled ? 'text-ods-text-disabled' : 'text-ods-text-secondary',
+                  )}
+                >
+                  {disabled ? disabledPlaceholder : placeholder}
                 </span>
               )}
               {/* Ghost preview of a hovered quick-action's prompt. Overlaid like
@@ -642,7 +653,8 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                 data-editor
                 role="textbox"
                 aria-multiline="true"
-                aria-label={typeof placeholder === 'string' ? placeholder : 'Message'}
+                // Named by what it shows: locked, the lock's copy is the name.
+                aria-label={disabled ? disabledPlaceholder : typeof placeholder === 'string' ? placeholder : 'Message'}
                 // `sending` blocks SENDING, never typing. Taking
                 // `contentEditable` away under a focused editor blurs it, and
                 // iOS dismisses the keyboard on blur; restoring it re-establishes

package/src/components/chat/embeddable-chat.tsx

@@ -62,7 +62,7 @@ import { CollisionBoundaryContext, PortalContainerContext } from '../ui/portal-c
 import { SquareAvatar } from '../ui/square-avatar';
 import { ChatArchivePage } from './chat-archive-page';
 import { ChatAttachmentChipStrip } from './chat-attachment-bar';
-import { ChatComposer } from './chat-composer';
+import { ChatComposer, type ChatComposerLock } from './chat-composer';
 import { chatDialogMenuItems } from './chat-dialog-menu-items';
 import { ChatHeaderIconButton } from './chat-header-icon-button';
 import { ChatHeaderSearchField } from './chat-header-search-field';
@@ -185,6 +185,15 @@ export interface EmbeddableChatProps {
    * cursor. Scrolling is intentionally disabled too. Defaults to `false`.
    */
   previewMode?: boolean;
+  /**
+   * The host cannot serve a message right now — e.g. the tenant's AI balance
+   * is spent and the agents are paused (Figma 954:28455). The composer stays
+   * in place but takes no input: the editor is disabled with `placeholder`
+   * where the prompt would be, and the `+` menu and Send are inert. Sends that
+   * bypass the composer (quick-action chips, imperative prompts) are the
+   * host's to hold back — it owns their callbacks. `null`/unset = live.
+   */
+  composerLock?: ChatComposerLock | null;
   /** Optional builders for chat-card types whose props live in hub-land
    *  (programs + product_release). Forwarded straight to
    *  `renderChatInlineEntityCard`. */
@@ -943,6 +952,7 @@ function EmbeddableChatInner({
   defaultOpen,
   showInternalTrigger = true,
   previewMode = false,
+  composerLock = null,
   extras,
   tableIdForDocumentType,
   modes,
@@ -1571,6 +1581,9 @@ function EmbeddableChatInner({
 
   const handleSend = useCallback(
     (text: string) => {
+      // Locked: the disabled editor cannot submit, but a queued Enter or a
+      // stale ref call still lands here — refused at the seam, not by luck.
+      if (composerLock) return;
       // Append chat-attachment markdown lines to the user's bubble.
       let augmentedText = text;
       if (readyAttachments.length > 0) {
@@ -1598,7 +1611,7 @@ function EmbeddableChatInner({
         setContextItems([]);
       }
     },
-    [sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
+    [composerLock, sendMessage, readyAttachments, viewUrlPrefix, clearAttachments, contextItems],
   );
 
   /**
@@ -2649,6 +2662,7 @@ function EmbeddableChatInner({
 
                       <ChatComposer
                         archived={isViewingArchived}
+                        lock={composerLock}
                         inputRef={chatInputRef}
                         onSend={handleSend}
                         onStop={stopMessage}

package/src/components/chat/types/component.types.ts

@@ -453,6 +453,13 @@ export interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
    */
   reserveAvatarOffset?: boolean;
   disabled?: boolean;
+  /**
+   * Placeholder shown while `disabled`, in the prompt's place — what the user
+   * cannot do right now. Defaults to the connection-lost copy, which is what
+   * `disabled` has meant so far (the ticket reply composer); a host that
+   * disables the input for another reason says so here.
+   */
+  disabledPlaceholder?: string;
   maxRows?: number;
   showSendButton?: boolean;
   sendButtonLabel?: string;

package/src/stories/EmbeddableChat.stories.tsx

@@ -535,6 +535,27 @@ export const MingoOnly: Story = {
   args: {},
 };
 
+/**
+ * The host cannot serve a message — the tenant's AI balance is spent and the
+ * agents are paused (Figma 954:28455). The panel reads as usual; the composer
+ * keeps its place, says why it takes nothing, and its `+` and Send are inert.
+ */
+export const ComposerLocked: Story = {
+  render: args => (
+    <EmbeddableChat
+      {...args}
+      modes={{
+        mingo: createMockMingoConfig(),
+      }}
+      defaultActiveMode="mingo"
+      defaultOpen
+      showInternalTrigger={false}
+      composerLock={{ placeholder: 'Mingo chat unavailable. Top up your balance.' }}
+    />
+  ),
+  args: {},
+};
+
 // =============================================================================
 // 3. Both modes (toggle visible — openframe-frontend target)
 // =============================================================================