From 6f83844a3db8d44732f080922b23f3ad90355e9d Mon Sep 17 00:00:00 2001
From: jcenturion-okta <javier.centurion@okta.com>
Date: Wed, 9 Oct 2024 20:31:23 -0300
Subject: [PATCH 1/2] reviewing ios

---
 app/chat/[id]/page.tsx                  | 130 +++++++++++++-----------
 app/layout.tsx                          |   9 +-
 llm/components/conditional-purchase.tsx |  12 +--
 3 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index 941176b..fc7f0b7 100644
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@@ -66,74 +66,82 @@ export default function Chat({ params }: { params: { id: string } }) {
   return (
     <main className="flex overflow-hidden h-full  mx-auto pt-4" style={{ maxHeight: "calc(100vh - 56px)" }}>
       <div className="h-full w-full overflow-hidden rounded-md">
-        <div ref={scrollRef} className="flex flex-col flex-no-wrap h-full overflow-y-auto overscroll-y-none">
-          <div
-            ref={messagesRef}
-            className={cn("flex-1 min-w-0 max-w-4xl mx-auto w-full pb-[100px] px-3 sm:px-0", {
-              hidden: conversation.length === 0,
-            })}
-          >
-            {conversation.map((message: ClientMessage) =>
-              message.role === "user" ? (
-                <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
-                  <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
-                    {message.display}
+        <div
+          ref={scrollRef}
+          className="flex flex-col flex-no-wrap h-full overflow-y-auto overscroll-y-none gap-2 sm:gap-3"
+        >
+          <div className="flex-1 overflow-y-auto">
+            <div
+              ref={messagesRef}
+              className={cn("flex-1 min-w-0 max-w-4xl mx-auto w-full px-3 sm:px-0", {
+                hidden: conversation.length === 0,
+              })}
+            >
+              {conversation.map((message: ClientMessage) =>
+                message.role === "user" ? (
+                  <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
+                    <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
+                      {message.display}
+                    </div>
+                    <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
+                      <Avatar className="h-full w-full rounded-full">
+                        <AvatarImage src={user?.picture!} alt={user?.nickname!} />
+                        <AvatarFallback>U</AvatarFallback>
+                      </Avatar>
+                    </div>
                   </div>
-                  <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
-                    <Avatar className="h-full w-full rounded-full">
-                      <AvatarImage src={user?.picture!} alt={user?.nickname!} />
-                      <AvatarFallback>U</AvatarFallback>
-                    </Avatar>
+                ) : message.role === "assistant" || message.role === "function" ? (
+                  <div key={message.id} className="flex flex-row gap-3 pt-3">
+                    <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
+                      <Market0Icon />
+                    </div>
+                    <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
+                      {message.display}
+                    </div>
                   </div>
-                </div>
-              ) : message.role === "assistant" || message.role === "function" ? (
-                <div key={message.id} className="flex flex-row gap-3 py-3">
-                  <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
+                ) : null
+              )}
+
+              <div ref={visibilityRef} className="w-full h-px" />
+            </div>
+            {conversation.length === 0 && (
+              <div className="flex flex-col gap-60 max-w-4xl mx-auto w-full mt-auto h-full justify-between">
+                <div className="min-w-0 min-h-0 w-full flex flex-col items-center gap-2 sm:gap-6 mt-28 sm:mt-52">
+                  <div className="min-h-8">
                     <Market0Icon />
                   </div>
-                  <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
-                    {message.display}
+                  <h1 className="text-4xl sm:text-6xl tracking-tight leading-[72px]">
+                    Welcome to{" "}
+                    <span className="bg-text-gradient bg-clip-text" style={{ WebkitTextFillColor: "transparent" }}>
+                      Market0
+                    </span>
+                  </h1>
+                  <p className="text-base tracking-wide text-slate-500 font-light leading-6 text-center px-10 sm:px-0">
+                    Market0 is a demo app that showcases secure auth patterns for GenAI apps
+                  </p>
+                </div>
+                <div className="w-full">
+                  <div className="flex flex-col gap-5 items-center mb-5">
+                    <CircleIcon />
+                    <span className="text-slate-500 text-sm font-light">Get started with these examples</span>
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 w-full px-3 sm:px-0">
+                    {examples.map((example) => (
+                      <button
+                        key={example.id}
+                        onClick={onExampleClick(example.message)}
+                        className="bg-gray-100 text-sm font-light py-3 rounded-lg flex gap-3 items-center justify-between px-4 pl-5 sm:px-0 sm:pl-0 sm:justify-center hover:bg-gray-200/90 transition-all duration-300"
+                      >
+                        {example.title} <ArrowUpIcon />
+                      </button>
+                    ))}
                   </div>
                 </div>
-              ) : null
+              </div>
             )}
-
-            <div ref={visibilityRef} className="w-full h-px" />
           </div>
-          {conversation.length === 0 && (
-            <div className="flex flex-col gap-80 max-w-4xl mx-auto w-full mb-5 mt-auto">
-              <div className="min-w-0 min-h-0 w-full flex flex-col items-center gap-2 sm:gap-6">
-                <Market0Icon />
-                <h1 className="text-4xl sm:text-6xl tracking-tight leading-[72px]">
-                  Welcome to{" "}
-                  <span className="bg-text-gradient bg-clip-text" style={{ WebkitTextFillColor: "transparent" }}>
-                    Market0
-                  </span>
-                </h1>
-                <p className="text-base tracking-wide text-slate-500 font-light leading-6 text-center px-10 sm:px-0">
-                  Market0 is a demo app that showcases secure auth patterns for GenAI apps
-                </p>
-              </div>
-              <div className="w-full">
-                <div className="flex flex-col gap-5 items-center mb-5">
-                  <CircleIcon />
-                  <span className="text-slate-500 text-sm font-light">Get started with these examples</span>
-                </div>
-                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 w-full px-3 sm:px-0">
-                  {examples.map((example) => (
-                    <button
-                      key={example.id}
-                      onClick={onExampleClick(example.message)}
-                      className="bg-gray-100 text-sm font-light py-3 rounded-lg flex gap-3 items-center justify-between px-4 pl-5 sm:px-0 sm:pl-0 sm:justify-center hover:bg-gray-200/90 transition-all duration-300"
-                    >
-                      {example.title} <ArrowUpIcon />
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </div>
-          )}
-          <div className="sticky bottom-0 flex-shrink-0 min-w-0 min-h-0 bg-white max-w-4xl mx-auto w-full px-3 sm:px-0">
+
+          <div className={cn("flex-shrink-1 min-w-0 min-h-0 bg-white max-w-4xl mx-auto w-full px-3 sm:px-0 h-fit")}>
             <div className="p-3 bg-white border border-gray-200 rounded-lg focus-within:ring-stone-700 focus-within:ring-2 transition-all duration-150">
               <Form {...form}>
                 <form
@@ -149,7 +157,7 @@ export default function Chat({ params }: { params: { id: string } }) {
                           <Input
                             autoFocus
                             autoComplete="off"
-                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 text-sm sm:text-base font-light"
+                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 font-light"
                             placeholder="Start Typing..."
                             {...field}
                           />
diff --git a/app/layout.tsx b/app/layout.tsx
index 3e9376d..e1c11d8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 
 import { Inter } from "next/font/google";
@@ -15,6 +15,13 @@ export const metadata: Metadata = {
   description: "Market0 is a demo app that showcases secure auth patterns for GenAI apps",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1.0,
+  maximumScale: 1.0,
+  userScalable: false,
+};
+
 export default async function RootLayout({
   children,
 }: Readonly<{
diff --git a/llm/components/conditional-purchase.tsx b/llm/components/conditional-purchase.tsx
index f00a1ae..0154b95 100644
--- a/llm/components/conditional-purchase.tsx
+++ b/llm/components/conditional-purchase.tsx
@@ -51,18 +51,18 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
 
   if (!isEnrolled) {
     return (
-      <div className="border border-gray-300 rounded-xl p-6 flex items-center w-full justify-between">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-base leading-6 font-semibold">Action Required: Setup Async Authentication</h2>
-          <p className="text-sm leading-5 font-light text-gray-500">
+      <div className="border border-gray-300 rounded-xl items-center w-full justify-between p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0">
+        <div className="flex flex-col gap-1 sm:gap-1.5">
+          <h2 className="text-sm sm:text-base leading-6 font-semibold">Action Required: Setup Async Authentication</h2>
+          <p className="text-xs sm:text-sm leading-5 font-light text-gray-500">
             Please enroll to Auth0 Guardian so we can notify you when the condition is met. This is necessary to secure
             your future transaction.
           </p>
         </div>
-        <div>
+        <div className="w-full sm:w-fit">
           <a
             href={`/api/auth/login?returnTo=${window.location.pathname}&screenHint=mfa`}
-            className="bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
+            className="w-full sm:w-fit inline-block text-center bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
           >
             Enroll
           </a>

From d4782b47b4820491b03ede02d49b38312e930c06 Mon Sep 17 00:00:00 2001
From: jcenturion-okta <javier.centurion@okta.com>
Date: Wed, 9 Oct 2024 21:03:43 -0300
Subject: [PATCH 2/2] fixing viewport

---
 app/chat/[id]/layout.tsx   |  18 +--
 app/chat/[id]/page.tsx     | 255 ++++++++++++++++++-------------------
 app/manifest.ts            |  21 +++
 components/chat/header.tsx |   2 +-
 4 files changed, 157 insertions(+), 139 deletions(-)
 create mode 100644 app/manifest.ts

diff --git a/app/chat/[id]/layout.tsx b/app/chat/[id]/layout.tsx
index c0a7bd9..64cf278 100644
--- a/app/chat/[id]/layout.tsx
+++ b/app/chat/[id]/layout.tsx
@@ -24,15 +24,17 @@ async function RootLayout({ children, params }: RootChatParams) {
 
   return (
     <ChatProvider chatId={params.id}>
-      <Header>
-        <ShareConversation chatId={params.id}>
-          <ChatUsersPermissionsList chatId={params.id} />
-        </ShareConversation>
-      </Header>
+      <div className="flex flex-col h-full w-full">
+        <Header>
+          <ShareConversation chatId={params.id}>
+            <ChatUsersPermissionsList chatId={params.id} />
+          </ShareConversation>
+        </Header>
 
-      <AI initialAIState={messages} conversationID={params.id}>
-        {children}
-      </AI>
+        <AI initialAIState={messages} conversationID={params.id}>
+          {children}
+        </AI>
+      </div>
     </ChatProvider>
   );
 }
diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index fc7f0b7..c3e188c 100644
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@@ -64,147 +64,142 @@ export default function Chat({ params }: { params: { id: string } }) {
   };
 
   return (
-    <main className="flex overflow-hidden h-full  mx-auto pt-4" style={{ maxHeight: "calc(100vh - 56px)" }}>
-      <div className="h-full w-full overflow-hidden rounded-md">
-        <div
-          ref={scrollRef}
-          className="flex flex-col flex-no-wrap h-full overflow-y-auto overscroll-y-none gap-2 sm:gap-3"
-        >
-          <div className="flex-1 overflow-y-auto">
-            <div
-              ref={messagesRef}
-              className={cn("flex-1 min-w-0 max-w-4xl mx-auto w-full px-3 sm:px-0", {
-                hidden: conversation.length === 0,
-              })}
-            >
-              {conversation.map((message: ClientMessage) =>
-                message.role === "user" ? (
-                  <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
-                    <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
-                      {message.display}
-                    </div>
-                    <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
-                      <Avatar className="h-full w-full rounded-full">
-                        <AvatarImage src={user?.picture!} alt={user?.nickname!} />
-                        <AvatarFallback>U</AvatarFallback>
-                      </Avatar>
-                    </div>
+    <main className="flex flex-1 overflow-hidden w-full mx-auto" style={{ maxHeight: "calc(100vh - 56px)" }}>
+      <div
+        ref={scrollRef}
+        className="flex flex-col flex-no-wrap h-full overflow-y-auto overscroll-y-none gap-2 sm:gap-3 w-full"
+      >
+        <div className="flex-1 overflow-y-auto">
+          <div
+            ref={messagesRef}
+            className={cn("flex-1 min-w-0 max-w-4xl mx-auto w-full px-3 sm:px-0", {
+              hidden: conversation.length === 0,
+            })}
+          >
+            {conversation.map((message: ClientMessage) =>
+              message.role === "user" ? (
+                <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
+                  <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
+                    {message.display}
                   </div>
-                ) : message.role === "assistant" || message.role === "function" ? (
-                  <div key={message.id} className="flex flex-row gap-3 pt-3">
-                    <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
-                      <Market0Icon />
-                    </div>
-                    <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
-                      {message.display}
-                    </div>
+                  <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
+                    <Avatar className="h-full w-full rounded-full">
+                      <AvatarImage src={user?.picture!} alt={user?.nickname!} />
+                      <AvatarFallback>U</AvatarFallback>
+                    </Avatar>
                   </div>
-                ) : null
-              )}
-
-              <div ref={visibilityRef} className="w-full h-px" />
-            </div>
-            {conversation.length === 0 && (
-              <div className="flex flex-col gap-60 max-w-4xl mx-auto w-full mt-auto h-full justify-between">
-                <div className="min-w-0 min-h-0 w-full flex flex-col items-center gap-2 sm:gap-6 mt-28 sm:mt-52">
-                  <div className="min-h-8">
-                    <Market0Icon />
-                  </div>
-                  <h1 className="text-4xl sm:text-6xl tracking-tight leading-[72px]">
-                    Welcome to{" "}
-                    <span className="bg-text-gradient bg-clip-text" style={{ WebkitTextFillColor: "transparent" }}>
-                      Market0
-                    </span>
-                  </h1>
-                  <p className="text-base tracking-wide text-slate-500 font-light leading-6 text-center px-10 sm:px-0">
-                    Market0 is a demo app that showcases secure auth patterns for GenAI apps
-                  </p>
                 </div>
-                <div className="w-full">
-                  <div className="flex flex-col gap-5 items-center mb-5">
-                    <CircleIcon />
-                    <span className="text-slate-500 text-sm font-light">Get started with these examples</span>
+              ) : message.role === "assistant" || message.role === "function" ? (
+                <div key={message.id} className="flex flex-row gap-3 pt-3">
+                  <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
+                    <Market0Icon />
                   </div>
-                  <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 w-full px-3 sm:px-0">
-                    {examples.map((example) => (
-                      <button
-                        key={example.id}
-                        onClick={onExampleClick(example.message)}
-                        className="bg-gray-100 text-sm font-light py-3 rounded-lg flex gap-3 items-center justify-between px-4 pl-5 sm:px-0 sm:pl-0 sm:justify-center hover:bg-gray-200/90 transition-all duration-300"
-                      >
-                        {example.title} <ArrowUpIcon />
-                      </button>
-                    ))}
+                  <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
+                    {message.display}
                   </div>
                 </div>
-              </div>
+              ) : null
             )}
-          </div>
 
-          <div className={cn("flex-shrink-1 min-w-0 min-h-0 bg-white max-w-4xl mx-auto w-full px-3 sm:px-0 h-fit")}>
-            <div className="p-3 bg-white border border-gray-200 rounded-lg focus-within:ring-stone-700 focus-within:ring-2 transition-all duration-150">
-              <Form {...form}>
-                <form
-                  onSubmit={form.handleSubmit(onSubmit)}
-                  className="flex flex-row justify-between gap-2 items-center"
-                >
-                  <FormField
-                    control={form.control}
-                    name="message"
-                    render={({ field }) => (
-                      <FormItem className="w-full space-y-0">
-                        <FormControl>
-                          <Input
-                            autoFocus
-                            autoComplete="off"
-                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 font-light"
-                            placeholder="Start Typing..."
-                            {...field}
-                          />
-                        </FormControl>
-                      </FormItem>
-                    )}
-                  />
-
-                  {!form.formState.disabled && <Examples onExampleClick={onExampleClick} />}
-
-                  <Button
-                    disabled={!form.formState.isDirty || form.formState.disabled}
-                    type="submit"
-                    className="px-3 py-2 m-0 bg-black hover:bg-black text-white text-sm leading-6 font-light"
-                  >
-                    Send
-                  </Button>
-                </form>
-              </Form>
-            </div>
-            {conversation.length > 0 && (
-              <div className="relative px-2 py-2 text-center text-[11px] sm:text-xs font-light text-slate-500 md:px-[60px]">
-                <span>Market0 is a demo app that showcases secure auth patterns for GenAI apps</span>
+            <div ref={visibilityRef} className="w-full h-px" />
+          </div>
+          {conversation.length === 0 && (
+            <div className="flex flex-col gap-60 max-w-4xl mx-auto w-full mt-auto h-full justify-between">
+              <div className="min-w-0 min-h-0 w-full flex flex-col items-center gap-2 sm:gap-6 mt-28 sm:mt-52">
+                <div className="min-h-8">
+                  <Market0Icon />
+                </div>
+                <h1 className="text-4xl sm:text-6xl tracking-tight leading-[72px]">
+                  Welcome to{" "}
+                  <span className="bg-text-gradient bg-clip-text" style={{ WebkitTextFillColor: "transparent" }}>
+                    Market0
+                  </span>
+                </h1>
+                <p className="text-base tracking-wide text-slate-500 font-light leading-6 text-center px-10 sm:px-0">
+                  Market0 is a demo app that showcases secure auth patterns for GenAI apps
+                </p>
               </div>
-            )}
-            {conversation.length === 0 && (
-              <div className="px-2 py-2 text-xs font-light text-slate-500 md:px-[60px] flex gap-2 items-center justify-center">
-                <Link
-                  href="https://www.okta.com/privacy-policy/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-black transition-all duration-300"
-                >
-                  Privacy Policy
-                </Link>
-                <span>•</span>
-                <Link
-                  href="https://www.okta.com/terms-of-service/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-black transition-all duration-300"
-                >
-                  Terms of Service
-                </Link>
+              <div className="w-full">
+                <div className="flex flex-col gap-5 items-center mb-5">
+                  <CircleIcon />
+                  <span className="text-slate-500 text-sm font-light">Get started with these examples</span>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4 w-full px-3 sm:px-0">
+                  {examples.map((example) => (
+                    <button
+                      key={example.id}
+                      onClick={onExampleClick(example.message)}
+                      className="bg-gray-100 text-sm font-light py-3 rounded-lg flex gap-3 items-center justify-between px-4 pl-5 sm:px-0 sm:pl-0 sm:justify-center hover:bg-gray-200/90 transition-all duration-300"
+                    >
+                      {example.title} <ArrowUpIcon />
+                    </button>
+                  ))}
+                </div>
               </div>
-            )}
+            </div>
+          )}
+        </div>
+
+        <div className={cn("flex-shrink-1 min-w-0 min-h-0 bg-white max-w-4xl mx-auto w-full px-3 sm:px-0 h-fit")}>
+          <div className="p-3 bg-white border border-gray-200 rounded-lg focus-within:ring-stone-700 focus-within:ring-2 transition-all duration-150">
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-row justify-between gap-2 items-center">
+                <FormField
+                  control={form.control}
+                  name="message"
+                  render={({ field }) => (
+                    <FormItem className="w-full space-y-0">
+                      <FormControl>
+                        <Input
+                          autoFocus
+                          autoComplete="off"
+                          className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 font-light"
+                          placeholder="Start Typing..."
+                          {...field}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                {!form.formState.disabled && <Examples onExampleClick={onExampleClick} />}
+
+                <Button
+                  disabled={!form.formState.isDirty || form.formState.disabled}
+                  type="submit"
+                  className="px-3 py-2 m-0 bg-black hover:bg-black text-white text-sm leading-6 font-light"
+                >
+                  Send
+                </Button>
+              </form>
+            </Form>
           </div>
+          {conversation.length > 0 && (
+            <div className="relative px-2 py-2 text-center text-[11px] sm:text-xs font-light text-slate-500 md:px-[60px]">
+              <span>Market0 is a demo app that showcases secure auth patterns for GenAI apps</span>
+            </div>
+          )}
+          {conversation.length === 0 && (
+            <div className="px-2 py-2 text-xs font-light text-slate-500 md:px-[60px] flex gap-2 items-center justify-center">
+              <Link
+                href="https://www.okta.com/privacy-policy/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-black transition-all duration-300"
+              >
+                Privacy Policy
+              </Link>
+              <span>•</span>
+              <Link
+                href="https://www.okta.com/terms-of-service/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-black transition-all duration-300"
+              >
+                Terms of Service
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </main>
diff --git a/app/manifest.ts b/app/manifest.ts
new file mode 100644
index 0000000..5eaae43
--- /dev/null
+++ b/app/manifest.ts
@@ -0,0 +1,21 @@
+import { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Auth0 AI | Market0",
+    short_name: "Market0",
+    description: "Market0 is a demo app that showcases secure auth patterns for GenAI apps",
+    start_url: "/",
+    display: "standalone",
+    orientation: "portrait",
+    background_color: "#fff",
+    theme_color: "#fff",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+    ],
+  };
+}
diff --git a/components/chat/header.tsx b/components/chat/header.tsx
index ae217cb..641c9c0 100644
--- a/components/chat/header.tsx
+++ b/components/chat/header.tsx
@@ -10,7 +10,7 @@ export async function Header({ children }: { children?: React.ReactNode }) {
   const user = session?.user!;
 
   return (
-    <header className="sticky top-0 z-50 flex items-center justify-between w-full px-5 sm:px-6 py-3 h-14 shrink-0 bg-background backdrop-blur-xl">
+    <header className="z-50 flex items-center justify-between w-full px-5 sm:px-6 py-3 h-14 shrink-0 bg-background">
       <div className="flex items-center gap-6">
         <span className="inline-flex items-center home-links whitespace-nowrap">
           <Link href="https://lab.auth0.com" rel="noopener" target="_blank">