@vibe-forge/client 0.8.4 → 0.10.0

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

@@ -0,0 +1,96 @@
+.effort-select-popup {
+  .ant-select-item-group {
+    color: var(--placeholder-color);
+  }
+
+  .ant-select-item-option {
+    min-height: 28px;
+    margin: 0;
+    padding: 4px 8px;
+    border-radius: 8px;
+    color: var(--text-color);
+    font-weight: 400 !important;
+    transition: background-color .18s ease, color .18s ease;
+  }
+
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background: color-mix(
+      in srgb,
+      var(--primary-soft-bg, #eff6ff) 72%,
+      var(--bg-color) 28%
+    ) !important;
+  }
+
+  .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;
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled)
+    .effort-option__text,
+  .ant-select-item-option-selected.ant-select-item-option-active:not(.ant-select-item-option-disabled)
+    .effort-option__text {
+    color: var(--text-color) !important;
+    -webkit-text-fill-color: var(--text-color) !important;
+  }
+
+  .ant-select-item-option-content {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 400 !important;
+  }
+
+  .ant-select-item-option-state {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    margin-inline-start: 10px;
+    color: var(--primary-color, #2563eb) !important;
+  }
+
+  .effort-select-check-icon {
+    font-size: 16px;
+    line-height: 1;
+    color: inherit !important;
+  }
+
+  .effort-option--default .effort-option__icon {
+    color: var(--sub-text-color, #6b7280);
+  }
+
+  .effort-option--low .effort-option__icon {
+    color: color-mix(
+      in srgb,
+      var(--text-color) 40%,
+      var(--sub-text-color, #6b7280) 60%
+    );
+  }
+
+  .effort-option--medium .effort-option__icon {
+    color: #b45309;
+  }
+
+  .effort-option--high .effort-option__icon {
+    color: #d97706;
+  }
+
+  .effort-option--max .effort-option__icon {
+    color: var(--primary-color, #6366f1);
+  }
+}
+
+@media (max-width: 960px) {
+  .effort-select {
+    .ant-select-selection-item .effort-option__text,
+    .ant-select-selection-placeholder .effort-option__text {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+.model-select {
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    justify-content: flex-start;
+    color: var(--placeholder-color, #9ca3af);
+  }
+
+  &.ant-select-open .ant-select-selection-item,
+  &.ant-select-open .ant-select-selection-placeholder,
+  &.ant-select-open .sender-select-arrow,
+  &:hover .ant-select-selection-item,
+  &:hover .ant-select-selection-placeholder,
+  &:hover .sender-select-arrow,
+  &.ant-select-focused .ant-select-selection-item,
+  &.ant-select-focused .ant-select-selection-placeholder,
+  &.ant-select-focused .sender-select-arrow {
+    color: var(--sender-control-hover-color) !important;
+  }
+}
+
+.model-select-popup {
+  inline-size: fit-content !important;
+  min-inline-size: 220px !important;
+  max-inline-size: calc(100vw - 48px) !important;
+  background: var(--bg-color) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: var(--sender-popup-radius, 8px) !important;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
+  padding: 6px !important;
+
+  .ant-select-item-group {
+    padding: 6px 8px 2px;
+    color: var(--placeholder-color);
+    font-weight: 600;
+    font-size: 12px;
+  }
+
+  .ant-select-item-option {
+    min-height: 26px;
+    height: auto;
+    margin: 0;
+    padding: 3px 8px;
+    border-radius: 8px;
+    color: var(--text-color);
+    font-weight: 400 !important;
+    line-height: 16px;
+    overflow: visible;
+    transition: background-color .18s ease, color .18s ease;
+  }
+
+  .ant-select-item-option-content {
+    display: flex;
+    align-items: center;
+    min-height: 20px;
+    height: auto;
+    width: 100%;
+    overflow: visible;
+  }
+}
+
+.model-select-browser {
+  inline-size: fit-content;
+  min-inline-size: 220px;
+  max-inline-size: calc(100vw - 48px);
+}
+
+.model-select-menu {
+  inline-size: fit-content;
+  min-inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+.model-menu-tooltip-content {
+  display: inline-block;
+  max-width: 280px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  white-space: pre-line;
+  color: inherit;
+  opacity: .78;
+}

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

@@ -0,0 +1,171 @@
+import '../sender-toolbar/SenderSelectShared.scss'
+import '../sender-toolbar/SenderSelectBase.scss'
+import './ModelSelectControl.scss'
+import './ModelSelectMenu.scss'
+import './ModelSelectMenuLabels.scss'
+
+import { Select } from 'antd'
+import React from 'react'
+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 type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+
+const renderSelectArrow = (onMouseDown: (event: React.MouseEvent<HTMLSpanElement>) => void) => (
+  <span className='material-symbols-rounded sender-select-arrow' onMouseDown={onMouseDown}>
+    keyboard_arrow_down
+  </span>
+)
+
+export function ModelSelectControl({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    | 'isThinking'
+    | 'modelUnavailable'
+    | 'showModelSelect'
+    | 'showEffortSelect'
+    | 'selectedModel'
+    | 'modelSearchValue'
+    | 'isMac'
+  >
+  data: Pick<
+    SenderToolbarData,
+    | 'modelMenuGroups'
+    | 'modelSearchOptions'
+    | 'recommendedModelOptions'
+    | 'servicePreviewModelOptions'
+    | 'composerControlShortcuts'
+    | 'updatingRecommendedModelValue'
+  >
+  refs: Pick<SenderToolbarRefs, 'modelSelectRef'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onShowModelSelectChange'
+    | 'onShowEffortSelectChange'
+    | 'onModelSearchValueChange'
+    | 'onOpenModelSelector'
+    | 'onQueueTextareaFocusRestore'
+    | 'onCloseReferenceActions'
+    | 'onModelChange'
+    | 'onToggleRecommendedModel'
+  >
+}) {
+  const { t } = useTranslation()
+  const { isThinking, modelUnavailable, showModelSelect, showEffortSelect, selectedModel, modelSearchValue, isMac } =
+    state
+  const {
+    modelMenuGroups,
+    modelSearchOptions,
+    recommendedModelOptions,
+    servicePreviewModelOptions,
+    composerControlShortcuts,
+    updatingRecommendedModelValue
+  } = data
+  const { modelSelectRef } = refs
+  const {
+    onShowModelSelectChange,
+    onShowEffortSelectChange,
+    onModelSearchValueChange,
+    onOpenModelSelector,
+    onQueueTextareaFocusRestore,
+    onCloseReferenceActions,
+    onModelChange,
+    onToggleRecommendedModel
+  } = handlers
+
+  const handleModelSelection = (value: string) => {
+    onModelChange?.(value)
+    onShowModelSelectChange(false)
+    onModelSearchValueChange('')
+    onQueueTextareaFocusRestore()
+  }
+  const { renderModelPopup } = useModelSelectBrowser({
+    hasModelSearchQuery: modelSearchValue.trim() !== '',
+    modelMenuGroups,
+    onToggleRecommendedModel,
+    recommendedModelOptions,
+    servicePreviewModelOptions,
+    selectedModel,
+    updatingRecommendedModelValue,
+    onSelectModel: handleModelSelection
+  })
+
+  return (
+    <ShortcutTooltip
+      shortcut={composerControlShortcuts.switchModel}
+      isMac={isMac}
+      title={t('chat.modelShortcutTooltip')}
+      targetClassName='sender-control-tooltip-target'
+      enabled={!showModelSelect}
+    >
+      <div className='sender-select-shell'>
+        {!showModelSelect && !(modelUnavailable || isThinking) && (
+          <button
+            type='button'
+            className='sender-select-body-trigger'
+            aria-label={t('chat.modelShortcutTooltip')}
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onOpenModelSelector()
+            }}
+          />
+        )}
+        <Select
+          ref={modelSelectRef}
+          className='model-select'
+          classNames={{ popup: { root: 'model-select-popup' } }}
+          open={showModelSelect}
+          value={selectedModel}
+          options={modelSearchOptions ?? []}
+          showSearch
+          searchValue={modelSearchValue}
+          allowClear={false}
+          disabled={modelUnavailable || isThinking}
+          onChange={handleModelSelection}
+          onOpenChange={(nextOpen) => {
+            if (nextOpen) {
+              onShowEffortSelectChange(false)
+              onCloseReferenceActions()
+            } else {
+              onQueueTextareaFocusRestore()
+            }
+            onShowModelSelectChange(nextOpen)
+          }}
+          onSearch={onModelSearchValueChange}
+          placeholder={modelUnavailable ? t('chat.modelUnavailable') : t('chat.modelSelectPlaceholder')}
+          optionLabelProp='displayLabel'
+          filterOption={(input, option) => {
+            const searchText = String((option as ModelSelectOption | undefined)?.searchText ?? '')
+            return searchText.toLowerCase().includes(input.toLowerCase())
+          }}
+          popupRender={renderModelPopup}
+          popupMatchSelectWidth={false}
+          suffixIcon={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

@@ -0,0 +1,95 @@
+.model-select-menu,
+.model-select-submenu-popup .ant-menu {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+.model-select-menu .ant-menu-submenu,
+.model-select-submenu-popup .ant-menu-submenu {
+  display: block;
+  list-style: none;
+}
+
+.model-select-submenu-popup .ant-menu-item,
+.model-select-submenu-popup .ant-menu-submenu {
+  margin: 0 0 4px !important;
+}
+
+.model-select-menu .ant-menu-item,
+.model-select-submenu-popup .ant-menu-item,
+.model-select-menu .ant-menu-submenu-title,
+.model-select-submenu-popup .ant-menu-submenu-title {
+  min-height: 26px;
+  height: auto !important;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  margin: 0;
+  border-radius: 8px;
+  color: var(--text-color);
+  font-size: 12px;
+  font-weight: 400 !important;
+  line-height: 16px !important;
+  display: flex;
+  align-items: center;
+  overflow: visible;
+  transition: background-color .18s ease, color .18s ease;
+}
+
+.model-select-menu .ant-menu-item-group-title,
+.model-select-submenu-popup .ant-menu-item-group-title {
+  padding: 6px 8px 2px !important;
+}
+
+.model-select-menu .ant-menu-item,
+.model-select-submenu-popup .ant-menu-item {
+  padding: 3px 8px !important;
+}
+
+.model-select-menu .ant-menu-submenu-title,
+.model-select-submenu-popup .ant-menu-submenu-title {
+  inline-size: max-content;
+  min-inline-size: 100%;
+  padding: 3px 20px 3px 8px !important;
+}
+
+.model-select-menu .ant-menu-title-content,
+.model-select-submenu-popup .ant-menu-title-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  min-height: 20px;
+  height: auto;
+  inline-size: 100%;
+  overflow: visible;
+  line-height: 16px !important;
+}
+
+.model-select-menu .ant-menu-item:hover,
+.model-select-menu .ant-menu-submenu-title:hover,
+.model-select-submenu-popup .ant-menu-item:hover,
+.model-select-submenu-popup .ant-menu-submenu-title:hover {
+  background: color-mix(
+    in srgb,
+    var(--primary-soft-bg, #eff6ff) 72%,
+    var(--bg-color) 28%
+  ) !important;
+}
+
+.model-select-menu .ant-menu-item-selected,
+.model-select-menu .ant-menu-item-selected:hover,
+.model-select-submenu-popup .ant-menu-item-selected,
+.model-select-submenu-popup .ant-menu-item-selected:hover {
+  background: color-mix(
+    in srgb,
+    var(--primary-color, #2563eb) 18%,
+    var(--bg-color) 82%
+  ) !important;
+}
+
+.model-select-menu .ant-menu-submenu-arrow,
+.model-select-submenu-popup .ant-menu-submenu-arrow {
+  color: var(--placeholder-color, #9ca3af) !important;
+  inset-inline-end: 8px !important;
+}

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

@@ -0,0 +1,144 @@
+.model-select-submenu-popup {
+  .ant-menu {
+    background: var(--bg-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--sender-popup-radius, 8px) !important;
+    box-shadow: 0 18px 40px rgba(15, 23, 42, .12) !important;
+    padding: 6px !important;
+  }
+}
+
+.model-more-menu-label,
+.model-menu-group-label,
+.model-select-section-label,
+.model-select-menu-label,
+.model-menu-group-title,
+.model-select-menu-item-main,
+.model-select-menu-item-text,
+.model-select-menu-item-service,
+.model-select-menu-item-title {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-color);
+  line-height: 16px;
+}
+
+.model-select-section-label {
+  color: var(--placeholder-color, #9ca3af);
+  font-size: 11px;
+}
+
+.model-select-menu-item-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.model-select-menu-item-main {
+  flex: 1;
+  min-width: 0;
+  max-width: none;
+}
+
+.model-select-menu-item-text {
+  min-width: 0;
+  flex: 1;
+  max-width: none;
+}
+
+.model-select-menu-item-service,
+.model-select-menu-item-title {
+  min-width: max-content;
+  flex: 0 0 auto;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
+  max-width: none;
+}
+
+.model-select-menu-item-service {
+  color: var(--placeholder-color, #9ca3af);
+}
+
+.model-select-menu-item-separator {
+  color: inherit;
+}
+
+.model-select-favorite-btn {
+  --model-select-favorite-accent: color-mix(
+    in srgb,
+    var(--star-color, #f59e0b) 72%,
+    var(--warning-color, #b45309) 28%
+  );
+  --model-select-favorite-soft-bg: color-mix(
+    in srgb,
+    var(--star-color, #f59e0b) 16%,
+    var(--bg-color) 84%
+  );
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--placeholder-color, #9ca3af);
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease, opacity .18s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--model-select-favorite-soft-bg);
+    color: var(--model-select-favorite-accent) !important;
+  }
+
+  &.is-active {
+    color: var(--model-select-favorite-accent) !important;
+
+    .material-symbols-rounded {
+      font-variation-settings:
+        'FILL' 1,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 20 !important;
+    }
+  }
+
+  &.is-active:hover:not(:disabled) {
+    background: color-mix(
+      in srgb,
+      var(--model-select-favorite-accent) 16%,
+      var(--bg-color) 84%
+    );
+  }
+
+  &.is-updating {
+    color: var(--sender-control-hover-color);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: .72;
+  }
+}
+
+.model-select-menu > .ant-menu-item .model-select-menu-item-label,
+.model-select-menu > .ant-menu-item .model-select-menu-item-title {
+  overflow: visible;
+  text-overflow: clip;
+}

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

@@ -0,0 +1,109 @@
+import { Tooltip } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type { ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
+
+const renderModelMenuTooltip = (lines: string[]) => {
+  if (lines.length === 0) {
+    return null
+  }
+
+  return (
+    <span className='model-menu-tooltip-content'>
+      {lines.join('\n')}
+    </span>
+  )
+}
+
+export function ModelSelectOptionLabel({
+  option,
+  onToggleRecommendedModel,
+  showServicePrefix = false,
+  updatingRecommendedModelValue
+}: {
+  option: ModelSelectOption
+  onToggleRecommendedModel?: (option: ModelSelectOption) => void | Promise<void>
+  showServicePrefix?: boolean
+  updatingRecommendedModelValue?: string
+}) {
+  const { t } = useTranslation()
+  const isUpdatingRecommendation = updatingRecommendedModelValue === option.value
+  const canToggleRecommendation = option.canToggleRecommendation && onToggleRecommendedModel != null
+  const isRecommended = option.isRecommended === true
+  const recommendationTooltip = option.isUserRecommended
+    ? t('chat.modelRemoveRecommendation')
+    : isRecommended
+    ? t('chat.modelAlreadyRecommended')
+    : t('chat.modelAddRecommendation')
+
+  const labelContent = (
+    <span className='model-select-menu-item-main'>
+      <span className='model-select-menu-item-text'>
+        {showServicePrefix && option.serviceTitle && (
+          <span className='model-select-menu-item-service'>
+            {option.serviceTitle}
+            <span className='model-select-menu-item-separator'>/</span>
+          </span>
+        )}
+        <span className='model-select-menu-item-title'>{option.displayLabel}</span>
+      </span>
+    </span>
+  )
+
+  return (
+    <span className='model-select-menu-item-label'>
+      {option.tooltipLines.length > 0
+        ? (
+          <Tooltip
+            title={renderModelMenuTooltip(option.tooltipLines)}
+            placement='left'
+            classNames={{ root: 'model-menu-tooltip' }}
+            mouseEnterDelay={.35}
+            destroyOnHidden
+          >
+            {labelContent}
+          </Tooltip>
+        )
+        : labelContent}
+      {canToggleRecommendation && (
+        <Tooltip
+          title={recommendationTooltip}
+          destroyOnHidden
+        >
+          <button
+            type='button'
+            className={[
+              'model-select-favorite-btn',
+              isRecommended ? 'is-active' : '',
+              isUpdatingRecommendation ? 'is-updating' : ''
+            ].filter(Boolean).join(' ')}
+            aria-label={recommendationTooltip}
+            aria-pressed={isRecommended}
+            disabled={isUpdatingRecommendation}
+            tabIndex={-1}
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+            }}
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              if (isRecommended && !option.isUserRecommended) {
+                return
+              }
+              void onToggleRecommendedModel(option)
+            }}
+          >
+            <span className='material-symbols-rounded'>
+              {isUpdatingRecommendation
+                ? 'progress_activity'
+                : isRecommended
+                ? 'star'
+                : 'star_outline'}
+            </span>
+          </button>
+        </Tooltip>
+      )}
+    </span>
+  )
+}