feat: add message to ask user login (#36)

TODO: ask user to visit va.landing.ai on hugging face
<img width="963" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/0b2bc134-2562-43df-ad96-ffd395e66a1c">
<img width="1301" alt="image"
src="https://github.com/landing-ai/vision-agent-ui/assets/132986242/fb4a17c8-c2ea-4153-9b92-bad52e7e07b1">

app/api/chat/route.ts

@@ -10,10 +10,6 @@ import { MessageBase } from '../../../lib/types';
 
 export const runtime = 'edge';
 
-const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
-});
-
 export const POST = async (req: Request) => {
   const json = await req.json();
   const { messages } = json as {
@@ -43,6 +39,9 @@ export const POST = async (req: Request) => {
       };
     },
   );
+  const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+  });
   const res = await openai.chat.completions.create({
     model: 'gpt-4-vision-preview',
     messages: formattedMessage,

app/chat/[id]/page.tsx

@@ -1,5 +1,7 @@
 import { getKVChat } from '@/lib/kv/chat';
 import { Chat } from '@/components/chat';
+import { auth } from '@/auth';
+import { Session } from 'next-auth';
 
 interface PageProps {
   params: {
@@ -10,5 +12,6 @@ interface PageProps {
 export default async function Page({ params }: PageProps) {
   const { id: chatId } = params;
   const chat = await getKVChat(chatId);
-  return <Chat chat={chat} />;
+  const session = await auth();
+  return <Chat chat={chat} session={session} />;
 }

components/chat/ChatList.tsx

@@ -3,14 +3,37 @@
 import { Separator } from '@/components/ui/Separator';
 import { ChatMessage } from '@/components/chat/ChatMessage';
 import { MessageBase } from '../../lib/types';
+import { Session } from 'next-auth';
+import { IconExclamationTriangle } from '../ui/Icons';
+import Link from 'next/link';
 
 export interface ChatList {
   messages: MessageBase[];
+  session: Session | null;
 }
 
-export function ChatList({ messages }: ChatList) {
+export function ChatList({ messages, session }: ChatList) {
   return (
     <div className="relative mx-auto max-w-5xl px-8 pr-12">
+      {!session && (
+        <>
+          <div className="group relative mb-4 flex items-center">
+            <div className="bg-background flex size-8 shrink-0 select-none items-center justify-center rounded-md border shadow">
+              <IconExclamationTriangle />
+            </div>
+            <div className="flex-1 px-1 ml-4 space-y-2 overflow-hidden">
+              <p className="text-muted-foreground leading-normal">
+                Please{' '}
+                <Link href="/sign-in" className="underline">
+                  log in
+                </Link>{' '}
+                to save and revisit your chat history!
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+        </>
+      )}
       {messages
         // .filter(message => message.role !== 'system')
         .map((message, index) => (

components/chat/index.tsx

@@ -5,12 +5,14 @@ import { Composer } from '@/components/chat/Composer';
 import { ChatEntity } from '@/lib/types';
 import useVisionAgent from '@/lib/hooks/useVisionAgent';
 import { useScrollAnchor } from '@/lib/hooks/useScrollAnchor';
+import { Session } from 'next-auth';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
   chat: ChatEntity;
+  session: Session | null;
 }
 
-export function Chat({ chat }: ChatProps) {
+export function Chat({ chat, session }: ChatProps) {
   const { url, id } = chat;
   const { messages, append, reload, stop, isLoading, input, setInput } =
     useVisionAgent(chat);
@@ -22,7 +24,7 @@ export function Chat({ chat }: ChatProps) {
     <>
       <div className="h-full overflow-auto relative" ref={scrollRef}>
         <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
-          <ChatList messages={messages} />
+          <ChatList messages={messages} session={session} />
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>

components/project/ProjectChat.tsx

@@ -34,7 +34,7 @@ const ProjectChat: React.FC<ChatProps> = ({ mediaList }) => {
     <>
       <div className="h-full overflow-auto" ref={scrollRef}>
         <div className="pb-[200px] pt-4 md:pt-10" ref={messagesRef}>
-          <ChatList messages={messages} />
+          <ChatList messages={messages} session={null} />
           <div className="h-px w-full" ref={visibilityRef} />
         </div>
       </div>

components/ui/Icons.tsx

@@ -551,6 +551,28 @@ function IconLoading({ className, ...props }: React.ComponentProps<'svg'>) {
   );
 }
 
+function IconExclamationTriangle({
+  className,
+  ...props
+}: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.4449 0.608765C8.0183 -0.107015 6.9817 -0.107015 6.55509 0.608766L0.161178 11.3368C-0.275824 12.07 0.252503 13 1.10608 13H13.8939C14.7475 13 15.2758 12.07 14.8388 11.3368L8.4449 0.608765ZM7.4141 1.12073C7.45288 1.05566 7.54712 1.05566 7.5859 1.12073L13.9798 11.8488C14.0196 11.9154 13.9715 12 13.8939 12H1.10608C1.02849 12 0.980454 11.9154 1.02018 11.8488L7.4141 1.12073ZM6.8269 4.48611C6.81221 4.10423 7.11783 3.78663 7.5 3.78663C7.88217 3.78663 8.18778 4.10423 8.1731 4.48612L8.01921 8.48701C8.00848 8.766 7.7792 8.98664 7.5 8.98664C7.2208 8.98664 6.99151 8.766 6.98078 8.48701L6.8269 4.48611ZM8.24989 10.476C8.24989 10.8902 7.9141 11.226 7.49989 11.226C7.08567 11.226 6.74989 10.8902 6.74989 10.476C6.74989 10.0618 7.08567 9.72599 7.49989 9.72599C7.9141 9.72599 8.24989 10.0618 8.24989 10.476Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+  );
+}
+
 export {
   IconEdit,
   IconNextChat,
@@ -582,4 +604,5 @@ export {
   IconGoogle,
   IconLoading,
   IconDiscord,
+  IconExclamationTriangle,
 };