@vibe-forge/client 0.11.2 → 1.0.0

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

@@ -1,25 +1,37 @@
-.pending-images {
+.pending-attachments {
   display: flex;
-  gap: 8px;
-  padding: 6px 0;
-  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 0 8px;
+  align-items: flex-start;
+  min-width: 0;
 }
 
-.pending-context-files {
+.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;
-  gap: 8px;
-  padding: 4px 0 6px;
+}
+
+.pending-attachments__images {
+  flex-wrap: wrap;
 }
 
 .pending-image {
   position: relative;
-  width: 56px;
-  height: 56px;
+  width: 60px;
+  height: 60px;
   border-radius: 10px;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
+  border: 1px solid rgba(148, 163, 184, .18);
+  background-color: var(--tag-bg, #f3f4f6);
 
   img {
     width: 100%;
@@ -29,15 +41,54 @@
   }
 }
 
-.pending-context-file {
+.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;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 8px 10px;
-  border: 1px solid var(--border-color);
+  gap: 6px;
+  padding: 5px 8px;
+  border: 1px solid rgba(148, 163, 184, .2);
   border-radius: 10px;
-  background: var(--bg-color);
+  background: var(--tag-bg, #f3f4f6);
 }
 
 .pending-context-file__meta {
@@ -45,30 +96,77 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
 }
 
 .pending-context-file__icon {
-  font-size: 18px;
-  color: var(--sub-text-color, #6b7280);
+  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(--text-color);
-  font-size: 12px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
+  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: 20px;
-  height: 20px;
+  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 {
@@ -84,20 +182,59 @@
 
 .pending-image-remove {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: 5px;
+  right: 5px;
   width: 18px;
   height: 18px;
-  border-radius: 9px;
-  background-color: rgba(0, 0, 0, .55);
+  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: 14px;
+    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%;
+  }
+}

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

@@ -28,6 +28,7 @@ export function SenderBody({
   onRemovePendingImage,
   onRemovePendingFile,
   editorRef,
+  sessionId,
   sessionInfo,
   placeholder,
   input,
@@ -35,6 +36,8 @@ export function SenderBody({
   onCursorChange,
   onKeyDown,
   onPaste,
+  secondarySendShortcut,
+  onSecondarySendShortcut,
   resolveCompletionMatch,
   resolveTokenDecorations,
   toolbarState,
@@ -53,6 +56,7 @@ export function SenderBody({
   onRemovePendingImage: (id: string) => void
   onRemovePendingFile: (path: string) => void
   editorRef: MutableRefObject<SenderEditorHandle | null>
+  sessionId?: string
   sessionInfo?: SessionInfo | null
   placeholder: string
   input: string
@@ -60,6 +64,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 +97,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}
@@ -103,6 +112,7 @@ export function SenderBody({
       {!isInlineEdit && (
         <ContextFilePicker
           open={showContextPicker}
+          sessionId={sessionId}
           selectedPaths={pendingFiles.map(file => file.path)}
           onCancel={onCancelContextPicker}
           onConfirm={onConfirmContextPicker}