Merge pull request #882 from saumyayadav25/saumya

Chatbot enhance
vimistify · Oct 17, 2024 · 0d94296 · 0d94296
2 parents 5699f70 + 6cc15e9
commit 0d94296
Showing 1 changed file with 37 additions and 14 deletions.
diff --git 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"
               >
                 &times;
@@ -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">