Merge branch 'main' into alt-drizzle

app/api/chat/route.ts

@@ -1,7 +1,6 @@
 import { auth } from "@/auth";
 import { chats, db } from "@/lib/db/schema";
 import { openai } from "@/lib/openai";
-import { nanoid } from "@/lib/utils";
 import { OpenAIStream, StreamingTextResponse } from "ai-connector";
 
 export const runtime = "edge";

app/chat-list.tsx

@@ -5,6 +5,7 @@ import { type Message } from "ai-connector";
 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[];
@@ -15,7 +16,7 @@ export function ChatList({ messages }: ChatList) {
     <div className="relative h-full dark:bg-zinc-900">
       <div className="sticky top-0 border-b w-full bg-black md:hidden text-white font-semibold">
         <div className="px-4 py-2 flex items-center justify-between">
-          <div className="flex flex-row gap-1 whitespace-nowrap items-center">
+          <div className="flex flex-row gap-2 whitespace-nowrap items-center">
             <NextChatLogo className="h-6 w-6" />
             <span className="select-none">Next.js Chatbot</span>
           </div>
@@ -36,7 +37,9 @@ export function ChatList({ messages }: ChatList) {
               />
             ))}
           </div>
-        ) : null}
+        ) : (
+          <EmptyScreen />
+        )}
       </div>
     </div>
   );

app/chat.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { ChatList } from "./chat-list";
 import { Prompt } from "./prompt";
 import { useChat, type Message } from "ai-connector";
+import { ChatList } from "./chat-list";
 
 export interface ChatProps {
   // create?: (input: string) => Chat | undefined;

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 transition-all cursor-pointer select-none hover:drop-shadow-[0_1px_1px_rgba(0,0,0,0.08)] hover:shadow-[0rem_0rem_0rem_0.0625rem_rgba(0,0,0,.02),0rem_0.125rem_0.25rem_rgba(0,0,0,.08),0rem_0.45rem_1rem_rgba(0,0,0,.06)] hover:bg-white group duration-300",
+        fontMessage.className
+      )}
+      style={{}}
+    >
+      <div
+        className="bg-zinc-100 w-9 h-6 absolute left-0 top-full -mt-[1px] scale-75 origin-top-left group-hover:bg-white transition-all duration-300"
+        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]"
+      )}
+    >
+      <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/prompt.tsx

@@ -32,7 +32,7 @@ export function Prompt({
         await onSubmit(input);
       }}
       ref={formRef}
-      className="stretch flex w-full flex-row gap-3 md:max-w-2xl lg:max-w-xl xl:max-w-3xl mx-auto px-4 lg:pl-16"
+      className="stretch flex w-full flex-row gap-3 md:max-w-2xl lg:max-w-xl xl:max-w-3xl mx-auto px-4"
     >
       <div className="relative flex h-full flex-1 flex-row-reverse items-stretch md:flex-col">
         <div>

app/sidebar.tsx

@@ -9,6 +9,7 @@ import { Plus } from "lucide-react";
 import { unstable_cache } from "next/cache";
 import Link from "next/link";
 import { SidebarItem } from "./sidebar-item";
+import { ExternalLink } from "./external-link";
 
 export interface SidebarProps {
   session?: Session;
@@ -22,7 +23,7 @@ export function Sidebar({ session, newChat }: SidebarProps) {
         <div className="scrollbar-trigger relative h-full w-full flex-1 items-start">
           <aside className="flex h-full w-full flex-col p-2 shadow-lg ring-1 ring-zinc-900/10 dark:ring-zinc-200/10 relative z-10">
             <div className="flex flex-row gap-1 items-center justify-between text-base font-semibold tracking-tight antialiased bg-black text-white px-4 py-4 -m-2 mb-2">
-              <div className="flex flex-row gap-1 whitespace-nowrap items-center">
+              <div className="flex flex-row gap-2 whitespace-nowrap items-center">
                 <NextChatLogo className="h-6 w-6" />
                 <span className="select-none">Next.js Chatbot</span>
               </div>
@@ -49,6 +50,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>