hide references

backend/Dockerfile

@@ -1,17 +1,11 @@
-
 FROM python:3.13
 
-
 WORKDIR /code
 
-
 COPY ./requirements.txt /code/requirements.txt
 
-
 RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
 
-
 COPY ./app /code/app
 
-
 CMD ["fastapi", "run", "app/main.py", "--port", "80"]

frontend/src/components/ChatMessage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Youtube, Clock, ArrowUpRight } from 'lucide-react';
 import { Message } from '../types';
+import References from './References';
 
 interface ChatMessageProps {
     message: Message;
@@ -34,30 +34,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
                 </div>
 
                 {/* References section */}
-                {message.references && message.references.length > 0 && (
-                    <div className="mt-4 space-y-2 pt-4 border-t border-gray-100">
-                        <div className="text-xs font-medium text-gray-500">References:</div>
-                        {message.references.map((ref, idx) => (
-                            <div key={idx} className="bg-gray-50 rounded p-2 text-sm">
-                                <div className="flex items-center space-x-2 text-xs text-gray-500 mb-1">
-                                    <Youtube size={12} />
-                                    <span>{new URL(ref.video_url).searchParams.get('v')}</span> {/* TODO Get the video name not the url */}
-                                    <Clock size={12} />
-                                    <span>{ref.timestamp}</span>
-                                    <a
-                                        href={ref.video_url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="flex items-center text-blue-600 hover:text-blue-800"
-                                    >
-                                        <ArrowUpRight size={12} />
-                                        <span>Watch</span>
-                                    </a>
-                                </div>
-                                <div className="text-gray-700">{ref.text}</div>
-                            </div>
-                        ))}
-                    </div>
+                {message.references && message.type === 'assistant' && (
+                    <References references={message.references} />
                 )}
             </div>
         </div>

frontend/src/components/ConversationList.tsx

@@ -1,8 +1,7 @@
-// components/ConversationList.tsx
 import React from 'react';
 import { MessageCircle, Clock } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
-import { Conversation, Message } from '../types';
+import { Conversation } from '../types';
 
 interface ConversationListProps {
     conversations: Conversation[];
@@ -20,17 +19,16 @@ const ConversationList: React.FC<ConversationListProps> = ({
             <div className="px-4 py-2 text-sm text-gray-600">
                 Ask questions about the video content. Get answers with direct references and timestamps.
             </div>
-            
+
             <div className="space-y-1">
                 {conversations.map((conv) => (
                     <button
                         key={conv.conversation_id}
                         onClick={() => onSelectConversation(conv.conversation_id)}
-                        className={`w-full px-4 py-3 text-left transition-colors ${
-                            activeConversation === conv.conversation_id
+                        className={`w-full px-4 py-3 text-left transition-colors ${activeConversation === conv.conversation_id
                                 ? 'bg-green-50 border-l-2 border-green-600'
                                 : 'hover:bg-gray-50'
-                        }`}
+                            }`}
                     >
                         <div className="flex items-center gap-2 mb-1">
                             <MessageCircle className="w-4 h-4 text-gray-500" />

frontend/src/components/References.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Reference } from "../types";
+import { ChevronDown, ChevronUp, Youtube, Clock, ArrowUpRight } from 'lucide-react';
+
+const References: React.FC<{ references: Reference[] }> = ({ references }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const PREVIEW_COUNT = 1;  // Number of references to show in preview
+
+    if (!references || references.length === 0) return null;
+
+    const shouldCollapse = references.length > PREVIEW_COUNT;
+    const displayedReferences = isExpanded ? references : references.slice(0, PREVIEW_COUNT);
+
+    return (
+      <div className="mt-4 pt-4 border-t border-gray-100">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs font-medium text-gray-500">References:</span>
+          {shouldCollapse && (
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800"
+            >
+              {isExpanded ? (
+                <>
+                  <ChevronUp className="w-4 h-4" />
+                  Show less
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="w-4 h-4" />
+                  Show {references.length - PREVIEW_COUNT} more
+                </>
+              )}
+            </button>
+          )}
+        </div>
+
+        <div className={`space-y-2 ${!isExpanded && 'max-h-32 overflow-hidden'}`}>
+          {displayedReferences.map((ref, idx) => (
+            <div 
+              key={idx} 
+              className="bg-gray-50 rounded p-2 text-xs"
+            >
+              <div className="flex items-center gap-2 text-gray-500 mb-1">
+                <Youtube className="w-3 h-3" />
+                <span>{new URL(ref.video_url).searchParams.get('v')}</span>
+                <Clock className="w-3 h-3" />
+                <span>{ref.timestamp}</span>
+                <a 
+                  href={ref.video_url} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-1 text-blue-600 hover:text-blue-800 ml-auto"
+                >
+                  <ArrowUpRight className="w-3 h-3" />
+                  <span>Watch</span>
+                </a>
+              </div>
+              <div className="text-gray-700">
+                {ref.text}
+              </div>
+            </div>
+          ))}
+
+          {!isExpanded && shouldCollapse && (
+            <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent" />
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  export default References;

frontend/src/components/SampleQuestions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HelpCircle, ArrowRight, Tag } from 'lucide-react';
+import { Tag } from 'lucide-react';
 import { FollowUpQuestion } from '../types';
 
 interface SampleQuestionsProps {