add empty screen and external links

app/chat-list.tsx

@@ -5,6 +5,7 @@ import { type Message } from "@prisma/client";
 import { ChatMessage } from "./chat-message";
 import { NextChatLogo } from "@/components/ui/nextchat-logo";
 import { Plus } from "lucide-react";
+import { EmptyScreen } from "./empty";
 
 export interface ChatList {
   messages: Message[];
@@ -36,7 +37,9 @@ export function ChatList({ messages }: ChatList) {
               />
             ))}
           </div>
-        ) : null}
+        ) : (
+          <EmptyScreen />
+        )}
       </div>
     </div>
   );

app/empty.tsx

@@ -0,0 +1,56 @@
+import { cn } from "@/lib/utils";
+import { ExternalLink } from "./external-link";
+import { fontMessage } from "@/lib/fonts";
+
+function ExampleBubble({ children }: { children?: React.ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "flex-1 flex items-start justify-between p-4 rounded-lg relative bg-zinc-100 text-sm font-medium group hover:bg-zinc-200 hover transition-colors cursor-pointer select-none",
+        fontMessage.className
+      )}
+      style={{}}
+    >
+      <div
+        className="bg-zinc-100 group-hover:bg-zinc-200 w-9 h-6 absolute left-0 top-full -mt-[1px] scale-75 origin-top-left transition-colors"
+        style={{
+          clipPath:
+            'path("M31.1838 0C24.9593 10.7604 13.3251 18 0 18C9.94113 18 18 9.94113 18 0H31.1838Z")',
+        }}
+      ></div>
+      <p>{children}</p>
+    </div>
+  );
+}
+
+export function EmptyScreen() {
+  return (
+    <div
+      className={cn(
+        "w-full h-full flex items-center justify-center pt-4 pb-8 pr-0 lg:pr-[260px] lg:pl-16"
+      )}
+    >
+      <div className="p-8 rounded-lg flex flex-col items-center justify-center gap-8 max-w-2xl">
+        <div className="flex items-center justify-center gap-6">
+          <div className="text-zinc-500 font-medium">
+            <p>Welcome to Next.js Chatbot!</p>
+            <p className="mt-2">
+              This is an open source AI chatbot app built with{" "}
+              <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{" "}
+              <ExternalLink href="https://vercel.com/storage/postgres">
+                Vercel Postgres
+              </ExternalLink>
+              . You can start a conversation here or try the following examples:
+            </p>
+          </div>
+        </div>
+        <div className="grid gap-x-4 gap-y-6 grid-cols-2 w-full">
+          <ExampleBubble>Explain technical concepts</ExampleBubble>
+          <ExampleBubble>Summarize article</ExampleBubble>
+          <ExampleBubble>Get assistance</ExampleBubble>
+          <ExampleBubble>Draft an email</ExampleBubble>
+        </div>
+      </div>
+    </div>
+  );
+}

app/external-link.tsx

@@ -0,0 +1,29 @@
+export function ExternalLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      className="inline-flex gap-1 hover:underline flex-1 justify-center leading-4"
+    >
+      <span>{children}</span>
+      <svg
+        aria-hidden="true"
+        height="7"
+        viewBox="0 0 6 6"
+        width="7"
+        className="opacity-70"
+      >
+        <path
+          d="M1.25215 5.54731L0.622742 4.9179L3.78169 1.75597H1.3834L1.38936 0.890915H5.27615V4.78069H4.40513L4.41109 2.38538L1.25215 5.54731Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </a>
+  );
+}

app/sidebar.tsx

@@ -8,6 +8,7 @@ import { Plus } from "lucide-react";
 import Link from "next/link";
 import { unstable_cache } from "next/cache";
 import { SidebarItem } from "./sidebar-item";
+import { ExternalLink } from "./external-link";
 
 export interface SidebarProps {
   session?: Session;
@@ -48,6 +49,33 @@ export function Sidebar({ session, newChat }: SidebarProps) {
                 <SidebarList session={session} />
               </div>
             </div>
+
+            <div>
+              <div className="flex gap-4 items-center justify-center text-sm font-medium leading-4 whitespace-nowrap">
+                <a
+                  href="https://github.com/vercel/nextjs-ai-chatbot/"
+                  target="_blank"
+                  className="inline-flex gap-2 px-3 py-2 items-center border border-zinc-300 rounded-md hover:border-zinc-600 transition-colors"
+                >
+                  <svg
+                    aria-label="Vercel logomark"
+                    height="13"
+                    role="img"
+                    className="w-auto overflow-hidden"
+                    viewBox="0 0 74 64"
+                  >
+                    <path
+                      d="M37.5896 0.25L74.5396 64.25H0.639648L37.5896 0.25Z"
+                      fill="var(--geist-foreground)"
+                    ></path>
+                  </svg>
+                  <span>Deploy</span>
+                </a>
+                <ExternalLink href="https://github.com/vercel/nextjs-ai-chatbot/">
+                  View on GitHub
+                </ExternalLink>
+              </div>
+            </div>
           </aside>
         </div>
       </div>