Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,73 +1,343 @@
 import streamlit as st
 import streamlit.components.v1 as components
 
-st.set_page_config(page_title="Custom Chat Bar", layout="wide")
+# Set page config
+st.set_page_config(
+    page_title="Perplexity AI Clone",
+    page_icon="🔍",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
 
-# Display main content
-st.title("Main Chat Area")
-st.markdown("This is where your chat messages would appear.")
-
-# Custom HTML + CSS + JS for the sticky bottom chat bar
-chat_bar_code = """
+# Custom CSS for dark theme and styling
+st.markdown("""
 <style>
-.chat-bar-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background-color: #1e1e1e;
-    border-top: 1px solid #333;
-    padding: 10px 20px;
-    z-index: 1000;
-}
-
-.chat-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #2a2a2a;
-    border-radius: 20px;
-    padding: 8px 16px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-}
-
-.chat-bar input {
-    flex: 1;
-    border: none;
-    background: transparent;
-    color: white;
-    font-size: 16px;
-    outline: none;
-}
-
-.chat-bar-icons {
-    display: flex;
-    gap: 12px;
-}
-
-.chat-bar-icons i {
-    color: #ccc;
-    cursor: pointer;
-    transition: 0.2s ease;
-}
-
-.chat-bar-icons i:hover {
-    color: white;
-}
+    /* Hide Streamlit default elements */
+    .stDeployButton {display: none;}
+    header[data-testid="stHeader"] {display: none;}
+    .stMainBlockContainer {padding-top: 0rem;}
+    
+    /* Dark theme background */
+    .stApp {
+        background-color: #1a1a1a;
+        color: white;
+    }
+    
+    /* Main container styling */
+    .main-container {
+        background-color: #1a1a1a;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+    
+    /* Header styling */
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem 2rem;
+        background-color: #1a1a1a;
+        border-bottom: 1px solid #333;
+    }
+    
+    .logo {
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: white;
+    }
+    
+    .logo-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        background: linear-gradient(45deg, #00d4ff, #00a8cc);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .get-app-btn {
+        background-color: #00d4ff;
+        color: #1a1a1a;
+        padding: 8px 16px;
+        border-radius: 20px;
+        border: none;
+        font-weight: 600;
+        cursor: pointer;
+        font-size: 14px;
+    }
+    
+    /* Center content */
+    .center-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+    
+    /* Main heading */
+    .main-heading {
+        font-size: 3.5rem;
+        font-weight: 400;
+        text-align: center;
+        margin-bottom: 3rem;
+        color: white;
+        line-height: 1.2;
+    }
+    
+    /* Chat input container */
+    .chat-container {
+        width: 100%;
+        max-width: 700px;
+        position: relative;
+        margin-bottom: 2rem;
+    }
+    
+    /* Custom input styling */
+    .chat-input-wrapper {
+        position: relative;
+        background-color: #2d2d2d;
+        border-radius: 12px;
+        border: 1px solid #404040;
+        overflow: hidden;
+    }
+    
+    .chat-input {
+        width: 100%;
+        padding: 16px 120px 16px 20px;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: white;
+        font-size: 16px;
+        font-family: inherit;
+        resize: none;
+        min-height: 24px;
+        max-height: 200px;
+    }
+    
+    .chat-input::placeholder {
+        color: #888;
+    }
+    
+    /* Button container */
+    .button-container {
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    
+    /* Individual buttons */
+    .action-btn {
+        width: 32px;
+        height: 32px;
+        background: transparent;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #888;
+        transition: all 0.2s ease;
+    }
+    
+    .action-btn:hover {
+        background-color: #404040;
+        color: white;
+    }
+    
+    .search-btn {
+        background-color: #00d4ff;
+        color: #1a1a1a;
+        border-radius: 6px;
+        margin-right: 4px;
+    }
+    
+    .search-btn:hover {
+        background-color: #00b8e6;
+    }
+    
+    /* Bottom navigation placeholder */
+    .bottom-nav {
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #1a1a1a;
+        padding: 1rem;
+        display: flex;
+        gap: 2rem;
+        border-top: 1px solid #333;
+        width: 200px;
+        justify-content: center;
+    }
+    
+    .nav-item {
+        width: 24px;
+        height: 24px;
+        background-color: #333;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .main-heading {
+            font-size: 2.5rem;
+        }
+        
+        .header {
+            padding: 1rem;
+        }
+        
+        .center-content {
+            padding: 1rem;
+        }
+    }
 </style>
+""", unsafe_allow_html=True)
 
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
-
-<div class="chat-bar-container">
-  <div class="chat-bar">
-    <input type="text" placeholder="Ask anything..." />
-    <div class="chat-bar-icons">
-      <i class="fas fa-paperclip"></i>
-      <i class="fas fa-microphone"></i>
-      <i class="fas fa-paper-plane"></i>
+# Main HTML structure
+st.markdown("""
+<div class="main-container">
+    <div class="header">
+        <div class="logo">
+            <div class="logo-icon">⚡</div>
+            perplexity
+        </div>
+        <button class="get-app-btn">📱 Get App</button>
+    </div>
+    
+    <div class="center-content">
+        <h1 class="main-heading">What do you want to know?</h1>
+        
+        <div class="chat-container">
+            <div class="chat-input-wrapper">
+                <textarea 
+                    class="chat-input" 
+                    placeholder="Ask anything..."
+                    rows="1"
+                    id="chatInput"
+                ></textarea>
+                <div class="button-container">
+                    <button class="action-btn search-btn" title="Search">
+                        🔍
+                    </button>
+                    <button class="action-btn" title="Image">
+                        🖼️
+                    </button>
+                    <button class="action-btn" title="Globe">
+                        🌐
+                    </button>
+                    <button class="action-btn" title="Attachment">
+                        📎
+                    </button>
+                    <button class="action-btn" title="Voice">
+                        🎤
+                    </button>
+                    <button class="action-btn" title="Send">
+                        ➤
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="bottom-nav">
+        <div class="nav-item"></div>
+        <div class="nav-item"></div>
+        <div class="nav-item"></div>
     </div>
-  </div>
 </div>
-"""
+""", unsafe_allow_html=True)
+
+# JavaScript for interactive functionality
+components.html("""
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const chatInput = document.getElementById('chatInput');
+    const buttons = document.querySelectorAll('.action-btn');
+    
+    // Auto-resize textarea
+    chatInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 200) + 'px';
+    });
+    
+    // Button click handlers
+    buttons.forEach(button => {
+        button.addEventListener('click', function() {
+            const title = this.getAttribute('title');
+            console.log(`${title} button clicked`);
+            
+            // Add visual feedback
+            this.style.transform = 'scale(0.95)';
+            setTimeout(() => {
+                this.style.transform = 'scale(1)';
+            }, 100);
+            
+            // Handle specific button actions
+            if (title === 'Send' && chatInput.value.trim()) {
+                console.log('Sending message:', chatInput.value);
+                // Here you would typically send the message
+                chatInput.value = '';
+                chatInput.style.height = 'auto';
+            }
+        });
+    });
+    
+    // Enter key to send
+    chatInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (this.value.trim()) {
+                console.log('Sending message:', this.value);
+                // Here you would typically send the message
+                this.value = '';
+                this.style.height = 'auto';
+            }
+        }
+    });
+    
+    // Focus on input when page loads
+    chatInput.focus();
+});
+</script>
+""", height=0)
+
+# Session state for chat history
+if 'messages' not in st.session_state:
+    st.session_state.messages = []
+
+# Handle form submission (alternative method using Streamlit)
+with st.form(key='chat_form', clear_on_submit=True):
+    user_input = st.text_input("", placeholder="Ask anything...", label_visibility="hidden", key="user_input")
+    submit_button = st.form_submit_button("Send", use_container_width=False)
+    
+    if submit_button and user_input:
+        st.session_state.messages.append({"role": "user", "content": user_input})
+        # Here you would add your AI response logic
+        st.session_state.messages.append({"role": "assistant", "content": f"You asked: {user_input}"})
 
-components.html(chat_bar_code, height=100)
+# Display chat history (if any messages exist)
+if st.session_state.messages:
+    st.markdown("### Chat History")
+    for message in st.session_state.messages:
+        if message["role"] == "user":
+            st.markdown(f"**You:** {message['content']}")
+        else:
+            st.markdown(f"**Assistant:** {message['content']}")