Improve scroll anchor (#275)

components/chat-list.tsx

@@ -2,6 +2,7 @@ import { Separator } from '@/components/ui/separator'
 import { UIState } from '@/lib/chat/actions'
 import { Session } from '@/lib/types'
 import Link from 'next/link'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export interface ChatList {
   messages: UIState
@@ -17,19 +18,27 @@ export function ChatList({ messages, session, isShared }: ChatList) {
   return (
     <div className="relative mx-auto max-w-2xl px-4">
       {!isShared && !session ? (
-        <div className="mb-8 rounded-lg border bg-white p-4 dark:bg-zinc-950">
-          <p className="text-muted-foreground leading-normal">
-            Please{' '}
-            <Link href="/login" className="underline">
-              log in
-            </Link>{' '}
-            or{' '}
-            <Link href="/signup" className="underline">
-              sign up
-            </Link>{' '}
-            to save and revisit your chat history!
-          </p>
-        </div>
+        <>
+          <div className="group relative mb-4 flex items-start md:-ml-12">
+            <div className="bg-background flex size-[25px] shrink-0 select-none items-center justify-center rounded-md border shadow-sm">
+              <ExclamationTriangleIcon />
+            </div>
+            <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
+              <p className="text-muted-foreground leading-normal">
+                Please{' '}
+                <Link href="/login" className="underline">
+                  log in
+                </Link>{' '}
+                or{' '}
+                <Link href="/signup" className="underline">
+                  sign up
+                </Link>{' '}
+                to save and revisit your chat history!
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+        </>
       ) : null}
 
       {messages.map((message, index) => (