style: adjust icon scale, favicon, azure icon; chore: convert files to TSX; ci: unit tests for generation buttons (#987)

* some jsx to tsx and added 3 new test * test(stop) * new librechat and azure icon, small fix * fix(tsc error) * fix(tsc error) Endpoint Item
2025-12-19 18:00:15 +01:00 · 2023-10-03 16:28:19 +02:00 · 2023-10-03 16:28:19 +02:00 · be71a1947b
commit be71a1947b
parent 3137f467a8
21 changed files with 187 additions and 56 deletions
--- a/client/src/components/Nav/NavLinks.tsx
+++ b/client/src/components/Nav/NavLinks.tsx
@ -0,0 +1,120 @@
+import { Download } from 'lucide-react';
+import { useRecoilValue } from 'recoil';
+import { Fragment, useState } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import ClearConvos from './ClearConvos';
+import Settings from './Settings';
+import NavLink from './NavLink';
+import Logout from './Logout';
+import { ExportModel } from './ExportConversation';
+import { LinkIcon, DotsIcon, GearIcon } from '~/components';
+import { useLocalize } from '~/hooks';
+import { useAuthContext } from '~/hooks/AuthContext';
+import { cn } from '~/utils/';
+
+import store from '~/store';
+
+export default function NavLinks() {
+  const [showExports, setShowExports] = useState(false);
+  const [showClearConvos, setShowClearConvos] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const { user } = useAuthContext();
+  const localize = useLocalize();
+
+  const conversation = useRecoilValue(store.conversation) || {};
+
+  const exportable =
+    conversation?.conversationId &&
+    conversation?.conversationId !== 'new' &&
+    conversation?.conversationId !== 'search';
+
+  const clickHandler = () => {
+    if (exportable) {
+      setShowExports(true);
+    }
+  };
+
+  return (
+    <>
+      <Menu as="div" className="group relative">
+        {({ open }) => (
+          <>
+            <Menu.Button
+              className={cn(
+                'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
+                open ? 'bg-gray-800' : '',
+              )}
+            >
+              <div className="-ml-0.9 -mt-0.8 h-9 w-8 flex-shrink-0">
+                <div className="relative flex">
+                  <img
+                    className="rounded-sm"
+                    src={
+                      user?.avatar ||
+                      `https://api.dicebear.com/6.x/initials/svg?seed=${
+                        user?.name || 'User'
+                      }&fontFamily=Verdana&fontSize=36`
+                    }
+                    alt=""
+                  />
+                </div>
+              </div>
+              <div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
+                {user?.name || localize('com_nav_user')}
+              </div>
+              <DotsIcon />
+            </Menu.Button>
+
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100 transform"
+              enterFrom="translate-y-2 opacity-0"
+              enterTo="translate-y-0 opacity-100"
+              leave="transition ease-in duration-75 transform"
+              leaveFrom="translate-y-0 opacity-100"
+              leaveTo="translate-y-2 opacity-0"
+            >
+              <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
+                <Menu.Item as="div">
+                  <NavLink
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
+                      exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-white/50',
+                    )}
+                    svg={() => <Download size={16} />}
+                    text={localize('com_nav_export_conversation')}
+                    clickHandler={clickHandler}
+                  />
+                </Menu.Item>
+                <div className="my-1.5 h-px bg-white/20" role="none" />
+                <Menu.Item as="div">
+                  <NavLink
+                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    svg={() => <LinkIcon />}
+                    text={localize('com_nav_help_faq')}
+                    clickHandler={() => window.open('https://docs.librechat.ai/', '_blank')}
+                  />
+                </Menu.Item>
+                <Menu.Item as="div">
+                  <NavLink
+                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                    svg={() => <GearIcon />}
+                    text={localize('com_nav_settings')}
+                    clickHandler={() => setShowSettings(true)}
+                  />
+                </Menu.Item>
+                <div className="my-1.5 h-px bg-white/20" role="none" />
+                <Menu.Item as="div">
+                  <Logout />
+                </Menu.Item>
+              </Menu.Items>
+            </Transition>
+          </>
+        )}
+      </Menu>
+      {showExports && <ExportModel open={showExports} onOpenChange={setShowExports} />}
+      {showClearConvos && <ClearConvos open={showClearConvos} onOpenChange={setShowClearConvos} />}
+      {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
+    </>
+  );
+}