make reliability and UI improvements to the understand page experience

e.g., don't throw an error if abstract not found. don't show loading
skeletons when streaming messages. improve type checking for streamed
errors.

Author: sabaimran

client/src/app/(main)/understand/page.tsx

@@ -33,10 +33,10 @@ import {
 import { useAuth } from '@/lib/auth';
 import { PaperItem } from "@/lib/schema";
 import ReferencePaperCards from '@/components/ReferencePaperCards';
-import { Skeleton } from '@/components/ui/skeleton';
 import Link from 'next/link';
 import { TopicBubbles } from '@/components/TopicBubbles';
 import { AnimatedGradientText } from "@/components/magicui/animated-gradient-text";
+import { ChatHistorySkeleton } from "@/components/ChatHistorySkeleton";
 
 interface ChatRequestBody {
     user_query: string;
@@ -73,6 +73,7 @@ function UnderstandPageContent() {
     const [statusMessage, setStatusMessage] = useState('');
 
     const [isConversationLoading, setIsConversationLoading] = useState(false);
+    const [isSessionLoading, setIsSessionLoading] = useState(true);
 
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const inputMessageRef = useRef<HTMLTextAreaElement>(null);
@@ -129,6 +130,7 @@ function UnderstandPageContent() {
             toast.error("Failed to load conversation history.");
         } finally {
             setIsConversationLoading(false);
+            setIsSessionLoading(false); // New line
         }
     }, []);
 
@@ -143,6 +145,7 @@ function UnderstandPageContent() {
             setMessages([]);
             setConversationId(null);
             setIsCentered(true);
+            setIsSessionLoading(false);
         }
     }, [searchParams, user, fetchMessages, isStreaming]);
 
@@ -297,19 +300,24 @@ function UnderstandPageContent() {
 
                     try {
                         const parsedChunk = JSON.parse(event.trim());
-                        const chunkType = parsedChunk.type;
-                        const chunkContent = parsedChunk.content;
-
-                        if (chunkType === 'content') {
-                            accumulatedContent += chunkContent;
-                            setStreamingChunks(prev => [...prev, chunkContent]);
-                        } else if (chunkType === 'references') {
-                            references = chunkContent;
-                            setStreamingReferences(chunkContent);
-                        } else if (chunkType === 'status') {
-                            setStatusMessage(chunkContent);
-                        } else {
-                            console.warn(`Unknown chunk type: ${chunkType}`);
+
+                        if (parsedChunk && typeof parsedChunk === 'object' && 'type' in parsedChunk) {
+                            const chunkType = parsedChunk.type;
+                            const chunkContent = parsedChunk.content;
+
+                            if (chunkType === 'content') {
+                                accumulatedContent += chunkContent;
+                                setStreamingChunks(prev => [...prev, chunkContent]);
+                            } else if (chunkType === 'references') {
+                                references = chunkContent;
+                                setStreamingReferences(chunkContent);
+                            } else if (chunkType === 'status') {
+                                setStatusMessage(chunkContent);
+                            } else {
+                                console.warn(`Unknown chunk type: ${chunkType}`);
+                            }
+                        } else if (parsedChunk) {
+                            console.warn('Received unexpected chunk:', parsedChunk);
                         }
                     } catch (error) {
                         console.error('Error processing event:', error, 'Raw event:', event);
@@ -351,6 +359,22 @@ function UnderstandPageContent() {
         setCurrentMessage(e.target.value);
     }, []);
 
+    useEffect(() => {
+        const focusInput = () => {
+            if (inputMessageRef.current &&
+                !isStreaming &&
+                papers.length > 0 &&
+                !chatCreditLimitReached) {
+                // Small delay to ensure DOM is ready
+                setTimeout(() => {
+                    inputMessageRef.current?.focus();
+                }, 100);
+            }
+        };
+
+        focusInput();
+    }, [papers.length, isStreaming, chatCreditLimitReached]); // Dependencies that affect focusability
+
     const memoizedMessages = useMemo(() => {
         return messages.map((msg, index) => (
             <div
@@ -417,7 +441,7 @@ function UnderstandPageContent() {
                 </div>
             </div>
         ));
-    }, [messages, user, handleCitationClick]);
+    }, [messages, user, handleCitationClick, papers]);
 
     const [isCentered, setIsCentered] = useState(true);
 
@@ -435,23 +459,23 @@ function UnderstandPageContent() {
         <div className="flex flex-col w-full h-[calc(100vh-64px)]">
             <div className={`${isCentered ? 'flex-0' : 'flex-1'} w-full overflow-y-auto`} ref={messagesContainerRef}>
                 <div className="mx-auto max-w-3xl space-y-4 p-4 w-full">
-                    {papers.length === 0 && messages.length === 0 && !authLoading && (
-                        <div className="text-center p-8">
-                            <h2 className="text-xl font-semibold mb-2">No Papers Found</h2>
-                            <p className="text-gray-600 dark:text-gray-400 mb-4">
-                                You need to have at least one paper indexed to ask questions.
-                            </p>
-                            <Button onClick={() => window.location.href = '/'}>Index a Paper</Button>
-                        </div>
-                    )}
-                    {isConversationLoading && (
-                        <div className="space-y-4">
-                            <Skeleton className="h-16 w-full" />
-                            <Skeleton className="h-16 w-full" />
-                            <Skeleton className="h-16 w-full" />
-                        </div>
+                    {isSessionLoading ? (
+                        <ChatHistorySkeleton />
+                    ) : (
+                        <>
+                            {papers.length === 0 && messages.length === 0 && !authLoading && (
+                                <div className="text-center p-8">
+                                    <h2 className="text-xl font-semibold mb-2">No Papers Found</h2>
+                                    <p className="text-gray-600 dark:text-gray-400 mb-4">
+                                        You need to have at least one paper indexed to ask questions.
+                                    </p>
+                                    <Button onClick={() => window.location.href = '/'}>Index a Paper</Button>
+                                </div>
+                            )}
+
+                            {messages.length > 0 && memoizedMessages}
+                        </>
                     )}
-                    {messages.length > 0 && memoizedMessages}
                     {
                         isStreaming && streamingChunks.length > 0 && (
                             <div className="relative group prose dark:prose-invert !max-w-full rounded-lg w-full text-primary dark:text-primary-foreground">
@@ -559,9 +583,9 @@ function UnderstandPageContent() {
                     )}
                 </form>
                 {
-                    isCentered && !currentMessage && (
+                    isCentered && (
                         <div className="absolute bottom-0 left-0 w-full">
-                            <TopicBubbles />
+                            <TopicBubbles isVisible={currentMessage.length === 0} />
                         </div>
                     )
                 }

client/src/app/globals.css

@@ -191,17 +191,6 @@
   animation: float 3s ease-in-out infinite;
 }
 
-.horizontal-scroll-container {
-  overflow-x: auto;
-  white-space: nowrap;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.horizontal-scroll-container::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, and Opera */
-}
-
 .relative.w-full.max-w-2xl::after {
     content: '';
     position: absolute;
@@ -212,3 +201,37 @@
     background: linear-gradient(to left, var(--background), transparent);
     pointer-events: none;
 }
+
+.animate-marquee {
+  animation: marquee var(--duration) linear infinite;
+}
+
+.animate-marquee-vertical {
+  animation: marquee-vertical var(--duration) linear infinite;
+}
+
+.animation-direction-reverse {
+  animation-direction: reverse;
+}
+
+.group:hover .group-hover-paused {
+    animation-play-state: paused;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--gap)));
+  }
+}
+
+@keyframes marquee-vertical {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(calc(-100% - var(--gap)));
+  }
+}

client/src/components/ChatHistorySkeleton.tsx

@@ -0,0 +1,28 @@
+
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ChatHistorySkeleton() {
+    return (
+        <div className="space-y-4 p-4">
+            <div className="flex items-end gap-2">
+                <div className="flex-1 space-y-2">
+                    <Skeleton className="h-6 w-1/4" />
+                    <Skeleton className="h-4 w-3/4" />
+                </div>
+            </div>
+            <div className="flex items-end gap-2 justify-end">
+                <div className="flex-1 space-y-2 max-w-md">
+                    <Skeleton className="h-6 w-1/4 ml-auto" />
+                    <Skeleton className="h-4 w-full" />
+                </div>
+            </div>
+            <div className="flex items-end gap-2">
+                <div className="flex-1 space-y-2">
+                    <Skeleton className="h-6 w-1/4" />
+                    <Skeleton className="h-4 w-1/2" />
+                    <Skeleton className="h-4 w-5/6" />
+                </div>
+            </div>
+        </div>
+    );
+}

client/src/components/TopicBubbles.tsx

@@ -20,7 +20,7 @@ const TopicCard = ({ topic }: { topic: string }) => {
     );
 };
 
-export function TopicBubbles() {
+export function TopicBubbles({ isVisible }: { isVisible: boolean }) {
     const [topics, setTopics] = useState<string[]>([]);
 
     useEffect(() => {
@@ -40,13 +40,16 @@ export function TopicBubbles() {
     const secondRow = topics.slice(topics.length / 2);
 
     return (
-        <div className="relative flex h-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background py-2">
-            <Marquee pauseOnHover className="[--duration:20s]">
+        <div className={cn(
+            "relative flex h-full flex-col items-center justify-center overflow-hidden rounded-lg bg-background py-2 transition-opacity duration-500",
+            isVisible ? "opacity-100" : "opacity-0"
+        )}>
+            <Marquee pauseOnHover className="[--duration:80s]">
                 {firstRow.map((topic) => (
                     <TopicCard topic={topic} key={topic} />
                 ))}
             </Marquee>
-            <Marquee reverse pauseOnHover className="[--duration:20s]">
+            <Marquee pauseOnHover reverse className="[--duration:80s]">
                 {secondRow.map((topic) => (
                     <TopicCard topic={topic} key={topic} />
                 ))}

client/src/components/magicui/marquee.tsx

@@ -61,8 +61,8 @@ export function Marquee({
             className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
               "animate-marquee flex-row": !vertical,
               "animate-marquee-vertical flex-col": vertical,
-              "group-hover:[animation-play-state:paused]": pauseOnHover,
-              "[animation-direction:reverse]": reverse,
+              "group-hover-paused": pauseOnHover,
+              "animation-direction-reverse": reverse,
             })}
           >
             {children}

server/app/llm/tools/file_tools.py

@@ -224,8 +224,6 @@ def read_abstract(paper_id: str, current_user: CurrentUser, db: Session) -> str:
 
     abstract = paper.abstract
     if not abstract:
-        raise ValueError("Abstract not found")
+        return f"Abstract for {paper.title} not found"
 
-    return (
-        f"Abstract:\n\n{abstract.strip()}\n\n" if abstract else "No abstract available."
-    )
+    return f"Abstract:\n\n{abstract.strip()}\n\n"