Update chatbot UI

CarciDev · Nov 14, 2024 · 4ccad0a · 4ccad0a
1 parent 89d9ae2
commit 4ccad0a
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 18 deletions.
diff --git a/src/lib/components/ChatBox.svelte b/src/lib/components/ChatBox.svelte
@@ -1,7 +1,23 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+
+  // State variables
   let userInput = "";
   let messages: { sender: "user" | "bot"; text: string }[] = [];
+  let chatBox: HTMLDivElement;
 
+  // Determine theme based on system preference
+  onMount(() => {
+    const isDarkMode = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    }
+  });
+
+  // Function to send a message
   async function sendMessage() {
     if (!userInput.trim()) return;
 
@@ -21,6 +37,7 @@
 
       const data = await response.json();
       const botResponse = data.response;
+
       // Add bot response
       messages = [...messages, { sender: "bot", text: botResponse }];
 
@@ -42,23 +59,81 @@
   $: if (chatBox) {
     chatBox.scrollTop = chatBox.scrollHeight;
   }
-
-  let chatBox: HTMLDivElement;
 </script>
 
-<div class="chat-container">
-  <div bind:this={chatBox} class="chat-box">
-    {#each messages as message}
-      <div class={`message ${message.sender}`}>
-        {message.sender === "user" ? "You" : "Bot"}: {message.text}
-      </div>
-    {/each}
-  </div>
+<div
+  class=" flex min-h-min items-center justify-center py-20 transition-colors duration-300">
+  <div
+    class="flex w-full max-w-md flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800">
+    <!-- Header without Theme Toggle -->
+    <div
+      class="flex items-center justify-between bg-orange-500 px-4 py-2 dark:bg-orange-600">
+      <h2 class="text-lg font-semibold text-white">ChatBot</h2>
+    </div>
+
+    <!-- Chat Messages -->
+    <div
+      bind:this={chatBox}
+      class="chat-box flex-1 overflow-y-auto bg-gray-50 p-4 dark:bg-gray-700">
+      {#each messages as message, index}
+        <div
+          class="mb-3 flex {message.sender === 'user'
+            ? 'justify-end'
+            : 'justify-start'}"
+          transition:fade={{ duration: 300, delay: index * 50 }}>
+          <div
+            class={`max-w-xs rounded-lg px-4 py-2 shadow ${
+              message.sender === "user"
+                ? "bg-orange-500 text-white"
+                : message.text.toLowerCase().includes("error")
+                  ? "bg-red-500 text-white"
+                  : "bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100"
+            }`}>
+            <span class="font-semibold">
+              {message.sender === "user" ? "You" : "Bot"}:
+            </span>
+            <span>{message.text}</span>
+          </div>
+        </div>
+      {/each}
+    </div>
 
-  <input
-    id="user-input"
-    color="black"
-    bind:value={userInput}
-    placeholder="Type your message..." />
-  <button on:click={sendMessage}>Send</button>
+    <!-- Input Area -->
+    <div class="flex items-center bg-gray-100 px-4 py-3 dark:bg-gray-800">
+      <input
+        type="text"
+        bind:value={userInput}
+        placeholder="Type your message..."
+        class="flex-1 rounded-lg border border-gray-300 px-3 py-2 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+        on:keydown={(e) => e.key === "Enter" && sendMessage()}
+        aria-label="Message input" />
+      <button
+        on:click={sendMessage}
+        class="ml-2 rounded-lg bg-orange-500 px-4 py-2 font-semibold text-white transition-colors duration-300 hover:bg-orange-600"
+        aria-label="Send message">
+        Send
+      </button>
+    </div>
+  </div>
 </div>
+
+<style>
+  /* Custom Scrollbar */
+  .chat-box {
+    scrollbar-width: thin;
+    scrollbar-color: #ffa500 #2d2d2d;
+  }
+
+  .chat-box::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .chat-box::-webkit-scrollbar-track {
+    background: var(--tw-bg-opacity, 1) #f9fafb; /* Adjust based on light/dark */
+  }
+
+  .chat-box::-webkit-scrollbar-thumb {
+    background-color: #ffa500;
+    border-radius: 4px;
+  }
+</style>
diff --git a/src/routes/chatbot/+page.svelte b/src/routes/chatbot/+page.svelte
@@ -3,6 +3,12 @@
 </script>
 
 <main>
-  <h1>My SvelteKit App</h1>
-  <ChatBox />
+  <div class="mx-auto mb-10 max-w-2xl text-center">
+    <h1 class="mb-6 text-5xl sm:text-6xl">ChatBot - Customer Service</h1>
+    <p class="text-lg">
+      Need assistance? SvelteShipSolutions is proud to offer the latest and
+      greatest in AI-driven customer support, direclty at your fingertips.
+    </p>
+    <ChatBox />
+  </div>
 </main>