@vibe-forge/client 0.9.0 → 0.10.1

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

@@ -0,0 +1,106 @@
+.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);
+  }
+}
+
+.reference-actions-popover,
+.reference-actions-submenu-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--submenu {
+  min-width: 168px;
+
+  .reference-action-option {
+    gap: 8px;
+  }
+}
+
+.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

@@ -0,0 +1,156 @@
+import './ReferenceActionsControl.scss'
+import './ReferenceActionsOption.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 { ReferencePermissionActionsPopover } from './ReferencePermissionActionsPopover'
+
+export function ReferenceActionsControl({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<
+    SenderToolbarState,
+    | 'isInlineEdit'
+    | 'canOpenReferenceActions'
+    | 'showReferenceActions'
+    | 'showPermissionActions'
+    | 'permissionMode'
+    | 'isMac'
+  >
+  data: Pick<SenderToolbarData, 'permissionModeOptions' | 'composerControlShortcuts'>
+  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation' | 'permissionMenuNavigation'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onReferenceOpenChange'
+    | 'onShowPermissionActionsChange'
+    | 'onOpenContextPicker'
+    | 'onReferenceImageSelect'
+    | 'onReferenceMenuKeyDown'
+    | 'onPermissionMenuKeyDown'
+    | 'onSelectPermissionMode'
+    | 'onCloseReferenceActions'
+  >
+}) {
+  const { t } = useTranslation()
+  const {
+    isInlineEdit,
+    canOpenReferenceActions,
+    showReferenceActions,
+    showPermissionActions,
+    permissionMode,
+    isMac
+  } = state
+  const { permissionModeOptions, composerControlShortcuts } = data
+  const { referenceMenuNavigation, permissionMenuNavigation } = refs
+  const {
+    onReferenceOpenChange,
+    onShowPermissionActionsChange,
+    onOpenContextPicker,
+    onReferenceImageSelect,
+    onReferenceMenuKeyDown,
+    onPermissionMenuKeyDown,
+    onSelectPermissionMode,
+    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')
+              onShowPermissionActionsChange(false)
+            }}
+            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')
+                onShowPermissionActionsChange(false)
+              }}
+              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>
+          )}
+          {!isInlineEdit && permissionModeOptions.length > 0 && (
+            <ReferencePermissionActionsPopover
+              state={{ showReferenceActions, showPermissionActions, permissionMode }}
+              data={{ permissionModeOptions }}
+              refs={{ referenceMenuNavigation, permissionMenuNavigation }}
+              handlers={{
+                onShowPermissionActionsChange,
+                onReferenceMenuKeyDown,
+                onPermissionMenuKeyDown,
+                onSelectPermissionMode
+              }}
+            />
+          )}
+        </div>
+      }
+      open={showReferenceActions}
+      onOpenChange={onReferenceOpenChange}
+      placement='topLeft'
+      trigger='click'
+      classNames={{ root: 'reference-actions-popover' }}
+      destroyOnHidden
+      arrow={false}
+    >
+      <ShortcutTooltip
+        shortcut={composerControlShortcuts.switchPermissionMode}
+        isMac={isMac}
+        title={t('chat.referenceActionsShortcutTooltip')}
+        enabled={!showReferenceActions}
+      >
+        <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>
+      </ShortcutTooltip>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,34 @@
+.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/reference-actions/ReferencePermissionActionsPopover.tsx

@@ -0,0 +1,111 @@
+import { Popover } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+import type {
+  SenderToolbarData,
+  SenderToolbarHandlers,
+  SenderToolbarRefs,
+  SenderToolbarState
+} from '../../@types/sender-toolbar-types'
+import { permissionModeIconMap } from '../../@utils/sender-constants'
+
+export function ReferencePermissionActionsPopover({
+  state,
+  data,
+  refs,
+  handlers
+}: {
+  state: Pick<SenderToolbarState, 'showReferenceActions' | 'showPermissionActions' | 'permissionMode'>
+  data: Pick<SenderToolbarData, 'permissionModeOptions'>
+  refs: Pick<SenderToolbarRefs, 'referenceMenuNavigation' | 'permissionMenuNavigation'>
+  handlers: Pick<
+    SenderToolbarHandlers,
+    | 'onShowPermissionActionsChange'
+    | 'onReferenceMenuKeyDown'
+    | 'onPermissionMenuKeyDown'
+    | 'onSelectPermissionMode'
+  >
+}) {
+  const { t } = useTranslation()
+  const { showReferenceActions, showPermissionActions, permissionMode } = state
+  const { permissionModeOptions } = data
+  const { referenceMenuNavigation, permissionMenuNavigation } = refs
+  const {
+    onShowPermissionActionsChange,
+    onReferenceMenuKeyDown,
+    onPermissionMenuKeyDown,
+    onSelectPermissionMode
+  } = handlers
+  const selectedPermissionOption = permissionModeOptions.find(option => option.value === permissionMode)
+
+  return (
+    <Popover
+      content={
+        <div className='reference-actions-menu reference-actions-menu--submenu'>
+          {permissionModeOptions.map(option => (
+            <button
+              key={option.value}
+              ref={permissionMenuNavigation.registerItem(option.value)}
+              type='button'
+              className={`reference-actions-menu-item ${permissionMode === option.value ? 'is-selected' : ''}`.trim()}
+              onMouseEnter={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onFocus={() => permissionMenuNavigation.setActiveKey(option.value)}
+              onKeyDown={(event) => onPermissionMenuKeyDown(event, option.value)}
+              onClick={() => {
+                onSelectPermissionMode(option.value)
+              }}
+            >
+              <span className='reference-action-option reference-action-option--permission'>
+                <span className='material-symbols-rounded reference-action-option__icon'>
+                  {permissionModeIconMap[option.value]}
+                </span>
+                <span className='reference-action-option__label'>{option.label}</span>
+                {permissionMode === option.value && (
+                  <span className='material-symbols-rounded reference-action-option__check'>check</span>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      }
+      open={showReferenceActions ? showPermissionActions : false}
+      onOpenChange={(nextOpen) => {
+        if (!showReferenceActions) {
+          return
+        }
+
+        referenceMenuNavigation.setActiveKey('permission')
+        if (nextOpen) {
+          permissionMenuNavigation.setActiveKey(permissionMode)
+        }
+        onShowPermissionActionsChange(nextOpen)
+      }}
+      placement='rightTop'
+      trigger={['hover', 'click']}
+      classNames={{ root: 'reference-actions-submenu-popover' }}
+      destroyOnHidden
+      arrow={false}
+    >
+      <button
+        ref={referenceMenuNavigation.registerItem('permission')}
+        type='button'
+        className='reference-actions-menu-item reference-actions-menu-item--submenu'
+        onMouseEnter={() => referenceMenuNavigation.setActiveKey('permission')}
+        onFocus={() => referenceMenuNavigation.setActiveKey('permission')}
+        onKeyDown={(event) => onReferenceMenuKeyDown(event, 'permission')}
+        onClick={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          onShowPermissionActionsChange(!showPermissionActions)
+        }}
+      >
+        <span className='reference-action-option'>
+          <span className='material-symbols-rounded reference-action-option__icon'>lock</span>
+          <span className='reference-action-option__label'>{t('chat.referencePermission')}</span>
+          <span className='reference-action-option__value'>{selectedPermissionOption?.label}</span>
+          <span className='material-symbols-rounded reference-action-option__chevron'>chevron_right</span>
+        </span>
+      </button>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,103 @@
+.pending-images {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0;
+  flex-wrap: wrap;
+}
+
+.pending-context-files {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 0 6px;
+}
+
+.pending-image {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.pending-context-file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background: var(--bg-color);
+}
+
+.pending-context-file__meta {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pending-context-file__icon {
+  font-size: 18px;
+  color: var(--sub-text-color, #6b7280);
+}
+
+.pending-context-file__path {
+  display: block;
+  min-width: 0;
+  color: var(--text-color);
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.pending-context-file__remove {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sub-text-color, #6b7280);
+  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: 4px;
+  right: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: rgba(0, 0, 0, .55);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+}

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

@@ -0,0 +1,47 @@
+import './SenderAttachments.scss'
+
+import type { PendingContextFile, PendingImage } from '../../@types/sender-composer'
+
+export function SenderAttachments({
+  pendingImages,
+  pendingFiles,
+  onRemovePendingImage,
+  onRemovePendingFile
+}: {
+  pendingImages: PendingImage[]
+  pendingFiles: PendingContextFile[]
+  onRemovePendingImage: (id: string) => void
+  onRemovePendingFile: (path: string) => void
+}) {
+  return (
+    <>
+      {pendingImages.length > 0 && (
+        <div className='pending-images'>
+          {pendingImages.map(image => (
+            <div key={image.id} className='pending-image'>
+              <img src={image.url} alt={image.name ?? 'image'} />
+              <div className='pending-image-remove' onClick={() => onRemovePendingImage(image.id)}>
+                <span className='material-symbols-rounded'>close</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+      {pendingFiles.length > 0 && (
+        <div className='pending-context-files'>
+          {pendingFiles.map(file => (
+            <div key={file.path} className='pending-context-file'>
+              <div className='pending-context-file__meta'>
+                <span className='material-symbols-rounded pending-context-file__icon'>description</span>
+                <code className='pending-context-file__path'>{file.path}</code>
+              </div>
+              <div className='pending-context-file__remove' onClick={() => onRemovePendingFile(file.path)}>
+                <span className='material-symbols-rounded'>close</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,137 @@
+import { Button } from 'antd'
+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 { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
+
+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 { SenderCompletionMatch, SenderTokenDecoration } from '../../@utils/sender-completion'
+import { SenderAttachments } from '../sender-attachments/SenderAttachments'
+import { SenderMonacoEditor } from '../sender-monaco-editor/SenderMonacoEditor'
+import { SenderToolbar } from '../sender-toolbar/SenderToolbar'
+
+export function SenderBody({
+  isInlineEdit,
+  isBusy,
+  modelUnavailable,
+  errorBanner,
+  onRetryConnection,
+  pendingImages,
+  pendingFiles,
+  onRemovePendingImage,
+  onRemovePendingFile,
+  editorRef,
+  sessionInfo,
+  placeholder,
+  input,
+  onInputChange,
+  onCursorChange,
+  onKeyDown,
+  onPaste,
+  resolveCompletionMatch,
+  resolveTokenDecorations,
+  toolbarState,
+  toolbarData,
+  toolbarRefs,
+  toolbarHandlers,
+  showContextPicker,
+  onCancelContextPicker,
+  onConfirmContextPicker
+}: {
+  isInlineEdit: boolean
+  isBusy: boolean
+  modelUnavailable?: boolean
+  errorBanner?: ChatErrorBannerState | null
+  onRetryConnection?: () => void
+  pendingImages: Parameters<typeof SenderAttachments>[0]['pendingImages']
+  pendingFiles: Parameters<typeof SenderAttachments>[0]['pendingFiles']
+  onRemovePendingImage: (id: string) => void
+  onRemovePendingFile: (path: string) => void
+  editorRef: MutableRefObject<SenderEditorHandle | null>
+  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>
+  resolveCompletionMatch: (
+    value: string,
+    cursorOffset: number | null,
+    sessionInfo?: SessionInfo | null
+  ) => SenderCompletionMatch | null
+  resolveTokenDecorations: (value: string) => SenderTokenDecoration[]
+  toolbarState: SenderToolbarState
+  toolbarData: SenderToolbarData
+  toolbarRefs: SenderToolbarRefs
+  toolbarHandlers: SenderToolbarHandlers
+  showContextPicker: boolean
+  onCancelContextPicker: () => void
+  onConfirmContextPicker: (files: PendingContextFile[]) => void
+}) {
+  const { t } = useTranslation()
+  const errorTitle = errorBanner?.kind === 'session'
+    ? t('chat.sessionErrorTitle')
+    : t('chat.connectionErrorTitle')
+
+  return (
+    <div className={`chat-input-container ${isInlineEdit ? 'chat-input-container--inline-edit' : ''}`.trim()}>
+      {!isInlineEdit && errorBanner != null && errorBanner.message.trim() !== '' && (
+        <div className='connection-error-banner'>
+          <div className='connection-error-content'>
+            <span className='material-symbols-rounded'>error</span>
+            <div className='connection-error-copy'>
+              <div className='connection-error-title'>{errorTitle}</div>
+              <div className='connection-error-message'>{errorBanner.message}</div>
+            </div>
+          </div>
+          {errorBanner.kind === 'connection' && onRetryConnection != null && (
+            <Button size='small' onClick={onRetryConnection}>{t('chat.retryConnection')}</Button>
+          )}
+        </div>
+      )}
+      {!isInlineEdit && modelUnavailable && <div className='model-unavailable'>{t('chat.modelConfigRequired')}</div>}
+      <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}
+        onSendShortcut={toolbarHandlers.onSend}
+        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}
+          selectedPaths={pendingFiles.map(file => file.path)}
+          onCancel={onCancelContextPicker}
+          onConfirm={onConfirmContextPicker}
+        />
+      )}
+    </div>
+  )
+}