From 17457084189c3745b35d108437664e46de4b0c47 Mon Sep 17 00:00:00 2001
From: Dustin Healy <dustinhealy1@gmail.com>
Date: Thu, 21 Aug 2025 02:37:45 -0700
Subject: [PATCH] refactor: move arrow svgs out to their own component

---
 client/src/components/Chat/CostBar.tsx        | 31 ++------------
 .../Chat/Messages/ui/MessageRender.tsx        | 31 ++------------
 .../src/components/Messages/ContentRender.tsx | 32 ++------------
 packages/client/src/svgs/ArrowIcon.tsx        | 42 +++++++++++++++++++
 packages/client/src/svgs/index.ts             |  1 +
 5 files changed, 52 insertions(+), 85 deletions(-)
 create mode 100644 packages/client/src/svgs/ArrowIcon.tsx

diff --git a/client/src/components/Chat/CostBar.tsx b/client/src/components/Chat/CostBar.tsx
index d450114842..44ea9aaafa 100644
--- a/client/src/components/Chat/CostBar.tsx
+++ b/client/src/components/Chat/CostBar.tsx
@@ -1,3 +1,4 @@
+import { ArrowIcon } from '@librechat/client';
 import type { TConversationCosts } from 'librechat-data-provider';
 import { cn } from '~/utils';
 
@@ -21,20 +22,7 @@ export default function CostBar({ conversationCosts, showCostBar }: CostBarProps
       <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>
+            <ArrowIcon direction="up" />
             {conversationCosts.totals.prompt.tokenCount}t
           </div>
           <div>${Math.abs(conversationCosts.totals.prompt.usd).toFixed(6)}</div>
@@ -45,20 +33,7 @@ export default function CostBar({ conversationCosts, showCostBar }: CostBarProps
         </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>
+            <ArrowIcon direction="down" />
             {conversationCosts.totals.completion.tokenCount}t
           </div>
           <div>${Math.abs(conversationCosts.totals.completion.usd).toFixed(6)}</div>
diff --git a/client/src/components/Chat/Messages/ui/MessageRender.tsx b/client/src/components/Chat/Messages/ui/MessageRender.tsx
index c67b652e30..876675689b 100644
--- a/client/src/components/Chat/Messages/ui/MessageRender.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRender.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, memo } from 'react';
 import { useRecoilValue } from 'recoil';
+import { ArrowIcon } from '@librechat/client';
 import { type TMessage, TConversationCosts } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
 import MessageContent from '~/components/Chat/Messages/Content/MessageContent';
@@ -178,35 +179,9 @@ const MessageRender = memo(
                 {perMessageCost.tokenCount > 0 && (
                   <span>
                     {perMessageCost.tokenType === 'prompt' ? (
-                      <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>
+                      <ArrowIcon direction="up" className="inline" />
                     ) : (
-                      <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>
+                      <ArrowIcon direction="down" className="inline" />
                     )}
                     {perMessageCost.tokenCount}t
                   </span>
diff --git a/client/src/components/Messages/ContentRender.tsx b/client/src/components/Messages/ContentRender.tsx
index 3a5d880a74..045a39da85 100644
--- a/client/src/components/Messages/ContentRender.tsx
+++ b/client/src/components/Messages/ContentRender.tsx
@@ -1,4 +1,5 @@
 import { useRecoilValue } from 'recoil';
+import { ArrowIcon } from '@librechat/client';
 import { useCallback, useMemo, memo } from 'react';
 import type { TMessage, TMessageContentParts, TConversationCosts } from 'librechat-data-provider';
 import type { TMessageProps, TMessageIcon } from '~/common';
@@ -64,7 +65,6 @@ const ContentRender = memo(
     });
     const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
     const fontSize = useRecoilValue(store.fontSize);
-    const convoId = conversation?.conversationId ?? '';
 
     const perMessageCost = useMemo(() => {
       if (!costs || !costs.perMessage || !msg?.messageId) {
@@ -176,35 +176,9 @@ const ContentRender = memo(
                 {perMessageCost.tokenCount > 0 && (
                   <span className="mr-2">
                     {perMessageCost.tokenType === 'prompt' ? (
-                      <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>
+                      <ArrowIcon direction="up" className="inline" />
                     ) : (
-                      <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>
+                      <ArrowIcon direction="down" className="inline" />
                     )}
                     {perMessageCost.tokenCount}t
                   </span>
diff --git a/packages/client/src/svgs/ArrowIcon.tsx b/packages/client/src/svgs/ArrowIcon.tsx
new file mode 100644
index 0000000000..7307065a64
--- /dev/null
+++ b/packages/client/src/svgs/ArrowIcon.tsx
@@ -0,0 +1,42 @@
+interface ArrowIconProps {
+  direction: 'up' | 'down';
+  className?: string;
+}
+
+export default function ArrowIcon({ direction, className = 'inline' }: ArrowIconProps) {
+  if (direction === 'up') {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        fill="currentColor"
+        viewBox="0 0 24 24"
+        className={className}
+      >
+        <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"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <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"
+      />
+    </svg>
+  );
+}
diff --git a/packages/client/src/svgs/index.ts b/packages/client/src/svgs/index.ts
index 13a5a1cc0a..2bec1fac36 100644
--- a/packages/client/src/svgs/index.ts
+++ b/packages/client/src/svgs/index.ts
@@ -1,4 +1,5 @@
 export { default as ArchiveIcon } from './ArchiveIcon';
+export { default as ArrowIcon } from './ArrowIcon';
 export { default as Blocks } from './Blocks';
 export { default as Plugin } from './Plugin';
 export { default as GPTIcon } from './GPTIcon';