@vibe-forge/client 0.3.0 → 0.5.0

package/src/components/chat/ChatHistoryView.tsx

@@ -1,12 +1,15 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 
-import type { AskUserQuestionParams, ChatMessage, Session, SessionInfo } from '@vibe-forge/core'
+import type { AskUserQuestionParams, ChatMessage, ChatMessageContent, Session, SessionInfo } from '@vibe-forge/core'
 import { CurrentTodoList } from './CurrentTodoList'
-import { MessageItem } from './MessageItem'
+import { MessageItem } from './Messages/MessageItem'
 import { NewSessionGuide } from './NewSessionGuide'
-import { Sender } from './Sender'
-import { ToolGroup } from './ToolGroup'
-import { processMessages } from './messageUtils'
+import { Sender } from './Sender/Sender'
+import { ToolGroup } from './tools/core/ToolGroup'
+import { processMessages } from './Messages/message-utils'
+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'
 
 interface ModelSelectOption {
   value: string
@@ -24,68 +27,112 @@ export function ChatHistoryView({
   messages,
   session,
   sessionInfo,
-  isCreating,
-  showScrollBottom,
-  messagesContainerRef,
-  messagesEndRef,
-  scrollToBottom,
   interactionRequest,
   onInteractionResponse,
+  onClearMessages,
   onSend,
-  onInterrupt,
-  onClear,
+  onSendContent,
   placeholder,
   modelOptions,
   selectedModel,
+  modelForQuery,
   onModelChange,
-  modelUnavailable
+  permissionMode,
+  permissionModeOptions,
+  onPermissionModeChange,
+  selectedAdapter,
+  adapterOptions,
+  onAdapterChange,
+  modelUnavailable,
+  hasAvailableModels
 }: {
   isReady: boolean
   messages: ChatMessage[]
   session?: Session
   sessionInfo: SessionInfo | null
-  isCreating: boolean
-  showScrollBottom: boolean
-  messagesContainerRef: React.RefObject<HTMLDivElement>
-  messagesEndRef: React.RefObject<HTMLDivElement>
-  scrollToBottom: (behavior?: ScrollBehavior) => void
   interactionRequest: { id: string; payload: AskUserQuestionParams } | null
   onInteractionResponse: (id: string, data: string | string[]) => void
+  onClearMessages: () => void
   onSend: (text: string) => void
-  onInterrupt: () => void
-  onClear: () => void
+  onSendContent: (content: ChatMessageContent[]) => void
   placeholder?: string
   modelOptions: ModelSelectGroup[]
   selectedModel?: string
+  modelForQuery?: string
   onModelChange: (model: string) => void
+  permissionMode: PermissionMode
+  permissionModeOptions: Array<{ value: PermissionMode; label: React.ReactNode }>
+  onPermissionModeChange: (mode: PermissionMode) => void
+  selectedAdapter?: string
+  adapterOptions: Array<{ value: string; label: React.ReactNode }>
+  onAdapterChange: (adapter: string) => void
   modelUnavailable: boolean
+  hasAvailableModels: boolean
 }) {
+  const { messagesEndRef, messagesContainerRef, messagesContentRef, showScrollBottom, scrollToBottom } = useChatScroll({
+    messagesLength: messages.length
+  })
+  const { isCreating, send, sendContent, interrupt, clearMessages } = useChatSessionActions({
+    session,
+    modelForQuery,
+    hasAvailableModels,
+    permissionMode,
+    adapter: selectedAdapter,
+    onClearMessages
+  })
+  const initialScrollDoneRef = useRef(false)
+  const handleSend = async (text: string) => {
+    await send(text)
+    if (session?.id) {
+      onSend(text)
+    }
+  }
+  const handleSendContent = async (content: ChatMessageContent[]) => {
+    await sendContent(content)
+    onSendContent(content)
+  }
+  useEffect(() => {
+    initialScrollDoneRef.current = false
+  }, [session?.id])
+  useEffect(() => {
+    if (!initialScrollDoneRef.current && isReady) {
+      scrollToBottom('auto')
+      initialScrollDoneRef.current = true
+    }
+  }, [isReady, messages.length, scrollToBottom])
+  useEffect(() => {
+    if (!showScrollBottom) {
+      scrollToBottom('auto')
+    }
+  }, [messages.length, scrollToBottom, showScrollBottom])
   const renderItems = useMemo(() => processMessages(messages), [messages])
 
   return (
     <>
       <div className={`chat-messages ${isReady ? 'ready' : ''}`} ref={messagesContainerRef}>
-        {renderItems.map((item, index) => {
-          if (item.type === 'message') {
-            return (
-              <MessageItem
-                key={item.message.id || index}
-                msg={item.message}
-                isFirstInGroup={item.isFirstInGroup}
-              />
-            )
-          } else if (item.type === 'tool-group') {
-            return (
-              <ToolGroup
-                key={item.id || `group-${index}`}
-                items={item.items}
-                footer={item.footer}
-              />
-            )
-          }
-          return null
-        })}
-        <div ref={messagesEndRef} />
+        <div className='chat-messages-content' ref={messagesContentRef}>
+          {renderItems.map((item, index) => {
+            if (item.type === 'message') {
+              return (
+                <MessageItem
+                  key={item.message.id || index}
+                  msg={item.message}
+                  isFirstInGroup={item.isFirstInGroup}
+                />
+              )
+            } else if (item.type === 'tool-group') {
+              return (
+                <ToolGroup
+                  key={item.id || `group-${index}`}
+                  items={item.items}
+                  footer={item.footer}
+                />
+              )
+            }
+            return null
+          })}
+          <div ref={messagesEndRef} />
+        </div>
 
         {showScrollBottom && (
           <div className='scroll-bottom-btn' onClick={() => scrollToBottom()}>
@@ -103,10 +150,11 @@ export function ChatHistoryView({
       <CurrentTodoList messages={messages} />
       <div className='sender-container'>
         <Sender
-          onSend={onSend}
+          onSend={handleSend}
+          onSendContent={handleSendContent}
           sessionStatus={isCreating ? 'running' : session?.status}
-          onInterrupt={onInterrupt}
-          onClear={onClear}
+          onInterrupt={interrupt}
+          onClear={clearMessages}
           sessionInfo={sessionInfo}
           interactionRequest={interactionRequest}
           onInteractionResponse={onInteractionResponse}
@@ -114,6 +162,12 @@ export function ChatHistoryView({
           modelOptions={modelOptions}
           selectedModel={selectedModel}
           onModelChange={onModelChange}
+          permissionMode={permissionMode}
+          permissionModeOptions={permissionModeOptions}
+          onPermissionModeChange={onPermissionModeChange}
+          selectedAdapter={selectedAdapter}
+          adapterOptions={adapterOptions}
+          onAdapterChange={onAdapterChange}
           modelUnavailable={modelUnavailable}
         />
       </div>

package/src/components/chat/CurrentTodoList.tsx

@@ -1,14 +1,10 @@
 import './CurrentTodoList.scss'
-import type { ChatMessage } from '@vibe-forge/core'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import type { ChatMessage } from '@vibe-forge/core'
+import type { ToolInputs } from '@vibe-forge/core'
 
-interface TodoItem {
-  id: string
-  content: string
-  status: 'pending' | 'in_progress' | 'completed'
-  priority: string
-}
+type TodoItem = ToolInputs['adapter:claude-code:TodoWrite']['todos'][number]
 
 export function CurrentTodoList({ messages }: { messages: ChatMessage[] }) {
   const { t } = useTranslation()
@@ -21,12 +17,17 @@ export function CurrentTodoList({ messages }: { messages: ChatMessage[] }) {
     const msg = messages[i]
     if (msg.role === 'assistant' && Array.isArray(msg.content)) {
       const todoUse = msg.content.find(c =>
-        c != null && c.type === 'tool_use' && (c.name === 'TodoWrite' || c.name === 'todo_write')
+        c != null && c.type === 'tool_use' && (
+          c.name === 'TodoWrite' ||
+          c.name === 'todo_write' ||
+          c.name === 'adapter:claude-code:TodoWrite' ||
+          c.name === 'adapter:claude-code:todo_write'
+        )
       )
       if (
         todoUse != null && todoUse.type === 'tool_use' && todoUse.input != null && typeof todoUse.input === 'object'
       ) {
-        const input = todoUse.input as { todos?: TodoItem[] }
+        const input = todoUse.input as Partial<ToolInputs['adapter:claude-code:TodoWrite']>
         if (Array.isArray(input.todos)) {
           latestTodos = input.todos
           break

package/src/components/chat/{MessageItem.scss → Messages/MessageItem.scss}

@@ -122,6 +122,20 @@ html.dark {
   width: 100%;
 }
 
+.message-image {
+  display: inline-block;
+  max-width: 360px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+}
+
+.message-image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
 .markdown-body {
   --border-color: #e5e7eb;
   --code-block-bg: #ffffff;

package/src/components/chat/{MessageItem.tsx → Messages/MessageItem.tsx}

@@ -2,16 +2,18 @@ import './MessageItem.scss'
 import type { ChatMessage } from '@vibe-forge/core'
 import React from 'react'
 import { MessageFooter } from './MessageFooter'
-import { MarkdownContent } from './MarkdownContent'
-import { ToolRenderer } from './ToolRenderer'
+import { MarkdownContent } from '#~/components/MarkdownContent'
+import { ToolRenderer } from '../tools/core/ToolRenderer'
 
-export function MessageItem({
-  msg,
-  isFirstInGroup
-}: {
+type MessageItemProps = {
   msg: ChatMessage
   isFirstInGroup: boolean
-}) {
+}
+
+function MessageItemComponent({
+  msg,
+  isFirstInGroup
+}: MessageItemProps) {
   const isUser = msg.role === 'user'
 
   const renderContent = () => {
@@ -25,7 +27,7 @@ export function MessageItem({
 
     if (!Array.isArray(msg.content)) return null
 
-    const hasContent = msg.content.some(c => c.type === 'text') || msg.toolCall != null
+    const hasContent = msg.content.some(c => c.type === 'text' || c.type === 'image') || msg.toolCall != null
     if (!hasContent) return null
 
     return (
@@ -36,6 +38,13 @@ export function MessageItem({
               <MarkdownContent key={i} content={item.text} />
             )
           }
+          if (item.type === 'image') {
+            return (
+              <a key={i} className='message-image' href={item.url} target='_blank' rel='noreferrer'>
+                <img src={item.url} alt={item.name ?? 'image'} />
+              </a>
+            )
+          }
           return null
         })}
         {msg.toolCall != null && (
@@ -76,3 +85,16 @@ export function MessageItem({
     </div>
   )
 }
+
+const areMessageItemPropsEqual = (prev: MessageItemProps, next: MessageItemProps) => {
+  return prev.isFirstInGroup === next.isFirstInGroup
+    && prev.msg.id === next.msg.id
+    && prev.msg.role === next.msg.role
+    && prev.msg.createdAt === next.msg.createdAt
+    && prev.msg.model === next.msg.model
+    && prev.msg.content === next.msg.content
+    && prev.msg.toolCall === next.msg.toolCall
+    && prev.msg.usage === next.msg.usage
+}
+
+export const MessageItem = React.memo(MessageItemComponent, areMessageItemPropsEqual)

package/src/components/chat/{messageUtils.ts → Messages/message-utils.ts}

@@ -114,7 +114,7 @@ export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
       }
 
       for (const item of content) {
-        if (item.type === 'text') {
+        if (item.type === 'text' || item.type === 'image') {
           flushTools()
           textParts.push(item)
         } else if (item.type === 'tool_use') {

package/src/components/chat/{Sender.scss → Sender/Sender.scss}

@@ -39,6 +39,54 @@
   }
 }
 
+.file-input-hidden {
+  display: none;
+}
+
+.pending-images {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0;
+  flex-wrap: wrap;
+}
+
+.pending-image {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  background-color: var(--bg-color);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.pending-image-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background-color: rgba(0, 0, 0, .55);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .material-symbols-rounded {
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
 .chat-input-toolbar {
   display: flex;
   justify-content: space-between;
@@ -219,9 +267,9 @@
   }
 }
 
-.model-select {
-  min-width: 160px;
-
+.adapter-select,
+.model-select,
+.permission-mode-select {
   .ant-select-selector {
     height: 28px !important;
     border-radius: 8px !important;
@@ -245,6 +293,101 @@
   }
 }
 
+.adapter-select {
+  min-width: 100px;
+
+  .ant-select-selector {
+    padding-right: 24px !important;
+  }
+
+  .ant-select-selection-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
+}
+
+.model-select {
+  min-width: 160px;
+
+}
+
+.permission-mode-select {
+  min-width: 120px;
+}
+
+.permission-mode-select-popup {
+  .ant-select-item-option-content {
+    font-size: 12px;
+  }
+}
+
+.adapter-select-popup {
+  .ant-select-item-option {
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-item-option-content {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-height: 20px;
+    font-size: 12px;
+  }
+
+  .adapter-option {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+  }
+
+  .adapter-option__icon {
+    width: 14px;
+    height: 14px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  .adapter-option__text {
+    display: flex;
+    align-items: center;
+    min-height: 14px;
+    line-height: 1;
+  }
+
+}
+
+.adapter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.adapter-option__icon {
+  width: 14px;
+  height: 14px;
+  display: block;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.adapter-option__text {
+  display: inline-block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .model-select-popup {
   .ant-select-item-group {
     padding: 8px 8px 4px;