💡 feat: Improve Reasoning Content UI, copy-to-clipboard, and error handling (#10278)

* ✨ feat: Refactor error handling and improve loading states in MessageContent component

* ✨ feat: Enhance Thinking and ContentParts components with improved hover functionality and clipboard support

* fix: Adjust padding in Thinking and ContentParts components for consistent layout

* ✨ feat: Add response label and improve message editing UI with contextual indicators

* ✨ feat: Add isEditing prop to Feedback and Fork components for improved editing state handling

* refactor: Remove isEditing prop from Feedback and Fork components for cleaner state management

* refactor: Migrate state management from Recoil to Jotai for font size and show thinking features

* refactor: Separate ToggleSwitch into RecoilToggle and JotaiToggle components for improved clarity and state management

* refactor: Remove unnecessary comments in ToggleSwitch and MessageContent components for cleaner code

* chore: reorder import statements in Thinking.tsx

* chore: reorder import statement in EditTextPart.tsx

* chore: reorder import statement

* chore: Reorganize imports in ToggleSwitch.tsx

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Chat/Messages/Content/MessageContent.tsx

@@ -14,57 +14,79 @@ import Markdown from './Markdown';
 import { cn } from '~/utils';
 import store from '~/store';
 
+const ERROR_CONNECTION_TEXT = 'Error connecting to server, try refreshing the page.';
+const DELAYED_ERROR_TIMEOUT = 5500;
+const UNFINISHED_DELAY = 250;
+
+const parseThinkingContent = (text: string) => {
+  const thinkingMatch = text.match(/:::thinking([\s\S]*?):::/);
+  return {
+    thinkingContent: thinkingMatch ? thinkingMatch[1].trim() : '',
+    regularContent: thinkingMatch ? text.replace(/:::thinking[\s\S]*?:::/, '').trim() : text,
+  };
+};
+
+const LoadingFallback = () => (
+  <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
+    <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
+      <div className="absolute">
+        <p className="submitting relative">
+          <span className="result-thinking" />
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+const ErrorBox = ({
+  children,
+  className = '',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div
+    role="alert"
+    aria-live="assertive"
+    className={cn(
+      'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
+      className,
+    )}
+  >
+    {children}
+  </div>
+);
+
+const ConnectionError = ({ message }: { message?: TMessage }) => {
+  const localize = useLocalize();
+
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <DelayedRender delay={DELAYED_ERROR_TIMEOUT}>
+        <Container message={message}>
+          <div className="mt-2 rounded-xl border border-red-500/20 bg-red-50/50 px-4 py-3 text-sm text-red-700 shadow-sm transition-all dark:bg-red-950/30 dark:text-red-100">
+            {localize('com_ui_error_connection')}
+          </div>
+        </Container>
+      </DelayedRender>
+    </Suspense>
+  );
+};
+
 export const ErrorMessage = ({
   text,
   message,
   className = '',
-}: Pick<TDisplayProps, 'text' | 'className'> & {
-  message?: TMessage;
-}) => {
-  const localize = useLocalize();
-  if (text === 'Error connecting to server, try refreshing the page.') {
-    console.log('error message', message);
-    return (
-      <Suspense
-        fallback={
-          <div className="text-message mb-[0.625rem] flex min-h-[20px] flex-col items-start gap-3 overflow-visible">
-            <div className="markdown prose dark:prose-invert light w-full break-words dark:text-gray-100">
-              <div className="absolute">
-                <p className="submitting relative">
-                  <span className="result-thinking" />
-                </p>
-              </div>
-            </div>
-          </div>
-        }
-      >
-        <DelayedRender delay={5500}>
-          <Container message={message}>
-            <div
-              className={cn(
-                'rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
-                className,
-              )}
-            >
-              {localize('com_ui_error_connection')}
-            </div>
-          </Container>
-        </DelayedRender>
-      </Suspense>
-    );
+}: Pick<TDisplayProps, 'text' | 'className'> & { message?: TMessage }) => {
+  if (text === ERROR_CONNECTION_TEXT) {
+    return <ConnectionError message={message} />;
   }
+
   return (
     <Container message={message}>
-      <div
-        role="alert"
-        aria-live="assertive"
-        className={cn(
-          'rounded-xl border border-red-500/20 bg-red-500/5 px-3 py-2 text-sm text-gray-600 dark:text-gray-200',
-          className,
-        )}
-      >
+      <ErrorBox className={className}>
         <Error text={text} />
-      </div>
+      </ErrorBox>
     </Container>
   );
 };
@@ -72,27 +94,29 @@ export const ErrorMessage = ({
 const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplayProps) => {
   const { isSubmitting = false, isLatestMessage = false } = useMessageContext();
   const enableUserMsgMarkdown = useRecoilValue(store.enableUserMsgMarkdown);
+
   const showCursorState = useMemo(
     () => showCursor === true && isSubmitting,
     [showCursor, isSubmitting],
   );
 
-  let content: React.ReactElement;
-  if (!isCreatedByUser) {
-    content = <Markdown content={text} isLatestMessage={isLatestMessage} />;
-  } else if (enableUserMsgMarkdown) {
-    content = <MarkdownLite content={text} />;
-  } else {
-    content = <>{text}</>;
-  }
+  const content = useMemo(() => {
+    if (!isCreatedByUser) {
+      return <Markdown content={text} isLatestMessage={isLatestMessage} />;
+    }
+    if (enableUserMsgMarkdown) {
+      return <MarkdownLite content={text} />;
+    }
+    return <>{text}</>;
+  }, [isCreatedByUser, enableUserMsgMarkdown, text, isLatestMessage]);
 
   return (
     <Container message={message}>
       <div
         className={cn(
-          isSubmitting ? 'submitting' : '',
-          showCursorState && !!text.length ? 'result-streaming' : '',
           'markdown prose message-content dark:prose-invert light w-full break-words',
+          isSubmitting && 'submitting',
+          showCursorState && text.length > 0 && 'result-streaming',
           isCreatedByUser && !enableUserMsgMarkdown && 'whitespace-pre-wrap',
           isCreatedByUser ? 'dark:text-gray-20' : 'dark:text-gray-100',
         )}
@@ -103,7 +127,6 @@ const DisplayMessage = ({ text, isCreatedByUser, message, showCursor }: TDisplay
   );
 };
 
-// Unfinished Message Component
 export const UnfinishedMessage = ({ message }: { message: TMessage }) => (
   <ErrorMessage
     message={message}
@@ -123,21 +146,14 @@ const MessageContent = ({
   const { message } = props;
   const { messageId } = message;
 
-  const { thinkingContent, regularContent } = useMemo(() => {
-    const thinkingMatch = text.match(/:::thinking([\s\S]*?):::/);
-    return {
-      thinkingContent: thinkingMatch ? thinkingMatch[1].trim() : '',
-      regularContent: thinkingMatch ? text.replace(/:::thinking[\s\S]*?:::/, '').trim() : text,
-    };
-  }, [text]);
-
+  const { thinkingContent, regularContent } = useMemo(() => parseThinkingContent(text), [text]);
   const showRegularCursor = useMemo(() => isLast && isSubmitting, [isLast, isSubmitting]);
 
   const unfinishedMessage = useMemo(
     () =>
       !isSubmitting && unfinished ? (
         <Suspense>
-          <DelayedRender delay={250}>
+          <DelayedRender delay={UNFINISHED_DELAY}>
             <UnfinishedMessage message={message} />
           </DelayedRender>
         </Suspense>
@@ -146,8 +162,10 @@ const MessageContent = ({
   );
 
   if (error) {
-    return <ErrorMessage message={props.message} text={text} />;
-  } else if (edit) {
+    return <ErrorMessage message={message} text={text} />;
+  }
+
+  if (edit) {
     return <EditMessage text={text} isSubmitting={isSubmitting} {...props} />;
   }