@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/sender/@components/adapter-select/AdapterSelectControl.scss

@@ -1,7 +1,13 @@
 .adapter-select,
 .adapter-select--locked {
-  width: 28px;
-  min-width: 28px;
+  width: calc(
+    var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+      3px
+  );
+  min-width: calc(
+    var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+      3px
+  );
 }
 
 .adapter-select {
@@ -28,22 +34,32 @@
   }
 
   .ant-select-selection-wrap,
+  .ant-select-selection-search,
   .ant-select-selection-item,
   .ant-select-selection-placeholder {
     display: flex;
     height: 100%;
     align-items: center;
     justify-content: center;
-    width: 100%;
+    width: auto;
     min-width: 0;
     padding: 0 !important;
   }
 
+  .ant-select-selection-wrap {
+    flex: 1;
+    justify-content: center;
+  }
+
   .ant-select-selection-item,
   .ant-select-selection-placeholder {
     line-height: 1 !important;
   }
 
+  .ant-select-arrow {
+    display: none !important;
+  }
+
   .adapter-option {
     justify-content: center;
     align-items: center;
@@ -52,8 +68,7 @@
     flex: 0 0 100%;
   }
 
-  .adapter-option__text,
-  .ant-select-arrow {
+  .adapter-option__text {
     display: none !important;
   }
 
@@ -62,12 +77,30 @@
   }
 }
 
+.adapter-select:not(.ant-select-disabled):hover,
 .adapter-select:not(.ant-select-disabled).ant-select-focused,
 .adapter-select:not(.ant-select-disabled).ant-select-open {
   background: var(--sender-control-hover-bg);
   color: var(--sender-control-hover-color);
 }
 
+html.dark {
+  .sender-select-shell.sender-select-shell--adapter:not(.is-disabled):hover
+    .adapter-select,
+  .adapter-select:not(.ant-select-disabled):hover,
+  .adapter-select:not(.ant-select-disabled).ant-select-focused,
+  .adapter-select:not(.ant-select-disabled).ant-select-open {
+    background: color-mix(
+      in srgb,
+      var(--primary-color, #3b82f6) 10%,
+      var(--input-bg, #1f1f1f) 90%
+    );
+    color: var(--text-color, #ffffff);
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--primary-color, #3b82f6) 18%, transparent);
+  }
+}
+
 .adapter-option {
   display: inline-flex;
   align-items: center;
@@ -77,8 +110,8 @@
 }
 
 .adapter-option__icon {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   display: block;
   object-fit: contain;
   flex-shrink: 0;
@@ -89,21 +122,27 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 15px;
+  font-size: 13px;
   line-height: 1;
 }
 
 @media (max-width: 960px) {
   .adapter-select,
   .adapter-select--locked {
-    width: var(--sender-control-height);
-    min-width: var(--sender-control-height);
+    width: calc(
+      var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+        3px
+    );
+    min-width: calc(
+      var(--sender-control-height) + var(--chat-input-container-padding, 12px) +
+        3px
+    );
   }
 
   .adapter-option__icon,
   .adapter-option__icon--fallback {
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
     margin: 0 auto;
   }
 }

package/src/components/chat/sender/@components/adapter-select/AdapterSelectDropdown.scss

@@ -29,6 +29,8 @@
       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,
@@ -39,4 +41,16 @@
     font-size: 12px;
     font-weight: 400 !important;
   }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .adapter-option,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .adapter-option,
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .adapter-option__text,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .adapter-option__text {
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
 }

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%;
+  }
+}