fix(chat-message): update part type to UIMessage['parts'][number] and… by harshlocham · Pull Request #783 · TanStack/ai

harshlocham · 2026-06-18T12:35:48Z

🎯 Changes

Restore typing for ChatMessage parts by replacing the migration-era any with the existing UIMessage part type and removing the associated TODO.

This change also adds local narrowing for tool-result content to satisfy the ToolResultPart.content union while preserving the existing renderer contract and runtime behavior.

No public APIs, package functionality, or runtime behavior are changed.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes
- Improved chat rendering for multimodal tool results by safely normalizing tool-result content into a consistent plain-text string before display, preventing incorrect rendering when content is provided as structured parts.
New Features
- Added a helper utility to convert tool-result content into a renderable string (used by both the built-in and custom tool-result renderers).
Tests
- Added unit tests covering tool-result content normalization for strings, mixed parts, and non-text-only content.

… ensure tool result content is handled correctly

coderabbitai · 2026-06-18T12:36:04Z

📝 Walkthrough

Walkthrough

ChatMessage now types MessagePart more specifically and normalizes tool-result content to a string before rendering. A new helper converts multimodal content into text-only output, with tests and a changeset added.

Changes

Tool-result content normalization

Layer / File(s)	Summary
Content helper and tests `packages/ai-react-ui/src/tool-result-content.ts`, `packages/ai-react-ui/tests/tool-result-content.test.ts`, `.changeset/red-pillows-cheer.md`	A helper flattens tool-result content into a plain string by keeping only text parts, and tests cover string, array, empty, and non-text cases. The changeset records the rendering update.
ChatMessage tool-result wiring `packages/ai-react-ui/src/chat-message.tsx`	`MessagePart` is typed as `UIMessage['parts'][number]`, and the normalized tool-result string is passed to `toolResultRenderer` and the fallback `data-tool-result-content` attribute.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

TanStack/ai#666: Updates the same ChatMessage tool-result rendering path to handle multimodal content arrays via toolResultContentToString.
PRs introducing or modifying UIMessage tool-result part shapes: this change depends on the same content-part typing used by the helper and MessagePart annotation.

Suggested reviewers

crutchcorn

Poem

🐇 I hopped through parts both text and wide,
Then tucked the words inside the stride.
No stray objects twinkle in the hay,
Just tidy strings that light the way.
A rabbit nods: “Render on, hooray!”

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description includes all template sections, but the release-impact section is incorrect because this PR adds a changeset for published code.	Mark the published-code changeset checkbox and remove the 'no public APIs' claim, since the PR adds an exported helper and includes a changeset.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is specific and matches the main chat-message typing change, though it is truncated.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/ai-react-ui/tests/tool-result-content.test.ts

Parsing error: "parserOptions.project" has been provided for @typescript-eslint/parser.
The file was not found in any of the provided project(s): packages/ai-react-ui/tests/tool-result-content.test.ts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-06-24T07:20:47Z

View your CI Pipeline Execution ↗ for commit 9284b24

Command	Status	Duration	Result
`nx run-many --targets=build --exclude=examples/...`	✅ Succeeded	5s	View ↗

☁️ Nx Cloud last updated this comment at 2026-06-24 08:04:17 UTC

pkg-pr-new · 2026-06-24T07:21:21Z

Open in StackBlitz

@tanstack/ai

npm i https://pkg.pr.new/@tanstack/ai@783

@tanstack/ai-angular

npm i https://pkg.pr.new/@tanstack/ai-angular@783

@tanstack/ai-anthropic

npm i https://pkg.pr.new/@tanstack/ai-anthropic@783

@tanstack/ai-client

npm i https://pkg.pr.new/@tanstack/ai-client@783

@tanstack/ai-code-mode

npm i https://pkg.pr.new/@tanstack/ai-code-mode@783

@tanstack/ai-code-mode-skills

npm i https://pkg.pr.new/@tanstack/ai-code-mode-skills@783

@tanstack/ai-devtools-core

npm i https://pkg.pr.new/@tanstack/ai-devtools-core@783

@tanstack/ai-elevenlabs

npm i https://pkg.pr.new/@tanstack/ai-elevenlabs@783

@tanstack/ai-event-client

npm i https://pkg.pr.new/@tanstack/ai-event-client@783

@tanstack/ai-fal

npm i https://pkg.pr.new/@tanstack/ai-fal@783

@tanstack/ai-gemini

npm i https://pkg.pr.new/@tanstack/ai-gemini@783

@tanstack/ai-grok

npm i https://pkg.pr.new/@tanstack/ai-grok@783

@tanstack/ai-groq

npm i https://pkg.pr.new/@tanstack/ai-groq@783

@tanstack/ai-isolate-cloudflare

npm i https://pkg.pr.new/@tanstack/ai-isolate-cloudflare@783

@tanstack/ai-isolate-node

npm i https://pkg.pr.new/@tanstack/ai-isolate-node@783

@tanstack/ai-isolate-quickjs

npm i https://pkg.pr.new/@tanstack/ai-isolate-quickjs@783

@tanstack/ai-mcp

npm i https://pkg.pr.new/@tanstack/ai-mcp@783

@tanstack/ai-ollama

npm i https://pkg.pr.new/@tanstack/ai-ollama@783

@tanstack/ai-openai

npm i https://pkg.pr.new/@tanstack/ai-openai@783

@tanstack/ai-openrouter

npm i https://pkg.pr.new/@tanstack/ai-openrouter@783

@tanstack/ai-preact

npm i https://pkg.pr.new/@tanstack/ai-preact@783

@tanstack/ai-react

npm i https://pkg.pr.new/@tanstack/ai-react@783

@tanstack/ai-react-ui

npm i https://pkg.pr.new/@tanstack/ai-react-ui@783

@tanstack/ai-solid

npm i https://pkg.pr.new/@tanstack/ai-solid@783

@tanstack/ai-solid-ui

npm i https://pkg.pr.new/@tanstack/ai-solid-ui@783

@tanstack/ai-svelte

npm i https://pkg.pr.new/@tanstack/ai-svelte@783

@tanstack/ai-utils

npm i https://pkg.pr.new/@tanstack/ai-utils@783

@tanstack/ai-vue

npm i https://pkg.pr.new/@tanstack/ai-vue@783

@tanstack/ai-vue-ui

npm i https://pkg.pr.new/@tanstack/ai-vue-ui@783

@tanstack/openai-base

npm i https://pkg.pr.new/@tanstack/openai-base@783

@tanstack/preact-ai-devtools

npm i https://pkg.pr.new/@tanstack/preact-ai-devtools@783

@tanstack/react-ai-devtools

npm i https://pkg.pr.new/@tanstack/react-ai-devtools@783

@tanstack/solid-ai-devtools

npm i https://pkg.pr.new/@tanstack/solid-ai-devtools@783

commit: 9284b24

Tool-result content is `string | Array<ContentPart>`. The renderer previously narrowed array content to '', silently dropping multimodal results. Extract and concatenate the text parts instead (skipping non-text parts), via a small testable `toolResultContentToString` helper, and add unit coverage plus a changeset. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

coderabbitai

🧹 Nitpick comments (1)

packages/ai-react-ui/tests/tool-result-content.test.ts (1)
1-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Move this unit test alongside its source file.

This test is under packages/ai-react-ui/tests/, but the project rule requires unit tests to be colocated with source (*.test.ts next to the module). Please move it next to packages/ai-react-ui/src/tool-result-content.ts (e.g., packages/ai-react-ui/src/tool-result-content.test.ts).

As per coding guidelines, "**/*.test.ts: Place unit tests alongside source code in *.test.ts files".
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ai-react-ui/tests/tool-result-content.test.ts` around lines 1 - 46,
The unit test for toolResultContentToString is in the wrong location and should
be colocated with its source module. Move the existing test from the standalone
tests folder to sit next to tool-result-content in the src area, keeping the
test name and assertions intact so it remains discoverable by the project’s
`*.test.ts` convention. Ensure any imports still reference
toolResultContentToString from the local source module after the move.
Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/ai-react-ui/tests/tool-result-content.test.ts`:
- Around line 1-46: The unit test for toolResultContentToString is in the wrong
location and should be colocated with its source module. Move the existing test
from the standalone tests folder to sit next to tool-result-content in the src
area, keeping the test name and assertions intact so it remains discoverable by
the project’s `*.test.ts` convention. Ensure any imports still reference
toolResultContentToString from the local source module after the move.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2b3e5786-354c-47c1-87c6-aca15dade480

📥 Commits

Reviewing files that changed from the base of the PR and between aadbc45 and 9284b24.

📒 Files selected for processing (4)

.changeset/red-pillows-cheer.md
packages/ai-react-ui/src/chat-message.tsx
packages/ai-react-ui/src/tool-result-content.ts
packages/ai-react-ui/tests/tool-result-content.test.ts

✅ Files skipped from review due to trivial changes (2)

.changeset/red-pillows-cheer.md
packages/ai-react-ui/src/tool-result-content.ts

🚧 Files skipped from review as they are similar to previous changes (1)

packages/ai-react-ui/src/chat-message.tsx

tombeckenham

Thank you for this one

fix(chat-message): update part type to UIMessage['parts'][number] and…

aadbc45

… ensure tool result content is handled correctly

tombeckenham self-requested a review June 24, 2026 07:19

tombeckenham self-assigned this Jun 24, 2026

coderabbitai Bot reviewed Jun 24, 2026

View reviewed changes

tombeckenham approved these changes Jun 24, 2026

View reviewed changes

tombeckenham merged commit 0278a90 into TanStack:main Jun 24, 2026
10 checks passed

github-actions Bot mentioned this pull request Jun 24, 2026

ci: Version Packages #814

Merged

coderabbitai Bot mentioned this pull request Jun 26, 2026

ci: type-check examples/** and testing/** to catch call-site regressions (#820) #857

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(chat-message): update part type to UIMessage['parts'][number] and…#783

fix(chat-message): update part type to UIMessage['parts'][number] and…#783
tombeckenham merged 2 commits into
TanStack:mainfrom
harshlocham:fix/react-ui-chat-message-types

harshlocham commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (2 warnings)

Uh oh!

nx-cloud Bot commented Jun 24, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

tombeckenham left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

harshlocham commented Jun 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (2 warnings)

Uh oh!

nx-cloud Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

tombeckenham left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

harshlocham commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

nx-cloud Bot commented Jun 24, 2026 •

edited

Loading

pkg-pr-new Bot commented Jun 24, 2026 •

edited

Loading