ChatGPT should let you select the newest paragraph even as it streams in

Zach Blume, Dec 14 2023. Read the code on github

Problem

Let's stream text into the following paragraph like ChatGPT does in its most recent paragraph:

Try to select a portion of it as it streams. Your selection disappears each time a new character is appended to the paragraph node.

Here's a GIF:

A gif showing chatGPT losing focus when I select a paragraph as its currently streaming in.

Fix

We can fix this behavior by making each character a React <Fragment/> and by giving it a immutable key:

Now you can select text even as it's streaming in.

Here's a GIF:

A GIF of this page showing that using immutably keyed Fragments fixes this behavior.