AI-Enhanced Chat

\n \n

\n \n \n \n \n

\n \n \n

Settings

\n AI Review Strictness\n \n 3\n

\n Enable AI Review\n \n \n \n \n

\n \n \n\n\n\nconfig.js:\n// Configuration for the AI-Enhanced Chat\nexport const config = {\n // Strictness levels for message review (1-5)\n // 1: Very lenient - Only flags serious issues\n // 5: Very strict - Flags even minor improvements\n defaultStrictness: 3,\n \n // Whether AI review is enabled by default\n reviewEnabled: true,\n \n // Review criteria descriptions\n reviewCriteria: {\n relevance: \"Is the message relevant to the ongoing conversation?\",\n clarity: \"Is the message clear and easy to understand?\",\n efficiency: \"Does the message communicate efficiently without unnecessary content?\",\n tone: \"Is the tone appropriate for the conversation?\"\n },\n \n // Threshold scores for different strictness levels (out of 10)\n thresholds: {\n 1: 3, // Very lenient\n 2: 5, // Lenient\n 3: 6.5, // Moderate\n 4: 8, // Strict\n 5: 9 // Very strict\n },\n \n // System prompt for the chat AI\n chatSystemPrompt: \"You are a helpful AI assistant providing advice and guidance. Respond to the user's questions with clear, concise, and accurate information.\",\n \n // System prompt for the review AI\n reviewSystemPrompt: `You are an AI message reviewer. Your job is to evaluate if a message is worth sending.\nAnalyze the message and the conversation context to determine if:\n1. The message is relevant to the current conversation\n2. The message is clear and adds value\n3. The message is efficient and doesn't contain unnecessary content\n4. The tone is appropriate for the conversation\n\nAlways provide an improvement suggestion when the message doesn't meet the criteria.\n\nRespond with JSON format only:\n{\n \"score\": ,\n \"shouldSend\": ,\n \"feedback\": \"\",\n \"improvement\": \"\"\n}`\n};\n\nscript.js:\nimport { config } from './config.js';\nimport { marked } from 'marked';\n\n// DOM elements\nconst chatMessages = document.getElementById('chatMessages');\nconst messageInput = document.getElementById('messageInput');\nconst sendButton = document.getElementById('sendButton');\nconst feedbackArea = document.getElementById('feedbackArea');\nconst feedbackMessage = document.getElementById('feedbackMessage');\nconst sendAnyway = document.getElementById('sendAnyway');\nconst editMessage = document.getElementById('editMessage');\nconst discardMessage = document.getElementById('discardMessage');\nconst useSuggestion = document.getElementById('useSuggestion');\nconst suggestionButtons = document.getElementById('suggestionButtons');\nconst strictnessSlider = document.getElementById('strictnessSlider');\nconst strictnessValue = document.getElementById('strictnessValue');\nconst enabledSwitch = document.getElementById('enabledSwitch');\n\n// Chat state\nlet conversationHistory = [];\nlet currentMessage = '';\nlet isReviewing = false;\nlet isWaitingForResponse = false;\nlet currentStrictness = config.defaultStrictness;\n\n// Initialize the application\nfunction init() {\n strictnessSlider.value = config.defaultStrictness;\n strictnessValue.textContent = config.defaultStrictness;\n enabledSwitch.checked = config.reviewEnabled;\n \n // Add event listeners\n messageInput.addEventListener('input', handleInputChange);\n messageInput.addEventListener('keydown', handleKeyDown);\n sendButton.addEventListener('click', handleSendAttempt);\n sendAnyway.addEventListener('click', sendMessage);\n editMessage.addEventListener('click', returnToEdit);\n discardMessage.addEventListener('click', discardCurrentMessage);\n useSuggestion.addEventListener('click', useSuggestedMessage);\n strictnessSlider.addEventListener('input', updateStrictness);\n enabledSwitch.addEventListener('change', toggleReviewFeature);\n \n // Add welcome message\n addBotMessage(\"Hello! I'm your AI assistant. Type a message and I'll review it before sending to make our conversation more efficient.\");\n}\n\n// Handle message input changes\nfunction handleInputChange() {\n currentMessage = messageInput.value.trim();\n sendButton.disabled = currentMessage === '' || isReviewing || isWaitingForResponse;\n}\n\n// Handle key presses\nfunction handleKeyDown(e) {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n if (!sendButton.disabled) {\n handleSendAttempt();\n }\n }\n}\n\n// Handle send button click\nasync function handleSendAttempt() {\n if (currentMessage === '' || isReviewing || isWaitingForResponse) return;\n \n const isReviewEnabled = enabledSwitch.checked;\n \n if (isReviewEnabled) {\n await reviewMessage();\n } else {\n sendMessage();\n }\n}\n\n// Review the current message\nasync function reviewMessage() {\n isReviewing = true;\n sendButton.disabled = true;\n \n try {\n const threshold = config.thresholds[currentStrictness];\n const contextMessages = conversationHistory.slice(-3); // Last 3 messages for context\n \n // Request review from AI\n const completion = await websim.chat.completions.create({\n messages: [\n { role: \"system\", content: config.reviewSystemPrompt },\n { \n role: \"user\", \n content: `Current conversation:\\n${contextMessages.map(msg => \n `${msg.role}: ${msg.content}`).join('\\n')}\\n\\nMessage to review: \"${currentMessage}\"\\n\\nPlease evaluate if this message is worth sending based on relevance, clarity, efficiency, and tone.`\n }\n ],\n json: true\n });\n \n // Parse the review\n const review = JSON.parse(completion.content);\n \n // Determine if message should be sent based on strictness threshold\n if (review.score >= threshold) {\n sendMessage();\n } else {\n // Show feedback\n feedbackMessage.innerHTML = `\n AI Review: ${review.feedback}
\n ${review.improvement ? `Suggestion: ${review.improvement}` : ''}\n `;\n \n feedbackArea.classList.add('active');\n sendAnyway.classList.remove('hidden');\n editMessage.classList.remove('hidden');\n discardMessage.classList.remove('hidden');\n \n // Show the use suggestion button if there's a suggestion\n if (review.improvement) {\n useSuggestion.classList.remove('hidden');\n } else {\n useSuggestion.classList.add('hidden');\n }\n }\n } catch (error) {\n console.error('Error reviewing message:', error);\n // If review fails, allow sending anyway\n sendMessage();\n } finally {\n isReviewing = false;\n sendButton.disabled = currentMessage === '' || isWaitingForResponse;\n }\n}\n\n// Send the message\nfunction sendMessage() {\n if (currentMessage === '' || isWaitingForResponse) return;\n \n // Clear feedback area\n hideFeedback();\n \n // Add user message to chat\n addUserMessage(currentMessage);\n \n // Add to conversation history\n conversationHistory.push({\n role: \"user\",\n content: currentMessage\n });\n \n // Clear input\n messageInput.value = '';\n currentMessage = '';\n \n // Get AI response\n getBotResponse();\n}\n\n// Return to editing message\nfunction returnToEdit() {\n hideFeedback();\n messageInput.focus();\n}\n\n// Discard current message\nfunction discardCurrentMessage() {\n hideFeedback();\n messageInput.value = '';\n currentMessage = '';\n handleInputChange();\n messageInput.focus();\n}\n\n// Hide feedback area\nfunction hideFeedback() {\n feedbackArea.classList.remove('active');\n suggestionButtons.classList.remove('active');\n sendAnyway.classList.add('hidden');\n editMessage.classList.add('hidden');\n discardMessage.classList.add('hidden');\n useSuggestion.classList.add('hidden');\n}\n\n// Add user message to chat\nfunction addUserMessage(message) {\n const messageElement = document.createElement('div');\n messageElement.className = 'message user';\n messageElement.textContent = message;\n chatMessages.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Add bot message to chat\nfunction addBotMessage(message) {\n const messageElement = document.createElement('div');\n messageElement.className = 'message bot';\n messageElement.innerHTML = marked.parse(message);\n chatMessages.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Show typing indicator\nfunction showTypingIndicator() {\n const indicator = document.createElement('div');\n indicator.className = 'typing-indicator';\n indicator.id = 'typingIndicator';\n indicator.innerHTML = '';\n chatMessages.appendChild(indicator);\n scrollToBottom();\n}\n\n// Remove typing indicator\nfunction removeTypingIndicator() {\n const indicator = document.getElementById('typingIndicator');\n if (indicator) {\n indicator.remove();\n }\n}\n\n// Get bot response\nasync function getBotResponse() {\n isWaitingForResponse = true;\n sendButton.disabled = true;\n \n // Show typing indicator\n showTypingIndicator();\n \n try {\n // Keep only the last 10 messages to prevent context window issues\n const recentHistory = conversationHistory.slice(-10);\n \n // Get AI response\n const completion = await websim.chat.completions.create({\n messages: [\n { role: \"system\", content: config.chatSystemPrompt },\n ...recentHistory\n ]\n });\n \n // Remove typing indicator\n removeTypingIndicator();\n \n // Add bot response to chat\n addBotMessage(completion.content);\n \n // Add to conversation history\n conversationHistory.push({\n role: \"assistant\",\n content: completion.content\n });\n } catch (error) {\n console.error('Error getting bot response:', error);\n removeTypingIndicator();\n addBotMessage(\"I'm sorry, I encountered an error processing your request. Please try again.\");\n } finally {\n isWaitingForResponse = false;\n sendButton.disabled = currentMessage === '';\n }\n}\n\n// Update strictness level\nfunction updateStrictness() {\n currentStrictness = strictnessSlider.value;\n strictnessValue.textContent = currentStrictness;\n}\n\n// Toggle review feature\nfunction toggleReviewFeature() {\n if (enabledSwitch.checked) {\n // If turning on, hide any feedback that might be showing\n hideFeedback();\n }\n}\n\n// Use suggested message\nasync function useSuggestedMessage() {\n const suggestionElement = document.querySelector('.suggested-message');\n if (suggestionElement) {\n // Hide the feedback buttons\n document.getElementById('feedbackButtons').classList.add('hidden');\n \n // Show loading state in suggestion buttons area\n suggestionButtons.innerHTML = '

Generating suggestions...

';\n suggestionButtons.classList.add('active');\n \n try {\n // Get the suggested text\n const suggestedText = suggestionElement.textContent;\n \n // Create several contextually appropriate versions of the suggestion\n const recentHistory = conversationHistory.slice(-3); // Get last 3 messages for context\n \n const completion = await websim.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are an assistant that generates message variations based on suggestions.\"\n },\n ...recentHistory,\n { \n role: \"user\", \n content: `The AI reviewer suggested: \"${suggestedText}\". \nBased on this suggestion and our conversation context, generate 5 DIFFERENT specific message options that implement this suggestion.\nMake them varied in tone, length, and approach, but all should address the core issue in the suggestion.\nRemember that I (the user) am asking YOU (the AI) for advice, so the messages should be phrased as questions or requests for information/guidance.\nDon't suggest messages like \"What do you need?\" or generic questions that put the burden on you to define the conversation.\nIf there are quoted examples in the suggestion, include those but also create alternatives.\nReturn ONLY JSON with this format: \n{ \"options\": [\"message 1\", \"message 2\", \"message 3\", \"message 4\", \"message 5\"] }`\n }\n ],\n json: true\n });\n \n // Parse the suggestions\n const suggestions = JSON.parse(completion.content);\n \n // Display suggestion buttons\n suggestionButtons.innerHTML = '';\n suggestions.options.forEach((suggestion, index) => {\n const button = document.createElement('button');\n button.className = 'suggestion-option';\n button.textContent = suggestion;\n button.addEventListener('click', () => sendSuggestion(suggestion));\n suggestionButtons.appendChild(button);\n });\n } catch (error) {\n console.error('Error generating suggestions:', error);\n // Show error message\n suggestionButtons.innerHTML = '

Failed to generate suggestions. Please try again.

';\n \n // Re-show the feedback buttons after a delay\n setTimeout(() => {\n suggestionButtons.classList.remove('active');\n document.getElementById('feedbackButtons').classList.remove('hidden');\n }, 3000);\n }\n }\n}\n\n// Send a selected suggestion\nfunction sendSuggestion(messageText) {\n // Hide the suggestion area\n suggestionButtons.classList.remove('active');\n hideFeedback();\n \n // Send the selected message\n currentMessage = messageText;\n addUserMessage(currentMessage);\n \n // Add to conversation history\n conversationHistory.push({\n role: \"user\",\n content: currentMessage\n });\n \n // Clear input\n messageInput.value = '';\n currentMessage = '';\n \n // Get AI response\n getBotResponse();\n}\n\n// Scroll chat to bottom\nfunction scrollToBottom() {\n chatMessages.scrollTop = chatMessages.scrollHeight;\n}\n\n// Initialize on load\ndocument.addEventListener('DOMContentLoaded', init);\n\n\nstyles.css:\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n background-color: #f5f7fb;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container {\n display: flex;\n width: 90%;\n max-width: 1200px;\n height: 80vh;\n background-color: #fff;\n border-radius: 12px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.chat-container {\n flex: 3;\n display: flex;\n flex-direction: column;\n border-right: 1px solid #eaeaea;\n}\n\n.settings-panel {\n flex: 1;\n padding: 20px;\n background-color: #f9f9f9;\n overflow-y: auto;\n}\n\n.header {\n padding: 15px 20px;\n border-bottom: 1px solid #eaeaea;\n background-color: #7c4dff;\n color: white;\n}\n\n.header h1 {\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.chat-messages {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.message {\n max-width: 75%;\n padding: 12px 15px;\n border-radius: 18px;\n line-height: 1.4;\n animation: fadeIn 0.3s ease-in-out;\n margin-bottom: 5px;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: #7c4dff;\n color: white;\n border-bottom-right-radius: 4px;\n}\n\n.message.bot {\n align-self: flex-start;\n background-color: #f1f0f0;\n color: #333;\n border-bottom-left-radius: 4px;\n}\n\n.message-input-container {\n padding: 15px;\n border-top: 1px solid #eaeaea;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.feedback-area {\n background-color: #f8f9fa;\n border-radius: 8px;\n padding: 10px 15px;\n transition: all 0.3s ease;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n\n.feedback-area.active {\n max-height: 200px;\n opacity: 1;\n padding: 15px;\n margin-bottom: 10px;\n border: 1px solid #e1e4e8;\n overflow-y: auto;\n}\n\n.feedback-area p {\n margin-bottom: 10px;\n line-height: 1.5;\n max-height: 120px;\n overflow-y: auto;\n}\n\n.feedback-area .buttons {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.feedback-area button {\n padding: 8px 15px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.9rem;\n}\n\n.feedback-area button:hover {\n opacity: 0.9;\n}\n\n#sendAnyway {\n background-color: #dc3545;\n color: white;\n}\n\n#editMessage {\n background-color: #6c757d;\n color: white;\n}\n\n#discardMessage {\n background-color: #f8f9fa;\n color: #6c757d;\n border: 1px solid #dee2e6;\n}\n\n#useSuggestion {\n background-color: #28a745;\n color: white;\n}\n\n.suggested-message {\n background-color: #e9f5ff;\n padding: 2px 5px;\n border-radius: 3px;\n display: inline-block;\n cursor: pointer;\n}\n\n.input-area {\n display: flex;\n background-color: #f8f9fa;\n border-radius: 24px;\n overflow: hidden;\n border: 1px solid #eaeaea;\n}\n\ntextarea {\n flex: 1;\n border: none;\n padding: 15px;\n font-size: 1rem;\n resize: none;\n background-color: transparent;\n height: 50px;\n max-height: 150px;\n}\n\ntextarea:focus {\n outline: none;\n}\n\nbutton {\n background-color: transparent;\n border: none;\n padding: 0 15px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nbutton:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n#sendButton {\n background-color: #7c4dff;\n color: white;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n margin: 5px;\n transition: all 0.3s ease;\n}\n\n#sendButton:hover {\n background-color: #6a3ff5;\n}\n\nh2 {\n margin-bottom: 20px;\n font-size: 1.2rem;\n color: #333;\n}\n\n.setting {\n margin-bottom: 20px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.setting label {\n font-weight: 500;\n color: #555;\n}\n\n.setting input[type=\"range\"] {\n width: 100%;\n cursor: pointer;\n accent-color: #7c4dff;\n}\n\n/* Switch toggle */\n.switch {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 24px;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 24px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 18px;\n width: 18px;\n left: 3px;\n bottom: 3px;\n background-color: white;\n transition: .4s;\n border-radius: 50%;\n}\n\ninput:checked + .slider {\n background-color: #7c4dff;\n}\n\ninput:focus + .slider {\n box-shadow: 0 0 1px #7c4dff;\n}\n\ninput:checked + .slider:before {\n transform: translateX(26px);\n}\n\n.hidden {\n display: none;\n}\n\n.suggestion-buttons {\n display: none;\n flex-direction: column;\n gap: 8px;\n margin-top: 15px;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n transition: all 0.3s ease;\n}\n\n.suggestion-buttons.active {\n display: flex;\n max-height: 300px;\n opacity: 1;\n overflow-y: auto;\n}\n\n.suggestion-option {\n text-align: left;\n padding: 10px 12px;\n background-color: #e6f7ff;\n border: 1px solid #91d5ff;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.9rem;\n color: #333;\n}\n\n.suggestion-option:hover {\n background-color: #bae7ff;\n}\n\n.suggestion-loading {\n text-align: center;\n padding: 10px;\n color: #666;\n font-style: italic;\n}\n\n.suggestion-error {\n text-align: center;\n padding: 10px;\n color: #d93025;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Response in progress animation */\n.typing-indicator {\n display: flex;\n align-items: center;\n padding: 10px 15px;\n background-color: #f1f0f0;\n border-radius: 18px;\n border-bottom-left-radius: 4px;\n align-self: flex-start;\n animation: fadeIn 0.3s ease-in-out;\n margin-bottom: 5px;\n}\n\n.typing-indicator span {\n width: 8px;\n height: 8px;\n background-color: #888;\n border-radius: 50%;\n display: inline-block;\n margin: 0 2px;\n opacity: 0.4;\n}\n\n.typing-indicator span:nth-child(1) {\n animation: bounce 1.33s ease-in-out infinite;\n}\n.typing-indicator span:nth-child(2) {\n animation: bounce 1.33s ease-in-out infinite;\n animation-delay: 0.2s;\n}\n.typing-indicator span:nth-child(3) {\n animation: bounce 1.33s ease-in-out infinite;\n animation-delay: 0.4s;\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n opacity: 0.4;\n }\n 50% {\n transform: translateY(-5px);\n opacity: 1;\n }\n}\n\n@media (max-width: 768px) {\n .container {\n flex-direction: column;\n height: 90vh;\n }\n \n .chat-container {\n flex: 4;\n border-right: none;\n border-bottom: 1px solid #eaeaea;\n }\n \n .settings-panel {\n flex: 1;\n }\n \n .message {\n max-width: 85%;\n }\n}","url","link_url","/p/6869s2c75dxtab7iu1ml","versioned_link_url","/p/6869s2c75dxtab7iu1ml/1","yapping","\n```config.js\n```\n\n```index.html\n```\n\n```main.js\n```\n\n```script.js\n```\n\n```styles.css\n```\n","page_description","cursor","eyJpZCI6IjY4NjlzMmM3NWR4dGFiN2l1MW1sIn0","token","included",[],"routes/browser/layout","actionData","errors"]