Merge pull request #20 from redis-applied-ai/fix/new-chat-while-chat-is-running

UI fix: clicking New Chat while triage is running does not open a new chat

Author: abrookins

Dockerfile

@@ -65,22 +65,23 @@ RUN apt-get update && apt-get install -y \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
-# Copy the virtual environment from the builder stage
-COPY --from=builder /app/.venv /app/.venv
-COPY --from=builder /app/artifacts /app/artifacts
-COPY --from=builder /app /app
+# Create the application user and docker group before copying app files so we
+# can set ownership in a single COPY layer instead of a separate chown layer.
+RUN useradd --create-home --shell /bin/bash app && \
+    (groupadd -g 999 docker || true) && \
+    usermod -aG docker app
+
+# Copy the application and virtual environment from the builder stage with
+# correct ownership. This avoids an extra  chown -R layer over /app.
+COPY --from=builder --chown=app:app /app /app
 
 # Add the virtual environment to PATH
 # This allows us to run "uvicorn" or "python" directly without "uv run"
 ENV PATH="/app/.venv/bin:$PATH"
 
-# Setup permissions
+# Install the entrypoint script
 COPY scripts/docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
-RUN chmod +x /usr/local/bin/docker-entrypoint.sh && \
-    useradd --create-home --shell /bin/bash app && \
-    groupadd -g 999 docker || true && \
-    usermod -aG docker app && \
-    chown -R app:app /app
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
 
 USER app
 

ui/e2e/chat.spec.ts

@@ -6,36 +6,79 @@ import { test, expect } from '@playwright/test';
 const uniqueMessage = `E2E hello ${Date.now()}`;
 
 test('send a message on Triage and see live processing', async ({ page }) => {
-  let threadId: string | undefined;
-  await page.goto('/triage');
-
-  // New-conversation textarea (initial input)
-  const newConversationTextarea = page.getByPlaceholder('Describe your Redis issue or ask a question...');
-  await newConversationTextarea.waitFor({ state: 'visible' });
-
-  // Type and send
-  await newConversationTextarea.fill(uniqueMessage);
-  await page.getByRole('button', { name: 'Send' }).click();
-
-  // Capture created thread id
-  const resp = await page.waitForResponse((r) => r.url().includes('/api/v1/tasks') && r.request().method() === 'POST');
-  const data = await resp.json();
-  threadId = data.thread_id as string;
-
-  try {
-    // After sending, UI enters a busy state and shows a Stop button while the task runs.
-    await expect(page.getByRole('button', { name: 'Stop' })).toBeVisible({ timeout: 30_000 });
-
-    // The user's message should appear in the transcript area soon after sending.
-    // The message may appear both in the sidebar and in the chat bubble; assert the chat bubble copy.
-    await expect(page.getByText(uniqueMessage).last()).toBeVisible({ timeout: 30_000 });
-
-    // Optional: stop the task to end the live run and return to transcript view.
-    await page.getByRole('button', { name: 'Stop' }).click();
-    await expect(page.getByRole('button', { name: 'Stop' })).toBeHidden({ timeout: 30_000 });
-  } finally {
-    if (threadId) {
-      await page.request.delete(`/api/v1/threads/${threadId}`);
-    }
-  }
+	let threadId: string | undefined;
+	await page.goto('/triage');
+
+	// New-conversation textarea (initial input)
+	const newConversationTextarea = page.getByPlaceholder('Describe your Redis issue or ask a question...');
+	await newConversationTextarea.waitFor({ state: 'visible' });
+
+	// Type and send
+	await newConversationTextarea.fill(uniqueMessage);
+	await page.getByRole('button', { name: 'Send' }).click();
+
+	// Capture created thread id
+	const resp = await page.waitForResponse((r) => r.url().includes('/api/v1/tasks') && r.request().method() === 'POST');
+	const data = await resp.json();
+	threadId = data.thread_id as string;
+
+	try {
+		// After sending, UI enters a busy state and shows a Stop button while the task runs.
+		await expect(page.getByRole('button', { name: 'Stop' })).toBeVisible({ timeout: 30_000 });
+
+		// The user's message should appear in the transcript area soon after sending.
+		// The message may appear both in the sidebar and in the chat bubble; assert the chat bubble copy.
+		await expect(page.getByText(uniqueMessage).last()).toBeVisible({ timeout: 30_000 });
+
+		// Optional: stop the task to end the live run and return to transcript view.
+		await page.getByRole('button', { name: 'Stop' }).click();
+		await expect(page.getByRole('button', { name: 'Stop' })).toBeHidden({ timeout: 30_000 });
+	} finally {
+		if (threadId) {
+			await page.request.delete(`/api/v1/threads/${threadId}`);
+		}
+	}
+});
+
+test('New Chat from an existing thread shows the new conversation form', async ({ page }) => {
+	let threadId: string | undefined;
+	await page.goto('/triage');
+
+	// Start a new conversation to create a thread
+	const newConversationTextarea = page.getByPlaceholder('Describe your Redis issue or ask a question...');
+	await newConversationTextarea.waitFor({ state: 'visible' });
+	await newConversationTextarea.fill(uniqueMessage);
+	await page.getByRole('button', { name: 'Send' }).click();
+
+	// Capture created thread id
+	const resp = await page.waitForResponse((r) => r.url().includes('/api/v1/tasks') && r.request().method() === 'POST');
+	const data = await resp.json();
+	threadId = data.thread_id as string;
+
+	try {
+		// Navigate to Triage with the thread query parameter as other pages do
+		await page.goto(`/triage?thread=${threadId}`);
+
+		// Existing-thread composer should be visible
+		const continueTextarea = page.getByPlaceholder('Continue the conversation...');
+		await expect(continueTextarea).toBeVisible({ timeout: 30_000 });
+
+		// Click New Chat in the Conversations sidebar
+		await page.getByRole('button', { name: 'New Chat' }).click();
+
+		// After New Chat, we should see the new-conversation form textarea
+		const newChatTextarea = page.getByPlaceholder('Describe your Redis issue or ask a question...');
+		await expect(newChatTextarea).toBeVisible({ timeout: 30_000 });
+
+		// And the existing-thread composer should no longer be present
+		await expect(continueTextarea).toHaveCount(0);
+
+		// URL should no longer contain the thread query parameter
+		const url = page.url();
+		expect(url).not.toContain('thread=');
+	} finally {
+		if (threadId) {
+			await page.request.delete(`/api/v1/threads/${threadId}`);
+		}
+	}
 });

ui/playwright.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   globalSetup: './e2e/support/global-setup.mjs',
   globalTeardown: './e2e/support/global-teardown.mjs',
   use: {
-    baseURL: 'http://localhost:3000',
+		baseURL: 'http://localhost:3002',
     trace: 'on-first-retry',
     video: 'retain-on-failure',
     screenshot: 'only-on-failure',

ui/src/pages/Triage.tsx

@@ -61,7 +61,7 @@ interface ChatThread {
 }
 
 const Triage = () => {
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [threads, setThreads] = useState<ChatThread[]>([]);
   const [activeThreadId, setActiveThreadId] = useState<string | null>(null);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -131,14 +131,23 @@ const Triage = () => {
   // Handle URL parameters to auto-select thread
   useEffect(() => {
     const threadParam = searchParams.get("thread");
-    if (threadParam && threads.length > 0 && !activeThreadId) {
+    if (
+      threadParam &&
+      threads.length > 0 &&
+      !activeThreadId &&
+      // If the user has explicitly chosen to start a new chat, do not
+      // auto-select a thread from the URL. This prevents the `?thread=`
+      // query param from re-activating an old conversation after clicking
+      // the "New Chat" button.
+      !showNewConversation
+    ) {
       // Check if the thread exists in our loaded threads
       const threadExists = threads.some((thread) => thread.id === threadParam);
       if (threadExists) {
         selectThread(threadParam);
       }
     }
-  }, [threads, searchParams, activeThreadId]);
+  }, [threads, searchParams, activeThreadId, showNewConversation]);
 
   // Auto-show new conversation when landing on the page or when threads exist but none selected
   useEffect(() => {
@@ -417,6 +426,20 @@ const Triage = () => {
     setShowNewConversation(true);
     setShowWebSocketMonitor(false);
 
+    // Clear any `thread` query parameter from the URL so that the page
+    // no longer treats an existing thread as selected. Without this, the
+    // URL effect above can immediately re-select the old thread after we
+    // clear `activeThreadId`, causing the UI to stay in "continue
+    // conversation" mode instead of showing the new chat form.
+    try {
+      const params = new URLSearchParams(searchParams);
+      params.delete("thread");
+      setSearchParams(params);
+    } catch {
+      // If anything goes wrong manipulating search params, fail soft and
+      // continue showing the new chat UI based on component state.
+    }
+
     // On mobile only, switch to chat view
     if (window.innerWidth < 768) {
       // md breakpoint