From 451a866c73d76339b28a1d219c559c10493cf475 Mon Sep 17 00:00:00 2001
From: Jeremy <git@jrmyphlmn.com>
Date: Mon, 28 Apr 2025 23:18:02 -0700
Subject: [PATCH] feat: support message creation from url query (#960)

---
 components/chat.tsx    | 20 +++++++++++++++++++-
 package.json           |  2 +-
 tests/e2e/chat.test.ts | 11 +++++++++++
 tests/pages/chat.ts    |  5 ++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index 84204c6..045d61c 100644
--- a/components/chat.tsx
+++ b/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,
diff --git a/package.json b/package.json
index 72c5611..46ec24f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ai-chatbot",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "private": true,
   "scripts": {
     "dev": "next dev --turbo",
diff --git a/tests/e2e/chat.test.ts b/tests/e2e/chat.test.ts
index a2e4ed4..07f9147 100644
--- a/tests/e2e/chat.test.ts
+++ b/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!");
+  });
 });
diff --git a/tests/pages/chat.ts b/tests/pages/chat.ts
index 2b770b9..f88a06b 100644
--- a/tests/pages/chat.ts
+++ b/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')