fucking legend

This commit is contained in:
Adam Cohen Hillel 2025-04-20 17:03:13 +01:00
parent 797b496863
commit bb05dcd600
1 changed files with 22 additions and 8 deletions

View File

@ -228,11 +228,19 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
// Initialize as if user already closed panel to prevent auto-opening // Initialize as if user already closed panel to prevent auto-opening
useEffect(() => { useEffect(() => {
userClosedPanelRef.current = true; userClosedPanelRef.current = true;
// Initially hide the side panel
setIsSidePanelOpen(false);
}, []); }, []);
// Define togglePlayback and resetPlayback functions explicitly // Define togglePlayback and resetPlayback functions explicitly
const togglePlayback = useCallback(() => { const togglePlayback = useCallback(() => {
setIsPlaying(prev => !prev); setIsPlaying(prev => {
if (!prev) {
// When starting playback, show the side panel
setIsSidePanelOpen(true);
}
return !prev;
});
}, []); }, []);
const resetPlayback = useCallback(() => { const resetPlayback = useCallback(() => {
@ -243,6 +251,8 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
setStreamingText(""); setStreamingText("");
setIsStreamingText(false); setIsStreamingText(false);
setCurrentToolCall(null); setCurrentToolCall(null);
// Hide the side panel when resetting
setIsSidePanelOpen(false);
}, []); }, []);
const toggleSidePanel = useCallback(() => { const toggleSidePanel = useCallback(() => {
@ -1414,19 +1424,23 @@ export default function ThreadPage({ params }: { params: Promise<ThreadParams> }
> >
<div className="mx-auto max-w-3xl"> <div className="mx-auto max-w-3xl">
{visibleMessages.length === 0 && !streamingText && !currentToolCall ? ( {visibleMessages.length === 0 && !streamingText && !currentToolCall ? (
<div className="flex flex-col items-center justify-center min-h-[50vh] py-12"> <div className="fixed inset-0 flex flex-col items-center justify-center">
<div className="text-center max-w-md mx-auto"> {/* Gradient overlay */}
<div className="rounded-full bg-primary/10 w-12 h-12 mx-auto flex items-center justify-center mb-4"> <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent dark:from-black/90 dark:via-black/50 dark:to-transparent" />
<div className="text-center max-w-md mx-auto relative z-10 px-4">
<div className="rounded-full bg-primary/10 backdrop-blur-sm w-12 h-12 mx-auto flex items-center justify-center mb-4">
<Play className="h-5 w-5 text-primary" /> <Play className="h-5 w-5 text-primary" />
</div> </div>
<h3 className="text-lg font-medium mb-2">Watch this conversation</h3> <h3 className="text-lg font-medium mb-2 text-white">Watch this agent in action</h3>
<p className="text-sm text-muted-foreground mb-4"> <p className="text-sm text-white/80 mb-4">
This is a shared view-only conversation. Click play to replay the entire conversation with realistic timing. This is a shared view-only agent run. Click play to replay the entire conversation with realistic timing.
</p> </p>
<Button <Button
onClick={togglePlayback} onClick={togglePlayback}
className="flex items-center mx-auto" className="flex items-center mx-auto bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-white/20"
size="lg" size="lg"
variant="outline"
> >
<Play className="h-4 w-4 mr-2" /> <Play className="h-4 w-4 mr-2" />
Start Playback Start Playback