add a couple more tests

components/message.tsx

@@ -73,7 +73,10 @@ const PurePreviewMessage = ({
 
           <div className="flex flex-col gap-2 w-full">
             {message.experimental_attachments && (
-              <div className="flex flex-row justify-end gap-2">
+              <div
+                className="flex flex-row justify-end gap-2"
+                data-testid={`message-attachments-${index}`}
+              >
                 {message.experimental_attachments.map((attachment) => (
                   <PreviewAttachment
                     key={attachment.url}

components/multimodal-input.tsx

@@ -208,10 +208,14 @@ function PureMultimodalInput({
         multiple
         onChange={handleFileChange}
         tabIndex={-1}
+        data-testid="attachments-input"
       />
 
       {(attachments.length > 0 || uploadQueue.length > 0) && (
-        <div className="flex flex-row gap-2 overflow-x-scroll items-end">
+        <div
+          className="flex flex-row gap-2 overflow-x-scroll items-end"
+          data-testid="attachments-preview"
+        >
           {attachments.map((attachment) => (
             <PreviewAttachment key={attachment.url} attachment={attachment} />
           ))}
@@ -301,6 +305,7 @@ function PureAttachmentsButton({
       }}
       disabled={isLoading}
       variant="ghost"
+      data-testid="attachments-button"
     >
       <PaperclipIcon size={14} />
     </Button>

components/preview-attachment.tsx

@@ -12,7 +12,7 @@ export const PreviewAttachment = ({
   const { name, url, contentType } = attachment;
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2" data-testid="input-attachment-preview">
       <div className="w-20 h-16 aspect-video bg-muted rounded-md relative flex flex-col items-center justify-center">
         {contentType ? (
           contentType.startsWith('image') ? (
@@ -32,7 +32,10 @@ export const PreviewAttachment = ({
         )}
 
         {isUploading && (
-          <div className="animate-spin absolute text-zinc-500">
+          <div
+            className="animate-spin absolute text-zinc-500"
+            data-testid="input-attachment-loader"
+          >
             <LoaderIcon />
           </div>
         )}

components/suggested-actions.tsx

@@ -38,7 +38,10 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
   ];
 
   return (
-    <div className="grid sm:grid-cols-2 gap-2 w-full">
+    <div
+      className="grid sm:grid-cols-2 gap-2 w-full"
+      data-testid="suggested-actions"
+    >
       {suggestedActions.map((suggestedAction, index) => (
         <motion.div
           initial={{ opacity: 0, y: 20 }}

tests/chat.test.ts

@@ -1,3 +1,5 @@
+import path from 'path';
+import fs from 'fs';
 import { test as baseTest, expect, Page } from '@playwright/test';
 
 type Fixtures = {
@@ -87,7 +89,7 @@ test.describe('chat', () => {
     await expect(authenticatedPage.getByTestId('send-button')).toBeVisible();
   });
 
-  test('edit user message', async ({ authenticatedPage }) => {
+  test('edit user message and resubmit', async ({ authenticatedPage }) => {
     await authenticatedPage.getByTestId('multimodal-input').click();
     await authenticatedPage
       .getByTestId('multimodal-input')
@@ -117,4 +119,82 @@ test.describe('chat', () => {
       authenticatedPage.getByTestId('message-assistant-1'),
     ).toContainText('edited test');
   });
+
+  test('hide suggested actions after sending message', async ({
+    authenticatedPage,
+  }) => {
+    await expect(
+      authenticatedPage.getByTestId('suggested-actions'),
+    ).toBeVisible();
+
+    await authenticatedPage
+      .getByRole('button', { name: 'What are the advantages of' })
+      .click();
+    await expect(
+      authenticatedPage.getByText('What are the advantages of'),
+    ).toBeVisible();
+
+    await authenticatedPage.getByPlaceholder('Send a message...').click();
+    await authenticatedPage
+      .getByPlaceholder('Send a message...')
+      .fill('this is a test message, respond with "test"');
+    await authenticatedPage.keyboard.press('Enter');
+
+    await expect(
+      authenticatedPage.getByTestId('suggested-actions'),
+    ).not.toBeVisible();
+  });
+
+  test('show file selector on clicking attachments button', async ({
+    authenticatedPage,
+  }) => {
+    const fileChooserPromise = authenticatedPage.waitForEvent('filechooser');
+    await authenticatedPage.getByTestId('attachments-button').click();
+    await fileChooserPromise;
+  });
+
+  test('handle file upload and send image attachment with message', async ({
+    authenticatedPage,
+  }) => {
+    authenticatedPage.on('filechooser', async (fileChooser) => {
+      const filePath = path.join(
+        process.cwd(),
+        'public',
+        'images',
+        'mouth of the seine, monet.jpg',
+      );
+      const imageBuffer = fs.readFileSync(filePath);
+
+      await fileChooser.setFiles({
+        name: 'mouth of the seine, monet.jpg',
+        mimeType: 'image/jpeg',
+        buffer: imageBuffer,
+      });
+    });
+
+    await authenticatedPage.getByTestId('attachments-button').click();
+
+    await expect(
+      authenticatedPage.getByTestId('attachments-preview'),
+    ).toBeVisible();
+
+    await expect(
+      authenticatedPage.getByTestId('input-attachment-loader'),
+    ).toBeVisible();
+
+    await authenticatedPage.getByTestId('multimodal-input').click();
+    await authenticatedPage
+      .getByTestId('multimodal-input')
+      .fill('this is a test message, respond with "test"');
+
+    await expect(authenticatedPage.getByTestId('send-button')).toBeVisible();
+    await authenticatedPage.getByTestId('send-button').click();
+
+    await expect(
+      authenticatedPage.getByTestId('message-attachments-0'),
+    ).toBeVisible();
+    await expect(
+      authenticatedPage.getByTestId('message-assistant-1'),
+    ).toBeVisible();
+  });
 });