@vibe-forge/client 0.11.2 → 0.11.3

package/src/components/chat/sender/@hooks/use-sender-controller.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { App } from 'antd'
 import { useTranslation } from 'react-i18next'
 
@@ -79,16 +80,21 @@ export const useSenderController = (props: SenderProps) => {
     interactionRequest: props.interactionRequest,
     isInlineEdit
   })
-  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut } = useSenderShortcuts({
-    enabled: !hideSender && !attachments.showContextPicker && !isInlineEdit,
-    isInlineEdit,
-    isMac,
-    isThinking,
-    modelUnavailable: props.modelUnavailable,
-    permissionModeOptions: props.permissionModeOptions ?? [],
-    referenceActions,
-    selectOverlays
-  })
+  const isPermissionInteraction = !isInlineEdit && props.interactionRequest?.payload.kind === 'permission'
+  const showConfirmInteractionAction = isPermissionInteraction &&
+    (props.interactionOptionNavigation?.optionCount ?? 0) > 0
+  const sendBlockedTooltip = isPermissionInteraction ? t('chat.permissionSendBlockedTooltip') : undefined
+  const { clearInputShortcut, composerControlShortcuts, resolvedSendShortcut, queuedMessageShortcuts } =
+    useSenderShortcuts({
+      enabled: !hideSender && !attachments.showContextPicker && !isInlineEdit,
+      isInlineEdit,
+      isMac,
+      isThinking,
+      modelUnavailable: props.modelUnavailable,
+      permissionModeOptions: props.permissionModeOptions ?? [],
+      referenceActions,
+      selectOverlays
+    })
 
   const resetComposer = () => {
     composer.resetComposerContent()
@@ -103,6 +109,7 @@ export const useSenderController = (props: SenderProps) => {
     pendingImages: composer.pendingImages,
     pendingFiles: composer.pendingFiles,
     isBusy,
+    allowWhileBusy: isThinking,
     isInlineEdit,
     modelUnavailable: props.modelUnavailable,
     interactionRequest: props.interactionRequest,
@@ -113,7 +120,20 @@ export const useSenderController = (props: SenderProps) => {
     t,
     resetComposer
   })
-  const triggerSend = () => void handleSend()
+  const handleBlockedSendAttempt = () => {
+    void message.error({
+      content: t('chat.permissionSendBlockedError'),
+      key: 'chat-permission-send-blocked'
+    })
+  }
+  const triggerSend = (mode?: 'steer' | 'next') => {
+    if (isPermissionInteraction) {
+      handleBlockedSendAttempt()
+      return
+    }
+
+    void handleSend(mode)
+  }
 
   useSenderAutofocus({ autoFocus: props.autoFocus === true, editorRef })
   useSenderReferenceFocusRestore({ focusRestore, referenceActions })
@@ -123,11 +143,24 @@ export const useSenderController = (props: SenderProps) => {
     isMac,
     clearInputShortcut,
     isInlineEdit,
+    isThinking,
     input: composer.input,
     pendingImageCount: composer.pendingImages.length,
     pendingFileCount: composer.pendingFiles.length,
+    interactionOptionCount: props.interactionOptionNavigation?.optionCount ?? 0,
     onCancel: props.onCancel,
     onClear: props.onClear,
+    onInteractionOptionMove: props.interactionOptionNavigation?.onMove,
+    onInteractionOptionSubmit: props.interactionOptionNavigation?.onSubmit,
+    onInterrupt: props.onInterrupt,
+    onInterruptHint: () => {
+      void message.open({
+        type: 'info',
+        content: t('chat.queue.stopShortcutConfirm'),
+        duration: 1.6,
+        key: 'chat-stop-shortcut-confirm'
+      })
+    },
     onResetComposer: resetComposer,
     showReferenceActions: referenceActions.showReferenceActions,
     onCloseReferenceActions: () => referenceActions.closeReferenceActions({ restoreFocus: true }),
@@ -160,10 +193,16 @@ export const useSenderController = (props: SenderProps) => {
     isInlineEdit,
     isMac,
     isThinking,
+    sendBlocked: isPermissionInteraction,
+    sendBlockedTooltip,
+    showConfirmInteractionAction,
+    confirmInteractionLabel: showConfirmInteractionAction ? t('chat.permissionConfirmOption') : undefined,
+    onConfirmInteractionOption: showConfirmInteractionAction ? props.interactionOptionNavigation?.onSubmit : undefined,
     message,
     props,
     refs: { fileInputRef, modelSelectRef, effortSelectRef },
     referenceActions,
+    queuedMessageShortcuts,
     resolvedSendShortcut,
     selectOverlays,
     supportsEffort,
@@ -186,6 +225,12 @@ export const useSenderController = (props: SenderProps) => {
     permissionContext,
     editorRef,
     placeholder: props.placeholder ?? props.interactionRequest?.payload.question ?? t('chat.inputPlaceholder'),
+    secondarySendShortcut: isThinking && !isPermissionInteraction ? queuedMessageShortcuts.queueNext : undefined,
+    onSecondarySendShortcut: isThinking && !isPermissionInteraction
+      ? () => {
+        void handleSend('next')
+      }
+      : undefined,
     toolbar
   })
 }

package/src/components/chat/sender/@hooks/use-sender-keydown.ts

@@ -1,4 +1,5 @@
 import type { RefObject } from 'react'
+import { useEffect, useRef } from 'react'
 
 import type { SenderEditorHandle } from '#~/components/chat/sender/@types/sender-editor'
 import { loadChatHistory } from '#~/components/chat/sender/@utils/sender-utils'
@@ -9,11 +10,17 @@ export const useSenderKeydown = ({
   isMac,
   clearInputShortcut,
   isInlineEdit,
+  isThinking,
   input,
   pendingImageCount,
   pendingFileCount,
+  interactionOptionCount,
   onCancel,
   onClear,
+  onInteractionOptionMove,
+  onInteractionOptionSubmit,
+  onInterrupt,
+  onInterruptHint,
   onResetComposer,
   showReferenceActions,
   onCloseReferenceActions,
@@ -30,11 +37,17 @@ export const useSenderKeydown = ({
   isMac: boolean
   clearInputShortcut?: string
   isInlineEdit: boolean
+  isThinking: boolean
   input: string
   pendingImageCount: number
   pendingFileCount: number
+  interactionOptionCount: number
   onCancel?: () => void
   onClear?: () => void
+  onInteractionOptionMove?: (delta: number) => void
+  onInteractionOptionSubmit?: () => void
+  onInterrupt: () => void
+  onInterruptHint: () => void
   onResetComposer: () => void
   showReferenceActions: boolean
   onCloseReferenceActions: () => void
@@ -47,6 +60,14 @@ export const useSenderKeydown = ({
   onHistoryNavigate: (direction: 'up' | 'down') => void
   onInputClear: () => void
 }) => {
+  const interruptConfirmationExpiresAtRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    if (input !== '' || pendingImageCount > 0 || pendingFileCount > 0 || !isThinking) {
+      interruptConfirmationExpiresAtRef.current = null
+    }
+  }, [input, isThinking, pendingFileCount, pendingImageCount])
+
   return (event: KeyboardEvent) => {
     if (showReferenceActions && event.key === 'Escape') {
       event.preventDefault()
@@ -71,6 +92,33 @@ export const useSenderKeydown = ({
       onInputClear()
       return
     }
+    const canNavigateInteractionOptions = !isInlineEdit &&
+      interactionOptionCount > 0 &&
+      input.trim() === '' &&
+      pendingImageCount === 0 &&
+      pendingFileCount === 0
+    if (
+      canNavigateInteractionOptions &&
+      onInteractionOptionMove != null &&
+      (event.key === 'ArrowUp' || event.key === 'ArrowDown')
+    ) {
+      event.preventDefault()
+      onInteractionOptionMove(event.key === 'ArrowUp' ? -1 : 1)
+      return
+    }
+    if (
+      canNavigateInteractionOptions &&
+      onInteractionOptionSubmit != null &&
+      event.key === 'Enter' &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.shiftKey
+    ) {
+      event.preventDefault()
+      onInteractionOptionSubmit()
+      return
+    }
     if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       const selection = editorRef.current?.getSelection()
       const history = loadChatHistory()
@@ -96,7 +144,23 @@ export const useSenderKeydown = ({
       }
       if (input !== '') {
         event.preventDefault()
+        interruptConfirmationExpiresAtRef.current = null
         onInputClear()
+        return
+      }
+      if (isThinking && pendingImageCount === 0 && pendingFileCount === 0) {
+        event.preventDefault()
+        const now = Date.now()
+        const expiresAt = interruptConfirmationExpiresAtRef.current
+
+        if (expiresAt != null && expiresAt > now) {
+          interruptConfirmationExpiresAtRef.current = null
+          onInterrupt()
+          return
+        }
+
+        interruptConfirmationExpiresAtRef.current = now + 1800
+        onInterruptHint()
       }
       return
     }

package/src/components/chat/sender/@hooks/use-sender-shortcuts.ts

@@ -8,6 +8,19 @@ import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { useComposerControlShortcuts } from '#~/hooks/chat/use-composer-control-shortcuts'
 import { resolveSendShortcut } from '#~/utils/shortcutUtils'
 
+const resolveQueuedMessageShortcuts = (sendShortcut: string, isMac: boolean) => {
+  const primary = sendShortcut
+  const candidates = isMac
+    ? ['cmd+shift+enter', 'cmd+alt+enter', 'cmd+ctrl+enter']
+    : ['mod+enter', 'alt+enter', 'ctrl+shift+enter']
+  const next = candidates.find(shortcut => shortcut !== primary) ?? candidates[0]
+
+  return {
+    queueSteer: primary,
+    queueNext: next
+  }
+}
+
 export const useSenderShortcuts = ({
   enabled,
   isInlineEdit,
@@ -38,6 +51,7 @@ export const useSenderShortcuts = ({
   const { data: configRes } = useSWR<ConfigResponse>('/api/config')
   const mergedShortcuts = configRes?.sources?.merged?.shortcuts
   const resolvedSendShortcut = resolveSendShortcut(mergedShortcuts?.sendMessage, isMac)
+  const queuedMessageShortcuts = resolveQueuedMessageShortcuts(resolvedSendShortcut, isMac)
 
   const composerControlShortcuts = useComposerControlShortcuts({
     enabled,
@@ -73,6 +87,7 @@ export const useSenderShortcuts = ({
   return {
     clearInputShortcut: mergedShortcuts?.clearInput,
     composerControlShortcuts,
-    resolvedSendShortcut
+    resolvedSendShortcut,
+    queuedMessageShortcuts
   }
 }

package/src/components/chat/sender/@hooks/use-sender-submit.ts

@@ -1,3 +1,4 @@
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { TFunction } from 'i18next'
 
 import type { MessageInstance } from 'antd/es/message/interface'
@@ -11,6 +12,7 @@ export const useSenderSubmit = ({
   pendingImages,
   pendingFiles,
   isBusy,
+  allowWhileBusy,
   isInlineEdit,
   modelUnavailable,
   interactionRequest,
@@ -25,20 +27,26 @@ export const useSenderSubmit = ({
   pendingImages: Parameters<typeof buildMessageContent>[1]
   pendingFiles: Parameters<typeof buildMessageContent>[2]
   isBusy: boolean
+  allowWhileBusy: boolean
   isInlineEdit: boolean
   modelUnavailable?: boolean
   interactionRequest?: { id: string } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
-  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
-  onSendContent: (content: ReturnType<typeof buildMessageContent>) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSend: (text: string, mode?: SessionQueuedMessageMode) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (
+    content: ReturnType<typeof buildMessageContent>,
+    mode?: SessionQueuedMessageMode
+  ) => SenderSubmitResult | Promise<SenderSubmitResult>
   message: MessageInstance
   t: TFunction
   resetComposer: () => void
 }) => {
-  return async () => {
+  return async (mode?: SessionQueuedMessageMode) => {
     const input = getInput()
 
-    if (isBusy || (input.trim() === '' && pendingImages.length === 0 && pendingFiles.length === 0)) {
+    if (
+      ((isBusy && !allowWhileBusy) || (input.trim() === '' && pendingImages.length === 0 && pendingFiles.length === 0))
+    ) {
       return
     }
     if (!isInlineEdit && modelUnavailable) {
@@ -61,14 +69,14 @@ export const useSenderSubmit = ({
     if (pendingImages.length > 0 || pendingFiles.length > 0) {
       const content = buildMessageContent(input, pendingImages, pendingFiles)
       if (isInlineEdit) {
-        didSubmit = (await onSendContent(content)) !== false
+        didSubmit = (await onSendContent(content, mode)) !== false
       } else {
-        void onSendContent(content)
+        void onSendContent(content, mode)
       }
     } else if (isInlineEdit) {
-      didSubmit = (await onSend(input)) !== false
+      didSubmit = (await onSend(input, mode)) !== false
     } else {
-      void onSend(input)
+      void onSend(input, mode)
     }
 
     if (!didSubmit) {

package/src/components/chat/sender/@types/sender-props.ts

@@ -1,6 +1,11 @@
 import type { ReactNode } from 'react'
 
-import type { AskUserQuestionParams, ChatMessageContent, SessionStatus } from '@vibe-forge/core'
+import type {
+  AskUserQuestionParams,
+  ChatMessageContent,
+  SessionQueuedMessageMode,
+  SessionStatus
+} from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
@@ -10,8 +15,11 @@ import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import type { SenderInitialContent, SenderSubmitResult, SenderVariant } from './sender-types'
 
 export interface SenderProps {
-  onSend: (text: string) => SenderSubmitResult | Promise<SenderSubmitResult>
-  onSendContent: (content: ChatMessageContent[]) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSend: (text: string, mode?: SessionQueuedMessageMode) => SenderSubmitResult | Promise<SenderSubmitResult>
+  onSendContent: (
+    content: ChatMessageContent[],
+    mode?: SessionQueuedMessageMode
+  ) => SenderSubmitResult | Promise<SenderSubmitResult>
   variant?: SenderVariant
   adapterLocked?: boolean
   sessionStatus?: SessionStatus
@@ -20,6 +28,12 @@ export interface SenderProps {
   sessionInfo?: SessionInfo | null
   interactionRequest?: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse?: (id: string, data: string | string[]) => void
+  interactionOptionNavigation?: {
+    optionCount: number
+    activeIndex: number
+    onMove: (delta: number) => void
+    onSubmit: () => void
+  }
   placeholder?: string
   initialContent?: SenderInitialContent
   onCancel?: () => void
@@ -44,4 +58,6 @@ export interface SenderProps {
   adapterOptions?: Array<{ value: string; label: ReactNode }>
   onAdapterChange?: (adapter: string) => void
   modelUnavailable?: boolean
+  queueMode?: SessionQueuedMessageMode
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
 }

package/src/components/chat/sender/@types/sender-toolbar-types.ts

@@ -1,5 +1,6 @@
 import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from 'react'
 
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { RefSelectProps } from 'antd'
 
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
@@ -11,12 +12,17 @@ export interface SenderToolbarShortcuts {
   switchModel: string
   switchEffort: string
   switchPermissionMode: string
+  queueSteer: string
+  queueNext: string
 }
 
 export interface SenderToolbarState {
   isInlineEdit: boolean
   isThinking: boolean
   modelUnavailable: boolean
+  sendBlocked: boolean
+  sendBlockedTooltip?: string
+  showConfirmInteractionAction: boolean
   adapterLocked: boolean
   submitLoading: boolean
   supportsEffort: boolean
@@ -34,6 +40,8 @@ export interface SenderToolbarState {
   resolvedSendShortcut: string
   hasComposerContent: boolean
   hasSendText: boolean
+  queueMode: SessionQueuedMessageMode
+  showQueueModeControl: boolean
 }
 
 export interface SenderToolbarData {
@@ -47,6 +55,7 @@ export interface SenderToolbarData {
   adapterOptions?: Array<{ value: string; label: ReactNode }>
   composerControlShortcuts: SenderToolbarShortcuts
   submitLabel?: string
+  confirmInteractionLabel?: string
 }
 
 export interface SenderToolbarRefs {
@@ -77,7 +86,9 @@ export interface SenderToolbarHandlers {
   onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
   onEffortChange?: (effort: ChatEffort) => void
   onAdapterChange?: (adapter: string) => void
-  onSend: () => void
+  onSend: (mode?: SessionQueuedMessageMode) => void
   onInterrupt: () => void
   onCancel?: () => void
+  onConfirmInteractionOption?: () => void
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
 }

package/src/components/chat/sender/Sender.scss

@@ -1,4 +1,6 @@
 .chat-input-wrapper {
+  width: 100%;
+  margin: 0;
   border-top: none;
   position: relative;
   background-color: var(--bg-color);
@@ -6,6 +8,7 @@
 
 .chat-input-wrapper--inline-edit {
   width: 100%;
+  margin: 0;
 }
 
 .chat-input-container {

package/src/components/chat/sender/Sender.tsx

@@ -1,10 +1,8 @@
 import './Sender.scss'
 
-import { ThinkingStatus } from '#~/components/chat/ThinkingStatus'
 import { useSenderController } from '#~/components/chat/sender/@hooks/use-sender-controller'
 
 import { SenderBody } from './@components/sender-body/SenderBody'
-import { SenderInteractionPanel } from './@components/sender-interaction-panel/SenderInteractionPanel'
 import type { SenderProps } from './@types/sender-props'
 
 export function Sender(props: SenderProps) {
@@ -18,16 +16,6 @@ export function Sender(props: SenderProps) {
         controller.isInlineEdit ? 'chat-input-wrapper--inline-edit' : ''
       ].filter(Boolean).join(' ')}
     >
-      {controller.isThinking && <ThinkingStatus />}
-      {!controller.isInlineEdit && controller.interactionRequest != null && (
-        <SenderInteractionPanel
-          interactionRequest={controller.interactionRequest}
-          permissionContext={controller.permissionContext}
-          deniedTools={controller.deniedTools}
-          reasons={controller.reasons}
-          onInteractionResponse={controller.interactionResponse}
-        />
-      )}
       {!controller.hideSender && (
         <SenderBody
           isInlineEdit={controller.isInlineEdit}
@@ -47,6 +35,8 @@ export function Sender(props: SenderProps) {
           onCursorChange={controller.onCursorChange}
           onKeyDown={controller.handleKeyDown}
           onPaste={controller.attachments.handlePaste}
+          secondarySendShortcut={controller.secondarySendShortcut}
+          onSecondarySendShortcut={controller.onSecondarySendShortcut}
           resolveCompletionMatch={controller.completion.resolveCompletionMatch}
           resolveTokenDecorations={controller.completion.resolveTokenDecorations}
           toolbarState={controller.toolbar.toolbarState}

package/src/hooks/chat/session-view-cache.ts

@@ -1,4 +1,4 @@
-import type { ChatMessage } from '@vibe-forge/core'
+import type { ChatMessage, SessionMessageQueueState } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { ChatErrorState, InteractionRequestState } from './interaction-state'
@@ -6,6 +6,7 @@ import type { ChatErrorState, InteractionRequestState } from './interaction-stat
 export interface ChatSessionViewSnapshot {
   messages: ChatMessage[]
   sessionInfo: SessionInfo | null
+  queuedMessages: SessionMessageQueueState
   errorState: ChatErrorState | null
   interactionRequest: InteractionRequestState | null
   isHydrated: boolean
@@ -18,6 +19,7 @@ export const createChatSessionViewSnapshot = (
 ): ChatSessionViewSnapshot => ({
   messages: value?.messages ?? [],
   sessionInfo: value?.sessionInfo ?? null,
+  queuedMessages: value?.queuedMessages ?? { steer: [], next: [] },
   errorState: value?.errorState ?? null,
   interactionRequest: value?.interactionRequest ?? null,
   isHydrated: value?.isHydrated ?? false
@@ -42,6 +44,7 @@ export const restoreChatSessionViewSnapshot = (snapshot?: ChatSessionViewSnapsho
   return {
     messages: restorable.messages,
     sessionInfo: restorable.sessionInfo,
+    queuedMessages: restorable.queuedMessages,
     errorState: restorable.errorState,
     interactionRequest: restorable.interactionRequest,
     isReady: restorable.isHydrated

package/src/hooks/chat/use-chat-adapter.ts

@@ -57,7 +57,11 @@ export function useChatAdapter() {
               alt: '',
               'aria-hidden': true
             })
-            : null,
+            : createElement('span', {
+              key: 'fallback-icon',
+              className: 'adapter-option__icon adapter-option__icon--fallback material-symbols-rounded',
+              'aria-hidden': true
+            }, 'deployed_code'),
           createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
         ])
       }

package/src/hooks/chat/use-chat-model-adapter-selection.tsx

@@ -410,7 +410,11 @@ export function useChatModelAdapterSelection({
               alt: '',
               'aria-hidden': true
             })
-            : null,
+            : createElement('span', {
+              key: 'fallback-icon',
+              className: 'adapter-option__icon adapter-option__icon--fallback material-symbols-rounded',
+              'aria-hidden': true
+            }, 'deployed_code'),
           createElement('span', { key: 'text', className: 'adapter-option__text' }, display.title)
         ])
       }

package/src/hooks/chat/use-chat-session-actions.ts

@@ -4,9 +4,18 @@ import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useSWRConfig } from 'swr'
 
-import { branchSessionFromMessage, createSession, getApiErrorMessage } from '#~/api.js'
+import {
+  branchSessionFromMessage,
+  createQueuedMessage,
+  createSession,
+  deleteQueuedMessage,
+  getApiErrorMessage,
+  moveQueuedMessage,
+  reorderQueuedMessages,
+  updateQueuedMessage
+} from '#~/api.js'
 import { connectionManager } from '#~/connectionManager.js'
-import type { ChatMessageContent, Session } from '@vibe-forge/core'
+import type { ChatMessageContent, Session, SessionQueuedMessageMode } from '@vibe-forge/core'
 import type { ChatEffort } from './use-chat-effort'
 import type { PermissionMode } from './use-chat-permission-mode'
 
@@ -61,7 +70,7 @@ export function useChatSessionActions({
     setIsCreating(false)
   }, [isCreating, session?.id])
 
-  const send = useCallback(async (text: string) => {
+  const send = useCallback(async (text: string, _mode?: SessionQueuedMessageMode) => {
     if (text.trim() === '' || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
@@ -108,7 +117,7 @@ export function useChatSessionActions({
     t
   ])
 
-  const sendContent = useCallback(async (content: ChatMessageContent[]) => {
+  const sendContent = useCallback(async (content: ChatMessageContent[], _mode?: SessionQueuedMessageMode) => {
     if (content.length === 0 || isThinking) return false
     if (!hasAvailableModels) {
       void message.warning(t('chat.modelConfigRequired'))
@@ -200,11 +209,97 @@ export function useChatSessionActions({
     return runMessageAction(messageId, 'edit', { content })
   }, [runMessageAction])
 
+  const enqueueContent = useCallback(async (mode: SessionQueuedMessageMode, content: ChatMessageContent[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+    if (content.length === 0) {
+      return false
+    }
+
+    try {
+      await createQueuedMessage(session.id, mode, content)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const updateQueuedContent = useCallback(async (queueId: string, content: ChatMessageContent[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+    if (content.length === 0) {
+      return false
+    }
+
+    try {
+      await updateQueuedMessage(session.id, queueId, content)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const removeQueuedContent = useCallback(async (queueId: string) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await deleteQueuedMessage(session.id, queueId)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const moveQueuedContent = useCallback(async (queueId: string, mode: SessionQueuedMessageMode) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await moveQueuedMessage(session.id, queueId, mode)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
+  const reorderQueuedContent = useCallback(async (mode: SessionQueuedMessageMode, ids: string[]) => {
+    if (session?.id == null || session.id === '') {
+      return false
+    }
+
+    try {
+      await reorderQueuedMessages(session.id, mode, ids)
+      return true
+    } catch (err) {
+      console.error(err)
+      void message.error(getApiErrorMessage(err, t('common.operationFailed')))
+      return false
+    }
+  }, [message, session?.id, t])
+
   return {
     isCreating,
     isThinking,
     send,
     sendContent,
+    enqueueContent,
+    updateQueuedContent,
+    removeQueuedContent,
+    moveQueuedContent,
+    reorderQueuedContent,
     editMessage,
     forkMessage,
     interrupt,