@vibe-forge/client 2.0.0 → 3.0.0-alpha.0

package/src/components/chat/ChatHistoryView.tsx

@@ -13,13 +13,22 @@ import type {
   SessionQueuedMessage,
   SessionQueuedMessageMode
 } from '@vibe-forge/core'
-import type { ConfigResponse, SessionInfo } from '@vibe-forge/types'
+import type { ConfigResponse, ConversationStarterConfig, SessionInfo } from '@vibe-forge/types'
 
 import { getConfig } from '#~/api'
+import { ComposerLanding, ComposerStack } from '#~/components/composer-landing/ComposerLanding'
+import type { ContextReferenceRequest } from '#~/components/workspace/context-file-types'
+import {
+  DEFAULT_CHAT_SESSION_TARGET_DRAFT,
+  getChatSessionTargetDraftFromSession,
+  isChatSessionTargetReady
+} from '#~/hooks/chat/chat-session-target'
+import type { ChatSessionTargetDraft } from '#~/hooks/chat/chat-session-target'
 import {
   DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT,
   getChatSessionWorkspaceDraftFromConfig
 } from '#~/hooks/chat/chat-session-workspace-draft'
+import type { ChatAdapterAccountOption } from '#~/hooks/chat/use-chat-adapter-account-selection'
 import type { ChatEffort } from '#~/hooks/chat/use-chat-effort'
 import type { ModelSelectMenuGroup, ModelSelectOption } from '#~/hooks/chat/use-chat-model-adapter-selection'
 import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
@@ -33,8 +42,15 @@ 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 { getLastAssistantActionAnchorId, getLastMessageAnchorId } from './messages/message-action-utils'
 import { buildMessageTurns } from './messages/message-turns'
 import { processMessages } from './messages/message-utils'
+import {
+  buildConversationStarterInitialContent,
+  buildConversationStarterTargetDraft,
+  buildConversationStarterWorkspacePatch,
+  getNewSessionGuideData
+} from './new-session-guide-config'
 import { SenderInteractionPanel } from './sender/@components/sender-interaction-panel/SenderInteractionPanel'
 import { Sender } from './sender/Sender'
 import { ChatStatusBar } from './status-bar/ChatStatusBar'
@@ -73,8 +89,13 @@ export function ChatHistoryView({
   selectedAdapter,
   adapterOptions,
   onAdapterChange,
+  selectedAccount,
+  accountOptions,
+  showAccountSelector,
+  onAccountChange,
   modelUnavailable,
-  hasAvailableModels
+  hasAvailableModels,
+  contextReferenceRequest
 }: {
   isReady: boolean
   messages: ChatMessage[]
@@ -108,8 +129,13 @@ export function ChatHistoryView({
   selectedAdapter?: string
   adapterOptions: Array<{ value: string; label: React.ReactNode }>
   onAdapterChange: (adapter: string) => void
+  selectedAccount?: string
+  accountOptions: ChatAdapterAccountOption[]
+  showAccountSelector: boolean
+  onAccountChange: (account: string) => void
   modelUnavailable: boolean
   hasAvailableModels: boolean
+  contextReferenceRequest?: ContextReferenceRequest | null
 }) {
   const { t } = useTranslation()
   const { message } = App.useApp()
@@ -121,17 +147,18 @@ export function ChatHistoryView({
     [configRes]
   )
   const workspaceDraftDirtyRef = useRef(false)
+  const [sessionTargetDraft, setSessionTargetDraft] = useState<ChatSessionTargetDraft>(() => ({
+    ...DEFAULT_CHAT_SESSION_TARGET_DRAFT
+  }))
   const [workspaceDraft, setWorkspaceDraft] = useState(() => ({
     ...DEFAULT_CHAT_SESSION_WORKSPACE_DRAFT
   }))
-  const historyRenderCount = messages.length + historyStatusNotices.length
-  const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
-    contentVersion: historyRenderCount
-  })
+  const [newSessionInitialContent, setNewSessionInitialContent] = useState<ChatMessageContent[] | undefined>(undefined)
   const {
     isCreating,
     send,
     sendContent,
+    retrySessionCreation,
     enqueueContent,
     removeQueuedContent,
     moveQueuedContent,
@@ -148,9 +175,16 @@ export function ChatHistoryView({
     effort,
     permissionMode,
     adapter: selectedAdapter,
+    account: selectedAccount,
+    sessionTargetDraft,
     workspaceDraft,
     onClearMessages
   })
+  const showThinkingIndicator = isCreating || session?.status === 'running'
+  const historyRenderCount = messages.length + historyStatusNotices.length + (showThinkingIndicator ? 1 : 0)
+  const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
+    contentVersion: historyRenderCount
+  })
   const initialScrollDoneRef = useRef(false)
   const handledHashAnchorIdRef = useRef('')
   const handledTargetScrollKeyRef = useRef('')
@@ -160,6 +194,10 @@ export function ChatHistoryView({
   const [queuedDraft, setQueuedDraft] = useState<{ content: ChatMessageContent[] } | null>(null)
   const [activeInteractionOptionIndex, setActiveInteractionOptionIndex] = useState(0)
   const interactionOptions = interactionRequest?.payload.options ?? []
+  const { announcements, startupPresets, builtinActions } = useMemo(
+    () => getNewSessionGuideData(configRes),
+    [configRes]
+  )
   const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
     const id = globalThis.crypto?.randomUUID
       ? globalThis.crypto.randomUUID()
@@ -171,8 +209,20 @@ export function ChatHistoryView({
       createdAt: Date.now()
     }
   }
+  const validateSessionTarget = () => {
+    if (session?.id != null || isChatSessionTargetReady(sessionTargetDraft)) {
+      return true
+    }
+
+    void message.warning(t('chat.sessionTarget.missingResourceWarning'))
+    return false
+  }
 
   const handleSendContent = async (content: ChatMessageContent[], mode?: SessionQueuedMessageMode) => {
+    if (!validateSessionTarget()) {
+      return false
+    }
+
     const resolvedMode = mode ?? queueMode
 
     if (session?.id && session.status === 'running') {
@@ -185,12 +235,7 @@ export function ChatHistoryView({
     }
 
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(content)
-      setMessages((prev) => [...prev, optimisticMessage])
       const didSend = await sendContent(content, mode)
-      if (!didSend) {
-        setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
-      }
       if (didSend && queuedDraft != null) {
         setQueuedDraft(null)
         setQueueMode('steer')
@@ -210,6 +255,10 @@ export function ChatHistoryView({
   }
 
   const handleSend = async (text: string, mode?: SessionQueuedMessageMode) => {
+    if (!validateSessionTarget()) {
+      return false
+    }
+
     const resolvedMode = mode ?? queueMode
 
     if (session?.id && session.status === 'running') {
@@ -222,12 +271,7 @@ export function ChatHistoryView({
     }
 
     if (!session?.id) {
-      const optimisticMessage = buildUserMessage(text)
-      setMessages((prev) => [...prev, optimisticMessage])
       const didSend = await send(text, mode)
-      if (!didSend) {
-        setMessages((prev) => prev.filter((message) => message.id !== optimisticMessage.id))
-      }
       if (didSend && queuedDraft != null) {
         setQueuedDraft(null)
         setQueueMode('steer')
@@ -253,7 +297,13 @@ export function ChatHistoryView({
     setExpandedTurnIds(new Set())
     setQueuedDraft(null)
     setQueueMode('steer')
-  }, [session?.id])
+    setNewSessionInitialContent(undefined)
+    setSessionTargetDraft(
+      session?.id != null
+        ? getChatSessionTargetDraftFromSession(session)
+        : { ...DEFAULT_CHAT_SESSION_TARGET_DRAFT }
+    )
+  }, [session?.id, session?.promptName, session?.promptType])
   useEffect(() => {
     if (session?.id != null) {
       return
@@ -339,6 +389,56 @@ export function ChatHistoryView({
   }
   const isInlineEditing = editingMessageId != null
   const shouldShowNewSessionGuide = !session?.id && messages.length === 0 && historyStatusNotices.length === 0
+  const handleApplyConversationStarter = useCallback((starter: ConversationStarterConfig) => {
+    if (session?.id != null) {
+      return
+    }
+
+    if (starter.mode != null) {
+      setSessionTargetDraft(buildConversationStarterTargetDraft(starter))
+    }
+
+    const workspacePatch = buildConversationStarterWorkspacePatch(starter)
+    if (workspacePatch != null) {
+      workspaceDraftDirtyRef.current = true
+      setWorkspaceDraft(current => ({
+        ...current,
+        ...workspacePatch
+      }))
+    }
+
+    const model = starter.model?.trim()
+    if (model != null && model !== '') {
+      onModelChange(model)
+    }
+
+    const adapter = starter.adapter?.trim()
+    if (adapter != null && adapter !== '') {
+      onAdapterChange(adapter)
+    }
+
+    const account = starter.account?.trim()
+    if (account != null && account !== '') {
+      onAccountChange(account)
+    }
+
+    if (starter.effort != null) {
+      onEffortChange(starter.effort)
+    }
+
+    if (starter.permissionMode != null) {
+      onPermissionModeChange(starter.permissionMode)
+    }
+
+    setNewSessionInitialContent(buildConversationStarterInitialContent(starter))
+  }, [
+    onAccountChange,
+    onAdapterChange,
+    onEffortChange,
+    onModelChange,
+    onPermissionModeChange,
+    session?.id
+  ])
   const renderItems = useMemo(() => processMessages(messages), [messages])
   const hashAnchorId = useMemo(() => decodeURIComponent(location.hash.replace(/^#/, '')), [location.hash])
   const targetAnchorId = useMemo(() => {
@@ -365,16 +465,9 @@ export function ChatHistoryView({
       hashAnchorId: hashAnchorId !== '' ? hashAnchorId : targetAnchorId,
       keepLastTurnExpanded: isCreating || session?.status === 'running' || session?.status === 'waiting_input'
     }), [expandedTurnIds, hashAnchorId, isCreating, renderItems, session?.status, targetAnchorId])
-  const lastAssistantActionAnchorId = useMemo(() => {
-    for (let index = renderItems.length - 1; index >= 0; index -= 1) {
-      const item = renderItems[index]
-      if (item == null) continue
-      if (item.type === 'tool-group') continue
-      if (item.message.role === 'user') continue
-      return item.anchorId
-    }
-    return null
-  }, [renderItems])
+  const isSessionBusy = isCreating || session?.status === 'running' || session?.status === 'waiting_input'
+  const lastAssistantActionAnchorId = useMemo(() => getLastAssistantActionAnchorId(renderItems), [renderItems])
+  const lastMessageAnchorId = useMemo(() => getLastMessageAnchorId(renderItems), [renderItems])
   const handleEditQueuedMessage = async (item: SessionQueuedMessage) => {
     const removed = await removeQueuedContent(item.id)
     if (!removed) {
@@ -576,8 +669,8 @@ export function ChatHistoryView({
           isEditing={editingMessageId === item.originalMessage.id}
           isCompactLayout={isCompactLayout}
           isTouchInteraction={isTouchInteraction}
-          isSessionBusy={isCreating || session?.status === 'running' ||
-            session?.status === 'waiting_input'}
+          isSessionBusy={isSessionBusy}
+          hideActionButtons={isSessionBusy && item.anchorId === lastMessageAnchorId}
           showAssistantActions={item.anchorId === lastAssistantActionAnchorId}
           onEditMessage={editMessage}
           onForkMessage={forkMessage}
@@ -604,6 +697,111 @@ export function ChatHistoryView({
     )
   }
 
+  const composerContent = (
+    <>
+      {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}
+            sessionId={session?.id}
+            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 ?? newSessionInitialContent}
+            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}
+            selectedAccount={selectedAccount}
+            accountOptions={accountOptions}
+            showAccountSelector={showAccountSelector}
+            onAccountChange={onAccountChange}
+            modelUnavailable={modelUnavailable}
+            sessionTarget={{
+              draft: session?.id != null ? getChatSessionTargetDraftFromSession(session) : sessionTargetDraft,
+              locked: session?.id != null,
+              disabled: isCreating,
+              onChange: setSessionTargetDraft
+            }}
+            queueMode={queueMode}
+            onQueueModeChange={setQueueMode}
+            contextReferenceRequest={contextReferenceRequest}
+          />
+          <ChatStatusBar
+            draftWorkspace={workspaceDraft}
+            isCreating={isCreating}
+            sessionId={session?.id}
+            adapterLocked={session?.id != null}
+            isThinking={isCreating || session?.status === 'running'}
+            modelUnavailable={modelUnavailable}
+            selectedAdapter={selectedAdapter}
+            adapterOptions={adapterOptions}
+            onAdapterChange={onAdapterChange}
+            selectedAccount={selectedAccount}
+            accountOptions={accountOptions}
+            showAccountSelector={showAccountSelector}
+            onAccountChange={onAccountChange}
+            onDraftWorkspaceChange={(nextDraft) => {
+              workspaceDraftDirtyRef.current = true
+              setWorkspaceDraft(nextDraft)
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+
   return (
     <>
       <div className={`chat-messages ${isReady ? 'ready' : ''}`} ref={messagesContainerRef}>
@@ -644,8 +842,16 @@ export function ChatHistoryView({
               key={notice.id}
               notice={notice}
               onRetryConnection={onRetryConnection}
+              onRetrySessionCreation={() => {
+                void retrySessionCreation()
+              }}
             />
           ))}
+          {showThinkingIndicator && (
+            <div className='chat-thinking-indicator' role='status' aria-live='polite'>
+              <span className='chat-thinking-indicator__text'>{t('chat.thinking')}</span>
+            </div>
+          )}
           <div ref={messagesEndRef} />
         </div>
 
@@ -656,101 +862,26 @@ export function ChatHistoryView({
         )}
       </div>
 
-      {shouldShowNewSessionGuide && !isCompactLayout && (
-        <div className='new-session-guide-wrapper'>
-          <NewSessionGuide />
-        </div>
-      )}
-
-      {shouldShowNewSessionGuide && isCompactLayout && (
-        <div className='new-session-guide-wrapper is-compact-layout'>
-          <NewSessionGuide />
-        </div>
-      )}
-
-      <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)}
+      {shouldShowNewSessionGuide
+        ? (
+          <ComposerLanding
+            compact={isCompactLayout}
+            composer={composerContent}
+            contentClassName='chat-history-view__new-session-content'
+          >
+            <NewSessionGuide
+              announcements={announcements}
+              startupPresets={startupPresets}
+              builtinActions={builtinActions}
+              onApplyStarter={handleApplyConversationStarter}
             />
-          )}
-          {!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}
-                sessionId={session?.id}
-                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}
-              />
-              <ChatStatusBar
-                draftWorkspace={workspaceDraft}
-                isCreating={isCreating}
-                sessionId={session?.id}
-                onDraftWorkspaceChange={(nextDraft) => {
-                  workspaceDraftDirtyRef.current = true
-                  setWorkspaceDraft(nextDraft)
-                }}
-              />
-            </div>
-          )}
-        </div>
-      </div>
+          </ComposerLanding>
+        )
+        : (
+          <ComposerStack>
+            {composerContent}
+          </ComposerStack>
+        )}
     </>
   )
 }