Merge pull request #278 from QueueLab/fix/new-chat-button-disappears

fix(chat): Remove isButtonPressed state from ChatPanel

Author: ngoiyaeric

.env

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://user:password@host:port/db"

app/actions.tsx

@@ -248,6 +248,17 @@ async function submit(formData?: FormData, skip?: boolean) {
   };
 }
 
+async function clearChat() {
+  'use server'
+
+  const aiState = getMutableAIState<typeof AI>()
+
+  aiState.done({
+    chatId: nanoid(),
+    messages: []
+  })
+}
+
 export type AIState = {
   messages: AIMessage[];
   chatId: string;
@@ -272,6 +283,7 @@ const initialUIState: UIState = [];
 export const AI = createAI<AIState, UIState>({
   actions: {
     submit,
+    clearChat,
   },
   initialUIState,
   initialAIState,

bun.lockb

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState, useRef } from 'react'
-import { useRouter } from 'next/navigation'
 import type { AI, UIState } from '@/app/actions'
 import { useUIState, useActions } from 'ai/rsc'
 // Removed import of useGeospatialToolMcp as it's no longer used/available
@@ -20,13 +19,11 @@ interface ChatPanelProps {
 
 export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
   const [, setMessages] = useUIState<typeof AI>()
-  const { submit } = useActions()
+  const { submit, clearChat } = useActions()
   // Removed mcp instance as it's no longer passed to submit
-  const [isButtonPressed, setIsButtonPressed] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
-  const router = useRouter()
 
   // Detect mobile layout
   useEffect(() => {
@@ -38,19 +35,8 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
     return () => window.removeEventListener('resize', checkMobile)
   }, [])
 
-  useEffect(() => {
-    if (isButtonPressed) {
-      inputRef.current?.focus()
-      setIsButtonPressed(false)
-    }
-  }, [isButtonPressed])
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    if (isButtonPressed) {
-      handleClear()
-      setIsButtonPressed(false)
-    }
     setMessages(currentMessages => [
       ...currentMessages,
       {
@@ -64,16 +50,17 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
     setMessages(currentMessages => [...currentMessages, responseMessage as any])
   }
 
-  const handleClear = () => {
-    router.push('/')
+  const handleClear = async () => {
+    setMessages([])
+    await clearChat()
   }
 
   useEffect(() => {
     inputRef.current?.focus(); 
   }, [])
 
   // New chat button (appears when there are messages)
-  if (messages.length > 0 && !isButtonPressed && !isMobile) {
+  if (messages.length > 0 && !isMobile) {
     return (
       <div
         className={cn(

components/chat-panel.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import React from 'react'
-import { useRouter } from 'next/navigation'
+import { useUIState, useActions } from 'ai/rsc'
+import { AI } from '@/app/actions'
 import { Button } from '@/components/ui/button'
 import {
   Search,
@@ -18,10 +19,12 @@ import { MapToggle } from './map-toggle'
 import { ModeToggle } from './mode-toggle'
 
 export const MobileIconsBar: React.FC = () => {
-  const router = useRouter()
+  const [, setMessages] = useUIState<typeof AI>()
+  const { clearChat } = useActions()
 
-  const handleNewChat = () => {
-    router.push('/')
+  const handleNewChat = async () => {
+    setMessages([])
+    await clearChat()
   }
 
   return (