Implement System-Wide Concurrency and Performance Improvements

app/page.tsx

@@ -1,15 +1,24 @@
 import { Chat } from '@/components/chat'
 import {nanoid } from 'nanoid'
-import { AI } from './actions'
+import { AI, AIState } from './actions'
 
 export const maxDuration = 60
 
 import { MapDataProvider } from '@/components/map/map-data-context'
 
 export default function Page() {
   const id = nanoid()
+  const initialAIState: AIState = {
+    conversations: [
+      {
+        id: nanoid(),
+        chatId: id,
+        messages: []
+      }
+    ]
+  }
   return (
-    <AI initialAIState={{ chatId: id, messages: [] }}>
+    <AI initialAIState={initialAIState}>
       <MapDataProvider>
         <Chat id={id} />
       </MapDataProvider>

app/search/[id]/page.tsx

@@ -1,76 +1,79 @@
+import { nanoid } from 'nanoid';
 import { notFound, redirect } from 'next/navigation';
 import { Chat } from '@/components/chat';
-import { getChat, getChatMessages } from '@/lib/actions/chat'; // Added getChatMessages
-import { AI } from '@/app/actions';
+import { getChat, getChatMessages } from '@/lib/actions/chat';
+import { AI, AIState } from '@/app/actions';
 import { MapDataProvider } from '@/components/map/map-data-context';
-import { getCurrentUserIdOnServer } from '@/lib/auth/get-current-user'; // For server-side auth
-import type { AIMessage } from '@/lib/types'; // For AIMessage type
-import type { Message as DrizzleMessage } from '@/lib/actions/chat-db'; // For DrizzleMessage type
+import { getCurrentUserIdOnServer } from '@/lib/auth/get-current-user';
+import type { AIMessage } from '@/lib/types';
+import type { Message as DrizzleMessage } from '@/lib/actions/chat-db';
 
 export const maxDuration = 60;
 
 export interface SearchPageProps {
-  params: Promise<{ id: string }>; // Keep as is for now
+  params: Promise<{ id: string }>;
 }
 
+const validRoles: AIMessage['role'][] = ['user', 'assistant', 'system', 'function', 'data', 'tool'];
+
+function safeGetRole(role: string): AIMessage['role'] {
+  if (validRoles.includes(role as AIMessage['role'])) {
+    return role as AIMessage['role'];
+  }
+  console.warn(`Invalid role "${role}" found in database, defaulting to 'user'.`);
+  return 'user';
+}
+
+
 export async function generateMetadata({ params }: SearchPageProps) {
-  const { id } = await params; // Keep as is for now
-  // TODO: Metadata generation might need authenticated user if chats are private
-  // For now, assuming getChat can be called or it handles anon access for metadata appropriately
-  const userId = await getCurrentUserIdOnServer(); // Attempt to get user for metadata
-  const chat = await getChat(id, userId || 'anonymous'); // Pass userId or 'anonymous' if none
+  const { id } = await params;
+  const userId = await getCurrentUserIdOnServer();
+  const chat = await getChat(id, userId || 'anonymous');
   return {
     title: chat?.title?.toString().slice(0, 50) || 'Search',
   };
 }
 
 export default async function SearchPage({ params }: SearchPageProps) {
-  const { id } = await params; // Keep as is for now
+  const { id } = await params;
   const userId = await getCurrentUserIdOnServer();
 
   if (!userId) {
-    // If no user, redirect to login or show appropriate page
-    // For now, redirecting to home, but a login page would be better.
     redirect('/');
   }
 
   const chat = await getChat(id, userId);
 
   if (!chat) {
-    // If chat doesn't exist or user doesn't have access (handled by getChat)
     notFound();
   }
 
-  // Fetch messages for the chat
   const dbMessages: DrizzleMessage[] = await getChatMessages(chat.id);
 
-  // Transform DrizzleMessages to AIMessages
   const initialMessages: AIMessage[] = dbMessages.map((dbMsg): AIMessage => {
     return {
       id: dbMsg.id,
-      role: dbMsg.role as AIMessage['role'], // Cast role, ensure AIMessage['role'] includes all dbMsg.role possibilities
+      role: safeGetRole(dbMsg.role),
       content: dbMsg.content,
       createdAt: dbMsg.createdAt ? new Date(dbMsg.createdAt) : undefined,
-      // 'type' and 'name' are not in the basic Drizzle 'messages' schema.
-      // These would be undefined unless specific logic is added to derive them.
-      // For instance, if a message with role 'tool' should have a 'name',
-      // or if some messages have a specific 'type' based on content or other flags.
-      // This mapping assumes standard user/assistant messages primarily.
     };
   });
 
-  return (
-    <AI
-      initialAIState={{
+  const initialAIState = {
+    conversations: [
+      {
+        id: nanoid(),
         chatId: chat.id,
-        messages: initialMessages, // Use the transformed messages from the database
-        // isSharePage: true, // This was in PR#533, but share functionality is removed.
-                             // If needed for styling or other logic, it can be set.
-      }}
-    >
+        messages: initialMessages,
+      }
+    ]
+  } satisfies AIState;
+
+  return (
+    <AI initialAIState={initialAIState}>
       <MapDataProvider>
         <Chat id={id} />
       </MapDataProvider>
     </AI>
   );
-}
+}

components/chat-panel.tsx

@@ -23,7 +23,7 @@ export interface ChatPanelRef {
 
 export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, input, setInput }, ref) => {
   const [, setMessages] = useUIState<typeof AI>()
-  const { submit, clearChat } = useActions()
+  const { submit } = useActions()
   // Removed mcp instance as it's no longer passed to submit
   const [isMobile, setIsMobile] = useState(false)
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
@@ -69,7 +69,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     }
   }
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (
+    e: React.FormEvent<HTMLFormElement>,
+    newChat?: boolean
+  ) => {
     e.preventDefault()
     if (!input && !selectedFile) {
       return
@@ -86,18 +89,23 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       })
     }
 
-    setMessages(currentMessages => [
-      ...currentMessages,
-      {
-        id: nanoid(),
-        component: <UserMessage content={content} />
-      }
-    ])
+    if (!newChat) {
+      setMessages(currentMessages => [
+        ...currentMessages,
+        {
+          id: nanoid(),
+          component: <UserMessage content={content} />
+        }
+      ])
+    }
 
     const formData = new FormData(e.currentTarget)
     if (selectedFile) {
       formData.append('file', selectedFile)
     }
+    if (newChat) {
+      formData.append('newChat', 'true')
+    }
 
     setInput('')
     clearAttachment()
@@ -106,10 +114,12 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     setMessages(currentMessages => [...currentMessages, responseMessage as any])
   }
 
-  const handleClear = async () => {
-    setMessages([])
+  const handleNewConversation = async () => {
     clearAttachment()
-    await clearChat()
+    const formData = new FormData()
+    formData.append('newChat', 'true')
+    const responseMessage = await submit(formData)
+    setMessages(currentMessages => [...currentMessages, responseMessage as any])
   }
 
   useEffect(() => {
@@ -129,10 +139,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
           type="button"
           variant={'secondary'}
           className="rounded-full bg-secondary/80 group transition-all hover:scale-105 pointer-events-auto"
-          onClick={() => handleClear()}
+          onClick={handleNewConversation}
         >
           <span className="text-sm mr-2 group-hover:block hidden animate-in fade-in duration-300">
-            New
+            New Conversation
           </span>
           <Plus size={18} className="group-hover:rotate-90 transition-all" />
         </Button>

components/chat.tsx

@@ -64,11 +64,20 @@ export function Chat({ id }: ChatProps) {
   }, [id, path, messages])
 
   useEffect(() => {
-    if (aiState.messages[aiState.messages.length - 1]?.type === 'response') {
-      // Refresh the page to chat history updates
-      router.refresh()
+    if (
+      aiState.conversations &&
+      aiState.conversations.length > 0
+    ) {
+      const lastConversation = aiState.conversations[aiState.conversations.length - 1];
+      if (lastConversation && lastConversation.messages.length > 0) {
+        const lastMessage = lastConversation.messages[lastConversation.messages.length - 1];
+        if (lastMessage?.type === 'response') {
+          // Refresh the page to chat history updates
+          router.refresh();
+        }
+      }
     }
-  }, [aiState, router])
+  }, [aiState, router]);
 
   // Get mapData to access drawnFeatures
   const { mapData } = useMapData();

components/map-toggle.tsx

@@ -29,7 +29,7 @@ export function MapToggle() {
         <DropdownMenuItem onClick={() => {setMapType(MapToggleEnum.FreeMode)}}>
           My Maps
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => {setMapType(MapToggleEnum.DrawingMode)}}>
+        <DropdownMenuItem data-testid="drawing-mode-button" onClick={() => {setMapType(MapToggleEnum.DrawingMode)}}>
           <Pencil className="h-[1rem] w-[1rem] mr-2" />
           Draw & Measure
         </DropdownMenuItem>