From 14aedac1e11ab6d47d5a151190400261cac0a2ab Mon Sep 17 00:00:00 2001
From: Dustin Healy <dustinhealy1@gmail.com>
Date: Thu, 21 Aug 2025 02:25:43 -0700
Subject: [PATCH] refactor: move CostBar into its own component

---
 client/src/components/Chat/ChatView.tsx | 55 +-------------------
 client/src/components/Chat/CostBar.tsx  | 69 +++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 53 deletions(-)
 create mode 100644 client/src/components/Chat/CostBar.tsx

diff --git a/client/src/components/Chat/ChatView.tsx b/client/src/components/Chat/ChatView.tsx
index b6fbaea530..4e9950b676 100644
--- a/client/src/components/Chat/ChatView.tsx
+++ b/client/src/components/Chat/ChatView.tsx
@@ -13,6 +13,7 @@ import ConversationStarters from './Input/ConversationStarters';
 import MessagesView from './Messages/MessagesView';
 import Presentation from './Presentation';
 import ChatForm from './Input/ChatForm';
+import CostBar from './CostBar';
 import Landing from './Landing';
 import Header from './Header';
 import Footer from './Footer';
@@ -116,59 +117,7 @@ function ChatView({ index = 0 }: { index?: number }) {
           !isLandingPage &&
           conversationCosts &&
           conversationCosts.totals && (
-            <div
-              className={cn(
-                'mx-auto w-full max-w-md px-4 text-xs text-muted-foreground transition-all duration-300 ease-in-out',
-                showCostBar ? 'opacity-100' : 'opacity-0',
-              )}
-            >
-              <div className="grid grid-cols-3 gap-2 text-center">
-                <div>
-                  <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="1em"
-                      height="1em"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      className="inline"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
-                        clipRule="evenodd"
-                      ></path>
-                    </svg>
-                    {conversationCosts.totals.prompt.tokenCount}t
-                  </div>
-                  <div>${Math.abs(conversationCosts.totals.prompt.usd).toFixed(6)}</div>
-                </div>
-                <div>
-                  <div>{conversationCosts.totals.total.tokenCount}t</div>
-                  <div>${Math.abs(conversationCosts.totals.total.usd).toFixed(6)}</div>
-                </div>
-                <div>
-                  <div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="1em"
-                      height="1em"
-                      fill="currentColor"
-                      viewBox="0 0 24 24"
-                      className="inline"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
-                        clipRule="evenodd"
-                      ></path>
-                    </svg>
-                    {conversationCosts.totals.completion.tokenCount}t
-                  </div>
-                  <div>${Math.abs(conversationCosts.totals.completion.usd).toFixed(6)}</div>
-                </div>
-              </div>
-            </div>
+            <CostBar conversationCosts={conversationCosts} showCostBar={showCostBar} />
           )
         }
         costs={conversationCosts}
diff --git a/client/src/components/Chat/CostBar.tsx b/client/src/components/Chat/CostBar.tsx
new file mode 100644
index 0000000000..d450114842
--- /dev/null
+++ b/client/src/components/Chat/CostBar.tsx
@@ -0,0 +1,69 @@
+import type { TConversationCosts } from 'librechat-data-provider';
+import { cn } from '~/utils';
+
+interface CostBarProps {
+  conversationCosts: TConversationCosts;
+  showCostBar: boolean;
+}
+
+export default function CostBar({ conversationCosts, showCostBar }: CostBarProps) {
+  if (!conversationCosts || !conversationCosts.totals) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'mx-auto w-full max-w-md px-4 text-xs text-muted-foreground transition-all duration-300 ease-in-out',
+        showCostBar ? 'opacity-100' : 'opacity-0',
+      )}
+    >
+      <div className="grid grid-cols-3 gap-2 text-center">
+        <div>
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="inline"
+            >
+              <path
+                fillRule="evenodd"
+                d="M11.293 5.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L13 8.414V18a1 1 0 1 1-2 0V8.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l5-5Z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            {conversationCosts.totals.prompt.tokenCount}t
+          </div>
+          <div>${Math.abs(conversationCosts.totals.prompt.usd).toFixed(6)}</div>
+        </div>
+        <div>
+          <div>{conversationCosts.totals.total.tokenCount}t</div>
+          <div>${Math.abs(conversationCosts.totals.total.usd).toFixed(6)}</div>
+        </div>
+        <div>
+          <div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              className="inline"
+            >
+              <path
+                fillRule="evenodd"
+                d="M12.707 18.707a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L11 15.586V6a1 1 0 1 1 2 0v9.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-5 5Z"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            {conversationCosts.totals.completion.tokenCount}t
+          </div>
+          <div>${Math.abs(conversationCosts.totals.completion.usd).toFixed(6)}</div>
+        </div>
+      </div>
+    </div>
+  );
+}