Merge branch 'main' into dano/react-query-typescript

.github/workflows/playwright.yml

@@ -0,0 +1,72 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  tests_e2e:
+    name: Run end-to-end tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      BINGAI_TOKEN: ${{ secrets.BINGAI_TOKEN }}
+      CHATGPT_TOKEN: ${{ secrets.CHATGPT_TOKEN }}
+      MONGO_URI: ${{ secrets.MONGO_URI }}
+      OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: 'npm'
+
+    - name: Cache API dependencies
+      uses: actions/cache@v2
+      with:
+        path: ./api/node_modules
+        key: api-${{ runner.os }}-node-${{ hashFiles('./api/package-lock.json') }}
+        restore-keys: |
+          api-${{ runner.os }}-node-
+
+    - name: Install API dependencies
+      working-directory: ./api
+      run: npm ci
+
+    - name: Cache Client dependencies
+      uses: actions/cache@v2
+      with:
+        path: ./client/node_modules
+        key: client-${{ runner.os }}-node-${{ hashFiles('./client/package-lock.json') }}
+        restore-keys: |
+          client-${{ runner.os }}-node-
+
+    - name: Install Client dependencies
+      working-directory: ./client
+      run: npm ci
+
+    - name: Build Client
+      working-directory: ./client
+      run: npm run build
+
+    - name: Install global dependencies
+      run: npm ci
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Start API server
+      working-directory: ./api
+      run: |
+        npm run start &
+        sleep 10 # Wait for the server to start
+
+    - name: Run Playwright tests
+      run: npx playwright test
+
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: e2e/playwright-report/
+        retention-days: 30

client/src/components/Messages/Message.jsx

@@ -9,6 +9,7 @@ import SiblingSwitch from './SiblingSwitch';
 import getIcon from '~/utils/getIcon';
 import { useMessageHandler } from '~/utils/handleSubmit';
 import { getConversationById } from '~/data-provider';
+import { cn } from '~/utils/';
 import store from '~/store';
 
 export default function Message({
@@ -136,8 +137,8 @@ export default function Message({
             )}
             <div className="flex flex-grow flex-col gap-3">
               {error ? (
-                <div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 gap-2  text-red-500">
+                <div className="flex flex min-h-[20px] flex-grow flex-col items-start gap-2 gap-4  text-red-500">
-                  <div className="rounded-md border border-red-500 bg-red-500/10 py-2 px-3 text-sm text-gray-600 dark:text-gray-100">
+                  <div className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-100">
                     {`An error occurred. Please try again in a few moments.\n\nError message: ${text}`}
                   </div>
                 </div>
@@ -170,7 +171,12 @@ export default function Message({
                   </div>
                 </div>
               ) : (
-                <div className="flex min-h-[20px] flex-grow flex-col items-start gap-4 ">
+                <div
+                  className={cn(
+                    'flex min-h-[20px] flex-grow flex-col items-start gap-4 ',
+                    isCreatedByUser ? 'whitespace-pre-wrap' : ''
+                  )}
+                >
                   {/* <div className={`${blinker ? 'result-streaming' : ''} markdown prose dark:prose-invert light w-full break-words`}> */}
                   <div className="markdown prose dark:prose-invert light w-full break-words">
                     {!isCreatedByUser ? (

client/src/components/ui/Landing.jsx

@@ -32,7 +32,7 @@ export default function Landing() {
   return (
     <div className="flex h-full flex-col items-center overflow-y-auto pt-0 text-sm dark:bg-gray-800">
       <div className="w-full px-6 text-gray-800 dark:text-gray-100 md:flex md:max-w-2xl md:flex-col lg:max-w-3xl">
-        <h1 className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
+        <h1 id="landing-title" className="mt-6 ml-auto mr-auto mb-10 flex items-center justify-center gap-2 text-center text-4xl font-semibold sm:mb-16 md:mt-[10vh]">
           ChatGPT Clone
         </h1>
         <div className="items-start gap-3.5 text-center md:flex">

e2e/playwright.config.js

@@ -20,7 +20,7 @@ export default defineConfig({
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    baseURL: 'http:/localhost:3080',
+    baseURL: 'http://localhost:3080',
     video: 'on-first-retry',
     trace: 'retain-on-failure',
     headless: true,

e2e/specs/landing.spec.js

@@ -1,7 +1,7 @@
 import {expect, test} from '@playwright/test';
 
 test('landing page', async ({page}) => {
-  await page.goto('/');
+  await page.goto('http://localhost:3080/');
-  expect (await page.title()).toBe('ChatGPT Clone');
+  // expect (await page.title()).toBe('ChatGPT Clone');
-  expect (await page.textContent('h1')).toBe('ChatGPT Clone');
+  expect (await page.textContent('#landing-title')).toBe('ChatGPT Clone');
 });