ChattyBot3000

{"name":"ChattyBot3000","description":"Build a fun and interactive AI chatbot that can engage in conversations, answer questions, and tell jokes.","photo":null,"view_count":5,"fork_count":0,"expires_at":null,"created_at":"2024-04-09T19:24:42.231387Z","updated_at":"2024-04-09T19:24:42.231393Z","user_id":5,"status":"PUBLIC","parent_id":1093,"id":1103,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"const promoCodes = {\n \"SOLAR2024\": 24,\n \"MOREMIXTRAL\": 50,\n};\nlet currentSessionId = null;\nlet chatSessions = JSON.parse(localStorage.getItem('chatSessions') || '{}');\n\nfunction saveChatSession() {\n localStorage.setItem('chatSessions', JSON.stringify(chatSessions));\n}\nfunction addChatToSession(message, sender) {\n if (!currentSessionId) {\n currentSessionId = `Session-${new Date().getTime()}`;\n chatSessions[currentSessionId] = [];\n updateChatListUI(currentSessionId);\n }\n chatSessions[currentSessionId].push({ message, sender });\n saveChatSession();\n}\nfunction updateChatListUI(sessionId) {\n const chatList = document.getElementById('chat-list');\n const listItem = document.createElement('li');\n listItem.textContent = sessionId; // For simplicity, using the sessionId as the display text\n listItem.addEventListener('click', () => selectChatSession(sessionId));\n chatList.appendChild(listItem);\n}\ndocument.addEventListener('DOMContentLoaded', function () {\n let credits = loadCredits();\n Object.keys(chatSessions).forEach(sessionId => {\n updateChatListUI(sessionId);\n });\n function redeemPromoCode(code) {\n const redeemedCodes = JSON.parse(localStorage.getItem('redeemedCodes') || '[]'); // Load redeemed codes list, or initialize as empty array\n if (redeemedCodes.includes(code.toUpperCase())) {\n return \"This promo code has already been redeemed.\";\n } else {\n const value = promoCodes[code.toUpperCase()];\n if (value) {\n credits += value;\n saveCredits(credits);\n updateCreditsDisplay();\n\n redeemedCodes.push(code.toUpperCase()); // Add code to redeemed list\n localStorage.setItem('redeemedCodes', JSON.stringify(redeemedCodes)); // Save updated list back to localStorage\n return `Success! ${value} credits have been added to your account.`;\n } else {\n return \"Sorry, that's not a valid promo code.\";\n }\n }\n }\n if (credits === null) {\n credits = 5000; // If no credits found, initialize with 5000 credits\n saveCredits(credits); // Save the initialized value for first-time visitors\n }\n updateCreditsDisplay();\n\n const sendButton = document.getElementById('send-btn');\n const userInput = document.getElementById('user-input');\n const chatBox = document.getElementById('chat-box');\n\n sendButton.addEventListener('click', function () {\n const userText = userInput.value.trim();\n if (userText.length === 0) return; // Don't do anything if input is empty\n\n // Check if the input is a promo code command\n if (userText.startsWith(\"!promo \")) {\n const code = userText.split(\" \")[1]; // Extract the code from the input\n const response = redeemPromoCode(code);\n displayMessage(userText, 'user');\n displayMessage(response, 'bot');\n } else {\n const cost = calculateCost(userText);\n if (credits >= cost) {\n credits -= cost;\n saveCredits(credits);\n updateCreditsDisplay();\n\n displayMessage(userText, 'user');\n fetchAIResponse(userText);\n } else {\n displayMessage(\"You don't have enough credits to send this message.\", 'bot');\n }\n }\n userInput.value = ''; // Clear input field after sending\n });\n function displayMessage(message, sender) {\n const messageElement = document.createElement('div');\n messageElement.textContent = message;\n messageElement.className = sender;\n chatBox.appendChild(messageElement);\n // Add message to the current chat session\n addChatToSession(message, sender);\n}\n async function fetchAIResponse(message) {\n const data = {\n messages: [{ role: \"user\", content: message }],\n model: \"mixtral-8x7b-32768\"\n };\n\n try {\n const response = await fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": \"Bearer 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\", // Replace YOUR_GROQ_API_KEY with your actual API key\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(data)\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const jsonResponse = await response.json();\n // Assuming the API returns the response in a format where the reply is in jsonResponse.choices[0].message.content\n // Adjust according to the actual API response format\n const aiText = jsonResponse.choices[0].message.content;\n displayMessage(aiText, 'bot');\n\n } catch (error) {\n console.error(\"Error fetching response: \", error);\n displayMessage(\"Sorry, I couldn't fetch a response. Please try again later.\", 'bot');\n }\n }\n userInput.addEventListener('input', function () {\n let costElement = document.getElementById('message-cost');\n if (!costElement) {\n costElement = document.createElement('div');\n costElement.id = 'message-cost';\n document.body.appendChild(costElement);\n }\n if (userInput.value.trim().length > 0) {\n costElement.style.display = 'block'; // Show cost display when user starts typing\n const cost = calculateCost(userInput.value.trim());\n costElement.textContent = `Message will cost: ${cost} credits.`;\n } else {\n costElement.style.display = 'none'; // Hide cost display when input is cleared\n }\n });\n function calculateCost(message) {\n const charCount = message.length;\n const wordCount = message.trim().split(/\\s+/).length;\n const extraCharCredits = Math.floor(charCount / 12);\n const extraWordCredits = Math.floor(wordCount / 5) * 2;\n return 5 + extraCharCredits + extraWordCredits;\n }\n\n function updateCreditsDisplay() {\n document.getElementById('credits-display').textContent = `Credits: ${credits}`;\n }\n\n function saveCredits(credits) {\n localStorage.setItem('credits', credits.toString()); // Convert number to string for storage\n }\n\n function loadCredits() {\n const credits = localStorage.getItem('credits');\n return credits ? parseInt(credits, 10) : null; // Convert back to number, or return null if not found\n }\n});\n\n\nfunction selectChatSession(sessionId) {\n currentSessionId = sessionId;\n chatBox.innerHTML = ''; // Clear the chat box\n // Display all messages from the selected session\n chatSessions[sessionId].forEach(({ message, sender }) => {\n displayMessage(message, sender);\n });\n}","style.css":"body {\r\n display: flex;\r\n margin: 0; /* Ensure there's no default margin */\r\n height: 100vh; /* Make the body take the full height of the viewport */\r\n overflow: hidden; /* Prevent scrolling on the body directly */\r\n}\r\n\r\n#credits-display,\r\n#message-cost {\r\n background-color: #007bff;\r\n color: white;\r\n padding: 10px;\r\n border-radius: 20px;\r\n position: fixed;\r\n font-size: 16px;\r\n z-index: 10;\r\n}\r\n\r\n#sidebar {\r\n width: 20%;\r\n background-color: #f2f2f2;\r\n padding: 10px;\r\n overflow-y: auto; /* Allow scrolling within the sidebar */\r\n}\r\n#main-content {\r\n width: 80%;\r\n padding-left: 20px;\r\n}\r\n\r\n/* Add styles for the chat list */\r\n#chat-list {\r\n list-style: none;\r\n padding: 0;\r\n}\r\n\r\n#chat-list li {\r\n padding: 10px;\r\n border-bottom: 1px solid #ddd;\r\n}\r\n\r\n#credits-display {\r\n top: 10px;\r\n left: 10px;\r\n}\r\n\r\n#message-cost {\r\n bottom: 10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: none;\r\n /* Initially hidden */\r\n}\r\n\r\n\r\n\r\n#chat-container {\r\n width: 80%;\r\n max-width: 600px;\r\n margin: 60px auto 20px auto;\r\n /* Increased top margin to accommodate credits display */\r\n border: 1px solid #ccc;\r\n padding: 20px;\r\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n background-color: white;\r\n position: relative;\r\n box-sizing: border-box;\r\n}\r\n\r\n#chat-box {\r\n height: 400px;\r\n overflow-y: auto;\r\n margin-bottom: 20px;\r\n padding: 10px;\r\n background-color: #fff;\r\n border: 1px solid #eee;\r\n}\r\n\r\n#user-input {\r\n width: calc(100% - 120px);\r\n padding: 10px;\r\n margin-right: 10px;\r\n border: 1px solid #ddd;\r\n box-sizing: border-box;\r\n}\r\n\r\n#send-btn {\r\n width: 100px;\r\n padding: 10px;\r\n background-color: #007bff;\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n#send-btn:hover {\r\n background-color: #0056b3;\r\n}\r\n\r\n.user,\r\n.bot {\r\n padding: 10px;\r\n border-radius: 5px;\r\n margin-bottom: 10px;\r\n display: inline-block;\r\n max-width: 80%;\r\n}\r\n\r\n.user {\r\n background-color: #dcf8c6;\r\n margin-left: 20%;\r\n text-align: right;\r\n}\r\n\r\n.bot {\r\n background-color: #eaeaea;\r\n}","index.html":"\n\n\n \n \n ChattyBot3000\n \n\n\n \n

Credits: 5000

\n \n \n

\n \n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"title":"Rule-based conversation handling","instruction":"Implement a rule-based system to handle basic conversations and responses.","created_at":"2024-04-09T03:33:25.521449","project_id":1103,"complete":false,"step_number":0,"updated_at":"2024-04-09T19:24:42.236223","id":5644},{"title":"User input processing","instruction":"Process user input to understand questions and prompts.","created_at":"2024-04-09T03:33:25.521511","project_id":1103,"complete":false,"step_number":1,"updated_at":"2024-04-09T19:24:42.236415","id":5645},{"title":"Answering questions","instruction":"Enable the chatbot to provide informative and engaging responses to user questions.","created_at":"2024-04-09T03:33:25.521555","project_id":1103,"complete":false,"step_number":2,"updated_at":"2024-04-09T19:24:42.236525","id":5646},{"title":"Joke-telling capability","instruction":"Incorporate a feature that allows the chatbot to tell jokes and engage users with humor.","created_at":"2024-04-09T03:33:25.521595","project_id":1103,"complete":false,"step_number":3,"updated_at":"2024-04-09T19:24:42.236603","id":5647},{"title":"Natural Language Processing (NLP) integration","instruction":"Explore the use of pre-built NLP libraries to enhance the chatbot's capabilities.","created_at":"2024-04-09T03:33:25.521634","project_id":1103,"complete":false,"step_number":4,"updated_at":"2024-04-09T19:24:42.236676","id":5648},{"title":"Interactive conversation flow","instruction":"Design an interactive conversation flow to keep users engaged and entertained.","created_at":"2024-04-09T03:33:25.521674","project_id":1103,"complete":false,"step_number":5,"updated_at":"2024-04-09T19:24:42.236742","id":5649},{"title":"Error handling and fallback responses","instruction":"Implement error handling and fallback responses for cases where the chatbot doesn't understand the input.","created_at":"2024-04-09T03:33:25.521713","project_id":1103,"complete":false,"step_number":6,"updated_at":"2024-04-09T19:24:42.236816","id":5650},{"title":"Personalization and customization","instruction":"Explore options for personalizing the chatbot's responses based on user interactions and preferences.","created_at":"2024-04-09T03:33:25.521751","project_id":1103,"complete":false,"step_number":7,"updated_at":"2024-04-09T19:24:42.236889","id":5651}]}