this repo has no description
0
fork

Configure Feed

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

Disable composer controls while auth is unavailable

+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) {