👷 fix: Minor Fixes and Refactors (#2388)

* refactor(useTextarea): set Textarea disabled message due to key higher in priority * fix(SidePanel): intended behavior for non-user provided keys * fix: generate specs * style: update combobox styling as before, with better dynamic height * chore: remove unused import
danny-avila · Apr 11, 2024 · c19dfdd · c19dfdd
1 parent 0fe47cf
commit c19dfdd
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 75 deletions.
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
@@ -335,6 +335,7 @@ export interface ExtendedFile {
 export type ContextType = { navVisible: boolean; setNavVisible: (visible: boolean) => void };
 
 export interface SwitcherProps {
+  endpoint?: EModelEndpoint | null;
   endpointKeyProvided: boolean;
   isCollapsed: boolean;
 }
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
@@ -38,10 +38,10 @@ const SidePanel = ({
   const [fullCollapse, setFullCollapse] = useState(fullPanelCollapse);
   const [collapsedSize, setCollapsedSize] = useState(navCollapsedSize);
   const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
-  const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(EModelEndpoint.assistants);
   const isSmallScreen = useMediaQuery('(max-width: 767px)');
   const { conversation } = useChatContext();
   const { endpoint } = conversation ?? {};
+  const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(endpoint ?? '');
 
   const panelRef = useRef<ImperativePanelHandle>(null);
 
@@ -187,7 +187,11 @@ const SidePanel = ({
                 isCollapsed ? 'h-[52px]' : 'px-2',
               )}
             >
-              <Switcher isCollapsed={isCollapsed} endpointKeyProvided={keyProvided} />
+              <Switcher
+                isCollapsed={isCollapsed}
+                endpointKeyProvided={keyProvided}
+                endpoint={endpoint}
+              />
               <Separator className="bg-gray-100/50 dark:bg-gray-600" />
             </div>
             <Nav

diff --git a/client/src/components/SidePanel/Switcher.tsx b/client/src/components/SidePanel/Switcher.tsx
@@ -1,19 +1,13 @@
 import { EModelEndpoint } from 'librechat-data-provider';
 import type { SwitcherProps } from '~/common';
 import AssistantSwitcher from './AssistantSwitcher';
-import { useChatContext } from '~/Providers';
 import ModelSwitcher from './ModelSwitcher';
 
 export default function Switcher(props: SwitcherProps) {
-  const { conversation } = useChatContext();
-  const { endpoint } = conversation ?? {};
-
-  if (!props.endpointKeyProvided) {
-    return null;
-  }
-
-  if (endpoint === EModelEndpoint.assistants) {
+  if (props.endpoint === EModelEndpoint.assistants && props.endpointKeyProvided) {
     return <AssistantSwitcher {...props} />;
+  } else if (props.endpoint === EModelEndpoint.assistants) {
+    return null;
   }
 
   return <ModelSwitcher {...props} />;

diff --git a/client/src/components/ui/Combobox.tsx b/client/src/components/ui/Combobox.tsx
@@ -1,6 +1,6 @@
 import { startTransition, useMemo } from 'react';
-import * as RadixSelect from '@radix-ui/react-select';
 import { Search as SearchIcon } from 'lucide-react';
+import * as RadixSelect from '@radix-ui/react-select';
 import { CheckIcon, ChevronDownIcon } from '@radix-ui/react-icons';
 import {
   Combobox,
@@ -10,7 +10,7 @@ import {
   ComboboxCancel,
 } from '@ariakit/react';
 import type { OptionWithIcon } from '~/common';
-import { SelectTrigger, SelectValue } from './Select';
+import { SelectTrigger, SelectValue, SelectScrollDownButton } from './Select';
 import useCombobox from '~/hooks/Input/useCombobox';
 import { cn } from '~/utils';
 
@@ -101,65 +101,66 @@ export default function ComboboxComponent({
             role="dialog"
             aria-label={ariaLabel + 's'}
             position="popper"
-            sideOffset={4}
-            alignOffset={-16}
             className={cn(
-              'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
+              'bg-popover text-popover-foreground relative z-50 max-h-[52vh] min-w-[8rem] overflow-hidden rounded-md border border-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-600',
               'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
               'bg-white dark:bg-gray-700',
             )}
           >
-            <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-gradient-to-b from-white from-65% to-transparent px-2 px-3 py-2 text-black transition-colors duration-300 focus:bg-gradient-to-b focus:from-white focus:to-white/50 dark:from-gray-700 dark:to-transparent dark:text-white dark:focus:from-white/10 dark:focus:to-white/20">
-              <SearchIcon className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
-              <Combobox
-                autoSelect
-                placeholder={searchPlaceholder}
-                className="flex-1 rounded-md border-none bg-transparent px-2.5 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-700/10 dark:focus:ring-gray-200/10"
-                // Ariakit's Combobox manually triggers a blur event on virtually
-                // blurred items, making them work as if they had actual DOM
-                // focus. These blur events might happen after the corresponding
-                // focus events in the capture phase, leading Radix Select to
-                // close the popover. This happens because Radix Select relies on
-                // the order of these captured events to discern if the focus was
-                // outside the element. Since we don't have access to the
-                // onInteractOutside prop in the Radix SelectContent component to
-                // stop this behavior, we can turn off Ariakit's behavior here.
-                onBlurCapture={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-              />
-              <ComboboxCancel
-                hideWhenEmpty={true}
-                className="relative flex h-5 w-5 items-center justify-end text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300"
-              />
-            </div>
-            <ComboboxList className="overflow-y-auto p-1 py-2">
-              {matches.map(({ label, value, icon }) => (
-                <RadixSelect.Item key={value} value={`${value ?? ''}`} asChild>
-                  <ComboboxItem
-                    className={cn(
-                      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-                      'rounded-lg hover:bg-gray-100/50 hover:bg-gray-50 dark:text-white dark:hover:bg-gray-600',
-                    )}
-                  >
-                    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-                      <RadixSelect.ItemIndicator>
-                        <CheckIcon className="h-4 w-4" />
-                      </RadixSelect.ItemIndicator>
-                    </span>
-                    <RadixSelect.ItemText>
-                      <div className="[&_svg]:text-foreground flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0">
-                        <div className="assistant-item overflow-hidden rounded-full ">
-                          {icon && icon}
+            <RadixSelect.Viewport className="mb-5 h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]">
+              <div className="group sticky left-0 top-0 z-10 flex h-12 items-center gap-2 bg-white px-2 px-3 py-2 text-black duration-300 dark:bg-gray-700 dark:text-white">
+                <SearchIcon className="h-4 w-4 text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300" />
+                <Combobox
+                  autoSelect
+                  placeholder={searchPlaceholder}
+                  className="flex-1 rounded-md border-none bg-transparent px-2.5 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-700/10 dark:focus:ring-gray-200/10"
+                  // Ariakit's Combobox manually triggers a blur event on virtually
+                  // blurred items, making them work as if they had actual DOM
+                  // focus. These blur events might happen after the corresponding
+                  // focus events in the capture phase, leading Radix Select to
+                  // close the popover. This happens because Radix Select relies on
+                  // the order of these captured events to discern if the focus was
+                  // outside the element. Since we don't have access to the
+                  // onInteractOutside prop in the Radix SelectContent component to
+                  // stop this behavior, we can turn off Ariakit's behavior here.
+                  onBlurCapture={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  }}
+                />
+                <ComboboxCancel
+                  hideWhenEmpty={true}
+                  className="relative flex h-5 w-5 items-center justify-end text-gray-500 transition-colors duration-300 dark:group-focus-within:text-gray-300 dark:group-hover:text-gray-300"
+                />
+              </div>
+              <ComboboxList className="overflow-y-auto p-1 py-2">
+                {matches.map(({ label, value, icon }) => (
+                  <RadixSelect.Item key={value} value={`${value ?? ''}`} asChild>
+                    <ComboboxItem
+                      className={cn(
+                        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                        'rounded-lg hover:bg-gray-100/50 hover:bg-gray-50 dark:text-white dark:hover:bg-gray-600',
+                      )}
+                    >
+                      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <RadixSelect.ItemIndicator>
+                          <CheckIcon className="h-4 w-4" />
+                        </RadixSelect.ItemIndicator>
+                      </span>
+                      <RadixSelect.ItemText>
+                        <div className="[&_svg]:text-foreground flex items-center justify-center gap-3 dark:text-white [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0">
+                          <div className="assistant-item overflow-hidden rounded-full ">
+                            {icon && icon}
+                          </div>
+                          {label}
                         </div>
-                        {label}
-                      </div>
-                    </RadixSelect.ItemText>
-                  </ComboboxItem>
-                </RadixSelect.Item>
-              ))}
-            </ComboboxList>
+                      </RadixSelect.ItemText>
+                    </ComboboxItem>
+                  </RadixSelect.Item>
+                ))}
+              </ComboboxList>
+            </RadixSelect.Viewport>
+            <SelectScrollDownButton className="absolute bottom-0 left-0 right-0" />
           </RadixSelect.Content>
         </RadixSelect.Portal>
       </ComboboxProvider>

diff --git a/client/src/hooks/Input/useTextarea.ts b/client/src/hooks/Input/useTextarea.ts
@@ -81,15 +81,15 @@ export default function useTextarea({
     }
 
     const getPlaceholderText = () => {
+      if (disabled) {
+        return localize('com_endpoint_config_placeholder');
+      }
       if (
         conversation?.endpoint === EModelEndpoint.assistants &&
         (!conversation?.assistant_id || !assistantMap?.[conversation?.assistant_id ?? ''])
       ) {
         return localize('com_endpoint_assistant_placeholder');
       }
-      if (disabled) {
-        return localize('com_endpoint_config_placeholder');
-      }
 
       if (isNotAppendable) {
         return localize('com_endpoint_message_not_appendable');