@vibe-forge/client 0.8.4 → 0.10.0

package/src/components/chat/ChatHistoryView.tsx

@@ -1,7 +1,11 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import { App } from 'antd'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLocation } from 'react-router-dom'
 
+import type { ChatErrorBannerState } from '#~/hooks/chat/interaction-state'
 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'
 import { useChatScroll } from '#~/hooks/chat/use-chat-scroll'
 import { useChatSessionActions } from '#~/hooks/chat/use-chat-session-actions'
@@ -10,35 +14,29 @@ import type { SessionInfo } from '@vibe-forge/types'
 import { CurrentTodoList } from './CurrentTodoList'
 import { NewSessionGuide } from './NewSessionGuide'
 import { MessageItem } from './messages/MessageItem'
+import { buildMessageTurns } from './messages/message-turns'
 import { processMessages } from './messages/message-utils'
 import { Sender } from './sender/Sender'
 import { ToolGroup } from './tools/core/ToolGroup'
 
-interface ModelSelectOption {
-  value: string
-  label: React.ReactNode
-  searchText: string
-  displayLabel: string
-}
-
-interface ModelSelectGroup {
-  label: React.ReactNode
-  options: ModelSelectOption[]
-}
-
 export function ChatHistoryView({
   isReady,
   messages,
   session,
   sessionInfo,
-  connectionError,
+  errorBanner,
   onRetryConnection,
   interactionRequest,
   onInteractionResponse,
   setMessages,
   onClearMessages,
   placeholder,
-  modelOptions,
+  modelMenuGroups,
+  modelSearchOptions,
+  recommendedModelOptions,
+  servicePreviewModelOptions,
+  onToggleRecommendedModel,
+  updatingRecommendedModelValue,
   selectedModel,
   modelForQuery,
   onModelChange,
@@ -58,14 +56,19 @@ export function ChatHistoryView({
   messages: ChatMessage[]
   session?: Session
   sessionInfo: SessionInfo | null
-  connectionError?: string | null
+  errorBanner?: ChatErrorBannerState | null
   onRetryConnection: () => void
   interactionRequest: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse: (id: string, data: string | string[]) => void
   setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>
   onClearMessages: () => void
   placeholder?: string
-  modelOptions: ModelSelectGroup[]
+  modelMenuGroups: ModelSelectMenuGroup[]
+  modelSearchOptions: ModelSelectOption[]
+  recommendedModelOptions: ModelSelectOption[]
+  servicePreviewModelOptions: ModelSelectOption[]
+  onToggleRecommendedModel: (option: ModelSelectOption) => void | Promise<void>
+  updatingRecommendedModelValue?: string
   selectedModel?: string
   modelForQuery?: string
   onModelChange: (model: string) => void
@@ -82,10 +85,21 @@ export function ChatHistoryView({
   hasAvailableModels: boolean
 }) {
   const { t } = useTranslation()
+  const { message } = App.useApp()
+  const location = useLocation()
   const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
     messagesLength: messages.length
   })
-  const { isCreating, send, sendContent, interrupt, clearMessages } = useChatSessionActions({
+  const {
+    isCreating,
+    send,
+    sendContent,
+    editMessage,
+    forkMessage,
+    interrupt,
+    clearMessages,
+    recallMessage
+  } = useChatSessionActions({
     session,
     modelForQuery,
     hasAvailableModels,
@@ -95,6 +109,8 @@ export function ChatHistoryView({
     onClearMessages
   })
   const initialScrollDoneRef = useRef(false)
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null)
+  const [expandedTurnIds, setExpandedTurnIds] = useState<Set<string>>(new Set())
   const buildUserMessage = (content: string | ChatMessageContent[]): ChatMessage => {
     const id = globalThis.crypto?.randomUUID
       ? globalThis.crypto.randomUUID()
@@ -141,19 +157,206 @@ export function ChatHistoryView({
   }
   useEffect(() => {
     initialScrollDoneRef.current = false
+    setEditingMessageId(null)
+    setExpandedTurnIds(new Set())
   }, [session?.id])
   useEffect(() => {
-    if (!initialScrollDoneRef.current && isReady) {
+    if (!initialScrollDoneRef.current && isReady && location.hash === '') {
       scrollToBottom('auto')
       initialScrollDoneRef.current = true
     }
-  }, [isReady, messages.length, scrollToBottom])
+  }, [isReady, location.hash, messages.length, scrollToBottom])
   useEffect(() => {
-    if (!showScrollBottom) {
+    if (location.hash === '' && !showScrollBottom) {
       scrollToBottom('auto')
     }
-  }, [messages.length, scrollToBottom, showScrollBottom])
+  }, [location.hash, messages.length, scrollToBottom, showScrollBottom])
+  const handleStartEditing = (messageId: string) => {
+    let isBlocked = false
+
+    setEditingMessageId((current) => {
+      if (current != null && current !== messageId) {
+        isBlocked = true
+        return current
+      }
+
+      return messageId
+    })
+
+    if (isBlocked) {
+      void message.warning(t('chat.messageActions.editInProgress'))
+    }
+  }
+  const isInlineEditing = editingMessageId != null
   const renderItems = useMemo(() => processMessages(messages), [messages])
+  const hashAnchorId = useMemo(() => decodeURIComponent(location.hash.replace(/^#/, '')), [location.hash])
+  const messageTurns = useMemo(() =>
+    buildMessageTurns({
+      renderItems,
+      expandedTurnIds,
+      hashAnchorId,
+      keepLastTurnExpanded: isCreating || session?.status === 'running' || session?.status === 'waiting_input'
+    }), [expandedTurnIds, hashAnchorId, isCreating, renderItems, session?.status])
+  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])
+
+  useEffect(() => {
+    const hash = hashAnchorId
+    if (!isReady || hash === '') return
+
+    let removeHighlightTimer: ReturnType<typeof setTimeout> | null = null
+    let retryTimer: ReturnType<typeof setTimeout> | null = null
+    let frameId: number | null = null
+
+    const scrollToAnchor = () => {
+      const target = document.getElementById(hash)
+      if (target == null) {
+        return false
+      }
+
+      target.scrollIntoView({ block: 'center', behavior: 'auto' })
+      target.classList.add('is-anchor-target')
+      removeHighlightTimer = setTimeout(() => {
+        target.classList.remove('is-anchor-target')
+      }, 1800)
+      return true
+    }
+
+    if (!scrollToAnchor()) {
+      frameId = requestAnimationFrame(() => {
+        if (!scrollToAnchor()) {
+          retryTimer = setTimeout(() => {
+            void scrollToAnchor()
+          }, 120)
+        }
+      })
+    }
+
+    return () => {
+      if (frameId != null) {
+        cancelAnimationFrame(frameId)
+      }
+      if (retryTimer != null) {
+        clearTimeout(retryTimer)
+      }
+      if (removeHighlightTimer != null) {
+        clearTimeout(removeHighlightTimer)
+      }
+    }
+  }, [hashAnchorId, isReady, messageTurns])
+
+  const toggleTurnCollapsed = (turnId: string) => {
+    setExpandedTurnIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(turnId)) {
+        next.delete(turnId)
+      } else {
+        next.add(turnId)
+      }
+      return next
+    })
+  }
+
+  const formatTurnDuration = (durationMs: number | null) => {
+    if (durationMs == null) return null
+    const totalSeconds = Math.floor(durationMs / 1000)
+    if (totalSeconds <= 0) {
+      return t('chat.turnDurationUnderSecond')
+    }
+
+    const hours = Math.floor(totalSeconds / 3600)
+    const minutes = Math.floor((totalSeconds % 3600) / 60)
+    const seconds = totalSeconds % 60
+
+    if (hours > 0) {
+      return [
+        t('chat.turnDurationHours', { count: hours }),
+        minutes > 0 ? t('chat.turnDurationMinutes', { count: minutes }) : null
+      ].filter(Boolean).join(' ')
+    }
+
+    if (minutes > 0) {
+      return [
+        t('chat.turnDurationMinutes', { count: minutes }),
+        seconds > 0 ? t('chat.turnDurationSeconds', { count: seconds }) : null
+      ].filter(Boolean).join(' ')
+    }
+
+    return t('chat.turnDurationSeconds', { count: seconds })
+  }
+
+  const renderTurnSummary = (turn: (typeof messageTurns)[number]) => (
+    <div className={`chat-turn-summary ${turn.isCollapsed ? 'is-collapsed' : 'is-expanded'}`}>
+      <div className='chat-turn-summary__content'>
+        <div className='chat-turn-summary__meta'>
+          {formatTurnDuration(turn.durationMs) != null && (
+            <span className='chat-turn-summary__time'>
+              {t('chat.turnProcessedDuration', { duration: formatTurnDuration(turn.durationMs) })}
+            </span>
+          )}
+          <span className='chat-turn-summary__count'>
+            {t('chat.turnSummaryCount', { count: turn.hiddenCount })}
+          </span>
+        </div>
+        <button
+          type='button'
+          className='chat-turn-summary__toggle'
+          aria-expanded={!turn.isCollapsed}
+          onClick={() => toggleTurnCollapsed(turn.id)}
+        >
+          <span className='material-symbols-rounded'>
+            chevron_right
+          </span>
+        </button>
+      </div>
+    </div>
+  )
+
+  const renderTurnItem = (item: (typeof renderItems)[number], key?: string) => {
+    if (item.type === 'message') {
+      return (
+        <MessageItem
+          key={key ?? item.anchorId}
+          anchorId={item.anchorId}
+          msg={item.message}
+          isFirstInGroup={item.isFirstInGroup}
+          originalMessage={item.originalMessage}
+          sessionInfo={sessionInfo}
+          isEditing={editingMessageId === item.originalMessage.id}
+          isSessionBusy={isCreating || session?.status === 'running' ||
+            session?.status === 'waiting_input'}
+          showAssistantActions={item.anchorId === lastAssistantActionAnchorId}
+          onEditMessage={editMessage}
+          onForkMessage={forkMessage}
+          onRecallMessage={recallMessage}
+          onStartEditing={handleStartEditing}
+          onCancelEditing={(messageId) => {
+            setEditingMessageId((current) => current === messageId ? null : current)
+          }}
+          sessionId={session?.id}
+        />
+      )
+    }
+
+    return (
+      <ToolGroup
+        key={key ?? item.id}
+        anchorId={item.anchorId}
+        items={item.items}
+        originalMessage={item.originalMessage}
+        sessionId={session?.id}
+        footer={item.footer}
+      />
+    )
+  }
 
   return (
     <>
@@ -165,26 +368,31 @@ export function ChatHistoryView({
               <span>{t('common.creatingChat')}</span>
             </div>
           )}
-          {renderItems.map((item, index) => {
-            if (item.type === 'message') {
-              return (
-                <MessageItem
-                  key={item.message.id || index}
-                  msg={item.message}
-                  isFirstInGroup={item.isFirstInGroup}
-                />
+          {messageTurns.map((turn) => (
+            turn.isExpandable
+              ? (
+                <div key={turn.id} className={`chat-turn ${turn.isCollapsed ? 'is-collapsed' : 'is-expanded'}`}>
+                  {renderTurnItem(turn.items[0]!, `${turn.id}:leading`)}
+                  <div className={`chat-turn__summary-region ${turn.isCollapsed ? 'is-collapsed' : 'is-expanded'}`}>
+                    {renderTurnSummary(turn)}
+                    <div
+                      className={`chat-turn__collapsible ${turn.isCollapsed ? 'is-collapsed' : 'is-expanded'}`}
+                      aria-hidden={turn.isCollapsed}
+                    >
+                      <div className='chat-turn__collapsible-inner'>
+                        {turn.items.slice(1, -1).map((item) => renderTurnItem(item))}
+                      </div>
+                    </div>
+                  </div>
+                  {renderTurnItem(turn.items[turn.items.length - 1]!, `${turn.id}:trailing`)}
+                </div>
               )
-            } else if (item.type === 'tool-group') {
-              return (
-                <ToolGroup
-                  key={item.id || `group-${index}`}
-                  items={item.items}
-                  footer={item.footer}
-                />
+              : (
+                <React.Fragment key={turn.id}>
+                  {turn.items.map((item) => renderTurnItem(item))}
+                </React.Fragment>
               )
-            }
-            return null
-          })}
+          ))}
           <div ref={messagesEndRef} />
         </div>
 
@@ -202,35 +410,42 @@ export function ChatHistoryView({
       )}
 
       <CurrentTodoList messages={messages} />
-      <div className='sender-container'>
-        <Sender
-          onSend={handleSend}
-          onSendContent={handleSendContent}
-          adapterLocked={session?.id != null}
-          sessionStatus={isCreating ? 'running' : session?.status}
-          onInterrupt={interrupt}
-          onClear={clearMessages}
-          sessionInfo={sessionInfo}
-          connectionError={connectionError}
-          onRetryConnection={onRetryConnection}
-          interactionRequest={interactionRequest}
-          onInteractionResponse={onInteractionResponse}
-          placeholder={placeholder}
-          modelOptions={modelOptions}
-          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>
+      {!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}
+            errorBanner={errorBanner}
+            onRetryConnection={onRetryConnection}
+            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>
+      )}
     </>
   )
 }

package/src/components/chat/ChatSettingsView.tsx

@@ -1,20 +1,22 @@
 import type { Session } from '@vibe-forge/core'
+import type { SessionInfo } from '@vibe-forge/types'
 
 import { SessionSettingsPanel } from './ChatHeader'
 
 export function ChatSettingsView({
   session,
+  sessionInfo,
   onClose
 }: {
   session: Session
+  sessionInfo: SessionInfo | null
   onClose: () => void
 }) {
   return (
     <div className='chat-settings-panel'>
       <SessionSettingsPanel
-        sessionId={session.id}
-        initialTitle={session.title}
-        initialTags={session.tags}
+        session={session}
+        sessionInfo={sessionInfo}
         onClose={onClose}
       />
     </div>

package/src/components/chat/ChatTimelineView.scss

@@ -1,8 +1,9 @@
 .chat-timeline-view {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding: 24px;
+  flex: 1;
+  min-height: 0;
+  padding: 6px 12px 12px;
   overflow: auto;
 }
 

package/src/components/chat/{sender/ThinkingStatus.tsx → ThinkingStatus.tsx}

@@ -1,5 +1,5 @@
 import './ThinkingStatus.scss'
-import React from 'react'
+
 import { useTranslation } from 'react-i18next'
 
 export function ThinkingStatus() {

package/src/components/chat/messages/MessageContextMenu.scss

@@ -0,0 +1,145 @@
+.message-context-menu {
+  min-width: 196px;
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  background-color: var(--bg-color);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.message-context-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-color);
+  text-align: left;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--primary-color) 8%,
+      var(--bg-color)
+    );
+  }
+
+  &.is-confirming {
+    background-color: color-mix(
+      in srgb,
+      var(--primary-color) 12%,
+      var(--bg-color)
+    );
+  }
+
+  &.is-danger {
+    color: #dc2626;
+
+    &:hover {
+      background-color: rgba(220, 38, 38, .12);
+      color: #b91c1c;
+    }
+
+    &.is-confirming {
+      background-color: rgba(220, 38, 38, .12);
+    }
+  }
+}
+
+.message-context-menu__meta {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.message-context-menu__icon {
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.message-context-menu__item--copy .message-context-menu__icon,
+.message-context-menu__item--copy-id .message-context-menu__icon,
+.message-context-menu__item--copy-timestamp .message-context-menu__icon {
+  color: #64748b;
+}
+
+.message-context-menu__item--copy-link .message-context-menu__icon {
+  color: #2563eb;
+}
+
+.message-context-menu__item--edit .message-context-menu__icon {
+  color: var(--sub-text-color);
+}
+
+.message-context-menu__item--recall .message-context-menu__icon {
+  color: #dc2626;
+}
+
+.message-context-menu__item--fork .message-context-menu__icon {
+  color: #0891b2;
+}
+
+.message-context-menu__item--copy-json .message-context-menu__icon {
+  color: #7c3aed;
+}
+
+.message-context-menu__label {
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.message-context-menu__confirm-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.message-context-menu__confirm-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color .18s ease, color .18s ease;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  &.is-accept:hover {
+    background-color: rgba(34, 197, 94, .14);
+    color: #15803d;
+  }
+
+  &.is-cancel:hover {
+    background-color: rgba(148, 163, 184, .18);
+    color: var(--text-color);
+  }
+}
+
+.message-context-menu__divider {
+  height: 1px;
+  margin: 4px 6px;
+  background-color: var(--border-color);
+}