@vibe-forge/client 0.11.2 → 0.11.3

package/src/components/chat/ChatComposerCard.tsx

@@ -0,0 +1,59 @@
+import './ChatComposerCard.scss'
+
+import type { ReactNode } from 'react'
+
+export function ChatComposerCard({
+  className,
+  summary,
+  summaryClassName,
+  bodyClassName,
+  progress,
+  children,
+  expanded = true,
+  onToggle,
+  narrow = false
+}: {
+  className?: string
+  summary: ReactNode
+  summaryClassName?: string
+  bodyClassName?: string
+  progress?: ReactNode
+  children?: ReactNode
+  expanded?: boolean
+  onToggle?: () => void
+  narrow?: boolean
+}) {
+  const classes = [
+    'chat-composer-card',
+    narrow ? 'chat-composer-card--narrow' : '',
+    expanded ? 'is-expanded' : 'is-collapsed',
+    className ?? ''
+  ].filter(Boolean).join(' ')
+  const summaryClasses = ['chat-composer-card__summary', summaryClassName ?? ''].filter(Boolean).join(' ')
+  const bodyClasses = ['chat-composer-card__body', bodyClassName ?? ''].filter(Boolean).join(' ')
+  const hasBody = children != null
+
+  return (
+    <section className={classes}>
+      {onToggle != null
+        ? (
+          <button type='button' className={summaryClasses} onClick={onToggle}>
+            {summary}
+          </button>
+        )
+        : (
+          <div className={summaryClasses}>
+            {summary}
+          </div>
+        )}
+      {progress}
+      {hasBody && (
+        <div className='chat-composer-card__content' aria-hidden={!expanded}>
+          <div className={bodyClasses}>
+            {children}
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/chat/ChatHeader.tsx

@@ -1,6 +1,6 @@
 import './ChatHeader.scss'
 
-import type { Session } from '@vibe-forge/core'
+import type { Session, SessionStatus } from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 import { App, Button, Dropdown, Tooltip } from 'antd'
 import type { MenuProps } from 'antd'
@@ -44,6 +44,7 @@ export function ChatHeader({
   sessionInfo,
   sessionId,
   sessionTitle,
+  sessionStatus,
   isStarred,
   isArchived,
   tags,
@@ -57,6 +58,7 @@ export function ChatHeader({
   sessionInfo: SessionInfo | null
   sessionId?: string
   sessionTitle?: string
+  sessionStatus?: SessionStatus
   isStarred?: boolean
   isArchived?: boolean
   tags?: string[]

package/src/components/chat/ChatHistoryView.tsx

@@ -1,9 +1,17 @@
 import { App } from 'antd'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 
-import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session } from '@vibe-forge/core'
+import type {
+  AskUserQuestionParams,
+  ChatMessage,
+  ChatMessageContent,
+  Session,
+  SessionMessageQueueState,
+  SessionQueuedMessage,
+  SessionQueuedMessageMode
+} from '@vibe-forge/core'
 import type { SessionInfo } from '@vibe-forge/types'
 
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
@@ -11,14 +19,16 @@ import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { useChatScroll } from '#~/hooks/chat/use-chat-scroll'
 import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
-
+import { getLoopedIndex } from '#~/hooks/use-roving-focus-list'
 import { CurrentTodoList } from './CurrentTodoList'
 import { NewSessionGuide } from './NewSessionGuide'
+import { QueuedMessagesCard } from './QueuedMessagesCard'
 import { MessageItem } from './messages/MessageItem'
 import { MessageStatusNotice } from './messages/MessageStatusNotice'
 import type { ChatHistoryStatusNotice } from './messages/build-chat-history-status-notices'
 import { buildMessageTurns } from './messages/message-turns'
 import { processMessages } from './messages/message-utils'
+import { SenderInteractionPanel } from './sender/@components/sender-interaction-panel/SenderInteractionPanel'
 import { Sender } from './sender/Sender'
 import { ToolGroup } from './tools/core/ToolGroup'
 
@@ -30,6 +40,7 @@ export function ChatHistoryView({
   targetToolUseId,
   sessionInfo,
   historyStatusNotices,
+  queuedMessages,
   onRetryConnection,
   interactionRequest,
   onInteractionResponse,
@@ -64,6 +75,7 @@ export function ChatHistoryView({
   targetToolUseId?: string
   sessionInfo: SessionInfo | null
   historyStatusNotices: ChatHistoryStatusNotice[]
+  queuedMessages: SessionMessageQueueState
   onRetryConnection: () => void
   interactionRequest: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse: (id: string, data: string | string[]) => void
@@ -102,6 +114,10 @@ export function ChatHistoryView({
     isCreating,
     send,
     sendContent,
+    enqueueContent,
+    removeQueuedContent,
+    moveQueuedContent,
+    reorderQueuedContent,
     editMessage,
     forkMessage,
     interrupt,
@@ -121,6 +137,10 @@ export function ChatHistoryView({
   const handledTargetScrollKeyRef = useRef('')
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
   const [expandedTurnIds, setExpandedTurnIds] = useState<Set<string>>(new Set())
+  const [queueMode, setQueueMode] = useState<SessionQueuedMessageMode>('steer')
+  const [queuedDraft, setQueuedDraft] = useState<{ content: ChatMessageContent[] } | null>(null)
+  const [activeInteractionOptionIndex, setActiveInteractionOptionIndex] = useState(0)
+  const interactionOptions = interactionRequest?.payload.options ?? []
   const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
     const id = globalThis.crypto?.randomUUID
       ? globalThis.crypto.randomUUID()
@@ -133,37 +153,78 @@ export function ChatHistoryView({
     }
   }
 
-  const handleSend = async (text: string) => {
+  const handleSendContent = async (content: ChatMessageContent[], mode?: SessionQueuedMessageMode) => {
+    const resolvedMode = mode ?? queueMode
+
+    if (session?.id && session.status === 'running') {
+      const didQueue = await enqueueContent(resolvedMode, content)
+      if (didQueue && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didQueue
+    }
+
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(text)
+      const optimisticMessage = buildUserMessage(content)
       setMessages((prev) => [...prev, optimisticMessage])
-      const didSend = await send(text)
+      const didSend = await sendContent(content, mode)
       if (!didSend) {
         setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
       }
-      return
+      if (didSend && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didSend
     }
 
-    const didSend = await send(text)
+    const didSend = await sendContent(content, mode)
     if (didSend) {
-      setMessages((prev) => [...prev, buildUserMessage(text)])
+      setMessages((prev) => [...prev, buildUserMessage(content)])
+      if (queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
     }
+    return didSend
   }
-  const handleSendContent = async (content: ChatMessageContent[]) => {
+
+  const handleSend = async (text: string, mode?: SessionQueuedMessageMode) => {
+    const resolvedMode = mode ?? queueMode
+
+    if (session?.id && session.status === 'running') {
+      const didQueue = await enqueueContent(resolvedMode, [{ type: 'text', text: text.trim() }])
+      if (didQueue && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didQueue
+    }
+
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(content)
+      const optimisticMessage = buildUserMessage(text)
       setMessages((prev) => [...prev, optimisticMessage])
-      const didSend = await sendContent(content)
+      const didSend = await send(text, mode)
       if (!didSend) {
         setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
       }
-      return
+      if (didSend && queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
+      return didSend
     }
 
-    const didSend = await sendContent(content)
+    const didSend = await send(text, mode)
     if (didSend) {
-      setMessages((prev) => [...prev, buildUserMessage(content)])
+      setMessages((prev) => [...prev, buildUserMessage(text)])
+      if (queuedDraft != null) {
+        setQueuedDraft(null)
+        setQueueMode('steer')
+      }
     }
+    return didSend
   }
   useEffect(() => {
     initialScrollDoneRef.current = false
@@ -171,7 +232,42 @@ export function ChatHistoryView({
     handledTargetScrollKeyRef.current = ''
     setEditingMessageId(null)
     setExpandedTurnIds(new Set())
+    setQueuedDraft(null)
+    setQueueMode('steer')
   }, [session?.id])
+  useEffect(() => {
+    setActiveInteractionOptionIndex(0)
+  }, [interactionRequest?.id])
+  useEffect(() => {
+    if (interactionOptions.length === 0) {
+      setActiveInteractionOptionIndex(0)
+      return
+    }
+
+    setActiveInteractionOptionIndex((current) => Math.min(current, interactionOptions.length - 1))
+  }, [interactionOptions.length])
+
+  const handleMoveInteractionOption = useCallback((delta: number) => {
+    if (interactionOptions.length === 0) {
+      return
+    }
+
+    setActiveInteractionOptionIndex((current) => getLoopedIndex(current, delta, interactionOptions.length))
+  }, [interactionOptions.length])
+
+  const handleSubmitActiveInteractionOption = useCallback(() => {
+    if (interactionRequest == null) {
+      return
+    }
+
+    const option = interactionOptions[activeInteractionOptionIndex] ?? interactionOptions[0]
+    if (option == null) {
+      return
+    }
+
+    onInteractionResponse(interactionRequest.id, option.value ?? option.label)
+  }, [activeInteractionOptionIndex, interactionOptions, interactionRequest, onInteractionResponse])
+
   useEffect(() => {
     if (!initialScrollDoneRef.current && isReady && location.hash === '') {
       scrollToBottom('auto')
@@ -236,6 +332,38 @@ export function ChatHistoryView({
     }
     return null
   }, [renderItems])
+  const handleEditQueuedMessage = async (item: SessionQueuedMessage) => {
+    const removed = await removeQueuedContent(item.id)
+    if (!removed) {
+      return
+    }
+    setQueuedDraft({ content: item.content })
+    setQueueMode('steer')
+  }
+  const handleMoveQueuedMessage = async (item: SessionQueuedMessage, targetMode: SessionQueuedMessageMode) => {
+    await moveQueuedContent(item.id, targetMode)
+  }
+  const isPermissionInteraction = interactionRequest?.payload.kind === 'permission'
+  const interactionPanel = !isInlineEditing && interactionRequest != null
+    ? (
+      <SenderInteractionPanel
+        interactionRequest={interactionRequest}
+        activeOptionIndex={activeInteractionOptionIndex}
+        permissionContext={interactionRequest.payload.kind === 'permission'
+          ? interactionRequest.payload.permissionContext
+          : undefined}
+        deniedTools={interactionRequest.payload.kind === 'permission'
+          ? (interactionRequest.payload.permissionContext?.deniedTools ?? [])
+          : []}
+        reasons={interactionRequest.payload.kind === 'permission'
+          ? (interactionRequest.payload.permissionContext?.reasons ?? [])
+          : []}
+        onActiveOptionIndexChange={setActiveInteractionOptionIndex}
+        onMoveActiveOption={handleMoveInteractionOption}
+        onInteractionResponse={onInteractionResponse}
+      />
+    )
+    : null
 
   useEffect(() => {
     const hash = hashAnchorId
@@ -489,41 +617,79 @@ export function ChatHistoryView({
         </div>
       )}
 
-      <CurrentTodoList messages={messages} />
-      {!isInlineEditing && (
-        <div className='sender-container'>
-          <Sender
-            onSend={handleSend}
-            onSendContent={handleSendContent}
-            adapterLocked={session?.id != null}
-            sessionStatus={isCreating ? 'running' : session?.status}
-            onInterrupt={interrupt}
-            onClear={clearMessages}
-            sessionInfo={sessionInfo}
-            interactionRequest={interactionRequest}
-            onInteractionResponse={onInteractionResponse}
-            placeholder={placeholder}
-            modelMenuGroups={modelMenuGroups}
-            modelSearchOptions={modelSearchOptions}
-            recommendedModelOptions={recommendedModelOptions}
-            servicePreviewModelOptions={servicePreviewModelOptions}
-            onToggleRecommendedModel={onToggleRecommendedModel}
-            updatingRecommendedModelValue={updatingRecommendedModelValue}
-            selectedModel={selectedModel}
-            onModelChange={onModelChange}
-            effort={effort}
-            effortOptions={effortOptions}
-            onEffortChange={onEffortChange}
-            permissionMode={permissionMode}
-            permissionModeOptions={permissionModeOptions}
-            onPermissionModeChange={onPermissionModeChange}
-            selectedAdapter={selectedAdapter}
-            adapterOptions={adapterOptions}
-            onAdapterChange={onAdapterChange}
-            modelUnavailable={modelUnavailable}
-          />
+      <div className='chat-composer-stack'>
+        <div className='chat-composer-stack__inner'>
+          {isPermissionInteraction && interactionPanel}
+          <CurrentTodoList messages={messages} />
+          {!isInlineEditing && (
+            <QueuedMessagesCard
+              mode='next'
+              items={queuedMessages.next}
+              onMove={(item, targetMode) => void handleMoveQueuedMessage(item, targetMode)}
+              onDelete={(item) => void removeQueuedContent(item.id)}
+              onEdit={(item) => void handleEditQueuedMessage(item)}
+              onReorder={(ids) => reorderQueuedContent('next', ids)}
+            />
+          )}
+          {!isInlineEditing && (
+            <QueuedMessagesCard
+              mode='steer'
+              items={queuedMessages.steer}
+              onMove={(item, targetMode) => void handleMoveQueuedMessage(item, targetMode)}
+              onDelete={(item) => void removeQueuedContent(item.id)}
+              onEdit={(item) => void handleEditQueuedMessage(item)}
+              onReorder={(ids) => reorderQueuedContent('steer', ids)}
+            />
+          )}
+          {!isPermissionInteraction && interactionPanel}
+          {!isInlineEditing && (
+            <div className='sender-container'>
+              <Sender
+                onSend={handleSend}
+                onSendContent={handleSendContent}
+                adapterLocked={session?.id != null}
+                sessionStatus={isCreating ? 'running' : session?.status}
+                onInterrupt={interrupt}
+                onClear={clearMessages}
+                sessionInfo={sessionInfo}
+                interactionRequest={interactionRequest}
+                onInteractionResponse={onInteractionResponse}
+                interactionOptionNavigation={interactionRequest != null && interactionOptions.length > 0
+                  ? {
+                    optionCount: interactionOptions.length,
+                    activeIndex: activeInteractionOptionIndex,
+                    onMove: handleMoveInteractionOption,
+                    onSubmit: handleSubmitActiveInteractionOption
+                  }
+                  : undefined}
+                initialContent={queuedDraft?.content}
+                placeholder={placeholder}
+                submitLabel={queuedDraft != null ? t('chat.queue.requeueMessage') : undefined}
+                modelMenuGroups={modelMenuGroups}
+                modelSearchOptions={modelSearchOptions}
+                recommendedModelOptions={recommendedModelOptions}
+                servicePreviewModelOptions={servicePreviewModelOptions}
+                onToggleRecommendedModel={onToggleRecommendedModel}
+                updatingRecommendedModelValue={updatingRecommendedModelValue}
+                selectedModel={selectedModel}
+                onModelChange={onModelChange}
+                effort={effort}
+                effortOptions={effortOptions}
+                onEffortChange={onEffortChange}
+                permissionMode={permissionMode}
+                permissionModeOptions={permissionModeOptions}
+                onPermissionModeChange={onPermissionModeChange}
+                selectedAdapter={selectedAdapter}
+                adapterOptions={adapterOptions}
+                onAdapterChange={onAdapterChange}
+                modelUnavailable={modelUnavailable}
+                queueMode={queueMode}
+                onQueueModeChange={setQueueMode}
+              />
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </>
   )
 }