@vibe-forge/client 0.10.1 → 0.11.1

package/src/components/chat/tools/core/tool-content-presence.ts

@@ -0,0 +1,57 @@
+import { toSerializable } from '#~/utils/safe-serialize'
+
+import { getStringList, getStructuredBlocks } from './tool-result-content-utils'
+
+const 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
+}
+
+export const hasMeaningfulToolValue = (value: unknown): boolean => {
+  const parsed = parseStructuredInput(toSerializable(value))
+
+  if (parsed == null) {
+    return false
+  }
+
+  if (typeof parsed === 'string') {
+    return parsed.trim() !== ''
+  }
+
+  if (typeof parsed === 'number' || typeof parsed === 'boolean') {
+    return true
+  }
+
+  if (Array.isArray(parsed)) {
+    return parsed.some(item => hasMeaningfulToolValue(item))
+  }
+
+  if (typeof parsed !== 'object') {
+    return false
+  }
+
+  if (getStructuredBlocks(parsed) != null) {
+    return true
+  }
+
+  if (getStringList(parsed) != null) {
+    return true
+  }
+
+  return Object.values(parsed as Record<string, unknown>).some(item => hasMeaningfulToolValue(item))
+}

package/src/components/chat/tools/core/tool-display.ts

@@ -0,0 +1,203 @@
+/* eslint-disable max-lines */
+
+import { safeJsonStringify } from '#~/utils/safe-serialize'
+
+export const TOOL_TOOLTIP_PROPS = {
+  arrow: false,
+  mouseEnterDelay: .2,
+  mouseLeaveDelay: .06
+} as const
+
+const PATH_TOOLTIP_MARKERS = ['apps', 'packages', 'src', 'scripts', '.ai', 'docs', 'tests', 'test', 'changelog']
+const WINDOWS_PATH_RE = /^[a-z]:[\\/]+/i
+const URL_RE = /^https?:\/\//i
+
+const TOOL_FIELD_ICON_MAP: Record<string, string> = {
+  activeForm: 'description',
+  addBlockedBy: 'link_off',
+  addBlocks: 'block',
+  allowedDomains: 'travel_explore',
+  allowedPrompts: 'chat',
+  answers: 'fact_check',
+  args: 'segment',
+  blockedDomains: 'domain_disabled',
+  cellId: 'tag',
+  cellType: 'grid_view',
+  command: 'terminal',
+  content: 'notes',
+  contextLines: 'format_line_spacing',
+  cwd: 'folder_open',
+  changes: 'difference',
+  description: 'subject',
+  disableSandbox: 'shield',
+  details: 'info',
+  endLine: 'keyboard_double_arrow_down',
+  editMode: 'edit',
+  glob: 'data_object',
+  ignore: 'visibility_off',
+  ignoreCase: 'text_fields',
+  limit: 'filter_alt',
+  maxTurns: 'repeat',
+  maxOutputTokens: 'expand_content',
+  metadata: 'badge',
+  model: 'neurology',
+  mode: 'tune',
+  newSource: 'note_stack',
+  newString: 'edit_note',
+  oldString: 'history',
+  owner: 'person',
+  offset: 'format_indent_increase',
+  path: 'folder',
+  prompt: 'chat',
+  pushToRemote: 'upload',
+  questions: 'quiz',
+  remoteSession: 'devices',
+  remoteSessionUrl: 'link',
+  replaceAll: 'select_all',
+  resume: 'play_circle',
+  runInBackground: 'background_dot_large',
+  startLine: 'keyboard_double_arrow_up',
+  status: 'flag',
+  subagentType: 'hub',
+  subject: 'title',
+  timeout: 'timer',
+  todos: 'checklist',
+  workdir: 'folder_code',
+  yieldTimeMs: 'schedule'
+}
+
+const TOOL_FORMAT_ICON_MAP: Record<string, string> = {
+  code: 'code',
+  inline: 'label',
+  json: 'data_object',
+  list: 'format_list_bulleted',
+  questions: 'quiz',
+  text: 'article'
+}
+
+export const getToolSectionIcon = (section: 'call' | 'details' | 'result') => {
+  if (section === 'call') return 'tune'
+  if (section === 'result') return 'assignment_turned_in'
+  return 'info'
+}
+
+export const getToolFieldIcon = (labelKey: string, format: string) => {
+  const key = labelKey.split('.').pop() ?? labelKey
+  return TOOL_FIELD_ICON_MAP[key] ?? TOOL_FORMAT_ICON_MAP[format] ?? 'label'
+}
+
+export const getToolValueText = (value: unknown) => {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+
+  return safeJsonStringify(value, 2)
+}
+
+export const getToolInlineValueText = (value: unknown) => (
+  getToolValueText(value).replace(/\s+/g, ' ').trim()
+)
+
+export const shouldUseMonospaceTarget = (value: string | undefined) => {
+  if (value == null || value === '') {
+    return false
+  }
+
+  return (
+    value.startsWith('/') ||
+    value.startsWith('./') ||
+    value.startsWith('../') ||
+    value.startsWith('http://') ||
+    value.startsWith('https://') ||
+    value.startsWith('#') ||
+    value.includes('/')
+  )
+}
+
+const normalizeToolPath = (value: string) => value.replace(/\\/g, '/')
+
+const looksLikeToolPath = (value: string) => {
+  if (URL_RE.test(value)) {
+    return false
+  }
+
+  const normalized = normalizeToolPath(value)
+  if (normalized.startsWith('/') || normalized.startsWith('./') || normalized.startsWith('../')) {
+    return true
+  }
+
+  if (WINDOWS_PATH_RE.test(value)) {
+    return true
+  }
+
+  if (!normalized.includes('/')) {
+    return false
+  }
+
+  return !normalized.includes(' ')
+}
+
+const getPathLabel = (value: string) => {
+  const normalized = normalizeToolPath(value)
+  const segments = normalized.split('/').filter(Boolean)
+  return segments.at(-1) ?? normalized
+}
+
+const getPathTooltip = (value: string) => {
+  const normalized = normalizeToolPath(value)
+  const segments = normalized.split('/').filter(Boolean)
+  const markerIndex = segments.findIndex(segment => PATH_TOOLTIP_MARKERS.includes(segment))
+
+  if (markerIndex >= 0) {
+    return segments.slice(markerIndex).join('/')
+  }
+
+  return normalized
+}
+
+export const getToolTargetPresentation = (value: string | undefined) => {
+  if (value == null || value.trim() === '') {
+    return {
+      text: undefined,
+      title: undefined,
+      monospace: false
+    }
+  }
+
+  const normalized = value.trim()
+
+  if (looksLikeToolPath(normalized)) {
+    return {
+      text: getPathLabel(normalized),
+      title: getPathTooltip(normalized),
+      monospace: true
+    }
+  }
+
+  if (URL_RE.test(normalized)) {
+    try {
+      const url = new URL(normalized)
+      return {
+        text: `${url.hostname}${url.pathname}${url.search}${url.hash}`,
+        title: normalized,
+        monospace: false
+      }
+    } catch {
+      return {
+        text: normalized,
+        title: normalized,
+        monospace: false
+      }
+    }
+  }
+
+  return {
+    text: normalized,
+    title: undefined,
+    monospace: shouldUseMonospaceTarget(normalized)
+  }
+}

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

@@ -0,0 +1,132 @@
+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 './tool-display'
+
+type Translate = (key: string, options?: Record<string, unknown>) => string
+
+export type ToolFieldFormat = 'inline' | 'text' | 'code' | 'list' | 'json' | 'questions'
+
+export interface ToolFieldView {
+  labelKey: string
+  fallbackLabel: string
+  format: ToolFieldFormat
+  value: unknown
+  lang?: string
+}
+
+const getFieldKey = (field: ToolFieldView, index: number) => `${field.labelKey}-${index}`
+
+const getSectionHeader = (icon: string, label: string) => (
+  <div className='tool-detail-section__header'>
+    <Tooltip title={label} {...TOOL_TOOLTIP_PROPS}>
+      <span className='tool-detail-section__icon material-symbols-rounded'>{icon}</span>
+    </Tooltip>
+  </div>
+)
+
+export function ToolInlineFields({
+  fields,
+  t
+}: {
+  fields: ToolFieldView[]
+  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 renderToolBlockField(
+  field: ToolFieldView,
+  index: number,
+  t: Translate,
+  options: {
+    sectionClassName?: string
+  } = {}
+) {
+  const label = t(field.labelKey, { defaultValue: field.fallbackLabel })
+  const sectionHeader = getSectionHeader(getToolFieldIcon(field.labelKey, field.format), label)
+  const sectionClassName = options.sectionClassName ?? 'tool-detail-section'
+
+  if (field.format === 'text') {
+    return (
+      <div className={sectionClassName} key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='tool-detail-section__text'>{String(field.value)}</div>
+      </div>
+    )
+  }
+
+  if (field.format === 'code') {
+    return (
+      <div className={sectionClassName} 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={sectionClassName} key={getFieldKey(field, index)}>
+        {sectionHeader}
+        <div className='tool-detail-list'>
+          {items.map(listItem => (
+            <div className='tool-detail-list-item' key={listItem}>{listItem}</div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={sectionClassName} key={getFieldKey(field, index)}>
+      {sectionHeader}
+      <CodeBlock
+        code={safeJsonStringify(field.value, 2)}
+        lang='json'
+        hideHeader={true}
+      />
+    </div>
+  )
+}

package/src/components/chat/tools/core/tool-result-content-utils.ts

@@ -0,0 +1,171 @@
+import { 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
+}
+
+export type StructuredBlock = StructuredTextBlock | StructuredImageBlock
+
+const 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
+}
+
+const 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 != null) {
+    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 == null || 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}`
+}
+
+const 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'
+    return {
+      type: 'text',
+      text,
+      format: rawType === 'text' && (rawFormat === 'text' || rawFormat === 'plain') ? 'text' : 'markdown'
+    }
+  }
+
+  if (rawType !== 'image') {
+    return null
+  }
+
+  const src = resolveImageSource(obj)
+  if (src == null) {
+    return null
+  }
+
+  return {
+    type: 'image',
+    src,
+    alt: typeof obj.alt === 'string' ? obj.alt : undefined,
+    title: typeof obj.title === 'string' ? obj.title : undefined,
+    width: typeof obj.width === 'number' ? obj.width : undefined,
+    height: typeof obj.height === 'number' ? obj.height : undefined
+  }
+}
+
+export const getStructuredBlocks = (value: unknown): StructuredBlock[] | null => {
+  const parsed = parseStructuredInput(toSerializable(value))
+  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 != null ? [single] : null
+}
+
+export const getStringList = (value: unknown): string[] | null => {
+  const parsed = parseStructuredInput(toSerializable(value))
+  if (!Array.isArray(parsed) || !parsed.every(item => ['string', 'number', 'boolean'].includes(typeof item))) {
+    return null
+  }
+
+  return parsed.map(item => String(item))
+}
+
+export const looksLikeMarkdown = (value: string) => {
+  const trimmed = value.trim()
+  if (trimmed === '') {
+    return false
+  }
+
+  return (
+    trimmed.startsWith('```') ||
+    /^(?:#{1,6}\s|[-*+]\s|>\s|\d+\.\s)/m.test(trimmed) ||
+    /\[[^\]]+\]\([^)]+\)/.test(trimmed) ||
+    /!\[[^\]]*\]\([^)]+\)/.test(trimmed) ||
+    /\|.+\|/.test(trimmed)
+  )
+}