From 87b76c4fa75eac1dcf87e6f260c74b2bd303609c Mon Sep 17 00:00:00 2001
From: walid elnozahy <walidelnozahy@gmail.com>
Date: Tue, 10 Sep 2024 15:41:13 +0300
Subject: [PATCH] feat: update ui

---
 package-lock.json                     | 32 ++++++++++++++++---
 website/app/package.json              |  1 +
 website/app/src/app/AuthLayout.jsx    | 12 ++++---
 website/app/src/app/Layout.jsx        | 46 +++++++++++++++------------
 website/app/src/auth/AuthProvider.jsx |  3 +-
 website/app/src/chat/ChatPage.jsx     |  4 ++-
 6 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9503bbe..7765c24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7157,6 +7157,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-newline-to-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz",
+      "integrity": "sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-find-and-replace": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-phrasing": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
@@ -8813,6 +8826,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remark-breaks": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz",
+      "integrity": "sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-newline-to-break": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
@@ -9543,10 +9570,6 @@
       "integrity": "sha512-+OL9fFz5r6BXNHfpu9MDLehS/haC0fy/T3V5uJsTfLAnNsn+PzM6BmvefUfWG372hBT7piTbywB1Vl1+4LmI5Q==",
       "dev": true
     },
-    "node_modules/serverlessinc-example": {
-      "resolved": "",
-      "link": true
-    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -10815,6 +10838,7 @@
         "react-dom": "^18.3.1",
         "react-markdown": "^9.0.1",
         "react-router-dom": "^6.26.1",
+        "remark-breaks": "^4.0.0",
         "remark-gfm": "^4.0.0"
       },
       "devDependencies": {
diff --git a/website/app/package.json b/website/app/package.json
index 9b7d715..e8e836b 100644
--- a/website/app/package.json
+++ b/website/app/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
diff --git a/website/app/src/app/AuthLayout.jsx b/website/app/src/app/AuthLayout.jsx
index 1437607..42c2f23 100644
--- a/website/app/src/app/AuthLayout.jsx
+++ b/website/app/src/app/AuthLayout.jsx
@@ -32,11 +32,13 @@ const AuthLayout = () => {
       </div>
       <div className='animate-fadeIn flex flex-col items-center gap-2 text-center '>
         <span className='text-xs text-gray-800'>Powered By</span>
-        <img
-          src='https://s3.us-east-2.amazonaws.com/assets.public.serverless/general/framework-text-lighting-icon-center-black.svg'
-          alt='Serverless Framework'
-          className='h-8 p-0 m-0'
-        />
+        <a href='https://serverless.com/' target='_blank'>
+          <img
+            src='https://s3.us-east-2.amazonaws.com/assets.public.serverless/general/framework-text-lighting-icon-center-black.svg'
+            alt='Serverless Framework'
+            className='h-8 p-0 m-0'
+          />
+        </a>
       </div>
     </div>
   );
diff --git a/website/app/src/app/Layout.jsx b/website/app/src/app/Layout.jsx
index 4859097..c6151fb 100644
--- a/website/app/src/app/Layout.jsx
+++ b/website/app/src/app/Layout.jsx
@@ -14,11 +14,13 @@ const Layout = () => {
     <div className='min-h-screen flex flex-col'>
       {isLoggedIn() && (
         <div className='flex bg-white items-center sticky top-0 left-0 w-full p-4 z-10 shadow-md gap-2'>
-          <img
-            src='https://assets.serverless-extras.com/general/logo-aws-ai-stack-black.png'
-            alt='AWS AI Stack'
-            className='h-10'
-          />
+          <a href='https://github.com/serverless/aws-ai-stack' target='_blank'>
+            <img
+              src='https://assets.serverless-extras.com/general/logo-aws-ai-stack-black.png'
+              alt='AWS AI Stack'
+              className='h-10'
+            />
+          </a>
           <div className='flex items-center gap-2 text-center ml-auto mr-0 justify-center'>
             <span className='text-xs text-gray-800 mt-1.5'>By</span>
             <img
@@ -31,22 +33,24 @@ const Layout = () => {
             onClick={handleLogout}
             className='text-gray-400 bg-transparent px-2 py-2 rounded-md hover:bg-primary hover:text-white focus:outline-none focus:ring-2 focus:ring-primary transition-colors'
           >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              width='18'
-              height='18'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              className='lucide lucide-log-out'
-            >
-              <path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' />
-              <polyline points='16 17 21 12 16 7' />
-              <line x1='21' x2='9' y1='12' y2='12' />
-            </svg>
+            <a href='https://serverless.com/' target='_blank'>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='18'
+                height='18'
+                viewBox='0 0 24 24'
+                fill='none'
+                stroke='currentColor'
+                strokeWidth='2'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                className='lucide lucide-log-out'
+              >
+                <path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' />
+                <polyline points='16 17 21 12 16 7' />
+                <line x1='21' x2='9' y1='12' y2='12' />
+              </svg>
+            </a>
           </button>
         </div>
       )}
diff --git a/website/app/src/auth/AuthProvider.jsx b/website/app/src/auth/AuthProvider.jsx
index 350dee9..18cddb1 100644
--- a/website/app/src/auth/AuthProvider.jsx
+++ b/website/app/src/auth/AuthProvider.jsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
-const authApiUrl = import.meta.env.VITE_AUTH_API_URL;
+const authApiUrl = 'https://q9x94od3v8.execute-api.us-east-1.amazonaws.com';
+//  import.meta.env.VITE_AUTH_API_URL;
 const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
diff --git a/website/app/src/chat/ChatPage.jsx b/website/app/src/chat/ChatPage.jsx
index 46cb01d..0be14bc 100644
--- a/website/app/src/chat/ChatPage.jsx
+++ b/website/app/src/chat/ChatPage.jsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
 
 import { useAuth } from '../auth/AuthProvider';
 
@@ -12,7 +13,7 @@ const chatApiUrl = import.meta.env.VITE_CHAT_API_URL;
 const FormattedText = ({ children }) => {
   return (
     <ReactMarkdown
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
       components={{
         li: ({ node, ...props }) => <li className='my-2' {...props} />,
         ol: ({ node, ...props }) => (
@@ -61,6 +62,7 @@ const ChatPage = () => {
   const [input, setInput] = useState(
     'What makes the serverless framework so great?',
   );
+
   const { getToken } = useAuth();
 
   const bottomRef = useRef(null);