Upload components.py

components.py

@@ -0,0 +1,542 @@
+# components.py - Enhanced with Rating and Bookmarking Features
+import streamlit.components.v1 as components
+import html
+import uuid
+
+def render_response_box(response_text, response_id):
+    """Original render response box for backward compatibility"""
+    escaped_text = html.escape(response_text)
+    
+    components.html(f"""
+    <div class="response-box">
+      <div class="response-header">
+        💬 <strong>Response</strong>
+        <button class="copy-button" onclick="copyToClipboard('{response_id}')">📋</button>
+      </div>
+      <div class="response-content" id="{response_id}">
+        {escaped_text}
+      </div>
+    </div>
+
+    <div id="toast-{response_id}" class="custom-toast">Copied to clipboard ✅</div>
+
+    <script>
+    function copyToClipboard(id) {{
+        try {{
+            const element = document.getElementById(id);
+            if (!element) {{
+                console.error('Element not found:', id);
+                return;
+            }}
+            
+            const text = element.innerText || element.textContent;
+            
+            if (navigator.clipboard && navigator.clipboard.writeText) {{
+                navigator.clipboard.writeText(text).then(() => {{
+                    showToast(id);
+                }}).catch(err => {{
+                    console.error("Clipboard API failed:", err);
+                    fallbackCopy(text, id);
+                }});
+            }} else {{
+                fallbackCopy(text, id);
+            }}
+        }} catch (error) {{
+            console.error("Copy failed:", error);
+        }}
+    }}
+    
+    function fallbackCopy(text, id) {{
+        try {{
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "fixed";
+            textArea.style.left = "-999999px";
+            textArea.style.top = "-999999px";
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            
+            const successful = document.execCommand('copy');
+            document.body.removeChild(textArea);
+            
+            if (successful) {{
+                showToast(id);
+            }} else {{
+                console.error("Fallback copy failed");
+            }}
+        }} catch (error) {{
+            console.error("Fallback copy error:", error);
+        }}
+    }}
+    
+    function showToast(id) {{
+        const toast = document.getElementById("toast-" + id);
+        if (toast) {{
+            toast.classList.add("show");
+            setTimeout(() => {{
+                toast.classList.remove("show");
+            }}, 3000);
+        }}
+    }}
+    </script>
+
+    <style>
+    .response-box {{
+        background-color: #f9f9f9;
+        border-radius: 12px;
+        padding: 16px;
+        margin-top: 10px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        font-family: 'Inter', sans-serif;
+        border: 1px solid #e0e0e0;
+    }}
+    
+    .response-header {{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 18px;
+        margin-bottom: 12px;
+        color: #333;
+    }}
+    
+    .copy-button {{
+        background: #e0e0e0;
+        border: none;
+        border-radius: 6px;
+        padding: 6px 12px;
+        cursor: pointer;
+        font-size: 16px;
+        transition: background-color 0.2s ease;
+    }}
+    
+    .copy-button:hover {{
+        background-color: #d0d0d0;
+    }}
+    
+    .response-content {{
+        max-height: 240px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        background-color: #fff;
+        padding: 12px;
+        border-radius: 8px;
+        border: 1px solid #eee;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        line-height: 1.6;
+        color: #333;
+        word-break: break-word;
+    }}
+    
+    .custom-toast {{
+        visibility: hidden;
+        min-width: 220px;
+        margin-left: -110px;
+        background-color: #4CAF50;
+        color: #fff;
+        text-align: center;
+        border-radius: 8px;
+        padding: 12px;
+        position: fixed;
+        z-index: 9999;
+        left: 50%;
+        bottom: 50px;
+        font-size: 16px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        transition: all 0.3s ease;
+        opacity: 0;
+        transform: translateY(30px);
+    }}
+    
+    .custom-toast.show {{
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+    }}
+    </style>
+    """, height=320)
+
+def render_enhanced_response_box(response_text, message_id, session_id, is_bookmarked=False, rating=None, show_actions=True):
+    """Enhanced response box with rating and bookmarking features"""
+    escaped_text = html.escape(response_text)
+    
+    # Rating button states
+    thumbs_up_class = "rating-active" if rating == 1 else ""
+    thumbs_down_class = "rating-active" if rating == -1 else ""
+    
+    # Bookmark button state
+    bookmark_icon = "🔖" if is_bookmarked else "📑"
+    bookmark_class = "bookmark-active" if is_bookmarked else ""
+    
+    action_buttons = ""
+    if show_actions:
+        action_buttons = f"""
+        <div class="action-buttons">
+            <button class="action-btn rating-btn {thumbs_up_class}" 
+                    onclick="rateMessage('{session_id}', '{message_id}', 1)" 
+                    title="Rate positively">👍</button>
+            <button class="action-btn rating-btn {thumbs_down_class}" 
+                    onclick="rateMessage('{session_id}', '{message_id}', -1)" 
+                    title="Rate negatively">👎</button>
+            <button class="action-btn bookmark-btn {bookmark_class}" 
+                    onclick="bookmarkMessage('{session_id}', '{message_id}', {str(not is_bookmarked).lower()})" 
+                    title="{'Remove bookmark' if is_bookmarked else 'Bookmark response'}">{bookmark_icon}</button>
+            <button class="action-btn copy-button" 
+                    onclick="copyToClipboard('{message_id}')" 
+                    title="Copy to clipboard">📋</button>
+        </div>
+        """
+    
+    components.html(f"""
+    <div class="enhanced-response-box">
+      <div class="response-header">
+        💬 <strong>AI Response</strong>
+        {action_buttons}
+      </div>
+      <div class="response-content" id="{message_id}">
+        {escaped_text}
+      </div>
+    </div>
+
+    <div id="toast-{message_id}" class="custom-toast">Action completed ✅</div>
+
+    <script>
+    function copyToClipboard(id) {{
+        try {{
+            const element = document.getElementById(id);
+            if (!element) return;
+            
+            const text = element.innerText || element.textContent;
+            
+            if (navigator.clipboard && navigator.clipboard.writeText) {{
+                navigator.clipboard.writeText(text).then(() => {{
+                    showToast(id, 'Copied to clipboard ✅');
+                }}).catch(err => {{
+                    fallbackCopy(text, id);
+                }});
+            }} else {{
+                fallbackCopy(text, id);
+            }}
+        }} catch (error) {{
+            console.error("Copy failed:", error);
+        }}
+    }}
+    
+    function fallbackCopy(text, id) {{
+        try {{
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            textArea.style.position = "fixed";
+            textArea.style.left = "-999999px";
+            textArea.style.top = "-999999px";
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            
+            const successful = document.execCommand('copy');
+            document.body.removeChild(textArea);
+            
+            if (successful) {{
+                showToast(id, 'Copied to clipboard ✅');
+            }}
+        }} catch (error) {{
+            console.error("Fallback copy error:", error);
+        }}
+    }}
+    
+    function rateMessage(sessionId, messageId, rating) {{
+        // Send rating to Streamlit backend
+        const data = {{
+            action: 'rate_message',
+            session_id: sessionId,
+            message_id: messageId,
+            rating: rating
+        }};
+        
+        // Use Streamlit's component communication
+        window.parent.postMessage({{
+            type: 'streamlit:componentValue',
+            value: data
+        }}, '*');
+        
+        // Update UI immediately
+        const buttons = document.querySelectorAll(`[onclick*="${{messageId}}"]`);
+        buttons.forEach(btn => {{
+            if (btn.textContent.includes('👍')) {{
+                btn.classList.toggle('rating-active', rating === 1);
+            }} else if (btn.textContent.includes('👎')) {{
+                btn.classList.toggle('rating-active', rating === -1);
+            }}
+        }});
+        
+        showToast(messageId, rating === 1 ? 'Rated positively 👍' : 'Rated negatively 👎');
+    }}
+    
+    function bookmarkMessage(sessionId, messageId, isBookmarked) {{
+        // Send bookmark action to Streamlit backend
+        const data = {{
+            action: 'bookmark_message',
+            session_id: sessionId,
+            message_id: messageId,
+            is_bookmarked: isBookmarked
+        }};
+        
+        window.parent.postMessage({{
+            type: 'streamlit:componentValue',
+            value: data
+        }}, '*');
+        
+        // Update UI immediately
+        const bookmarkBtn = document.querySelector(`[onclick*="bookmarkMessage('${{sessionId}}', '${{messageId}}'"]`);
+        if (bookmarkBtn) {{
+            bookmarkBtn.textContent = isBookmarked ? '🔖' : '📑';
+            bookmarkBtn.classList.toggle('bookmark-active', isBookmarked);
+            bookmarkBtn.setAttribute('onclick', `bookmarkMessage('${{sessionId}}', '${{messageId}}', ${{!isBookmarked}})`);
+            bookmarkBtn.title = isBookmarked ? 'Remove bookmark' : 'Bookmark response';
+        }}
+        
+        showToast(messageId, isBookmarked ? 'Response bookmarked 🔖' : 'Bookmark removed 📑');
+    }}
+    
+    function showToast(id, message) {{
+        const toast = document.getElementById("toast-" + id);
+        if (toast) {{
+            toast.textContent = message;
+            toast.classList.add("show");
+            setTimeout(() => {{
+                toast.classList.remove("show");
+            }}, 3000);
+        }}
+    }}
+    </script>
+
+    <style>
+    .enhanced-response-box {{
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+        border-radius: 16px;
+        padding: 20px;
+        margin: 16px 0;
+        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
+        border: 1px solid #e8eaff;
+        font-family: 'Inter', sans-serif;
+        position: relative;
+    }}
+    
+    .response-header {{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 16px;
+        color: #2d3748;
+        font-weight: 600;
+    }}
+    
+    .action-buttons {{
+        display: flex;
+        gap: 8px;
+        align-items: center;
+    }}
+    
+    .action-btn {{
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        padding: 8px 12px;
+        cursor: pointer;
+        font-size: 16px;
+        transition: all 0.2s ease;
+        backdrop-filter: blur(10px);
+        min-width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }}
+    
+    .action-btn:hover {{
+        background: rgba(255, 255, 255, 0.95);
+        border-color: #cbd5e0;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }}
+    
+    .rating-btn.rating-active {{
+        background: #667eea;
+        color: white;
+        border-color: #667eea;
+    }}
+    
+    .bookmark-btn.bookmark-active {{
+        background: #f6ad55;
+        color: white;
+        border-color: #f6ad55;
+    }}
+    
+    .copy-button:hover {{
+        background: #e2e8f0;
+    }}
+    
+    .response-content {{
+        background: rgba(255, 255, 255, 0.9);
+        padding: 20px;
+        border-radius: 12px;
+        border: 1px solid #e8eaff;
+        max-height: 300px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        font-family: 'Segoe UI', system-ui, sans-serif;
+        line-height: 1.7;
+        color: #2d3748;
+        word-break: break-word;
+        backdrop-filter: blur(5px);
+    }}
+    
+    .response-content::-webkit-scrollbar {{
+        width: 8px;
+    }}
+    
+    .response-content::-webkit-scrollbar-track {{
+        background: #f7fafc;
+        border-radius: 4px;
+    }}
+    
+    .response-content::-webkit-scrollbar-thumb {{
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        border-radius: 4px;
+    }}
+    
+    .response-content::-webkit-scrollbar-thumb:hover {{
+        background: linear-gradient(135deg, #5a6fd8, #6b46a3);
+    }}
+    
+    .custom-toast {{
+        visibility: hidden;
+        min-width: 250px;
+        margin-left: -125px;
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: #fff;
+        text-align: center;
+        border-radius: 12px;
+        padding: 16px 20px;
+        position: fixed;
+        z-index: 9999;
+        left: 50%;
+        bottom: 50px;
+        font-size: 16px;
+        font-weight: 500;
+        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0;
+        transform: translateY(30px) scale(0.9);
+        backdrop-filter: blur(10px);
+    }}
+    
+    .custom-toast.show {{
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }}
+    
+    /* Responsive design */
+    @media (max-width: 768px) {{
+        .enhanced-response-box {{
+            padding: 16px;
+            margin: 12px 0;
+        }}
+        
+        .action-buttons {{
+            gap: 6px;
+        }}
+        
+        .action-btn {{
+            padding: 6px 8px;
+            font-size: 14px;
+            min-width: 36px;
+            height: 36px;
+        }}
+        
+        .response-content {{
+            padding: 16px;
+            max-height: 250px;
+        }}
+    }}
+    
+    /* Animation for new responses */
+    @keyframes slideInUp {{
+        from {{
+            opacity: 0;
+            transform: translateY(20px);
+        }}
+        to {{
+            opacity: 1;
+            transform: translateY(0);
+        }}
+    }}
+    
+    .enhanced-response-box {{
+        animation: slideInUp 0.4s ease-out;
+    }}
+    </style>
+    """, height=400)
+
+def render_typing_animation(text, response_id):
+    """Render typing animation for the response"""
+    escaped_text = html.escape(text)
+    
+    return f'''
+    <div class="enhanced-response-box typing-animation">
+      <div class="response-header">
+        💬 <strong>AI Response</strong>
+        <span class="typing-indicator">
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+          <span class="typing-dot"></span>
+        </span>
+      </div>
+      <div class="response-content">
+        {escaped_text}<span class="cursor">▌</span>
+      </div>
+    </div>
+    <style>
+    .typing-indicator {{
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }}
+    
+    .typing-dot {{
+        width: 6px;
+        height: 6px;
+        background: #667eea;
+        border-radius: 50%;
+        animation: typing-bounce 1.4s infinite ease-in-out;
+    }}
+    
+    .typing-dot:nth-child(1) {{ animation-delay: -0.32s; }}
+    .typing-dot:nth-child(2) {{ animation-delay: -0.16s; }}
+    .typing-dot:nth-child(3) {{ animation-delay: 0s; }}
+    
+    @keyframes typing-bounce {{
+        0%, 80%, 100% {{
+            transform: scale(0.8);
+            opacity: 0.5;
+        }}
+        40% {{
+            transform: scale(1);
+            opacity: 1;
+        }}
+    }}
+    
+    .cursor {{
+        animation: blink 1s infinite;
+        color: #667eea;
+        font-weight: bold;
+    }}
+    
+    @keyframes blink {{
+        0%, 50% {{ opacity: 1; }}
+        51%, 100% {{ opacity: 0; }}
+    }}
+    </style>
+    '''