Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chat Copilot</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| #sidebar { | |
| background-color: #f8f9fa; | |
| padding: 10px; | |
| overflow-y: auto; | |
| height: 100vh; | |
| } | |
| #chat { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow-y: hidden; | |
| } | |
| #chat-messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 10px; | |
| } | |
| #chat-input { | |
| padding: 10px; | |
| border-top: 1px solid #e9ecef; | |
| } | |
| #documentsTab { | |
| padding: 20px; | |
| } | |
| .file-upload { | |
| display: none; | |
| } | |
| .file-icon { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 100%; | |
| background-color: #4caf50; | |
| } | |
| .container-fluid { | |
| overflow-y: auto; | |
| } | |
| .form-label { | |
| font-weight: bold; | |
| } | |
| .list-group-item { | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #800080;"> | |
| <div class="container-fluid"> | |
| <a class="navbar-brand" href="#">Groqlet Expendables</a> | |
| <div class="d-flex align-items-center"> | |
| <a class="nav-link text-white" href="#" style="margin-right: 10px;"> | |
| <i class="bi bi-plug"></i> Plugins | |
| </a> | |
| <img src="user-icon-url" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;"> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="row"> | |
| <!-- Sidebar --> | |
| <div class="col-12 col-md-3" id="sidebar"> | |
| <div class="d-flex justify-content-between align-items-center mb-2"> | |
| <h4>Chat</h4> | |
| <button class="btn btn-primary btn-sm" id="addChatBtn">+</button> | |
| </div> | |
| <ul class="list-group" id="chatList"> | |
| <!-- Dynamically populated agents list of chat items --> | |
| <!-- <li class="list-group-item"> | |
| <div class="d-flex justify-content-between"> | |
| <span>Can you tell me a story?</span> | |
| <small>11:10 PM</small> | |
| </div> | |
| </li> --> | |
| </ul> | |
| </div> | |
| <!-- Context menu for renaming chat items --> | |
| <div id="contextMenu" class="dropdown-menu" style="display:none; position:absolute;"> | |
| <a class="dropdown-item" href="#" id="renameItem">Rename</a> | |
| </div> | |
| <!-- Chat --> | |
| <div class="col-12 col-md-9 d-flex flex-column" id="chat"> | |
| <ul class="nav nav-tabs"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" data-bs-toggle="tab" href="#chatTab">Chat</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-bs-toggle="tab" href="#documentsTab">Documents</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-bs-toggle="tab" href="#plansTab">Plans</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" data-bs-toggle="tab" href="#personasTab">Personas</a> | |
| </li> | |
| </ul> | |
| <div class="tab-content flex-grow-1"> | |
| <div class="tab-pane fade show active" id="chatTab"> | |
| <div id="chat-messages"> | |
| <div class="chat-message"> | |
| <strong>Copilot</strong> | |
| <p>Hello, thank you for democratizing AI's productivity benefits with open source! How can I help you today?</p> | |
| </div> | |
| <div class="chat-message"> | |
| <strong>MB</strong> | |
| <p>Can you tell me a story about a prince in a paragraph?</p> | |
| </div> | |
| </div> | |
| <div id="chat-input" class="d-flex"> | |
| <input type="text" class="form-control me-2" placeholder="Type a message..." id="messageInput"> | |
| <button class="btn btn-primary" id="sendBtn">Send</button> | |
| </div> | |
| </div> | |
| <div class="tab-pane fade" id="documentsTab"> | |
| <!-- Content for Documents tab --> | |
| <div class="d-flex justify-content-between align-items-center mb-2"> | |
| <h4>Documents</h4> | |
| <button class="btn btn-primary btn-sm" id="uploadBtn">Upload</button> | |
| <input type="file" id="fileInput" class="file-upload"> | |
| </div> | |
| <div class="d-flex mb-2"> | |
| <div class="form-check me-3"> | |
| <input class="form-check-input" type="radio" name="vectorDatabase" id="volatile" value="volatile"> | |
| <label class="form-check-label" for="volatile">Volatile</label> | |
| </div> | |
| <div class="form-check me-3"> | |
| <input class="form-check-input" type="radio" name="vectorDatabase" id="textFile" value="textFile" checked> | |
| <label class="form-check-label" for="textFile">TextFile</label> | |
| </div> | |
| <div class="form-check me-3"> | |
| <input class="form-check-input" type="radio" name="vectorDatabase" id="qdrant" value="qdrant"> | |
| <label class="form-check-label" for="qdrant">Qdrant</label> | |
| </div> | |
| <div class="form-check"> | |
| <input class="form-check-input" type="radio" name="vectorDatabase" id="llamaindexSearch" value="llamaindexSearch"> | |
| <label class="form-check-label" for="llamaindexSearch">llamaindex Search</label> | |
| </div> | |
| </div> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Name</th> | |
| <th>Created on</th> | |
| <th>Size (bytes)</th> | |
| <th>Access</th> | |
| <th>Progress</th> | |
| </tr> | |
| </thead> | |
| <tbody id="fileTable"> | |
| <tr> | |
| <td><i class="bi bi-file-earmark-text file-icon"></i> reconciliation.txt</td> | |
| <td>9:38 am</td> | |
| <td>30,079</td> | |
| <td>This chat</td> | |
| <td><div class="progress"><div class="progress-bar"></div></div></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="tab-pane fade" id="plansTab"> | |
| <!-- Content for Plans tab --> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>Goal</th> | |
| <th>Created on</th> | |
| <th>Token Count</th> | |
| </tr> | |
| </thead> | |
| <tbody id="planTable"> | |
| <tr> | |
| <td>askQuestions</td> | |
| <td>9:38 am</td> | |
| <td>30,079</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="tab-pane fade" id="personasTab"> | |
| <!-- Content for Personas tab --> | |
| <div class="container-fluid p-3"> | |
| <h4>Persona</h4> | |
| <div class="mb-3"> | |
| <label for="agentNameInput" class="form-label">Agent Name</label> | |
| <input type="text" class="form-control" id="agentNameInput" placeholder="Enter your agent's name..."> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="metaPromptInput" class="form-label">Meta Prompt</label> | |
| <textarea class="form-control" id="metaPromptInput" rows="3" placeholder="Enter your Meta Prompt..."></textarea> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="prefillInput" class="form-label">Prefill</label> | |
| <textarea class="form-control" id="prefillInput" rows="3" placeholder="Enter agent's prefill..."></textarea> | |
| </div> | |
| <div class="d-flex justify-content-end"> | |
| <button class="btn btn-primary" id="savePlanBtn">Save</button> | |
| </div> | |
| <hr> | |
| <h5>Saved Plans</h5> | |
| <ul class="list-group" id="savedPlansList"> | |
| <!-- Dynamically populated list of saved plans --> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> | |
| <script> | |
| let agents = [ | |
| { | |
| "Persona": { | |
| "agentname": "dinkan-1", | |
| "metaprompt": "you are a helpful assistant", | |
| "prefill": "helps me with financial Reconciliation", | |
| "tooluse": "true", | |
| "filesearch": "true", | |
| "codeinterpreter": "true" | |
| }, | |
| "Plans": [ | |
| { "name": "askquestion", "createon": "06/8/2024", "tokencount": "2048" } | |
| ], | |
| "Documents": [ | |
| { "file": "./reconciliation.txt", "createon": "06/8/2024", "size": "30,079", "Access": "private", "progress": "success" }, | |
| { "file": "./design.pdf", "createon": "07/8/2024", "size": "30,079", "Access": "public", "progress": "error" } | |
| ], | |
| "Chat": [ | |
| {"role": "system", "content":"Hello, thank you for democratizing AI's productivity benefits with open source! How can I help you today?"}, | |
| { "role": "assistant", "content": "what is the capital of India" }, | |
| { "role": "user", "content": "New Delhi is the capital of India" } | |
| ] | |
| }, | |
| { | |
| "Persona": { | |
| "agentname": "dinkan-2", | |
| "metaprompt": "you are a helpful assistant", | |
| "prefill": "helps me with financial Reconciliation", | |
| "tooluse": "true", | |
| "filesearch": "false", | |
| "codeinterpreter": "false" | |
| }, | |
| "Plans": [ | |
| { "name": "calculate", "createon": "07/8/2024", "tokencount": "1024" } | |
| ], | |
| "Documents": [ | |
| { "file": "./design.txt", "createon": "08/8/2024", "size": "30,079", "Access": "private", "progress": "success" }, | |
| { "file": "./design.pdf", "createon": "09/8/2024", "size": "30,079", "Access": "public", "progress": "error" } | |
| ], | |
| "Chat": [ | |
| {"role": "system", "content":"Hello, thank you for democratizing AI's productivity benefits with open source! How can I help you today?"}, | |
| { "role": "assistant", "content": "what is the capital of Kerala" }, | |
| { "role": "user", "content": "Trivandrum is the capital of India" } | |
| ] | |
| } | |
| ]; | |
| let selectedAgentIndex = -1; | |
| function populateTabs() { | |
| if (selectedAgentIndex >= 0) { | |
| const selectedAgent = agents[selectedAgentIndex]; | |
| // Populate Personas tab | |
| const agentNameInput = document.getElementById('agentNameInput'); | |
| const metaPromptInput = document.getElementById('metaPromptInput'); | |
| const prefillInput = document.getElementById('prefillInput'); | |
| agentNameInput.value = agents[selectedAgentIndex].Persona.agentname; | |
| metaPromptInput.value = agents[selectedAgentIndex].Persona.metaprompt; | |
| prefillInput.value = agents[selectedAgentIndex].Persona.prefill; | |
| // Populate Plans tab | |
| // Clear and repopulate the plans table or list with selectedAgent.Plans | |
| const planTable = document.getElementById('planTable'); | |
| planTable.innerHTML = ''; | |
| agents[selectedAgentIndex].Plans.forEach(plan => { | |
| const newRow = `<tr> | |
| <td>${plan.name}</td> | |
| <td>${plan.createon}</td> | |
| <td>${plan.tokencount}</td> | |
| </tr>`; | |
| planTable.insertAdjacentHTML('beforeend', newRow); | |
| }); | |
| // Populate Documents tab | |
| // Clear and repopulate the documents table with selectedAgent.Documents | |
| const fileTable = document.getElementById('fileTable'); | |
| fileTable.innerHTML = ''; | |
| agents[selectedAgentIndex].Documents.forEach(doc => { | |
| const newRow = `<tr> | |
| <td><i class="bi bi-file-earmark-text file-icon"></i> ${doc.file}</td> | |
| <td>${doc.createon}</td> | |
| <td>${doc.size}</td> | |
| <td>${doc.Access}</td> | |
| <td><div class="progress"><div class="progress-bar"></div></div></td> | |
| </tr>`; | |
| fileTable.insertAdjacentHTML('beforeend', newRow); | |
| }); | |
| // Display initial messages | |
| //displayMessages(); | |
| } | |
| } | |
| function renderChatList() { | |
| const chatList = document.getElementById('chatList'); | |
| chatList.innerHTML = ''; // Clear the existing list | |
| agents.forEach((agent, index) => { | |
| const newItem = document.createElement('li'); | |
| newItem.className = 'list-group-item'; | |
| newItem.innerHTML = `<div class="d-flex justify-content-between"> | |
| <span>${agent.Persona.agentname}</span> | |
| <small>${new Date().toLocaleTimeString()}</small> | |
| </div>`; | |
| newItem.setAttribute('data-index', index); | |
| newItem.setAttribute('data-messages', JSON.stringify(agent.Chat)); | |
| newItem.addEventListener('click', function() { | |
| selectedAgentIndex = parseInt(this.getAttribute('data-index')); | |
| displayMessages(); | |
| populateTabs(); | |
| }); | |
| newItem.addEventListener('contextmenu', function(e) { | |
| e.preventDefault(); | |
| showContextMenu(e, newItem, index); | |
| }); | |
| chatList.appendChild(newItem); | |
| }); | |
| } | |
| // Event listener for add chat button - Sidebar | |
| document.getElementById('addChatBtn').addEventListener('click', function() { | |
| var chatList = document.getElementById('chatList'); | |
| var newItem = document.createElement('li'); | |
| newItem.className = 'list-group-item'; | |
| newItem.innerHTML = `<div class="d-flex justify-content-between"> | |
| <span>New Agent</span> | |
| <small>${new Date().toLocaleTimeString()}</small> | |
| </div>`; | |
| newItem.setAttribute('data-messages', JSON.stringify([])); | |
| chatList.appendChild(newItem); | |
| // Add new agent to agents array | |
| var newAgent = { | |
| "Persona": { | |
| "agentname": `agent-${Date.now()}`, | |
| "metaprompt": "you are a helpful assistant", | |
| "prefill": "helps me with financial Reconciliation", | |
| "tooluse": "true", | |
| "filesearch": "false", | |
| "codeinterpreter": "false" | |
| }, | |
| "Plans": [], | |
| "Documents": [], | |
| "Chat": [] | |
| }; | |
| agents.push(newAgent); | |
| renderChatList(); | |
| }); | |
| // Show context menu | |
| function showContextMenu(event, listItem) { | |
| var contextMenu = document.getElementById('contextMenu'); | |
| contextMenu.style.display = 'block'; | |
| contextMenu.style.left = event.pageX + 'px'; | |
| contextMenu.style.top = event.pageY + 'px'; | |
| document.getElementById('renameItem').onclick = function() { | |
| var newName = prompt("Enter new name:", listItem.querySelector('span').textContent); | |
| if (newName) { | |
| listItem.querySelector('span').textContent = newName; | |
| //write a code to update the agent name in agents array | |
| agents[selectedAgentIndex].Persona.agentname = newName; | |
| } | |
| contextMenu.style.display = 'none'; | |
| }; | |
| document.addEventListener('click', function() { | |
| contextMenu.style.display = 'none'; | |
| }, { once: true }); | |
| } | |
| // Event listener for existing items | |
| document.querySelectorAll('#chatList .list-group-item').forEach(item => { | |
| item.addEventListener('contextmenu', function(e) { | |
| e.preventDefault(); | |
| showContextMenu(e, item); | |
| }); | |
| }); | |
| // Function to display messages | |
| function displayMessages() { | |
| const chatMessages = document.getElementById('chat-messages'); | |
| chatMessages.innerHTML = ''; | |
| agents[selectedAgentIndex].Chat.forEach(msg => { | |
| const messageElement = document.createElement('div'); | |
| messageElement.classList.add('chat-message'); | |
| messageElement.innerHTML = `<strong>${msg.role}</strong><p>${msg.content}</p>`; | |
| chatMessages.appendChild(messageElement); | |
| }); | |
| } | |
| // Event listener for sidebar items | |
| document.querySelectorAll('#chatList .list-group-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| const newMessages = JSON.parse(this.getAttribute('data-messages')); | |
| messages = [...newMessages]; | |
| displayMessages(); | |
| }); | |
| }); | |
| // Event listener for send button | |
| document.getElementById('sendBtn').addEventListener('click', function() { | |
| const input = document.getElementById('messageInput'); | |
| const userMessage = input.value; | |
| if (userMessage) { | |
| agents[selectedAgentIndex].Chat.push({ role: 'MB', content: userMessage }); | |
| if (userMessage.toLowerCase() === 'what is the capital of india') { | |
| agents[0].Chat.push({ role: 'Copilot', content: 'New Delhi is the capital of India' }); | |
| } | |
| displayMessages(); | |
| input.value = ''; | |
| } | |
| }); | |
| // Event listener for upload button | |
| document.getElementById('uploadBtn').addEventListener('click', function() { | |
| document.getElementById('fileInput').click(); | |
| }); | |
| // Event listener for file input - Documents Tab | |
| document.getElementById('fileInput').addEventListener('change', function(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const newRow = `<tr> | |
| <td><i class="bi bi-file-earmark-text file-icon"></i> ${file.name}</td> | |
| <td>${new Date().toLocaleTimeString()}</td> | |
| <td>${file.size}</td> | |
| <td>This chat</td> | |
| <td><div class="progress"><div class="progress-bar"></div></div></td> | |
| </tr>`; | |
| document.getElementById('fileTable').insertAdjacentHTML('beforeend', newRow); | |
| } | |
| }); | |
| // Event listener for save button - Personas Tab | |
| document.getElementById('savePlanBtn').addEventListener('click', function() { | |
| const agentname = document.getElementById('agentNameInput').value; | |
| const metaprompt = document.getElementById('metaPromptInput').value; | |
| const prefill = document.getElementById('prefillInput').value; | |
| const plan = { | |
| agentname, | |
| metaprompt, | |
| prefill | |
| }; | |
| const savedPlansList = document.getElementById('savedPlansList'); | |
| const planItem = document.createElement('li'); | |
| planItem.classList.add('list-group-item'); | |
| planItem.textContent = `Agent Name: ${agentname}`; | |
| planItem.addEventListener('click', function() { | |
| alert(`Meta Prompt: ${plan.metaprompt}\nPrefill: ${plan.prefill}`); | |
| }); | |
| savedPlansList.appendChild(planItem); | |
| // Clear the inputs after saving | |
| document.getElementById('agentNameInput').value = ''; | |
| document.getElementById('metaPromptInput').value = ''; | |
| document.getElementById('prefillInput').value = ''; | |
| }); | |
| // Initial rendering of the chat list | |
| renderChatList(); | |
| // Populate tabs initially (if needed) | |
| populateTabs(); | |
| </script> | |
| </body> | |
| </html> | |