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

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

@@ -1,119 +0,0 @@
-import './SenderAttachments.scss'
-
-import { useTranslation } from 'react-i18next'
-
-import type { PendingContextFile, PendingImage } from '../../@types/sender-composer'
-
-const formatAttachmentSize = (size?: number) => {
-  if (size == null || Number.isNaN(size) || size <= 0) {
-    return null
-  }
-
-  if (size < 1024) {
-    return `${size} B`
-  }
-
-  if (size < 1024 * 1024) {
-    return `${(size / 1024).toFixed(size >= 10 * 1024 ? 0 : 1)} KB`
-  }
-
-  return `${(size / (1024 * 1024)).toFixed(size >= 10 * 1024 * 1024 ? 0 : 1)} MB`
-}
-
-const getFileDisplayName = (file: PendingContextFile) => {
-  if (file.name != null && file.name !== '') {
-    return file.name
-  }
-
-  const parts = file.path.split(/[\\/]/)
-  return parts.at(-1) ?? file.path
-}
-
-const getFileParentPath = (path: string) => {
-  const normalized = path.replace(/\\/g, '/')
-  const lastSlashIndex = normalized.lastIndexOf('/')
-  if (lastSlashIndex <= 0) {
-    return '.'
-  }
-
-  return normalized.slice(0, lastSlashIndex)
-}
-
-export function SenderAttachments({
-  pendingImages,
-  pendingFiles,
-  onRemovePendingImage,
-  onRemovePendingFile
-}: {
-  pendingImages: PendingImage[]
-  pendingFiles: PendingContextFile[]
-  onRemovePendingImage: (id: string) => void
-  onRemovePendingFile: (path: string) => void
-}) {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      {(pendingImages.length > 0 || pendingFiles.length > 0) && (
-        <div className='pending-attachments'>
-          {pendingFiles.length > 0 && (
-            <div className='pending-attachments__files'>
-              {pendingFiles.map((file) => {
-                const sizeLabel = formatAttachmentSize(file.size)
-
-                return (
-                  <div key={file.path} className='pending-context-file'>
-                    <div className='pending-context-file__meta'>
-                      <span className='material-symbols-rounded pending-context-file__icon'>attach_file</span>
-                      <div className='pending-context-file__copy'>
-                        <span className='pending-context-file__name'>{getFileDisplayName(file)}</span>
-                        <code className='pending-context-file__path'>{getFileParentPath(file.path)}</code>
-                      </div>
-                    </div>
-                    <div className='pending-context-file__actions'>
-                      {sizeLabel != null && <span className='pending-context-file__size'>{sizeLabel}</span>}
-                      <button
-                        type='button'
-                        className='pending-context-file__remove'
-                        onClick={() => onRemovePendingFile(file.path)}
-                      >
-                        <span className='material-symbols-rounded'>close</span>
-                      </button>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          )}
-          {pendingImages.length > 0 && (
-            <div className='pending-attachments__images'>
-              {pendingImages.map((image) => {
-                const displayName = image.name ?? t('chat.attachments.pastedImage')
-                const sizeLabel = formatAttachmentSize(image.size)
-
-                return (
-                  <div key={image.id} className='pending-image'>
-                    <img src={image.url} alt={image.name ?? ''} />
-                    <div className='pending-image__overlay'>
-                      <div className='pending-image__meta'>
-                        <span className='pending-image__name'>{displayName}</span>
-                        {sizeLabel != null && <span className='pending-image__size'>{sizeLabel}</span>}
-                      </div>
-                    </div>
-                    <button
-                      type='button'
-                      className='pending-image-remove'
-                      onClick={() => onRemovePendingImage(image.id)}
-                    >
-                      <span className='material-symbols-rounded'>close</span>
-                    </button>
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      )}
-    </>
-  )
-}

package/src/components/chat/sender/@components/sender-body/SenderBody.tsx

@@ -1,135 +0,0 @@
-import type { MutableRefObject } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import type { SessionInfo } from '@vibe-forge/types'
-
-import { ContextFilePicker } from '#~/components/workspace/ContextFilePicker'
-
-import type {
-  SenderToolbarData,
-  SenderToolbarHandlers,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-
-import type { PendingContextFile } from '../../@types/sender-composer'
-import type { SenderEditorHandle } from '../../@types/sender-editor'
-import type { SenderProps } from '../../@types/sender-props'
-import type { SenderCompletionMatch, SenderTokenDecoration } from '../../@utils/sender-completion'
-import { SenderAttachments } from '../sender-attachments/SenderAttachments'
-import { SenderHeaderControls } from '../sender-header-controls/SenderHeaderControls'
-import { SenderMonacoEditor } from '../sender-monaco-editor/SenderMonacoEditor'
-import { SenderToolbar } from '../sender-toolbar/SenderToolbar'
-
-export function SenderBody({
-  isInlineEdit,
-  isBusy,
-  modelUnavailable,
-  pendingImages,
-  pendingFiles,
-  onRemovePendingImage,
-  onRemovePendingFile,
-  editorRef,
-  sessionId,
-  sessionInfo,
-  placeholder,
-  input,
-  onInputChange,
-  onCursorChange,
-  onKeyDown,
-  onPaste,
-  secondarySendShortcut,
-  onSecondarySendShortcut,
-  resolveCompletionMatch,
-  resolveTokenDecorations,
-  toolbarState,
-  toolbarData,
-  toolbarRefs,
-  toolbarHandlers,
-  sessionTarget,
-  showContextPicker,
-  onCancelContextPicker,
-  onConfirmContextPicker
-}: {
-  isInlineEdit: boolean
-  isBusy: boolean
-  modelUnavailable?: boolean
-  pendingImages: Parameters<typeof SenderAttachments>[0]['pendingImages']
-  pendingFiles: Parameters<typeof SenderAttachments>[0]['pendingFiles']
-  onRemovePendingImage: (id: string) => void
-  onRemovePendingFile: (path: string) => void
-  editorRef: MutableRefObject<SenderEditorHandle | null>
-  sessionId?: string
-  sessionInfo?: SessionInfo | null
-  placeholder: string
-  input: string
-  onInputChange: (value: string, cursorOffset: number | null) => void
-  onCursorChange: (cursorOffset: number | null) => void
-  onKeyDown: (event: KeyboardEvent) => void
-  onPaste: (event: ClipboardEvent) => void | Promise<void>
-  secondarySendShortcut?: string
-  onSecondarySendShortcut?: () => void
-  resolveCompletionMatch: (
-    value: string,
-    cursorOffset: number | null,
-    sessionInfo?: SessionInfo | null
-  ) => SenderCompletionMatch | null
-  resolveTokenDecorations: (value: string) => SenderTokenDecoration[]
-  toolbarState: SenderToolbarState
-  toolbarData: SenderToolbarData
-  toolbarRefs: SenderToolbarRefs
-  toolbarHandlers: SenderToolbarHandlers
-  sessionTarget?: SenderProps['sessionTarget']
-  showContextPicker: boolean
-  onCancelContextPicker: () => void
-  onConfirmContextPicker: (files: PendingContextFile[]) => void
-}) {
-  const { t } = useTranslation()
-
-  return (
-    <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
-      <SenderHeaderControls
-        isInlineEdit={isInlineEdit}
-        sessionTarget={sessionTarget}
-        toolbarState={toolbarState}
-        toolbarData={toolbarData}
-        toolbarRefs={toolbarRefs}
-        toolbarHandlers={toolbarHandlers}
-      />
-      <SenderAttachments
-        pendingImages={pendingImages}
-        pendingFiles={pendingFiles}
-        onRemovePendingImage={onRemovePendingImage}
-        onRemovePendingFile={onRemovePendingFile}
-      />
-      <SenderMonacoEditor
-        editorRef={editorRef}
-        sessionInfo={sessionInfo}
-        value={input}
-        placeholder={placeholder || t('chat.inputPlaceholder')}
-        disabled={(!isInlineEdit && modelUnavailable) || (isInlineEdit && isBusy)}
-        sendShortcut={toolbarState.resolvedSendShortcut}
-        sendShortcutDisabled={toolbarState.sendBlocked || toolbarState.hideSubmitAction}
-        onSendShortcut={toolbarHandlers.onSend}
-        secondarySendShortcut={secondarySendShortcut}
-        onSecondarySendShortcut={onSecondarySendShortcut}
-        onInputChange={onInputChange}
-        onCursorChange={onCursorChange}
-        onKeyDown={onKeyDown}
-        onPaste={onPaste}
-        resolveCompletionMatch={resolveCompletionMatch}
-        resolveTokenDecorations={resolveTokenDecorations}
-      />
-      <SenderToolbar state={toolbarState} data={toolbarData} refs={toolbarRefs} handlers={toolbarHandlers} />
-      {!isInlineEdit && (
-        <ContextFilePicker
-          open={showContextPicker}
-          sessionId={sessionId}
-          selectedPaths={pendingFiles.map(file => file.path)}
-          onCancel={onCancelContextPicker}
-          onConfirm={onConfirmContextPicker}
-        />
-      )}
-    </div>
-  )
-}

package/src/components/chat/sender/@components/sender-header-controls/SenderHeaderControls.tsx

@@ -1,157 +0,0 @@
-import { Tooltip } from 'antd'
-import { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { useSenderHeaderQueryState } from '#~/hooks/use-sender-header-query-state.js'
-
-import type { SenderProps } from '../../@types/sender-props'
-import type {
-  SenderToolbarData,
-  SenderToolbarHandlers,
-  SenderToolbarRefs,
-  SenderToolbarState
-} from '../../@types/sender-toolbar-types'
-import { permissionModeIconMap } from '../../@utils/sender-constants'
-import { PermissionModeControl } from '../permission-mode-control/PermissionModeControl'
-import { SenderSessionTargetBar } from '../session-target/SenderSessionTargetBar'
-
-export function SenderHeaderControls({
-  isInlineEdit,
-  sessionTarget,
-  toolbarState,
-  toolbarData,
-  toolbarRefs,
-  toolbarHandlers
-}: {
-  isInlineEdit: boolean
-  sessionTarget?: SenderProps['sessionTarget']
-  toolbarState: SenderToolbarState
-  toolbarData: SenderToolbarData
-  toolbarRefs: SenderToolbarRefs
-  toolbarHandlers: SenderToolbarHandlers
-}) {
-  const { t } = useTranslation()
-  const { isHeaderCollapsed, setHeaderCollapsed } = useSenderHeaderQueryState()
-  const showPermissionControl = !isInlineEdit && toolbarData.permissionModeOptions.length > 0
-  const hasHeaderControls = !isInlineEdit && (sessionTarget != null || showPermissionControl)
-  const headerStateClass = isHeaderCollapsed ? 'is-collapsed' : 'is-expanded'
-  const selectedPermissionOption = toolbarData.permissionModeOptions.find(
-    option => option.value === toolbarState.permissionMode
-  )
-
-  useEffect(() => {
-    if (isHeaderCollapsed && toolbarState.showPermissionActions) {
-      setHeaderCollapsed(false)
-    }
-  }, [isHeaderCollapsed, setHeaderCollapsed, toolbarState.showPermissionActions])
-
-  if (!hasHeaderControls) {
-    return null
-  }
-
-  const permissionControl = showPermissionControl
-    ? (
-      <PermissionModeControl
-        state={{
-          showPermissionActions: toolbarState.showPermissionActions,
-          permissionMode: toolbarState.permissionMode,
-          canOpenReferenceActions: toolbarState.canOpenReferenceActions,
-          isMac: toolbarState.isMac
-        }}
-        data={{
-          permissionModeOptions: toolbarData.permissionModeOptions,
-          composerControlShortcuts: toolbarData.composerControlShortcuts
-        }}
-        refs={{ permissionMenuNavigation: toolbarRefs.permissionMenuNavigation }}
-        handlers={{
-          onPermissionOpenChange: toolbarHandlers.onPermissionOpenChange,
-          onPermissionMenuKeyDown: toolbarHandlers.onPermissionMenuKeyDown,
-          onSelectPermissionMode: toolbarHandlers.onSelectPermissionMode
-        }}
-      />
-    )
-    : null
-
-  const headerActions = (
-    <div className='chat-input-header-actions'>
-      {permissionControl}
-    </div>
-  )
-
-  const toggleHeader = () => {
-    if (!isHeaderCollapsed) {
-      toolbarHandlers.onPermissionOpenChange(false)
-    }
-    setHeaderCollapsed(!isHeaderCollapsed)
-  }
-
-  const headerToggle = (
-    <div className={`chat-input-header-toggle-shell ${headerStateClass}`.trim()}>
-      {showPermissionControl && isHeaderCollapsed && (
-        <Tooltip
-          title={selectedPermissionOption?.label ?? t('chat.referencePermission')}
-          placement='top'
-          destroyOnHidden
-        >
-          <div
-            className={[
-              'chat-input-header-toggle-mode-indicator',
-              `chat-input-header-toggle-mode-indicator--${toolbarState.permissionMode}`
-            ].join(' ')}
-            aria-label={selectedPermissionOption?.label?.toString() ?? t('chat.referencePermission')}
-          >
-            <span
-              className={[
-                'material-symbols-rounded',
-                'chat-input-header-toggle-mode-icon',
-                `sender-permission-trigger__icon--${toolbarState.permissionMode}`
-              ].join(' ')}
-            >
-              {permissionModeIconMap[toolbarState.permissionMode]}
-            </span>
-          </div>
-        </Tooltip>
-      )}
-      <button
-        type='button'
-        className='chat-input-header-toggle-tab'
-        aria-label={isHeaderCollapsed ? t('chat.expandHeaderControls') : t('chat.collapseHeaderControls')}
-        aria-expanded={!isHeaderCollapsed}
-        onClick={toggleHeader}
-      >
-        <span className='material-symbols-rounded'>
-          {isHeaderCollapsed ? 'unfold_more' : 'unfold_less'}
-        </span>
-      </button>
-    </div>
-  )
-
-  if (sessionTarget != null) {
-    return (
-      <>
-        <SenderSessionTargetBar
-          draft={sessionTarget.draft}
-          locked={sessionTarget.locked}
-          disabled={sessionTarget.disabled}
-          onChange={sessionTarget.onChange}
-          actions={headerActions}
-          className={`chat-input-header-block ${headerStateClass}`.trim()}
-          ariaHidden={isHeaderCollapsed}
-        />
-        {headerToggle}
-      </>
-    )
-  }
-
-  return (
-    <>
-      <div
-        className={`chat-input-top-actions chat-input-header-block ${headerStateClass}`.trim()}
-        aria-hidden={isHeaderCollapsed}
-      >
-        {headerActions}
-      </div>
-      {headerToggle}
-    </>
-  )
-}

package/src/components/chat/sender/@components/sender-interaction-panel/SenderInteractionPanel.scss

@@ -1,294 +0,0 @@
-.chat-input-wrapper--permission {
-  .interaction-panel {
-    max-height: none;
-    overflow-y: visible;
-  }
-}
-
-.interaction-panel {
-  --interaction-muted: var(--sub-text-color, #6b7280);
-  --interaction-option-bg: var(--bg-color);
-  --interaction-option-border: var(--border-color);
-  --interaction-option-hover-border: rgba(59, 130, 246, .3);
-  --interaction-option-active-bg: rgba(59, 130, 246, .08);
-  --interaction-option-active-border: rgba(59, 130, 246, .42);
-  --interaction-info-bg: rgba(15, 23, 42, .06);
-
-  &__summary {
-    align-items: flex-start;
-    padding: 10px 12px 6px;
-    gap: 10px;
-  }
-
-  &__body {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 0 8px 8px;
-  }
-
-  &__header {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 8px;
-  }
-
-  &__title-wrap {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  &__title-icon {
-    flex: 0 0 auto;
-    font-size: 15px;
-    color: var(--primary-color, #2563eb);
-  }
-
-  &__options {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-
-  &__nav {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    margin-top: -1px;
-  }
-
-  &__nav-button {
-    width: 22px;
-    height: 22px;
-    padding: 0;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--interaction-muted);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: background-color .18s ease, color .18s ease;
-
-    .material-symbols-rounded {
-      font-size: 17px;
-      line-height: 1;
-    }
-
-    &:hover,
-    &:focus-visible {
-      background: rgba(148, 163, 184, .14);
-      color: var(--text-color);
-      outline: none;
-    }
-  }
-
-  &__option.ant-btn {
-    height: auto;
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 10px;
-    border-color: var(--interaction-option-border);
-    background: var(--interaction-option-bg);
-    box-shadow: none;
-    text-align: left;
-    transition:
-      background-color .18s ease,
-      border-color .18s ease,
-      color .18s ease;
-
-    &.is-active {
-      background: var(--interaction-option-active-bg);
-      border-color: var(--interaction-option-active-border);
-    }
-
-    &:hover,
-    &:focus-visible {
-      border-color: var(--interaction-option-hover-border);
-      background: var(--interaction-option-bg);
-      outline: none;
-    }
-  }
-
-  &__option--allow.ant-btn {
-    .interaction-panel__option-icon {
-      color: #15803d;
-      background-color: rgba(22, 163, 74, .1);
-    }
-  }
-
-  &__option--deny.ant-btn {
-    .interaction-panel__option-icon {
-      color: #b91c1c;
-      background-color: rgba(220, 38, 38, .08);
-    }
-  }
-
-  &__option--neutral.ant-btn {
-    .interaction-panel__option-icon {
-      color: #6b7280;
-      background-color: rgba(15, 23, 42, .06);
-    }
-  }
-
-  &__option--question.ant-btn {
-    display: block;
-    padding: 6px 8px;
-    background: transparent;
-    border-color: rgba(148, 163, 184, .16);
-
-    &.is-active {
-      background: rgba(148, 163, 184, .16);
-      border-color: rgba(148, 163, 184, .38);
-    }
-
-    &:hover,
-    &:focus-visible {
-      background: rgba(148, 163, 184, .14);
-      border-color: rgba(148, 163, 184, .3);
-    }
-  }
-
-  &__option-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border-radius: 999px;
-    flex: 0 0 auto;
-    align-self: center;
-    font-size: 13px;
-    margin-top: 1px;
-  }
-
-  &__option-copy {
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    flex: 1;
-  }
-
-  &__option-text {
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-    min-width: 0;
-  }
-
-  &__option-main {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    min-width: 0;
-  }
-
-  &__option-index {
-    flex: 0 0 auto;
-    color: var(--interaction-muted);
-    font-size: 11px;
-    font-weight: 600;
-    line-height: 1.25;
-    user-select: none;
-  }
-
-  &__option-label {
-    min-width: 0;
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 1.35;
-    color: var(--text-color);
-    word-break: break-word;
-  }
-
-  &__option-description {
-    font-size: 10px;
-    line-height: 1.25;
-    color: var(--placeholder-color, #9ca3af);
-    word-break: break-word;
-  }
-
-  &__option-side {
-    display: inline-flex;
-    align-items: center;
-    flex: 0 0 auto;
-  }
-
-  &__info-trigger {
-    width: 16px;
-    height: 16px;
-    border-radius: 999px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--interaction-info-bg);
-    color: var(--interaction-muted);
-    font-size: 12px;
-    line-height: 1;
-    cursor: help;
-  }
-
-  &__toggle.ant-btn {
-    height: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 4px;
-    width: fit-content;
-    padding: 0;
-    color: var(--placeholder-color, #9ca3af);
-  }
-
-  &__toggle.ant-btn:hover,
-  &__toggle.ant-btn:focus {
-    color: var(--sub-text-color, #6b7280);
-    background: transparent;
-  }
-
-  &__toggle-label {
-    font-size: 10px;
-    line-height: 1.3;
-  }
-
-  &__toggle-icon {
-    font-size: 14px;
-    line-height: 1;
-  }
-}
-
-.interaction-question {
-  min-width: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--text-color);
-}
-
-html.dark {
-  .interaction-panel {
-    --interaction-option-bg: rgba(15, 23, 42, .52);
-    --interaction-option-border: rgba(71, 85, 105, .36);
-    --interaction-option-hover-border: rgba(148, 163, 184, .5);
-    --interaction-option-active-bg: rgba(51, 65, 85, .44);
-    --interaction-option-active-border: rgba(148, 163, 184, .52);
-    --interaction-info-bg: rgba(148, 163, 184, .14);
-  }
-
-  .interaction-panel__option.ant-btn {
-    &:hover,
-    &:focus-visible {
-      background: var(--interaction-option-bg);
-    }
-  }
-}