ToolInput crashes the tree while tool input is streaming (input is undefined, CodeBlock calls code.split)

Aperta Adatta ai principianti
#490 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia in tool.tsx da ToolInput e segui il relativo input fino a CodeBlockContent in code-block.tsx, in particolare createRawTokens e useMemo. Riproduci la sequenza di streaming dell’input con un input undefined, quindi verifica che la scheda dello strumento e la chat circostante continuino a essere visualizzate fino a input-available senza un errore relativo a split.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Components: tool.tsx (ToolInput), code-block.tsx (CodeBlockContent)

What happens

While a tool part is in input-streaming, part.input is undefined. ToolInput renders <CodeBlock code={JSON.stringify(input, null, 2)} /> (tool.tsx:125); JSON.stringify(undefined) returns undefined, and createRawTokens calls code.split("\n") on it (code-block.tsx:171, from the useMemo at :384):

TypeError: Cannot read properties of undefined (reading 'split')
  createRawTokens   src/components/ai-elements/code-block.tsx:171
  CodeBlockContent  src/components/ai-elements/code-block.tsx:384

React unmounts the tree, so the whole chat stops rendering, not just the tool card. The props type allows it: ToolPart["input"] is unknown.

Repro

Render a tool part in every state:

<Tool>
  <ToolHeader type="dynamic-tool" state={part.state} toolName={part.toolName} />
  <ToolContent>
    <ToolInput input={part.input} />
    <ToolOutput output={part.output} errorText={part.errorText} />
  </ToolContent>
</Tool>

and stream a tool call whose input arrives in deltas. Observed stream: tool-input-start → tool-input-delta → tool-input-available; the crash happens on the render between the first two.

Observed with @ai-sdk/langchain 3.0.99, ai 7.0.99, @ai-sdk/react 4.0.102, React 19.3.0, Vite 8.3.0, components added from the @ai-elements registry on 2026-09-13. The same code is on main today. The throw is in render code, so the framework should not matter.

Workaround

Render ToolInput only once the input exists: {part.input !== undefined && <ToolInput input={part.input} />}.

Possible fix

Return null (or a pending placeholder) from ToolInput when input === undefined, or make CodeBlock tolerate a non-string code.

Lingua principale
TypeScript
Stelle
2.4k
Fork
283
Merge medio
32m
PR unite (30g)
1

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di vercel/ai-elements

Tutte le issue di vercel/ai-elements

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.