@vibe-forge/client 0.11.1 → 0.11.3

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

@@ -1,7 +1,44 @@
 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,
@@ -13,33 +50,68 @@ export function SenderAttachments({
   onRemovePendingImage: (id: string) => void
   onRemovePendingFile: (path: string) => void
 }) {
+  const { t } = useTranslation()
+
   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>
+      {(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>
-          ))}
-        </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>
+          )}
+          {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

@@ -35,6 +35,8 @@ export function SenderBody({
   onCursorChange,
   onKeyDown,
   onPaste,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   resolveCompletionMatch,
   resolveTokenDecorations,
   toolbarState,
@@ -60,6 +62,8 @@ export function SenderBody({
   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,
@@ -91,7 +95,10 @@ export function SenderBody({
         placeholder={placeholder || t('chat.inputPlaceholder')}
         disabled={(!isInlineEdit && modelUnavailable) || (isInlineEdit && isBusy)}
         sendShortcut={toolbarState.resolvedSendShortcut}
+        sendShortcutDisabled={toolbarState.sendBlocked}
         onSendShortcut={toolbarHandlers.onSend}
+        secondarySendShortcut={secondarySendShortcut}
+        onSecondarySendShortcut={onSecondarySendShortcut}
         onInputChange={onInputChange}
         onCursorChange={onCursorChange}
         onKeyDown={onKeyDown}

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

@@ -1,57 +1,123 @@
 .chat-input-wrapper--permission {
   .interaction-panel {
-    margin-bottom: 0;
+    max-height: none;
+    overflow-y: visible;
   }
 }
 
 .interaction-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 6px;
-  padding: 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  background-color: var(--input-bg, #f9fafb);
+  --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);
 
-  &__header {
+  &__summary {
+    align-items: flex-start;
+    padding: 10px 12px 6px;
+    gap: 10px;
+  }
+
+  &__body {
     display: flex;
     flex-direction: column;
+    gap: 6px;
+    padding: 0 8px 8px;
   }
 
-  &__options {
+  &__header {
+    width: 100%;
     display: flex;
-    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  &__title-wrap {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
     gap: 6px;
   }
 
-  &__secondary {
+  &__title-icon {
+    flex: 0 0 auto;
+    font-size: 15px;
+    color: var(--primary-color, #2563eb);
+  }
+
+  &__options {
     display: flex;
     flex-direction: column;
     gap: 6px;
-    overflow: hidden;
-    animation: interaction-panel-secondary-enter .2s ease;
-    transform-origin: top;
+  }
+
+  &__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: center;
+    align-items: flex-start;
     justify-content: flex-start;
     gap: 8px;
     padding: 8px 10px;
     border-radius: 10px;
-    border-color: var(--border-color);
-    background: var(--bg-color);
+    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);
+    }
 
-  &__option.ant-btn:hover,
-  &__option.ant-btn:focus {
-    border-color: rgba(59, 130, 246, .3);
-    background: var(--bg-color);
+    &:hover,
+    &:focus-visible {
+      border-color: var(--interaction-option-hover-border);
+      background: var(--interaction-option-bg);
+      outline: none;
+    }
   }
 
   &__option--allow.ant-btn {
@@ -75,6 +141,24 @@
     }
   }
 
+  &__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;
@@ -85,6 +169,7 @@
     flex: 0 0 auto;
     align-self: center;
     font-size: 13px;
+    margin-top: 1px;
   }
 
   &__option-copy {
@@ -101,7 +186,25 @@
     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;
@@ -116,6 +219,26 @@
     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;
@@ -144,35 +267,28 @@
   }
 }
 
-@keyframes interaction-panel-secondary-enter {
-  from {
-    max-height: 0;
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-
-  to {
-    max-height: 240px;
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .interaction-question {
+  min-width: 0;
   font-size: 12px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--text-color);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .interaction-panel__secondary {
-    animation: none;
-  }
-}
-
 html.dark {
   .interaction-panel {
-    --input-bg: #1f1f1f;
+    --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);
+    }
   }
 }