@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/sender/@components/reference-actions/ReferenceActionsControl.tsx

@@ -4,19 +4,10 @@ import './ReferenceActionsOption.scss'
 import { Popover } from 'antd'
 import { useTranslation } from 'react-i18next'
 
-import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
-
-import type {
-  SenderToolbarData,
-  SenderToolbarHandlers,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-import { ReferencePermissionActionsPopover } from './ReferencePermissionActionsPopover'
+import type { SenderToolbarHandlers, SenderToolbarRefs, SenderToolbarState } from '../../@types/sender-toolbar-types'
 
 export function ReferenceActionsControl({
   state,
-  data,
   refs,
   handlers
 }: {
@@ -25,43 +16,25 @@ export function ReferenceActionsControl({
     | 'isInlineEdit'
     | 'canOpenReferenceActions'
     | 'showReferenceActions'
-    | 'showPermissionActions'
-    | 'permissionMode'
-    | 'isMac'
   >
-  data: Pick<SenderToolbarData, 'permissionModeOptions' | 'composerControlShortcuts'>
-  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation' | 'permissionMenuNavigation'>
+  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation'>
   handlers: Pick<
     SenderToolbarHandlers,
     | 'onReferenceOpenChange'
-    | 'onShowPermissionActionsChange'
     | 'onOpenContextPicker'
     | 'onReferenceImageSelect'
     | 'onReferenceMenuKeyDown'
-    | 'onPermissionMenuKeyDown'
-    | 'onSelectPermissionMode'
     | 'onCloseReferenceActions'
   >
 }) {
   const { t } = useTranslation()
-  const {
-    isInlineEdit,
-    canOpenReferenceActions,
-    showReferenceActions,
-    showPermissionActions,
-    permissionMode,
-    isMac
-  } = state
-  const { permissionModeOptions, composerControlShortcuts } = data
-  const { referenceMenuNavigation, permissionMenuNavigation } = refs
+  const { isInlineEdit, canOpenReferenceActions, showReferenceActions } = state
+  const { referenceMenuNavigation } = refs
   const {
     onReferenceOpenChange,
-    onShowPermissionActionsChange,
     onOpenContextPicker,
     onReferenceImageSelect,
     onReferenceMenuKeyDown,
-    onPermissionMenuKeyDown,
-    onSelectPermissionMode,
     onCloseReferenceActions
   } = handlers
 
@@ -75,7 +48,6 @@ export function ReferenceActionsControl({
             className='reference-actions-menu-item'
             onMouseEnter={() => {
               referenceMenuNavigation.setActiveKey('image')
-              onShowPermissionActionsChange(false)
             }}
             onFocus={() => referenceMenuNavigation.setActiveKey('image')}
             onKeyDown={(event) => onReferenceMenuKeyDown(event, 'image')}
@@ -93,7 +65,6 @@ export function ReferenceActionsControl({
               className='reference-actions-menu-item'
               onMouseEnter={() => {
                 referenceMenuNavigation.setActiveKey('file')
-                onShowPermissionActionsChange(false)
               }}
               onFocus={() => referenceMenuNavigation.setActiveKey('file')}
               onKeyDown={(event) => onReferenceMenuKeyDown(event, 'file')}
@@ -108,19 +79,6 @@ export function ReferenceActionsControl({
               </span>
             </button>
           )}
-          {!isInlineEdit && permissionModeOptions.length > 0 && (
-            <ReferencePermissionActionsPopover
-              state={{ showReferenceActions, showPermissionActions, permissionMode }}
-              data={{ permissionModeOptions }}
-              refs={{ referenceMenuNavigation, permissionMenuNavigation }}
-              handlers={{
-                onShowPermissionActionsChange,
-                onReferenceMenuKeyDown,
-                onPermissionMenuKeyDown,
-                onSelectPermissionMode
-              }}
-            />
-          )}
         </div>
       }
       open={showReferenceActions}
@@ -131,26 +89,19 @@ export function ReferenceActionsControl({
       destroyOnHidden
       arrow={false}
     >
-      <ShortcutTooltip
-        shortcut={composerControlShortcuts.switchPermissionMode}
-        isMac={isMac}
-        title={t('chat.referenceActionsShortcutTooltip')}
-        enabled={!showReferenceActions}
+      <div
+        className={`toolbar-btn toolbar-btn--reference ${showReferenceActions ? 'active' : ''}`.trim()}
+        tabIndex={-1}
+        onClick={canOpenReferenceActions ? undefined : (event) => {
+          event.preventDefault()
+          void onReferenceOpenChange(true)
+        }}
       >
-        <div
-          className={`toolbar-btn toolbar-btn--reference ${showReferenceActions ? 'active' : ''}`.trim()}
-          tabIndex={-1}
-          onClick={canOpenReferenceActions ? undefined : (event) => {
-            event.preventDefault()
-            void onReferenceOpenChange(true)
-          }}
-        >
-          <span className='toolbar-btn__icon-shell'>
-            <span className='material-symbols-rounded'>add</span>
-          </span>
-          <span className='toolbar-btn__text'>{t('chat.referenceActionsShort')}</span>
-        </div>
-      </ShortcutTooltip>
+        <span className='toolbar-btn__icon-shell'>
+          <span className='material-symbols-rounded'>add</span>
+        </span>
+        <span className='toolbar-btn__text'>{t('chat.referenceActionsShort')}</span>
+      </div>
     </Popover>
   )
 }

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -14,8 +14,10 @@ import type {
 
 import type { PendingContextFile } from '../../@types/sender-composer'
 import type { SenderEditorHandle } from '../../@types/sender-editor'
+import type { SenderProps } from '../../@types/sender-props'
 import type { SenderCompletionMatch, SenderTokenDecoration } from '../../@utils/sender-completion'
 import { SenderAttachments } from '../sender-attachments/SenderAttachments'
+import { SenderHeaderControls } from '../sender-header-controls/SenderHeaderControls'
 import { SenderMonacoEditor } from '../sender-monaco-editor/SenderMonacoEditor'
 import { SenderToolbar } from '../sender-toolbar/SenderToolbar'
 
@@ -44,6 +46,7 @@ export function SenderBody({
   toolbarData,
   toolbarRefs,
   toolbarHandlers,
+  sessionTarget,
   showContextPicker,
   onCancelContextPicker,
   onConfirmContextPicker
@@ -76,6 +79,7 @@ export function SenderBody({
   toolbarData: SenderToolbarData
   toolbarRefs: SenderToolbarRefs
   toolbarHandlers: SenderToolbarHandlers
+  sessionTarget?: SenderProps['sessionTarget']
   showContextPicker: boolean
   onCancelContextPicker: () => void
   onConfirmContextPicker: (files: PendingContextFile[]) => void
@@ -84,6 +88,14 @@ export function SenderBody({
 
   return (
     <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
+      <SenderHeaderControls
+        isInlineEdit={isInlineEdit}
+        sessionTarget={sessionTarget}
+        toolbarState={toolbarState}
+        toolbarData={toolbarData}
+        toolbarRefs={toolbarRefs}
+        toolbarHandlers={toolbarHandlers}
+      />
       <SenderAttachments
         pendingImages={pendingImages}
         pendingFiles={pendingFiles}
@@ -97,7 +109,7 @@ export function SenderBody({
         placeholder={placeholder || t('chat.inputPlaceholder')}
         disabled={(!isInlineEdit && modelUnavailable) || (isInlineEdit && isBusy)}
         sendShortcut={toolbarState.resolvedSendShortcut}
-        sendShortcutDisabled={toolbarState.sendBlocked}
+        sendShortcutDisabled={toolbarState.sendBlocked || toolbarState.hideSubmitAction}
         onSendShortcut={toolbarHandlers.onSend}
         secondarySendShortcut={secondarySendShortcut}
         onSecondarySendShortcut={onSecondarySendShortcut}

package/src/components/chat/sender/@components/sender-header-controls/SenderHeaderControls.tsx

@@ -0,0 +1,157 @@
+import { Tooltip } from 'antd'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useSenderHeaderQueryState } from '#~/hooks/use-sender-header-query-state.js'
+
+import type { SenderProps } from '../../@types/sender-props'
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+import { permissionModeIconMap } from '../../@utils/sender-constants'
+import { PermissionModeControl } from '../permission-mode-control/PermissionModeControl'
+import { SenderSessionTargetBar } from '../session-target/SenderSessionTargetBar'
+
+export function SenderHeaderControls({
+  isInlineEdit,
+  sessionTarget,
+  toolbarState,
+  toolbarData,
+  toolbarRefs,
+  toolbarHandlers
+}: {
+  isInlineEdit: boolean
+  sessionTarget?: SenderProps['sessionTarget']
+  toolbarState: SenderToolbarState
+  toolbarData: SenderToolbarData
+  toolbarRefs: SenderToolbarRefs
+  toolbarHandlers: SenderToolbarHandlers
+}) {
+  const { t } = useTranslation()
+  const { isHeaderCollapsed, setHeaderCollapsed } = useSenderHeaderQueryState()
+  const showPermissionControl = !isInlineEdit && toolbarData.permissionModeOptions.length > 0
+  const hasHeaderControls = !isInlineEdit && (sessionTarget != null || showPermissionControl)
+  const headerStateClass = isHeaderCollapsed ? 'is-collapsed' : 'is-expanded'
+  const selectedPermissionOption = toolbarData.permissionModeOptions.find(
+    option => option.value === toolbarState.permissionMode
+  )
+
+  useEffect(() => {
+    if (isHeaderCollapsed && toolbarState.showPermissionActions) {
+      setHeaderCollapsed(false)
+    }
+  }, [isHeaderCollapsed, setHeaderCollapsed, toolbarState.showPermissionActions])
+
+  if (!hasHeaderControls) {
+    return null
+  }
+
+  const permissionControl = showPermissionControl
+    ? (
+      <PermissionModeControl
+        state={{
+          showPermissionActions: toolbarState.showPermissionActions,
+          permissionMode: toolbarState.permissionMode,
+          canOpenReferenceActions: toolbarState.canOpenReferenceActions,
+          isMac: toolbarState.isMac
+        }}
+        data={{
+          permissionModeOptions: toolbarData.permissionModeOptions,
+          composerControlShortcuts: toolbarData.composerControlShortcuts
+        }}
+        refs={{ permissionMenuNavigation: toolbarRefs.permissionMenuNavigation }}
+        handlers={{
+          onPermissionOpenChange: toolbarHandlers.onPermissionOpenChange,
+          onPermissionMenuKeyDown: toolbarHandlers.onPermissionMenuKeyDown,
+          onSelectPermissionMode: toolbarHandlers.onSelectPermissionMode
+        }}
+      />
+    )
+    : null
+
+  const headerActions = (
+    <div className='chat-input-header-actions'>
+      {permissionControl}
+    </div>
+  )
+
+  const toggleHeader = () => {
+    if (!isHeaderCollapsed) {
+      toolbarHandlers.onPermissionOpenChange(false)
+    }
+    setHeaderCollapsed(!isHeaderCollapsed)
+  }
+
+  const headerToggle = (
+    <div className={`chat-input-header-toggle-shell ${headerStateClass}`.trim()}>
+      {showPermissionControl && isHeaderCollapsed && (
+        <Tooltip
+          title={selectedPermissionOption?.label ?? t('chat.referencePermission')}
+          placement='top'
+          destroyOnHidden
+        >
+          <div
+            className={[
+              'chat-input-header-toggle-mode-indicator',
+              `chat-input-header-toggle-mode-indicator--${toolbarState.permissionMode}`
+            ].join(' ')}
+            aria-label={selectedPermissionOption?.label?.toString() ?? t('chat.referencePermission')}
+          >
+            <span
+              className={[
+                'material-symbols-rounded',
+                'chat-input-header-toggle-mode-icon',
+                `sender-permission-trigger__icon--${toolbarState.permissionMode}`
+              ].join(' ')}
+            >
+              {permissionModeIconMap[toolbarState.permissionMode]}
+            </span>
+          </div>
+        </Tooltip>
+      )}
+      <button
+        type='button'
+        className='chat-input-header-toggle-tab'
+        aria-label={isHeaderCollapsed ? t('chat.expandHeaderControls') : t('chat.collapseHeaderControls')}
+        aria-expanded={!isHeaderCollapsed}
+        onClick={toggleHeader}
+      >
+        <span className='material-symbols-rounded'>
+          {isHeaderCollapsed ? 'unfold_more' : 'unfold_less'}
+        </span>
+      </button>
+    </div>
+  )
+
+  if (sessionTarget != null) {
+    return (
+      <>
+        <SenderSessionTargetBar
+          draft={sessionTarget.draft}
+          locked={sessionTarget.locked}
+          disabled={sessionTarget.disabled}
+          onChange={sessionTarget.onChange}
+          actions={headerActions}
+          className={`chat-input-header-block ${headerStateClass}`.trim()}
+          ariaHidden={isHeaderCollapsed}
+        />
+        {headerToggle}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div
+        className={`chat-input-top-actions chat-input-header-block ${headerStateClass}`.trim()}
+        aria-hidden={isHeaderCollapsed}
+      >
+        {headerActions}
+      </div>
+      {headerToggle}
+    </>
+  )
+}

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

@@ -1,32 +1,16 @@
-import { loader } from '@monaco-editor/react'
 import type { IRange, editor as MonacoEditorNamespace, languages } from 'monaco-editor'
-import * as monacoApi from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { SenderEditorSelection } from '#~/components/chat/sender/@types/sender-editor'
 import type { SenderCompletionMatch } from '#~/components/chat/sender/@utils/sender-completion'
+import { monacoApi } from '#~/components/monaco/monaco-runtime'
 
 export const FONT_SIZE = 13
 export const LINE_HEIGHT = 20
 export const MIN_EDITOR_HEIGHT = LINE_HEIGHT
 export const MAX_EDITOR_HEIGHT = LINE_HEIGHT * 10
 
-const monacoRuntime = globalThis as typeof globalThis & {
-  MonacoEnvironment?: {
-    getWorker: () => Worker
-  }
-}
-
-if (monacoRuntime.MonacoEnvironment == null) {
-  monacoRuntime.MonacoEnvironment = {
-    getWorker: () => new EditorWorker()
-  }
-}
-
-loader.config({ monaco: monacoApi })
-
 export const clampEditorHeight = (height: number) =>
   Math.min(MAX_EDITOR_HEIGHT, Math.max(MIN_EDITOR_HEIGHT, Math.ceil(height)))
 

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

@@ -1,5 +1,8 @@
 .model-select,
-.effort-select {
+.effort-select,
+.account-select {
+  min-width: 0;
+
   .ant-select-selection-search-input {
     height: 100% !important;
   }
@@ -31,12 +34,24 @@
   }
 
   &.ant-select-single .ant-select-selector {
+    flex: 1 1 auto;
+    min-width: 0;
     padding-left: 8px !important;
     padding-right: 0 !important;
     padding-inline-start: 8px !important;
     padding-inline-end: 0 !important;
   }
 
+  .ant-select-selector {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ant-select-selection-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   &.ant-select-single .ant-select-selector .ant-select-selection-item,
   &.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
     display: inline-flex !important;
@@ -72,7 +87,8 @@
 
 @media (max-width: 960px) {
   .model-select,
-  .effort-select {
+  .effort-select,
+  .account-select {
     .ant-select-arrow {
       width: 20px;
       min-width: 20px;

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

@@ -11,7 +11,8 @@
 
   &:hover {
     .model-select,
-    .effort-select {
+    .effort-select,
+    .account-select {
       background: var(--sender-control-hover-bg);
       color: var(--sender-control-hover-color);
     }
@@ -19,6 +20,9 @@
     .model-select .ant-select-selection-item,
     .model-select .ant-select-selection-placeholder,
     .model-select .sender-select-arrow,
+    .account-select .ant-select-selection-item,
+    .account-select .ant-select-selection-placeholder,
+    .account-select .sender-select-arrow,
     .effort-select .ant-select-selection-item,
     .effort-select .ant-select-selection-placeholder,
     .effort-select .effort-option__text,
@@ -41,6 +45,17 @@
   }
 }
 
+.sender-select-shell--compact {
+  .sender-select-body-trigger {
+    inset: 0;
+  }
+
+  .ant-select-arrow,
+  .sender-select-arrow {
+    display: none !important;
+  }
+}
+
 .sender-select-body-trigger {
   position: absolute;
   inset: 0 28px 0 0;
@@ -69,6 +84,7 @@
 
 .model-select,
 .effort-select,
+.account-select,
 .adapter-select {
   height: var(--sender-control-height);
   display: inline-flex;
@@ -124,6 +140,7 @@
 
   .model-select,
   .effort-select,
+  .account-select,
   .adapter-select {
     font-size: 11px;
 

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

@@ -31,6 +31,7 @@
     gap: 4px;
     flex-shrink: 0;
     min-width: 0;
+    justify-content: flex-end;
   }
 
   .toolbar-right--inline-edit {
@@ -113,6 +114,7 @@
       gap: 6px;
       margin-left: auto;
       max-width: 100%;
+      justify-content: flex-end;
     }
 
     .toolbar-btn__text {

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

@@ -7,7 +7,6 @@ import type {
   SenderToolbarState
 } from '../../@types/sender-toolbar-types'
 
-import { AdapterSelectControl } from '../adapter-select/AdapterSelectControl'
 import { EffortSelectControl } from '../effort-select/EffortSelectControl'
 import { ModelSelectControl } from '../model-select/ModelSelectControl'
 import { ReferenceActionsControl } from '../reference-actions/ReferenceActionsControl'
@@ -26,27 +25,26 @@ export function SenderToolbar({
 }) {
   return (
     <div className='chat-input-toolbar'>
-      <input
-        ref={refs.fileInputRef}
-        type='file'
-        accept='image/*'
-        multiple
-        onChange={handlers.onImageFileChange}
-        className='file-input-hidden'
-      />
+      {!state.hideReferenceActions && (
+        <input
+          ref={refs.fileInputRef}
+          type='file'
+          accept='image/*'
+          multiple
+          onChange={handlers.onImageFileChange}
+          className='file-input-hidden'
+        />
+      )}
 
       <div className='toolbar-left'>
-        {!state.isInlineEdit && (
-          <AdapterSelectControl state={state} data={data} handlers={handlers} />
+        {!state.hideReferenceActions && (
+          <ReferenceActionsControl
+            state={state}
+            refs={refs}
+            handlers={handlers}
+          />
         )}
 
-        <ReferenceActionsControl
-          state={state}
-          data={data}
-          refs={refs}
-          handlers={handlers}
-        />
-
         {!state.isInlineEdit && (
           <ModelSelectControl
             state={state}
@@ -66,28 +64,30 @@ export function SenderToolbar({
         )}
       </div>
 
-      <div className={`toolbar-right ${state.isInlineEdit ? 'toolbar-right--inline-edit' : ''}`.trim()}>
-        <SenderSubmitAction
-          isInlineEdit={state.isInlineEdit}
-          submitLoading={state.submitLoading}
-          submitLabel={data.submitLabel}
-          hasComposerContent={state.hasComposerContent}
-          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}
-          onStop={handlers.onInterrupt}
-        />
-      </div>
+      {!state.hideSubmitAction && (
+        <div className={`toolbar-right ${state.isInlineEdit ? 'toolbar-right--inline-edit' : ''}`.trim()}>
+          <SenderSubmitAction
+            isInlineEdit={state.isInlineEdit}
+            submitLoading={state.submitLoading}
+            submitLabel={data.submitLabel}
+            hasComposerContent={state.hasComposerContent}
+            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}
+            onStop={handlers.onInterrupt}
+          />
+        </div>
+      )}
     </div>
   )
 }