🎨 feat: UI Refresh for Enhanced UX

api/app/clients/BaseClient.js

@@ -879,13 +879,14 @@ class BaseClient {
         : await getConvo(this.options.req?.user?.id, message.conversationId);
 
     const unsetFields = {};
+    const exceptions = new Set(['spec', 'iconURL']);
     if (existingConvo != null) {
       this.fetchedConvo = true;
       for (const key in existingConvo) {
         if (!key) {
           continue;
         }
-        if (excludedKeys.has(key)) {
+        if (excludedKeys.has(key) && !exceptions.has(key)) {
           continue;
         }
 

client/package.json

@@ -52,6 +52,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
+    "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-table": "^8.11.7",
     "class-variance-authority": "^0.6.0",
@@ -141,8 +142,8 @@
     "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",
     "vite": "^6.1.0",
-    "vite-plugin-node-polyfills": "^0.17.0",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-node-polyfills": "^0.17.0",
     "vite-plugin-pwa": "^0.21.1"
   }
 }

client/src/common/index.ts

@@ -3,5 +3,6 @@ export * from './artifacts';
 export * from './types';
 export * from './menus';
 export * from './tools';
+export * from './selector';
 export * from './assistants-types';
 export * from './agents-types';

client/src/common/selector.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TModelSpec, TInterfaceConfig } from 'librechat-data-provider';
+
+export interface Endpoint {
+  value: string;
+  label: string;
+  hasModels: boolean;
+  models?: string[];
+  icon: React.ReactNode;
+  agentNames?: Record<string, string>;
+  assistantNames?: Record<string, string>;
+  modelIcons?: Record<string, string | undefined>;
+}
+
+export interface SelectedValues {
+  endpoint: string | null;
+  model: string | null;
+  modelSpec: string | null;
+}
+
+export interface ModelSelectorProps {
+  interfaceConfig: TInterfaceConfig;
+  modelSpecs: TModelSpec[];
+}

client/src/common/types.ts

@@ -1,10 +1,10 @@
 import { RefObject } from 'react';
-import { FileSources } from 'librechat-data-provider';
+import { FileSources, EModelEndpoint } from 'librechat-data-provider';
+import type { UseMutationResult } from '@tanstack/react-query';
 import type * as InputNumberPrimitive from 'rc-input-number';
+import type { SetterOrUpdater, RecoilState } from 'recoil';
 import type { ColumnDef } from '@tanstack/react-table';
-import type { SetterOrUpdater } from 'recoil';
 import type * as t from 'librechat-data-provider';
-import type { UseMutationResult } from '@tanstack/react-query';
 import type { LucideIcon } from 'lucide-react';
 import type { TranslationKeys } from '~/hooks';
 
@@ -48,6 +48,14 @@ export type AudioChunk = {
   };
 };
 
+export type BadgeItem = {
+  id: string;
+  icon: React.ComponentType<any>;
+  label: string;
+  atom: RecoilState<boolean>;
+  isAvailable: boolean;
+};
+
 export type AssistantListItem = {
   id: string;
   name: string;
@@ -488,6 +496,27 @@ export interface ExtendedFile {
   metadata?: t.TFile['metadata'];
 }
 
+export interface ExtendedEndpoint {
+  value: EModelEndpoint;
+  label: string;
+  hasModels: boolean;
+  icon: JSX.Element | null;
+  models?: string[];
+  agentNames?: Record<string, string>;
+  assistantNames?: Record<string, string>;
+  modelIcons?: Record<string, string | undefined>;
+}
+
+export interface ModelItemProps {
+  modelName: string;
+  endpoint: EModelEndpoint;
+  isSelected: boolean;
+  onSelect: () => void;
+  onNavigateBack: () => void;
+  icon?: JSX.Element;
+  className?: string;
+}
+
 export type ContextType = { navVisible: boolean; setNavVisible: (visible: boolean) => void };
 
 export interface SwitcherProps {

client/src/components/Chat/AddMultiConvo.tsx

@@ -12,7 +12,7 @@ function AddMultiConvo() {
   const localize = useLocalize();
 
   const clickHandler = () => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     const { title: _t, ...convo } = conversation ?? ({} as TConversation);
     setAddedConvo({
       ...convo,
@@ -42,7 +42,7 @@ function AddMultiConvo() {
       role="button"
       onClick={clickHandler}
       data-testid="parameters-button"
-      className="inline-flex size-10 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
+      className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-lg border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
     >
       <PlusCircle size={16} aria-label="Plus Icon" />
     </TooltipAnchor>

client/src/components/Chat/ChatView.tsx

@@ -7,6 +7,7 @@ import type { TMessage } from 'librechat-data-provider';
 import type { ChatFormValues } from '~/common';
 import { ChatContext, AddedChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
 import { useChatHelpers, useAddedResponse, useSSE } from '~/hooks';
+import ConversationStarters from './Input/ConversationStarters';
 import MessagesView from './Messages/MessagesView';
 import { Spinner } from '~/components/svg';
 import Presentation from './Presentation';
@@ -21,6 +22,7 @@ function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
   const addedSubmission = useRecoilValue(store.submissionByIndex(index + 1));
+  const centerFormOnLanding = useRecoilValue(store.centerFormOnLanding);
 
   const fileMap = useFileMapContext();
 
@@ -46,27 +48,46 @@ function ChatView({ index = 0 }: { index?: number }) {
   });
 
   let content: JSX.Element | null | undefined;
+  const isLandingPage = !messagesTree || messagesTree.length === 0;
+
   if (isLoading && conversationId !== 'new') {
     content = (
       <div className="flex h-screen items-center justify-center">
-        <Spinner className="opacity-0" />
+        <Spinner className="text-text-primary" />
       </div>
     );
-  } else if (messagesTree && messagesTree.length !== 0) {
-    content = <MessagesView messagesTree={messagesTree} Header={<Header />} />;
+  } else if (!isLandingPage) {
+    content = <MessagesView messagesTree={messagesTree} />;
   } else {
-    content = <Landing Header={<Header />} />;
+    content = <Landing centerFormOnLanding={centerFormOnLanding} />;
   }
 
   return (
     <ChatFormProvider {...methods}>
       <ChatContext.Provider value={chatHelpers}>
         <AddedChatContext.Provider value={addedChatHelpers}>
           <Presentation>
-            {content}
-            <div className="w-full border-t-0 pl-0 pt-2 dark:border-white/20 md:w-[calc(100%-.5rem)] md:border-t-0 md:border-transparent md:pl-0 md:pt-0 md:dark:border-transparent">
-              <ChatForm index={index} />
-              <Footer />
+            <div className="flex h-full w-full flex-col">
+              {!isLoading && <Header />}
+
+              {isLandingPage ? (
+                <div className="flex flex-1 flex-col items-center justify-end sm:justify-center">
+                  {content}
+                  <div className="w-full max-w-3xl transition-all duration-200 xl:max-w-4xl">
+                    <ChatForm index={index} />
+                    <ConversationStarters />
+                    <Footer />
+                  </div>
+                </div>
+              ) : (
+                <div className="flex h-full flex-col overflow-y-auto">
+                  {content}
+                  <div className="w-full">
+                    <ChatForm index={index} />
+                    <Footer />
+                  </div>
+                </div>
+              )}
             </div>
           </Presentation>
         </AddedChatContext.Provider>

client/src/components/Chat/Footer.tsx

@@ -56,7 +56,7 @@ export default function Footer({ className }: { className?: string }) {
     <React.Fragment key={`main-content-part-${index}`}>
       <ReactMarkdown
         components={{
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
           a: ({ node: _n, href, children, ...otherProps }) => {
             return (
               <a
@@ -70,7 +70,7 @@ export default function Footer({ className }: { className?: string }) {
               </a>
             );
           },
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
           p: ({ node: _n, ...props }) => <span {...props} />,
         }}
       >
@@ -87,7 +87,7 @@ export default function Footer({ className }: { className?: string }) {
     <div
       className={
         className ??
-        'relative flex items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary md:px-[60px]'
+        'relative hidden items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]'
       }
       role="contentinfo"
     >

client/src/components/Chat/Header.tsx

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { getConfigDefaults, PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { ContextType } from '~/common';
-import { EndpointsMenu, ModelSpecsMenu, PresetsMenu, HeaderNewChat } from './Menus';
+import ModelSelector from './Menus/Endpoints/ModelSelector';
+import { PresetsMenu, HeaderNewChat } from './Menus';
 import { useGetStartupConfig } from '~/data-provider';
 import ExportAndShareMenu from './ExportAndShareMenu';
 import { useMediaQuery, useHasAccess } from '~/hooks';
-import HeaderOptions from './Input/HeaderOptions';
 import BookmarkMenu from './Menus/BookmarkMenu';
 import AddMultiConvo from './AddMultiConvo';
 
@@ -34,14 +34,12 @@ export default function Header() {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
-    <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold dark:bg-gray-800 dark:text-white">
+    <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
-        <div className="flex items-center gap-2">
+        <div className="mx-2 flex items-center gap-2">
           {!navVisible && <HeaderNewChat />}
-          {interfaceConfig.endpointsMenu === true && <EndpointsMenu />}
-          {modelSpecs.length > 0 && <ModelSpecsMenu modelSpecs={modelSpecs} />}
-          {<HeaderOptions interfaceConfig={interfaceConfig} />}
-          {interfaceConfig.presets === true && <PresetsMenu />}
+          {<ModelSelector interfaceConfig={interfaceConfig} modelSpecs={modelSpecs} />}
+          {interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
           {hasAccessToBookmarks === true && <BookmarkMenu />}
           {hasAccessToMultiConvo === true && <AddMultiConvo />}
           {isSmallScreen && (

client/src/components/Chat/Input/AudioRecorder.tsx

@@ -7,14 +7,12 @@ import { globalAudioId } from '~/common';
 import { cn } from '~/utils';
 
 export default function AudioRecorder({
-  isRTL,
   disabled,
   ask,
   methods,
   textAreaRef,
   isSubmitting,
 }: {
-  isRTL: boolean;
   disabled: boolean;
   ask: (data: { text: string }) => void;
   methods: ReturnType<typeof useChatFormContext>;
@@ -90,9 +88,7 @@ export default function AudioRecorder({
           onClick={isListening === true ? handleStopRecording : handleStartRecording}
           disabled={disabled}
           className={cn(
-            'absolute flex size-[35px] items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
-            isRTL ? 'bottom-2 left-2' : 'bottom-2 right-2',
-            disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+            'flex size-9 items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover',
           )}
           title={localize('com_ui_use_micrphone')}
           aria-pressed={isListening}