fix: Ensure Message Send Requires Key 🔑 (#1281)

* fix: only allow message send when key is provided when required
- create useRequiresKey hook
- pass same disabled prop to Textarea, AttachFile, and SendButton
- EndpointItem: add localization, stopPropagation, and remove commented code
- separate some hooks to new Input dir
- completely remove textareaHeight recoil state as is not needed
- update imports for moved hooks
- pass disabled prop to useTextarea

* feat: add localization to textarea placeholders

client/src/components/Chat/Input/ChatForm.tsx

@@ -1,6 +1,7 @@
 import { useRecoilState } from 'recoil';
 import type { ChangeEvent } from 'react';
 import { useChatContext } from '~/Providers';
+import { useRequiresKey } from '~/hooks';
 import AttachFile from './Files/AttachFile';
 import StopButton from './StopButton';
 import SendButton from './SendButton';
@@ -28,6 +29,8 @@ export default function ChatForm({ index = 0 }) {
     setText('');
   };
 
+  const { requiresKey } = useRequiresKey();
+
   return (
     <form
       onSubmit={(e) => {
@@ -42,16 +45,17 @@ export default function ChatForm({ index = 0 }) {
             <Images files={files} setFiles={setFiles} setFilesLoading={setFilesLoading} />
             <Textarea
               value={text}
+              disabled={requiresKey}
               onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value)}
               setText={setText}
               submitMessage={submitMessage}
               endpoint={conversation?.endpoint}
             />
-            <AttachFile endpoint={conversation?.endpoint ?? ''} />
+            <AttachFile endpoint={conversation?.endpoint ?? ''} disabled={requiresKey} />
             {isSubmitting && showStopButton ? (
               <StopButton stop={handleStopGenerating} setShowStopButton={setShowStopButton} />
             ) : (
-              <SendButton text={text} disabled={filesLoading || isSubmitting} />
+              <SendButton text={text} disabled={filesLoading || isSubmitting || requiresKey} />
             )}
           </div>
         </div>

client/src/components/Chat/Input/Files/AttachFile.tsx

@@ -3,7 +3,13 @@ import { AttachmentIcon } from '~/components/svg';
 import { FileUpload } from '~/components/ui';
 import { useFileHandling } from '~/hooks';
 
-export default function AttachFile({ endpoint }: { endpoint: EModelEndpoint | '' }) {
+export default function AttachFile({
+  endpoint,
+  disabled = false,
+}: {
+  endpoint: EModelEndpoint | '';
+  disabled?: boolean | null;
+}) {
   const { handleFileChange } = useFileHandling();
   if (!supportsFiles[endpoint]) {
     return null;
@@ -13,6 +19,7 @@ export default function AttachFile({ endpoint }: { endpoint: EModelEndpoint | ''
     <div className="absolute bottom-2 left-2 md:bottom-3 md:left-4">
       <FileUpload handleFileChange={handleFileChange} className="flex">
         <button
+          disabled={!!disabled}
           type="button"
           className="btn relative p-0 text-black dark:text-white"
           aria-label="Attach files"

client/src/components/Chat/Input/Textarea.tsx

@@ -3,7 +3,7 @@ import { supportsFiles } from 'librechat-data-provider';
 import { cn, removeFocusOutlines } from '~/utils';
 import { useTextarea } from '~/hooks';
 
-export default function Textarea({ value, onChange, setText, submitMessage, endpoint }) {
+export default function Textarea({ value, disabled, onChange, setText, submitMessage, endpoint }) {
   const {
     inputRef,
     handlePaste,
@@ -11,22 +11,21 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
     handleKeyDown,
     handleCompositionStart,
     handleCompositionEnd,
-    onHeightChange,
     placeholder,
-  } = useTextarea({ setText, submitMessage });
+  } = useTextarea({ setText, submitMessage, disabled });
 
   return (
     <TextareaAutosize
       ref={inputRef}
       autoFocus
       value={value}
+      disabled={!!disabled}
       onChange={onChange}
       onPaste={handlePaste}
       onKeyUp={handleKeyUp}
       onKeyDown={handleKeyDown}
       onCompositionStart={handleCompositionStart}
       onCompositionEnd={handleCompositionEnd}
-      onHeightChange={onHeightChange}
       id="prompt-textarea"
       tabIndex={0}
       data-testid="text-input"