Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fetch and Display Chat History</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 20px; | |
| } | |
| label { | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| input, button { | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| font-size: 16px; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| #chat-history { | |
| border: 1px solid #ddd; | |
| padding: 20px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| background-color: #f9f9f9; | |
| } | |
| .chat-entry { | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .chat-entry .timestamp { | |
| font-size: 0.9em; | |
| color: #666; | |
| } | |
| .chat-entry .user-query { | |
| font-weight: bold; | |
| } | |
| .chat-entry .bot-response { | |
| margin-top: 5px; | |
| color: #007BFF; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Chat History Viewer</h1> | |
| <label for="url-input">Enter the URL of the chat history:</label> | |
| <input type="text" id="url-input" placeholder="https://srinukethanaboina-srunu.hf.space" /> | |
| <button onclick="fetchChatHistory()">Fetch Chat History</button> | |
| <h2>Chat History:</h2> | |
| <div id="chat-history"> | |
| <!-- Chat history will be displayed here --> | |
| </div> | |
| <script> | |
| async function fetchChatHistory() { | |
| const url = document.getElementById('url-input').value; | |
| const chatHistoryDiv = document.getElementById('chat-history'); | |
| chatHistoryDiv.innerHTML = ''; // Clear previous history | |
| if (!url) { | |
| alert('Please enter a URL'); | |
| return; | |
| } | |
| try { | |
| const response = await fetch(url); | |
| if (!response.ok) { | |
| throw new Error('Failed to fetch chat history.'); | |
| } | |
| const chatHistory = await response.json(); | |
| // Display chat history | |
| chatHistory.forEach(entry => { | |
| const chatEntryDiv = document.createElement('div'); | |
| chatEntryDiv.classList.add('chat-entry'); | |
| const timestampDiv = document.createElement('div'); | |
| timestampDiv.classList.add('timestamp'); | |
| timestampDiv.textContent = `Timestamp: ${entry.timestamp}`; | |
| const userQueryDiv = document.createElement('div'); | |
| userQueryDiv.classList.add('user-query'); | |
| userQueryDiv.textContent = `User asked: ${entry.query}`; | |
| const botResponseDiv = document.createElement('div'); | |
| botResponseDiv.classList.add('bot-response'); | |
| botResponseDiv.textContent = `Bot answered: ${entry.response}`; | |
| chatEntryDiv.appendChild(timestampDiv); | |
| chatEntryDiv.appendChild(userQueryDiv); | |
| chatEntryDiv.appendChild(botResponseDiv); | |
| chatHistoryDiv.appendChild(chatEntryDiv); | |
| }); | |
| } catch (error) { | |
| alert('Error fetching chat history: ' + error.message); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |