Thinking Block
Bloc repliable affichant le raisonnement de l'IA avec prise en charge du streaming. Installez Thinking Block depuis le registre VLLNT UI avec la CLI shadcn.
Quand utiliser ceci dans une application IA
Use Thinking Block to reveal an agent's reasoning or scratchpad separately from its final answer. Collapsible plus streaming support keeps the transcript clean while staying transparent.
Parcourir tous les composants pour agents IABloc repliable affichant le raisonnement de l'IA avec prise en charge du streaming. 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 Thinking Block 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/thinking-block.jsonSource
"use client";
import { useCallback, useEffect, useId, useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import { cn } from "../../lib/utils";
export type ThinkingBlockProps = {
className?: string;
/** Whether the content is still streaming. */
isStreaming?: boolean;
/** The thinking text content to display. */
thinking: string;
};
/** Collapsible thinking block with streaming support. */
export function ThinkingBlock({
className,
isStreaming = false,
thinking,
}: ThinkingBlockProps) {
const [isExpanded, setIsExpanded] = useState(() => isStreaming);
const contentId = useId();
// Auto-open when streaming starts
useEffect(() => {
if (isStreaming) {
requestAnimationFrame(() => {
setIsExpanded(true);
});
}
}, [isStreaming]);
const toggleExpanded = useCallback(() => {
setIsExpanded((previous) => !previous);
}, []);
return (
<div className={cn("mb-2", className)}>
<button
aria-controls={contentId}
aria-expanded={isExpanded}
className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
onClick={toggleExpanded}
type="button"
>
{isExpanded ? (
<ChevronDown className="size-3" />
) : (
<ChevronRight className="size-3" />
)}
<span>
Thinking
{isStreaming ? (
<span className="ml-1 animate-pulse">…</span>
) : null}
</span>
</button>
{isExpanded ? (
<div
className="mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto"
id={contentId}
>
{thinking}
{isStreaming ? <span className="animate-pulse">|</span> : null}
</div>
) : null}
</div>
);
}
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.