@vibe-forge/client 0.3.0 → 0.4.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,105 @@ 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,
+  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
   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,
+    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 +143,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 +155,9 @@ export function ChatHistoryView({
           modelOptions={modelOptions}
           selectedModel={selectedModel}
           onModelChange={onModelChange}
+          permissionMode={permissionMode}
+          permissionModeOptions={permissionModeOptions}
+          onPermissionModeChange={onPermissionModeChange}
           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;
@@ -245,6 +293,38 @@
   }
 }
 
+.permission-mode-select {
+  min-width: 120px;
+
+  .ant-select-selector {
+    height: 28px !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--border-color) !important;
+    background-color: var(--tag-hover-bg, #f3f4f6) !important;
+    padding: 0 8px !important;
+    display: flex;
+    align-items: center;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder {
+    font-size: 12px;
+    color: var(--text-color);
+    line-height: 1;
+  }
+
+  &.ant-select-disabled .ant-select-selector {
+    background-color: var(--tag-bg, #f9fafb) !important;
+    color: var(--sub-text-color, #9ca3af);
+  }
+}
+
+.permission-mode-select-popup {
+  .ant-select-item-option-content {
+    font-size: 12px;
+  }
+}
+
 .model-select-popup {
   .ant-select-item-group {
     padding: 8px 8px 4px;

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

@@ -6,11 +6,12 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
-import type { AskUserQuestionParams, SessionInfo, SessionStatus } from '@vibe-forge/core'
+import type { AskUserQuestionParams, ChatMessageContent, SessionInfo, SessionStatus } from '@vibe-forge/core'
 import type { CompletionItem } from './CompletionMenu'
+import type { PermissionMode } from '#~/hooks/chat/use-chat-permission-mode'
 import { CompletionMenu } from './CompletionMenu'
 import { ThinkingStatus } from './ThinkingStatus'
-import { isShortcutMatch } from '../../utils/shortcutUtils'
+import { isShortcutMatch } from '../../../utils/shortcutUtils'
 
 const { TextArea } = Input
 
@@ -25,8 +26,17 @@ interface ModelSelectGroup {
   options: ModelSelectOption[]
 }
 
+interface PendingImage {
+  id: string
+  url: string
+  name?: string
+  size?: number
+  mimeType?: string
+}
+
 export function Sender({
   onSend,
+  onSendContent,
   sessionStatus,
   onInterrupt,
   onClear,
@@ -37,9 +47,13 @@ export function Sender({
   modelOptions,
   selectedModel,
   onModelChange,
+  permissionMode,
+  permissionModeOptions,
+  onPermissionModeChange,
   modelUnavailable
 }: {
   onSend: (text: string) => void
+  onSendContent: (content: ChatMessageContent[]) => void
   sessionStatus?: SessionStatus
   onInterrupt: () => void
   onClear?: () => void
@@ -50,6 +64,9 @@ export function Sender({
   modelOptions?: ModelSelectGroup[]
   selectedModel?: string
   onModelChange?: (model: string) => void
+  permissionMode: PermissionMode
+  permissionModeOptions: Array<{ value: PermissionMode; label: React.ReactNode }>
+  onPermissionModeChange: (mode: PermissionMode) => void
   modelUnavailable?: boolean
 }) {
   const { t } = useTranslation()
@@ -63,7 +80,9 @@ export function Sender({
   const [showToolsList, setShowToolsList] = useState(false)
   const textareaRef = useRef<TextAreaRef>(null)
   const toolsRef = useRef<HTMLDivElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
   const isMac = navigator.platform.includes('Mac')
+  const [pendingImages, setPendingImages] = useState<PendingImage[]>([])
 
   const { data: configRes } = useSWR<{
     sources?: {
@@ -96,8 +115,54 @@ export function Sender({
   const [historyIndex, setHistoryIndex] = useState(-1)
   const [draft, setDraft] = useState('')
 
+  const readFileAsDataUrl = (file: File) => {
+    return new Promise<string>((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        resolve(typeof reader.result === 'string' ? reader.result : '')
+      }
+      reader.onerror = () => {
+        reject(new Error('read_failed'))
+      }
+      reader.readAsDataURL(file)
+    })
+  }
+
+  const addImageFiles = async (files: File[]) => {
+    const maxSize = 5 * 1024 * 1024
+    for (const file of files) {
+      if (!file.type.startsWith('image/')) continue
+      if (file.size > maxSize) {
+        void message.error(t('chat.imageTooLarge'))
+        continue
+      }
+      try {
+        const url = await readFileAsDataUrl(file)
+        if (url === '') {
+          void message.error(t('chat.imageReadFailed'))
+          continue
+        }
+        setPendingImages(prev => [
+          ...prev,
+          {
+            id: globalThis.crypto?.randomUUID
+              ? globalThis.crypto.randomUUID()
+              : `img-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+            url,
+            name: file.name,
+            size: file.size,
+            mimeType: file.type
+          }
+        ])
+      } catch (err) {
+        void message.error(t('chat.imageReadFailed'))
+      }
+    }
+  }
+
   const handleSend = () => {
-    if (input.trim() === '' || isThinking) return
+    if (isThinking) return
+    if (input.trim() === '' && pendingImages.length === 0) return
 
     if (modelUnavailable) {
       void message.warning(t('chat.modelConfigRequired'))
@@ -105,12 +170,31 @@ export function Sender({
     }
 
     if (interactionRequest != null && onInteractionResponse != null) {
+      if (pendingImages.length > 0) {
+        void message.warning(t('chat.imageNotSupportedInInteraction'))
+        return
+      }
       onInteractionResponse(interactionRequest.id, input.trim())
       setInput('')
       return
     }
 
-    onSend(input)
+    if (pendingImages.length > 0) {
+      const content: ChatMessageContent[] = []
+      if (input.trim() !== '') {
+        content.push({ type: 'text', text: input.trim() })
+      }
+      content.push(...pendingImages.map(img => ({
+        type: 'image',
+        url: img.url,
+        name: img.name,
+        size: img.size,
+        mimeType: img.mimeType
+      })))
+      onSendContent(content)
+    } else {
+      onSend(input)
+    }
 
     // Save to local storage history
     try {
@@ -122,11 +206,48 @@ export function Sender({
     }
 
     setInput('')
+    setPendingImages([])
     setDraft('')
     setShowCompletion(false)
     setHistoryIndex(-1)
   }
 
+  const handleImageUpload = () => {
+    if (isThinking) return
+    if (modelUnavailable) {
+      void message.warning(t('chat.modelConfigRequired'))
+      return
+    }
+    if (interactionRequest != null) {
+      void message.warning(t('chat.imageNotSupportedInInteraction'))
+      return
+    }
+    fileInputRef.current?.click()
+  }
+
+  const handleImageFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fileList = Array.from(event.target.files ?? [])
+    if (fileList.length === 0) return
+    await addImageFiles(fileList)
+    event.target.value = ''
+  }
+
+  const handleRemovePendingImage = (id: string) => {
+    setPendingImages(prev => prev.filter(img => img.id !== id))
+  }
+
+  const handlePaste = async (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = Array.from(event.clipboardData?.items ?? [])
+    const files = items
+      .filter(item => item.kind === 'file' && item.type.startsWith('image/'))
+      .map(item => item.getAsFile())
+      .filter((file): file is File => file != null)
+    if (files.length > 0) {
+      event.preventDefault()
+      await addImageFiles(files)
+    }
+  }
+
   const clearInputValue = () => {
     if (input === '') return
     setInput('')
@@ -422,6 +543,18 @@ export function Sender({
             {t('chat.modelConfigRequired')}
           </div>
         )}
+        {pendingImages.length > 0 && (
+          <div className='pending-images'>
+            {pendingImages.map(img => (
+              <div key={img.id} className='pending-image'>
+                <img src={img.url} alt={img.name ?? 'image'} />
+                <div className='pending-image-remove' onClick={() => handleRemovePendingImage(img.id)}>
+                  <span className='material-symbols-rounded'>close</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
         {showCompletion && (
           <CompletionMenu
             items={completionItems}
@@ -437,12 +570,21 @@ export function Sender({
           value={input}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
           autoSize={{ minRows: 1, maxRows: 10 }}
           variant='borderless'
           disabled={modelUnavailable}
         />
 
         <div className='chat-input-toolbar'>
+          <input
+            ref={fileInputRef}
+            type='file'
+            accept='image/*'
+            multiple
+            onChange={handleImageFileChange}
+            className='file-input-hidden'
+          />
           <div className='toolbar-left'>
             <Tooltip title='快捷指令'>
               <span>
@@ -467,7 +609,7 @@ export function Sender({
             </Tooltip>
             <Tooltip title='上传图片'>
               <span>
-                <div className='toolbar-btn' onClick={() => void message.info('图片上传功能尚不支持')}>
+                <div className='toolbar-btn' onClick={handleImageUpload}>
                   <span className='material-symbols-rounded'>image</span>
                 </div>
               </span>
@@ -522,6 +664,20 @@ export function Sender({
               popupMatchSelectWidth={false}
             />
 
+            <Select
+              className='permission-mode-select'
+              classNames={{ popup: { root: 'permission-mode-select-popup' } }}
+              value={permissionMode}
+              options={permissionModeOptions}
+              showSearch={false}
+              allowClear={false}
+              disabled={modelUnavailable || isThinking}
+              onChange={(value) => onPermissionModeChange(value)}
+              placeholder='权限模式'
+              optionLabelProp='label'
+              popupMatchSelectWidth={false}
+            />
+
             <div
               className={`chat-send-btn ${input.trim() !== '' && !modelUnavailable ? 'active' : ''} ${isThinking ? 'thinking' : ''} ${modelUnavailable ? 'disabled' : ''}`}
               onClick={modelUnavailable ? undefined : (isThinking ? onInterrupt : handleSend)}