@vibe-forge/client 0.11.2 → 0.11.3

package/src/components/chat/sender/@components/sender-submit-action/SenderSubmitAction.scss

@@ -40,10 +40,20 @@
     color: var(--primary-color, #6366f1);
     border-color: var(--primary-color, #6366f1);
   }
-  &.thinking {
+  &.stop {
     color: #fff;
     border-color: #dc2626;
     background: linear-gradient(180deg, #ef4444, #dc2626);
+
+    &:hover {
+      color: #fff;
+      border-color: #dc2626;
+      background: linear-gradient(180deg, #ef4444, #dc2626);
+    }
+
+    .material-symbols-rounded {
+      transform: none;
+    }
   }
   &.disabled {
     color: #9ca3af;
@@ -51,4 +61,91 @@
     border-color: var(--border-color);
     opacity: .72;
   }
+
+  &.blocked {
+    cursor: not-allowed;
+
+    &:hover {
+      color: #9ca3af;
+      border-color: var(--border-color);
+      background: color-mix(
+        in srgb,
+        var(--bg-color, #fff) 92%,
+        var(--sub-bg-color, #f3f4f6) 8%
+      );
+    }
+
+    .material-symbols-rounded {
+      transform: none;
+    }
+  }
+}
+
+.chat-confirm-btn.ant-btn {
+  height: var(--sender-control-height);
+  padding: 0 10px;
+  border-radius: var(--sender-control-radius);
+  border-color: var(--border-color);
+  background: var(--bg-color, #fff);
+  box-shadow: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+
+  .material-symbols-rounded {
+    font-size: 15px;
+    line-height: 1;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: color-mix(
+      in srgb,
+      var(--primary-color, #2563eb) 38%,
+      var(--border-color) 62%
+    );
+    color: var(--text-color, #1f2937);
+    background: color-mix(
+      in srgb,
+      var(--bg-color, #fff) 90%,
+      var(--sub-bg-color, #eff6ff) 10%
+    );
+  }
+}
+
+.sender-send-tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sender-send-tooltip__row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sender-send-tooltip__label {
+  min-width: 0;
+  color: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+}
+
+.sender-send-tooltip-popover {
+  pointer-events: none;
+
+  .ant-tooltip-inner {
+    padding: 8px 10px !important;
+  }
+
+  .shortcut-display {
+    background: rgba(255, 255, 255, .12);
+    border-color: rgba(255, 255, 255, .16);
+    color: rgba(255, 255, 255, .92);
+    box-shadow: none;
+    flex: 0 0 auto;
+  }
 }

package/src/components/chat/sender/@components/sender-submit-action/SenderSubmitAction.tsx

@@ -1,9 +1,11 @@
 import '../sender-toolbar/SenderSelectShared.scss'
 import './SenderSubmitAction.scss'
 
-import { Button } from 'antd'
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
+import { Button, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 
+import { ShortcutDisplay } from '#~/components/ShortcutDisplay'
 import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
 
 export function SenderSubmitAction({
@@ -11,29 +13,51 @@ export function SenderSubmitAction({
   submitLoading,
   submitLabel,
   hasComposerContent,
-  hasSendText,
   modelUnavailable,
+  sendBlocked,
+  sendBlockedTooltip,
+  showConfirmInteractionAction,
+  confirmInteractionLabel,
   isThinking,
   resolvedSendShortcut,
+  queueSteerShortcut,
+  queueNextShortcut,
   isMac,
   onCancel,
+  onConfirmInteractionAction,
   onSend,
-  onInterrupt
+  onStop
 }: {
   isInlineEdit: boolean
   submitLoading: boolean
   submitLabel?: string
   hasComposerContent: boolean
-  hasSendText: boolean
   modelUnavailable: boolean
+  sendBlocked: boolean
+  sendBlockedTooltip?: string
+  showConfirmInteractionAction: boolean
+  confirmInteractionLabel?: string
   isThinking: boolean
   resolvedSendShortcut: string
+  queueSteerShortcut?: string
+  queueNextShortcut?: string
   isMac: boolean
   onCancel?: () => void
-  onSend: () => void
-  onInterrupt: () => void
+  onConfirmInteractionAction?: () => void
+  onSend: (mode?: SessionQueuedMessageMode) => void
+  onStop?: () => void
 }) {
   const { t } = useTranslation()
+  const showStopAction = isThinking && !hasComposerContent
+  const isSendDisabled = !showStopAction && (modelUnavailable || sendBlocked)
+  const handleSendClick = () => onSend()
+  const buttonClasses = [
+    'chat-send-btn',
+    hasComposerContent && !isSendDisabled ? 'active' : '',
+    showStopAction ? 'stop' : '',
+    isSendDisabled ? 'disabled' : '',
+    sendBlocked ? 'blocked' : ''
+  ].filter(Boolean).join(' ')
 
   if (isInlineEdit) {
     return (
@@ -49,7 +73,7 @@ export function SenderSubmitAction({
           size='small'
           loading={submitLoading}
           disabled={!hasComposerContent}
-          onClick={onSend}
+          onClick={handleSendClick}
         >
           {submitLabel ?? t('chat.send')}
         </Button>
@@ -57,23 +81,119 @@ export function SenderSubmitAction({
     )
   }
 
+  if (isThinking) {
+    if (showStopAction) {
+      return (
+        <Tooltip
+          title={
+            <div className='sender-send-tooltip'>
+              <div className='sender-send-tooltip__row'>
+                <span className='sender-send-tooltip__label'>{t('chat.queue.stopShortcutTooltip')}</span>
+                <ShortcutDisplay shortcut='esc' isMac={isMac} />
+              </div>
+            </div>
+          }
+          placement='top'
+          classNames={{ root: 'sender-send-tooltip-popover' }}
+          trigger={['hover']}
+          mouseEnterDelay={.3}
+          mouseLeaveDelay={.08}
+          arrow={false}
+        >
+          <div className='sender-control-tooltip-target'>
+            <div className={buttonClasses} onClick={onStop}>
+              <span className='material-symbols-rounded'>stop_circle</span>
+            </div>
+          </div>
+        </Tooltip>
+      )
+    }
+
+    return (
+      <Tooltip
+        title={
+          <div className='sender-send-tooltip'>
+            <div className='sender-send-tooltip__row'>
+              <span className='sender-send-tooltip__label'>{t('chat.queue.steerShortcutTooltip')}</span>
+              <ShortcutDisplay shortcut={queueSteerShortcut} isMac={isMac} />
+            </div>
+            <div className='sender-send-tooltip__row'>
+              <span className='sender-send-tooltip__label'>{t('chat.queue.nextShortcutTooltip')}</span>
+              <ShortcutDisplay shortcut={queueNextShortcut} isMac={isMac} />
+            </div>
+          </div>
+        }
+        placement='top'
+        classNames={{ root: 'sender-send-tooltip-popover' }}
+        trigger={['hover']}
+        mouseEnterDelay={.3}
+        mouseLeaveDelay={.08}
+        arrow={false}
+      >
+        <div className='sender-control-tooltip-target'>
+          <div className={buttonClasses} onClick={isSendDisabled ? undefined : handleSendClick}>
+            <span className='material-symbols-rounded'>send</span>
+          </div>
+        </div>
+      </Tooltip>
+    )
+  }
+
+  if (sendBlocked) {
+    return (
+      <>
+        <Tooltip
+          title={sendBlockedTooltip}
+          placement='top'
+          classNames={{ root: 'sender-send-tooltip-popover' }}
+          trigger={['hover']}
+          mouseEnterDelay={.3}
+          mouseLeaveDelay={.08}
+          arrow={false}
+        >
+          <div className='sender-control-tooltip-target'>
+            <div className={buttonClasses} onClick={handleSendClick}>
+              <span className='material-symbols-rounded'>send</span>
+            </div>
+          </div>
+        </Tooltip>
+
+        {showConfirmInteractionAction && onConfirmInteractionAction != null && (
+          <Tooltip
+            title={t('chat.permissionConfirmOptionTooltip')}
+            placement='top'
+            classNames={{ root: 'sender-send-tooltip-popover' }}
+            trigger={['hover']}
+            mouseEnterDelay={.3}
+            mouseLeaveDelay={.08}
+            arrow={false}
+          >
+            <Button
+              autoInsertSpace={false}
+              size='small'
+              type='default'
+              className='chat-confirm-btn'
+              onClick={onConfirmInteractionAction}
+            >
+              <span className='material-symbols-rounded'>task_alt</span>
+              <span>{confirmInteractionLabel ?? t('chat.permissionConfirmOption')}</span>
+            </Button>
+          </Tooltip>
+        )}
+      </>
+    )
+  }
+
   return (
     <ShortcutTooltip
       shortcut={resolvedSendShortcut}
       isMac={isMac}
       title={t('chat.sendShortcutTooltip')}
       targetClassName='sender-control-tooltip-target'
-      enabled={!isThinking}
+      enabled
     >
-      <div
-        className={`chat-send-btn ${hasSendText && !modelUnavailable ? 'active' : ''} ${isThinking ? 'thinking' : ''} ${
-          modelUnavailable ? 'disabled' : ''
-        }`.trim()}
-        onClick={modelUnavailable ? undefined : (isThinking ? onInterrupt : onSend)}
-      >
-        <span className='material-symbols-rounded'>
-          {isThinking ? 'stop_circle' : 'send'}
-        </span>
+      <div className={buttonClasses} onClick={isSendDisabled ? undefined : handleSendClick}>
+        <span className='material-symbols-rounded'>send</span>
       </div>
     </ShortcutTooltip>
   )

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.tsx

@@ -36,6 +36,10 @@ export function SenderToolbar({
       />
 
       <div className='toolbar-left'>
+        {!state.isInlineEdit && (
+          <AdapterSelectControl state={state} data={data} handlers={handlers} />
+        )}
+
         <ReferenceActionsControl
           state={state}
           data={data}
@@ -63,23 +67,25 @@ export function SenderToolbar({
       </div>
 
       <div className={`toolbar-right ${state.isInlineEdit ? 'toolbar-right--inline-edit' : ''}`.trim()}>
-        {!state.isInlineEdit && (
-          <AdapterSelectControl state={state} data={data} handlers={handlers} />
-        )}
-
         <SenderSubmitAction
           isInlineEdit={state.isInlineEdit}
           submitLoading={state.submitLoading}
           submitLabel={data.submitLabel}
           hasComposerContent={state.hasComposerContent}
-          hasSendText={state.hasSendText}
           modelUnavailable={state.modelUnavailable}
+          sendBlocked={state.sendBlocked}
+          sendBlockedTooltip={state.sendBlockedTooltip}
+          showConfirmInteractionAction={state.showConfirmInteractionAction}
+          confirmInteractionLabel={data.confirmInteractionLabel}
           isThinking={state.isThinking}
           resolvedSendShortcut={state.resolvedSendShortcut}
+          queueSteerShortcut={data.composerControlShortcuts.queueSteer}
+          queueNextShortcut={data.composerControlShortcuts.queueNext}
           isMac={state.isMac}
           onCancel={handlers.onCancel}
+          onConfirmInteractionAction={handlers.onConfirmInteractionOption}
           onSend={handlers.onSend}
-          onInterrupt={handlers.onInterrupt}
+          onStop={handlers.onInterrupt}
         />
       </div>
     </div>

package/src/components/chat/sender/@core/build-sender-controller-result.ts

@@ -60,6 +60,8 @@ export const buildSenderControllerResult = ({
   modelUnavailable,
   permissionContext,
   placeholder,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   editorRef,
   toolbar
 }: {
@@ -80,6 +82,8 @@ export const buildSenderControllerResult = ({
     reasons?: string[]
   }
   placeholder: string
+  secondarySendShortcut?: string
+  onSecondarySendShortcut?: () => void
   editorRef: MutableRefObject<SenderEditorHandle | null>
   toolbar: SenderControllerToolbar
 }) => ({
@@ -100,6 +104,8 @@ export const buildSenderControllerResult = ({
   interactionResponse,
   modelUnavailable,
   placeholder,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   onInputChange: completion.handleInputChange,
   onCursorChange: completion.handleCursorChange,
   onCancelContextPicker: () => {

package/src/components/chat/sender/@core/build-sender-toolbar.ts

@@ -17,10 +17,16 @@ export const buildSenderToolbar = ({
   isInlineEdit,
   isMac,
   isThinking,
+  sendBlocked,
+  sendBlockedTooltip,
+  showConfirmInteractionAction,
+  confirmInteractionLabel,
+  onConfirmInteractionOption,
   message,
   props,
   refs,
   referenceActions,
+  queuedMessageShortcuts,
   resolvedSendShortcut,
   selectOverlays,
   supportsEffort,
@@ -31,14 +37,22 @@ export const buildSenderToolbar = ({
     handleImageUpload: () => void
     handleOpenContextPicker: () => void
   }
-  callbacks: { onSend: () => void }
+  callbacks: { onSend: (mode?: 'steer' | 'next') => void }
   composer: { input: string; pendingImageCount: number; pendingFileCount: number }
-  composerControlShortcuts: SenderToolbarData['composerControlShortcuts']
+  composerControlShortcuts: Pick<
+    SenderToolbarData['composerControlShortcuts'],
+    'switchEffort' | 'switchModel' | 'switchPermissionMode'
+  >
   focusRestore: { queueEditorFocusRestore: () => void }
   isBusy: boolean
   isInlineEdit: boolean
   isMac: boolean
   isThinking: boolean
+  sendBlocked: boolean
+  sendBlockedTooltip?: string
+  showConfirmInteractionAction: boolean
+  confirmInteractionLabel?: string
+  onConfirmInteractionOption?: () => void
   message: { warning: (content: ReactNode) => unknown }
   props: SenderProps
   refs: {
@@ -57,6 +71,7 @@ export const buildSenderToolbar = ({
     referenceMenuNavigation: SenderToolbarRefs['referenceMenuNavigation']
     permissionMenuNavigation: SenderToolbarRefs['permissionMenuNavigation']
   }
+  queuedMessageShortcuts: Pick<SenderToolbarData['composerControlShortcuts'], 'queueNext' | 'queueSteer'>
   resolvedSendShortcut: string
   selectOverlays: {
     showModelSelect: boolean
@@ -82,7 +97,9 @@ export const buildSenderToolbar = ({
       onModelChange: props.onModelChange,
       onToggleRecommendedModel: props.onToggleRecommendedModel,
       onPermissionModeChange: props.onPermissionModeChange,
+      onQueueModeChange: props.onQueueModeChange,
       onCancel: props.onCancel,
+      onConfirmInteractionOption,
       onSend: callbacks.onSend
     },
     composer,
@@ -95,6 +112,8 @@ export const buildSenderToolbar = ({
       modelSearchOptions: props.modelSearchOptions,
       permissionMode: props.permissionMode ?? 'default',
       permissionModeOptions: props.permissionModeOptions ?? [],
+      queueMode: props.queueMode ?? 'steer',
+      queuedMessageShortcuts,
       recommendedModelOptions: props.recommendedModelOptions,
       servicePreviewModelOptions: props.servicePreviewModelOptions,
       resolvedSendShortcut,
@@ -110,10 +129,14 @@ export const buildSenderToolbar = ({
       isInlineEdit,
       isMac,
       isThinking,
+      sendBlocked,
+      sendBlockedTooltip,
+      showConfirmInteractionAction,
       modelUnavailable: props.modelUnavailable,
       referenceActions,
       refs,
       selectOverlays,
+      confirmInteractionLabel,
       submitLabel: props.submitLabel,
       submitLoading: props.submitLoading === true,
       supportsEffort

package/src/components/chat/sender/@core/create-sender-toolbar-handlers.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
 
 import type { SenderToolbarHandlers } from '../@types/sender-toolbar-types'
 
@@ -19,7 +20,9 @@ export const createSenderToolbarHandlers = ({
   onModelChange,
   onToggleRecommendedModel,
   onPermissionModeChange,
+  onQueueModeChange,
   onCancel,
+  onConfirmInteractionOption,
   onSend,
   referenceActions,
   selectOverlays,
@@ -41,8 +44,10 @@ export const createSenderToolbarHandlers = ({
   onModelChange?: (model: string) => void
   onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
   onPermissionModeChange?: (mode: PermissionMode) => void
+  onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
   onCancel?: () => void
-  onSend: () => void
+  onConfirmInteractionOption?: () => void
+  onSend: (mode?: SessionQueuedMessageMode) => void
   referenceActions: {
     setShowReferenceActions: (nextOpen: boolean) => void
     setShowPermissionActions: (nextOpen: boolean) => void
@@ -108,8 +113,10 @@ export const createSenderToolbarHandlers = ({
     onToggleRecommendedModel,
     onEffortChange,
     onAdapterChange,
+    onQueueModeChange,
     onSend,
     onInterrupt,
-    onCancel
+    onCancel,
+    onConfirmInteractionOption
   } satisfies SenderToolbarHandlers
 }

package/src/components/chat/sender/@core/interaction-request.ts

@@ -1,5 +1,5 @@
 import type { AskUserQuestionParams } from '@vibe-forge/core'
 
 export const shouldHideSenderForInteraction = (
-  interactionRequest: { id: string; payload: AskUserQuestionParams } | null | undefined
-) => interactionRequest?.payload.kind === 'permission'
+  _interactionRequest: { id: string; payload: AskUserQuestionParams } | null | undefined
+) => false

package/src/components/chat/sender/@core/sender-toolbar-bindings.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
 
+import type { SessionQueuedMessageMode } from '@vibe-forge/core'
+
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
@@ -33,8 +35,10 @@ export const createSenderToolbarBindings = ({
     onModelChange?: (model: string) => void
     onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
     onPermissionModeChange?: (mode: PermissionMode) => void
+    onQueueModeChange?: (mode: SessionQueuedMessageMode) => void
     onCancel?: () => void
-    onSend: () => void
+    onConfirmInteractionOption?: () => void
+    onSend: (mode?: SessionQueuedMessageMode) => void
   }
   composer: { input: string; pendingImageCount: number; pendingFileCount: number }
   resources: { message: { warning: (content: ReactNode) => unknown }; t: (key: string) => string }
@@ -46,6 +50,8 @@ export const createSenderToolbarBindings = ({
     modelSearchOptions?: ModelSelectOption[]
     permissionMode: PermissionMode
     permissionModeOptions: SenderToolbarData['permissionModeOptions']
+    queueMode: SessionQueuedMessageMode
+    queuedMessageShortcuts: Pick<SenderToolbarData['composerControlShortcuts'], 'queueNext' | 'queueSteer'>
     recommendedModelOptions?: ModelSelectOption[]
     servicePreviewModelOptions?: ModelSelectOption[]
     resolvedSendShortcut: string
@@ -56,11 +62,17 @@ export const createSenderToolbarBindings = ({
   ui: {
     adapterLocked: boolean
     canOpenReferenceActions: boolean
-    composerControlShortcuts: SenderToolbarData['composerControlShortcuts']
+    composerControlShortcuts: Pick<
+      SenderToolbarData['composerControlShortcuts'],
+      'switchEffort' | 'switchModel' | 'switchPermissionMode'
+    >
     focusRestore: { queueEditorFocusRestore: () => void }
     isInlineEdit: boolean
     isMac: boolean
     isThinking: boolean
+    sendBlocked: boolean
+    sendBlockedTooltip?: string
+    showConfirmInteractionAction: boolean
     modelUnavailable?: boolean
     referenceActions: {
       showReferenceActions: boolean
@@ -85,6 +97,7 @@ export const createSenderToolbarBindings = ({
       openEffortSelector: () => boolean
     }
     submitLabel?: string
+    confirmInteractionLabel?: string
     submitLoading: boolean
     supportsEffort: boolean
   }
@@ -93,6 +106,9 @@ export const createSenderToolbarBindings = ({
     isInlineEdit: ui.isInlineEdit,
     isThinking: ui.isThinking,
     modelUnavailable: Boolean(ui.modelUnavailable),
+    sendBlocked: ui.sendBlocked,
+    sendBlockedTooltip: ui.sendBlockedTooltip,
+    showConfirmInteractionAction: ui.showConfirmInteractionAction,
     adapterLocked: ui.adapterLocked,
     submitLoading: ui.submitLoading,
     supportsEffort: ui.supportsEffort,
@@ -108,6 +124,8 @@ export const createSenderToolbarBindings = ({
     selectedAdapter: selection.selectedAdapter,
     isMac: ui.isMac,
     resolvedSendShortcut: selection.resolvedSendShortcut,
+    queueMode: selection.queueMode,
+    showQueueModeControl: ui.isThinking && !ui.isInlineEdit,
     hasComposerContent: composer.input.trim() !== '' || composer.pendingImageCount > 0 || composer.pendingFileCount > 0,
     hasSendText: composer.input.trim() !== ''
   }
@@ -121,8 +139,12 @@ export const createSenderToolbarBindings = ({
     effortOptions: selection.effortOptions,
     permissionModeOptions: selection.permissionModeOptions,
     adapterOptions: selection.adapterOptions,
-    composerControlShortcuts: ui.composerControlShortcuts,
-    submitLabel: ui.submitLabel
+    composerControlShortcuts: {
+      ...ui.composerControlShortcuts,
+      ...selection.queuedMessageShortcuts
+    },
+    submitLabel: ui.submitLabel,
+    confirmInteractionLabel: ui.confirmInteractionLabel
   }
 
   const toolbarRefs: SenderToolbarRefs = {
@@ -144,7 +166,9 @@ export const createSenderToolbarBindings = ({
     onModelChange: callbacks.onModelChange,
     onToggleRecommendedModel: callbacks.onToggleRecommendedModel,
     onPermissionModeChange: callbacks.onPermissionModeChange,
+    onQueueModeChange: callbacks.onQueueModeChange,
     onCancel: callbacks.onCancel,
+    onConfirmInteractionOption: callbacks.onConfirmInteractionOption,
     onSend: callbacks.onSend,
     referenceActions: ui.referenceActions,
     selectOverlays: ui.selectOverlays,