feat: support message creation from url query (#960)

components/chat.tsx

@@ -2,7 +2,7 @@
 
 import type { Attachment, UIMessage } from 'ai';
 import { useChat } from '@ai-sdk/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 import { ChatHeader } from '@/components/chat-header';
 import type { Vote } from '@/lib/db/schema';
@@ -16,6 +16,7 @@ import { unstable_serialize } from 'swr/infinite';
 import { getChatHistoryPaginationKey } from './sidebar-history';
 import { toast } from './toast';
 import type { Session } from 'next-auth';
+import { useSearchParams } from 'next/navigation';
 
 export function Chat({
   id,
@@ -66,6 +67,23 @@ export function Chat({
     },
   });
 
+  const searchParams = useSearchParams();
+  const query = searchParams.get('query');
+
+  const [hasAppendedQuery, setHasAppendedQuery] = useState(false);
+
+  useEffect(() => {
+    if (query && !hasAppendedQuery) {
+      append({
+        role: 'user',
+        content: query,
+      });
+
+      setHasAppendedQuery(true);
+      window.history.replaceState({}, '', `/chat/${id}`);
+    }
+  }, [query, append, hasAppendedQuery, id]);
+
   const { data: votes } = useSWR<Array<Vote>>(
     messages.length >= 2 ? `/api/vote?chatId=${id}` : null,
     fetcher,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai-chatbot",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",

tests/e2e/chat.test.ts

@@ -138,4 +138,15 @@ test.describe('Chat activity', () => {
     await assistantMessage.downvote();
     await chatPage.isVoteComplete();
   });
+
+  test('Create message from url query', async ({ page }) => {
+    await page.goto('/?query=Why is the sky blue?');
+    const userMessage = await chatPage.getRecentUserMessage();
+    expect(userMessage.content).toBe('Why is the sky blue?');
+
+    await chatPage.isGenerationComplete();
+
+    const assistantMessage = await chatPage.getRecentAssistantMessage();
+    expect(assistantMessage.content).toContain("It's just blue duh!");
+  });
 });

tests/pages/chat.ts

@@ -152,7 +152,10 @@ export class ChatPage {
     const messageElements = await this.page.getByTestId('message-user').all();
     const lastMessageElement = messageElements[messageElements.length - 1];
 
-    const content = await lastMessageElement.innerText();
+    const content = await lastMessageElement
+      .getByTestId('message-content')
+      .innerText()
+      .catch(() => null);
 
     const hasAttachments = await lastMessageElement
       .getByTestId('message-attachments')