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

package/src/components/chat/sender/@components/sender-submit-action/SenderSubmitAction.tsx

@@ -1,200 +0,0 @@
-import '../sender-toolbar/SenderSelectShared.scss'
-import './SenderSubmitAction.scss'
-
-import type { SessionQueuedMessageMode } from '@vibe-forge/core'
-import { Button, Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-import { ShortcutDisplay } from '#~/components/ShortcutDisplay'
-import { ShortcutTooltip } from '#~/components/ShortcutTooltip'
-
-export function SenderSubmitAction({
-  isInlineEdit,
-  submitLoading,
-  submitLabel,
-  hasComposerContent,
-  modelUnavailable,
-  sendBlocked,
-  sendBlockedTooltip,
-  showConfirmInteractionAction,
-  confirmInteractionLabel,
-  isThinking,
-  resolvedSendShortcut,
-  queueSteerShortcut,
-  queueNextShortcut,
-  isMac,
-  onCancel,
-  onConfirmInteractionAction,
-  onSend,
-  onStop
-}: {
-  isInlineEdit: boolean
-  submitLoading: boolean
-  submitLabel?: string
-  hasComposerContent: boolean
-  modelUnavailable: boolean
-  sendBlocked: boolean
-  sendBlockedTooltip?: string
-  showConfirmInteractionAction: boolean
-  confirmInteractionLabel?: string
-  isThinking: boolean
-  resolvedSendShortcut: string
-  queueSteerShortcut?: string
-  queueNextShortcut?: string
-  isMac: boolean
-  onCancel?: () => void
-  onConfirmInteractionAction?: () => void
-  onSend: (mode?: SessionQueuedMessageMode) => void
-  onStop?: () => void
-}) {
-  const { t } = useTranslation()
-  const showStopAction = isThinking && !hasComposerContent
-  const isSendDisabled = !showStopAction && (modelUnavailable || sendBlocked)
-  const handleSendClick = () => onSend()
-  const buttonClasses = [
-    'chat-send-btn',
-    hasComposerContent && !isSendDisabled ? 'active' : '',
-    showStopAction ? 'stop' : '',
-    isSendDisabled ? 'disabled' : '',
-    sendBlocked ? 'blocked' : ''
-  ].filter(Boolean).join(' ')
-
-  if (isInlineEdit) {
-    return (
-      <>
-        {onCancel != null && (
-          <Button autoInsertSpace={false} size='small' disabled={submitLoading} onClick={onCancel}>
-            {t('common.cancel')}
-          </Button>
-        )}
-        <Button
-          autoInsertSpace={false}
-          type='primary'
-          size='small'
-          loading={submitLoading}
-          disabled={!hasComposerContent}
-          onClick={handleSendClick}
-        >
-          {submitLabel ?? t('chat.send')}
-        </Button>
-      </>
-    )
-  }
-
-  if (isThinking) {
-    if (showStopAction) {
-      return (
-        <Tooltip
-          title={
-            <div className='sender-send-tooltip'>
-              <div className='sender-send-tooltip__row'>
-                <span className='sender-send-tooltip__label'>{t('chat.queue.stopShortcutTooltip')}</span>
-                <ShortcutDisplay shortcut='esc' isMac={isMac} />
-              </div>
-            </div>
-          }
-          placement='top'
-          classNames={{ root: 'sender-send-tooltip-popover' }}
-          trigger={['hover']}
-          mouseEnterDelay={.3}
-          mouseLeaveDelay={.08}
-          arrow={false}
-        >
-          <div className='sender-control-tooltip-target'>
-            <div className={buttonClasses} onClick={onStop}>
-              <span className='material-symbols-rounded'>stop_circle</span>
-            </div>
-          </div>
-        </Tooltip>
-      )
-    }
-
-    return (
-      <Tooltip
-        title={
-          <div className='sender-send-tooltip'>
-            <div className='sender-send-tooltip__row'>
-              <span className='sender-send-tooltip__label'>{t('chat.queue.steerShortcutTooltip')}</span>
-              <ShortcutDisplay shortcut={queueSteerShortcut} isMac={isMac} />
-            </div>
-            <div className='sender-send-tooltip__row'>
-              <span className='sender-send-tooltip__label'>{t('chat.queue.nextShortcutTooltip')}</span>
-              <ShortcutDisplay shortcut={queueNextShortcut} isMac={isMac} />
-            </div>
-          </div>
-        }
-        placement='top'
-        classNames={{ root: 'sender-send-tooltip-popover' }}
-        trigger={['hover']}
-        mouseEnterDelay={.3}
-        mouseLeaveDelay={.08}
-        arrow={false}
-      >
-        <div className='sender-control-tooltip-target'>
-          <div className={buttonClasses} onClick={isSendDisabled ? undefined : handleSendClick}>
-            <span className='material-symbols-rounded'>send</span>
-          </div>
-        </div>
-      </Tooltip>
-    )
-  }
-
-  if (sendBlocked) {
-    return (
-      <>
-        <Tooltip
-          title={sendBlockedTooltip}
-          placement='top'
-          classNames={{ root: 'sender-send-tooltip-popover' }}
-          trigger={['hover']}
-          mouseEnterDelay={.3}
-          mouseLeaveDelay={.08}
-          arrow={false}
-        >
-          <div className='sender-control-tooltip-target'>
-            <div className={buttonClasses} onClick={handleSendClick}>
-              <span className='material-symbols-rounded'>send</span>
-            </div>
-          </div>
-        </Tooltip>
-
-        {showConfirmInteractionAction && onConfirmInteractionAction != null && (
-          <Tooltip
-            title={t('chat.permissionConfirmOptionTooltip')}
-            placement='top'
-            classNames={{ root: 'sender-send-tooltip-popover' }}
-            trigger={['hover']}
-            mouseEnterDelay={.3}
-            mouseLeaveDelay={.08}
-            arrow={false}
-          >
-            <Button
-              autoInsertSpace={false}
-              size='small'
-              type='default'
-              className='chat-confirm-btn'
-              onClick={onConfirmInteractionAction}
-            >
-              <span className='material-symbols-rounded'>task_alt</span>
-              <span>{confirmInteractionLabel ?? t('chat.permissionConfirmOption')}</span>
-            </Button>
-          </Tooltip>
-        )}
-      </>
-    )
-  }
-
-  return (
-    <ShortcutTooltip
-      shortcut={resolvedSendShortcut}
-      isMac={isMac}
-      title={t('chat.sendShortcutTooltip')}
-      targetClassName='sender-control-tooltip-target'
-      enabled
-    >
-      <div className={buttonClasses} onClick={isSendDisabled ? undefined : handleSendClick}>
-        <span className='material-symbols-rounded'>send</span>
-      </div>
-    </ShortcutTooltip>
-  )
-}

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectBase.scss

@@ -1,108 +0,0 @@
-.model-select,
-.effort-select,
-.account-select {
-  min-width: 0;
-
-  .ant-select-selection-search-input {
-    height: 100% !important;
-  }
-
-  .ant-select-arrow {
-    position: static !important;
-    inset: auto !important;
-    width: 28px;
-    min-width: 28px;
-    flex: 0 0 28px;
-    height: 100%;
-    margin-top: 0;
-    transform: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: auto;
-  }
-
-  .ant-select-selection-item,
-  .ant-select-selection-placeholder {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    font-size: 12px;
-    color: var(--placeholder-color, #9ca3af);
-    line-height: 1;
-  }
-
-  &.ant-select-single .ant-select-selector {
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-left: 8px !important;
-    padding-right: 0 !important;
-    padding-inline-start: 8px !important;
-    padding-inline-end: 0 !important;
-  }
-
-  .ant-select-selector {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  .ant-select-selection-wrap {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  &.ant-select-single .ant-select-selector .ant-select-selection-item,
-  &.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-    display: inline-flex !important;
-    align-items: center;
-    height: 100% !important;
-    min-width: 0;
-    line-height: 1 !important;
-    padding-right: 0 !important;
-    padding-inline-end: 0 !important;
-  }
-
-  &.ant-select-open,
-  &:hover,
-  &.ant-select-focused {
-    background: var(--sender-control-hover-bg);
-    color: var(--sender-control-hover-color);
-  }
-
-  &.ant-select-open .ant-select-selector,
-  &:hover .ant-select-selector,
-  &.ant-select-focused .ant-select-selector {
-    border: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-  }
-
-  &.ant-select-disabled .ant-select-selector {
-    background-color: transparent !important;
-    color: var(--sub-text-color, #9ca3af);
-    opacity: .56;
-  }
-}
-
-@media (max-width: 960px) {
-  .model-select,
-  .effort-select,
-  .account-select {
-    .ant-select-arrow {
-      width: 20px;
-      min-width: 20px;
-      flex: 0 0 20px;
-    }
-
-    &.ant-select-single .ant-select-selector {
-      padding-left: 6px !important;
-      padding-inline-start: 6px !important;
-    }
-
-    .ant-select-selection-item,
-    .ant-select-selection-placeholder {
-      font-size: 11px;
-    }
-  }
-}

package/src/components/chat/sender/@components/sender-toolbar/SenderSelectShared.scss

@@ -1,156 +0,0 @@
-.sender-control-tooltip-target,
-.adapter-select-tooltip-target {
-  display: inline-flex;
-  align-items: center;
-}
-
-.sender-select-shell {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  &:hover {
-    .model-select,
-    .effort-select,
-    .account-select {
-      background: var(--sender-control-hover-bg);
-      color: var(--sender-control-hover-color);
-    }
-
-    .model-select .ant-select-selection-item,
-    .model-select .ant-select-selection-placeholder,
-    .model-select .sender-select-arrow,
-    .account-select .ant-select-selection-item,
-    .account-select .ant-select-selection-placeholder,
-    .account-select .sender-select-arrow,
-    .effort-select .ant-select-selection-item,
-    .effort-select .ant-select-selection-placeholder,
-    .effort-select .effort-option__text,
-    .effort-select .effort-option__icon,
-    .effort-select .sender-select-arrow {
-      color: var(--sender-control-hover-color) !important;
-      -webkit-text-fill-color: var(--sender-control-hover-color) !important;
-    }
-  }
-
-  &.sender-select-shell--adapter:not(.is-disabled):hover {
-    .adapter-select {
-      background: var(--sender-control-hover-bg);
-      color: var(--sender-control-hover-color);
-    }
-
-    .adapter-select .adapter-option__icon {
-      opacity: 1;
-    }
-  }
-}
-
-.sender-select-shell--compact {
-  .sender-select-body-trigger {
-    inset: 0;
-  }
-
-  .ant-select-arrow,
-  .sender-select-arrow {
-    display: none !important;
-  }
-}
-
-.sender-select-body-trigger {
-  position: absolute;
-  inset: 0 28px 0 0;
-  z-index: 2;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: var(--sender-control-radius);
-  background: transparent;
-  cursor: pointer;
-}
-
-.sender-select-arrow {
-  display: inline-flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: 18px;
-  line-height: 1;
-  color: var(--placeholder-color, #9ca3af);
-  border-radius: 999px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.model-select,
-.effort-select,
-.account-select,
-.adapter-select {
-  height: var(--sender-control-height);
-  display: inline-flex;
-  align-items: center;
-  align-self: center;
-  flex-shrink: 0;
-  border-radius: var(--sender-control-radius);
-  color: var(--placeholder-color, #9ca3af);
-  font-size: 12px;
-  font-weight: 400;
-  transition: background-color .18s ease, color .18s ease;
-
-  .ant-select-selector {
-    height: var(--sender-control-height) !important;
-    min-height: var(--sender-control-height) !important;
-    border-radius: var(--sender-control-radius) !important;
-    border: none !important;
-    background-color: transparent !important;
-    box-shadow: none !important;
-    padding: 0 0 0 8px !important;
-    display: flex;
-    align-items: center;
-    transition: background-color .18s ease, color .18s ease;
-  }
-
-  .ant-select-selection-wrap,
-  .ant-select-selection-search {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  .ant-select-selection-item,
-  .ant-select-selection-placeholder {
-    font-size: 12px !important;
-    font-weight: 400 !important;
-  }
-}
-
-.adapter-select-tooltip-target {
-  border-radius: var(--sender-control-radius);
-  height: var(--sender-control-height);
-}
-
-.adapter-select-tooltip-target--locked {
-  cursor: help;
-}
-
-@media (max-width: 960px) {
-  .sender-select-arrow {
-    font-size: 16px;
-  }
-
-  .model-select,
-  .effort-select,
-  .account-select,
-  .adapter-select {
-    font-size: 11px;
-
-    .ant-select-selector {
-      padding: 0 0 0 6px !important;
-    }
-
-    .ant-select-selection-item,
-    .ant-select-selection-placeholder {
-      font-size: 11px !important;
-    }
-  }
-}

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.scss

@@ -1,164 +0,0 @@
-.file-input-hidden {
-  display: none;
-}
-
-.chat-input-toolbar {
-  --sender-control-height: 28px;
-  --sender-control-radius: 8px;
-  --sender-popup-radius: var(--sender-control-radius);
-  --sender-control-hover-bg: var(--sub-sub-bg-color, #e1e1e1);
-  --sender-control-active-bg: var(--sub-sub-bg-color, #e1e1e1);
-  --sender-control-hover-color: var(--sub-sub-text-color, #303030);
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  margin: 4px -6px -6px;
-  min-width: 0;
-
-  .toolbar-left {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    min-width: 0;
-    flex: 1;
-  }
-
-  .toolbar-right {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-    min-width: 0;
-    justify-content: flex-end;
-  }
-
-  .toolbar-right--inline-edit {
-    gap: 8px;
-
-    .ant-btn {
-      border-radius: 8px;
-    }
-  }
-
-  .toolbar-left > .ant-select,
-  .toolbar-right > .ant-select {
-    align-self: center;
-  }
-}
-
-.toolbar-btn {
-  min-height: var(--sender-control-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 0;
-  border-radius: var(--sender-control-radius);
-  cursor: pointer;
-  color: var(--sub-text-color, #9ca3af);
-  transition: all .2s ease;
-
-  &:hover {
-    color: var(--sender-control-hover-color);
-    background-color: var(--sender-control-hover-bg);
-  }
-
-  .material-symbols-rounded {
-    font-size: 18px;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.toolbar-btn__text {
-  color: currentColor;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.toolbar-btn__icon-shell {
-  width: var(--sender-control-height);
-  height: var(--sender-control-height);
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  transition: all .2s ease;
-}
-
-@media (max-width: 960px) {
-  .chat-input-toolbar {
-    --sender-control-height: 24px;
-
-    gap: 6px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-top: 6px;
-    row-gap: 6px;
-
-    .toolbar-left {
-      gap: 6px;
-      flex-wrap: wrap;
-      width: 100%;
-    }
-
-    .toolbar-right {
-      gap: 6px;
-      margin-left: auto;
-      max-width: 100%;
-      justify-content: flex-end;
-    }
-
-    .toolbar-btn__text {
-      display: none;
-    }
-
-    .toolbar-btn {
-      min-height: var(--sender-control-height);
-
-      .material-symbols-rounded {
-        font-size: 16px;
-      }
-    }
-
-    .toolbar-btn__icon-shell {
-      width: var(--sender-control-height);
-      height: var(--sender-control-height);
-    }
-
-    .toolbar-right--inline-edit {
-      width: 100%;
-      justify-content: flex-end;
-    }
-  }
-
-  .sender-select-shell,
-  .sender-control-tooltip-target,
-  .adapter-select-tooltip-target {
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  .model-select,
-  .effort-select {
-    max-width: min(100%, 196px);
-  }
-
-  .model-select .ant-select-selection-item,
-  .model-select .ant-select-selection-placeholder,
-  .effort-select .ant-select-selection-item,
-  .effort-select .ant-select-selection-placeholder {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}

package/src/components/chat/sender/@components/sender-toolbar/SenderToolbar.tsx

@@ -1,93 +0,0 @@
-import './SenderToolbar.scss'
-
-import type {
-  SenderToolbarData,
-  SenderToolbarHandlers,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-
-import { EffortSelectControl } from '../effort-select/EffortSelectControl'
-import { ModelSelectControl } from '../model-select/ModelSelectControl'
-import { ReferenceActionsControl } from '../reference-actions/ReferenceActionsControl'
-import { SenderSubmitAction } from '../sender-submit-action/SenderSubmitAction'
-
-export function SenderToolbar({
-  state,
-  data,
-  refs,
-  handlers
-}: {
-  state: SenderToolbarState
-  data: SenderToolbarData
-  refs: SenderToolbarRefs
-  handlers: SenderToolbarHandlers
-}) {
-  return (
-    <div className='chat-input-toolbar'>
-      {!state.hideReferenceActions && (
-        <input
-          ref={refs.fileInputRef}
-          type='file'
-          accept='image/*'
-          multiple
-          onChange={handlers.onImageFileChange}
-          className='file-input-hidden'
-        />
-      )}
-
-      <div className='toolbar-left'>
-        {!state.hideReferenceActions && (
-          <ReferenceActionsControl
-            state={state}
-            refs={refs}
-            handlers={handlers}
-          />
-        )}
-
-        {!state.isInlineEdit && (
-          <ModelSelectControl
-            state={state}
-            data={data}
-            refs={refs}
-            handlers={handlers}
-          />
-        )}
-
-        {!state.isInlineEdit && state.supportsEffort && (
-          <EffortSelectControl
-            state={state}
-            data={data}
-            refs={refs}
-            handlers={handlers}
-          />
-        )}
-      </div>
-
-      {!state.hideSubmitAction && (
-        <div className={`toolbar-right ${state.isInlineEdit ? 'toolbar-right--inline-edit' : ''}`.trim()}>
-          <SenderSubmitAction
-            isInlineEdit={state.isInlineEdit}
-            submitLoading={state.submitLoading}
-            submitLabel={data.submitLabel}
-            hasComposerContent={state.hasComposerContent}
-            modelUnavailable={state.modelUnavailable}
-            sendBlocked={state.sendBlocked}
-            sendBlockedTooltip={state.sendBlockedTooltip}
-            showConfirmInteractionAction={state.showConfirmInteractionAction}
-            confirmInteractionLabel={data.confirmInteractionLabel}
-            isThinking={state.isThinking}
-            resolvedSendShortcut={state.resolvedSendShortcut}
-            queueSteerShortcut={data.composerControlShortcuts.queueSteer}
-            queueNextShortcut={data.composerControlShortcuts.queueNext}
-            isMac={state.isMac}
-            onCancel={handlers.onCancel}
-            onConfirmInteractionAction={handlers.onConfirmInteractionOption}
-            onSend={handlers.onSend}
-            onStop={handlers.onInterrupt}
-          />
-        </div>
-      )}
-    </div>
-  )
-}