From 4b7934552c7501c259f28d4d22c940f6a2f45065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E5=85=83=E7=9A=93?= <hw@yuanhau.com>
Date: Sat, 24 May 2025 14:55:42 +0800
Subject: [PATCH] Create the new settings and news window files & starting to
 fix the chatbot component

---
 components/app/windows/chatbot.vue  | 136 +++++++++++++++++++++-------
 components/app/windows/newsView.vue |   6 ++
 components/app/windows/settings.vue |   3 +
 nuxt.config.ts                      |   1 +
 pages/desktop.vue                   |  18 ++--
 5 files changed, 119 insertions(+), 45 deletions(-)
 create mode 100644 components/app/windows/settings.vue

diff --git a/components/app/windows/chatbot.vue b/components/app/windows/chatbot.vue
index cde4da0..f12cac5 100644
--- a/components/app/windows/chatbot.vue
+++ b/components/app/windows/chatbot.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-interface chatInterface {
-  index: number;
-  id: string;
-  message: string;
-  user: boolean;
-}
-
 import {
   History,
   Plus,
@@ -22,9 +15,13 @@ const cookie = useCookie("lastChatId");
 const cookieChatId = cookie.value;
 const chatId = ref();
 const inputMessage = ref();
-const messages = ref<chatInterface[]>([]);
 const messageIndex = ref();
 const aiGenerating = ref(false);
+const messages = ref<any[]>([]);
+const newsId = ref("");
+const isStreaming = ref(false);
+const streamingMessage = ref("");
+const messagesContainer = ref(null);
 
 // Great, there are now no errors ig
 const emit = defineEmits(["windowopener", "error", "loadValue"]);
@@ -32,43 +29,25 @@ const props = defineProps<{
   values?: string;
 }>();
 
-const sendChatData = (event?: KeyboardEvent) => {
+const sendChatData = async (event?: KeyboardEvent) => {
   if (event?.shiftKey) return;
   if (inputMessage.value === "") return;
   const userMessage = inputMessage.value;
   inputMessage.value = "";
-  messages.value.push({
-    index: messageIndex.value,
-    id: uuidv4(),
-    message: userMessage,
-    user: true,
-  });
   aiGenerating.value = true;
-  setTimeout(() => {
-    aiGenerating.value = false;
-  }, 3000);
+  await sendMessage(userMessage);
 };
 
 const stopChatGenerate = () => {
   aiGenerating.value = false;
 };
 
-/*onMounted(async () => {
-  console.log(cookieChatId);
-  if (cookieChatId) {
-  } else {
-    const { data: checkUserChatId } = await useFetch(
-      "/api/ai/chat/actions/findUserChatId",
-      {
-        method: "POST",
-        body: {
-          userid: "393393",
-        },
-      },
-    );
-    cookieChatId.value = checkUserChatId.value;
-  }
-});*/
+const chatUuid = ref("");
+
+onMounted(() => {
+  chatUuid.value = uuidv4();
+});
+
 onMounted(async () => {
   /*const {
     data: getData,
@@ -76,6 +55,90 @@ onMounted(async () => {
     error,
   } = useFetch(`/api/ai/chat/${chatId.value}`);*/
 });
+
+
+const sendMessage = async (newMessage: any) => {
+  if (!newMessage.trim() || !newsId.value.trim() || isStreaming.value) {
+    return;
+  }
+  messages.value.push({
+    index: messageIndex.value,
+    id: uuidv4(),
+    message: newMessage,
+    user: true,
+    timestamp: new Date(),
+  });
+  messageIndex.value += 1
+
+  try {
+    isStreaming.value = true;
+    streamingMessage.value = "";
+
+    const response = await fetch(`/api/ai/chat/${chatUuid.value}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        message: newMessage,
+        newsid: newsId.value,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (reader) {
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        streamingMessage.value += chunk;
+        await scrollToBottom();
+      }
+    }
+
+    // Add the complete assistant message
+    if (streamingMessage.value) {
+      messages.value.push({
+        role: "assistant",
+        content: streamingMessage.value,
+        timestamp: new Date(),
+      });
+    }
+  } catch (error) {
+    console.error("Error sending message:", error);
+    messages.value.push({
+      role: "assistant",
+      content: "Sorry, there was an error processing your message.",
+      timestamp: new Date(),
+    });
+  } finally {
+    isStreaming.value = false;
+    streamingMessage.value = "";
+    await scrollToBottom();
+  }
+};
+
+const formatMessage = (content: any) => {
+  // Simple markdown-like formatting
+  return content
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(.*?)\*/g, "<em>$1</em>")
+    .replace(/\n/g, "<br>");
+};
+const formatTime = (timestamp: any) => {
+  return new Intl.DateTimeFormat("zh-TW", {
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(timestamp);
+};
 </script>
 <template>
   <blurPageBeforeLogin>
@@ -119,6 +182,11 @@ onMounted(async () => {
               <BotMessageSquare class="w-5 h-5" />{{ message.message }}
             </div>
           </div>
+          <div v-if="isStreaming" class="">
+            <div>
+            
+            </div>
+          </div>
         </div>
         <div class="h-[75px]"></div>
         <div
diff --git a/components/app/windows/newsView.vue b/components/app/windows/newsView.vue
index fc05c13..20bb875 100644
--- a/components/app/windows/newsView.vue
+++ b/components/app/windows/newsView.vue
@@ -3,6 +3,7 @@
 const { data, error, pending } = await useFetch("/api/news/get/lt/kEJjxKw"); //demo URL
 console.log(data.value);
 console.log(error.value);
+const activateAiSummary = ref(false);
 </script>
 <template>
   <div class="justify-center align-center text-center flex flex-col">
@@ -11,5 +12,10 @@ console.log(error.value);
       >origin: {{ data.origin }} • author: {{ data.author }}</span
     >
     <div class="test-center" v-for="item in data.paragraph">{{ item }}</div>
+    <div class="flex flex-col">
+      <span>AI Summary: </span>
+      <button v-if="!activateAiSummary">Activate AI summary</button>
+      <div v-else>{{  }}</div>
+    </div>
   </div>
 </template>
diff --git a/components/app/windows/settings.vue b/components/app/windows/settings.vue
new file mode 100644
index 0000000..6c57829
--- /dev/null
+++ b/components/app/windows/settings.vue
@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fc2285a..703f3dd 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,6 +5,7 @@ export default defineNuxtConfig({
   routeRules: {
     "/": { redirect: "/home" },
     "/zh_tw": { redirect: "/zh_tw/home" },
+    "/desktop": { prerender: true },
     "/go/**": { ssr: true },
     "/find/**": { ssr: true },
     // Send ZIP bombs to troll bots
diff --git a/pages/desktop.vue b/pages/desktop.vue
index 813b5c0..2a523f6 100644
--- a/pages/desktop.vue
+++ b/pages/desktop.vue
@@ -41,7 +41,9 @@ 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 Icons
 import {
@@ -127,13 +129,13 @@ const associAppWindow = [
     name: "settings",
     id: "5",
     title: t("app.settings"),
-    component: Error404Window,
+    component: SettingsWindow,
   },
   {
     name: "news",
     id: "6",
     title: t("app.news"),
-    component: Error404Window,
+    component: NewsWindow,
   },
   {
     name: "starred",
@@ -149,28 +151,22 @@ const associAppWindow = [
     width: "400px",
     height: "600px",
   },
-  {
-    name: "error404",
-    id: "9",
-    title: t("app.error404"),
-    component: Error404Window,
-  },
   {
     name: "aboutNewsOrg",
-    id: "10",
+    id: "9",
     title: t("app.aboutNewsOrg"),
     component: AboutNewsOrgWindow,
   },
   {
     name: "tty",
-    id: "11",
+    id: "10",
     title: t("app.terminal"),
     component: TTYWindow,
     black: true,
   },
   {
     name: "newsView",
-    id: "12",
+    id: "11",
     title: t("app.newsview"),
     component: NewsViewWindow,
   },