🔧 style: Improve UI and UX with Style Fixes and Code Refactors (#2002)

* refactor(useSSE): add useCallback to all event handlers

* chore: remove modelName in defaultAssistantFormValues

* fix(SidePanel): fix layout shift on chrome my removing sidenav scrollbar

* style(ChatForm): match ChatGPT textarea effect styling

* style: fix flickering of old background color on refresh

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

@@ -43,7 +43,7 @@ export default function ChatForm({ index = 0 }) {
     >
       <div className="relative flex h-full flex-1 items-stretch md:flex-col">
         <div className="flex w-full items-center">
-          <div className="[&:has(textarea:focus)]:border-token-border-xheavy border-token-border-heavy shadow-xs dark:shadow-xs relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border border-black/10 bg-white shadow-[0_0_0_2px_rgba(255,255,255,0.95)] dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:shadow-[0_0_0_2px_rgba(33,33,33,1)] [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,0.3)]">
+          <div className="[&:has(textarea:focus)]:border-token-border-xheavy dark:border-token-border-medium border-token-border-medium bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:text-white [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)]">
             <FileRow
               files={files}
               setFiles={setFiles}

client/src/components/SidePanel/Nav.tsx

@@ -20,7 +20,7 @@ export default function Nav({ links, isCollapsed, resize, defaultActive }: NavPr
   return (
     <div
       data-collapsed={isCollapsed}
-      className="bg-token-sidebar-surface-primary group flex-shrink-0 overflow-x-hidden py-2 data-[collapsed=true]:py-2"
+      className="bg-token-sidebar-surface-primary hide-scrollbar group flex-shrink-0 overflow-x-hidden py-2 data-[collapsed=true]:py-2"
     >
       <div className="h-full">
         <div className="flex h-full min-h-0 flex-col">

client/src/components/SidePanel/SidePanel.tsx

@@ -172,7 +172,7 @@ export default function SidePanel({
               localStorage.setItem('react-resizable-panels:collapsed', 'true');
             }}
             className={cn(
-              'sidenav border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
+              'sidenav hide-scrollbar border-l border-gray-200 bg-white dark:border-gray-800/50 dark:bg-gray-900',
               isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
               minSize === 0 ? 'min-w-0' : '',
             )}

client/src/hooks/SSE/useContentHandler.ts

@@ -6,6 +6,7 @@ import type {
   ContentPart,
   TMessageContentParts,
 } from 'librechat-data-provider';
+import { useCallback, useMemo } from 'react';
 
 type TUseContentHandler = {
   setMessages: (messages: TMessage[]) => void;
@@ -18,14 +19,16 @@ type TContentHandler = {
 };
 
 export default function useContentHandler({ setMessages, getMessages }: TUseContentHandler) {
-  const messageMap = new Map<string, TMessage>();
+  const messageMap = useMemo(() => new Map<string, TMessage>(), []);
-  return ({ data, submission }: TContentHandler) => {
+  return useCallback(
+    ({ data, submission }: TContentHandler) => {
       const { type, messageId, thread_id, conversationId, index, stream } = data;
 
       const _messages = getMessages();
       const messages =
-      _messages?.filter((m) => m.messageId !== messageId)?.map((msg) => ({ ...msg, thread_id })) ??
+        _messages
-      [];
+          ?.filter((m) => m.messageId !== messageId)
+          ?.map((msg) => ({ ...msg, thread_id })) ?? [];
       const userMessage = messages[messages.length - 1];
 
       const { initialResponse } = submission;
@@ -62,5 +65,7 @@ export default function useContentHandler({ setMessages, getMessages }: TUseCont
       }
 
       setMessages([...messages, response]);
-  };
+    },
+    [getMessages, messageMap, setMessages],
+  );
 }

client/src/hooks/SSE/useSSE.ts

@@ -1,8 +1,8 @@
 import { v4 } from 'uuid';
 import { useSetRecoilState } from 'recoil';
-import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState, useCallback } from 'react';
 import {
   /* @ts-ignore */
   SSE,
@@ -83,7 +83,8 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
     enabled: !!isAuthenticated && startupConfig?.checkBalance,
   });
 
-  const messageHandler = (data: string, submission: TSubmission) => {
+  const messageHandler = useCallback(
+    (data: string, submission: TSubmission) => {
       const {
         messages,
         message,
@@ -121,9 +122,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
           },
         ]);
       }
-  };
+    },
+    [setMessages],
+  );
 
-  const cancelHandler = (data: TResData, submission: TSubmission) => {
+  const cancelHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
       const { requestMessage, responseMessage, conversation } = data;
       const { messages, isRegenerate = false } = submission;
 
@@ -166,9 +170,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       });
 
       setIsSubmitting(false);
-  };
+    },
+    [setMessages, setConversation, setStorage, genTitle, queryClient, setIsSubmitting],
+  );
 
-  const syncHandler = (data: TSyncData, submission: TSubmission) => {
+  const syncHandler = useCallback(
+    (data: TSyncData, submission: TSubmission) => {
       const { conversationId, thread_id, responseMessage, requestMessage } = data;
       const { initialResponse, messages: _messages, message } = submission;
 
@@ -210,9 +217,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       setShowStopButton(true);
 
       resetLatestMessage();
-  };
+    },
+    [setMessages, setConversation, setStorage, queryClient, setShowStopButton, resetLatestMessage],
+  );
 
-  const createdHandler = (data: TResData, submission: TSubmission) => {
+  const createdHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
       const { messages, message, initialResponse, isRegenerate = false } = submission;
 
       if (isRegenerate) {
@@ -268,9 +278,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
         }
       });
       resetLatestMessage();
-  };
+    },
+    [setMessages, setConversation, setStorage, queryClient, resetLatestMessage],
+  );
 
-  const finalHandler = (data: TResData, submission: TSubmission) => {
+  const finalHandler = useCallback(
+    (data: TResData, submission: TSubmission) => {
       const { requestMessage, responseMessage, conversation, runMessages } = data;
       const { messages, conversation: submissionConvo, isRegenerate = false } = submission;
 
@@ -318,9 +331,20 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       });
 
       setIsSubmitting(false);
-  };
+    },
+    [
+      setMessages,
+      setConversation,
+      setStorage,
+      genTitle,
+      queryClient,
+      setIsSubmitting,
+      setShowStopButton,
+    ],
+  );
 
-  const errorHandler = ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
+  const errorHandler = useCallback(
+    ({ data, submission }: { data?: TResData; submission: TSubmission }) => {
       const { messages, message, initialResponse } = submission;
 
       setCompleted((prev) => new Set(prev.add(initialResponse.messageId)));
@@ -388,9 +412,12 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
 
       setIsSubmitting(false);
       return;
-  };
+    },
+    [setMessages, paramId, setIsSubmitting, newConversation],
+  );
 
-  const abortConversation = async (conversationId = '', submission: TSubmission) => {
+  const abortConversation = useCallback(
+    async (conversationId = '', submission: TSubmission) => {
       console.log(submission);
       let runAbortKey = '';
       try {
@@ -444,7 +471,10 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
           console.log('aborted', data);
         } else {
           throw new Error(
-          'Unexpected response from server; Status: ' + response.status + ' ' + response.statusText,
+            'Unexpected response from server; Status: ' +
+              response.status +
+              ' ' +
+              response.statusText,
           );
         }
       } catch (error) {
@@ -468,7 +498,9 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
         });
         setIsSubmitting(false);
       }
-  };
+    },
+    [token, setIsSubmitting, finalHandler, cancelHandler, setMessages, newConversation],
+  );
 
   useEffect(() => {
     if (submission === null) {

client/src/style.css

@@ -1410,7 +1410,7 @@ html {
 .dark body,
 .dark html {
  --tw-bg-opacity:1;
- background-color:rgba(52,53,65,var(--tw-bg-opacity))
+ background-color:rgba(33,33,33,var(--tw-bg-opacity))
 }
 #__next,
 #root {

packages/data-provider/src/schemas.ts

@@ -22,7 +22,7 @@ export const defaultAssistantFormValues = {
   name: '',
   description: '',
   instructions: '',
-  model: 'gpt-3.5-turbo-1106',
+  model: '',
   functions: [],
   code_interpreter: false,
   retrieval: false,