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

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

@@ -1,97 +0,0 @@
-.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;
-  color: var(--text-color) !important;
-  -webkit-text-fill-color: var(--text-color) !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

@@ -1,168 +0,0 @@
-.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;
-}
-
-.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/model-select/ModelSelectOptionLabel.tsx

@@ -1,109 +0,0 @@
-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>
-  )
-}

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

@@ -1,199 +0,0 @@
-.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%;
-  }
-}