Update app.py

app.py

@@ -3,6 +3,8 @@ import time
 import random
 import psutil
 import base64
+import json
+from datetime import datetime
 
 # Set page config
 st.set_page_config(page_title="Enhanced Chatbot", layout="wide")
@@ -95,130 +97,20 @@ if 'messages' not in st.session_state:
     st.session_state.messages = []
 if 'uploaded_file' not in st.session_state:
     st.session_state.uploaded_file = None
+if 'visitors' not in st.session_state:
+    st.session_state.visitors = {}
 
-# Sidebar - Left
-with st.sidebar:
-    st.subheader("Chat History")
-    if st.button("Clear History"):
-        st.session_state.messages = []
-    
-    st.subheader("Recent Conversations")
-    for i, msg in enumerate(st.session_state.messages[-5:]):
-        st.text(f"{msg['role'].capitalize()}: {msg['content'][:30]}...")
-
-# Main layout
-col1, col2 = st.columns([3, 1])
+# Function to get visitor IP (simulated in this example)
+def get_visitor_ip():
+    return f"192.168.1.{random.randint(1, 255)}"
 
-with col1:
-    st.title("🤖 Enhanced Chatbot")
-    
-    # Chat container with fixed height and scrolling
-    chat_container = st.container()
-    
-    # Display chat messages
-    with chat_container:
-        st.markdown('<div class="chat-container">', unsafe_allow_html=True)
-        for message in st.session_state.messages:
-            with st.chat_message(message["role"]):
-                st.write(message["content"])
-                if message.get("file"):
-                    file_info = message["file"]
-                    file_type = file_info["type"]
-                    file_name = file_info["name"]
-                    
-                    if file_type.startswith("image/"):
-                        st.image(file_info["data"], caption=file_name, use_column_width=True)
-                    else:
-                        icon = "📄"
-                        if file_type == "application/pdf":
-                            icon = "📕"
-                        elif file_type.startswith("audio/"):
-                            icon = "🎵"
-                        elif file_type.startswith("video/"):
-                            icon = "🎬"
-                        
-                        st.markdown(f"""
-                        <div class="file-info">
-                            <span class="file-icon">{icon}</span>
-                            <span>{file_name}</span>
-                        </div>
-                        """, unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
+# Update visitor information
+visitor_ip = get_visitor_ip()
+current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+st.session_state.visitors[visitor_ip] = current_time
 
-    # Input area
-    with st.form(key='chat_form'):
-        user_input = st.text_input("You:", key="user_input")
-        col1, col2, col3 = st.columns([1, 8, 1])
-        with col1:
-            st.markdown("""
-            <div class="upload-btn-wrapper">
-                <button class="btn">📎</button>
-                <input type="file" name="myfile" id="fileUpload" />
-            </div>
-            """, unsafe_allow_html=True)
-        with col2:
-            submit_button = st.form_submit_button("Send")
-        with col3:
-            st.empty()
-
-    # Handle file upload
-    file_upload_placeholder = st.empty()
-    
-    # JavaScript to handle file upload
-    st.markdown("""
-    <script>
-        const fileInput = document.getElementById('fileUpload');
-        fileInput.addEventListener('change', (event) => {
-            const file = event.target.files[0];
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const fileData = e.target.result;
-                window.parent.postMessage({
-                    type: 'uploadFile',
-                    data: fileData,
-                    name: file.name,
-                    mimeType: file.type
-                }, '*');
-            };
-            reader.readAsDataURL(file);
-        });
-    </script>
-    """, unsafe_allow_html=True)
-
-    # Handle the uploaded file
-    if st.session_state.uploaded_file:
-        file_data = st.session_state.uploaded_file["data"]
-        file_name = st.session_state.uploaded_file["name"]
-        file_type = st.session_state.uploaded_file["type"]
-        
-        st.session_state.messages.append({
-            "role": "user",
-            "content": f"Uploaded a file: {file_name}",
-            "file": {
-                "name": file_name,
-                "type": file_type,
-                "data": file_data
-            }
-        })
-        st.session_state.uploaded_file = None
-        st.rerun()
-
-    if submit_button and user_input:
-        st.session_state.messages.append({"role": "user", "content": user_input})
-        
-        # Simulate bot response
-        with st.spinner("Bot is thinking..."):
-            time.sleep(random.uniform(0.5, 1.5))  # Simulate variable response time
-            bot_response = f"I understood your message: '{user_input}'. How can I assist you further?"
-            st.session_state.messages.append({"role": "assistant", "content": bot_response})
-        
-        # Clear the input box
-        st.session_state.user_input = ""
-        
-        # Rerun to update the chat display
-        st.rerun()
-
-with col2:
+# Sidebar
+with st.sidebar:
     st.subheader("System Status")
     
     # Fetch real CPU usage
@@ -236,14 +128,132 @@ with col2:
     
     # Add more dynamic elements
     st.subheader("Active Users")
-    active_users = random.randint(50, 200)
+    active_users = len(st.session_state.visitors)
     st.metric(label="Current Active Users", value=active_users, delta=random.randint(-10, 10))
 
+    st.subheader("Chat History")
+    if st.button("Clear History"):
+        st.session_state.messages = []
+    
+    st.subheader("Recent Conversations")
+    for i, msg in enumerate(st.session_state.messages[-5:]):
+        st.text(f"{msg['role'].capitalize()}: {msg['content'][:30]}...")
+
+# Main layout
+st.title("🤖 Enhanced Chatbot")
+
+# Chat container with fixed height and scrolling
+chat_container = st.container()
+
+# Display chat messages
+with chat_container:
+    st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            st.write(message["content"])
+            if message.get("file"):
+                file_info = message["file"]
+                file_type = file_info["type"]
+                file_name = file_info["name"]
+                
+                if file_type.startswith("image/"):
+                    st.image(file_info["data"], caption=file_name, use_column_width=True)
+                else:
+                    icon = "📄"
+                    if file_type == "application/pdf":
+                        icon = "📕"
+                    elif file_type.startswith("audio/"):
+                        icon = "🎵"
+                    elif file_type.startswith("video/"):
+                        icon = "🎬"
+                    
+                    st.markdown(f"""
+                    <div class="file-info">
+                        <span class="file-icon">{icon}</span>
+                        <span>{file_name}</span>
+                    </div>
+                    """, unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Input area
+with st.form(key='chat_form'):
+    user_input = st.text_input("You:", key="user_input")
+    col1, col2, col3 = st.columns([1, 8, 1])
+    with col1:
+        st.markdown("""
+        <div class="upload-btn-wrapper">
+            <button class="btn">📎</button>
+            <input type="file" name="myfile" id="fileUpload" />
+        </div>
+        """, unsafe_allow_html=True)
+    with col2:
+        submit_button = st.form_submit_button("Send")
+    with col3:
+        st.empty()
+
+# Handle file upload
+file_upload_placeholder = st.empty()
+
+# JavaScript to handle file upload
+st.markdown("""
+<script>
+    const fileInput = document.getElementById('fileUpload');
+    fileInput.addEventListener('change', (event) => {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const fileData = e.target.result;
+            window.parent.postMessage({
+                type: 'uploadFile',
+                data: fileData,
+                name: file.name,
+                mimeType: file.type
+            }, '*');
+        };
+        reader.readAsDataURL(file);
+    });
+</script>
+""", unsafe_allow_html=True)
+
+# Handle the uploaded file
+if st.session_state.uploaded_file:
+    file_data = st.session_state.uploaded_file["data"]
+    file_name = st.session_state.uploaded_file["name"]
+    file_type = st.session_state.uploaded_file["type"]
+    
+    st.session_state.messages.append({
+        "role": "user",
+        "content": f"Uploaded a file: {file_name}",
+        "file": {
+            "name": file_name,
+            "type": file_type,
+            "data": file_data
+        }
+    })
+    st.session_state.uploaded_file = None
+    st.rerun()
+
+if submit_button and user_input:
+    st.session_state.messages.append({"role": "user", "content": user_input})
+    
+    # Simulate bot response
+    with st.spinner("Bot is thinking..."):
+        time.sleep(random.uniform(0.5, 1.5))  # Simulate variable response time
+        bot_response = f"I understood your message: '{user_input}'. How can I assist you further?"
+        st.session_state.messages.append({"role": "assistant", "content": bot_response})
+    
+    # Rerun to update the chat display
+    st.rerun()
+
+# Display visitor information
+st.subheader("Visitor Information")
+st.json(st.session_state.visitors)
+
 # Accessibility considerations
 st.markdown("""
     <div class="sr-only">
         This is a chatbot interface. You can type messages in the input field and press send to chat with the bot.
-        There's also an option to upload files. The left sidebar shows chat history, and the right column displays system status.
+        There's also an option to upload files. The sidebar shows system status and chat history.
     </div>
 """, unsafe_allow_html=True)