Add a basic news view page.

.gitignore

@@ -31,7 +31,7 @@ __pycache__
 .env.sentry-build-plugin
 
 *.sql
-!database/*.sql
+!database/*.sql/
 _dt_*.py
 
 # Testing files

components/app/windows/chatbot.vue

@@ -56,7 +56,6 @@ onMounted(async () => {
   } = useFetch(`/api/ai/chat/${chatId.value}`);*/
 });
 
-
 const sendMessage = async (newMessage: any) => {
   if (!newMessage.trim() || !newsId.value.trim() || isStreaming.value) {
     return;
@@ -68,7 +67,7 @@ const sendMessage = async (newMessage: any) => {
     user: true,
     timestamp: new Date(),
   });
-  messageIndex.value += 1
+  messageIndex.value += 1;
 
   try {
     isStreaming.value = true;
@@ -183,9 +182,7 @@ const formatTime = (timestamp: any) => {
             </div>
           </div>
           <div v-if="isStreaming" class="">
-            <div>
+            <div></div>
-            
-            </div>
           </div>
         </div>
         <div class="h-[75px]"></div>

components/app/windows/news.vue

@@ -1,5 +1,77 @@
+<script setup lang="ts">
+//const { data: tabs, error: tabserror } = await useFetch("/api/cached/tabs");
+
+const tabs = [
+  {
+    text: "國內",
+    url: "domestic",
+    default: true,
+  },
+  {
+    text: "國外",
+    url: "global",
+    default: false,
+  },
+];
+
+const primary = ref(tabs.find((tab) => tab.default === true).url || "domestic");
+const contentArray = ref([]);
+const errorr = ref(false);
+
+const updateContent = async (url: string) => {
+  console.log(url.trim());
+  try {
+    const req = await fetch(`/api/home/lt?query=${url.trim()}`);
+    const data = await req.json();
+    console.log(data);
+    if (data) {
+      contentArray.value = [...data.uuidData, ...(data.nuuiddata?.items || [])];
+    }
+  } catch (e) {
+    errorr.value = true;
+  }
+
+  return;
+};
+
+const isPrimary = (url: string, defaultAction: boolean) => {
+  if (defaultAction === true) {
+    const item = tabs.find((tab) => tab.url === url);
+    if (item.default === true) {
+      return "text-sky-600 text-bold";
+    }
+  }
+  if (defaultAction === false) {
+  }
+  return "text-black";
+};
+onMounted(async () => {
+  await updateContent(primary.value);
+});
+</script>
 <template>
   <div class="justify-center align-center text-center">
-    <div></div>
+    <!--Tabs-->
+    <div
+      class="sticky inset-x-0 top-0 bg-gray-300/90 backdrop-blur-xl border shadow-lg rounded-xl p-1 m-1 mt-0 justify-center align-center text-center"
+    >
+      <div class="gap-2 flex flex-row justify-center align-center text-center">
+        <button
+          v-for="item in tabs"
+          @click="updateContent(item.url)"
+          :class="isPrimary(item.url, true)"
+          class=""
+        >
+          <span>{{ item.text }}</span>
+        </button>
+      </div>
+    </div>
+    <div
+      v-for="item in contentArray"
+      :key="item.id"
+      :class="item.contentType !== 'GENERAL' && 'hidden'"
+    >
+      {{ item.title }}
+    </div>
   </div>
 </template>

components/app/windows/newsView.vue

@@ -15,7 +15,7 @@ const activateAiSummary = ref(false);
     <div class="flex flex-col">
       <span>AI Summary: </span>
       <button v-if="!activateAiSummary">Activate AI summary</button>
-      <div v-else>{{  }}</div>
+      <div v-else>{{}}</div>
     </div>
   </div>
 </template>

components/app/windows/settings.vue

@@ -1,3 +1,3 @@
 <template>
-    <div></div>
+  <div></div>
-</template>
+</template>

pages/desktop.vue

@@ -40,16 +40,13 @@ 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 FavStaredWindow from "~/components/app/windows/fav.vue";
-import Error404Window from "~/components/app/windows/error404.vue";
 import NewsWindow from "~/components/app/windows/news.vue";
 import NewsViewWindow from "~/components/app/windows/newsView.vue";
-import SettingsWindow from "~/components/app/windows/settings.vue"
+import SettingsWindow from "~/components/app/windows/settings.vue";
 
 // Import Icons
 import {
   ComputerDesktopIcon,
-  UserIcon,
-  LanguageIcon,
   ChevronRightIcon,
 } from "@heroicons/vue/24/outline";
 
@@ -230,10 +227,6 @@ const unMinWindow = (windowName?: string) => {
 const toggleMenu = () => {
   menuOpen.value = !menuOpen.value;
 };
-// Lang Menu
-const toggleLangMenu = () => {
-  langMenuOpen.value = !langMenuOpen.value;
-};
 
 // ?openapp= component
 onMounted(async () => {
@@ -377,6 +370,7 @@ onMounted(() => {
   }, 2000);
 });
 
+// Loading Effect.
 watchEffect((cleanupFn) => {
   const tier = setTimeout(() => (progress.value = 10), Math.random() * 50);
   const timer = setTimeout(() => (progress.value = 30), Math.random() * 100);

server/api/ai/chat/[slug].ts

@@ -4,9 +4,9 @@ import sql from "~/server/components/postgres";
 const groq = new Groq();
 
 export default defineEventHandler(async (event) => {
-  const host =  getRequestHost(event);
+  const host = getRequestHost(event);
-  const protocol =  getRequestProtocol(event);
+  const protocol = getRequestProtocol(event);
-  const hears =  getRequestHeaders(event);
+  const hears = getRequestHeaders(event);
   const slug = getRouterParam(event, "slug");
   const body = await readBody(event);
   if (!slug) {

server/api/ai/summerize/[slug].ts

@@ -4,8 +4,8 @@ import sql from "~/server/components/postgres";
 const groq = new Groq();
 
 export default defineEventHandler(async (event) => {
-  const host =  getRequestHost(event);
+  const host = getRequestHost(event);
-  const protocol =  getRequestProtocol(event);
+  const protocol = getRequestProtocol(event);
   const slug = getRouterParam(event, "slug");
   const buildURL = protocol + "://" + host + "/api/news/get/lt/" + slug;
   const data = await fetch(buildURL);
@@ -29,7 +29,7 @@ export default defineEventHandler(async (event) => {
     stop: null,
   });
 
-    const stream = new ReadableStream({
+  const stream = new ReadableStream({
     async start(controller) {
       try {
         for await (const chunk of chatCompletion) {
@@ -46,5 +46,4 @@ export default defineEventHandler(async (event) => {
     },
   });
   return sendStream(event, stream);
-
 });

server/api/cached/tabs.ts

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