Skip to content

Tool-call parameter previews: multiline content renders as one line and doesn't follow generation #188

Description

@cashcon57

When a model writes a file through a tool call (e.g. the filesystem MCP's write_file), the parameters preview under the tool call is unusable while it streams:

  1. The whole file renders as a single line. The preview shows JSON.stringify output, so the content string's newlines appear as literal \n escapes inside one enormous line that scrolls sideways forever. An HTML page reads like a mail slot. This happens with every model/backend, during streaming and after.

  2. The preview stays pinned to the top. While the file streams in, the visible viewport shows the first lines only; there's no follow-the-tail scrolling, so you can't actually watch what's being generated.

It's cosmetic in the sense that the written file itself is fine, but on long generations it also gets heavy: very large single-line content re-rendered per streamed delta makes the app noticeably unhappy.

Proposed fix (in ToolInput, web-app/src/components/ai-elements/tools/tool.tsx):

  • Pull top-level string parameters containing newlines (or very long ones) out of the JSON block and render each as its own code block with real newlines, labeled with the parameter name; guess the highlight language from a sibling path-like parameter. The remaining parameters stay as compact JSON. Generic, so it covers any tool with a chunky text parameter.
  • While the tool is in input-streaming state, render the growing text as plain preformatted text (skipping per-delta syntax highlighting) and auto-scroll its container to the bottom, releasing when the user scrolls up and re-pinning at the bottom. Highlight once when streaming finishes.

I'll put up a PR.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions