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

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

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

@@ -1,114 +0,0 @@
-.toolbar-btn.toolbar-btn--reference {
-  width: auto;
-  gap: 0 !important;
-  padding: 0 6px 0 2px !important;
-  color: var(--placeholder-color, #9ca3af);
-
-  .toolbar-btn__icon-shell {
-    width: auto;
-    min-width: 0;
-    height: 100%;
-  }
-
-  &:hover {
-    color: var(--sender-control-hover-color);
-    background-color: var(--sender-control-hover-bg);
-  }
-
-  &.active {
-    color: var(--sender-control-hover-color);
-    background-color: var(--sender-control-active-bg);
-  }
-}
-
-@media (max-width: 960px) {
-  .toolbar-btn.toolbar-btn--reference {
-    width: var(--sender-control-height);
-    min-width: var(--sender-control-height);
-    height: var(--sender-control-height);
-    padding: 0 !important;
-    justify-content: center;
-
-    .toolbar-btn__icon-shell {
-      width: 100%;
-      min-width: 100%;
-      height: 100%;
-      border-radius: var(--sender-control-radius);
-    }
-  }
-}
-
-.reference-actions-popover {
-  .ant-popover-inner {
-    padding: 6px !important;
-    background: var(--bg-color);
-    border-radius: var(--sender-popup-radius, 8px) !important;
-  }
-
-  .ant-popover-inner-content {
-    padding: 0 !important;
-  }
-}
-
-.reference-actions-menu {
-  min-width: 188px;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  font-size: 12px;
-  line-height: 1.3333;
-}
-
-.reference-actions-menu-item {
-  width: 100%;
-  min-height: 32px;
-  padding: 6px 8px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-color);
-  font: inherit;
-  font-size: 12px;
-  line-height: 1.3333;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  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%
-    );
-  }
-}
-
-.reference-action-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  width: 100%;
-}
-
-.reference-action-option__icon,
-.reference-action-option__check,
-.reference-action-option__chevron {
-  flex-shrink: 0;
-}

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

@@ -1,107 +0,0 @@
-import './ReferenceActionsControl.scss'
-import './ReferenceActionsOption.scss'
-
-import { Popover } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import type { SenderToolbarHandlers, SenderToolbarRefs, SenderToolbarState } from '../../@types/sender-toolbar-types'
-
-export function ReferenceActionsControl({
-  state,
-  refs,
-  handlers
-}: {
-  state: Pick<
-    SenderToolbarState,
-    | 'isInlineEdit'
-    | 'canOpenReferenceActions'
-    | 'showReferenceActions'
-  >
-  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation'>
-  handlers: Pick<
-    SenderToolbarHandlers,
-    | 'onReferenceOpenChange'
-    | 'onOpenContextPicker'
-    | 'onReferenceImageSelect'
-    | 'onReferenceMenuKeyDown'
-    | 'onCloseReferenceActions'
-  >
-}) {
-  const { t } = useTranslation()
-  const { isInlineEdit, canOpenReferenceActions, showReferenceActions } = state
-  const { referenceMenuNavigation } = refs
-  const {
-    onReferenceOpenChange,
-    onOpenContextPicker,
-    onReferenceImageSelect,
-    onReferenceMenuKeyDown,
-    onCloseReferenceActions
-  } = handlers
-
-  return (
-    <Popover
-      content={
-        <div className='reference-actions-menu'>
-          <button
-            ref={referenceMenuNavigation.registerItem('image')}
-            type='button'
-            className='reference-actions-menu-item'
-            onMouseEnter={() => {
-              referenceMenuNavigation.setActiveKey('image')
-            }}
-            onFocus={() => referenceMenuNavigation.setActiveKey('image')}
-            onKeyDown={(event) => onReferenceMenuKeyDown(event, 'image')}
-            onClick={onReferenceImageSelect}
-          >
-            <span className='reference-action-option'>
-              <span className='material-symbols-rounded reference-action-option__icon'>image</span>
-              <span className='reference-action-option__label'>{t('chat.referenceImage')}</span>
-            </span>
-          </button>
-          {!isInlineEdit && (
-            <button
-              ref={referenceMenuNavigation.registerItem('file')}
-              type='button'
-              className='reference-actions-menu-item'
-              onMouseEnter={() => {
-                referenceMenuNavigation.setActiveKey('file')
-              }}
-              onFocus={() => referenceMenuNavigation.setActiveKey('file')}
-              onKeyDown={(event) => onReferenceMenuKeyDown(event, 'file')}
-              onClick={() => {
-                onCloseReferenceActions()
-                onOpenContextPicker()
-              }}
-            >
-              <span className='reference-action-option'>
-                <span className='material-symbols-rounded reference-action-option__icon'>description</span>
-                <span className='reference-action-option__label'>{t('chat.referenceFile')}</span>
-              </span>
-            </button>
-          )}
-        </div>
-      }
-      open={showReferenceActions}
-      onOpenChange={onReferenceOpenChange}
-      placement='topLeft'
-      trigger='click'
-      classNames={{ root: 'reference-actions-popover' }}
-      destroyOnHidden
-      arrow={false}
-    >
-      <div
-        className={`toolbar-btn toolbar-btn--reference ${showReferenceActions ? 'active' : ''}`.trim()}
-        tabIndex={-1}
-        onClick={canOpenReferenceActions ? undefined : (event) => {
-          event.preventDefault()
-          void onReferenceOpenChange(true)
-        }}
-      >
-        <span className='toolbar-btn__icon-shell'>
-          <span className='material-symbols-rounded'>add</span>
-        </span>
-        <span className='toolbar-btn__text'>{t('chat.referenceActionsShort')}</span>
-      </div>
-    </Popover>
-  )
-}

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

@@ -1,34 +0,0 @@
-.reference-action-option__icon {
-  font-size: 16px;
-  color: var(--sub-text-color, #6b7280);
-}
-
-.reference-action-option__label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 1.3333;
-  font-weight: 400 !important;
-}
-
-.reference-action-option__value {
-  margin-left: auto;
-  color: var(--placeholder-color, #9ca3af);
-  font-size: 12px;
-  line-height: 1.3333;
-  white-space: nowrap;
-  font-weight: 400 !important;
-}
-
-.reference-action-option__check {
-  font-size: 15px;
-  color: var(--primary-color, #6366f1);
-}
-
-.reference-action-option__chevron {
-  font-size: 15px;
-  color: var(--placeholder-color, #9ca3af);
-}

package/src/components/chat/sender/@components/sender-attachments/SenderAttachments.scss

@@ -1,240 +0,0 @@
-.pending-attachments {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 2px 0 8px;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.pending-attachments__files,
-.pending-attachments__images {
-  width: 100%;
-  display: flex;
-  gap: 6px;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.pending-attachments__files {
-  flex-direction: column;
-}
-
-.pending-attachments__images {
-  flex-wrap: wrap;
-}
-
-.pending-image {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid rgba(148, 163, 184, .18);
-  background-color: var(--tag-bg, #f3f4f6);
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-}
-
-.pending-image__overlay {
-  position: absolute;
-  inset: auto 0 0;
-  padding: 14px 6px 6px;
-  background: linear-gradient(
-    180deg,
-    rgba(15, 23, 42, 0),
-    rgba(15, 23, 42, .76)
-  );
-}
-
-.pending-image__meta {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.pending-image__name,
-.pending-image__size {
-  color: #fff;
-  line-height: 1.2;
-  text-shadow: 0 1px 2px rgba(15, 23, 42, .32);
-}
-
-.pending-image__name {
-  font-size: 9px;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pending-image__size {
-  font-size: 8px;
-  opacity: .85;
-}
-
-.pending-context-file {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  width: 100%;
-  min-width: 0;
-  align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
-  border: 1px solid rgba(148, 163, 184, .2);
-  border-radius: 10px;
-  background: var(--tag-bg, #f3f4f6);
-}
-
-.pending-context-file__meta {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.pending-context-file__icon {
-  font-size: 15px;
-  color: var(--primary-color, #2563eb);
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  background: rgba(37, 99, 235, .1);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.pending-context-file__copy {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.pending-context-file__name {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-color);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pending-context-file__path {
-  display: block;
-  min-width: 0;
-  color: var(--sub-text-color, #6b7280);
-  font-size: 9px;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.pending-context-file__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-  min-width: 0;
-  justify-self: end;
-}
-
-.pending-context-file__size {
-  font-size: 9px;
-  font-weight: 600;
-  color: var(--sub-text-color, #6b7280);
-  white-space: nowrap;
-}
-
-.pending-context-file__remove {
-  width: 22px;
-  height: 22px;
-  border: none;
-  padding: 0;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sub-text-color, #6b7280);
-  background: transparent;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--tag-hover-bg, #f3f4f6);
-    color: var(--text-color);
-  }
-
-  .material-symbols-rounded {
-    font-size: 16px;
-    line-height: 1;
-  }
-}
-
-.pending-image-remove {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: 1px solid rgba(255, 255, 255, .18);
-  border-radius: 999px;
-  background-color: rgba(15, 23, 42, .64);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  backdrop-filter: blur(10px);
-
-  &:hover {
-    background-color: rgba(15, 23, 42, .84);
-  }
-
-  .material-symbols-rounded {
-    font-size: 12px;
-    line-height: 1;
-  }
-}
-
-html.dark {
-  .pending-image {
-    border-color: rgba(71, 85, 105, .55);
-  }
-
-  .pending-context-file {
-    border-color: rgba(71, 85, 105, .55);
-    background: rgba(30, 41, 59, .72);
-  }
-
-  .pending-context-file__icon {
-    background: rgba(59, 130, 246, .16);
-  }
-}
-
-@media (max-width: 640px) {
-  .pending-context-file {
-    grid-template-columns: minmax(0, 1fr);
-    align-items: stretch;
-  }
-
-  .pending-context-file__actions {
-    width: 100%;
-    justify-content: space-between;
-    justify-self: stretch;
-  }
-
-  .pending-attachments__images {
-    width: 100%;
-  }
-}