From 6cc15e9d13b1eeb0f5e1ba73b50d32b47de5467a Mon Sep 17 00:00:00 2001 From: saumya yadav <saumyayadav@saumyas-MacBook-Air.local> Date: Thu, 17 Oct 2024 19:36:07 +0530 Subject: [PATCH] chatbot enhance --- chatbot.html | 51 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/chatbot.html b/chatbot.html index ee25c8c..5b2ab47 100644 --- a/chatbot.html +++ b/chatbot.html @@ -20,7 +20,7 @@ /> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script> </head> - <body class="bg-[#1B63AC] flex items-center justify-center min-h-screen"> + <body class="bg-gradient-to-r from-blue-400 to-indigo-300 flex items-center justify-center min-h-screen"> <div id="Loader"></div> <div class="flex flex-col items-center justify-center w-full max-w-xl space-y-4" @@ -29,32 +29,31 @@ <img src="boy.png" alt="Chat Bot" - class="h-42 w-42 object-cover" + class="h-42 w-42 object-cover rounded-lg shadow-lg" /> </div> - <div class="chat-container w-full bg-white p-4 rounded-lg shadow-md"> - <div id="output-field" class="text-center text-lg font-semibold mb-3"> - - How can I help you today? + <div class="chat-container w-full bg-white p-6 rounded-lg shadow-xl"> + <div id="output-field" class="text-center text-lg font-semibold text-gray-700 mb-3"> + How can I help you today? </div> <div id="output-container" class="mb-3 overflow-auto" style="max-height: 300px" ></div> - <div class="input-group mb-3"> - <div id="image-preview-container" class="input-group-prepend mr-1"> + <div class="input-group mb-3 flex items-center space-x-2"> + <div id="image-preview-container" class="flex items-center"> <span id="image-preview" - class="flex items-center" + class="flex items-center space-x-2 hidden" style="display: none" > - <img src="" alt="Image preview" class="h-10 mr-2" /> + <img src="" alt="Image preview" class="h-10 mr-2 object-cover rounded-lg" /> <button type="button" id="clear-image" - class="close text-red-600 text-2xl leading-none" + class="text-red-600 text-2xl leading-none" aria-label="Close" > × @@ -64,12 +63,12 @@ <input type="text" id="prompt-input" - class="form-control flex-1" + class="form-control flex-1 p-2 border border-gray-300 rounded-lg" placeholder="Type your prompt here..." aria-label="Message input" /> <button - class="input-group-text bg-gray-200" + class="p-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition" id="inputGroupFileAddon" onclick="document.getElementById('image-input').click();" > @@ -97,14 +96,38 @@ .chat-container { width: 100%; max-width: 500px; + padding: 20px; + background-color: white; + border-radius: 12px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } body, html { margin: 0; padding: 0; - background-color: #067aed; /* Optional: to visualize the centering */ } + .user-message { + text-align: right; + background-color: #f0f0f0; + border-radius: 15px 15px 0px 15px; + padding: 10px 10px 5px 10px; + margin: 10px; + max-width: 60%; + float: right; + clear: both; + } + + .ai-message { + text-align: left; + background-color: #e0f7fa; + border-radius: 15px 15px 15px 0px; + padding: 10px 10px 5px 10px; + margin: 10px; + max-width: 60%; + float: left; + clear: both; + } </style> <script type="importmap">