blair.nz / cai
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Disable chat form inputs when auth is unavailable (#5)

### TL;DR

Disable chat form inputs when the user is not authenticated or auth state hasn't loaded yet.

### What changed?

The chat form now checks Clerk's authentication state (`isLoaded` and `isSignedIn`) before allowing interaction. The message textarea, send button, character selector, and model selector are all disabled when auth is unavailable (i.e., auth hasn't loaded or the user is not signed in).

### How to test?

1. Open the chat page while signed out and verify that the message input, character selector, and model selector are all disabled.
2. Sign in and confirm that all controls become interactive.
3. Verify that sending a message works as expected when authenticated.

### Why make this change?

Preventing interaction with the chat form before authentication is confirmed avoids potential errors from unauthenticated API calls. This ensures users cannot attempt to send messages or change chat settings before a valid session is established.

authored by

James Blair and committed by
GitHub f068cf43 2559dd40

+8 -2
+8 -2
apps/web/src/components/chat-form.tsx
··· 1 + import { useAuth } from "@clerk/clerk-react"; 1 2 import { SendIcon } from "lucide-react"; 2 3 import { useEffect, useState } from "react"; 3 4 import { useCharacters } from "#/hooks/use-characters"; ··· 25 26 modelId: chatModelId, 26 27 className, 27 28 }: ChatFormProps) { 29 + const { isLoaded, isSignedIn } = useAuth(); 28 30 const { data: characters = [] } = useCharacters(); 29 31 const { data: models = [] } = useModels(); 30 32 const sendMessage = useSendMessage(); ··· 35 37 const [text, setText] = useState(""); 36 38 const selectedCharacterId = chatCharacterId ?? characterId; 37 39 const selectedModelId = chatModelId ?? modelId; 40 + const isAuthUnavailable = !isLoaded || !isSignedIn; 38 41 39 42 useEffect(() => { 40 43 if (!chatCharacterId && !characterId && characters[0]) { ··· 49 52 }, [chatModelId, modelId, models]); 50 53 51 54 const isDisabled = 55 + isAuthUnavailable || 52 56 sendMessage.isPending || 53 57 !text.trim() || 54 58 (!chatId && (!selectedCharacterId || !selectedModelId)); 55 59 const isCharacterDisabled = 56 - sendMessage.isPending || updateChatCharacter.isPending; 57 - const isModelDisabled = sendMessage.isPending || updateChatModel.isPending; 60 + isAuthUnavailable || sendMessage.isPending || updateChatCharacter.isPending; 61 + const isModelDisabled = 62 + isAuthUnavailable || sendMessage.isPending || updateChatModel.isPending; 58 63 59 64 function handleCharacterChange(value: string) { 60 65 const nextCharacterId = value as CharacterId; ··· 110 115 placeholder="Write your message here..." 111 116 className="wrap-anywhere min-h-25 focus-visible:border-transparent focus-visible:ring-0" 112 117 value={text} 118 + disabled={isAuthUnavailable} 113 119 onChange={(event) => setText(event.currentTarget.value)} 114 120 onKeyDown={(event) => { 115 121 if (event.key === "Enter" && !event.shiftKey) {