Merge pull request #62 from auth0-lab/iphone-review

reviewing ios
auth0-lab · Oct 10, 2024 · 6e2dceb · 6e2dceb
2 parents 1b81371 + d4782b4
commit 6e2dceb
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 86 deletions.
diff --git 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
@@ -64,12 +64,15 @@ 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">
+    <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 pb-[100px] px-3 sm:px-0", {
+            className={cn("flex-1 min-w-0 max-w-4xl mx-auto w-full px-3 sm:px-0", {
               hidden: conversation.length === 0,
             })}
           >
@@ -87,7 +90,7 @@ export default function Chat({ params }: { params: { id: string } }) {
                   </div>
                 </div>
               ) : message.role === "assistant" || message.role === "function" ? (
-                <div key={message.id} className="flex flex-row gap-3 py-3">
+                <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>
@@ -101,9 +104,11 @@ export default function Chat({ params }: { params: { id: string } }) {
             <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 />
+            <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" }}>
@@ -133,70 +138,68 @@ export default function Chat({ params }: { params: { id: string } }) {
               </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="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 text-sm sm:text-base 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"
+        </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"
                 >
-                  Terms of Service
-                </Link>
-              </div>
-            )}
+                  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/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/app/manifest.ts 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
@@ -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">

diff --git 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>