created route for OG image responce

package.json

@@ -70,6 +70,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "@uploadthing/react": "5.2.0",
     "@upstash/redis": "^1.24.3",
+    "@vercel/og": "^0.6.2",
     "ably": "^1.2.48",
     "ai": "2.2.20",
     "algoliasearch": "^4.20.0",

src/app/api/og/route.tsx

@@ -0,0 +1,103 @@
+import { ImageResponse } from "next/og";
+import logo from "@/assets/logo.png";
+// App router includes @vercel/og.
+// No need to install it.
+
+export const runtime = "edge";
+
+// Gradient Square Component
+function GradientSquare() {
+  return (
+    <div
+      style={{
+        width: "60px",
+        height: "60px",
+        background:
+          "linear-gradient(180deg, rgba(0,128,0,1) 0%, rgba(0,255,0,1) 100%)",
+        marginBottom: "20px",
+      }}
+    ></div>
+  );
+}
+
+function Circle() {
+  return (
+    <div
+      style={{
+        width: "85px",
+        height: "85px",
+        backgroundColor: "green",
+        borderRadius: "50%",
+        color: "white",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: "20px",
+      }}
+    >
+      IK
+    </div>
+  );
+}
+
+export async function GET(request: Request) {
+  try {
+    let title: string | null = "";
+    try {
+      const urlParams = new URLSearchParams(request.url.split("?")[1]);
+      title = urlParams.get("title");
+      console.log("title", title);
+    } catch (error) {
+      console.error("Error parsing URL:", error);
+    }
+    // const urlParams = new URLSearchParams(request.url.split("?")[1]); // Splitting URL to get query params
+    // const title = urlParams.get("title");
+    // console.log("title", title);
+
+    // const { searchParams } = new URL(request.url);
+    // console.log("searchParams", searchParams);
+    // const hasTitle = searchParams.has("title");
+    // const title01 = hasTitle
+    //   ? searchParams.get("title")?.slice(0, 100)
+    //   : "My default title";
+
+    return new ImageResponse(
+      (
+        <div tw="bg-black bg-cover h-screen w-full flex flex-col  justify-center p-20">
+          <div tw="flex flex-col gap-8">
+            <h1 tw="text-white mb-2 text-3xl font-serif  font-extrabold w-[42vw]">
+              {title
+                ? title
+                : " The Dual Role of Tween 80 in Biofilm Formation"}
+            </h1>
+            <h2 tw="text-gray-500 font-normal font-sans text-2xl">
+              Inhibition and Enhancement
+            </h2>
+          </div>
+          <div tw="flex justify-between mt-[100px]">
+            <span>
+              <Circle />
+            </span>
+            <span>
+              <img
+                width="85"
+                height="85"
+                src={`https://www.echoes.team${logo.src}`}
+              />
+              {/* <GradientSquare /> */}
+            </span>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      },
+    );
+  } catch (e: any) {
+    console.log(`${e.message}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}

src/app/dashboard/[slug]/chat/[chatid]/page.tsx

@@ -6,14 +6,61 @@ import { eq, and } from "drizzle-orm";
 import { auth, currentUser } from "@clerk/nextjs";
 import RoomWrapper from "@/components/room";
 import { AblyChannelProvider } from "@/components/ablyprovider";
+import { ResolvingMetadata, Metadata } from "next";
+
 export const dynamic = "force-dynamic",
   revalidate = 0;
 
-export default async function Page({
-  params,
-}: {
-  params: { uid: string; chatid: string };
-}) {
+type Props = {
+  params: { id: string; uid: string; chatid: string; chattitle: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export async function generateMetadata(
+  { params, searchParams }: Props,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const { sessionClaims } = auth();
+  let fetchedChat: ChatSchema[] = [];
+  // console.log("parent",parent)
+  const previousImages = (await parent).openGraph?.images || [];
+
+  // console.log("params", params);
+  // console.log("searchParams", searchParams)
+  if (sessionClaims?.org_id) {
+    fetchedChat = await db
+      .select()
+      .from(chats)
+      .where(and(eq(chats.id, Number(params.chatid))))
+      .limit(1)
+      .all();
+  }
+  console.log("chattitle in chat id page", fetchedChat[0]?.title as string);
+
+  return {
+    title: "Echoes chat",
+    description: "echoes Chat",
+    alternates: {
+      canonical: `https://www.echoes.team/dashboard/${sessionClaims?.org_slug}/chat/${params.chatid}`,
+    },
+    openGraph: {
+      title: fetchedChat[0]?.title as string,
+      description: "Echoes",
+      type: "website",
+
+      images: [
+        {
+          url: `api/og?title=${fetchedChat[0]?.title as string}`,
+          width: 1200,
+          height: 680,
+        },
+        ...previousImages,
+      ],
+    },
+  };
+}
+
+export default async function Page({ params }: Props) {
   const { userId, sessionClaims } = auth();
 
   const user = await currentUser();
@@ -27,7 +74,6 @@ export default async function Page({
   }
 
   let chatlog: ChatLog = { log: [], tldraw_snapshot: [] };
-  // let tldrawSnapshot: SnapShot = { tldraw_snapshot: [] }
   let fetchedChat: ChatSchema[] = [];
 
   if (sessionClaims.org_id) {
@@ -44,12 +90,10 @@ export default async function Page({
       .all();
   }
   const msg = fetchedChat[0]?.messages;
-  console.log("msg", msg);
   if (fetchedChat.length === 1 && msg) {
     chatlog = JSON.parse(msg as string) as ChatLog;
-    console.log("chatlog", chatlog);
-    console.log("chatlogData", chatlog.log);
-    // console.log("chatlogSnapshot", chatlog.tldraw_snapshot);
+    // console.log("chatlog", chatlog);
+    // console.log("chatlogData", chatlog.log);
   }
 
   return (

src/app/dashboard/[slug]/page.tsx

@@ -5,11 +5,40 @@ import { chats, Chat as ChatSchema } from "@/lib/db/schema";
 import { eq, desc, ne, and } from "drizzle-orm";
 import { auth } from "@clerk/nextjs";
 import ChatCardWrapper from "@/components/chatcardwrapper";
+// import { Metadata } from "next";
+
 // import Uploadzone from "@/components/uploadzone";
 
 export const dynamic = "force-dynamic",
   revalidate = 0;
 
+// type Props = {
+//   params: { id: string };
+//   searchParams: { [key: string]: string | string[] | undefined };
+// };
+
+// export async function generateMetadata({
+//   params,
+//   searchParams,
+// }: Props): Promise<Metadata> {
+
+//   return {
+//     title: "Echoes slug",
+//     description: "echoes",
+//     openGraph: {
+//       title: "Echoes",
+//       description: "Echoes",
+//       type: "website",
+//       images: [
+//         {
+//           url: "api/og",
+//           width: 1200,
+//           height: 680,
+//         },
+//       ],
+//     },
+//   };
+// }
 export default async function Page({
   params,
   searchParams,

src/app/layout.tsx

@@ -7,6 +7,7 @@ import { Inter } from "next/font/google";
 import QueryProviders from "@/app/queryProvider";
 import { Toaster } from "@/components/ui/toaster";
 import { Providers } from "@/app/providers";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
@@ -15,6 +16,23 @@ export const metadata = {
   manifest: "/manifest.json",
   viewport:
     "minimum-scale=1.0, initial-scale=1.0, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover",
+  openGraph: {
+    title: "Echoes",
+    description:
+      "Collaborative Platform for Researchers. Designed for Humans and AIs.",
+    url: "https://echoes.team",
+    siteName: "Echoes",
+    images: [
+      {
+        url: `/api/og?title=Collaborative Platform for Researchers. Designed for Humans and AIs.`,
+        width: 1800,
+        height: 1600,
+        alt: "Echoes",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
 };
 
 export default function RootLayout({
@@ -236,20 +254,17 @@ export default function RootLayout({
             content="https://echoes.team/android-chrome-192x192.png"
           />
           <meta name="twitter:creator" content="@satiyum" />
-          <meta property="og:type" content="website" />
+          {/* <meta property="og:type" content="website" />
           <meta property="og:title" content="Echoes" />
           <meta
             property="og:description"
             content="Collaborative Platform for Researchers. Designed for Humans and AIs."
           />
           <meta property="og:site_name" content="Echoes" />
-          <meta property="og:url" content="https://echoes.team" />
-          <meta
-            property="og:image"
-            content="https://echoes.team/apple-icon-180.png"
-          />
+          <meta property="og:url" content="https://www.echoes.team/api/og" />
+          <meta property="og:image" content="https://echoes.team/api/og" /> */}
 
-          <title>Echoes</title>
+          {/* <title>Echoes</title> */}
         </head>
         <body className="bg-background overscroll-none">
           <Providers>

src/app/page.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import { useEffect } from "react";
 import { Header } from "@/components/header";
 import { Button, buttonVariants } from "@/components/button";
@@ -10,6 +9,7 @@ import { motion, AnimatePresence, useAnimation } from "framer-motion";
 import { useInView } from "react-intersection-observer";
 import { Key, LayoutDashboard } from "lucide-react";
 import { useAuth } from "@clerk/nextjs";
+
 const handleSmoothScroll = (): void => {
   if (typeof window !== "undefined") {
     const hashId = window.location.hash;

src/app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: "", // No path is disallowed
+    },
+    sitemap: "https://acme.com/sitemap.xml",
+  };
+}

src/components/chatcard.tsx

@@ -101,6 +101,7 @@ const Chatcard = ({ chat, uid, org_id, org_slug, priority, type }: Props) => {
   const firstMessage = chatlog.log[0].content;
   const chatTitle = chat.title || firstMessage;
 
+  console.log("chatCard chat", chatlog);
   // extracts chatentry from chatlog
   const chats = JSON.parse(chat.messages as string) as ChatLog;
   const userIds = getUserIdList(chats.log);

src/components/search.tsx

@@ -56,13 +56,14 @@ const Search = (props: Props) => {
   }, []); // open command bar with / key
 
   useEffect(() => {
+    // console.log("throttledValue", throttledValue);
     index
       .search(throttledValue, {
         hitsPerPage: 8,
         filters: `orgSlug: "${props.orgSlug}"`,
       })
       .then((response) => {
-        console.log(response);
+        console.log(" search responce", response);
         return setResults(response.hits);
       });
   }, [throttledValue]);
@@ -71,7 +72,7 @@ const Search = (props: Props) => {
     <CommandDialog open={showSearchDialog} onOpenChange={toggleSearchDialog}>
       <CommandInput
         onValueChange={(val) => {
-          console.log("got the input value");
+          console.log("got the input value", val);
           setValue(val);
         }}
         value={value}

src/middleware.ts

@@ -6,7 +6,7 @@ import { env } from "@/app/env.mjs";
 // This is your original middleware
 const clerkMiddleware = authMiddleware({
   // "/" will be accessible to all users
-  publicRoutes: ["/"],
+  publicRoutes: ["/api/og", "/"],
 });
 
 export async function middleware(req: NextRequest, event: NextFetchEvent) {