fix(www): don't allow empty chat messages (shadcn-ui#1137)

Co-authored-by: shadcn <[email protected]>
lloydrichards · Oct 3, 2023 · 75afc2b · 75afc2b
1 parent cbb7975
commit 75afc2b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/apps/www/registry/default/example/cards/chat.tsx b/apps/www/registry/default/example/cards/chat.tsx
@@ -90,6 +90,8 @@ export function CardsChat() {
       content: "I can't log in.",
     },
   ])
+  const [input, setInput] = React.useState("")
+  const inputLength = input.trim().length
 
   return (
     <>
@@ -115,6 +117,7 @@ export function CardsChat() {
                   onClick={() => setOpen(true)}
                 >
                   <Plus className="h-4 w-4" />
+                  <span className="sr-only">New message</span>
                 </Button>
               </TooltipTrigger>
               <TooltipContent sideOffset={10}>New message</TooltipContent>
@@ -142,24 +145,27 @@ export function CardsChat() {
           <form
             onSubmit={(event) => {
               event.preventDefault()
+              if (inputLength === 0) return
               setMessages([
                 ...messages,
                 {
                   role: "user",
-                  content: event.currentTarget.message.value,
+                  content: input,
                 },
               ])
-
-              event.currentTarget.message.value = ""
+              setInput("")
             }}
             className="flex w-full items-center space-x-2"
           >
             <Input
               id="message"
               placeholder="Type your message..."
               className="flex-1"
+              autoComplete="off"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
             />
-            <Button type="submit" size="icon">
+            <Button type="submit" size="icon" disabled={inputLength === 0}>
               <Send className="h-4 w-4" />
               <span className="sr-only">Send</span>
             </Button>

diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx
@@ -90,6 +90,8 @@ export function CardsChat() {
       content: "I can't log in.",
     },
   ])
+  const [input, setInput] = React.useState("")
+  const inputLength = input.trim().length
 
   return (
     <>
@@ -143,24 +145,27 @@ export function CardsChat() {
           <form
             onSubmit={(event) => {
               event.preventDefault()
+              if (inputLength === 0) return
               setMessages([
                 ...messages,
                 {
                   role: "user",
-                  content: event.currentTarget.message.value,
+                  content: input,
                 },
               ])
-
-              event.currentTarget.message.value = ""
+              setInput("")
             }}
             className="flex w-full items-center space-x-2"
           >
             <Input
               id="message"
               placeholder="Type your message..."
               className="flex-1"
+              autoComplete="off"
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
             />
-            <Button type="submit" size="icon">
+            <Button type="submit" size="icon" disabled={inputLength === 0}>
               <PaperPlaneIcon className="h-4 w-4" />
               <span className="sr-only">Send</span>
             </Button>