📧 feat: Mention "@" Command Popover (#2635)

* feat: initial mockup * wip: activesetting, may use or not use * wip: mention with useCombobox usage * feat: connect textarea to new mention popover * refactor: consolidate icon logic for Landing/convos * refactor: cleanup URL logic * refactor(useTextarea): key up handler * wip: render desired mention options * refactor: improve mention detection * feat: modular chat the default option * WIP: first pass mention selection * feat: scroll mention items with keypad * chore(showMentionPopoverFamily): add typing to atomFamily * feat: removeAtSymbol * refactor(useListAssistantsQuery): use defaultOrderQuery as default param * feat: assistants mentioning * fix conversation switch errors * filter mention selections based on startup settings and available endpoints * fix: mentions model spec icon URL * style: archive icon * fix: convo renaming behavior on click * fix(Convo): toggle hover state * style: EditMenu refactor * fix: archive chats table * fix: errorsToString import * chore: remove comments * chore: remove comment * feat: mention descriptions * refactor: make sure continue hover button is always last, add correct fork button alt text
2025-12-19 09:50:15 +01:00 · 2024-05-07 13:13:55 -04:00 · 2024-05-07 13:13:55 -04:00 · b6d6343f54
commit b6d6343f54
parent 89b1e33be0
35 changed files with 1048 additions and 217 deletions
--- a/client/src/hooks/Input/useMentions.ts
+++ b/client/src/hooks/Input/useMentions.ts
@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import {
+  useGetModelsQuery,
+  useGetStartupConfig,
+  useGetEndpointsQuery,
+} from 'librechat-data-provider/react-query';
+import { getConfigDefaults, EModelEndpoint, alternateName } from 'librechat-data-provider';
+import type { Assistant } from 'librechat-data-provider';
+import { useGetPresetsQuery, useListAssistantsQuery } from '~/data-provider';
+import { mapEndpoints, getPresetTitle } from '~/utils';
+import { EndpointIcon } from '~/components/Endpoints';
+import useSelectMention from './useSelectMention';
+
+const defaultInterface = getConfigDefaults().interface;
+
+export default function useMentions({ assistantMap }: { assistantMap: Record<string, Assistant> }) {
+  const { data: presets } = useGetPresetsQuery();
+  const { data: modelsConfig } = useGetModelsQuery();
+  const { data: startupConfig } = useGetStartupConfig();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+  const { data: endpoints = [] } = useGetEndpointsQuery({
+    select: mapEndpoints,
+  });
+  const { data: assistants = [] } = useListAssistantsQuery(undefined, {
+    select: (res) =>
+      res.data
+        .map(({ id, name, description }) => ({
+          type: 'assistant',
+          label: name ?? '',
+          value: id,
+          description: description ?? '',
+          icon: EndpointIcon({
+            conversation: { assistant_id: id, endpoint: EModelEndpoint.assistants },
+            containerClassName: 'shadow-stroke overflow-hidden rounded-full',
+            endpointsConfig: endpointsConfig,
+            context: 'menu-item',
+            assistantMap,
+            size: 20,
+          }),
+        }))
+        .filter(Boolean),
+  });
+  const modelSpecs = useMemo(() => startupConfig?.modelSpecs?.list ?? [], [startupConfig]);
+  const interfaceConfig = useMemo(
+    () => startupConfig?.interface ?? defaultInterface,
+    [startupConfig],
+  );
+  const { onSelectMention } = useSelectMention({
+    modelSpecs,
+    endpointsConfig,
+    presets,
+    assistantMap,
+  });
+
+  const options = useMemo(() => {
+    const mentions = [
+      ...(modelSpecs?.length > 0 ? modelSpecs : []).map((modelSpec) => ({
+        value: modelSpec.name,
+        label: modelSpec.label,
+        description: modelSpec.description,
+        icon: EndpointIcon({
+          conversation: {
+            ...modelSpec.preset,
+            iconURL: modelSpec.iconURL,
+          },
+          endpointsConfig,
+          context: 'menu-item',
+          size: 20,
+        }),
+        type: 'modelSpec',
+      })),
+      ...(interfaceConfig.endpointsMenu ? endpoints : []).map((endpoint) => ({
+        value: endpoint,
+        label: alternateName[endpoint] ?? endpoint ?? '',
+        type: 'endpoint',
+        icon: EndpointIcon({
+          conversation: { endpoint },
+          endpointsConfig,
+          context: 'menu-item',
+          size: 20,
+        }),
+      })),
+      ...(endpointsConfig?.[EModelEndpoint.assistants] ? assistants : []),
+      ...((interfaceConfig.presets ? presets : [])?.map((preset, index) => ({
+        value: preset.presetId ?? `preset-${index}`,
+        label: preset.title ?? preset.modelLabel ?? preset.chatGptLabel ?? '',
+        description: getPresetTitle(preset, true),
+        icon: EndpointIcon({
+          conversation: preset,
+          containerClassName: 'shadow-stroke overflow-hidden rounded-full',
+          endpointsConfig: endpointsConfig,
+          context: 'menu-item',
+          assistantMap,
+          size: 20,
+        }),
+        type: 'preset',
+      })) ?? []),
+    ];
+
+    return mentions;
+  }, [
+    presets,
+    endpoints,
+    modelSpecs,
+    assistants,
+    assistantMap,
+    endpointsConfig,
+    interfaceConfig.presets,
+    interfaceConfig.endpointsMenu,
+  ]);
+
+  return {
+    options,
+    assistants,
+    modelsConfig,
+    onSelectMention,
+  };
+}