From 020251c7061f8d9fb04fabbc16c2d61bd2249ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Fri, 16 May 2025 23:39:15 +0800
Subject: [PATCH] Fix the code of conduct file name & Update the UI of the
 ChatBot, it is still a work in progress tho

---
 CODE_OF_CONDUCT.md.md => CODE_OF_CONDUCT.md |  0
 components/app/windows/chatbot.vue          | 67 ++++++++++++++++-----
 2 files changed, 51 insertions(+), 16 deletions(-)
 rename CODE_OF_CONDUCT.md.md => CODE_OF_CONDUCT.md (100%)

diff --git a/CODE_OF_CONDUCT.md.md b/CODE_OF_CONDUCT.md
similarity index 100%
rename from CODE_OF_CONDUCT.md.md
rename to CODE_OF_CONDUCT.md
diff --git a/components/app/windows/chatbot.vue b/components/app/windows/chatbot.vue
index fc1f1e0..dbe4936 100644
--- a/components/app/windows/chatbot.vue
+++ b/components/app/windows/chatbot.vue
@@ -6,7 +6,14 @@ interface chatInterface {
   user: boolean;
 }
 
-import { History, Plus, Send } from "lucide-vue-next";
+import {
+  History,
+  Plus,
+  Send,
+  Square,
+  User,
+  BotMessageSquare,
+} from "lucide-vue-next";
 import { Input } from "~/components/ui/input";
 import { v4 as uuidv4 } from "uuid";
 const { t } = useI18n();
@@ -16,6 +23,7 @@ const chatId = ref();
 const inputMessage = ref();
 const messages = ref<chatInterface[]>([]);
 const messageIndex = ref();
+const aiGenerating = ref(false);
 // Great, there are now no errors ig
 const emit = defineEmits(["windowopener", "error", "loadValue"]);
 const props = defineProps<{
@@ -24,6 +32,7 @@ const props = defineProps<{
 
 const sendChatData = (event?: KeyboardEvent) => {
   if (event?.shiftKey) return;
+  if (inputMessage.value === "") return;
   const userMessage = inputMessage.value;
   inputMessage.value = "";
   messages.value.push({
@@ -32,6 +41,10 @@ const sendChatData = (event?: KeyboardEvent) => {
     message: userMessage,
     user: true,
   });
+  aiGenerating.value = true;
+  setTimeout(() => {
+    aiGenerating.value = false;
+  }, 3000);
 };
 
 onMounted(async () => {
@@ -79,26 +92,48 @@ onMounted(async () => {
         </div>
       </div>
       <div ref="chatContainerRef" class="flex-1 overflow-y-auto p-4 space-y-4">
-        <div v-for="message in messages" class="max-w-[80%] rounded-lg p-3">
-          {{ message.message }}
+        <div
+          v-for="message in messages"
+          class="max-w-[80%] rounded-lg p-3 bg-gray-300/70 rounded-xl"
+        >
+          <div v-if="message.user" class="flex flex-row gap-2">
+            <User class="w-5 h-5" />{{ message.message }}
+          </div>
+          <div v-else class="flex flex-row gap-2">
+            <BotMessageSquare class="w-5 h-5" />{{ message.message }}
+          </div>
         </div>
       </div>
       <div
-        class="text-black w-full flex flex-row space-x-2 sticky bottom-0 border-t p-2 min-h-0 border rounded-xl gray-500/80 backdrop-blur-sm"
+        class="space-x-2 sticky bottom-0 border-t p-2 min-h-0 border rounded-xl gray-500/80 backdrop-blur-sm"
       >
-        <Input
-          class="flex-1 rounded-xl"
-          placeholder="Type a message..."
-          v-model="inputMessage"
-          @keyup.enter="sendChatData($event)"
-        />
-        <button
-          class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
-          :disabled="!inputMessage?.trim()"
-          @click="sendChatData()"
+        <div class="text-black w-full flex flex-row">
+          <Input
+            class="flex-1 rounded-xl"
+            placeholder="Type a message..."
+            v-model="inputMessage"
+            @keyup.enter="sendChatData($event)"
+          />
+          <button
+            class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
+            :disabled="!inputMessage?.trim()"
+            @click="sendChatData()"
+            v-if="!aiGenerating"
+          >
+            <Send class="w-5 h-5" />
+          </button>
+          <button
+            class="pl-2 pr-2 mr-1 ml-1 bg-black text-white rounded-full hover:bg-gray-700 hover:translate-y-[-4px] transition-all duration-300 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:bg-color-500"
+            :disabled="!inputMessage?.trim()"
+            @click="sendChatData()"
+            v-else
+          >
+            <Square class="w-5 h-5" />
+          </button>
+        </div>
+        <span class="text-xs text-center justify-center align-center w-full"
+          >Note: AI might create imbalanced views.</span
         >
-          <Send class="w-5 h-5" />
-        </button>
       </div>
     </div>
   </div>