Hide details of Nut's behavior by default (#113)

app/components/chat/Messages.client.tsx

@@ -1,8 +1,9 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useState } from 'react';
 import { classNames } from '~/utils/classNames';
 import WithTooltip from '~/components/ui/Tooltip';
-import type { Message } from '~/lib/persistence/message';
+import { parseTestResultsMessage, type Message } from '~/lib/persistence/message';
 import { MessageContents } from './MessageContents';
+import { assert } from '~/lib/replay/ReplayProtocolClient';
 
 interface MessagesProps {
   id?: string;
@@ -14,61 +15,172 @@ interface MessagesProps {
 
 export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
   const { id, hasPendingMessage = false, pendingMessageStatus = '', messages = [] } = props;
+  const [showDetailMessageIds, setShowDetailMessageIds] = useState<string[]>([]);
+
+  const getLastUserResponse = (index: number) => {
+    return messages.findLast((message, messageIndex) => messageIndex < index && message.category === 'UserResponse');
+  };
+
+  // Return whether the test results at index are the last for the associated user response.
+  const isLastTestResults = (index: number) => {
+    let lastIndex = -1;
+    for (let i = index; i < messages.length; i++) {
+      const { category } = messages[i];
+      if (category === 'UserResponse') {
+        return lastIndex === index;
+      }
+      if (category === 'TestResults') {
+        lastIndex = i;
+      }
+    }
+    return lastIndex === index;
+  };
+
+  const renderTestResults = (message: Message, index: number) => {
+    assert(message.type === 'text');
+    const testResults = parseTestResultsMessage(message.content);
+
+    return (
+      <div
+        data-testid="message"
+        key={index}
+        className={classNames(
+          'flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)] mt-4 bg-bolt-elements-messages-background',
+        )}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="text-lg font-semibold mb-2">Test Results</div>
+          {testResults.map((result) => (
+            <div key={result.title} className="flex items-center gap-2">
+              <div
+                className={classNames('w-3 h-3 rounded-full border border-black', {
+                  'bg-green-500': result.status === 'Pass',
+                  'bg-red-500': result.status === 'Fail',
+                  'bg-gray-300': result.status === 'NotRun',
+                })}
+              />
+              {result.recordingId ? (
+                <a
+                  href={`https://app.replay.io/recording/${result.recordingId}`}
+                  className="underline hover:text-blue-600"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {result.title}
+                </a>
+              ) : (
+                <div>{result.title}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const renderMessage = (message: Message, index: number) => {
+    const { role, repositoryId } = message;
+    const isUserMessage = role === 'user';
+    const isFirst = index === 0;
+    const isLast = index === messages.length - 1;
+
+    if (!isUserMessage && message.category !== 'UserResponse') {
+      const lastUserResponse = getLastUserResponse(index);
+      if (!lastUserResponse) {
+        return null;
+      }
+      const showDetails = showDetailMessageIds.includes(lastUserResponse.id);
+
+      if (message.category === 'TestResults') {
+        // The default view only shows the last test results for each user response.
+        if (!isLastTestResults(index) && !showDetails) {
+          return null;
+        }
+        return renderTestResults(message, index);
+      } else {
+        if (!showDetails) {
+          return null;
+        }
+      }
+    }
+
+    return (
+      <div
+        data-testid="message"
+        key={index}
+        className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+          'bg-bolt-elements-messages-background': isUserMessage || !hasPendingMessage || (hasPendingMessage && !isLast),
+          'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+            hasPendingMessage && isLast,
+          'mt-4': !isFirst,
+        })}
+      >
+        <Suspense
+          fallback={
+            <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+          }
+        >
+          {isUserMessage && (
+            <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
+              <div className="i-ph:user-fill text-xl"></div>
+            </div>
+          )}
+          <div className="grid grid-col-1 w-full">
+            <MessageContents message={message} />
+          </div>
+          {!isUserMessage && message.category === 'UserResponse' && showDetailMessageIds.includes(message.id) && (
+            <div className="flex items-center justify-center bg-green-800 p-2 rounded-lg h-fit -mt-1.5">
+              <WithTooltip tooltip="Hide chat details">
+                <button
+                  onClick={() => {
+                    setShowDetailMessageIds(showDetailMessageIds.filter((id) => id !== message.id));
+                  }}
+                  className={classNames(
+                    'i-ph:list-dashes',
+                    'text-xl text-white hover:text-bolt-elements-textPrimary transition-colors',
+                  )}
+                />
+              </WithTooltip>
+            </div>
+          )}
+          {!isUserMessage && message.category === 'UserResponse' && !showDetailMessageIds.includes(message.id) && (
+            <div className="flex items-center justify-center p-2 rounded-lg h-fit -mt-1.5">
+              <WithTooltip tooltip="Show chat details">
+                <button
+                  onClick={() => {
+                    setShowDetailMessageIds([...showDetailMessageIds, message.id]);
+                  }}
+                  className={classNames(
+                    'i-ph:list-dashes',
+                    'text-xl hover:text-bolt-elements-textPrimary transition-colors',
+                  )}
+                />
+              </WithTooltip>
+            </div>
+          )}
+          {repositoryId && (
+            <div className="flex gap-2 flex-col lg:flex-row">
+              <WithTooltip tooltip="Start new chat from here">
+                <button
+                  onClick={() => {
+                    window.open(`/repository/${repositoryId}`, '_blank');
+                  }}
+                  className={classNames(
+                    'i-ph:git-fork',
+                    'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                  )}
+                />
+              </WithTooltip>
+            </div>
+          )}
+        </Suspense>
+      </div>
+    );
+  };
 
   return (
     <div id={id} ref={ref} className={props.className}>
-      {messages.length > 0
+      {messages.length > 0 ? messages.map(renderMessage) : null}
-        ? messages.map((message, index) => {
-            const { role, repositoryId } = message;
-            const isUserMessage = role === 'user';
-            const isFirst = index === 0;
-            const isLast = index === messages.length - 1;
-
-            return (
-              <div
-                data-testid="message"
-                key={index}
-                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                  'bg-bolt-elements-messages-background':
-                    isUserMessage || !hasPendingMessage || (hasPendingMessage && !isLast),
-                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                    hasPendingMessage && isLast,
-                  'mt-4': !isFirst,
-                })}
-              >
-                <Suspense
-                  fallback={
-                    <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
-                  }
-                >
-                  {isUserMessage && (
-                    <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
-                      <div className="i-ph:user-fill text-xl"></div>
-                    </div>
-                  )}
-                  <div className="grid grid-col-1 w-full">
-                    <MessageContents message={message} />
-                  </div>
-                  {repositoryId && (
-                    <div className="flex gap-2 flex-col lg:flex-row">
-                      <WithTooltip tooltip="Start new chat from here">
-                        <button
-                          onClick={() => {
-                            window.open(`/repository/${repositoryId}`, '_blank');
-                          }}
-                          className={classNames(
-                            'i-ph:git-fork',
-                            'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                          )}
-                        />
-                      </WithTooltip>
-                    </div>
-                  )}
-                </Suspense>
-              </div>
-            );
-          })
-        : null}
       {hasPendingMessage && (
         <div className="w-full text-bolt-elements-textSecondary flex items-center">
           <span className="i-svg-spinners:3-dots-fade inline-block w-[1em] h-[1em] mr-2 text-4xl"></span>

app/components/sidebar/HistoryItem.tsx

@@ -1,13 +1,13 @@
 import { useParams } from '@remix-run/react';
 import { classNames } from '~/utils/classNames';
 import * as Dialog from '@radix-ui/react-dialog';
-import { type ChatContents } from '~/lib/persistence/chats';
+import { type ChatSummary } from '~/lib/persistence/chats';
 import WithTooltip from '~/components/ui/Tooltip';
 import { useEditChatTitle } from '~/lib/hooks/useEditChatDescription';
 import { forwardRef, type ForwardedRef } from 'react';
 
 interface HistoryItemProps {
-  item: ChatContents;
+  item: ChatSummary;
   onDelete?: (event: React.UIEvent) => void;
   onDuplicate?: (id: string) => void;
 }

app/components/sidebar/Menu.client.tsx

@@ -5,7 +5,7 @@ import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { SettingsWindow } from '~/components/settings/SettingsWindow';
 import { SettingsButton } from '~/components/ui/SettingsButton';
-import { database, type ChatContents } from '~/lib/persistence/chats';
+import { database, type ChatSummary } from '~/lib/persistence/chats';
 import { chatStore } from '~/lib/stores/chat';
 import { cubicEasingFn } from '~/utils/easings';
 import { logger } from '~/utils/logger';
@@ -35,13 +35,13 @@ const menuVariants = {
   },
 } satisfies Variants;
 
-type DialogContent = { type: 'delete'; item: ChatContents } | null;
+type DialogContent = { type: 'delete'; item: ChatSummary } | null;
 
 const skipConfirmDeleteCookieName = 'skipConfirmDelete';
 
 export const Menu = () => {
   const menuRef = useRef<HTMLDivElement>(null);
-  const [list, setList] = useState<ChatContents[]>([]);
+  const [list, setList] = useState<ChatSummary[]>([]);
   const [open, setOpen] = useState(false);
   const [dialogContent, setDialogContent] = useState<DialogContent>(null);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -60,7 +60,7 @@ export const Menu = () => {
   }, []);
 
   const deleteItem = useCallback(
-    (event: React.UIEvent, item: ChatContents) => {
+    (event: React.UIEvent, item: ChatSummary) => {
       event.preventDefault();
 
       // Optimistically remove the item from the list while we update the database.
@@ -116,7 +116,7 @@ export const Menu = () => {
     };
   }, []);
 
-  const handleDeleteClick = (event: React.UIEvent, item: ChatContents) => {
+  const handleDeleteClick = (event: React.UIEvent, item: ChatSummary) => {
     event.preventDefault();
 
     const skipConfirmDelete = Cookies.get(skipConfirmDeleteCookieName);

app/components/sidebar/date-binning.ts

@@ -1,9 +1,9 @@
 import { format, isAfter, isThisWeek, isThisYear, isToday, isYesterday, subDays } from 'date-fns';
-import type { ChatContents } from '~/lib/persistence/chats';
+import type { ChatSummary } from '~/lib/persistence/chats';
 
-type Bin = { category: string; items: ChatContents[] };
+type Bin = { category: string; items: ChatSummary[] };
 
-export function binDates(_list: ChatContents[]) {
+export function binDates(_list: ChatSummary[]) {
   const list = [..._list].sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt));
 
   const binLookup: Record<string, Bin> = {};

app/lib/hooks/useSearchFilter.ts

@@ -1,10 +1,10 @@
 import { useState, useMemo, useCallback } from 'react';
 import { debounce } from '~/utils/debounce';
-import type { ChatContents } from '~/lib/persistence/chats';
+import type { ChatSummary } from '~/lib/persistence/chats';
 
 interface UseSearchFilterOptions {
-  items: ChatContents[];
+  items: ChatSummary[];
-  searchFields?: (keyof ChatContents)[];
+  searchFields?: (keyof ChatSummary)[];
   debounceMs?: number;
 }
 

app/lib/persistence/chats.ts

@@ -8,11 +8,25 @@ import { getMessagesRepositoryId, type Message } from './message';
 import { assert } from '~/lib/replay/ReplayProtocolClient';
 import type { DeploySettingsDatabase } from '~/lib/replay/Deploy';
 
-export interface ChatContents {
+export interface ChatSummary {
   id: string;
   createdAt: string;
   updatedAt: string;
   title: string;
+}
+
+const CHAT_SUMMARY_COLUMNS = ['id', 'created_at', 'updated_at', 'title', 'deleted'].join(',');
+
+function databaseRowToChatSummary(d: any): ChatSummary {
+  return {
+    id: d.id,
+    createdAt: d.created_at,
+    updatedAt: d.updated_at,
+    title: d.title,
+  };
+}
+
+export interface ChatContents extends ChatSummary {
   repositoryId: string | undefined;
   messages: Message[];
   lastProtocolChatId: string | undefined;
@@ -21,10 +35,7 @@ export interface ChatContents {
 
 function databaseRowToChatContents(d: any): ChatContents {
   return {
-    id: d.id,
+    ...databaseRowToChatSummary(d),
-    createdAt: d.created_at,
-    updatedAt: d.updated_at,
-    title: d.title,
     messages: d.messages,
     repositoryId: d.repository_id,
     lastProtocolChatId: d.last_protocol_chat_id,
@@ -55,20 +66,20 @@ function setLocalChats(chats: ChatContents[] | undefined): void {
 // delete finishes.
 const deletedChats = new Set<string>();
 
-async function getAllChats(): Promise<ChatContents[]> {
+async function getAllChats(): Promise<ChatSummary[]> {
   const userId = await getCurrentUserId();
 
   if (!userId) {
     return getLocalChats();
   }
 
-  const { data, error } = await getSupabase().from('chats').select('*').eq('deleted', false);
+  const { data, error } = await getSupabase().from('chats').select(CHAT_SUMMARY_COLUMNS).eq('deleted', false);
 
   if (error) {
     throw error;
   }
 
-  const chats = data.map(databaseRowToChatContents);
+  const chats = data.map(databaseRowToChatSummary);
   return chats.filter((chat) => !deletedChats.has(chat.id));
 }
 

app/lib/persistence/message.ts

@@ -9,6 +9,7 @@ interface MessageBase {
   role: MessageRole;
   repositoryId?: string;
   peanuts?: number;
+  category?: string;
 
   // Not part of the protocol, indicates whether the user has explicitly approved
   // the message. Once approved, the approve/reject UI is not shown again for the message.
@@ -67,3 +68,33 @@ export function createMessagesForRepository(title: string, repositoryId: string)
 
   return messages;
 }
+
+export enum PlaywrightTestStatus {
+  Pass = 'Pass',
+  Fail = 'Fail',
+  NotRun = 'NotRun',
+}
+
+export interface PlaywrightTestResult {
+  title: string;
+  status: PlaywrightTestStatus;
+  recordingId?: string;
+}
+
+export function parseTestResultsMessage(contents: string): PlaywrightTestResult[] {
+  const results: PlaywrightTestResult[] = [];
+  const lines = contents.split('\n');
+  for (const line of lines) {
+    const match = line.match(/TestResult (.*?) (.*?) (.*)/);
+    if (!match) {
+      continue;
+    }
+    const [status, recordingId, title] = match.slice(1);
+    results.push({
+      status: status as PlaywrightTestStatus,
+      title,
+      recordingId: recordingId == 'NoRecording' ? undefined : recordingId,
+    });
+  }
+  return results;
+}