feat(home): add AI chat interface with OpenCode integration

src/hooks/useMessages.ts

@@ -0,0 +1,54 @@
+import { useRef, useEffect, useState, useCallback } from 'react'
+
+type Status = 'submitted' | 'streaming' | 'ready' | 'error'
+
+interface UseMessagesOptions {
+  status: Status
+}
+
+export function useMessages({ status }: UseMessagesOptions) {
+  const [hasSentMessage, setHasSentMessage] = useState(false)
+  const [isAtBottom, setIsAtBottom] = useState(true)
+  
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (status === 'submitted' || status === 'streaming') {
+      setHasSentMessage(true)
+    }
+  }, [status])
+
+  useEffect(() => {
+    const container = messagesContainerRef.current
+    if (!container) return
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+      setIsAtBottom(distanceFromBottom <= 100)
+    }
+
+    handleScroll()
+    container.addEventListener('scroll', handleScroll)
+    return () => container.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
+    messagesEndRef.current?.scrollIntoView({ behavior })
+  }, [])
+
+  useEffect(() => {
+    if (status === 'ready' || status === 'submitted') {
+      scrollToBottom('auto')
+    }
+  }, [status, scrollToBottom])
+
+  return {
+    containerRef: messagesContainerRef,
+    endRef: messagesEndRef,
+    isAtBottom,
+    scrollToBottom,
+    hasSentMessage,
+  }
+}