Made a basic TTY system.

components/DraggableWindow.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   initialY?: number;
   width?: string;
   height?: string;
+  black?: boolean | false;
 }>();
 
 const emit = defineEmits(["close", "min", "maximize", "restore"]);
@@ -66,7 +67,8 @@ const stopDrag = () => {
       width: props.width || '400px',
       height: props.height || '300px',
     }"
-    class="fixed bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden flex flex-col shadow-lg shadow-xl/30"
+    class="fixed rounded-xl shadow-lg overflow-hidden flex flex-col shadow-lg shadow-xl/30"
+    :class="props.black ? 'bg-black text-white' : 'bg-white text-black'"
   >
     <div
       @mousedown="startDrag"

components/app/windows/tty.vue

@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import { Input } from "~/components/ui/input";
+const commandInputBox = ref();
 </script>
 <template>
-  <div>
+  <div class="text-white">
-    <Input />
+    <div class="flex flex-row">
+      <span class="mx-1">></span
+      ><input
+        v-model="commandInputBox"
+        type="text"
+        class="border-none bg-black outline-0 w-full text-wrap"
+        @keyup.enter="console.log(commandInputBox)"
+      />
+    </div>
   </div>
 </template>

pages/app/desktop/index.vue

@@ -34,6 +34,7 @@ import SourcesWindow from "~/components/app/windows/sources.vue";
 import AboutWindow from "~/components/app/windows/about.vue";
 import ChatbotWindow from "~/components/app/windows/chatbot.vue";
 import AboutNewsOrgWindow from "~/components/app/windows/aboutNewsOrg.vue";
+import TTYWindow from "~/components/app/windows/tty.vue";
 import Error404Window from "~/components/app/windows/error404.vue";
 
 // Icons
@@ -159,7 +160,10 @@ const associAppWindow = [
     name: "tty",
     id: "11",
     title: t("app.terminal"),
-    component: Error404Window,
+    component: TTYWindow,
+    width: "600px",
+    height: "400px",
+    black: true,
   },
 ];
 
@@ -314,6 +318,7 @@ const findAndOpenWindow = (windowName: string) => {
       title: app.title,
       width: app.width || "400px",
       height: app.height || "300px",
+      black: app.black || false,
     });
     currentOpenAppId.value++;
     // Add to navbar
@@ -528,6 +533,7 @@ watchEffect((cleanupFn) => {
         :height="window.height"
         @click="obtainTopWindowPosition(window.id)"
         @maximize="maxWindow(window.id)"
+        :black="window.black"
       >
         <Suspense>
           <Component

server/api/ai/chat/actions/findUserChatId.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+  return {
+    hello: "hello",
+  };
+});