@vibe-forge/client 0.11.0 → 0.11.1

package/src/components/chat/tools/adapter-claude/claude-tool-field-sections.tsx

@@ -1,15 +1,13 @@
 import { Tooltip } from 'antd'
 import React from 'react'
 
-import { CodeBlock } from '#~/components/CodeBlock'
-import { safeJsonStringify } from '#~/utils/safe-serialize'
-
-import { TOOL_TOOLTIP_PROPS, getToolFieldIcon, getToolInlineValueText, getToolValueText } from '../core/tool-display'
+import { TOOL_TOOLTIP_PROPS, getToolFieldIcon } from '../core/tool-display'
+import { renderToolBlockField } from '../core/tool-field-sections'
 import type { ClaudeToolField, ClaudeToolQuestion } from './claude-tool-presentation'
 
 type Translate = (key: string, options?: Record<string, unknown>) => string
 
-const getFieldKey = (field: ClaudeToolField, index: number) => `${field.labelKey}-${index}`
+export { ToolInlineFields as ClaudeToolInlineFields } from '../core/tool-field-sections'
 
 const getSectionHeader = (icon: string, label: string) => (
   <div className='tool-detail-section__header'>
@@ -19,93 +17,17 @@ const getSectionHeader = (icon: string, label: string) => (
   </div>
 )
 
-export function ClaudeToolInlineFields({
-  fields,
-  t
-}: {
-  fields: ClaudeToolField[]
-  t: Translate
-}) {
-  if (fields.length === 0) {
-    return null
-  }
-
-  return (
-    <div
-      className='tool-inline-token-list tool-inline-token-list--standalone'
-      aria-label={t('chat.tools.fields.details')}
-    >
-      {fields.map((field, index) => {
-        const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
-        const valueText = getToolInlineValueText(field.value)
-        return (
-          <Tooltip
-            key={getFieldKey(field, index)}
-            title={
-              <div className='tool-tooltip-content'>
-                <div className='tool-tooltip-content__title'>{label}</div>
-                <div className='tool-tooltip-content__value'>{getToolValueText(field.value)}</div>
-              </div>
-            }
-            {...TOOL_TOOLTIP_PROPS}
-          >
-            <div className='tool-inline-token'>
-              <span className='tool-inline-token__icon material-symbols-rounded'>
-                {getToolFieldIcon(field.labelKey, field.format)}
-              </span>
-              <span className='tool-inline-token__value'>{valueText}</span>
-            </div>
-          </Tooltip>
-        )
-      })}
-    </div>
-  )
-}
-
 export function renderClaudeBlockField(field: ClaudeToolField, index: number, t: Translate) {
   const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
   const sectionHeader = getSectionHeader(getToolFieldIcon(field.labelKey, field.format), label)
 
-  if (field.format === 'text') {
-    return (
-      <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
-        {sectionHeader}
-        <div className='tool-detail-section__text'>{String(field.value)}</div>
-      </div>
-    )
-  }
-
-  if (field.format === 'code') {
-    return (
-      <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
-        {sectionHeader}
-        <CodeBlock
-          code={String(field.value)}
-          lang={field.lang ?? 'text'}
-          hideHeader={true}
-        />
-      </div>
-    )
-  }
-
-  if (field.format === 'list') {
-    const items = Array.isArray(field.value) ? field.value.map(item => String(item)) : []
-    return (
-      <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
-        {sectionHeader}
-        <div className='claude-generic-tool__list'>
-          {items.map(listItem => (
-            <div className='claude-generic-tool__list-item' key={listItem}>{listItem}</div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
   if (field.format === 'questions') {
     const questions = Array.isArray(field.value) ? field.value as ClaudeToolQuestion[] : []
     return (
-      <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
+      <div
+        className='tool-detail-section claude-generic-tool__section'
+        key={`${field.labelKey}-${index}`}
+      >
         {sectionHeader}
         <div className='claude-generic-tool__questions'>
           {questions.map((question, questionIndex) => (
@@ -155,14 +77,7 @@ export function renderClaudeBlockField(field: ClaudeToolField, index: number, t:
     )
   }
 
-  return (
-    <div className='tool-detail-section claude-generic-tool__section' key={getFieldKey(field, index)}>
-      {sectionHeader}
-      <CodeBlock
-        code={safeJsonStringify(field.value, 2)}
-        lang='json'
-        hideHeader={true}
-      />
-    </div>
-  )
+  return renderToolBlockField(field, index, t, {
+    sectionClassName: 'tool-detail-section claude-generic-tool__section'
+  })
 }

package/src/components/chat/tools/core/ToolCallBox.scss

@@ -587,6 +587,24 @@
     overflow-wrap: anywhere;
   }
 
+  .tool-detail-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .tool-detail-list-item {
+    padding: 4px 0 4px 10px;
+    border: none;
+    border-left: 1px solid var(--border-color);
+    border-radius: 0;
+    background: transparent;
+    color: var(--text-color);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+  }
+
   .tool-inline-token-list {
     display: flex;
     flex-wrap: wrap;