@vibe-forge/client 3.0.0-alpha.6 → 3.0.0

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

@@ -1,104 +0,0 @@
-.effort-select {
-  .ant-select-selection-item,
-  .ant-select-selection-placeholder {
-    justify-content: flex-start;
-    color: var(--placeholder-color, #9ca3af);
-    -webkit-text-fill-color: var(--placeholder-color, #9ca3af);
-  }
-
-  .ant-select-selection-item .effort-option__icon,
-  .ant-select-selection-placeholder .effort-option__icon,
-  .ant-select-selection-item .effort-option__text,
-  .ant-select-selection-placeholder .effort-option__text {
-    color: inherit !important;
-    -webkit-text-fill-color: inherit !important;
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
-
-  &.ant-select-open .ant-select-selection-item,
-  &.ant-select-open .ant-select-selection-placeholder,
-  &.ant-select-open .effort-option__text,
-  &.ant-select-open .effort-option__icon,
-  &.ant-select-open .sender-select-arrow,
-  &:hover .ant-select-selection-item,
-  &:hover .ant-select-selection-placeholder,
-  &:hover .effort-option__text,
-  &:hover .effort-option__icon,
-  &:hover .sender-select-arrow,
-  &.ant-select-focused .ant-select-selection-item,
-  &.ant-select-focused .ant-select-selection-placeholder,
-  &.ant-select-focused .effort-option__text,
-  &.ant-select-focused .effort-option__icon,
-  &.ant-select-focused .sender-select-arrow {
-    color: var(--sender-control-hover-color) !important;
-    -webkit-text-fill-color: var(--sender-control-hover-color) !important;
-  }
-}
-
-.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;
-  gap: 6px;
-  min-width: 0;
-  height: 100%;
-}
-
-.effort-option__icon {
-  flex-shrink: 0;
-  font-size: 16px;
-  line-height: 1;
-}
-
-.effort-option__text {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.effort-select-popup {
-  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;
-}

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

@@ -1,142 +0,0 @@
-import '../sender-toolbar/SenderSelectShared.scss'
-import '../sender-toolbar/SenderSelectBase.scss'
-import './EffortSelectControl.scss'
-import './EffortSelectDropdown.scss'
-
-import { Select } from 'antd'
-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,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-import { effortIconMap } from '../../@utils/sender-constants'
-
-const renderSelectArrow = (onMouseDown: (event: React.MouseEvent<HTMLSpanElement>) => void) => (
-  <span className='material-symbols-rounded sender-select-arrow' onMouseDown={onMouseDown}>
-    keyboard_arrow_down
-  </span>
-)
-
-export function EffortSelectControl({
-  state,
-  data,
-  refs,
-  handlers
-}: {
-  state: Pick<
-    SenderToolbarState,
-    'isThinking' | 'modelUnavailable' | 'showModelSelect' | 'showEffortSelect' | 'effort' | 'isMac'
-  >
-  data: Pick<SenderToolbarData, 'effortOptions' | 'composerControlShortcuts'>
-  refs: Pick<SenderToolbarRefs, 'effortSelectRef'>
-  handlers: Pick<
-    SenderToolbarHandlers,
-    | 'onShowModelSelectChange'
-    | 'onShowEffortSelectChange'
-    | 'onOpenEffortSelector'
-    | 'onQueueTextareaFocusRestore'
-    | 'onCloseReferenceActions'
-    | 'onEffortChange'
-  >
-}) {
-  const { t } = useTranslation()
-  const { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-  const { isThinking, modelUnavailable, showEffortSelect, effort, isMac } = state
-  const { effortOptions, composerControlShortcuts } = data
-  const { effortSelectRef } = refs
-  const {
-    onShowModelSelectChange,
-    onShowEffortSelectChange,
-    onOpenEffortSelector,
-    onQueueTextareaFocusRestore,
-    onCloseReferenceActions,
-    onEffortChange
-  } = handlers
-  const isCompactControl = isCompactLayout || isTouchInteraction
-
-  const decoratedEffortOptions = useMemo(() => {
-    return effortOptions.map(option => ({
-      ...option,
-      label: (
-        <span className={`effort-option effort-option--${option.value}`.trim()}>
-          <span className='material-symbols-rounded effort-option__icon'>{effortIconMap[option.value]}</span>
-          <span className='effort-option__text'>
-            {option.value === 'default' ? t('chat.effortLabels.default') : t(`chat.effortLabels.${option.value}`)}
-          </span>
-        </span>
-      )
-    }))
-  }, [effortOptions, t])
-
-  return (
-    <ShortcutTooltip
-      shortcut={composerControlShortcuts.switchEffort}
-      isMac={isMac}
-      title={t('chat.effortShortcutTooltip')}
-      targetClassName='sender-control-tooltip-target'
-      enabled={!showEffortSelect}
-    >
-      <div className={`sender-select-shell ${isCompactControl ? 'sender-select-shell--compact' : ''}`.trim()}>
-        {!showEffortSelect && !(modelUnavailable || isThinking) && (
-          <button
-            type='button'
-            className='sender-select-body-trigger'
-            aria-label={t('chat.effortShortcutTooltip')}
-            onMouseDown={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              onOpenEffortSelector()
-            }}
-          />
-        )}
-        <Select
-          ref={effortSelectRef}
-          className={`effort-select ${isCompactControl ? 'effort-select--compact' : ''}`.trim()}
-          classNames={{ popup: { root: 'effort-select-popup' } }}
-          open={showEffortSelect}
-          value={effort}
-          options={decoratedEffortOptions}
-          showSearch={false}
-          allowClear={false}
-          disabled={modelUnavailable || isThinking}
-          onChange={(value) => {
-            onEffortChange?.(value)
-            onShowEffortSelectChange(false)
-            onQueueTextareaFocusRestore()
-          }}
-          onOpenChange={(nextOpen) => {
-            if (nextOpen) {
-              onShowModelSelectChange(false)
-              onCloseReferenceActions()
-            } else {
-              onQueueTextareaFocusRestore()
-            }
-            onShowEffortSelectChange(nextOpen)
-          }}
-          placeholder={t('chat.effortSelectPlaceholder')}
-          optionLabelProp='label'
-          popupMatchSelectWidth={false}
-          menuItemSelectedIcon={<span className='material-symbols-rounded effort-select-check-icon'>check</span>}
-          suffixIcon={isCompactControl
-            ? null
-            : renderSelectArrow((event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              if (showEffortSelect) {
-                onShowEffortSelectChange(false)
-                onQueueTextareaFocusRestore()
-                return
-              }
-              onOpenEffortSelector()
-            })}
-        />
-      </div>
-    </ShortcutTooltip>
-  )
-}

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

@@ -1,96 +0,0 @@
-.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

@@ -1,144 +0,0 @@
-.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--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;
-  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-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;
-    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

@@ -1,176 +0,0 @@
-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 { useResponsiveLayout } from '#~/hooks/use-responsive-layout'
-
-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 { isCompactLayout, isTouchInteraction } = useResponsiveLayout()
-  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 isCompactControl = isCompactLayout || isTouchInteraction
-
-  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 ${isCompactControl ? 'sender-select-shell--compact' : ''}`.trim()}>
-        {!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 ${isCompactControl ? 'model-select--compact' : ''}`.trim()}
-          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={isCompactControl
-            ? null
-            : renderSelectArrow((event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              if (showModelSelect) {
-                onShowModelSelectChange(false)
-                onQueueTextareaFocusRestore()
-                return
-              }
-              onOpenModelSelector()
-            })}
-        />
-      </div>
-    </ShortcutTooltip>
-  )
-}