@vibe-forge/client 2.0.0 → 2.0.1

package/src/components/chat/sender/@components/effort-select/EffortSelectControl.scss

@@ -36,6 +36,42 @@
   }
 }
 
+.effort-select--compact {
+  min-width: var(--sender-control-height);
+  max-width: var(--sender-control-height);
+
+  &.ant-select-single .ant-select-selector {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-inline-start: 0 !important;
+    padding-inline-end: 0 !important;
+    justify-content: center;
+  }
+
+  .ant-select-selection-wrap,
+  .ant-select-selection-search {
+    justify-content: center;
+  }
+
+  &.ant-select-single .ant-select-selector .ant-select-selection-item,
+  &.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    width: 100% !important;
+    justify-content: center;
+    overflow: hidden !important;
+  }
+
+  .effort-option__text {
+    display: none !important;
+  }
+
+  .effort-option {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
 .effort-option {
   display: inline-flex;
   align-items: center;

package/src/components/chat/sender/@components/effort-select/EffortSelectControl.tsx

@@ -8,6 +8,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 import type {
   SenderToolbarData,
   SenderToolbarHandlers,
@@ -45,6 +46,7 @@ export function EffortSelectControl({
   >
 }) {
   const { t } = useTranslation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const { isThinking, modelUnavailable, showEffortSelect, effort, isMac } = state
   const { effortOptions, composerControlShortcuts } = data
   const { effortSelectRef } = refs
@@ -56,6 +58,7 @@ export function EffortSelectControl({
     onCloseReferenceActions,
     onEffortChange
   } = handlers
+  const isCompactControl = isCompactLayout || isTouchInteraction
 
   const decoratedEffortOptions = useMemo(() => {
     return effortOptions.map(option => ({
@@ -79,7 +82,7 @@ export function EffortSelectControl({
       targetClassName='sender-control-tooltip-target'
       enabled={!showEffortSelect}
     >
-      <div className='sender-select-shell'>
+      <div className={`sender-select-shell ${isCompactControl ? 'sender-select-shell--compact' : ''}`.trim()}>
         {!showEffortSelect && !(modelUnavailable || isThinking) && (
           <button
             type='button'
@@ -94,7 +97,7 @@ export function EffortSelectControl({
         )}
         <Select
           ref={effortSelectRef}
-          className='effort-select'
+          className={`effort-select ${isCompactControl ? 'effort-select--compact' : ''}`.trim()}
           classNames={{ popup: { root: 'effort-select-popup' } }}
           open={showEffortSelect}
           value={effort}
@@ -120,16 +123,18 @@ export function EffortSelectControl({
           optionLabelProp='label'
           popupMatchSelectWidth={false}
           menuItemSelectedIcon={<span className='material-symbols-rounded effort-select-check-icon'>check</span>}
-          suffixIcon={renderSelectArrow((event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            if (showEffortSelect) {
-              onShowEffortSelectChange(false)
-              onQueueTextareaFocusRestore()
-              return
-            }
-            onOpenEffortSelector()
-          })}
+          suffixIcon={isCompactControl
+            ? null
+            : renderSelectArrow((event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              if (showEffortSelect) {
+                onShowEffortSelectChange(false)
+                onQueueTextareaFocusRestore()
+                return
+              }
+              onOpenEffortSelector()
+            })}
         />
       </div>
     </ShortcutTooltip>

package/src/components/chat/sender/@components/model-select/ModelSelectControl.scss

@@ -18,6 +18,57 @@
   }
 }
 
+.model-select--compact {
+  min-width: var(--sender-control-height);
+  max-width: var(--sender-control-height);
+
+  &.ant-select-single .ant-select-selector {
+    position: relative;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    padding-inline-start: 0 !important;
+    padding-inline-end: 0 !important;
+    justify-content: center;
+  }
+
+  .ant-select-selector {
+    position: relative;
+  }
+
+  .ant-select-selector::before {
+    content: 'model_training';
+    font-family: 'Material Symbols Rounded';
+    font-size: 16px;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset: 0;
+    color: currentColor;
+    pointer-events: none;
+  }
+
+  .ant-select-selection-wrap,
+  .ant-select-selection-search {
+    display: none !important;
+  }
+
+  &.ant-select-single .ant-select-selector .ant-select-selection-item,
+  &.ant-select-single .ant-select-selector .ant-select-selection-placeholder,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    display: none !important;
+    width: 0 !important;
+    min-width: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    opacity: 0 !important;
+    overflow: hidden !important;
+  }
+}
+
 .model-select-popup {
   inline-size: fit-content !important;
   min-inline-size: 220px !important;
@@ -48,6 +99,17 @@
     transition: background-color .18s ease, color .18s ease;
   }
 
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled),
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #2563eb) 18%,
+      var(--bg-color) 82%
+    ) !important;
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
+
   .ant-select-item-option-content {
     display: flex;
     align-items: center;

package/src/components/chat/sender/@components/model-select/ModelSelectControl.tsx

@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
 import { useModelSelectBrowser } from '#~/components/chat/sender/@hooks/use-model-select-browser'
 import type { ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+import { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
 
 import type {
   SenderToolbarData,
@@ -64,6 +65,7 @@ export function ModelSelectControl({
   >
 }) {
   const { t } = useTranslation()
+  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
   const { isThinking, modelUnavailable, showModelSelect, showEffortSelect, selectedModel, modelSearchValue, isMac } =
     state
   const {
@@ -85,6 +87,7 @@ export function ModelSelectControl({
     onModelChange,
     onToggleRecommendedModel
   } = handlers
+  const isCompactControl = isCompactLayout || isTouchInteraction
 
   const handleModelSelection = (value: string) => {
     onModelChange?.(value)
@@ -111,7 +114,7 @@ export function ModelSelectControl({
       targetClassName='sender-control-tooltip-target'
       enabled={!showModelSelect}
     >
-      <div className='sender-select-shell'>
+      <div className={`sender-select-shell ${isCompactControl ? 'sender-select-shell--compact' : ''}`.trim()}>
         {!showModelSelect && !(modelUnavailable || isThinking) && (
           <button
             type='button'
@@ -126,7 +129,7 @@ export function ModelSelectControl({
         )}
         <Select
           ref={modelSelectRef}
-          className='model-select'
+          className={`model-select ${isCompactControl ? 'model-select--compact' : ''}`.trim()}
           classNames={{ popup: { root: 'model-select-popup' } }}
           open={showModelSelect}
           value={selectedModel}
@@ -154,16 +157,18 @@ export function ModelSelectControl({
           }}
           popupRender={renderModelPopup}
           popupMatchSelectWidth={false}
-          suffixIcon={renderSelectArrow((event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            if (showModelSelect) {
-              onShowModelSelectChange(false)
-              onQueueTextareaFocusRestore()
-              return
-            }
-            onOpenModelSelector()
-          })}
+          suffixIcon={isCompactControl
+            ? null
+            : renderSelectArrow((event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              if (showModelSelect) {
+                onShowModelSelectChange(false)
+                onQueueTextareaFocusRestore()
+                return
+              }
+              onOpenModelSelector()
+            })}
         />
       </div>
     </ShortcutTooltip>

package/src/components/chat/sender/@components/model-select/ModelSelectMenu.scss

@@ -86,6 +86,8 @@
     var(--primary-color, #2563eb) 18%,
     var(--bg-color) 82%
   ) !important;
+  color: var(--text-color) !important;
+  -webkit-text-fill-color: var(--text-color) !important;
 }
 
 .model-select-menu .ant-menu-submenu-arrow,

package/src/components/chat/sender/@components/model-select/ModelSelectMenuLabels.scss

@@ -142,3 +142,27 @@
   overflow: visible;
   text-overflow: clip;
 }
+
+.model-select-menu .ant-menu-item-selected .model-select-menu-item-main,
+.model-select-menu .ant-menu-item-selected .model-select-menu-item-text,
+.model-select-menu .ant-menu-item-selected .model-select-menu-item-title,
+.model-select-menu .ant-menu-item-selected .model-select-menu-item-service,
+.model-select-menu .ant-menu-item-selected .model-select-menu-item-separator,
+.model-select-submenu-popup
+  .ant-menu-item-selected
+  .model-select-menu-item-main,
+.model-select-submenu-popup
+  .ant-menu-item-selected
+  .model-select-menu-item-text,
+.model-select-submenu-popup
+  .ant-menu-item-selected
+  .model-select-menu-item-title,
+.model-select-submenu-popup
+  .ant-menu-item-selected
+  .model-select-menu-item-service,
+.model-select-submenu-popup
+  .ant-menu-item-selected
+  .model-select-menu-item-separator {
+  color: var(--text-color) !important;
+  -webkit-text-fill-color: var(--text-color) !important;
+}

package/src/components/chat/sender/@components/permission-mode-control/PermissionModeControl.scss

@@ -0,0 +1,199 @@
+.sender-permission-trigger,
+.sender-permission-menu {
+  --sender-permission-default-color: var(--primary-color);
+  --sender-permission-accept-edits-color: var(--success-color);
+  --sender-permission-plan-color: var(--warning-color);
+  --sender-permission-dont-ask-color: #ca8a04;
+  --sender-permission-bypass-color: var(--danger-color);
+}
+
+html.dark {
+  .sender-permission-trigger,
+  .sender-permission-menu {
+    --sender-permission-dont-ask-color: #facc15;
+  }
+}
+
+.sender-permission-trigger {
+  min-width: 0;
+  max-width: min(260px, 100%);
+  height: 24px;
+  padding: 0 6px 0 4px;
+  border: 0;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  color: var(--text-color);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color .2s ease, color .2s ease;
+
+  &:hover,
+  &:focus-visible,
+  &.is-open {
+    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--primary-color) 42%, transparent);
+    outline-offset: 2px;
+  }
+}
+
+.sender-permission-trigger__icon,
+.sender-permission-trigger__chevron {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.sender-permission-trigger__icon {
+  color: var(--primary-color);
+}
+
+.sender-permission-trigger__chevron {
+  color: var(--sub-text-color);
+}
+
+.sender-permission-trigger__copy {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+}
+
+.sender-permission-trigger__value {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sender-permission-trigger__icon--default,
+.sender-permission-trigger__value--default,
+.sender-permission-menu__icon--default {
+  color: var(--sender-permission-default-color);
+}
+
+.sender-permission-trigger__icon--acceptEdits,
+.sender-permission-trigger__value--acceptEdits,
+.sender-permission-menu__icon--acceptEdits {
+  color: var(--sender-permission-accept-edits-color);
+}
+
+.sender-permission-trigger__icon--plan,
+.sender-permission-trigger__value--plan,
+.sender-permission-menu__icon--plan {
+  color: var(--sender-permission-plan-color);
+}
+
+.sender-permission-trigger__icon--dontAsk,
+.sender-permission-trigger__value--dontAsk,
+.sender-permission-menu__icon--dontAsk {
+  color: var(--sender-permission-dont-ask-color);
+}
+
+.sender-permission-trigger__icon--bypassPermissions,
+.sender-permission-trigger__value--bypassPermissions,
+.sender-permission-menu__icon--bypassPermissions {
+  color: var(--sender-permission-bypass-color);
+}
+
+.sender-permission-popover {
+  .ant-popover-inner {
+    padding: 6px !important;
+    background: var(--bg-color);
+    border-radius: 8px !important;
+  }
+
+  .ant-popover-inner-content {
+    padding: 0 !important;
+  }
+}
+
+.sender-permission-menu {
+  min-width: 196px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  font-size: 12px;
+  line-height: 1.3333;
+}
+
+.sender-permission-menu__item {
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--text-color);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(
+      in srgb,
+      var(--primary-soft-bg, #eff6ff) 72%,
+      var(--bg-color) 28%
+    );
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.is-selected {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #2563eb) 18%,
+      var(--bg-color) 82%
+    );
+  }
+}
+
+.sender-permission-menu__option {
+  width: 100%;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sender-permission-menu__icon,
+.sender-permission-menu__check {
+  flex-shrink: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.sender-permission-menu__text {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 1.3333;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sender-permission-menu__check {
+  color: var(--primary-color, #2563eb);
+}
+
+@media (max-width: 720px) {
+  .sender-permission-trigger {
+    max-width: 100%;
+  }
+}

package/src/components/chat/sender/@components/permission-mode-control/PermissionModeControl.tsx

@@ -0,0 +1,172 @@
+import './PermissionModeControl.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 { permissionModeIconMap } from '../../@utils/sender-constants'
+
+export function PermissionModeControl({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    'showPermissionActions' | 'permissionMode' | 'canOpenReferenceActions' | 'isMac'
+  >
+  data: Pick<SenderToolbarData, 'permissionModeOptions' | 'composerControlShortcuts'>
+  refs: Pick<SenderToolbarRefs, 'permissionMenuNavigation'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onPermissionOpenChange'
+    | 'onPermissionMenuKeyDown'
+    | 'onSelectPermissionMode'
+  >
+}) {
+  const { t } = useTranslation()
+  const { showPermissionActions, permissionMode, canOpenReferenceActions, isMac } = state
+  const { permissionModeOptions, composerControlShortcuts } = data
+  const { permissionMenuNavigation } = refs
+  const { onPermissionOpenChange, onPermissionMenuKeyDown, onSelectPermissionMode } = handlers
+  const selectedPermissionOption = permissionModeOptions.find(option => option.value === permissionMode)
+
+  const focusSelectedPermission = () => {
+    permissionMenuNavigation.setActiveKey(permissionMode)
+    window.requestAnimationFrame(() => {
+      permissionMenuNavigation.focusKey(permissionMenuNavigation.activeKey ?? permissionMode)
+    })
+  }
+
+  return (
+    <Popover
+      content={
+        <div className='sender-permission-menu' role='menu' aria-label={t('chat.referencePermission')}>
+          {permissionModeOptions.map(option => (
+            <button
+              key={option.value}
+              ref={permissionMenuNavigation.registerItem(option.value)}
+              type='button'
+              role='menuitemradio'
+              aria-checked={permissionMode === option.value}
+              className={[
+                'sender-permission-menu__item',
+                `sender-permission-menu__item--${option.value}`,
+                permissionMode === option.value ? 'is-selected' : ''
+              ].filter(Boolean).join(' ')}
+              onMouseEnter={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onFocus={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onKeyDown={(event) => onPermissionMenuKeyDown(event, option.value)}
+              onClick={() => {
+                onSelectPermissionMode(option.value)
+              }}
+            >
+              <span className='sender-permission-menu__option'>
+                <span
+                  className={[
+                    'material-symbols-rounded',
+                    'sender-permission-menu__icon',
+                    `sender-permission-menu__icon--${option.value}`
+                  ].join(' ')}
+                >
+                  {permissionModeIconMap[option.value]}
+                </span>
+                <span className='sender-permission-menu__text'>{option.label}</span>
+                {permissionMode === option.value && (
+                  <span className='material-symbols-rounded sender-permission-menu__check'>check</span>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      }
+      open={showPermissionActions}
+      onOpenChange={(nextOpen) => {
+        onPermissionOpenChange(nextOpen)
+        if (nextOpen) {
+          focusSelectedPermission()
+        }
+      }}
+      placement='bottomRight'
+      trigger='click'
+      classNames={{ root: 'sender-permission-popover' }}
+      destroyOnHidden
+      arrow={false}
+    >
+      <ShortcutTooltip
+        shortcut={composerControlShortcuts.switchPermissionMode}
+        isMac={isMac}
+        title={t('chat.referencePermission')}
+        enabled={!showPermissionActions}
+      >
+        <button
+          type='button'
+          className={[
+            'sender-permission-trigger',
+            `sender-permission-trigger--${permissionMode}`,
+            showPermissionActions ? 'is-open' : ''
+          ].filter(Boolean).join(' ')}
+          aria-label={t('chat.referencePermission')}
+          aria-haspopup='menu'
+          aria-expanded={showPermissionActions}
+          onClick={canOpenReferenceActions
+            ? undefined
+            : (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onPermissionOpenChange(true)
+            }}
+          onKeyDown={(event) => {
+            const isActivationKey = event.key === 'Enter' || event.key === ' '
+            const isOpenKey = event.key === 'ArrowDown' || event.key === 'ArrowUp'
+
+            if (isActivationKey || isOpenKey) {
+              event.preventDefault()
+              event.stopPropagation()
+              if (!showPermissionActions) {
+                onPermissionOpenChange(true)
+              }
+              focusSelectedPermission()
+              return
+            }
+
+            if (event.key === 'Escape' && showPermissionActions) {
+              event.preventDefault()
+              event.stopPropagation()
+              onPermissionOpenChange(false)
+            }
+          }}
+        >
+          <span
+            className={[
+              'material-symbols-rounded',
+              'sender-permission-trigger__icon',
+              `sender-permission-trigger__icon--${permissionMode}`
+            ].join(' ')}
+          >
+            {permissionModeIconMap[permissionMode]}
+          </span>
+          <span className='sender-permission-trigger__copy'>
+            <span
+              className={[
+                'sender-permission-trigger__value',
+                `sender-permission-trigger__value--${permissionMode}`
+              ].join(' ')}
+            >
+              {selectedPermissionOption?.label ?? t('chat.referencePermission')}
+            </span>
+          </span>
+          <span className='material-symbols-rounded sender-permission-trigger__chevron'>expand_more</span>
+        </button>
+      </ShortcutTooltip>
+    </Popover>
+  )
+}

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

@@ -38,8 +38,7 @@
   }
 }
 
-.reference-actions-popover,
-.reference-actions-submenu-popover {
+.reference-actions-popover {
   .ant-popover-inner {
     padding: 6px !important;
     background: var(--bg-color);
@@ -60,14 +59,6 @@
   line-height: 1.3333;
 }
 
-.reference-actions-menu--submenu {
-  min-width: 168px;
-
-  .reference-action-option {
-    gap: 8px;
-  }
-}
-
 .reference-actions-menu-item {
   width: 100%;
   min-height: 32px;