Feature Request: Streaming Chunk Animation

[Rajaniraiyn]

Hey team,

Big thanks for the work on assistant-ui! I’ve been using it for a while, and it’s awesome.

I had an idea that could make it even cooler: adding a streaming chunk animation (like a fade-in for chunks) similar to what Perplexity and Gemini web apps do. It makes the user experience super smooth and engaging.

Here’s a sample implementation that might help: Perplexity-Style Streaming.

Thanks for considering this! Keep up the great work!

[Yonom]

Hey, I'm very happy to hear that you're liking assistant-ui! :)

Thanks a lot for this suggestion, it's a cool idea!

The way I would go about adding this is as follows:

// implementation
const FadeInText: TextContentPartComponent = ({ part: { text }, status }) => {
  // TODO implement the animation effect here, returning a <span>
}

// usage
const AssistantMessage = () => {
  ...
  <MessagePrimitive.Content components={{ Text: FadeInText }} />
  ...
}

If someone makes a sample implementation that works, I'm happy to add it to the CLI (command does not exist yet):

npx assistant-ui add fade-in-text

[Rajaniraiyn]

Thanks for your prompt response and being open to new additions! I'll try adding one soon.

Is there any specific guideline or best practice I should follow while implementing this feature? Also, do you have any suggestions for libraries or tools that might make the animation smoother?

Thanks again for considering my suggestion!

[Yonom]

I think the Perplexity-Style Streaming example you linked uses framer motion, feel free to use that; I don't mind much, since this is an optional addon added from the CLI, I'm not worried too much about the dependency list.

The existing animations (e. g. for the assistant-modal's window) use tailwindcss-animate: https://github.com/jamiebuilds/tailwindcss-animate

The templates used by the CLI are defined here, you can find a bunch of examples: https://github.com/Yonom/assistant-ui/tree/main/packages/shadcn-registry/registry/assistant-ui

and the registry.ts file links to them: https://github.com/Yonom/assistant-ui/blob/main/packages/shadcn-registry/registry/registry.ts

but I can help with the integration that once we have a basic minimal setup working with assistant-ui

[Yonom]

found another implementation, putting it here for reference

https://ui.aceternity.com/components/text-generate-effect

[Yonom]

Here's another demo

https://assistant-ui-flowtoken-demo.vercel.app/
https://github.com/Yonom/assistant-ui-flowtoken-demo
(using flowtoken - https://github.com/Backless-AI/flowtoken)