🗨️ fix: respect line breaks in prompt variables (#3459)

* fix: always display new lines in PromptEditor

* fix: allow multiline inputs in prompt template

client/src/components/Prompts/Groups/VariableForm.tsx

@@ -3,7 +3,7 @@ import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form';
 import type { TPromptGroup } from 'librechat-data-provider';
 import { extractVariableInfo, wrapVariable, replaceSpecialVars } from '~/utils';
 import { useAuthContext, useLocalize, useSubmitMessage } from '~/hooks';
-import { Input } from '~/components/ui';
+import { Textarea } from '~/components/ui';
 
 type FormValues = {
   fields: { variable: string; value: string }[];
@@ -103,11 +103,18 @@ export default function VariableForm({
                 name={`fields.${index}.value`}
                 control={control}
                 render={({ field }) => (
-                  <Input
+                  <Textarea
                     {...field}
                     id={`fields.${index}.value`}
-                    className="input text-grey-darker rounded border px-3 py-2 focus:bg-white dark:border-gray-500 dark:focus:bg-gray-700"
+                    className="input text-grey-darker h-10 rounded border px-3 py-2 focus:bg-white dark:border-gray-500 dark:focus:bg-gray-700"
                     placeholder={uniqueVariables[index]}
+                    onKeyDown={(e) => {
+                      // Submit the form on enter like you would with an Input component
+                      if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        handleSubmit((data) => onSubmit(data))();
+                      }
+                    }}
                   />
                 )}
               />

client/src/components/Prompts/PromptEditor.tsx

@@ -70,7 +70,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
                 onBlur={() => setIsEditing(false)}
               />
             ) : (
-              <span className="block break-words px-2 py-1 dark:text-gray-200">{field.value}</span>
+              <pre className="block break-words px-2 py-1 dark:text-gray-200">{field.value}</pre>
             )
           }
         />