Spaces:

uumerrr684
/

chatflow

Sleeping

App Files Files Community

uumerrr684 commited on Aug 14

Commit

02b76be

verified ·

1 Parent(s): 1aa5a0c

Update app.py

Browse files

Files changed (1) hide show

app.py +314 -40

app.py CHANGED Viewed

@@ -16,15 +16,24 @@
             0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
             50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
         }
         .loading-dot-1 { animation-delay: 0s; }
         .loading-dot-2 { animation-delay: 0.1s; }
         .loading-dot-3 { animation-delay: 0.2s; }
     </style>
 </head>
 <body class="bg-gray-900 text-white h-screen overflow-hidden">
-    <div class="flex h-screen">
         <!-- Sidebar -->
-        <div class="w-80 bg-gray-800 border-r border-gray-700 flex flex-col">
             <!-- Header -->
             <div class="p-4 border-b border-gray-700">
                 <div class="flex items-center gap-3 mb-4">
@@ -35,7 +44,7 @@
                     </div>
                     <h1 class="text-xl font-semibold">Chat Flow</h1>
                 </div>
-                <button id="newChatBtn" class="w-full flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                     </svg>
@@ -43,8 +52,27 @@
                 </button>
             </div>
             <!-- Settings -->
-            <div class="p-4 border-t border-gray-700 space-y-4 flex-1">
                 <!-- Online Users -->
                 <div>
                     <h3 class="text-sm font-medium text-gray-400 mb-2">👥 Who's Online</h3>
@@ -80,23 +108,25 @@
                 </div>
                 <!-- Controls -->
-                <div class="flex gap-2">
-                    <button id="clearBtn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Clear Chat">
-                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                         </svg>
                     </button>
-                    <button id="refreshBtn" class="flex-1 flex items-center justify-center px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-sm" title="Refresh">
-                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                         </svg>
                     </button>
                 </div>
             </div>
         </div>
         <!-- Main Chat Area -->
-        <div class="flex-1 flex flex-col">
             <!-- Chat Messages -->
             <div id="messagesContainer" class="flex-1 overflow-y-auto chat-scroll">
                 <!-- Welcome Screen -->
@@ -151,9 +181,12 @@
         // Global variables
         let messages = [];
         let selectedModel = 'openai/gpt-3.5-turbo';
         let isLoading = false;
         let userId = 'User-' + Math.random().toString(36).substr(2, 8);
         const models = {
             'openai/gpt-3.5-turbo': 'GPT-3.5 Turbo',
@@ -169,14 +202,19 @@
         };
         // Initialize app
-        document.addEventListener('DOMContentLoaded', function() {
             console.log('App starting...');
             setupEventListeners();
             updateUserDisplay();
             console.log('App ready!');
         });
         function setupEventListeners() {
             // Send button
             document.getElementById('sendBtn').onclick = function() {
                 console.log('Send button clicked');
@@ -206,6 +244,11 @@
                 console.log('New chat started');
             };
             // Clear chat
             document.getElementById('clearBtn').onclick = function() {
                 messages = [];
@@ -213,14 +256,83 @@
                 console.log('Chat cleared');
             };
-            // Refresh
-            document.getElementById('refreshBtn').onclick = function() {
-                window.location.reload();
             };
             console.log('Event listeners setup complete');
         }
         async function sendMessage() {
             const input = document.getElementById('messageInput');
             const message = input.value.trim();
@@ -243,12 +355,8 @@
             setLoading(true);
             try {
-                const response = await getAIResponse(message);
-                messages.push({
-                    role: 'assistant',
-                    content: response
-                });
-                updateDisplay();
             } catch (error) {
                 console.error('Error:', error);
                 messages.push({
@@ -261,15 +369,25 @@
             setLoading(false);
         }
-        async function getAIResponse(userMessage) {
-            console.log('Getting AI response...');
             const apiMessages = [{
                 role: "system",
-                content: "You are a helpful AI assistant."
             }];
-            messages.forEach(msg => {
                 if (msg.role !== 'assistant' || !msg.content.includes('Response created by:')) {
                     apiMessages.push({
                         role: msg.role,
@@ -289,6 +407,7 @@
                 body: JSON.stringify({
                     model: selectedModel,
                     messages: apiMessages,
                     max_tokens: 2000,
                     temperature: 0.7
                 })
@@ -298,11 +417,77 @@
                 throw new Error('API Error: ' + response.status);
             }
-            const data = await response.json();
-            const aiResponse = data.choices[0].message.content;
-            const modelName = models[selectedModel] || "AI";
-            return aiResponse + "\n\n---\n*Response created by: **" + modelName + "***";
         }
         function updateDisplay() {
@@ -361,18 +546,107 @@
             btn.disabled = loading;
             input.disabled = loading;
-            if (loading) {
-                btn.innerHTML = '<div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div> Loading...';
-            } else {
-                btn.innerHTML = '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg> Send';
-            }
         }
         function updateUserDisplay() {
             document.getElementById('currentUser').textContent = 'You: ' + userId;
             document.getElementById('onlineStatus').textContent = 'Just you online';
         }
-    </script>
-</body>
-</html>

             0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
             50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
         }
+        .sidebar-transition { transition: transform 0.3s ease-in-out; }
+        .sidebar-hidden { transform: translateX(-100%); }
         .loading-dot-1 { animation-delay: 0s; }
         .loading-dot-2 { animation-delay: 0.1s; }
         .loading-dot-3 { animation-delay: 0.2s; }
     </style>
 </head>
 <body class="bg-gray-900 text-white h-screen overflow-hidden">
+    <div class="flex h-screen relative">
         <!-- Sidebar -->
+        <div id="sidebar" class="w-80 bg-gray-800 border-r border-gray-700 flex flex-col sidebar-transition z-10">
+            <!-- Sidebar Toggle Button -->
+            <button id="sidebarToggle" class="absolute -right-8 top-4 bg-black text-white p-2 rounded-r-lg hover:bg-gray-800 transition-colors z-20">
+                <svg id="toggleIcon" class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                </svg>
+            </button>
             <!-- Header -->
             <div class="p-4 border-b border-gray-700">
                 <div class="flex items-center gap-3 mb-4">
                     </div>
                     <h1 class="text-xl font-semibold">Chat Flow</h1>
                 </div>
+                <button id="newChatBtn" class="w-full flex items-center gap-2 px-4 py-2 bg-black text-white hover:bg-gray-800 rounded-lg transition-colors">
                     <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
                     </svg>
                 </button>
             </div>
+            <!-- Chat History -->
+            <div class="flex-1 overflow-y-auto p-4 chat-scroll">
+                <h3 class="text-sm font-medium text-gray-400 mb-3">💬 Chat History</h3>
+                <div id="chatHistoryList" class="space-y-2">
+                    <p class="text-gray-500 text-sm">No saved chats yet</p>
+                </div>
+                <button id="saveCurrentChatBtn" class="w-full mt-3 px-3 py-2 bg-black text-white hover:bg-gray-800 rounded-lg transition-colors text-sm">
+                    💾 Save Current Chat
+                </button>
+            </div>
             <!-- Settings -->
+            <div class="p-4 border-t border-gray-700 space-y-4">
+                <!-- Location Info -->
+                <div>
+                    <h3 class="text-sm font-medium text-gray-400 mb-2">📍 Your Location</h3>
+                    <div class="bg-gray-700 rounded-lg p-2 text-xs">
+                        <div id="locationInfo" class="text-green-400">🌍 Getting location...</div>
+                    </div>
+                </div>
                 <!-- Online Users -->
                 <div>
                     <h3 class="text-sm font-medium text-gray-400 mb-2">👥 Who's Online</h3>
                 </div>
                 <!-- Controls -->
+                <div class="grid grid-cols-2 gap-2">
+                    <button id="downloadBtn" class="flex items-center justify-center px-3 py-2 bg-black text-white hover:bg-gray-800 rounded-lg transition-colors text-sm" title="Download History">
+                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                         </svg>
+                        Download
                     </button>
+                    <button id="clearBtn" class="flex items-center justify-center px-3 py-2 bg-black text-white hover:bg-gray-800 rounded-lg transition-colors text-sm" title="Clear Chat">
+                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24">
+                            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                         </svg>
+                        Clear
                     </button>
                 </div>
             </div>
         </div>
         <!-- Main Chat Area -->
+        <div id="mainArea" class="flex-1 flex flex-col transition-all duration-300">
             <!-- Chat Messages -->
             <div id="messagesContainer" class="flex-1 overflow-y-auto chat-scroll">
                 <!-- Welcome Screen -->
         // Global variables
         let messages = [];
+        let savedChats = JSON.parse(localStorage.getItem('chatHistory') || '[]');
         let selectedModel = 'openai/gpt-3.5-turbo';
         let isLoading = false;
         let userId = 'User-' + Math.random().toString(36).substr(2, 8);
+        let userLocation = { city: 'Unknown', country: 'Unknown' };
+        let sidebarVisible = true;
         const models = {
             'openai/gpt-3.5-turbo': 'GPT-3.5 Turbo',
         };
         // Initialize app
+        document.addEventListener('DOMContentLoaded', async function() {
             console.log('App starting...');
             setupEventListeners();
+            await getUserLocation();
             updateUserDisplay();
+            updateChatHistory();
             console.log('App ready!');
         });
         function setupEventListeners() {
+            // Sidebar toggle
+            document.getElementById('sidebarToggle').onclick = toggleSidebar;
             // Send button
             document.getElementById('sendBtn').onclick = function() {
                 console.log('Send button clicked');
                 console.log('New chat started');
             };
+            // Save current chat
+            document.getElementById('saveCurrentChatBtn').onclick = function() {
+                saveCurrentChat();
+            };
             // Clear chat
             document.getElementById('clearBtn').onclick = function() {
                 messages = [];
                 console.log('Chat cleared');
             };
+            // Download chat
+            document.getElementById('downloadBtn').onclick = function() {
+                downloadCurrentChat();
             };
             console.log('Event listeners setup complete');
         }
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            const mainArea = document.getElementById('mainArea');
+            const toggleIcon = document.getElementById('toggleIcon');
+            sidebarVisible = !sidebarVisible;
+            if (sidebarVisible) {
+                sidebar.classList.remove('sidebar-hidden');
+                toggleIcon.innerHTML = '<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>';
+            } else {
+                sidebar.classList.add('sidebar-hidden');
+                toggleIcon.innerHTML = '<path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>';
+            }
+        }
+        // Get user's real location (like your Streamlit code)
+        async function getUserLocation() {
+            try {
+                if (navigator.geolocation) {
+                    const position = await new Promise((resolve, reject) => {
+                        navigator.geolocation.getCurrentPosition(resolve, reject, {
+                            timeout: 10000,
+                            enableHighAccuracy: false
+                        });
+                    });
+                    const { latitude, longitude } = position.coords;
+                    // Use reverse geocoding
+                    try {
+                        const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`);
+                        const data = await response.json();
+                        userLocation = {
+                            city: data.city || data.locality || 'Unknown',
+                            country: data.countryName || 'Unknown'
+                        };
+                    } catch (geocodeError) {
+                        await getLocationByIP();
+                    }
+                } else {
+                    await getLocationByIP();
+                }
+            } catch (error) {
+                await getLocationByIP();
+            }
+            updateLocationDisplay();
+        }
+        async function getLocationByIP() {
+            try {
+                const response = await fetch('https://ipapi.co/json/');
+                const data = await response.json();
+                userLocation = {
+                    city: data.city || 'Unknown',
+                    country: data.country_name || 'Unknown'
+                };
+            } catch (error) {
+                userLocation = { city: 'Unknown', country: 'Unknown' };
+            }
+        }
+        function updateLocationDisplay() {
+            document.getElementById('locationInfo').textContent = `📍 ${userLocation.city}, ${userLocation.country}`;
+        }
         async function sendMessage() {
             const input = document.getElementById('messageInput');
             const message = input.value.trim();
             setLoading(true);
             try {
+                // Start streaming response - like your Streamlit code
+                await streamAIResponse(message);
             } catch (error) {
                 console.error('Error:', error);
                 messages.push({
             setLoading(false);
         }
+        // Streaming implementation like your Streamlit code
+        async function streamAIResponse(userMessage) {
+            console.log('Starting stream...');
+            // Add empty assistant message for streaming
+            messages.push({
+                role: 'assistant',
+                content: ''
+            });
+            updateDisplay();
             const apiMessages = [{
                 role: "system",
+                content: "You are a helpful AI assistant. Provide clear and helpful responses."
             }];
+            // Build conversation history (like your Streamlit extend)
+            messages.slice(0, -1).forEach(msg => {
                 if (msg.role !== 'assistant' || !msg.content.includes('Response created by:')) {
                     apiMessages.push({
                         role: msg.role,
                 body: JSON.stringify({
                     model: selectedModel,
                     messages: apiMessages,
+                    stream: true, // Enable streaming like Streamlit
                     max_tokens: 2000,
                     temperature: 0.7
                 })
                 throw new Error('API Error: ' + response.status);
             }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let fullResponse = '';
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    const chunk = decoder.decode(value, { stream: true });
+                    const lines = chunk.split('\n');
+                    for (const line of lines) {
+                        if (line.trim() === '') continue;
+                        if (line.startsWith('data: ')) {
+                            const data = line.slice(6).trim();
+                            if (data === '[DONE]') {
+                                // Finalize response with attribution (like Streamlit)
+                                const modelName = models[selectedModel] || "AI";
+                                const finalResponse = fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
+                                messages[messages.length - 1].content = finalResponse;
+                                updateDisplay();
+                                return;
+                            }
+                            if (data === '') continue;
+                            try {
+                                const parsed = JSON.parse(data);
+                                const delta = parsed.choices?.[0]?.delta?.content;
+                                if (delta) {
+                                    fullResponse += delta;
+                                    // Update display in real-time (like Streamlit placeholder.markdown)
+                                    updateStreamingMessage(fullResponse);
+                                }
+                            } catch (e) {
+                                continue;
+                            }
+                        }
+                    }
+                }
+            } finally {
+                reader.releaseLock();
+            }
+        }
+        function updateStreamingMessage(partialResponse) {
+            // Update the last message with streaming content + cursor
+            if (messages.length > 0) {
+                const lastMessage = messages[messages.length - 1];
+                if (lastMessage.role === 'assistant') {
+                    lastMessage.content = partialResponse;
+                    // Update display with cursor (like Streamlit "▌")
+                    const messagesArea = document.getElementById('messagesArea');
+                    const messageElements = messagesArea.children;
+                    if (messageElements.length > 0) {
+                        const lastMessageElement = messageElements[messageElements.length - 1];
+                        const contentDiv = lastMessageElement.querySelector('.whitespace-pre-wrap');
+                        if (contentDiv) {
+                            contentDiv.textContent = partialResponse + " ▌";
+                        }
+                    }
+                    messagesArea.scrollTop = messagesArea.scrollHeight;
+                }
+            }
         }
         function updateDisplay() {
             btn.disabled = loading;
             input.disabled = loading;
         }
         function updateUserDisplay() {
             document.getElementById('currentUser').textContent = 'You: ' + userId;
             document.getElementById('onlineStatus').textContent = 'Just you online';
         }
+        // Chat save functionality (like your Streamlit save_chat_history)
+        function saveCurrentChat() {
+            if (messages.length === 0) {
+                alert('No messages to save!');
+                return;
+            }
+            const title = generateChatTitle();
+            const chatData = {
+                id: Date.now(),
+                title: title,
+                messages: JSON.parse(JSON.stringify(messages)),
+                createdAt: new Date().toISOString(),
+                location: userLocation
+            };
+            savedChats.unshift(chatData);
+            localStorage.setItem('chatHistory', JSON.stringify(savedChats));
+            updateChatHistory();
+            alert('Chat saved successfully!');
+        }
+        function generateChatTitle() {
+            const firstUserMessage = messages.find(m => m.role === 'user');
+            if (!firstUserMessage) return 'Empty Chat';
+            const content = firstUserMessage.content;
+            return content.length > 30 ? content.substring(0, 30) + '...' : content;
+        }
+        function updateChatHistory() {
+            const historyList = document.getElementById('chatHistoryList');
+            if (savedChats.length === 0) {
+                historyList.innerHTML = '<p class="text-gray-500 text-sm">No saved chats yet</p>';
+                return;
+            }
+            let html = '';
+            savedChats.slice(0, 10).forEach(chat => { // Show last 10 chats
+                const date = new Date(chat.createdAt).toLocaleDateString();
+                html += `
+                    <div class="group flex items-center gap-2">
+                        <button onclick="loadChat(${chat.id})" class="flex-1 text-left px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-300 transition-colors">
+                            <div class="text-sm font-medium truncate">${chat.title}</div>
+                            <div class="text-xs text-gray-400">${date}</div>
+                        </button>
+                        <button onclick="deleteChat(${chat.id})" class="opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-400 transition-all">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+                        </button>
+                    </div>
+                `;
+            });
+            historyList.innerHTML = html;
+        }
+        function loadChat(chatId) {
+            const chat = savedChats.find(c => c.id === chatId);
+            if (chat) {
+                messages = JSON.parse(JSON.stringify(chat.messages));
+                updateDisplay();
+                console.log('Chat loaded:', chat.title);
+            }
+        }
+        function deleteChat(chatId) {
+            if (confirm('Delete this chat?')) {
+                savedChats = savedChats.filter(c => c.id !== chatId);
+                localStorage.setItem('chatHistory', JSON.stringify(savedChats));
+                updateChatHistory();
+            }
+        }
+        function downloadCurrentChat() {
+            if (messages.length === 0) {
+                alert('No messages to download!');
+                return;
+            }
+            const chatData = {
+                title: generateChatTitle(),
+                messages: messages,
+                exportedAt: new Date().toISOString(),
+                location: userLocation,
+                userId: userId
+            };
+            const dataStr = JSON.stringify(chatData, null, 2);
+            const dataBlob = new Blob([dataStr], { type: 'application/json' });
+            const url = URL.createObjectURL(dataBlob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `chat_${new Date().toISOString().split('T')[0]}.json`;
+            link.click();
+            URL.revokeObjectURL(url);