🗨️ feat: Prompt Slash Commands (#3219)

* chore: Update prompt description placeholder text

* fix: promptsPathPattern to not include new

* feat: command input and styling change for prompt views

* fix: intended validation

* feat: prompts slash command

* chore: localizations and fix add command during creation

* refactor(PromptsCommand): better label

* feat: update `allPrompGroups` cache on all promptGroups mutations

* refactor: ensure assistants builder is first within sidepanel

* refactor: allow defining emailVerified via create-user script

client/src/hooks/Input/useHandleKeyUp.ts

@@ -1,5 +1,9 @@
+import { useSetRecoilState } from 'recoil';
 import { useCallback, useMemo } from 'react';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { SetterOrUpdater } from 'recoil';
+import useHasAccess from '~/hooks/Roles/useHasAccess';
+import store from '~/store';
 
 /** Event Keys that shouldn't trigger a command */
 const invalidKeys = {
@@ -36,14 +40,21 @@ const shouldTriggerCommand = (
  * Custom hook for handling key up events with command triggers.
  */
 const useHandleKeyUp = ({
+  index,
   textAreaRef,
   setShowPlusPopover,
   setShowMentionPopover,
 }: {
+  index: number;
   textAreaRef: React.RefObject<HTMLTextAreaElement>;
   setShowPlusPopover: SetterOrUpdater<boolean>;
   setShowMentionPopover: SetterOrUpdater<boolean>;
 }) => {
+  const hasAccess = useHasAccess({
+    permissionType: PermissionTypes.PROMPTS,
+    permission: Permissions.USE,
+  });
+  const setShowPromptsPopover = useSetRecoilState(store.showPromptsPopoverFamily(index));
   const handleAtCommand = useCallback(() => {
     if (shouldTriggerCommand(textAreaRef, '@')) {
       setShowMentionPopover(true);
@@ -56,12 +67,22 @@ const useHandleKeyUp = ({
     }
   }, [textAreaRef, setShowPlusPopover]);
 
+  const handlePromptsCommand = useCallback(() => {
+    if (!hasAccess) {
+      return;
+    }
+    if (shouldTriggerCommand(textAreaRef, '/')) {
+      setShowPromptsPopover(true);
+    }
+  }, [textAreaRef, hasAccess, setShowPromptsPopover]);
+
   const commandHandlers = useMemo(
     () => ({
       '@': handleAtCommand,
       '+': handlePlusCommand,
+      '/': handlePromptsCommand,
     }),
-    [handleAtCommand, handlePlusCommand],
+    [handleAtCommand, handlePlusCommand, handlePromptsCommand],
   );
 
   /**

client/src/hooks/Nav/useSideNavLinks.ts

@@ -32,22 +32,13 @@ export default function useSideNavLinks({
   endpoint?: EModelEndpoint | null;
   interfaceConfig: Partial<TInterfaceConfig>;
 }) {
-  const hasAccess = useHasAccess({
+  const hasAccessToPrompts = useHasAccess({
     permissionType: PermissionTypes.PROMPTS,
     permission: Permissions.USE,
   });
 
   const Links = useMemo(() => {
     const links: NavLink[] = [];
-    if (hasAccess) {
-      links.push({
-        title: 'com_ui_prompts',
-        label: '',
-        icon: MessageSquareQuote,
-        id: 'prompts',
-        Component: PromptsAccordion,
-      });
-    }
     if (
       isAssistantsEndpoint(endpoint) &&
       assistants &&
@@ -64,6 +55,16 @@ export default function useSideNavLinks({
       });
     }
 
+    if (hasAccessToPrompts) {
+      links.push({
+        title: 'com_ui_prompts',
+        label: '',
+        icon: MessageSquareQuote,
+        id: 'prompts',
+        Component: PromptsAccordion,
+      });
+    }
+
     links.push({
       title: 'com_sidepanel_attach_files',
       label: '',
@@ -81,7 +82,14 @@ export default function useSideNavLinks({
     });
 
     return links;
-  }, [assistants, keyProvided, hidePanel, endpoint, interfaceConfig.parameters, hasAccess]);
+  }, [
+    assistants,
+    keyProvided,
+    hidePanel,
+    endpoint,
+    interfaceConfig.parameters,
+    hasAccessToPrompts,
+  ]);
 
   return Links;
 }