Not really a PR, but if you want to check the results

app/designSystem/landing/ChatBarForm.tsx

@@ -0,0 +1,64 @@
+import { InputHTMLAttributes, useState } from 'react'
+import { Api } from '~/core/trpc'
+
+interface ChatBarFormProps extends InputHTMLAttributes<HTMLInputElement> {
+    onNewMessage: (message: any) => void
+}
+
+/**
+ * Form component for the chat input bar, allowing users to type and submit messages.
+ */
+export const ChatBarForm = ({
+  className,
+  onNewMessage,
+  ...remainingProps
+}: ChatBarFormProps) => {
+    const { mutateAsync:login } = Api.authentication.login.useMutation();
+    const { mutateAsync:generateText } = Api.ai.generateText.useMutation();
+
+    const handleLogin = async () => {
+        await login({
+            email: 'test@test.com',
+            password: 'password',
+        });
+    };
+
+    const handleGenerateText = async (promptMessage: string) => {
+        return generateText({prompt: promptMessage})
+    };
+
+    const [message, setMessage] = useState('')
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        onNewMessage({ ai: false, text: message });
+        event.preventDefault()
+        setMessage('');
+        await handleLogin();
+        // Handle form submission logic here
+        await handleGenerateText(message).then((response) => {
+            if(response.answer.includes('<pdf>') && response.answer.includes('</pdf>')) {
+                const pdfFile = response.answer.split('<pdf>')[1].split('</pdf>')[0];
+                onNewMessage({ ai: true, text: 'Here is the pdf!', pdfFile });
+            } else {
+                onNewMessage({ ai: true, text: response.answer });
+            }
+        });
+    }
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setMessage(event.target.value);
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className='flex flex-row max-w-5xl md:mx-auto mx-4 lg:mx-auto place-self-center'>
+            <input
+                value={message}
+                onChange={handleChange}
+                className=" px-4 rounded-l-full border-2 border-solid border-primary-100 flex flex-col min-w-[50vw]"
+                    {...remainingProps}
+                type='text'
+            />
+            <button type='submit' className='px-8 py-2 bg-blue-500 text-white rounded-r-full'>Send</button>
+        </form>
+    )
+}

app/designSystem/landing/ChatHistory.tsx

@@ -0,0 +1,77 @@
+import { HTMLAttributes } from 'react'
+import { DesignSystemUtility } from '../helpers/utility'
+import LandingButton from './LandingButton'
+import { LandingAvatar } from './LandingAvatar'
+import { jsPDF } from 'jspdf'
+
+interface Props extends HTMLAttributes<HTMLElement> {
+  messages: MessageHistory[]
+  title?: string
+  subtitle?: string
+  buttonText?: string
+  buttonLink?: string
+}
+
+interface MessageHistory {
+  ai: boolean
+  text: string,
+  pdfFile?: string
+}
+
+export const ChatHistory: React.FC<Props> = ({
+  messages,
+  title,
+  subtitle,
+  buttonText,
+  buttonLink,
+  className,
+  ...props
+}) => {
+
+  const handleDownload = (index) => {
+    const pdfFile = messages[index].pdfFile;
+    if (pdfFile) {
+      const doc = new jsPDF();
+      doc.text(pdfFile, 10, 10);
+      const pdfBlob = doc.output('blob');
+      const url = window.URL.createObjectURL(pdfBlob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.target = '_blank';
+      link.click();
+      window.URL.revokeObjectURL(url);
+    }
+  }
+
+  return (
+    <section
+      className={DesignSystemUtility.buildClassNames('py-16 px-5', className)}
+      {...props}
+    >
+      <div className="max-w-7xl mx-auto">
+        <h1 className='text-center font-bold text-2xl'>{title}</h1>
+        <div 
+        id='chat-history'
+        className="bg-white p-8 md:px-20 md:py-20 mt-10 mx-auto max-w-5xl rounded-lg flex flex-col overflow-y-scroll max-h-[60vh] border-2 border-solid border-primary-100">
+          {messages.map((message,index) => (
+              <div key={index} className={message.ai ? 'flex items-start gap-4 mb-4 items-center' : 'flex items-end gap-4 mb-4 flex-row-reverse items-center'}>
+                <LandingAvatar src={message.ai
+                  ? 'https://cdn.prod.website-files.com/67fa24b961e24d76e744a1fd/6954937b22a3a0ff81e3030a_68063e7cdffbc578e4e427c3_PennyColor.webp'
+                  : 'https://cdn.prod.website-files.com/67fa24b961e24d76e744a1fd/695494abf67c19d190118ec2_68063e9de81f9044b009103b_SonnyColor.webp'}>
+                </LandingAvatar>
+                <div className='flex flex-col'>
+                  <span className={message.ai ? 'text-blue-500 text-left bg-blue-100 py-2 px-4 rounded-lg' : 'text-gray-500 text-right bg-gray-100 py-2 px-4 rounded-lg'}>{message.text}</span>
+                  {message.pdfFile && (
+                    <a onClick={() => handleDownload(index)} className="bg-green-500 text-white px-4 py-2 rounded-lg mt-2 self-start">
+                      Download PDF
+                    </a>
+                  )}
+                </div>
+
+              </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

app/designSystem/landing/LandingAvatar.tsx

@@ -11,9 +11,9 @@ interface LandingAvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
 export const LandingAvatar = ({
   className,
   src,
-  width = 128,
-  height = 128,
-  size = 'medium',
+  width = 256,
+  height = 256,
+  size = 'large',
   ...remainingProps
 }: LandingAvatarProps) => {
   return (

app/designSystem/landing/LandingContainer.tsx

@@ -1,28 +1,17 @@
 import { HTMLAttributes } from 'react'
-import { LandingFooter } from './LandingFooter'
-import { LandingNavBar } from './LandingNavBar/landing.navbar'
 
 interface Props extends HTMLAttributes<HTMLElement> {
-  navItems: {
-    link: string
-    title: string
-    target?: '_blank'
-  }[]
   children: React.ReactNode
 }
 
 export const LandingContainer: React.FC<Props> = ({
-  navItems,
   children,
   ...props
 }) => {
   return (
     <main {...props}>
       <div className={'bg-white text-black dark:bg-black dark:text-slate-200'}>
-        <LandingNavBar navItems={navItems} />
         {children}
-
-        <LandingFooter />
       </div>
     </main>
   )