add favicon

app/chat-list.tsx

@@ -16,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>

app/empty.tsx

@@ -6,13 +6,13 @@ 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",
+        "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 group-hover:bg-zinc-200 w-9 h-6 absolute left-0 top-full -mt-[1px] scale-75 origin-top-left transition-colors"
+        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")',
@@ -27,7 +27,7 @@ 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"
+        "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">

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

@@ -22,7 +22,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>