rag related info

phd-advisor-frontend/src/components/MessageBubble.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Reply, Copy, Check, Maximize2 } from 'lucide-react';
+import React, { useState, useRef, useEffect } from 'react';
+import { Reply, Copy, Check, Maximize2, Info, FileText, Hash, Target } from 'lucide-react';
 import { advisors, getAdvisorColors } from '../data/advisors';
 import { useTheme } from '../contexts/ThemeContext';
 
@@ -13,6 +13,8 @@ const MessageBubble = ({
   const { isDark } = useTheme();
   const [showTooltip, setShowTooltip] = useState(null);
   const [copiedStates, setCopiedStates] = useState({});
+  const [showInfoOverlay, setShowInfoOverlay] = useState(false);
+  const overlayRef = useRef(null);
 
   const handleCopy = async (messageId, content) => {
     try {
@@ -33,6 +35,10 @@ const MessageBubble = ({
     if (onExpand) onExpand(messageId, advisorId);
   };
 
+  const handleInfoToggle = () => {
+    setShowInfoOverlay(!showInfoOverlay);
+  };
+
   const showTooltipWithDelay = (tooltipType) => {
     setTimeout(() => setShowTooltip(tooltipType), 500);
   };
@@ -41,6 +47,99 @@ const MessageBubble = ({
     setShowTooltip(null);
   };
 
+  // Close overlay when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (overlayRef.current && !overlayRef.current.contains(event.target)) {
+        setShowInfoOverlay(false);
+      }
+    };
+
+    if (showInfoOverlay) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [showInfoOverlay]);
+
+  // RAG Metadata Component
+  const RagInfoOverlay = ({ ragMetadata, colors }) => {
+    const hasDocuments = ragMetadata?.usedDocuments || false;
+    const chunksUsed = ragMetadata?.chunksUsed || 0;
+    const documentChunks = ragMetadata?.documentChunks || [];
+
+    return (
+      <div 
+        ref={overlayRef}
+        className="rag-info-overlay"
+        style={{ 
+          borderColor: colors.color + '40',
+          backgroundColor: isDark ? '#1f2937' : '#ffffff'
+        }}
+      >
+        <div className="rag-overlay-header" style={{ color: colors.color }}>
+          <Info size={14} />
+          <span>RAG Information</span>
+        </div>
+        
+        <div className="rag-overlay-content">
+          {/* Basic Stats */}
+          <div className="rag-stat-row">
+            <div className="rag-stat-label">Used Documents:</div>
+            <div className={`rag-stat-value ${hasDocuments ? 'positive' : 'negative'}`}>
+              {hasDocuments ? 'Yes' : 'No'}
+            </div>
+          </div>
+
+          <div className="rag-stat-row">
+            <div className="rag-stat-label">Document Chunks:</div>
+            <div className="rag-stat-value">{chunksUsed}</div>
+          </div>
+
+          {/* Document Details */}
+          {hasDocuments && documentChunks.length > 0 && (
+            <div className="rag-documents-section">
+              <div className="rag-section-title">
+                <FileText size={12} />
+                Referenced Sources
+              </div>
+              
+              {documentChunks.map((chunk, index) => (
+                <div key={index} className="rag-document-item">
+                  <div className="rag-document-header">
+                    <span className="rag-filename">
+                      {chunk.metadata?.filename || 'Unknown file'}
+                    </span>
+                    <span className="rag-relevance">
+                      <Target size={10} />
+                      {Math.round((chunk.relevance_score || 0) * 100)}%
+                    </span>
+                  </div>
+                  
+                  {chunk.text && (
+                    <div className="rag-chunk-preview">
+                      {chunk.text.substring(0, 120)}
+                      {chunk.text.length > 120 && '...'}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* No Documents Message */}
+          {!hasDocuments && (
+            <div className="rag-no-documents">
+              <Hash size={12} />
+              <span>This response was generated without referencing uploaded documents.</span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
   if (message.type === 'user') {
     return (
       <div className="user-message-container">
@@ -75,7 +174,8 @@ const MessageBubble = ({
           className="advisor-message-bubble"
           style={{ 
             backgroundColor: colors.bgColor,
-            borderColor: colors.color + '40'
+            borderColor: colors.color + '40',
+            position: 'relative' // For overlay positioning
           }}
         >
           <div className="advisor-message-header">
@@ -169,9 +269,37 @@ const MessageBubble = ({
                     <div className="tooltip">Expand on this response</div>
                   )}
                 </div>
+
+                {/* NEW: Info Button */}
+                <div className="tooltip-container">
+                  <button 
+                    className="action-button"
+                    onClick={handleInfoToggle}
+                    onMouseEnter={() => showTooltipWithDelay('info')}
+                    onMouseLeave={hideTooltip}
+                    style={{ 
+                      color: showInfoOverlay ? colors.color : colors.color,
+                      borderColor: showInfoOverlay ? colors.color : colors.color + '40',
+                      backgroundColor: showInfoOverlay ? colors.color + '20' : 'transparent'
+                    }}
+                  >
+                    <Info size={14} />
+                  </button>
+                  {showTooltip === 'info' && (
+                    <div className="tooltip">RAG Information</div>
+                  )}
+                </div>
               </div>
             </div>
           )}
+
+          {/* RAG Info Overlay */}
+          {showInfoOverlay && (
+            <RagInfoOverlay 
+              ragMetadata={message.ragMetadata} 
+              colors={colors}
+            />
+          )}
         </div>
       </div>
     );

phd-advisor-frontend/src/pages/ChatPage.js

@@ -138,270 +138,245 @@ const ChatPage = ({ onNavigateToHome }) => {
   };
 
   const handleSendMessage = async (inputMessage) => {
-    if (replyingTo) {
-      await handleReplyToAdvisor(inputMessage, replyingTo);
-      return;
-    }
+  if (replyingTo) {
+    await handleReplyToAdvisor(inputMessage, replyingTo);
+    return;
+  }
+
+  const userMessage = {
+    id: generateMessageId(),
+    type: 'user',
+    content: inputMessage,
+    timestamp: new Date()
+  };
+  setMessages(prev => [...prev, userMessage]);
+  
+  setIsLoading(true);
+  setThinkingAdvisors(['system']);
+
+  try {
+    const response = await fetch('http://localhost:8000/chat-sequential', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        user_input: inputMessage
+      }),
+    });
 
-    const userMessage = {
-      id: generateMessageId(),
-      type: 'user',
-      content: inputMessage,
-      timestamp: new Date()
-    };
-    setMessages(prev => [...prev, userMessage]);
-    
-    setIsLoading(true);
-    setThinkingAdvisors(['system']);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
 
-    try {
-      const response = await fetch('http://localhost:8000/chat-sequential', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          user_input: inputMessage
-        }),
-      });
+    const data = await response.json();
+    console.log('Backend response:', data); // Debug log
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+    if (data.type === 'persona_responses' && data.responses) {
+      // Map each advisor response with RAG metadata
+      const advisorMessages = data.responses.map((advisor, index) => ({
+        id: generateMessageId(),
+        type: 'advisor',
+        advisorId: advisor.persona_id,
+        advisorName: advisor.persona_name,
+        content: advisor.response,
+        timestamp: new Date(),
+        // NEW: Map RAG metadata to the structure MessageBubble expects
+        ragMetadata: {
+          usedDocuments: advisor.used_documents || false,
+          chunksUsed: advisor.document_chunks_used || 0,
+          documentChunks: advisor.retrieved_chunks || []
+        }
+      }));
 
-      const data = await response.json();
-      setCollectedInfo(data.collected_info || {});
-      setThinkingAdvisors([]);
+      setMessages(prev => [...prev, ...advisorMessages]);
 
-      if (data.type === 'orchestrator_question') {
-        const orchestratorMessage = {
-          id: generateMessageId(),
-          type: 'orchestrator',
-          content: data.responses[0].response,
-          timestamp: new Date()
-        };
-        setMessages(prev => [...prev, orchestratorMessage]);
-      } else if (data.type === 'sequential_responses') {
-        const advisorIds = ['methodist', 'theorist', 'pragmatist'];
-        
-        for (let i = 0; i < advisorIds.length; i++) {
-          const advisorId = advisorIds[i];
-          const response = data.responses.find(r => r.persona_id === advisorId);
-          
-          if (response) {
-            setThinkingAdvisors([advisorId]);
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            
-            const advisorMessage = {
-              id: generateMessageId(),
-              type: 'advisor',
-              advisorId: advisorId,
-              content: response.response,
-              timestamp: new Date()
-            };
-            
-            setMessages(prev => [...prev, advisorMessage]);
-            setThinkingAdvisors([]);
-            
-            if (i < advisorIds.length - 1) {
-              await new Promise(resolve => setTimeout(resolve, 500));
-            }
-          }
-        }
-      } else if (data.type === 'error') {
-        const errorMessage = {
+      // Optional: Add RAG summary message if documents were used
+      const ragInfo = data.rag_info || {};
+      if (ragInfo.personas_using_documents > 0) {
+        const ragSummaryMessage = {
           id: generateMessageId(),
-          type: 'error',
-          content: data.responses[0].response,
+          type: 'system',
+          content: `📚 ${ragInfo.personas_using_documents}/${data.responses.length} advisors referenced your uploaded documents (${ragInfo.total_document_chunks_used} chunks used)`,
           timestamp: new Date()
         };
-        setMessages(prev => [...prev, errorMessage]);
+        setMessages(prev => [...prev, ragSummaryMessage]);
       }
 
-    } catch (error) {
-      console.error('Error sending message:', error);
+    } else if (data.type === 'error') {
       const errorMessage = {
         id: generateMessageId(),
         type: 'error',
-        content: 'Sorry, I encountered an error. Please try again.',
+        content: data.message || 'An error occurred. Please try again.',
         timestamp: new Date()
       };
       setMessages(prev => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-      setThinkingAdvisors([]);
     }
-  };
-
-  const handleReplyToAdvisor = async (inputMessage, replyInfo) => {
-    const userMessage = {
-      id: generateMessageId(),
-      type: 'user',
-      content: inputMessage,
-      timestamp: new Date(),
-      replyingTo: replyInfo
-    };
-    setMessages(prev => [...prev, userMessage]);
-    
-    setIsLoading(true);
-    setThinkingAdvisors([replyInfo.advisorId]);
-
-    try {
-      const response = await fetch('http://localhost:8000/reply-to-advisor', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          user_input: inputMessage,
-          advisor_id: replyInfo.advisorId,
-          original_message_id: replyInfo.messageId
-        }),
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      setThinkingAdvisors([]);
 
-      if (data.type === 'advisor_reply') {
-        const replyMessage = {
-          id: generateMessageId(),
-          type: 'advisor',
-          advisorId: replyInfo.advisorId,
-          content: data.response,
-          timestamp: new Date(),
-          isReply: true
-        };
-        setMessages(prev => [...prev, replyMessage]);
-      } else if (data.type === 'error') {
+    } catch (error) {
+        console.error('Error sending message:', error);
         const errorMessage = {
           id: generateMessageId(),
           type: 'error',
-          content: data.response,
+          content: 'Sorry, I encountered an error. Please try again.',
           timestamp: new Date()
-        };
-        setMessages(prev => [...prev, errorMessage]);
-      }
+      };
+      setMessages(prev => [...prev, errorMessage]);
+  }
 
-    } catch (error) {
-      console.error('Error sending reply:', error);
-      const errorMessage = {
+    setIsLoading(false);
+    setThinkingAdvisors([]);
+  };
+
+  const handleReplyToAdvisor = async (inputMessage, replyContext) => {
+  const replyMessage = {
+    id: generateMessageId(),
+    type: 'user',
+    content: inputMessage,
+    replyTo: {
+      advisorId: replyContext.advisorId,
+      advisorName: replyContext.advisorName,
+      messageId: replyContext.messageId
+    },
+    timestamp: new Date()
+  };
+  setMessages(prev => [...prev, replyMessage]);
+  
+  setIsLoading(true);
+  setThinkingAdvisors([replyContext.advisorId]);
+
+  try {
+    const response = await fetch('http://localhost:8000/reply-to-advisor', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        user_input: inputMessage,
+        advisor_id: replyContext.advisorId,
+        original_message_id: replyContext.messageId
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    if (data.type === 'advisor_reply') {
+      const replyResponseMessage = {
         id: generateMessageId(),
-        type: 'error',
-        content: 'Sorry, I encountered an error. Please try again.',
-        timestamp: new Date()
+        type: 'advisor',
+        advisorId: data.persona_id,
+        advisorName: data.persona,
+        content: data.response,
+        isReply: true,
+        timestamp: new Date(),
+        // NEW: Map RAG metadata for reply responses too
+        ragMetadata: {
+          usedDocuments: data.used_documents || false,
+          chunksUsed: data.document_chunks_used || 0,
+          documentChunks: data.retrieved_chunks || []
+        }
       };
-      setMessages(prev => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-      setThinkingAdvisors([]);
-      setReplyingTo(null);
+      setMessages(prev => [...prev, replyResponseMessage]);
     }
+
+  } catch (error) {
+    console.error('Error replying to advisor:', error);
+    const errorMessage = {
+      id: generateMessageId(),
+      type: 'error',
+      content: 'Sorry, I encountered an error with your reply. Please try again.',
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, errorMessage]);
+  }
+
+    setIsLoading(false);
+    setThinkingAdvisors([]);
+    setReplyingTo(null);
   };
 
   const handleCopyMessage = (messageId, content) => {
   // Optional: Show a toast notification or add to message history
   console.log(`Copied message ${messageId}: ${content.substring(0, 50)}...`);
-  
-  // could add a temporary notification here if desired
-  // const notificationMessage = {
-  //   id: generateMessageId(),
-  //   type: 'system',
-  //   content: '✅ Response copied to clipboard',
-  //   timestamp: new Date()
-  // };
-  
-  // setMessages(prev => [...prev, notificationMessage]);
-  
-  // // Remove the notification after 3 seconds
-  // setTimeout(() => {
-  //   setMessages(prev => prev.filter(msg => msg.id !== notificationMessage.id));
-  // }, 3000);
   };
 
-  const handleExpandMessage = async (messageId, advisorId) => {
-    const advisor = advisors[advisorId];
-    
-    try {
-      setIsLoading(true);
-      setThinkingAdvisors([advisorId]);
-
-      // Find the original message to expand on
-      const originalMessage = messages.find(msg => msg.id === messageId);
-      
-      if (!originalMessage) {
-        console.error('Original message not found');
-        return;
-      }
-
-      // Create advisor-specific expansion prompts
-      const advisorSpecificPrompts = {
-        'methodologist': `Please expand on your previous response with more methodological detail. Include specific research methods, data collection techniques, analytical approaches, and methodological considerations that would be relevant. Provide practical examples and step-by-step guidance where applicable.`,
-        'theorist': `Please elaborate on your previous response by exploring the theoretical frameworks and conceptual foundations in greater depth. Include additional theoretical perspectives, scholarly context, and conceptual analysis that would enrich understanding of the topic.`,
-        'pragmatist': `Please expand on your previous response with more practical, actionable details. Include specific examples, concrete next steps, real-world applications, and practical strategies that can be immediately implemented.`
-      };
+const handleExpandMessage = async (messageId, advisorId) => {
+  const advisor = advisors[advisorId];
+  if (!advisor) return;
 
-      // Use advisor-specific prompt or general expansion prompt
-      const expandPrompt = advisorSpecificPrompts[advisorId] || 
-        `Please expand and elaborate on your previous response in more detail. Provide additional insights, practical examples, and deeper analysis that would be helpful for understanding and implementing your advice.`;
+  const originalMessage = messages.find(msg => msg.id === messageId);
+  if (!originalMessage) return;
 
-      // Use the existing /reply-to-advisor endpoint
-      const response = await fetch('http://localhost:8000/reply-to-advisor', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          advisor_id: advisorId,
-          user_input: expandPrompt,
-          original_message_id: messageId
-        }),
-      });
+  const expandPrompt = `Please expand on your previous response: "${originalMessage.content.substring(0, 100)}..." Provide more detail and depth.`;
+  
+  const expandMessage = {
+    id: generateMessageId(),
+    type: 'user',
+    content: expandPrompt,
+    timestamp: new Date(),
+    isExpandRequest: true,
+    expandsMessageId: messageId
+  };
+  setMessages(prev => [...prev, expandMessage]);
+  
+  setIsLoading(true);
+  setThinkingAdvisors([advisorId]);
+
+  try {
+    const response = await fetch(`http://localhost:8000/chat/${advisorId}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        user_input: expandPrompt,
+        response_length: 'long'
+      }),
+    });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
 
-      const data = await response.json();
-      setThinkingAdvisors([]);
+    const data = await response.json();
 
-      if (data.type === 'advisor_reply') {
-        const expandedMessage = {
-          id: generateMessageId(),
-          type: 'advisor',
-          advisorId: advisorId,
-          content: data.response,
-          timestamp: new Date(),
-          isExpansion: true, // Mark this as an expansion
-          expandedFrom: messageId // Reference to original message
-        };
-        setMessages(prev => [...prev, expandedMessage]);
-      } else if (data.type === 'error') {
-        const errorMessage = {
-          id: generateMessageId(),
-          type: 'error',
-          content: data.response,
-          timestamp: new Date()
-        };
-        setMessages(prev => [...prev, errorMessage]);
-      }
-
-    } catch (error) {
-      console.error('Error expanding message:', error);
-      const errorMessage = {
+    if (data.type === 'single_persona_response' && data.persona) {
+      const expandedMessage = {
         id: generateMessageId(),
-        type: 'error',
-        content: 'Sorry, I encountered an error while expanding the response. Please try again.',
-        timestamp: new Date()
+        type: 'advisor',
+        advisorId: advisorId,
+        advisorName: advisor.name,
+        content: data.persona.response,
+        isExpansion: true,
+        expandsMessageId: messageId,
+        timestamp: new Date(),
+        // NEW: Map RAG metadata for expanded responses
+        ragMetadata: {
+          usedDocuments: data.persona.used_documents || false,
+          chunksUsed: data.persona.document_chunks_used || 0,
+          documentChunks: data.persona.retrieved_chunks || []
+        }
       };
-      setMessages(prev => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-      setThinkingAdvisors([]);
+      setMessages(prev => [...prev, expandedMessage]);
     }
+
+  } catch (error) {
+    console.error('Error expanding message:', error);
+    const errorMessage = {
+      id: generateMessageId(),
+      type: 'error',
+      content: 'Sorry, I encountered an error expanding the response. Please try again.',
+      timestamp: new Date()
+    };
+    setMessages(prev => [...prev, errorMessage]);
+  }
+
+    setIsLoading(false);
+    setThinkingAdvisors([]);
   };
 
   const handleReplyToMessage = (message) => {

phd-advisor-frontend/src/styles/components.css

@@ -830,6 +830,230 @@
   display: none;
 }
 
+.rag-info-overlay {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 1000;
+  width: 320px;
+  max-width: 90vw;
+  border: 1px solid;
+  border-radius: 8px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  margin-top: 8px;
+  backdrop-filter: blur(10px);
+  animation: ragOverlaySlideIn 0.2s ease-out;
+}
+
+@keyframes ragOverlaySlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.rag-overlay-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  font-weight: 600;
+  font-size: 14px;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  border-radius: 8px 8px 0 0;
+}
+
+.rag-overlay-content {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.rag-stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.rag-stat-row:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.rag-stat-label {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.rag-stat-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.rag-stat-value.positive {
+  color: #10B981;
+}
+
+.rag-stat-value.negative {
+  color: #6B7280;
+}
+
+.rag-documents-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-secondary);
+}
+
+.rag-section-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.rag-document-item {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 8px;
+}
+
+.rag-document-item:last-child {
+  margin-bottom: 0;
+}
+
+.rag-document-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.rag-filename {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex: 1;
+  margin-right: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rag-relevance {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-color);
+  background: var(--accent-color)15;
+  padding: 2px 6px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.rag-chunk-preview {
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  background: var(--bg-quaternary);
+  padding: 6px 8px;
+  border-radius: 4px;
+  border-left: 2px solid var(--accent-color);
+  margin-top: 6px;
+}
+
+.rag-no-documents {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-secondary);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-style: italic;
+  margin-top: 8px;
+}
+
+/* Accessibility improvements */
+.rag-info-overlay:focus-within {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+/* Smooth transitions */
+.action-button {
+  transition: all 0.2s ease;
+}
+
+.action-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom scrollbar for overlay content */
+.rag-overlay-content::-webkit-scrollbar {
+  width: 4px;
+}
+
+.rag-overlay-content::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+  border-radius: 2px;
+}
+
+.rag-overlay-content::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 2px;
+}
+
+.rag-overlay-content::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .rag-info-overlay {
+  background: #1f2937;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .rag-overlay-header {
+  background: #374151;
+}
+
+[data-theme="dark"] .rag-document-item {
+  background: #374151;
+  border-color: #4B5563;
+}
+
+[data-theme="dark"] .rag-chunk-preview {
+  background: #4B5563;
+  color: #D1D5DB;
+}
+
+[data-theme="dark"] .rag-no-documents {
+  background: #374151;
+  border-color: #4B5563;
+}
+
 /* Animations */
 @keyframes bounce {
   0%, 80%, 100% {
@@ -911,4 +1135,23 @@
     padding: 4px 8px;
   }
 
+  .rag-info-overlay {
+    width: 280px;
+    left: 0;
+    right: auto;
+  }
+  
+  .rag-document-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+  
+  .rag-filename {
+    margin-right: 0;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: initial;
+  }
+
 }