@vibe-forge/client 0.2.0-alpha.9 → 0.4.0

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)}

package/src/components/chat/tools/DefaultTool.tsx

@@ -1,10 +1,172 @@
 import type { ChatMessageContent } from '@vibe-forge/core'
-import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { CodeBlock } from '../CodeBlock'
-import { MarkdownContent } from '../MarkdownContent'
-import { ToolCallBox } from '../ToolCallBox'
-import { safeJsonStringify } from '../safeSerialize'
+import { CodeBlock } from '#~/components/CodeBlock'
+import { MarkdownContent } from '#~/components/MarkdownContent'
+import { ToolCallBox } from './core/ToolCallBox'
+import { safeJsonStringify, toSerializable } from '#~/utils/safe-serialize'
+
+interface StructuredTextBlock {
+  type: 'text'
+  text: string
+  format: 'text' | 'markdown'
+}
+
+interface StructuredImageBlock {
+  type: 'image'
+  src: string
+  alt?: string
+  title?: string
+  width?: number
+  height?: number
+}
+
+type StructuredBlock = StructuredTextBlock | StructuredImageBlock
+
+function parseStructuredInput(value: unknown) {
+  if (typeof value !== 'string') {
+    return value
+  }
+  const trimmed = value.trim()
+  if (
+    (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+    (trimmed.startsWith('[') && trimmed.endsWith(']'))
+  ) {
+    try {
+      return JSON.parse(trimmed)
+    } catch {
+      return value
+    }
+  }
+  return value
+}
+
+function resolveImageSource(value: Record<string, unknown>) {
+  const directUrl = typeof value.url === 'string'
+    ? value.url
+    : typeof value.src === 'string'
+    ? value.src
+    : typeof value.image_url === 'string'
+    ? value.image_url
+    : typeof value.imageUrl === 'string'
+    ? value.imageUrl
+    : typeof value.dataUrl === 'string'
+    ? value.dataUrl
+    : null
+  if (directUrl) {
+    return directUrl
+  }
+  const source = value.source != null && typeof value.source === 'object'
+    ? (value.source as Record<string, unknown>)
+    : null
+  const data = typeof value.data === 'string'
+    ? value.data
+    : typeof value.base64 === 'string'
+    ? value.base64
+    : source != null && typeof source.data === 'string'
+    ? source.data
+    : null
+  if (!data) {
+    return null
+  }
+  const mimeType = typeof value.mimeType === 'string'
+    ? value.mimeType
+    : typeof value.mime_type === 'string'
+    ? value.mime_type
+    : source != null && typeof source.media_type === 'string'
+    ? source.media_type
+    : source != null && typeof source.mimeType === 'string'
+    ? source.mimeType
+    : source != null && typeof source.mime_type === 'string'
+    ? source.mime_type
+    : 'image/png'
+  return `data:${mimeType};base64,${data}`
+}
+
+function parseBlock(value: unknown): StructuredBlock | null {
+  if (value == null || typeof value !== 'object') {
+    return null
+  }
+  const obj = value as Record<string, unknown>
+  const rawType = typeof obj.type === 'string' ? obj.type.toLowerCase() : ''
+  if (rawType === 'text' || rawType === 'markdown' || rawType === 'md') {
+    const text = typeof obj.text === 'string'
+      ? obj.text
+      : typeof obj.content === 'string'
+      ? obj.content
+      : null
+    if (text == null) {
+      return null
+    }
+    const rawFormat = typeof obj.format === 'string' ? obj.format.toLowerCase() : 'markdown'
+    const format = rawType === 'text'
+      ? (rawFormat === 'text' || rawFormat === 'plain' ? 'text' : 'markdown')
+      : 'markdown'
+    return { type: 'text', text, format }
+  }
+  if (rawType === 'image') {
+    const src = resolveImageSource(obj)
+    if (!src) {
+      return null
+    }
+    const alt = typeof obj.alt === 'string' ? obj.alt : undefined
+    const title = typeof obj.title === 'string' ? obj.title : undefined
+    const width = typeof obj.width === 'number' ? obj.width : undefined
+    const height = typeof obj.height === 'number' ? obj.height : undefined
+    return { type: 'image', src, alt, title, width, height }
+  }
+  return null
+}
+
+function getStructuredBlocks(value: unknown): StructuredBlock[] | null {
+  const serializable = toSerializable(value)
+  const parsed = parseStructuredInput(serializable)
+  if (Array.isArray(parsed)) {
+    const blocks = parsed.map(parseBlock)
+    return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
+  }
+  if (parsed != null && typeof parsed === 'object') {
+    const container = parsed as Record<string, unknown>
+    const content = container.content ?? container.items ?? container.blocks
+    if (Array.isArray(content)) {
+      const blocks = content.map(parseBlock)
+      return blocks.every(Boolean) ? (blocks as StructuredBlock[]) : null
+    }
+  }
+  const single = parseBlock(parsed)
+  return single ? [single] : null
+}
+
+function StructuredToolResult({ blocks }: { blocks: StructuredBlock[] }) {
+  return (
+    <div className='tool-result-structured'>
+      {blocks.map((block, index) => {
+        if (block.type === 'text') {
+          return (
+            <div className='tool-result-text' key={`text-${index}`}>
+              {block.format === 'markdown'
+                ? <MarkdownContent content={block.text} />
+                : <div className='tool-result-text-content'>{block.text}</div>}
+            </div>
+          )
+        }
+        return (
+          <div className='tool-result-image-wrapper' key={`image-${index}`}>
+            <img
+              className='tool-result-image'
+              src={block.src}
+              alt={block.alt ?? ''}
+              width={block.width}
+              height={block.height}
+            />
+            {block.title != null && block.title.length > 0 && (
+              <div className='tool-result-image-caption'>{block.title}</div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 export function DefaultTool({
   item,
@@ -14,17 +176,16 @@ export function DefaultTool({
   resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
 }) {
   const { t } = useTranslation()
+  const structuredBlocks = resultItem != null ? getStructuredBlocks(resultItem.content) : null
   return (
     <div className='tool-group'>
       <ToolCallBox
         header={
-          <>
-            <span className='material-symbols-rounded' style={{ fontSize: 16 }}>build</span>
-            <span>{item.name}</span>
-            <span style={{ color: 'var(--sub-text-color)', fontSize: 11, fontWeight: 400 }}>
-              {t('chat.tools.call')}
-            </span>
-          </>
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded tool-header-icon'>build</span>
+            <span className='tool-header-title'>{item.name}</span>
+            <span className='tool-header-hint'>{t('chat.tools.call')}</span>
+          </div>
         }
         content={
           <div className='tool-content'>
@@ -40,20 +201,22 @@ export function DefaultTool({
           type='result'
           isError={resultItem.is_error}
           header={
-            <>
-              <span className='material-symbols-rounded' style={{ fontSize: 16 }}>
+            <div className='tool-header-content'>
+              <span className='material-symbols-rounded tool-header-icon'>
                 {resultItem.is_error === true ? 'error' : 'check_circle'}
               </span>
-              <span>{t('chat.result')}</span>
-            </>
+              <span className='tool-header-title'>{t('chat.result')}</span>
+            </div>
           }
           content={
             <div className='tool-content'>
-              {typeof resultItem.content === 'string'
-                ? (resultItem.content.startsWith('```')
-                  ? <MarkdownContent content={resultItem.content} />
-                  : <CodeBlock code={resultItem.content} lang='text' />)
-                : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />}
+              {structuredBlocks != null
+                ? <StructuredToolResult blocks={structuredBlocks} />
+                : (typeof resultItem.content === 'string'
+                  ? (resultItem.content.startsWith('```')
+                    ? <MarkdownContent content={resultItem.content} />
+                    : <CodeBlock code={resultItem.content} lang='text' />)
+                  : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />)}
             </div>
           }
         />

package/src/components/chat/tools/adapter-claude/BashTool.scss

@@ -1,71 +1,87 @@
 .tool-group.bash-tool {
-  .bash-header, .result-header {
+  .tool-call-header {
+    height: auto;
+    min-height: 32px;
+  }
+
+  .bash-tool__header {
+    width: 100%;
+    min-width: 0;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
+  }
 
-    .status-icon {
-      font-size: 16px;
-    }
+  .bash-tool__icon {
+    font-size: 16px;
+    color: var(--sub-text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    align-self: center;
+  }
 
-    .bash-title, .result-title {
-      font-weight: 600;
-    }
+  .bash-tool__header-main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
   }
 
-  .bash-command-preview {
-    font-family:
-      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-    font-size: 11px;
-    color: var(--text-color);
+  .bash-tool__command-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .bash-tool__command-text {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    flex: 1;
-  }
-
-  .tool-reason {
-    margin: 0 0 4px 0;
     font-size: 12px;
-    color: var(--sub-text-color);
-    line-height: 1.4;
+    color: var(--text-color);
+  }
 
-    &.markdown-body {
-      font-size: 12px;
-      color: inherit;
-      background-color: transparent;
-      padding: 0;
+  .bash-tool__command-text--clickable {
+    cursor: pointer;
+    color: var(--text-color);
 
-      p {
-        margin: 0 !important;
-        padding: 0 !important;
-      }
+    &:hover {
+      text-shadow: 0 0 .5px currentColor;
     }
   }
 
-  .bash-content-scroll {
-    max-height: 400px;
-    overflow-y: auto;
+  .bash-tool__reason-row {
+    display: flex;
+    min-width: 0;
+  }
 
-    .bash-code-wrapper {
-      background-color: transparent;
-      border: none;
-      border-radius: 0;
-      padding: 0;
-    }
+  .bash-tool__reason-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: var(--border-color);
-      border-radius: 4px;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: var(--sub-text-color);
-    }
+  .bash-tool__header-tags {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+  }
+
+  .bash-tool__command-detail {
+    margin-bottom: 6px;
+  }
+
+  .tool-scroll {
+    max-height: 270px;
   }
 }