fix: loading shared sessions (#3607)

This commit is contained in:
Zane
2025-07-23 12:52:37 -07:00
committed by GitHub
parent 8c8da7cf94
commit 229a49bfdc
2 changed files with 79 additions and 77 deletions
@@ -1,7 +1,7 @@
import React from 'react';
import { Calendar, MessageSquareText, Folder, Target } from 'lucide-react';
import { Calendar, MessageSquareText, Folder, Target, LoaderCircle, Share2 } from 'lucide-react';
import { type SharedSessionDetails } from '../../sharedSessions';
import { SessionHeaderCard, SessionMessages } from './SessionViewComponents';
import { SessionMessages } from './SessionViewComponents';
import { formatMessageTimestamp } from '../../utils/timeUtils';
import { MainPanelLayout } from '../Layout/MainPanelLayout';
@@ -9,53 +9,73 @@ interface SharedSessionViewProps {
session: SharedSessionDetails | null;
isLoading: boolean;
error: string | null;
onBack: () => void;
onRetry: () => void;
}
// Custom SessionHeader component matching SessionHistoryView style
const SessionHeader: React.FC<{
children: React.ReactNode;
title: string;
}> = ({ children, title }) => {
return (
<div className="flex flex-col pb-8 border-b">
<h1 className="text-4xl font-light mb-4 pt-6">{title}</h1>
<div className="flex items-center">{children}</div>
</div>
);
};
const SharedSessionView: React.FC<SharedSessionViewProps> = ({
session,
isLoading,
error,
onBack,
onRetry,
}) => {
return (
<MainPanelLayout>
<div className="flex flex-col h-full">
<div className="relative flex items-center h-14 w-full"></div>
{/* Top Row - back, info (fixed) */}
<SessionHeaderCard onBack={onBack}>
{/* Session info row */}
<div className="ml-8">
<h1 className="text-lg text-textStandardInverse">
{session ? session.description : 'Shared Session'}
</h1>
<div className="flex items-center text-sm text-textSubtle mt-1 space-x-5">
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1" />
{session ? formatMessageTimestamp(session.messages[0]?.created) : 'Unknown'}
</span>
<span className="flex items-center">
<MessageSquareText className="w-4 h-4 mr-1" />
{session ? session.message_count : 0}
</span>
{session && session.total_tokens !== null && (
<span className="flex items-center">
<Target className="w-4 h-4 mr-1" />
{session.total_tokens.toLocaleString()}
</span>
)}
</div>
<div className="flex items-center text-sm text-textSubtle space-x-5">
<span className="flex items-center">
<Folder className="w-4 h-4 mr-1" />
{session ? session.working_dir : 'Unknown'}
</span>
</div>
<div className="flex-1 flex flex-col min-h-0 px-8">
<div className="flex items-center py-4 border-b border-border-subtle mb-6">
<div className="flex items-center text-text-muted">
<Share2 className="w-5 h-5 mr-2" />
<span className="text-sm font-medium">Shared Session</span>
</div>
</SessionHeaderCard>
</div>
<SessionHeader title={session ? session.description : 'Shared Session'}>
<div className="flex flex-col">
{!isLoading && session && session.messages.length > 0 ? (
<>
<div className="flex items-center text-text-muted text-sm space-x-5 font-mono">
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1" />
{formatMessageTimestamp(session.messages[0]?.created)}
</span>
<span className="flex items-center">
<MessageSquareText className="w-4 h-4 mr-1" />
{session.message_count}
</span>
{session.total_tokens !== null && (
<span className="flex items-center">
<Target className="w-4 h-4 mr-1" />
{session.total_tokens.toLocaleString()}
</span>
)}
</div>
<div className="flex items-center text-text-muted text-sm mt-1 font-mono">
<span className="flex items-center">
<Folder className="w-4 h-4 mr-1" />
{session.working_dir}
</span>
</div>
</>
) : (
<div className="flex items-center text-text-muted text-sm">
<LoaderCircle className="w-4 h-4 mr-2 animate-spin" />
<span>Loading session details...</span>
</div>
)}
</div>
</SessionHeader>
<SessionMessages
messages={session?.messages || []}