logged out chat modal, call to action

src/app/chat/_components/ChatInterface.tsx

@@ -4,6 +4,7 @@ import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport, type UIMessage } from 'ai'
 import { Button } from '~/components/ui/button'
 import { Textarea } from '~/components/ui/textarea'
+import { SignInButton } from '@clerk/nextjs'
 import {
 	useGsapContext,
 } from '~/app/_providers/GsapProvicer';
@@ -18,10 +19,26 @@ interface DBMessage {
 }
 
 interface ChatInterfaceProps {
-	sessionId: string,
+	sessionId?: string,
 	dbMessages: DBMessage[],
 }
 
+function SignInChatPrompt() {
+	return (
+		<div className="flex h-full w-full flex-col items-center justify-center gap-4 text-center">
+			<div className="space-y-2">
+				<h2 className="text-xl font-semibold">Sign in to use the chat</h2>
+				<p className="text-sm text-muted-foreground">
+					You need to be signed in before you can talk to Gregor's AI assistant.
+				</p>
+			</div>
+			<SignInButton mode="modal">
+				<Button type="button">Sign in</Button>
+			</SignInButton>
+		</div>
+	)
+}
+
 function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
 	return dbMessages.map((m) => ({
 		id: m.id,
@@ -43,7 +60,7 @@ function addInitMessage(messageArray: UIMessage[]) {
 	}
 }
 
-export default function ChatInterface({ dbMessages, sessionId }: ChatInterfaceProps) {
+function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProps & { sessionId: string }) {
 	const [input, setInput] = useState('')
 	const {  clearingChat, clearChat, refetchMessages } = useMessages();
 	const initialMessages = toUIMessages(dbMessages)
@@ -115,7 +132,7 @@ export default function ChatInterface({ dbMessages, sessionId }: ChatInterfacePr
 				<div className='flex flex-col gap-2'>
 					<Button
 						onClick={handleSend}
-						disabled={status != "ready" || !input.trim() || sessionId == undefined}
+						disabled={status != "ready" || !input.trim()}
 					>
 						Send
 					</Button>
@@ -140,3 +157,10 @@ export default function ChatInterface({ dbMessages, sessionId }: ChatInterfacePr
 		</div>
 	)
 }
+
+export default function ChatInterface({ dbMessages, sessionId }: ChatInterfaceProps) {
+	if (sessionId == undefined) {
+		return <SignInChatPrompt />
+	}
+	return <AuthenticatedChatInterface sessionId={sessionId} dbMessages={dbMessages} />
+}