@vibe-forge/client 0.11.2 → 1.0.0

package/src/components/chat/sender/@components/sender-monaco-editor/use-sender-monaco-theme.ts

@@ -1,19 +1,68 @@
+import * as monacoApi from 'monaco-editor'
+import type { editor as MonacoEditorNamespace } from 'monaco-editor'
 import { useEffect, useState } from 'react'
 
-const getThemeName = () => (document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs')
+const SENDER_MONACO_LIGHT_THEME = 'vf-sender-light'
+const SENDER_MONACO_DARK_THEME = 'vf-sender-dark'
+const HEX_COLOR_PATTERN = /^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i
+
+const readCssColor = (styles: CSSStyleDeclaration, name: string, fallback: string) => {
+  const value = styles.getPropertyValue(name).trim()
+
+  if (HEX_COLOR_PATTERN.test(value)) {
+    return value
+  }
+
+  return fallback
+}
+
+const buildSenderMonacoTheme = (isDark: boolean): MonacoEditorNamespace.IStandaloneThemeData => {
+  const styles = window.getComputedStyle(document.documentElement)
+  const background = readCssColor(styles, '--bg-color', isDark ? '#141414' : '#ffffff')
+  const foreground = readCssColor(styles, '--text-color', isDark ? '#ffffff' : '#000000')
+  const placeholder = readCssColor(styles, '--placeholder-color', isDark ? '#575859' : '#9ca3af')
+  const primaryColor = readCssColor(styles, '--primary-color', isDark ? '#3b82f6' : '#2563eb')
+  const selectionBackground = readCssColor(styles, '--primary-soft-bg', isDark ? '#111b26' : '#eff6ff')
+
+  return {
+    base: isDark ? 'vs-dark' : 'vs',
+    colors: {
+      'editor.background': background,
+      'editor.foreground': foreground,
+      'editor.inactiveSelectionBackground': selectionBackground,
+      'editor.placeholder.foreground': placeholder,
+      'editor.selectionBackground': selectionBackground,
+      'editorCursor.foreground': primaryColor
+    },
+    inherit: false,
+    rules: []
+  }
+}
+
+const defineSenderMonacoTheme = (isDark: boolean) => {
+  const themeName = isDark ? SENDER_MONACO_DARK_THEME : SENDER_MONACO_LIGHT_THEME
+
+  monacoApi.editor.defineTheme(themeName, buildSenderMonacoTheme(isDark))
+
+  return themeName
+}
+
+const getThemeName = () => defineSenderMonacoTheme(document.documentElement.classList.contains('dark'))
 
 export const useSenderMonacoTheme = () => {
   const [themeName, setThemeName] = useState(getThemeName)
 
   useEffect(() => {
-    const observer = new MutationObserver(() => {
+    const syncThemeName = () => {
       setThemeName(getThemeName())
-    })
+    }
+    const observer = new MutationObserver(syncThemeName)
 
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     })
+    syncThemeName()
 
     return () => {
       observer.disconnect()

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,103 @@
     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;
+  }
+}
+
+@media (max-width: 960px) {
+  .chat-send-btn {
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+
+    .material-symbols-rounded {
+      font-size: 14px;
+    }
+  }
 }

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/SenderSelectBase.scss

@@ -69,3 +69,24 @@
     opacity: .56;
   }
 }
+
+@media (max-width: 960px) {
+  .model-select,
+  .effort-select {
+    .ant-select-arrow {
+      width: 20px;
+      min-width: 20px;
+      flex: 0 0 20px;
+    }
+
+    &.ant-select-single .ant-select-selector {
+      padding-left: 6px !important;
+      padding-inline-start: 6px !important;
+    }
+
+    .ant-select-selection-item,
+    .ant-select-selection-placeholder {
+      font-size: 11px;
+    }
+  }
+}

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectShared.scss

@@ -116,3 +116,24 @@
 .adapter-select-tooltip-target--locked {
   cursor: help;
 }
+
+@media (max-width: 960px) {
+  .sender-select-arrow {
+    font-size: 16px;
+  }
+
+  .model-select,
+  .effort-select,
+  .adapter-select {
+    font-size: 11px;
+
+    .ant-select-selector {
+      padding: 0 0 0 6px !important;
+    }
+
+    .ant-select-selection-item,
+    .ant-select-selection-placeholder {
+      font-size: 11px !important;
+    }
+  }
+}

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

@@ -15,6 +15,7 @@
   align-items: center;
   gap: 12px;
   margin: 4px -6px -6px;
+  min-width: 0;
 
   .toolbar-left {
     display: flex;
@@ -29,6 +30,7 @@
     align-items: center;
     gap: 4px;
     flex-shrink: 0;
+    min-width: 0;
   }
 
   .toolbar-right--inline-edit {
@@ -92,8 +94,69 @@
 
 @media (max-width: 960px) {
   .chat-input-toolbar {
+    --sender-control-height: 24px;
+
+    gap: 6px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-top: 6px;
+    row-gap: 6px;
+
+    .toolbar-left {
+      gap: 6px;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .toolbar-right {
+      gap: 6px;
+      margin-left: auto;
+      max-width: 100%;
+    }
+
     .toolbar-btn__text {
       display: none;
     }
+
+    .toolbar-btn {
+      min-height: var(--sender-control-height);
+
+      .material-symbols-rounded {
+        font-size: 16px;
+      }
+    }
+
+    .toolbar-btn__icon-shell {
+      width: var(--sender-control-height);
+      height: var(--sender-control-height);
+    }
+
+    .toolbar-right--inline-edit {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .sender-select-shell,
+  .sender-control-tooltip-target,
+  .adapter-select-tooltip-target {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .model-select,
+  .effort-select {
+    max-width: min(100%, 196px);
+  }
+
+  .model-select .ant-select-selection-item,
+  .model-select .ant-select-selection-placeholder,
+  .effort-select .ant-select-selection-item,
+  .effort-select .ant-select-selection-placeholder {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }

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