Fixed UI of Prompt Modal on Generic Modal

src/frontend/src/index.css

@@ -1084,7 +1084,7 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .chat-message-highlight {
-    @apply my-1 rounded-md bg-indigo-100 dark:bg-indigo-900
+    @apply rounded-md bg-indigo-100 dark:bg-indigo-900
   }
 
 

src/frontend/src/modals/genericModal/index.tsx

@@ -219,14 +219,15 @@ export default function GenericModal({
             )}
           </div>
 
-          <div className="mt-4 flex h-fit w-full items-end justify-between">
+          <div className="mt-6 flex h-fit w-full items-end justify-between">
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
-                <div className=" mr-2 max-h-20 overflow-y-auto custom-scroll">
+                <div className=" mr-2">
+                  <div className="max-h-20 overflow-y-auto custom-scroll">
                     <div className="flex flex-wrap items-center">
                       <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                       <span className="text-md font-semibold text-primary">
-                      Input Variables:
+                        Prompt Variables:
                       </span>
 
                       {wordsHighlight.map((word, index) => (
@@ -244,7 +245,8 @@ export default function GenericModal({
                             <div className="relative bottom-[1px]">
                               <span>
                                 {word.replace(/[{}]/g, "").length > 59
-                                ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                                  ? word.replace(/[{}]/g, "").slice(0, 56) +
+                                    "..."
                                   : word.replace(/[{}]/g, "")}
                               </span>
                             </div>
@@ -253,6 +255,11 @@ export default function GenericModal({
                       ))}
                     </div>
                   </div>
+                  <span className="mt-1 text-xs text-muted-foreground">
+                    Prompt variables can be created with any chosen name inside
+                    curly brackets, e.g. {"{variable_name}"}
+                  </span>
+                </div>
               )}
             </div>
             <Button

src/frontend/src/utils.ts

@@ -1038,10 +1038,6 @@ export const INVALID_CHARACTERS = [
 export const regexHighlight = /\{([^}]+)\}/g;
 
 export const varHighlightHTML = ({ name }: IVarHighlightType) => {
-  const html = `<div class="inline-flex items-center justify-center rounded-md font-medium text-primary bg-muted pb-1">
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
-  <span class='opacity-60 pl-1'>{</span>
-  <span>${name}</span>
-  <span class='opacity-60 pr-1'>}</span>
-</div>`;
   return html;
 };