phoenix-oss/llama-stack-mirror
0
0
Fork 1
mirror of https://github.com/meta-llama/llama-stack.git synced 2025-12-11 19:56:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI enhancements

Browse source 
rh-pre-commit.version: 2.3.2
rh-pre-commit.check-secrets: ENABLED
This commit is contained in:
Antony Sallas 2025-10-28 18:29:23 +08:00
parent 5ef6ccf90e
commit 9964287698
7 changed files with 2688 additions and 1584 deletions
Download patch file Download diff file Expand all files Collapse all files

216
llama_stack/ui/components/chat-playground/thinking-block.tsx Normal file
View file

@ -0,0 +1,216 @@
/**
* ThinkingBlock Component
* Displays LLM thinking/reasoning content in a collapsible, animated block
* Shows duration, pulsing animation during streaming, and expandable content
*/
"use client";
import { useState } from "react";
import { ChevronDown, Brain } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { cn } from "@/lib/utils";
export interface ThinkingPart {
type: "thinking";
content: string;
startTime?: number;
endTime?: number;
}
interface ThinkingBlockProps {
part: ThinkingPart;
isStreaming?: boolean;
}
/**
* Formats duration in milliseconds to human-readable format
*/
function formatDuration(ms: number): string {
if (ms < 1000) {
return `${ms}ms`;
}
const seconds = (ms / 1000).toFixed(1);
return `${seconds}s`;
}
/**
* Calculates duration from start and end times
*/
function calculateDuration(
startTime?: number,
endTime?: number
): number | null {
if (!startTime) return null;
const end = endTime || Date.now();
return end - startTime;
}
export function ThinkingBlock({
part,
isStreaming = false,
}: ThinkingBlockProps) {
const [isOpen, setIsOpen] = useState(false);
const duration = calculateDuration(part.startTime, part.endTime);
const isComplete = !!part.endTime;
const isPulsing = isStreaming || !isComplete;
return (
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="my-2 rounded-lg border border-purple-200 bg-purple-50 dark:border-purple-800 dark:bg-purple-950/30"
>
<CollapsibleTrigger className="flex w-full items-center justify-between px-4 py-2.5 hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors rounded-lg">
<div className="flex items-center gap-2">
{/* Pulsing Brain Icon */}
<motion.div
animate={
isPulsing
? {
scale: [1, 1.1, 1],
opacity: [0.7, 1, 0.7],
}
: { scale: 1, opacity: 0.8 }
}
transition={
isPulsing
? {
duration: 1.5,
repeat: Infinity,
ease: "easeInOut",
}
: {}
}
>
<Brain className="h-4 w-4 text-purple-600 dark:text-purple-400" />
</motion.div>
{/* Label */}
<span className="text-sm font-medium text-purple-700 dark:text-purple-300">
{isPulsing ? "Thinking..." : "Thought Process"}
</span>
{/* Duration Badge */}
{duration !== null && (
<motion.span
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
className="text-xs font-mono bg-purple-200 dark:bg-purple-800 text-purple-800 dark:text-purple-200 px-2 py-0.5 rounded-full"
>
{formatDuration(duration)}
</motion.span>
)}
{/* Streaming Indicator Dots */}
{isPulsing && (
<motion.div
className="flex gap-1"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
{[0, 1, 2].map(i => (
<motion.div
key={i}
className="w-1 h-1 bg-purple-500 dark:bg-purple-400 rounded-full"
animate={{
y: [0, -4, 0],
}}
transition={{
duration: 0.6,
repeat: Infinity,
delay: i * 0.15,
ease: "easeInOut",
}}
/>
))}
</motion.div>
)}
</div>
{/* Chevron Toggle Icon */}
<motion.div
animate={{ rotate: isOpen ? 180 : 0 }}
transition={{ duration: 0.2 }}
>
<ChevronDown className="h-4 w-4 text-purple-600 dark:text-purple-400" />
</motion.div>
</CollapsibleTrigger>
<AnimatePresence initial={false}>
{isOpen && (
<CollapsibleContent forceMount>
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{
height: "auto",
opacity: 1,
transition: {
height: {
duration: 0.3,
ease: "easeOut",
},
opacity: {
duration: 0.2,
delay: 0.1,
},
},
}}
exit={{
height: 0,
opacity: 0,
transition: {
height: {
duration: 0.3,
ease: "easeIn",
},
opacity: {
duration: 0.2,
},
},
}}
className="overflow-hidden"
>
<div className="px-4 pb-3 pt-1">
{/* Content Area */}
<div
className={cn(
"rounded-md px-3 py-2.5 text-sm",
"bg-white dark:bg-purple-950/50",
"border border-purple-200 dark:border-purple-800",
"font-mono text-purple-900 dark:text-purple-100",
"whitespace-pre-wrap break-words"
)}
>
{part.content || (
<span className="text-purple-400 dark:text-purple-600 italic">
Thinking in progress...
</span>
)}
</div>
{/* Timestamp Information (if available) */}
{part.startTime && (
<div className="mt-2 text-xs text-purple-600 dark:text-purple-400 font-mono">
Started: {new Date(part.startTime).toLocaleTimeString()}
{part.endTime && (
<span className="ml-3">
Ended: {new Date(part.endTime).toLocaleTimeString()}
</span>
)}
</div>
)}
</div>
</motion.div>
</CollapsibleContent>
)}
</AnimatePresence>
</Collapsible>
);
}