From d4d56281e3d7c30edac841b44cd1a6cf2b687ef7 Mon Sep 17 00:00:00 2001
From: Jacob Colyvan <jacob_colyvan@live.com>
Date: Sun, 28 Jul 2024 06:02:34 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=A8=EF=B8=8F=20fix:=20respect=20line?=
 =?UTF-8?q?=20breaks=20in=20prompt=20variables=20(#3459)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: always display new lines in PromptEditor

* fix: allow multiline inputs in prompt template
---
 .../src/components/Prompts/Groups/VariableForm.tsx  | 13 ++++++++++---
 client/src/components/Prompts/PromptEditor.tsx      |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Prompts/Groups/VariableForm.tsx b/client/src/components/Prompts/Groups/VariableForm.tsx
index 510b201f89..d77d164f72 100644
--- a/client/src/components/Prompts/Groups/VariableForm.tsx
+++ b/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))();
+                      }
+                    }}
                   />
                 )}
               />
diff --git a/client/src/components/Prompts/PromptEditor.tsx b/client/src/components/Prompts/PromptEditor.tsx
index 034efb7c97..4848746143 100644
--- a/client/src/components/Prompts/PromptEditor.tsx
+++ b/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>
             )
           }
         />