Chatbot UI

{"name":"StylishChat","description":"StylishChat is a sleek and modern chatbot application with stylish CSS design. It offers a user-friendly interface and smooth animations to enhance the user experience.","photo":null,"view_count":2,"fork_count":0,"expires_at":"2024-04-21T01:07:51.175973","created_at":"2024-04-20T01:07:51.175973Z","updated_at":"2024-04-20T01:08:06.381433Z","user_id":2,"status":"PRIVATE","parent_id":null,"id":1231,"user":{"username":"gamerc0der","id":2,"password_hash":null,"updated_at":"2023-12-11T22:13:50.357943Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":null,"recess_id":"a75a82d5-5ae6-41b7-d20f-788415be036d","created_at":"2023-12-11T22:13:50.357940Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"// Initialize an array to hold the conversation history\r\nlet conversationHistory = [];\r\nfunction sendMessage() {\r\n const messageInput = document.getElementById(\"message-input\");\r\n const message = messageInput.value.trim();\r\n if (message === '') return; // Prevent sending empty messages\r\n\r\n // Update conversation history with the user's message\r\n conversationHistory.push({ \"role\": \"user\", \"content\": message });\r\n\r\n const modelSelector = document.getElementById(\"model-selector\");\r\n const selectedModel = modelSelector.value;\r\n\r\n fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\r\n method: \"POST\",\r\n headers: {\r\n \"Authorization\": \"Bearer INSERTYOUFGROQAPIKEY\", // Ensure you replace this with your actual API key\r\n \"Content-Type\": \"application/json\"\r\n },\r\n body: JSON.stringify({\r\n messages: conversationHistory, // Use the updated conversation history for context\r\n model: selectedModel\r\n })\r\n })\r\n .then(response => response.json())\r\n .then(data => {\r\n // Check if the expected data exists before accessing it\r\n if (data.choices && data.choices.length > 0 && data.choices[0].message && data.choices[0].message.content) {\r\n const chatResponse = data.choices[0].message.content;\r\n displayMessage(chatResponse, 'bot');\r\n\r\n // Update conversation history with the bot's response\r\n conversationHistory.push({ \"role\": \"assiant\", \"content\": chatResponse });\r\n } else {\r\n // Handle the case where the data structure is not as expected\r\n console.error('Unexpected response structure:', data);\r\n }\r\n\r\n messageInput.value = ''; // Clear the input after sending the message\r\n })\r\n .catch(error => console.error('Error:', error));\r\n}\r\nfunction displayMessage(message, sender) {\r\n const messageList = document.getElementById(\"message-list\");\r\n const newMessage = document.createElement(\"li\");\r\n newMessage.textContent = `${sender}: ${message}`;\r\n // Apply different styling based on the sender\r\n newMessage.style.color = sender === 'user' ? 'blue' : 'green';\r\n messageList.appendChild(newMessage);\r\n}\r\n\r\ndocument.getElementById(\"send-button\").addEventListener(\"click\", function (event) {\r\n sendMessage();\r\n // Prevent the default form submission behavior\r\n event.preventDefault();\r\n});","style.css":"/* Enhanced Base layout and responsiveness */\r\nbody,\r\nhtml {\r\n height: 100%;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: #e9eff1;\r\n color: #333;\r\n}\r\n\r\n#chat-container {\r\n width: 100%;\r\n max-width: 320px;\r\n /* Keeping the chat container compact */\r\n max-height: 90vh;\r\n /* Limiting the height to ensure it fits in the viewport */\r\n display: flex;\r\n flex-direction: column;\r\n background: #fff;\r\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\r\n border-radius: 15px;\r\n overflow: hidden;\r\n transition: max-width 0.3s ease-in-out;\r\n}\r\n\r\n@media (min-width: 768px) {\r\n\r\n /* On larger screens, we adjust the width to make better use of the available space */\r\n #chat-container {\r\n max-width: 600px;\r\n /* Larger width for better use of space on bigger screens */\r\n }\r\n}\r\n\r\n#message-list {\r\n flex-grow: 1;\r\n overflow-y: auto;\r\n padding: 20px;\r\n margin: 0;\r\n list-style: none;\r\n background: #f7fafa;\r\n border-top: 1px solid #dfe6e9;\r\n border-bottom: 1px solid #dfe6e9;\r\n}\r\n\r\n#message-input,\r\n#send-button {\r\n border: none;\r\n padding: 15px 20px;\r\n font-size: 14px;\r\n}\r\n\r\n#message-input {\r\n width: calc(100% - 40px);\r\n /* Adjusted for padding */\r\n border-radius: 0;\r\n background: #f0f2f5;\r\n}\r\n\r\n#send-button {\r\n background: #0984e3;\r\n color: white;\r\n cursor: pointer;\r\n transition: background 0.3s ease, transform 0.2s ease;\r\n border-radius: 0;\r\n}\r\n\r\n#send-button:hover {\r\n background: #74b9ff;\r\n transform: translateY(-2px);\r\n}\r\n\r\n/* Ensuring messages are visually distinct and animated */\r\nli {\r\n animation: popIn 0.5s ease-out forwards;\r\n margin-bottom: 10px;\r\n padding: 10px;\r\n border-radius: 20px;\r\n border: 1px solid #dfe6e9;\r\n max-width: 80%;\r\n}\r\n\r\n.user-message {\r\n align-self: flex-end;\r\n background-color: #74b9ff;\r\n color: white;\r\n}\r\n\r\n.bot-message {\r\n align-self: flex-start;\r\n background-color: #dfe6e9;\r\n}\r\n\r\ninput:focus,\r\nbutton:focus {\r\n outline: none;\r\n box-shadow: 0 0 0 2px #74b9ff;\r\n}\r\n\r\n/* Custom Scrollbar Styles */\r\n#message-list::-webkit-scrollbar {\r\n width: 8px;\r\n /* Adjust scrollbar width */\r\n}\r\n\r\n#message-list::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n /* Color of the tracking area */\r\n border-radius: 10px;\r\n}\r\n\r\n#message-list::-webkit-scrollbar-thumb {\r\n background: #888;\r\n /* Color of the scrollbar itself */\r\n border-radius: 10px;\r\n}\r\n\r\n#message-list::-webkit-scrollbar-thumb:hover {\r\n background: #555;\r\n /* Darker shade on hover for better interaction feedback */\r\n}\r\n\r\n#model-selector-container {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n display: flex;\r\n justify-content: center; /* Center aligns the model selector for better aesthetics */\r\n padding: 10px 20px;\r\n background-color: #0984e3; /* Match the send button color for consistency */\r\n border-top-left-radius: 15px; /* Match the chat-container's border radius */\r\n border-top-right-radius: 15px;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */\r\n}\r\n\r\n#model-selector {\r\n color: white;\r\n background-color: #74b9ff; /* A lighter shade for contrast with the container */\r\n border: 1px solid #67a8ff; /* Slightly lighter border for subtle contrast */\r\n padding: 5px 15px;\r\n border-radius: 15px; /* Increased border-radius for rounder appearance */\r\n font-size: 14px;\r\n cursor: pointer;\r\n}\r\n\r\n#model-selector:focus {\r\n outline: none;\r\n box-shadow: 0 0 0 2px #ffffff; /* Adds a white outline for focus state */\r\n}\r\n\r\n/* Adjust label styling to better integrate with the design */\r\n#model-selector-container label {\r\n color: white;\r\n margin-right: 10px;\r\n font-size: 14px;\r\n}","index.html":"\r\n\r\n\r\n Chatbot UI\r\n \r\n\r\n\r\n

\r\n \r\n

No chat selected

\r\n

\r\n \r\n \r\n \r\n

\r\n "},"chat_history":[{"deleted":0,"code_id":69097,"input_tokens":null,"id":37239,"project_id":1231,"sender":"human","message":"heres curl -X POST \"https://api.groq.com/openai/v1/chat/completions\" \\\n -H \"Authorization: Bearer $GROQ_API_KEY\" \\\n -H \"Content-Type: application/json\" \\\n -d '{\"messages\": [{\"role\": \"user\", \"content\": \"Explain the importance of fast language models\"}], \"model\": \"mixtral-8x7b-32768\"}'\n\n\nUse it for send","created_at":"2024-04-20T01:19:52.006930Z","output_tokens":null},{"deleted":0,"code_id":69097,"input_tokens":null,"id":37240,"project_id":1231,"sender":"ai","message":"```css\n#send-button {\n background: #4CAF50; /* Green */\n border: none;\n color: white;\n padding: 15px 32px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 16px;\n margin: 4px 2px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.3s ease, transform 0.3s ease;\n}\n\n#send-button:hover {\n background: #45a049;\n transform: scale(1.05);\n}\n```\n\n- Changes the background color of the `#send-button` to a green shade for a more vibrant and engaging look.\n- Increases the padding and adjusts the font size to enhance the button's visibility and user interaction.\n- Implements a `border-radius` to give the button rounded corners for a modern,","created_at":"2024-04-20T01:19:52.015981Z","output_tokens":null},{"deleted":0,"code_id":69098,"input_tokens":null,"id":37241,"project_id":1231,"sender":"human","message":"no use it via js","created_at":"2024-04-20T01:20:05.245728Z","output_tokens":null},{"deleted":0,"code_id":69098,"input_tokens":null,"id":37242,"project_id":1231,"sender":"ai","message":"```javascript\nfunction sendMessage() {\n const messageInput = document.getElementById(\"message-input\");\n const message = messageInput.value;\n\n fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": \"Bearer $GROQ_API_KEY\",\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n messages: [{ \"role\": \"user\", \"content\": message }],\n model: \"mixtral-8x7b-32768\"\n })\n })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n // Add logic here to display the response in the chat UI\n })\n .catch(error => console.error('Error:', error));\n}\n\ndocument.getElementById(\"send-button\").addEventListener(\"click\", sendMessage);\n```\n\n- This function, `sendMessage`, is called when the \"Send\" button is clicked. It retrieves the message from the input field.\n- It uses `fetch` to send a POST request to the specified URL, including the message and necessary headers.\n- Upon receiving a response, the function logs the data to the console. You can replace the console log with any function to display the message in the UI.\n- An event listener is added to the \"Send\" button, which triggers the `sendMessage` function on click.","created_at":"2024-04-20T01:20:05.252458Z","output_tokens":null},{"deleted":0,"code_id":69100,"input_tokens":null,"id":37243,"project_id":1231,"sender":"human","message":"no matter what i get LOG [object Object]\n","created_at":"2024-04-20T01:20:33.284422Z","output_tokens":null},{"deleted":0,"code_id":69100,"input_tokens":null,"id":37244,"project_id":1231,"sender":"ai","message":"To address the issue of logging `[object Object]` and to enhance the display of the response from the chatbot in your chat UI, you can update the `sendMessage` function within your `script.js` to include logic for displaying the response in the chat UI. Here's how you can update the function:\n\n```javascript\nfunction sendMessage() {\n const messageInput = document.getElementById(\"message-input\");\n const message = messageInput.value;\n\n fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": \"Bearer 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\",\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n messages: [{ \"role\": \"user\", \"content\": message }],\n model: \"mixtral-8x7b-32768\"\n })\n })\n .then(response => response.json())\n .then(data => {\n // Assuming the response data has a property that contains the chatbot's message. Adjust as needed.\n const chatResponse = data.choices[0].message.content; // Adjust this line based on the actual structure of your response\n displayMessage(chatResponse, 'bot');\n messageInput.value = ''; // Clear the input after sending the message\n })\n .catch(error => console.error('Error:', error));\n}\n\nfunction displayMessage(message, sender) {\n const messageList = document.getElementById(\"message-list\");\n const newMessage = document.createElement(\"li\");\n newMessage.textContent = `${sender}: ${message}`;\n // Apply different styling based on the sender\n newMessage.style.color = sender === 'user' ? 'blue' : 'green';\n messageList.appendChild(newMessage);\n}\n\ndocument.getElementById(\"send-button\").addEventListener(\"click\", function(event) {\n sendMessage();\n // Prevent the default form submission behavior\n event.preventDefault();\n});\n```\n\n- The `sendMessage` function sends a message to the chatbot and receives a response.\n- Upon receiving the response, it calls `displayMessage` with the chatbot's response and the sender type ('bot'). This function is responsible for appending the message to the chat UI.\n- The `displayMessage` function creates a new list item (`

`) and appends it to the `#message-list` element, displaying the message in the chat interface. It also differentiates the message color based on whether the message is from the user or the bot.\n- After sending a message, the input field is cleared to be ready for a new message.\n\nMake sure your response structure in `const chatResponse = data.choices[0].message.content;` matches the actual response structure from your chatbot API. If the structure is different, adjust the path to access the chatbot's message accordingly.","created_at":"2024-04-20T01:20:33.291519Z","output_tokens":null},{"deleted":0,"code_id":69102,"input_tokens":null,"id":37245,"project_id":1231,"sender":"human","message":"make the interfance 40x better","created_at":"2024-04-20T01:21:08.793409Z","output_tokens":null},{"deleted":0,"code_id":69102,"input_tokens":null,"id":37246,"project_id":1231,"sender":"ai","message":"To enhance the interface of your chat application significantly, we can implement a set of CSS improvements that focus on typography, spacing, color scheme, animations, and overall layout refinement. Here are the updates:\n\n```css\n/* Enhanced Base layout styles */\nbody, html {\n height: 100%;\n margin: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #e9eff1;\n display: flex;\n justify-content: center;\n align-items: center;\n color: #333;\n}\n\n#chat-container {\n width: 90%;\n max-width: 320px; /* Adjusted for a more compact look */\n background: #fff;\n box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n border-radius: 15px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: max-width 0.3s ease-in-out;\n}\n\n/* Ensures the chat container expands on hover for a dynamic interaction */\n#chat-container:hover {\n max-width: 600px;\n}\n\n#message-list {\n list-style: none;\n padding: 20px;\n overflow-y: auto;\n flex-grow: 1;\n margin: 0;\n background: #f7fafa;\n border-top: 1px solid #dfe6e9;\n border-bottom: 1px solid #dfe6e9;\n}\n\n#message-input {\n border: 2px solid #dfe6e9;\n padding: 15px 20px;\n width: calc(100% - 44px); /* Adjusted for border */\n font-size: 14px;\n border-radius: 0 0 15px 15px; /* Rounded bottom corners */\n background: #f0f2f5;\n}\n\n#send-button {\n background: #0984e3;\n color: white;\n border: none;\n padding: 15px 20px;\n cursor: pointer;\n transition: background 0.3s ease, transform 0.2s ease;\n border-radius: 0 0 15px 0; /* Rounded bottom right corner */\n}\n\n#send-button:hover {\n background: #74b9ff;\n transform: translateY(-2px);\n}\n\nli {\n margin-bottom: 10px;\n padding: 10px;\n background-color: #f0f2f5;\n border-radius: 20px;\n border: 1px solid #dfe6e9;\n max-width: 80%;\n}\n\n/* Differentiates between user and bot messages */\n.user-message {\n align-self: flex-end;\n background-color: #74b9ff;\n color: white;\n}\n\n.bot-message {\n align-self: flex-start;\n background-color: #dfe6e9;\n}\n\n/* Improved animation and transitions */\n@keyframes popIn {\n from {\n opacity: 0;\n transform: scale(0.5);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n#message-list li {\n animation: popIn 0.5s ease-out forwards;\n}\n\n/* Enhance focus states for accessibility */\ninput:focus, button:focus {\n outline: none;\n box-shadow: 0 0 0 2px #74b9ff;\n}\n```\n\n- **Typography and Color Scheme**: Updated to a more modern font and a calming color scheme for readability and a professional look.\n- **Interactive UI**: The chat container expands when hovered over, providing a dynamic user experience.\n- **Refined Input and Button**: Enhanced styling for the input and send button, including hover effects and focus states for better accessibility.\n- **Message Styling**: Messages are now styled differently for the user and the bot, improving the chat flow's clarity. Animations were added to make new messages pop in delightfully.\n- **Overall Layout Adjustments**: Minor tweaks to margins, paddings, and the chat container's size for a more polished look.\n\nThis comprehensive CSS overhaul aims to significantly improve the user interface of your chat application, making it more engaging and pleasant to use.","created_at":"2024-04-20T01:21:08.799289Z","output_tokens":null},{"deleted":0,"code_id":69104,"input_tokens":null,"id":37247,"project_id":1231,"sender":"human","message":"the aspect ratio stuff is terrible\nmake it look better then now","created_at":"2024-04-20T01:22:07.771240Z","output_tokens":null},{"deleted":0,"code_id":69104,"input_tokens":null,"id":37248,"project_id":1231,"sender":"ai","message":"To improve the aspect ratio and overall appearance of the chat interface, ensuring it looks great on various devices and screen sizes, we can introduce some CSS changes. These changes will make the chat UI more responsive and visually appealing. We'll adjust the `#chat-container` to maintain a more consistent and visually appealing aspect ratio across different devices. Additionally, we'll ensure that the chat interface is centered and has a maximum height to maintain its usability without overwhelming the user's screen.\n\nHere are the CSS modifications:\n\n```css\n/* Enhanced Base layout and responsiveness */\nbody, html {\n height: 100%;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #e9eff1;\n color: #333;\n}\n\n#chat-container {\n width: 100%;\n max-width: 320px; /* Keeping the chat container compact */\n max-height: 90vh; /* Limiting the height to ensure it fits in the viewport */\n display: flex;\n flex-direction: column;\n background: #fff;\n box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n border-radius: 15px;\n overflow: hidden;\n transition: max-width 0.3s ease-in-out;\n}\n\n@media (min-width: 768px) {\n /* On larger screens, we adjust the width to make better use of the available space */\n #chat-container {\n max-width: 600px; /* Larger width for better use of space on bigger screens */\n }\n}\n\n#message-list {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n margin: 0;\n list-style: none;\n background: #f7fafa;\n border-top: 1px solid #dfe6e9;\n border-bottom: 1px solid #dfe6e9;\n}\n\n#message-input, #send-button {\n border: none;\n padding: 15px 20px;\n font-size: 14px;\n}\n\n#message-input {\n width: calc(100% - 40px); /* Adjusted for padding */\n border-radius: 0;\n background: #f0f2f5;\n}\n\n#send-button {\n background: #0984e3;\n color: white;\n cursor: pointer;\n transition: background 0.3s ease, transform 0.2s ease;\n border-radius: 0;\n}\n\n#send-button:hover {\n background: #74b9ff;\n transform: translateY(-2px);\n}\n\n/* Ensuring messages are visually distinct and animated */\nli {\n animation: popIn 0.5s ease-out forwards;\n margin-bottom: 10px;\n padding: 10px;\n border-radius: 20px;\n border: 1px solid #dfe6e9;\n max-width: 80%;\n}\n\n.user-message {\n align-self: flex-end;\n background-color: #74b9ff;\n color: white;\n}\n\n.bot-message {\n align-self: flex-start;\n background-color: #dfe6e9;\n}\n\ninput:focus, button:focus {\n outline: none;\n box-shadow: 0 0 0 2px #74b9ff;\n}\n```\n\n- **Viewport Height Adjustment**: The `max-height` property on `#chat-container` ensures that the chat UI does not extend beyond the viewport's height, maintaining usability across devices.\n- **Responsive Width**: Using a media query, the chat container's width is adjusted on larger screens. This ensures the chat UI uses the available space more effectively without becoming oversized.\n- **Improved Input and Button Layout**: The input and button styling are refined to blend well with the new layout, ensuring a seamless and integrated design.\n- **Aspect Ratio Consideration**: The combination of `max-width` and `max-height` adjustments, along with responsive design principles, addresses the aspect ratio concerns, ensuring the chat UI maintains a balanced and appealing appearance across different screen sizes.\n\nThese CSS adjustments aim to provide a more responsive and visually balanced chat interface, enhancing the user experience on both small and large screens.","created_at":"2024-04-20T01:22:07.777119Z","output_tokens":null},{"deleted":0,"code_id":69106,"input_tokens":null,"id":37249,"project_id":1231,"sender":"human","message":"make scroll bar look better","created_at":"2024-04-20T01:24:55.693723Z","output_tokens":null},{"deleted":0,"code_id":69106,"input_tokens":null,"id":37250,"project_id":1231,"sender":"ai","message":"To enhance the appearance of the scrollbar within your chat application, we can apply custom CSS styles that will be applied to the scrollbar within the `#message-list` element. This will make the scrollbar more consistent with the overall sleek and modern design of your chat UI.\n\nHere's how you can style the scrollbar:\n\n```css\n/* Custom Scrollbar Styles */\n#message-list::-webkit-scrollbar {\n width: 8px; /* Adjust scrollbar width */\n}\n\n#message-list::-webkit-scrollbar-track {\n background: #f1f1f1; /* Color of the tracking area */\n border-radius: 10px;\n}\n\n#message-list::-webkit-scrollbar-thumb {\n background: #888; /* Color of the scrollbar itself */\n border-radius: 10px;\n}\n\n#message-list::-webkit-scrollbar-thumb:hover {\n background: #555; /* Darker shade on hover for better interaction feedback */\n}\n```\n\n- **Scrollbar Width**: Sets the width of the scrollbar to `8px`, making it neither too thick nor too thin.\n- **Scrollbar Track**: Styles the track (the part the thumb slides over) with a light color and rounded corners to match the chat UI's overall aesthetic.\n- **Scrollbar Thumb**: The part of the scrollbar that indicates the current position. It's styled with a darker color for better visibility, rounded corners for a smoother look, and changes color on hover to provide visual feedback when interacted with.\n\nThese styles use the `::-webkit-scrollbar` pseudo-elements, which are supported by most web browsers (Chrome, Edge, Safari). However, it's important to note that these styles might not apply in Firefox. Firefox supports scrollbar styling with the properties `scrollbar-width` and `scrollbar-color`, but those offer less flexibility compared to the WebKit pseudo-elements. \n\nAdding these styles to your `style.css` will make the scrollbar in the message list area blend seamlessly with the rest of your chat application's design, enhancing the overall user experience.","created_at":"2024-04-20T01:24:55.700266Z","output_tokens":null},{"deleted":0,"code_id":69108,"input_tokens":null,"id":37251,"project_id":1231,"sender":"human","message":"now make it so you can select the model at the top left from:\nllama2-70b-4096\t\nmixtral-8x7b-32768\t\ngemma-7b-it\t","created_at":"2024-04-20T01:26:25.948546Z","output_tokens":null},{"deleted":0,"code_id":69108,"input_tokens":null,"id":37252,"project_id":1231,"sender":"ai","message":"To enable model selection for the chatbot application, you will need to add a dropdown menu to the HTML for model selection and modify the JavaScript to use the selected model in the API request. \n\nFirst, add the dropdown menu to your HTML inside the `#chat-container` but before the `#message-list`:\n\n```html\n

\n Choose a model:\n \n

\n```\n\nThen, update your `sendMessage` function in `script.js` to use the selected model:\n\n```javascript\nfunction sendMessage() {\n const messageInput = document.getElementById(\"message-input\");\n const message = messageInput.value;\n const modelSelector = document.getElementById(\"model-selector\");\n const selectedModel = modelSelector.value;\n\n fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": \"Bearer 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\",\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n messages: [{ \"role\": \"user\", \"content\": message }],\n model: selectedModel\n })\n })\n .then(response => response.json())\n .then(data => {\n const chatResponse = data.choices[0].message.content;\n displayMessage(chatResponse, 'bot');\n messageInput.value = ''; // Clear the input after sending the message\n })\n .catch(error => console.error('Error:', error));\n}\n```\n\nAnd finally, add some CSS to style the model selector dropdown to match the chat application's design:\n\n```css\n#model-selector-container {\n display: flex;\n justify-content: flex-start;\n padding: 10px;\n background-color: #f7fafa;\n border-bottom: 1px solid #dfe6e9;\n}\n\n#model-selector {\n margin-left: 10px;\n padding: 5px 10px;\n border-radius: 5px;\n border: 1px solid #dfe6e9;\n background-color: #ffffff;\n cursor: pointer;\n}\n```\n\n- The dropdown menu (`

Chats