this repo has no description
Disable composer controls while auth is unavailable
+8
-2
+8
-2
apps/web/src/components/chat-form.tsx
+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) {