Open Rajaniraiyn opened 2 weeks ago
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
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!
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
found another implementation, putting it here for reference
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!