Conversation
…ons for graph data handling
🦋 Changeset detectedLatest commit: ff3580d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughThis change adds a React integration for the AI SDK: a new Changes
Sequence DiagramsequenceDiagram
participant Client as React Component
participant Hook as useGraphChat Hook
participant Transport as Chat Transport
participant Server as AI Server
participant Data as Data Handler
Client->>Hook: initialize(options)
Hook->>Transport: create with prepareSendMessagesRequest (uses stripGraphDataParts)
Client->>Hook: send message
Hook->>Transport: prepareSendMessagesRequest
Transport->>Transport: strip graph data parts
Transport->>Server: send cleaned message
Server-->>Hook: stream response (parts)
Hook->>Data: handleData(parts)
alt data-state
Data->>Hook: update graph state
Hook->>Client: call onStateChange & expose state
else data-node-start / data-node-end
Data->>Hook: update activeNodes
Hook->>Client: call onNodeStart/onNodeEnd & expose activeNodes
else data-node-suspense
Data->>Client: call onNodeSuspense
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/react.ts`:
- Around line 54-75: handleData closes over activeNodes causing stale updates;
replace direct references to activeNodes in the callback with functional state
updates so the latest state is used without adding activeNodes to the dependency
array: in the 'data-node-start' branch use setActiveNodes(prev => [...prev,
nodeId]) and in the 'data-node-end' branch use setActiveNodes(prev =>
prev.filter(node => node !== nodeId)); keep the existing useCallback
dependencies ([onStateChange, onNodeStart, onNodeEnd, onNodeSuspense]) and
ensure handleData, setActiveNodes, activeNodes, onNodeStart, onNodeEnd are the
referenced symbols when making the change.
🧹 Nitpick comments (3)
src/utils.ts (1)
17-22: Type assertion may not preserve all properties of extended UIMessage types.The spread operator
{...msg}creates a shallow copy, but theas T[]assertion could hide type mismatches ifTextendsUIMessagewith additional required properties that aren't being properly preserved. This is generally safe for this use case since you're only modifyingparts, but worth noting.src/react.ts (2)
101-105: Type assertion may indicate API mismatch.The
as UseChatOptions<UI_MESSAGE>cast suggests the types don't align perfectly. This could hide type errors if the APIs evolve. Consider investigating whether the types can be reconciled without the assertion, or add a comment explaining why it's necessary.
68-72: Minor: Remove extra blank line.There's an unnecessary blank line before the closing brace of the
data-node-suspenseblock.Suggested fix
} else if (dataPart.type === 'data-node-suspense') { const { nodeId, data } = dataPart.data as { nodeId: string; data: unknown } onNodeSuspense?.(nodeId, data) - }
…er state management
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/react.ts`:
- Around line 77-105: The prepareSendMessagesRequest currently returns only {
body: ... } and must include the required api field (and optional
headers/credentials) per DefaultChatTransport; update the
prepareSendMessagesRequest inside the useMemo that creates DefaultChatTransport
so both the customPrepareRequest branch and the default branch return an object
shaped { api, headers?, credentials?, body? }—e.g., pull api from
requestOptions.api or fallback to transportOptions.api (or a configured default)
and include it in the returned object, ensuring stripGraphDataParts is still
applied to messages and that customPrepareRequest is passed/returned an object
that contains api as well.
| const transport = useMemo(() => { | ||
| return new DefaultChatTransport<UI_MESSAGE>({ | ||
| ...transportOptions, | ||
| prepareSendMessagesRequest: (requestOptions) => { | ||
| const strippedMessages = stripGraphDataParts(requestOptions.messages) | ||
|
|
||
| if (customPrepareRequest) { | ||
| return customPrepareRequest({ | ||
| ...requestOptions, | ||
| messages: strippedMessages, | ||
| }) | ||
| } | ||
|
|
||
| return { | ||
| body: { | ||
| id: requestOptions.id, | ||
| messages: strippedMessages, | ||
| trigger: requestOptions.trigger, | ||
| }, | ||
| } | ||
| }, | ||
| }) | ||
| }, [transportOptions, customPrepareRequest]) | ||
|
|
||
| const chatHelpers = useChat<UI_MESSAGE>({ | ||
| ...chatInitOptions, | ||
| transport, | ||
| onData: handleData, | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
ai package v6.0.48 DefaultChatTransport prepareSendMessagesRequest return shape
💡 Result:
prepareSendMessagesRequest should return an object describing the HTTP request — typically some subset of { api, headers, credentials, body } (e.g. { api: string, headers?: HeadersInit, credentials?: RequestCredentials, body?: Record<string,any> }). [1][2]
Sources:
- AI SDK (v6) Transport docs — DefaultChatTransport / prepareSendMessagesRequest. [1]
- AI SDK transport examples / migration docs showing prepareSendMessagesRequest returning { body, headers, credentials, api }. [2]
Transport implementation incomplete—missing api field in prepareSendMessagesRequest return.
The prepareSendMessagesRequest should return { api, headers?, credentials?, body? } according to DefaultChatTransport v6.0.48. The current code returns only { body: {...} }, omitting the api field which is required to specify the endpoint. While the message stripping and delegation flow are solid, add the api field (or ensure it's handled elsewhere in transportOptions) to complete the transport configuration.
🤖 Prompt for AI Agents
In `@src/react.ts` around lines 77 - 105, The prepareSendMessagesRequest currently
returns only { body: ... } and must include the required api field (and optional
headers/credentials) per DefaultChatTransport; update the
prepareSendMessagesRequest inside the useMemo that creates DefaultChatTransport
so both the customPrepareRequest branch and the default branch return an object
shaped { api, headers?, credentials?, body? }—e.g., pull api from
requestOptions.api or fallback to transportOptions.api (or a configured default)
and include it in the returned object, ensuring stripGraphDataParts is still
applied to messages and that customPrepareRequest is passed/returned an object
that contains api as well.
1 participant
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.