Improve scroll anchor (#275)

components/chat-panel.tsx

@@ -17,9 +17,18 @@ export interface ChatPanelProps {
   title?: string
   input: string
   setInput: (value: string) => void
+  isAtBottom: boolean
+  scrollToBottom: () => void
 }
 
-export function ChatPanel({ id, title, input, setInput }: ChatPanelProps) {
+export function ChatPanel({
+  id,
+  title,
+  input,
+  setInput,
+  isAtBottom,
+  scrollToBottom
+}: ChatPanelProps) {
   const [aiState] = useAIState()
   const [messages, setMessages] = useUIState<typeof AI>()
   const { submitUserMessage } = useActions()
@@ -33,24 +42,27 @@ export function ChatPanel({ id, title, input, setInput }: ChatPanelProps) {
     },
     {
       heading: 'What is the price of',
-      subheading: 'DOGE in the stock market?',
-      message: 'What is the price of DOGE in the stock market?'
+      subheading: '$DOGE right now?',
+      message: 'What is the price of $DOGE right now?'
     },
     {
       heading: 'I would like to buy',
-      subheading: '42 DOGE coins',
-      message: `I would like to buy 42 DOGE coins`
+      subheading: '42 $DOGE',
+      message: `I would like to buy 42 $DOGE`
     },
     {
       heading: 'What are some',
-      subheading: `recent events about DOGE?`,
-      message: `What are some recent events about DOGE?`
+      subheading: `recent events about $DOGE?`,
+      message: `What are some recent events about $DOGE?`
     }
   ]
 
   return (
     <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% duration-300 ease-in-out animate-in dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
-      <ButtonScrollToBottom />
+      <ButtonScrollToBottom
+        isAtBottom={isAtBottom}
+        scrollToBottom={scrollToBottom}
+      />
 
       <div className="mx-auto sm:max-w-2xl sm:px-4">
         <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">