diff --git a/client/src/components/Banners/Banner.tsx b/client/src/components/Banners/Banner.tsx
index 20b2f8c270..b10fa70941 100644
--- a/client/src/components/Banners/Banner.tsx
+++ b/client/src/components/Banners/Banner.tsx
@@ -38,10 +38,13 @@ export const Banner = ({ onHeightChange }: { onHeightChange?: (height: number) =
return (
{!banner.persistable && (
diff --git a/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx b/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx
index 29f2e7187a..b08619e4c8 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx
@@ -2,7 +2,7 @@ import { memo, useMemo, useState, useCallback } from 'react';
import { useAtom } from 'jotai';
import type { MouseEvent } from 'react';
import { ContentTypes } from 'librechat-data-provider';
-import { ThinkingContent, ThinkingButton } from './Thinking';
+import { ThinkingContent, ThinkingButton, ThinkingFooter } from './Thinking';
import { showThinkingAtom } from '~/store/showThinking';
import { useMessageContext } from '~/Providers';
import { useLocalize } from '~/hooks';
@@ -69,7 +69,7 @@ const Reasoning = memo(({ reasoning, isLast }: ReasoningProps) => {
return (
-
diff --git a/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx b/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
index 71dbcd6af0..b26997171e 100644
--- a/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/Thinking.tsx
@@ -1,7 +1,7 @@
import { useState, useMemo, memo, useCallback } from 'react';
import { useAtomValue } from 'jotai';
-import { Lightbulb, ChevronDown } from 'lucide-react';
import { Clipboard, CheckMark } from '@librechat/client';
+import { Lightbulb, ChevronDown, ChevronUp } from 'lucide-react';
import type { MouseEvent, FC } from 'react';
import { showThinkingAtom } from '~/store/showThinking';
import { fontSizeAtom } from '~/store/fontSize';
@@ -90,13 +90,13 @@ export const ThinkingButton = memo(
)}
@@ -112,6 +121,34 @@ export const ThinkingButton = memo(
},
);
+/**
+ * ThinkingFooter - Footer with collapse button shown at the bottom of expanded content
+ * Allows users to collapse without scrolling back to the top
+ */
+export const ThinkingFooter = memo(
+ ({ onClick }: { onClick: (e: MouseEvent
) => void }) => {
+ const localize = useLocalize();
+
+ return (
+
+
+
+ );
+ },
+);
+
/**
* Thinking Component (LEGACY SYSTEM)
*
@@ -153,7 +190,7 @@ const Thinking: React.ElementType = memo(({ children }: { children: React.ReactN
return (
-
@@ -177,6 +215,7 @@ const Thinking: React.ElementType = memo(({ children }: { children: React.ReactN
ThinkingButton.displayName = 'ThinkingButton';
ThinkingContent.displayName = 'ThinkingContent';
+ThinkingFooter.displayName = 'ThinkingFooter';
Thinking.displayName = 'Thinking';
export default memo(Thinking);
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 1361da7189..e833988d68 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -798,6 +798,7 @@
"com_ui_close_window": "Close Window",
"com_ui_code": "Code",
"com_ui_collapse": "Collapse",
+ "com_ui_collapse_thoughts": "Collapse Thoughts",
"com_ui_collapse_chat": "Collapse Chat",
"com_ui_command_placeholder": "Optional: Enter a command for the prompt or name will be used",
"com_ui_command_usage_placeholder": "Select a Prompt by command or name",