@vibe-forge/client 0.2.0-alpha.9 → 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/NewSessionGuide.scss

@@ -15,19 +15,47 @@
 }
 
 .new-session-guide__announcements-header {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
+  gap: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--text-color);
 }
 
+.new-session-guide__announcements-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 .new-session-guide__announcements-icon {
   font-size: 18px;
   color: var(--sub-text-color);
 }
 
+.new-session-guide__announcements-close {
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--sub-text-color);
+  cursor: pointer;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.new-session-guide__announcements-close:hover {
+  color: var(--text-color);
+}
+
+.new-session-guide__announcements-close .material-symbols-rounded {
+  font-size: 18px;
+}
+
 .new-session-guide__announcements-list {
   display: flex;
   flex-direction: column;
@@ -53,10 +81,6 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  border: 1px solid var(--border-color);
-  border-radius: 12px;
-  padding: 16px;
-  background: var(--bg-color);
 }
 
 .new-session-guide__header {
@@ -92,7 +116,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
-  min-height: 160px;
+  height: 160px;
+  overflow: scroll;
 }
 
 .new-session-guide__list {
@@ -105,16 +130,13 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--tag-bg);
 }
 
 .new-session-guide__item-title {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--text-color);
 }
@@ -126,13 +148,13 @@
 
 .new-session-guide__item-desc {
   font-size: 12px;
-  color: var(--sub-text-color);
+  color: var(--placeholder-color);
   line-height: 1.4;
 }
 
 .new-session-guide__meta {
   font-size: 11px;
-  color: var(--sub-text-color);
+  color: var(--placeholder-color);
 }
 
 .new-session-guide__empty {

package/src/components/chat/NewSessionGuide.tsx

@@ -1,15 +1,17 @@
 import './NewSessionGuide.scss'
 
 import { App, Button } from 'antd'
-import React from 'react'
+import { useAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import type { EntitySummary, SpecSummary } from '#~/api.js'
+import { showAnnouncementsAtom } from '#~/store/index.js'
 
 export function NewSessionGuide() {
   const { t } = useTranslation()
   const { message } = App.useApp()
+  const [showAnnouncements, setShowAnnouncements] = useAtom(showAnnouncementsAtom)
 
   const { data: specsRes } = useSWR<{ specs: SpecSummary[] }>('/api/ai/specs')
   const { data: entitiesRes } = useSWR<{ entities: EntitySummary[] }>('/api/ai/entities')
@@ -26,6 +28,7 @@ export function NewSessionGuide() {
   )
 
   const specs = specsRes?.specs ?? []
+  const alwaysSpecs = specs.filter(spec => spec.always)
   const entities = entitiesRes?.entities ?? []
   const isSpecsReady = specsRes != null
   const isEntitiesReady = entitiesRes != null
@@ -47,11 +50,20 @@ export function NewSessionGuide() {
 
   return (
     <div className='new-session-guide'>
-      {announcements.length > 0 && (
+      {showAnnouncements && announcements.length > 0 && (
         <div className='new-session-guide__announcements'>
           <div className='new-session-guide__announcements-header'>
-            <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
-            <span>{t('chat.newSessionGuide.announcements.title')}</span>
+            <div className='new-session-guide__announcements-title'>
+              <span className='material-symbols-rounded new-session-guide__announcements-icon'>campaign</span>
+              <span>{t('chat.newSessionGuide.announcements.title')}</span>
+            </div>
+            <button
+              type='button'
+              className='new-session-guide__announcements-close'
+              onClick={() => setShowAnnouncements(false)}
+            >
+              <span className='material-symbols-rounded'>close</span>
+            </button>
           </div>
           <div className='new-session-guide__announcements-list'>
             {announcements.map((item, index) => (
@@ -69,18 +81,17 @@ export function NewSessionGuide() {
               <span className='material-symbols-rounded new-session-guide__title-icon'>account_tree</span>
               <span>{t('chat.newSessionGuide.specs.title')}</span>
             </div>
-            <div className='new-session-guide__count'>{specs.length}</div>
+            <div className='new-session-guide__count'>{alwaysSpecs.length}</div>
           </div>
           <div className='new-session-guide__body'>
             {!isSpecsReady && (
               <div className='new-session-guide__loading'>{t('chat.newSessionGuide.loading')}</div>
             )}
-            {isSpecsReady && specs.length > 0 && (
+            {isSpecsReady && alwaysSpecs.length > 0 && (
               <div className='new-session-guide__list'>
-                {specs.map((spec) => (
+                {alwaysSpecs.map((spec) => (
                   <div key={spec.id} className='new-session-guide__item'>
                     <div className='new-session-guide__item-title'>
-                      <span className='material-symbols-rounded new-session-guide__item-icon'>route</span>
                       <span>{spec.name}</span>
                     </div>
                     <div className='new-session-guide__item-desc'>{spec.description}</div>
@@ -93,7 +104,7 @@ export function NewSessionGuide() {
                 ))}
               </div>
             )}
-            {isSpecsReady && specs.length === 0 && (
+            {isSpecsReady && alwaysSpecs.length === 0 && (
               <div className='new-session-guide__empty'>
                 <div className='new-session-guide__empty-desc'>{t('chat.newSessionGuide.specs.empty')}</div>
                 <Button type='primary' size='small' onClick={handleCreateSpec}>
@@ -121,7 +132,6 @@ export function NewSessionGuide() {
                 {entities.map((entity) => (
                   <div key={entity.id} className='new-session-guide__item'>
                     <div className='new-session-guide__item-title'>
-                      <span className='material-symbols-rounded new-session-guide__item-icon'>person</span>
                       <span>{entity.name}</span>
                     </div>
                     <div className='new-session-guide__item-desc'>{entity.description}</div>

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;