feat: update ui

Author: walidelnozahy

package-lock.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": {

website/app/package.json

@@ -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>
   );

website/app/src/app/AuthLayout.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>
       )}

website/app/src/app/Layout.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 }) => {

website/app/src/auth/AuthProvider.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);