@vibe-forge/client 0.2.0-alpha.0

package/src/components/chat/messageUtils.ts

@@ -0,0 +1,171 @@
+import type { ChatMessage, ChatMessageContent } from '@vibe-forge/core'
+
+export interface ToolGroupItem {
+  type: 'tool-group'
+  id: string
+  items: {
+    item: Extract<ChatMessageContent, { type: 'tool_use' }>
+    resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+  }[]
+  footer?: {
+    model?: string
+    usage?: ChatMessage['usage']
+    createdAt: number
+    originalMessage: ChatMessage
+  }
+}
+
+export interface MessageRenderItem {
+  type: 'message'
+  message: ChatMessage
+  isFirstInGroup: boolean
+}
+
+export type ChatRenderItem = MessageRenderItem | ToolGroupItem
+
+export function processMessages(messages: ChatMessage[]): ChatRenderItem[] {
+  const result: ChatRenderItem[] = []
+
+  const findResult = (
+    toolId: string,
+    startIndex: number,
+    allMsgs: ChatMessage[]
+  ): Extract<ChatMessageContent, { type: 'tool_result' }> | undefined => {
+    for (let i = startIndex; i < allMsgs.length; i++) {
+      const msg = allMsgs[i]
+      if (Array.isArray(msg.content)) {
+        const found = msg.content.find(
+          c => c.type === 'tool_result' && c.tool_use_id === toolId
+        )
+        if (found) {
+          return found as Extract<ChatMessageContent, { type: 'tool_result' }>
+        }
+      }
+    }
+    return undefined
+  }
+
+  let i = 0
+  while (i < messages.length) {
+    const msg = messages[i]
+    if (!msg || !msg.content) {
+      // If content is null/empty but legacy toolCall exists, we should render it
+      if (msg && msg.toolCall) {
+        result.push({
+          type: 'message',
+          message: msg,
+          isFirstInGroup: i === 0 || (i > 0 && messages[i - 1]?.role !== msg.role)
+        })
+      }
+      i++
+      continue
+    }
+
+    const prevMsg = i > 0 ? messages[i - 1] : null
+    const isFirstInGroup = i === 0 || (prevMsg != null && prevMsg.role !== msg.role)
+
+    if (typeof msg.content === 'string') {
+      result.push({
+        type: 'message',
+        message: msg,
+        isFirstInGroup
+      })
+      i++
+      continue
+    }
+
+    if (Array.isArray(msg.content)) {
+      const content = msg.content
+      const textParts: ChatMessageContent[] = []
+      let currentToolGroup: {
+        item: Extract<ChatMessageContent, { type: 'tool_use' }>
+        resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+      }[] = []
+
+      let producedCount = 0
+
+      const flushTools = () => {
+        if (currentToolGroup.length > 0) {
+          result.push({
+            type: 'tool-group',
+            id: `group-${msg.id}-${producedCount}`,
+            items: [...currentToolGroup],
+            footer: undefined
+          })
+          currentToolGroup = []
+          producedCount++
+        }
+      }
+
+      const flushText = () => {
+        if (textParts.length > 0) {
+          result.push({
+            type: 'message',
+            message: {
+              ...msg,
+              id: `${msg.id}-text-${producedCount}`,
+              content: [...textParts]
+            },
+            isFirstInGroup: isFirstInGroup && producedCount === 0
+          })
+          textParts.length = 0
+          producedCount++
+        }
+      }
+
+      for (const item of content) {
+        if (item.type === 'text') {
+          flushTools()
+          textParts.push(item)
+        } else if (item.type === 'tool_use') {
+          flushText()
+          const resultItem = findResult(item.id, i, messages)
+          currentToolGroup.push({ item, resultItem })
+        }
+      }
+
+      flushText()
+      flushTools()
+
+      // Handle legacy toolCall if no other content was produced
+      if (producedCount === 0 && msg.toolCall) {
+        result.push({
+          type: 'message',
+          message: msg,
+          isFirstInGroup
+        })
+        producedCount++
+      }
+
+      if (producedCount > 0) {
+        const lastItem = result[result.length - 1]
+        if (lastItem.type === 'tool-group') {
+          lastItem.footer = {
+            model: msg.model,
+            usage: msg.usage,
+            createdAt: msg.createdAt,
+            originalMessage: msg
+          }
+        }
+      }
+    }
+    i++
+  }
+
+  const mergedResult: ChatRenderItem[] = []
+  for (const item of result) {
+    if (item.type === 'tool-group') {
+      const prev = mergedResult[mergedResult.length - 1]
+      if (prev && prev.type === 'tool-group') {
+        prev.items.push(...item.items)
+        if (item.footer) {
+          prev.footer = item.footer
+        }
+        continue
+      }
+    }
+    mergedResult.push(item)
+  }
+
+  return mergedResult
+}

package/src/components/chat/safeSerialize.ts

@@ -0,0 +1,84 @@
+export function toSerializable(value: unknown, seen = new WeakSet<object>()): unknown {
+  if (value == null) {
+    return value
+  }
+
+  const valueType = typeof value
+
+  if (valueType === 'bigint') {
+    return value.toString()
+  }
+
+  if (valueType === 'symbol') {
+    return value.toString()
+  }
+
+  if (valueType === 'function') {
+    return '[Function]'
+  }
+
+  if (valueType !== 'object') {
+    return value
+  }
+
+  if (value instanceof Date) {
+    return value.toISOString()
+  }
+
+  if (value instanceof Error) {
+    return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack
+    }
+  }
+
+  if (value instanceof Map) {
+    return Array.from(value.entries()).map(([k, v]) => [toSerializable(k, seen), toSerializable(v, seen)])
+  }
+
+  if (value instanceof Set) {
+    return Array.from(value.values()).map(v => toSerializable(v, seen))
+  }
+
+  if (ArrayBuffer.isView(value)) {
+    return Array.from(value as unknown as ArrayLike<number>)
+  }
+
+  if (value instanceof ArrayBuffer) {
+    return Array.from(new Uint8Array(value))
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(v => toSerializable(v, seen))
+  }
+
+  const obj = value as Record<string, unknown>
+  if (seen.has(obj)) {
+    return '[Circular]'
+  }
+  seen.add(obj)
+
+  if (typeof (obj as any).toJSON === 'function') {
+    try {
+      return toSerializable((obj as any).toJSON(), seen)
+    } catch {
+      return String(obj)
+    }
+  }
+
+  const output: Record<string, unknown> = {}
+  for (const [k, v] of Object.entries(obj)) {
+    output[k] = toSerializable(v, seen)
+  }
+  return output
+}
+
+export function safeJsonStringify(value: unknown, space = 2): string {
+  try {
+    const serialized = toSerializable(value)
+    return JSON.stringify(serialized, null, space) ?? 'null'
+  } catch {
+    return JSON.stringify(String(value)) ?? 'null'
+  }
+}

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

@@ -0,0 +1,63 @@
+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'
+
+export function DefaultTool({
+  item,
+  resultItem
+}: {
+  item: Extract<ChatMessageContent, { type: 'tool_use' }>
+  resultItem?: Extract<ChatMessageContent, { type: 'tool_result' }>
+}) {
+  const { t } = useTranslation()
+  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>
+          </>
+        }
+        content={
+          <div className='tool-content'>
+            <CodeBlock
+              code={safeJsonStringify(item.input != null ? item.input : {}, 2)}
+              lang='json'
+            />
+          </div>
+        }
+      />
+      {resultItem != null && (
+        <ToolCallBox
+          type='result'
+          isError={resultItem.is_error}
+          header={
+            <>
+              <span className='material-symbols-rounded' style={{ fontSize: 16 }}>
+                {resultItem.is_error === true ? 'error' : 'check_circle'}
+              </span>
+              <span>{t('chat.result')}</span>
+            </>
+          }
+          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' />}
+            </div>
+          }
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,71 @@
+.tool-group.bash-tool {
+  .bash-header, .result-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    .status-icon {
+      font-size: 16px;
+    }
+
+    .bash-title, .result-title {
+      font-weight: 600;
+    }
+  }
+
+  .bash-command-preview {
+    font-family:
+      'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 11px;
+    color: var(--text-color);
+    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;
+
+    &.markdown-body {
+      font-size: 12px;
+      color: inherit;
+      background-color: transparent;
+      padding: 0;
+
+      p {
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+    }
+  }
+
+  .bash-content-scroll {
+    max-height: 400px;
+    overflow-y: auto;
+
+    .bash-code-wrapper {
+      background-color: transparent;
+      border: none;
+      border-radius: 0;
+      padding: 0;
+    }
+
+    &::-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);
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+import './BashTool.scss'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+import { defineToolRender } from '../defineToolRender'
+import { CodeBlock } from '../../CodeBlock'
+import { ToolCallBox } from '../../ToolCallBox'
+import { safeJsonStringify } from '../../safeSerialize'
+
+export const BashTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+  const input = (item.input != null ? item.input : {}) as {
+    command?: string
+    reason?: string
+    thought?: string
+    description?: string
+  }
+  const command = input.command ?? ''
+  const reason = (input.description != null && input.description !== '')
+    ? input.description
+    : (input.reason != null && input.reason !== '')
+    ? input.reason
+    : (input.thought != null && input.thought !== '')
+    ? input.thought
+    : ''
+
+  return (
+    <div className='tool-group bash-tool'>
+      <ToolCallBox
+        collapsible={false}
+        header={
+          <div className='bash-header'>
+            <span className='material-symbols-rounded status-icon'>terminal</span>
+            <span className='bash-title'>{t('chat.tools.bash')}</span>
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            {(reason != null && reason !== '') && (
+              <div className='tool-reason markdown-body'>
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{reason}</ReactMarkdown>
+              </div>
+            )}
+            <div className='bash-content-scroll'>
+              <div className='bash-code-wrapper'>
+                <CodeBlock code={command} lang='shell' />
+              </div>
+            </div>
+          </div>
+        }
+      />
+
+      {resultItem != null && (
+        <ToolCallBox
+          type='result'
+          isError={resultItem.is_error}
+          header={
+            <div className='result-header'>
+              <span className='material-symbols-rounded status-icon'>
+                {resultItem.is_error === true ? 'error' : 'check_circle'}
+              </span>
+              <span className='result-title'>{t('chat.result')}</span>
+            </div>
+          }
+          content={
+            <div className='tool-content'>
+              <div className='bash-content-scroll'>
+                <div className='bash-code-wrapper'>
+                  {typeof resultItem.content === 'string'
+                    ? <CodeBlock code={resultItem.content} lang='text' />
+                    : <CodeBlock code={safeJsonStringify(resultItem.content, 2)} lang='json' />}
+                </div>
+              </div>
+            </div>
+          }
+        />
+      )}
+    </div>
+  )
+})

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

@@ -0,0 +1,88 @@
+.glob-tool {
+  .tool-header-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .material-symbols-rounded {
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--sub-text-color);
+      height: 20px;
+      width: 18px;
+      margin-right: 8px;
+      position: relative;
+      top: 1px;
+    }
+
+    .command-name {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-color);
+      white-space: nowrap;
+      line-height: 20px;
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+    }
+
+    .pattern {
+      font-size: 12px;
+      color: var(--sub-text-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      flex: 1;
+      line-height: 20px;
+    }
+
+    .file-count {
+      font-size: 12px;
+      color: var(--sub-text-color);
+      white-space: nowrap;
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+  }
+
+  .input-details {
+    padding: 8px 12px;
+    font-size: 12px;
+    color: var(--sub-text-color);
+    border-bottom: 1px solid var(--border-color);
+
+    .label {
+      font-weight: 500;
+      margin-right: 8px;
+    }
+
+    .value {
+      font-family: var(--font-mono);
+      background: var(--bg-color-hover);
+      padding: 2px 4px;
+      border-radius: 4px;
+    }
+  }
+
+  .tool-placeholder {
+    padding: 8px 12px;
+    color: var(--sub-text-color);
+    font-size: 12px;
+    font-style: italic;
+  }
+
+  .file-list-container {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    border: none;
+  }
+}

package/src/components/chat/tools/adapter-claude/GlobTool.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react'
+import './GlobTool.scss'
+import { useTranslation } from 'react-i18next'
+
+import { defineToolRender } from '../defineToolRender'
+import { ToolCallBox } from '../../ToolCallBox'
+import { safeJsonStringify } from '../../safeSerialize'
+import { FileList } from './components/FileList'
+
+export const GlobTool = defineToolRender(({ item, resultItem }) => {
+  const { t } = useTranslation()
+  const input = (item.input != null ? item.input : {}) as { pattern?: string; path?: string }
+  const pattern = (input.pattern != null && input.pattern !== '') ? input.pattern : '*'
+  const path = input.path
+
+  const fileCount = useMemo(() => {
+    if (!resultItem) return null
+    const content = resultItem.content
+    let lines: string[] = []
+
+    if (typeof content === 'string') {
+      if (content.trim().startsWith('[') && content.trim().endsWith(']')) {
+        try {
+          const parsed = JSON.parse(content)
+          if (Array.isArray(parsed)) {
+            lines = parsed.map(String)
+          } else {
+            lines = content.split('\n')
+          }
+        } catch (e) {
+          lines = content.split('\n')
+        }
+      } else {
+        lines = content.split('\n')
+      }
+    } else if (Array.isArray(content)) {
+      lines = content.map(String)
+    }
+
+    const count = lines.filter(line => line.trim() !== '').length
+    return count
+  }, [resultItem])
+
+  return (
+    <div className='tool-group glob-tool'>
+      <ToolCallBox
+        header={
+          <div className='tool-header-content'>
+            <span className='material-symbols-rounded'>search</span>
+            <span className='command-name'>Glob</span>
+            <span className='pattern'>{pattern}</span>
+            {fileCount !== null && (
+              <span className='file-count'>({fileCount} files)</span>
+            )}
+          </div>
+        }
+        content={
+          <div className='tool-content'>
+            {path && (
+              <div className='input-details'>
+                <span className='label'>Path:</span>
+                <span className='value'>{path}</span>
+              </div>
+            )}
+            {resultItem
+              ? (
+                <div className='result-content'>
+                  <FileList
+                    content={typeof resultItem.content === 'string'
+                      ? resultItem.content
+                      : safeJsonStringify(resultItem.content)}
+                  />
+                </div>
+              )
+              : (
+                <div className='tool-placeholder'>
+                  Searching...
+                </div>
+              )}
+          </div>
+        }
+      />
+    </div>
+  )
+})