Add chat interface and implement basic message sending

components/app/windows/chatbot.vue

@@ -1,17 +1,39 @@
 <script setup lang="ts">
+interface chatInterface {
+  index: number;
+  id: string;
+  message: string;
+  user: boolean;
+}
+
 import { History, Plus, Send } from "lucide-vue-next";
 import { Input } from "~/components/ui/input";
+import { v4 as uuidv4 } from "uuid";
 const { t } = useI18n();
 const cookie = useCookie("lastChatId");
 const cookieChatId = cookie.value;
 const chatId = ref();
 const inputMessage = ref();
-const messages = ref([]);
+const messages = ref<chatInterface[]>([]);
+const messageIndex = ref();
 // Great, there are now no errors ig
 const emit = defineEmits(["windowopener", "error", "loadValue"]);
 const props = defineProps<{
   values?: string;
 }>();
+
+const sendChatData = (event?: KeyboardEvent) => {
+  if (event?.shiftKey) return;
+  const userMessage = inputMessage.value;
+  inputMessage.value = "";
+  messages.value.push({
+    index: messageIndex.value,
+    id: uuidv4(),
+    message: userMessage,
+    user: true,
+  });
+};
+
 onMounted(async () => {
   console.log(cookieChatId);
   if (cookieChatId) {
@@ -23,54 +45,57 @@ onMounted(async () => {
   }
 });
 onMounted(async () => {
-  const {
+  /*const {
     data: getData,
     pending,
     error,
-  } = useFetch(`/api/ai/chat/${chatId.value}`);
+  } = useFetch(`/api/ai/chat/${chatId.value}`);*/
 });
 </script>
 <template>
   <div class="flex flex-col h-full">
     <div>
-      <div class="justify-center align-center text-center flex flex-col">
+      <div
-        <div class="flex flex-row justify-between">
+        class="justify-center align-center text-center flex flex-col sticky top-0 pt-2 min-h-0 border rounded-2xl gray-500/80 backdrop-blur-sm"
+      >
+        <div class="flex flex-row justify-between p-2">
           <h2 class="text-xl ml-4 text-bold">Chat Name</h2>
           <div class="flex flex-row justify-center align-center text-center">
             <div
               class="flex flex-row justify-center align-center text-center gap-2"
             >
               <button
-                class="p-2 rounded-t-xl hover:bg-gray-300 transition-all duration-400"
+                class="p-2 rounded-xl hover:bg-gray-300 transition-all duration-400"
               >
                 <History class="h-4 w-4" />
               </button>
               <button
-                class="p-2 rounded-t-xl hover:bg-gray-300 transition-all duration-400"
+                class="p-2 rounded-xl hover:bg-gray-300 transition-all duration-400"
               >
                 <Plus class="h-4 w-4" />
               </button>
             </div>
           </div>
         </div>
-        <hr />
       </div>
       <div ref="chatContainerRef" class="flex-1 overflow-y-auto p-4 space-y-4">
-        <div
+        <div v-for="message in messages" class="max-w-[80%] rounded-lg p-3">
-          v-for="message in messages"
+          {{ message.message }}
-          class="max-w-[80%] rounded-lg p-3"
+        </div>
-        ></div>
       </div>
-
+      <div
-      <div class="text-black w-full flex flex-row space-x-2">
+        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"
+      >
         <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()"
         >
           <Send class="w-5 h-5" />
         </button>

components/app/windows/tty.vue

@@ -65,10 +65,10 @@ const findExecutable = (inputContent: string) => {
   const executeMatch = inputContent.match(/^execute\s+(.*)$/);
   if (executeMatch) {
     const targetPath = executeMatch[1].trim();
-    console.log("Executing:", targetPath);
     openNewWindow(targetPath);
+    printData(`Running ${targetPath}...`);
   } else {
-    console.error("Invalid execute command format");
+    printData(`${executeMatch} ia not an application.`, false, true);
   }
 };
 

i18n/locales/en.json

@@ -52,7 +52,7 @@
   "Welcome": "Welcome",
   "loading": "Loading...",
   "app": {
-    "changelangmessage": "Switching the language",
+    "changelangmessage": "Switching the language...",
     "launchtext": "Cooking up the desktop...",
     "hotnews": "Hot News",
     "news": "News",

pages/app/desktop/index.vue

@@ -17,8 +17,12 @@ interface currentNavBarInterface {
 interface associAppWindowInterface {
   name: string;
   id: string;
+  absoluteId: string;
   title: string;
   component: any;
+  width: string;
+  height: string;
+  black: boolean;
 }
 
 // Import plugins
@@ -373,7 +377,12 @@ const openNewWindowViaApp = (windowId: string) => {
   }, 1000);
 };
 
-const maxWindow = (windowId: string) => {};
+const maxWindow = (windowUUId: string) => {
+  const windowIndex = activeWindows.value.findIndex(
+    (window) => window.absoluteId === windowUUId,
+  );
+  console.log(windowIndex);
+};
 
 // Title
 useSeoMeta({
@@ -531,7 +540,7 @@ watchEffect((cleanupFn) => {
         :width="window.width"
         :height="window.height"
         @click="obtainTopWindowPosition(window.id)"
-        @maximize="maxWindow(window.id)"
+        @maximize="maxWindow(window.absoluteId)"
         :black="window.black"
       >
         <Suspense>