🔍 feat: Filter MultiSelect and SelectDropDown (+variants) + CSS fixes for Scrollbar

client/src/components/Chat/Footer.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { useLocalize } from '~/hooks';
 
@@ -53,12 +54,13 @@ export default function Footer() {
     <div className="relative flex items-center justify-center gap-2 px-2 py-2 text-xs text-gray-600 dark:text-gray-300 md:px-[60px]">
       {footerElements.map((contentRender, index) => {
         const isLastElement = index === footerElements.length - 1;
-
         return (
-          <>
+          <React.Fragment key={`footer-element-${index}`}>
             {contentRender}
-            {!isLastElement && <div className="h-2 border-r-[1px] border-gray-300" />}
-          </>
+            {!isLastElement && (
+              <div key={`separator-${index}`} className="h-2 border-r-[1px] border-gray-300" />
+            )}
+          </React.Fragment>
         );
       })}
     </div>

client/src/components/Conversations/Conversations.tsx

@@ -1,20 +1,20 @@
-import { useMemo } from 'react';
+import { useMemo, memo } from 'react';
 import { parseISO, isToday } from 'date-fns';
 import { useLocation } from 'react-router-dom';
 import { TConversation } from 'librechat-data-provider';
 import { groupConversationsByDate } from '~/utils';
 import Conversation from './Conversation';
 import Convo from './Convo';
 
-export default function Conversations({
+const Conversations = ({
   conversations,
   moveToTop,
   toggleNav,
 }: {
   conversations: TConversation[];
   moveToTop: () => void;
   toggleNav: () => void;
-}) {
+}) => {
   const location = useLocation();
   const { pathname } = location;
   const ConvoItem = pathname.includes('chat') ? Conversation : Convo;
@@ -64,4 +64,6 @@ export default function Conversations({
       </div>
     </div>
   );
-}
+};
+
+export default memo(Conversations);

client/src/components/Endpoints/Settings/OpenAI.tsx

@@ -11,16 +11,13 @@ import {
   HoverCardTrigger,
 } from '~/components/ui';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
+import { useLocalize, useDebouncedInput } from '~/hooks';
 import type { TModelSelectProps } from '~/common';
 import OptionHover from './OptionHover';
-import { useLocalize } from '~/hooks';
 import { ESide } from '~/common';
 
 export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
-  if (!conversation) {
-    return null;
-  }
   const {
     endpoint,
     endpointType,
@@ -33,14 +30,43 @@ export default function Settings({ conversation, setOption, models, readonly }:
     presence_penalty: presP,
     resendImages,
     imageDetail,
-  } = conversation;
+  } = conversation ?? {};
+  const [setChatGptLabel, chatGptLabelValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'chatGptLabel',
+    initialValue: chatGptLabel,
+  });
+  const [setPromptPrefix, promptPrefixValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'promptPrefix',
+    initialValue: promptPrefix,
+  });
+  const [setTemperature, temperatureValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'temperature',
+    initialValue: temperature,
+  });
+  const [setTopP, topPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'top_p',
+    initialValue: topP,
+  });
+  const [setFreqP, freqPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'frequency_penalty',
+    initialValue: freqP,
+  });
+  const [setPresP, presPValue] = useDebouncedInput({
+    setOption,
+    optionKey: 'presence_penalty',
+    initialValue: presP,
+  });
+
+  if (!conversation) {
+    return null;
+  }
+
   const setModel = setOption('model');
-  const setChatGptLabel = setOption('chatGptLabel');
-  const setPromptPrefix = setOption('promptPrefix');
-  const setTemperature = setOption('temperature');
-  const setTopP = setOption('top_p');
-  const setFreqP = setOption('frequency_penalty');
-  const setPresP = setOption('presence_penalty');
   const setResendImages = setOption('resendImages');
   const setImageDetail = setOption('imageDetail');
 
@@ -67,8 +93,8 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <Input
             id="chatGptLabel"
             disabled={readonly}
-            value={chatGptLabel || ''}
-            onChange={(e) => setChatGptLabel(e.target.value ?? null)}
+            value={(chatGptLabelValue as string) || ''}
+            onChange={setChatGptLabel}
             placeholder={localize('com_endpoint_openai_custom_name_placeholder')}
             className={cn(
               defaultTextProps,
@@ -86,8 +112,8 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <TextareaAutosize
             id="promptPrefix"
             disabled={readonly}
-            value={promptPrefix || ''}
-            onChange={(e) => setPromptPrefix(e.target.value ?? null)}
+            value={(promptPrefixValue as string) || ''}
+            onChange={setPromptPrefix}
             placeholder={localize('com_endpoint_openai_prompt_prefix_placeholder')}
             className={cn(
               defaultTextProps,
@@ -110,8 +136,8 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="temp-int"
                 disabled={readonly}
-                value={temperature}
-                onChange={(value) => setTemperature(Number(value))}
+                value={temperatureValue as number}
+                onChange={setTemperature}
                 max={2}
                 min={0}
                 step={0.01}
@@ -127,7 +153,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[temperature ?? 1]}
+              value={[(temperatureValue as number) ?? 1]}
               onValueChange={(value) => setTemperature(value[0])}
               doubleClickHandler={() => setTemperature(1)}
               max={2}
@@ -148,7 +174,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="top-p-int"
                 disabled={readonly}
-                value={topP}
+                value={topPValue as number}
                 onChange={(value) => setTopP(Number(value))}
                 max={1}
                 min={0}
@@ -165,7 +191,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[topP ?? 1]}
+              value={[(topPValue as number) ?? 1]}
               onValueChange={(value) => setTopP(value[0])}
               doubleClickHandler={() => setTopP(1)}
               max={1}
@@ -187,7 +213,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="freq-penalty-int"
                 disabled={readonly}
-                value={freqP}
+                value={freqPValue as number}
                 onChange={(value) => setFreqP(Number(value))}
                 max={2}
                 min={-2}
@@ -204,7 +230,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[freqP ?? 0]}
+              value={[(freqPValue as number) ?? 0]}
               onValueChange={(value) => setFreqP(value[0])}
               doubleClickHandler={() => setFreqP(0)}
               max={2}
@@ -226,7 +252,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               <InputNumber
                 id="pres-penalty-int"
                 disabled={readonly}
-                value={presP}
+                value={presPValue as number}
                 onChange={(value) => setPresP(Number(value))}
                 max={2}
                 min={-2}
@@ -243,7 +269,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
             </div>
             <Slider
               disabled={readonly}
-              value={[presP ?? 0]}
+              value={[(presPValue as number) ?? 0]}
               onValueChange={(value) => setPresP(value[0])}
               doubleClickHandler={() => setPresP(0)}
               max={2}

client/src/components/Nav/Nav.tsx

@@ -31,6 +31,14 @@ const Nav = ({ navVisible, setNavVisible }) => {
   const [newUser, setNewUser] = useLocalStorage('newUser', true);
   const [isToggleHovering, setIsToggleHovering] = useState(false);
 
+  const handleMouseEnter = useCallback(() => {
+    setIsHovering(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovering(false);
+  }, []);
+
   useEffect(() => {
     if (isSmallScreen) {
       setNavWidth('320px');
@@ -144,8 +152,8 @@ const Nav = ({ navVisible, setNavVisible }) => {
                         '-mr-2 flex-1 flex-col overflow-y-auto pr-2 transition-opacity duration-500',
                         isHovering ? '' : 'scrollbar-transparent',
                       )}
-                      onMouseEnter={() => setIsHovering(true)}
-                      onMouseLeave={() => setIsHovering(false)}
+                      onMouseEnter={handleMouseEnter}
+                      onMouseLeave={handleMouseLeave}
                       ref={containerRef}
                     >
                       <NewChat

client/src/components/Nav/NewChat.tsx

@@ -1,11 +1,11 @@
+import { useNavigate } from 'react-router-dom';
 import { EModelEndpoint } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
 import { useLocalize, useNewConvo, useLocalStorage } from '~/hooks';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
 import { NewChatIcon } from '~/components/svg';
 import { getEndpointField } from '~/utils';
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
-import { useNavigate } from 'react-router-dom';
 
 export default function NewChat({
   toggleNav,

client/src/components/svg/CheckMark.tsx

@@ -13,7 +13,12 @@ export default function CheckMark({ className = '' }: { className?: string }) {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0633 5.67375C18.5196 5.98487 18.6374 6.607 18.3262 7.06331L10.8262 18.0633C10.6585 18.3093 10.3898 18.4678 10.0934 18.4956C9.79688 18.5234 9.50345 18.4176 9.29289 18.2071L4.79289 13.7071C4.40237 13.3166 4.40237 12.6834 4.79289 12.2929C5.18342 11.9023 5.81658 11.9023 6.20711 12.2929L9.85368 15.9394L16.6738 5.93664C16.9849 5.48033 17.607 5.36263 18.0633 5.67375Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18.0633 5.67375C18.5196 5.98487 18.6374 6.607 18.3262 7.06331L10.8262 18.0633C10.6585 18.3093 10.3898 18.4678 10.0934 18.4956C9.79688 18.5234 9.50345 18.4176 9.29289 18.2071L4.79289 13.7071C4.40237 13.3166 4.40237 12.6834 4.79289 12.2929C5.18342 11.9023 5.81658 11.9023 6.20711 12.2929L9.85368 15.9394L16.6738 5.93664C16.9849 5.48033 17.607 5.36263 18.0633 5.67375Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }

client/src/components/svg/Clipboard.tsx

@@ -13,7 +13,12 @@ export default function Clipboard() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 4C10.8954 4 10 4.89543 10 6H14C14 4.89543 13.1046 4 12 4ZM8.53513 4C9.22675 2.8044 10.5194 2 12 2C13.4806 2 14.7733 2.8044 15.4649 4H17C18.6569 4 20 5.34315 20 7V19C20 20.6569 18.6569 22 17 22H7C5.34315 22 4 20.6569 4 19V7C4 5.34315 5.34315 4 7 4H8.53513ZM8 6H7C6.44772 6 6 6.44772 6 7V19C6 19.5523 6.44772 20 7 20H17C17.5523 20 18 19.5523 18 19V7C18 6.44772 17.5523 6 17 6H16C16 7.10457 15.1046 8 14 8H10C8.89543 8 8 7.10457 8 6Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }

client/src/components/svg/EditIcon.tsx

@@ -13,7 +13,12 @@ export default function EditIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2929 4.29291C15.0641 2.52167 17.9359 2.52167 19.7071 4.2929C21.4783 6.06414 21.4783 8.93588 19.7071 10.7071L18.7073 11.7069L11.1603 19.2539C10.7182 19.696 10.1489 19.989 9.53219 20.0918L4.1644 20.9864C3.84584 21.0395 3.52125 20.9355 3.29289 20.7071C3.06453 20.4788 2.96051 20.1542 3.0136 19.8356L3.90824 14.4678C4.01103 13.8511 4.30396 13.2818 4.7461 12.8397L13.2929 4.29291ZM13 7.41422L6.16031 14.2539C6.01293 14.4013 5.91529 14.591 5.88102 14.7966L5.21655 18.7835L9.20339 18.119C9.40898 18.0847 9.59872 17.9871 9.7461 17.8397L16.5858 11L13 7.41422ZM18 9.5858L14.4142 6.00001L14.7071 5.70712C15.6973 4.71693 17.3027 4.71693 18.2929 5.70712C19.2831 6.69731 19.2831 8.30272 18.2929 9.29291L18 9.5858Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.2929 4.29291C15.0641 2.52167 17.9359 2.52167 19.7071 4.2929C21.4783 6.06414 21.4783 8.93588 19.7071 10.7071L18.7073 11.7069L11.1603 19.2539C10.7182 19.696 10.1489 19.989 9.53219 20.0918L4.1644 20.9864C3.84584 21.0395 3.52125 20.9355 3.29289 20.7071C3.06453 20.4788 2.96051 20.1542 3.0136 19.8356L3.90824 14.4678C4.01103 13.8511 4.30396 13.2818 4.7461 12.8397L13.2929 4.29291ZM13 7.41422L6.16031 14.2539C6.01293 14.4013 5.91529 14.591 5.88102 14.7966L5.21655 18.7835L9.20339 18.119C9.40898 18.0847 9.59872 17.9871 9.7461 17.8397L16.5858 11L13 7.41422ZM18 9.5858L14.4142 6.00001L14.7071 5.70712C15.6973 4.71693 17.3027 4.71693 18.2929 5.70712C19.2831 6.69731 19.2831 8.30272 18.2929 9.29291L18 9.5858Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }

client/src/components/svg/RegenerateIcon.tsx

@@ -13,7 +13,12 @@ export default function RegenerateIcon({ className = '' }: { className?: string
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2.5C5.05228 2.5 5.5 2.94772 5.5 3.5V5.07196C7.19872 3.47759 9.48483 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C7.1307 21.5 3.11828 17.8375 2.565 13.1164C2.50071 12.5679 2.89327 12.0711 3.4418 12.0068C3.99033 11.9425 4.48712 12.3351 4.5514 12.8836C4.98798 16.6089 8.15708 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C9.7796 4.5 7.7836 5.46469 6.40954 7H9C9.55228 7 10 7.44772 10 8C10 8.55228 9.55228 9 9 9H4.5C3.96064 9 3.52101 8.57299 3.50073 8.03859C3.49983 8.01771 3.49958 7.99677 3.5 7.9758V3.5C3.5 2.94772 3.94771 2.5 4.5 2.5Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5 2.5C5.05228 2.5 5.5 2.94772 5.5 3.5V5.07196C7.19872 3.47759 9.48483 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C7.1307 21.5 3.11828 17.8375 2.565 13.1164C2.50071 12.5679 2.89327 12.0711 3.4418 12.0068C3.99033 11.9425 4.48712 12.3351 4.5514 12.8836C4.98798 16.6089 8.15708 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C9.7796 4.5 7.7836 5.46469 6.40954 7H9C9.55228 7 10 7.44772 10 8C10 8.55228 9.55228 9 9 9H4.5C3.96064 9 3.52101 8.57299 3.50073 8.03859C3.49983 8.01771 3.49958 7.99677 3.5 7.9758V3.5C3.5 2.94772 3.94771 2.5 4.5 2.5Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }

client/src/components/svg/RenameIcon.tsx

@@ -11,7 +11,12 @@ export default function RenameIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2929 4.29291C15.0641 2.52167 17.9359 2.52167 19.7071 4.2929C21.4783 6.06414 21.4783 8.93588 19.7071 10.7071L18.7073 11.7069L11.1603 19.2539C10.7182 19.696 10.1489 19.989 9.53219 20.0918L4.1644 20.9864C3.84584 21.0395 3.52125 20.9355 3.29289 20.7071C3.06453 20.4788 2.96051 20.1542 3.0136 19.8356L3.90824 14.4678C4.01103 13.8511 4.30396 13.2818 4.7461 12.8397L13.2929 4.29291ZM13 7.41422L6.16031 14.2539C6.01293 14.4013 5.91529 14.591 5.88102 14.7966L5.21655 18.7835L9.20339 18.119C9.40898 18.0847 9.59872 17.9871 9.7461 17.8397L16.5858 11L13 7.41422ZM18 9.5858L14.4142 6.00001L14.7071 5.70712C15.6973 4.71693 17.3027 4.71693 18.2929 5.70712C19.2831 6.69731 19.2831 8.30272 18.2929 9.29291L18 9.5858Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.2929 4.29291C15.0641 2.52167 17.9359 2.52167 19.7071 4.2929C21.4783 6.06414 21.4783 8.93588 19.7071 10.7071L18.7073 11.7069L11.1603 19.2539C10.7182 19.696 10.1489 19.989 9.53219 20.0918L4.1644 20.9864C3.84584 21.0395 3.52125 20.9355 3.29289 20.7071C3.06453 20.4788 2.96051 20.1542 3.0136 19.8356L3.90824 14.4678C4.01103 13.8511 4.30396 13.2818 4.7461 12.8397L13.2929 4.29291ZM13 7.41422L6.16031 14.2539C6.01293 14.4013 5.91529 14.591 5.88102 14.7966L5.21655 18.7835L9.20339 18.119C9.40898 18.0847 9.59872 17.9871 9.7461 17.8397L16.5858 11L13 7.41422ZM18 9.5858L14.4142 6.00001L14.7071 5.70712C15.6973 4.71693 17.3027 4.71693 18.2929 5.70712C19.2831 6.69731 19.2831 8.30272 18.2929 9.29291L18 9.5858Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }

client/src/components/svg/TrashIcon.tsx

@@ -11,7 +11,12 @@ export default function TrashIcon() {
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5555 4C10.099 4 9.70052 4.30906 9.58693 4.75114L9.29382 5.8919H14.715L14.4219 4.75114C14.3083 4.30906 13.9098 4 13.4533 4H10.5555ZM16.7799 5.8919L16.3589 4.25342C16.0182 2.92719 14.8226 2 13.4533 2H10.5555C9.18616 2 7.99062 2.92719 7.64985 4.25342L7.22886 5.8919H4C3.44772 5.8919 3 6.33961 3 6.8919C3 7.44418 3.44772 7.8919 4 7.8919H4.10069L5.31544 19.3172C5.47763 20.8427 6.76455 22 8.29863 22H15.7014C17.2354 22 18.5224 20.8427 18.6846 19.3172L19.8993 7.8919H20C20.5523 7.8919 21 7.44418 21 6.8919C21 6.33961 20.5523 5.8919 20 5.8919H16.7799ZM17.888 7.8919H6.11196L7.30423 19.1057C7.3583 19.6142 7.78727 20 8.29863 20H15.7014C16.2127 20 16.6417 19.6142 16.6958 19.1057L17.888 7.8919ZM10 10C10.5523 10 11 10.4477 11 11V16C11 16.5523 10.5523 17 10 17C9.44772 17 9 16.5523 9 16V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V16C15 16.5523 14.5523 17 14 17C13.4477 17 13 16.5523 13 16V11C13 10.4477 13.4477 10 14 10Z" fill="currentColor">
-    </path></svg>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.5555 4C10.099 4 9.70052 4.30906 9.58693 4.75114L9.29382 5.8919H14.715L14.4219 4.75114C14.3083 4.30906 13.9098 4 13.4533 4H10.5555ZM16.7799 5.8919L16.3589 4.25342C16.0182 2.92719 14.8226 2 13.4533 2H10.5555C9.18616 2 7.99062 2.92719 7.64985 4.25342L7.22886 5.8919H4C3.44772 5.8919 3 6.33961 3 6.8919C3 7.44418 3.44772 7.8919 4 7.8919H4.10069L5.31544 19.3172C5.47763 20.8427 6.76455 22 8.29863 22H15.7014C17.2354 22 18.5224 20.8427 18.6846 19.3172L19.8993 7.8919H20C20.5523 7.8919 21 7.44418 21 6.8919C21 6.33961 20.5523 5.8919 20 5.8919H16.7799ZM17.888 7.8919H6.11196L7.30423 19.1057C7.3583 19.6142 7.78727 20 8.29863 20H15.7014C16.2127 20 16.6417 19.6142 16.6958 19.1057L17.888 7.8919ZM10 10C10.5523 10 11 10.4477 11 11V16C11 16.5523 10.5523 17 10 17C9.44772 17 9 16.5523 9 16V11C9 10.4477 9.44772 10 10 10ZM14 10C14.5523 10 15 10.4477 15 11V16C15 16.5523 14.5523 17 14 17C13.4477 17 13 16.5523 13 16V11C13 10.4477 13.4477 10 14 10Z"
+        fill="currentColor"
+      ></path>
+    </svg>
   );
 }