🧪 feat: Prompt Dropdown Variable; style: Add Markdown Support (#3681)

* feat: Add extended inputs for promts library variables

* feat: Add maxRows prop to VariableForm input field

* 📩 feat: invite user (#3012)

* feat: basic invite-user script

* feat: add invite user functionality and registration validation middleware

* fix: invite user fixes

* refactor: consolidate direct model access to a central place of functions

* style(Registration): add spinner to continue button

* refactor: import ordrer

* feat: improve invite user script and error handling

* fix: merge conflict

* refactor: remove `console.log` and use `logger`

* fix: token operation and checkinvite issues

* bring back comment and remove console log

* fix: return invalid token when token is not found

* fix: getInvite fix

* refactor: Update Token.js to use async/await syntax for update and delete operations

* feat: Refactor Token.js to use async/await syntax for createToken and findToken functions

* refactor(inviteUser): define functions outside of module.exports

* Update AuthService.js

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

* style: improve OpenAI.tsx input field focus styling

* refactor: update import statement in Input.tsx

* refactor: remove multi-line

* refactor:  update placeholder text to use localization

* style: new dropdown variable info and markdown styling for info

* Add ReactMarkdown

* chore: styling, import order

* refactor: update ReactMarkdown usage in VariableForm

* style: remove markdown class

* refactor: update mobile styling and use code renderer

* style(InputWithDropDown): update focus trigger style

* style(OptionsPopover): update Save As Preset `focus` and `dark:bg`

---------

Co-authored-by: Konstantin Meshcheryakov <kmeshcheryakov@klika-tech.com>
Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Co-authored-by: bsu3338 <bsu3338@users.noreply.github.com>

client/src/components/Prompts/PromptVariables.tsx

@@ -1,6 +1,8 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Variable } from 'lucide-react';
-import { extractUniqueVariables, cn } from '~/utils';
+import ReactMarkdown from 'react-markdown';
+import { cn, extractUniqueVariables } from '~/utils';
+import { CodeVariableGfm } from './Markdown';
 import { Separator } from '~/components/ui';
 import { useLocalize } from '~/hooks';
 
@@ -12,7 +14,13 @@ const specialVariables = {
 const specialVariableClasses =
   'bg-yellow-500/25 text-yellow-600 dark:border-yellow-500/50 dark:bg-transparent dark:text-yellow-500/90';
 
-const PromptVariables = ({ promptText }: { promptText: string }) => {
+const PromptVariables = ({
+  promptText,
+  showInfo = true,
+}: {
+  promptText: string;
+  showInfo?: boolean;
+}) => {
   const localize = useLocalize();
 
   const variables = useMemo(() => {
@@ -32,25 +40,52 @@ const PromptVariables = ({ promptText }: { promptText: string }) => {
               <label
                 className={cn(
                   'mr-1 rounded-full border border-border-medium px-2 text-text-secondary',
-                  specialVariables[variable.toLowerCase()] ? specialVariableClasses : '',
+                  specialVariables[variable.toLowerCase()] != null ? specialVariableClasses : '',
                 )}
                 key={index}
               >
-                {specialVariables[variable.toLowerCase()] ? variable.toLowerCase() : variable}
+                {specialVariables[variable.toLowerCase()] != null
+                  ? variable.toLowerCase()
+                  : variable}
               </label>
             ))}
           </div>
         ) : (
           <div className="flex h-7 items-center">
-            <span className="text-xs text-text-tertiary md:text-sm">
-              {localize('com_ui_variables_info')}
+            <span className="text-xs text-text-secondary md:text-sm">
+              <ReactMarkdown components={{ code: CodeVariableGfm }}>
+                {localize('com_ui_variables_info')}
+              </ReactMarkdown>
             </span>
           </div>
         )}
         <Separator className="my-3 bg-border-medium" />
-        <span className="text-xs text-text-tertiary md:text-sm">
-          {localize('com_ui_special_variables')}
-        </span>
+        {showInfo && (
+          <div className="flex flex-col space-y-4">
+            <div>
+              <span className="text-xs font-medium text-text-secondary md:text-sm">
+                {localize('com_ui_special_variables')}
+              </span>
+              {'\u00A0'}
+              <span className="text-xs text-text-secondary md:text-sm">
+                <ReactMarkdown components={{ code: CodeVariableGfm }}>
+                  {localize('com_ui_special_variables_info')}
+                </ReactMarkdown>
+              </span>
+            </div>
+            <div>
+              <span className="text-xs font-medium text-text-secondary md:text-sm">
+                {localize('com_ui_dropdown_variables')}
+              </span>
+              {'\u00A0'}
+              <span className="text-xs text-text-secondary md:text-sm">
+                <ReactMarkdown components={{ code: CodeVariableGfm }}>
+                  {localize('com_ui_dropdown_variables_info')}
+                </ReactMarkdown>
+              </span>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );