@vibe-forge/client 0.11.2 → 0.11.3

package/src/components/chat/QueuedMessagesCard.scss

@@ -0,0 +1,195 @@
+.queued-messages-card {
+  &__summary {
+    align-items: center;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__headline {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__headline-icon {
+    flex: 0 0 auto;
+    font-size: 15px;
+    color: var(--primary-color, #2563eb);
+  }
+
+  &__headline-copy {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+
+  &__headline-title {
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.25;
+    color: var(--text-color);
+  }
+
+  &__headline-meta {
+    font-size: 10px;
+    line-height: 1.2;
+    color: var(--sub-text-color, #6b7280);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 5px 8px;
+    border: 1px solid rgba(148, 163, 184, .16);
+    border-radius: 10px;
+    background: transparent;
+    transition: background-color .18s ease, border-color .18s ease;
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .08));
+      border-color: rgba(148, 163, 184, .26);
+    }
+  }
+
+  &__item-main {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+  }
+
+  &__drag {
+    flex: 0 0 auto;
+    color: var(--sub-text-color, #94a3b8);
+    font-size: 14px;
+    cursor: grab;
+  }
+
+  &__item-copy {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__item-summary {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__flags {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+  }
+
+  &__flag {
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--tag-bg, rgba(15, 23, 42, .06));
+    color: var(--sub-text-color, #6b7280);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    .material-symbols-rounded {
+      font-size: 12px;
+      line-height: 1;
+    }
+  }
+
+  &__item-text {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--text-color);
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
+  &__actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    flex: 0 0 auto;
+  }
+
+  &__action {
+    width: 24px;
+    height: 24px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--sub-text-color, #6b7280);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color .18s ease, color .18s ease;
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .12));
+    }
+
+    .material-symbols-rounded {
+      font-size: 14px;
+      line-height: 1;
+    }
+  }
+
+  &__action--edit {
+    color: var(--sub-text-color, #6b7280);
+
+    &:hover {
+      background: var(--tag-hover-bg, rgba(148, 163, 184, .12));
+      color: var(--text-color);
+    }
+  }
+
+  &__action--move {
+    color: var(--primary-color, #2563eb);
+
+    &:hover {
+      background: color-mix(
+        in srgb,
+        var(--primary-color, #2563eb) 12%,
+        transparent
+      );
+      color: color-mix(
+        in srgb,
+        var(--primary-color, #2563eb) 82%,
+        var(--text-color) 18%
+      );
+    }
+  }
+
+  &__action--delete {
+    color: #dc2626;
+
+    &:hover {
+      background: rgba(220, 38, 38, .12);
+      color: #b91c1c;
+    }
+  }
+}

package/src/components/chat/QueuedMessagesCard.tsx

@@ -0,0 +1,170 @@
+import './QueuedMessagesCard.scss'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ChatMessageContent, SessionQueuedMessage, SessionQueuedMessageMode } from '@vibe-forge/core'
+
+import { ChatComposerCard } from './ChatComposerCard'
+
+const getSummaryText = (content: ChatMessageContent[]) => {
+  const text = content
+    .filter((item): item is Extract<ChatMessageContent, { type: 'text' }> => item.type === 'text')
+    .map(item => item.text.trim())
+    .filter(Boolean)
+    .join('\n')
+
+  return text
+}
+
+const getContentFlags = (content: ChatMessageContent[]) => ({
+  hasImages: content.some(item => item.type === 'image'),
+  hasReferences: content.some(item => item.type === 'file')
+})
+
+const reorderIds = (ids: string[], draggedId: string, targetId: string) => {
+  if (draggedId === targetId) {
+    return ids
+  }
+
+  const current = [...ids]
+  const fromIndex = current.indexOf(draggedId)
+  const toIndex = current.indexOf(targetId)
+  if (fromIndex === -1 || toIndex === -1) {
+    return ids
+  }
+
+  current.splice(fromIndex, 1)
+  current.splice(toIndex, 0, draggedId)
+  return current
+}
+
+export function QueuedMessagesCard({
+  mode,
+  items,
+  onMove,
+  onDelete,
+  onEdit,
+  onReorder
+}: {
+  mode: SessionQueuedMessageMode
+  items: SessionQueuedMessage[]
+  onMove: (item: SessionQueuedMessage, targetMode: SessionQueuedMessageMode) => void | Promise<unknown>
+  onDelete: (item: SessionQueuedMessage) => void | Promise<unknown>
+  onEdit: (item: SessionQueuedMessage) => void | Promise<unknown>
+  onReorder: (ids: string[]) => void | Promise<unknown>
+}) {
+  const { t } = useTranslation()
+  const [draggedId, setDraggedId] = useState<string | null>(null)
+
+  const summaryLabel = mode === 'next'
+    ? t('chat.queue.nextTitle')
+    : t('chat.queue.steerTitle')
+  const summaryCount = t('chat.queue.count', { count: items.length })
+
+  if (items.length === 0) {
+    return null
+  }
+
+  const targetMode = mode === 'next' ? 'steer' : 'next'
+
+  return (
+    <ChatComposerCard
+      className='queued-messages-card'
+      summaryClassName='queued-messages-card__summary'
+      bodyClassName='queued-messages-card__body'
+      narrow
+      summary={
+        <div className='queued-messages-card__headline'>
+          <span className='material-symbols-rounded queued-messages-card__headline-icon'>
+            {mode === 'next' ? 'pending' : 'schedule'}
+          </span>
+          <div className='queued-messages-card__headline-copy'>
+            <div className='queued-messages-card__headline-title'>{summaryLabel}</div>
+            <div className='queued-messages-card__headline-meta'>{summaryCount}</div>
+          </div>
+        </div>
+      }
+    >
+      <div className='queued-messages-card__list'>
+        {items.map((item) => {
+          const summaryText = getSummaryText(item.content)
+          const { hasImages, hasReferences } = getContentFlags(item.content)
+          return (
+            <div
+              key={item.id}
+              className='queued-messages-card__item'
+              draggable
+              onDragStart={() => setDraggedId(item.id)}
+              onDragEnd={() => setDraggedId(null)}
+              onDragOver={(event) => {
+                event.preventDefault()
+              }}
+              onDrop={(event) => {
+                event.preventDefault()
+                if (draggedId == null) {
+                  return
+                }
+                const nextIds = reorderIds(items.map(queueItem => queueItem.id), draggedId, item.id)
+                setDraggedId(null)
+                void onReorder(nextIds)
+              }}
+            >
+              <div className='queued-messages-card__item-main'>
+                <span className='queued-messages-card__drag material-symbols-rounded' aria-hidden='true'>
+                  drag_indicator
+                </span>
+                <div className='queued-messages-card__item-copy'>
+                  <div className='queued-messages-card__item-summary'>
+                    {(hasImages || hasReferences) && (
+                      <div className='queued-messages-card__flags'>
+                        {hasImages && (
+                          <span className='queued-messages-card__flag' title={t('chat.queue.hasImage')}>
+                            <span className='material-symbols-rounded'>image</span>
+                          </span>
+                        )}
+                        {hasReferences && (
+                          <span className='queued-messages-card__flag' title={t('chat.queue.hasReference')}>
+                            <span className='material-symbols-rounded'>attach_file</span>
+                          </span>
+                        )}
+                      </div>
+                    )}
+                    <div className='queued-messages-card__item-text'>
+                      {summaryText !== '' ? summaryText : t('chat.queue.attachmentsOnly')}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='queued-messages-card__actions'>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--move'
+                  onClick={() => void onMove(item, targetMode)}
+                  title={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
+                  aria-label={t(targetMode === 'next' ? 'chat.queue.moveToNext' : 'chat.queue.moveToSteer')}
+                >
+                  <span className='material-symbols-rounded'>swap_horiz</span>
+                </button>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--edit'
+                  onClick={() => void onEdit(item)}
+                >
+                  <span className='material-symbols-rounded'>edit</span>
+                </button>
+                <button
+                  type='button'
+                  className='queued-messages-card__action queued-messages-card__action--delete'
+                  onClick={() => void onDelete(item)}
+                >
+                  <span className='material-symbols-rounded'>delete</span>
+                </button>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </ChatComposerCard>
+  )
+}

package/src/components/chat/sender/@components/adapter-select/AdapterSelectControl.scss

@@ -84,3 +84,11 @@
   flex-shrink: 0;
   opacity: .9;
 }
+
+.adapter-option__icon--fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
+}

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

@@ -1,25 +1,35 @@
-.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;
 }
 
-.pending-context-files {
+.pending-attachments__files,
+.pending-attachments__images {
+  width: 100%;
   display: flex;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+.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 +39,53 @@
   }
 }
 
+.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: flex;
+  width: 100%;
   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 +93,74 @@
   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;
+}
+
+.pending-context-file__size {
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--sub-text-color, #6b7280);
 }
 
 .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 +176,52 @@
 
 .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 {
+    width: 100%;
+  }
+
+  .pending-attachments__images {
+    width: 100%;
+  }
+}