change the npm to yarn and update the json

ui/components/ContextItem.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Image from "next/image";
+
+interface ContextItemProps {
+  item: {
+    name: string;
+    url: string;
+    description: string;
+    provider: { name: string; image?: { thumbnail: { contentUrl: string } } }[];
+    datePublished: string;
+    image?: {
+      contentUrl: string;
+      thumbnail: { contentUrl: string; width: number; height: number };
+    };
+  };
+}
+
+const ContextItem: React.FC<ContextItemProps> = ({ item }) => {
+  return (
+    <div className="border p-4 rounded-lg mb-4">
+      <h4 className="font-bold">{item.name}</h4>
+      {item.image && (
+        <Image
+          src={item.image.contentUrl}
+          alt={item.name}
+          width={item.image.thumbnail.width}
+          height={item.image.thumbnail.height}
+          className="my-2 rounded"
+        />
+      )}
+      <p>{item.description}</p>
+      <div className="text-sm text-gray-500 mt-2">
+        {item.provider[0].name} | {new Date(item.datePublished).toLocaleDateString()}
+      </div>
+      <a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
+        Read more
+      </a>
+    </div>
+  );
+};
+
+export default ContextItem;

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/NewsDetail.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import ContextItem from "./ContextItem";
+
+interface NewsDetailProps {
+  news: {
+    title: string;
+    sections: {
+      title: string;
+      content: string;
+      context: any[];
+    }[];
+  };
+}
+
+const NewsDetail: React.FC<NewsDetailProps> = ({ news }) => {
+  return (
+    <article className="prose lg:prose-xl">
+      <h1>{news.title}</h1>
+      {news.sections.map((section, index) => (
+        <section key={index}>
+          <h2>{section.title}</h2>
+          <p>{section.content}</p>
+          <div className="mt-4">
+            <h3>Related Context:</h3>
+            {section.context.map((item, i) => (
+              <ContextItem key={i} item={item} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </article>
+  );
+};
+
+export default NewsDetail;

ui/components/NewsPage.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Newspaper } from "lucide-react";
+import Link from "next/link";
+
+interface NewsItem {
+  id: string;
+  title: string;
+  summary: string;
+}
+
+const NewsPage = () => {
+  const [news, setNews] = useState<NewsItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchNews = async () => {
+      try {
+        console.log("Fetching news...");
+        const response = await fetch(
+          "https://raw.githubusercontent.com/newspedia-crew/newspedia-web/intern-change/public/data/index.json",
+        );
+        console.log("Response status:", response.status);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        console.log("Fetched data:", data);
+        setNews(data);
+      } catch (error) {
+        console.error("Error fetching news:", error);
+        setError(`Failed to load news. Error: ${error instanceof Error ? error.message : String(error)}`);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchNews();
+  }, []);
+
+  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-col items-center justify-center min-h-screen">
+          <p className="text-red-500 text-sm mb-2">Failed to load news.</p>
+          <p className="text-red-500 text-xs">{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"
+              >
+                <Link href={`/news/${item.id}`}>
+                  <h3 className="text-black dark:text-white lg:text-xl font-medium hover:underline cursor-pointer">
+                    {item.title}
+                  </h3>
+                </Link>
+                <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, Newspaper } 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: Newspaper,
+      href: "/news",
+      active: segments.includes("news"),
+      label: "News",
+    },
   ];
 
   return (