AI Streaming Text
Bloc de texte lisible pour la sortie partielle de l'assistant avec un curseur en direct optionnel pendant que les jetons arrivent en flux. Installez AI Streaming Text depuis le registre VLLNT UI avec la CLI shadcn.
Quand utiliser ceci dans une application IA
Use AI Streaming Text for any partial assistant output that arrives token-by-token. The live cursor signals 'still generating' and keeps long responses readable as they stream in.
Parcourir tous les composants pour agents IABloc de texte lisible pour la sortie partielle de l'assistant avec un curseur en direct optionnel pendant que les jetons arrivent en flux. Fait partie de la famille ai dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez AI Streaming Text a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-streaming-text.jsonSource
import { cn } from "../../lib/utils";
export type AIStreamingTextProps = React.ComponentPropsWithoutRef<"div"> & {
/** Cursor glyph shown while streaming. */
cursor?: string;
/** Whether new content is still arriving. */
isStreaming?: boolean;
/** Whether to show the streaming cursor. */
showCursor?: boolean;
/** Text content available from the stream. */
text: string;
};
const AIStreamingText = ({
className,
cursor = "▍",
isStreaming = false,
ref,
showCursor = true,
text,
...props
}: AIStreamingTextProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
aria-live={isStreaming ? "polite" : undefined}
className={cn(
"text-sm leading-6 text-foreground whitespace-pre-wrap",
className,
)}
ref={ref}
{...props}
>
{text}
{isStreaming && showCursor ? (
<span
aria-hidden="true"
className="ml-0.5 inline-block animate-pulse text-muted-foreground"
>
{cursor}
</span>
) : null}
</div>
);
};
AIStreamingText.displayName = "AIStreamingText";
export { AIStreamingText };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.