Ideas on ways to show animated cursor during data streaming on UI?

[dosstx]

Anyone got any ideas on how we can get an animated cursor/prompt element when the message is being streamed to the client? For example, on chatGPT"s UI, there is a white square appended to the end of the message stream when it is being written:

Extra points if you use Tailwind!

[MaxLeiter]

You should be able to do something like this in your markdown renderer:

      code({ node, inline, className, children, ...props }) {
                    if (children.length) {
                        children[children.length - 1] = <div className="animate-pulse">▍</div>
                    }
       }

your real code should handle edge cases / ensuring you can assign to children without overriding an element

[dosstx]

Thanks! I struggled with this one, did not quite work for me. I'll keep working on it.

[github-actions[bot]]

This discussion was automatically locked because it has not been updated in over 30 days. If you still have questions about this topic, please ask us at community.vercel.com/ai-sdk