Hard Code of List

package.json

@@ -14,6 +14,7 @@
     "@types/better-sqlite3": "^7.6.10",
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
+    "@types/react": "^18.3.3",
     "@types/readable-stream": "^4.0.11",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
@@ -30,21 +31,41 @@
     "typescript": "^5.4.3"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.2",
     "@iarna/toml": "^2.2.5",
+    "@icons-pack/react-simple-icons": "^9.6.0",
     "@langchain/community": "^0.2.16",
     "@langchain/openai": "^0.0.25",
     "@xenova/transformers": "^2.17.1",
+    "assert": "^2.1.0",
+    "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
     "better-sqlite3": "^11.0.0",
     "compute-cosine-similarity": "^1.1.0",
     "compute-dot": "^1.1.0",
     "cors": "^2.8.5",
+    "crypto-browserify": "^3.12.0",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.31.2",
     "express": "^4.19.2",
+    "https-browserify": "^1.0.0",
     "langchain": "^0.1.30",
+    "lucide-react": "^0.401.0",
+    "next": "^14.2.4",
+    "next-themes": "^0.3.0",
+    "os-browserify": "^0.3.0",
+    "postcss": "^8.4.39",
+    "process": "^0.11.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sonner": "^1.5.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "tailwindcss": "^3.4.4",
+    "url": "^0.11.3",
     "winston": "^3.13.0",
     "ws": "^8.17.1",
+    "yet-another-react-lightbox": "^3.21.1",
     "zod": "^3.22.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/data/index.json

@@ -0,0 +1,32 @@
+[
+    {
+        "id": "ed701716-e443-5804-aaa9-99e7e04c33e2",
+        "title": "胖东来迅速应对擀面皮事件，展现企业责任感",
+        "summary": "胖东来商贸集团因擀面皮加工场所卫生问题迅速采取行动，关闭相关档口并展开调查。确认问题后，公司对举报顾客奖励10万元，并对购买问题产品的顾客进行退款和补偿，总计883.3万元。同时，胖东来辞退相关责任人，解除与涉事商户的合作，并制定改进计划以确保食品安全。公众对其快速透明的处理措施表示赞赏，认为其展现了企业的社会责任感。"
+    },
+    {
+        "id": "869d933c-e186-51b0-a225-edc2d338b6fa",
+        "title": "姜萍晋级全球数学竞赛决赛引发质疑",
+        "summary": "17岁中专生姜萍在2024阿里巴巴全球数学竞赛中晋级决赛，但其成绩真实性受到质疑。北京大学教授袁新意指出她在校内月考成绩仅为83分，建议姜萍通过直播讲解竞赛题目或接受数学教授面试来证明实力。涟水县教育体育局确认了月考成绩的真实性，但质疑声仍未平息。姜萍的成功故事激励了许多人，凸显了教育公平和知识改变命运的重要性。"
+    },
+    {
+        "id": "73090b7b-a04e-5c50-ae84-c77f1d7d03a8",
+        "title": "梅州洪灾救援与重建：党员干部与社会各界齐心协力",
+        "summary": "梅州洪灾发生后，党员干部和社会各界迅速投入救援和重建工作。党员干部们不分昼夜地清理淤泥、搜救被困人员，展现了无私奉献精神。社会各界捐款捐物，累计超过712.1万元，支持灾区重建。各方力量的共同努力下，梅州的灾后重建工作正有序推进，村民生活逐渐恢复正常。此外，全球洪灾预警系统的改进也在不断推进，以减轻自然灾害带来的损失。"
+    },
+    {
+        "id": "1fa9b398-080f-54de-9a4f-3ba386acce11",
+        "title": "东方甄选主播公开质疑公司管理",
+        "summary": "东方甄选主播顿顿在直播中表达了对公司管理的不满，指出公司在开设新账号时未与主播沟通，且公关部门在应对舆情时不积极。这些问题引发了广泛关注和讨论。此外，东方甄选在“618”促销活动中的直播风格转变也引起了争议，观众对其过于商业化的表现感到失望。这些事件导致公司品牌形象受损，粉丝数量下降，股价波动。"
+    },
+    {
+        "id": "fd20973f-54b2-5b15-bf7b-79b5e5515b5c",
+        "title": "鸿蒙智行2024年上半年销量创纪录，成智能豪华车新标杆",
+        "summary": "2024年上半年，鸿蒙智行累计交付194207辆汽车，成为中国新势力品牌销量第一。6月单月交付量达46141辆，问界M9、问界新M7和问界新M5等车型表现突出。鸿蒙智行的成功归功于其强大的产品矩阵、技术创新以及华为在ICT领域的技术积累。通过提升产品质量和用户体验，鸿蒙智行重新定义了豪华车市场标准，并计划继续加大研发投入，引领行业发展。"
+    },
+    {
+        "id": "b84c7962-2971-53de-a99b-3c9e45492c79",
+        "title": "Apple Joins OpenAI Board as Observer, Strengthens AI Collaboration",
+        "summary": "Apple has appointed Phil Schiller to an observer role on OpenAI's board, enhancing their AI partnership. This move follows Apple's plan to integrate ChatGPT into its devices, including iPhones and Macs. Schiller will attend board meetings without voting rights, providing Apple with insights into OpenAI's decisions. The collaboration, which involves no financial transactions, allows OpenAI access to millions of Apple users while Apple benefits from advanced AI features, aligning with its broader AI strategy."
+    }
+]

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

ui/app/news/layout.tsx

@@ -0,0 +1,12 @@
+import { Metadata } from "next";
+import React from "react";
+
+export const metadata: Metadata = {
+  title: "News - Perplexica",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <div>{children}</div>;
+};
+
+export default Layout;

ui/app/news/page.tsx

@@ -0,0 +1,5 @@
+import NewsPage from "@/components/NewsPage";
+
+export default function Page() {
+  return <NewsPage />;
+}

ui/components/MessageInputActions/Attach.tsx

@@ -4,6 +4,7 @@ const Attach = () => {
   return (
     <button
       type="button"
+      aria-label="Attach a file"
       className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary transition duration-200 hover:text-black dark:hover:text-white"
     >
       <CopyPlus />

ui/components/NewsPage.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Newspaper } from "lucide-react";
+
+interface NewsItem {
+  id: string;
+  title: string;
+  summary: string;
+}
+
+const hardcodedNews: NewsItem[] = [
+  {
+    "id": "ed701716-e443-5804-aaa9-99e7e04c33e2",
+    "title": "胖东来迅速应对擀面皮事件，展现企业责任感",
+    "summary": "胖东来商贸集团因擀面皮加工场所卫生问题迅速采取行动，关闭相关档口并展开调查。确认问题后，公司对举报顾客奖励10万元，并对购买问题产品的顾客进行退款和补偿，总计883.3万元。同时，胖东来辞退相关责任人，解除与涉事商户的合作，并制定改进计划以确保食品安全。公众对其快速透明的处理措施表示赞赏，认为其展现了企业的社会责任感。"
+  },
+  {
+    "id": "869d933c-e186-51b0-a225-edc2d338b6fa",
+    "title": "姜萍晋级全球数学竞赛决赛引发质疑",
+    "summary": "17岁中专生姜萍在2024阿里巴巴全球数学竞赛中晋级决赛，但其成绩真实性受到质疑。北京大学教授袁新意指出她在校内月考成绩仅为83分，建议姜萍通过直播讲解竞赛题目或接受数学教授面试来证明实力。涟水县教育体育局确认了月考成绩的真实性，但质疑声仍未平息。姜萍的成功故事激励了许多人，凸显了教育公平和知识改变命运的重要性。"
+  },
+];
+
+const NewsPage = () => {
+  const [news, setNews] = useState<NewsItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadNews = async () => {
+      try {
+        await new Promise(resolve => setTimeout(resolve, 500));
+        setNews(hardcodedNews);
+      } catch (error) {
+        console.error("Error loading news:", error);
+        setError("Failed to load news. Please try again later.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadNews();
+  }, []);
+
+  return (
+    <div>
+      <div className="fixed z-40 top-0 left-0 right-0 lg:pl-[104px] lg:pr-6 lg:px-8 px-4 py-4 lg:py-6 border-b border-light-200 dark:border-dark-200">
+        <div className="flex flex-row items-center space-x-2 max-w-screen-lg lg:mx-auto">
+          <Newspaper />
+          <h2 className="text-black dark:text-white lg:text-3xl lg:font-medium">News</h2>
+        </div>
+      </div>
+      {loading ? (
+        <div className="flex flex-row items-center justify-center min-h-screen">
+          <p className="text-black/70 dark:text-white/70 text-sm">Loading news...</p>
+        </div>
+      ) : error ? (
+        <div className="flex flex-row items-center justify-center min-h-screen">
+          <p className="text-red-500 text-sm">{error}</p>
+        </div>
+      ) : (
+        <div className="flex flex-col pt-16 lg:pt-24">
+          {news.length === 0 ? (
+            <p className="text-black/70 dark:text-white/70 text-sm text-center">No news available.</p>
+          ) : (
+            news.map((item) => (
+              <div key={item.id} className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4">
+                <h3 className="text-black dark:text-white lg:text-xl font-medium">{item.title}</h3>
+                <p className="text-black/70 dark:text-white/70 text-sm">{item.summary}</p>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NewsPage;

ui/components/Sidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { BookOpenText, Home, Search, SquarePen, Settings } from "lucide-react";
+import { BookOpenText, Home, Search, SquarePen, Settings, Rss } from "lucide-react";
 import Link from "next/link";
 import { useSelectedLayoutSegments } from "next/navigation";
 import React, { useState, type ReactNode } from "react";
@@ -36,6 +36,12 @@ const Sidebar = ({ children }: { children: React.ReactNode }) => {
       active: segments.includes("library"),
       label: "Library",
     },
+    {
+      icon: Rss,
+      href: "/news",
+      active: segments.includes("news"),
+      label: "News",
+    },
   ];
 
   return (