refactor(client): Refactors recent typescript changes for best practices (#763)

* create common types in client

* remove unnecessary rules from eslint config

* cleanup types

* put back eslintrc rules

client/src/components/Conversations/Pages.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { PagesProps } from 'librechat-data-provider';
+
+type TPagesProps = {
+  pages: number;
+  pageNumber: number;
+  setPageNumber: (pageNumber: number) => void;
+  nextPage: () => Promise<void>;
+  previousPage: () => Promise<void>;
+};
 
 export default function Pages({
   pageNumber,
@@ -7,7 +14,7 @@ export default function Pages({
   nextPage,
   previousPage,
   setPageNumber,
-}: PagesProps) {
+}: TPagesProps) {
   const clickHandler =
     (func: () => Promise<void>) => async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();

client/src/components/Endpoints/EndpointOptionsDialog.tsx

@@ -1,7 +1,8 @@
 import exportFromJSON from 'export-from-json';
 import { useEffect, useState } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
-import { EditPresetProps, SetOption, tPresetSchema } from 'librechat-data-provider';
+import { tPresetSchema } from 'librechat-data-provider';
+import type { TSetOption, TEditPresetProps } from '~/common';
 import { Dialog, DialogButton } from '~/components/ui';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import SaveAsPresetDialog from './SaveAsPresetDialog';
@@ -12,13 +13,18 @@ import { useLocalize } from '~/hooks';
 import store from '~/store';
 
 // A preset dialog to show readonly preset values.
-const EndpointOptionsDialog = ({ open, onOpenChange, preset: _preset, title }: EditPresetProps) => {
+const EndpointOptionsDialog = ({
+  open,
+  onOpenChange,
+  preset: _preset,
+  title,
+}: TEditPresetProps) => {
   const [preset, setPreset] = useRecoilState(store.preset);
   const [saveAsDialogShow, setSaveAsDialogShow] = useState(false);
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const localize = useLocalize();
 
-  const setOption: SetOption = (param) => (newValue) => {
+  const setOption: TSetOption = (param) => (newValue) => {
     const update = {};
     update[param] = newValue;
     setPreset((prevState) =>

client/src/components/Endpoints/EndpointOptionsPopover.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
 import { Save } from 'lucide-react';
-import { EndpointOptionsPopoverProps } from 'librechat-data-provider';
+import { EModelEndpoint } from 'librechat-data-provider';
 import { Button } from '~/components/ui';
 import { CrossIcon } from '~/components/svg';
 import PopoverButtons from './PopoverButtons';
 import { cn, removeFocusOutlines } from '~/utils';
 import { useLocalize } from '~/hooks';
 
+type TEndpointOptionsPopoverProps = {
+  children: React.ReactNode;
+  visible: boolean;
+  endpoint: EModelEndpoint;
+  saveAsPreset: () => void;
+  closePopover: () => void;
+};
+
 export default function EndpointOptionsPopover({
   children,
   endpoint,
   visible,
   saveAsPreset,
   closePopover,
-}: EndpointOptionsPopoverProps) {
+}: TEndpointOptionsPopoverProps) {
   const localize = useLocalize();
   const cardStyle =
     'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';

client/src/components/Endpoints/EndpointSettings.tsx

@@ -1,18 +1,18 @@
 import { useRecoilValue } from 'recoil';
 import { OpenAISettings, BingAISettings, AnthropicSettings } from './Settings';
 import { GoogleSettings, PluginsSettings } from './Settings/MultiView';
-import { SettingsProps, OptionComponent, MultiViewComponent } from 'librechat-data-provider';
+import type { TSettingsProps, TModelSelectProps, TBaseSettingsProps, TModels } from '~/common';
 import { cn } from '~/utils';
 import store from '~/store';
 
-const optionComponents: { [key: string]: OptionComponent } = {
+const optionComponents: { [key: string]: React.FC<TModelSelectProps> } = {
   openAI: OpenAISettings,
   azureOpenAI: OpenAISettings,
   bingAI: BingAISettings,
   anthropic: AnthropicSettings,
 };
 
-const multiViewComponents: { [key: string]: MultiViewComponent } = {
+const multiViewComponents: { [key: string]: React.FC<TBaseSettingsProps & TModels> } = {
   google: GoogleSettings,
   gptPlugins: PluginsSettings,
 };
@@ -22,7 +22,7 @@ export default function Settings({
   setOption,
   isPreset = false,
   className = '',
-}: SettingsProps) {
+}: TSettingsProps) {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   if (!conversation?.endpoint) {
     return null;

client/src/components/Endpoints/PopoverButtons.tsx

@@ -1,10 +1,17 @@
-import { EModelEndpoint, PopoverButton } from 'librechat-data-provider';
+import { EModelEndpoint } from 'librechat-data-provider';
 import { MessagesSquared, GPTIcon } from '~/components/svg';
 import { useRecoilState } from 'recoil';
 import { Button } from '~/components';
 import { cn } from '~/utils/';
 import store from '~/store';
 
+type TPopoverButton = {
+  label: string;
+  buttonClass: string;
+  handler: () => void;
+  icon: React.ReactNode;
+};
+
 export default function PopoverButtons({
   endpoint,
   buttonClass,
@@ -20,7 +27,7 @@ export default function PopoverButtons({
   const triggerExamples = () =>
     setOptionSettings((prev) => ({ ...prev, showExamples: !prev.showExamples }));
 
-  const buttons: { [key: string]: PopoverButton[] } = {
+  const buttons: { [key: string]: TPopoverButton[] } = {
     google: [
       {
         label: (showExamples ? 'Hide' : 'Show') + ' Examples',

client/src/components/Endpoints/SaveAsPresetDialog.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useCreatePresetMutation, EditPresetProps } from 'librechat-data-provider';
+import { useCreatePresetMutation } from 'librechat-data-provider';
+import type { TEditPresetProps } from '~/common';
 import { Dialog, Input, Label } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { cn, defaultTextPropsLabel, removeFocusOutlines, cleanupPreset } from '~/utils/';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
 
-const SaveAsPresetDialog = ({ open, onOpenChange, preset }: EditPresetProps) => {
-  const [title, setTitle] = useState(preset?.title || 'My Preset');
+const SaveAsPresetDialog = ({ open, onOpenChange, preset }: TEditPresetProps) => {
+  const [title, setTitle] = useState<string>(preset?.title || 'My Preset');
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   const createPresetMutation = useCreatePresetMutation();
   const localize = useLocalize();

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

@@ -1,4 +1,5 @@
-import { ModelSelectProps, Side } from 'librechat-data-provider';
+import { TModelSelectProps } from '~/common';
+import type { ESide } from '~/common';
 import {
   Switch,
   SelectDropDown,
@@ -12,7 +13,7 @@ import OptionHover from './OptionHover';
 import { cn, optionText, defaultTextProps, removeFocusOutlines } from '~/utils/';
 import { useLocalize } from '~/hooks';
 
-export default function Settings({ conversation, setOption, models, readonly }: ModelSelectProps) {
+export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
   if (!conversation) {
     return null;
@@ -83,7 +84,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={Side.Left} />
+          <OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <div className="grid w-full grid-cols-2 items-center gap-10">
           <HoverCard openDelay={500}>
@@ -102,7 +103,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                 className="ml-4 mt-2"
               />
             </HoverCardTrigger>
-            <OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={Side.Bottom} />
+            <OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={ESide.Bottom} />
           </HoverCard>
           <HoverCard openDelay={500}>
             <HoverCardTrigger className="ml-[-60px] w-[100px]">
@@ -120,7 +121,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                 className="ml-4 mt-2"
               />
             </HoverCardTrigger>
-            <OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={Side.Bottom} />
+            <OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={ESide.Bottom} />
           </HoverCard>
         </div>
         {/* <HoverCard openDelay={300}>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ModelSelectProps, Side } from 'librechat-data-provider';
+import { ESide, TModelSelectProps } from '~/common';
 import {
   Input,
   Label,
@@ -13,7 +13,7 @@ import {
 import OptionHover from './OptionHover';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
 
-export default function Settings({ conversation, setOption, models, readonly }: ModelSelectProps) {
+export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   if (!conversation) {
     return null;
   }
@@ -111,7 +111,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -148,7 +148,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -186,7 +186,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -226,7 +226,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <OptionHover
             endpoint={conversation?.endpoint ?? ''}
             type="maxoutputtokens"
-            side={Side.Left}
+            side={ESide.Left}
           />
         </HoverCard>
       </div>

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

@@ -1,15 +1,12 @@
 import { useEffect, useState } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import {
-  useUpdateTokenCountMutation,
-  TUpdateTokenCountResponse,
-  SettingsProps,
-} from 'librechat-data-provider';
+import { useUpdateTokenCountMutation, TUpdateTokenCountResponse } from 'librechat-data-provider';
+import type { TSettingsProps } from '~/common';
 import { Label, Checkbox, SelectDropDown } from '~/components/ui';
 import { cn, defaultTextProps, removeFocusOutlines } from '~/utils/';
 import { useLocalize, useDebounce } from '~/hooks';
 
-export default function Settings({ conversation, setOption, readonly }: SettingsProps) {
+export default function Settings({ conversation, setOption, readonly }: TSettingsProps) {
   const localize = useLocalize();
   const [tokenCount, setTokenCount] = useState(0);
   const debouncedContext = useDebounce(conversation?.context?.trim() ?? '', 250);

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

@@ -1,12 +1,22 @@
 import React from 'react';
 import { Plus, Minus } from 'lucide-react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ExamplesProps } from 'librechat-data-provider';
+import type { TExample } from 'librechat-data-provider';
+import type { TSetExample } from '~/common';
 import { Button, Label } from '~/components/ui';
 import { cn, defaultTextProps } from '~/utils/';
 import { useLocalize } from '~/hooks';
 
-function Examples({ readonly, examples, setExample, addExample, removeExample }: ExamplesProps) {
+type TExamplesProps = {
+  readonly?: boolean;
+  className?: string;
+  examples: TExample[];
+  setExample: TSetExample;
+  addExample: () => void;
+  removeExample: () => void;
+};
+
+function Examples({ readonly, examples, setExample, addExample, removeExample }: TExamplesProps) {
   const localize = useLocalize();
   return (
     <>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ModelSelectProps, Side } from 'librechat-data-provider';
+import { ESide, TModelSelectProps } from '~/common';
 import {
   SelectDropDown,
   Input,
@@ -14,7 +14,7 @@ import OptionHover from './OptionHover';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
 import { useLocalize } from '~/hooks';
 
-export default function Settings({ conversation, setOption, models, readonly }: ModelSelectProps) {
+export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
   if (!conversation) {
     return null;
@@ -122,7 +122,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         {!codeChat && (
           <>
@@ -164,7 +164,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   className="flex h-4 w-full"
                 />
               </HoverCardTrigger>
-              <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={Side.Left} />
+              <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
             </HoverCard>
 
             <HoverCard openDelay={300}>
@@ -205,7 +205,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
                   className="flex h-4 w-full"
                 />
               </HoverCardTrigger>
-              <OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={Side.Left} />
+              <OptionHover endpoint={conversation?.endpoint ?? ''} type="topk" side={ESide.Left} />
             </HoverCard>
           </>
         )}
@@ -250,7 +250,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
           <OptionHover
             endpoint={conversation?.endpoint ?? ''}
             type="maxoutputtokens"
-            side={Side.Left}
+            side={ESide.Left}
           />
         </HoverCard>
       </div>

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

@@ -1,5 +1,5 @@
 import TextareaAutosize from 'react-textarea-autosize';
-import { ModelSelectProps, Side } from 'librechat-data-provider';
+import { ESide, TModelSelectProps } from '~/common';
 import {
   SelectDropDown,
   Input,
@@ -13,7 +13,7 @@ import OptionHover from './OptionHover';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
 import { useLocalize } from '~/hooks';
 
-export default function Settings({ conversation, setOption, models, readonly }: ModelSelectProps) {
+export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
   if (!conversation) {
     return null;
@@ -130,7 +130,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -168,7 +168,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -207,7 +207,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -246,7 +246,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={ESide.Left} />
         </HoverCard>
       </div>
     </div>

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

@@ -1,8 +1,14 @@
 import React from 'react';
 import { HoverCardPortal, HoverCardContent } from '~/components/ui';
-import { OptionHoverProps } from 'librechat-data-provider';
+import type { ESide } from '~/common';
 import { useLocalize } from '~/hooks';
 
+type TOptionHoverProps = {
+  endpoint: string;
+  type: string;
+  side: ESide;
+};
+
 const openAI = {
   max: 'com_endpoint_openai_max',
   temp: 'com_endpoint_openai_temp',
@@ -33,7 +39,7 @@ const types = {
   },
 };
 
-function OptionHover({ endpoint, type, side }: OptionHoverProps) {
+function OptionHover({ endpoint, type, side }: TOptionHoverProps) {
   const localize = useLocalize();
   const text = types?.[endpoint]?.[type];
   if (!text) {

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

@@ -9,11 +9,11 @@ import {
   HoverCardTrigger,
 } from '~/components';
 import OptionHover from './OptionHover';
-import { ModelSelectProps, Side } from 'librechat-data-provider';
+import { ESide, TModelSelectProps } from '~/common';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils/';
 import { useLocalize } from '~/hooks';
 
-export default function Settings({ conversation, setOption, models, readonly }: ModelSelectProps) {
+export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
   if (!conversation) {
     return null;
@@ -144,7 +144,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="temp" side={ESide.Left} />
         </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
@@ -184,7 +184,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="topp" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -225,7 +225,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="freq" side={ESide.Left} />
         </HoverCard>
 
         <HoverCard openDelay={300}>
@@ -266,7 +266,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
               className="flex h-4 w-full"
             />
           </HoverCardTrigger>
-          <OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={Side.Left} />
+          <OptionHover endpoint={conversation?.endpoint ?? ''} type="pres" side={ESide.Left} />
         </HoverCard>
       </div>
     </div>

client/src/components/Input/ModelSelect/Anthropic.tsx

@@ -1,8 +1,8 @@
 import { SelectDropDown } from '~/components/ui';
 import { cn, cardStyle } from '~/utils/';
-import { ModelSelectProps } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 
-export default function Anthropic({ conversation, setOption, models }: ModelSelectProps) {
+export default function Anthropic({ conversation, setOption, models }: TModelSelectProps) {
   return (
     <SelectDropDown
       value={conversation?.model ?? ''}

client/src/components/Input/ModelSelect/BingAI.tsx

@@ -1,10 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import { SelectDropDown, Tabs, TabsList, TabsTrigger } from '~/components/ui';
 import { cn, cardStyle } from '~/utils/';
-import { ModelSelectProps } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 import store from '~/store';
 
-export default function BingAI({ conversation, setOption, models }: ModelSelectProps) {
+export default function BingAI({ conversation, setOption, models }: TModelSelectProps) {
   const showBingToneSetting = useRecoilValue(store.showBingToneSetting);
   if (!conversation) {
     return null;

client/src/components/Input/ModelSelect/ChatGPT.tsx

@@ -1,8 +1,8 @@
 import { SelectDropDown } from '~/components/ui';
 import { cn, cardStyle } from '~/utils/';
-import { ModelSelectProps } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 
-export default function ChatGPT({ conversation, setOption, models }: ModelSelectProps) {
+export default function ChatGPT({ conversation, setOption, models }: TModelSelectProps) {
   if (!conversation) {
     return null;
   }

client/src/components/Input/ModelSelect/Google.tsx

@@ -1,8 +1,8 @@
 import { SelectDropDown } from '~/components/ui';
 import { cn, cardStyle } from '~/utils/';
-import { ModelSelectProps } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 
-export default function Google({ conversation, setOption, models }: ModelSelectProps) {
+export default function Google({ conversation, setOption, models }: TModelSelectProps) {
   return (
     <SelectDropDown
       value={conversation?.model ?? ''}

client/src/components/Input/ModelSelect/ModelSelect.tsx

@@ -6,12 +6,22 @@ import Plugins from './Plugins';
 import ChatGPT from './ChatGPT';
 import Anthropic from './Anthropic';
 import { useRecoilValue } from 'recoil';
-import { SelectProps, ModelSelectProps } from 'librechat-data-provider';
+import type { TConversation } from 'librechat-data-provider';
+import type { TSetOption, TModelSelectProps } from '~/common';
 import store from '~/store';
 
-type OptionComponentType = React.FC<ModelSelectProps>;
+type TGoogleProps = {
+  showExamples: boolean;
+  isCodeChat: boolean;
+};
 
-const optionComponents: { [key: string]: OptionComponentType } = {
+type TSelectProps = {
+  conversation: TConversation | null;
+  setOption: TSetOption;
+  extraProps?: TGoogleProps;
+};
+
+const optionComponents: { [key: string]: React.FC<TModelSelectProps> } = {
   openAI: OpenAI,
   azureOpenAI: OpenAI,
   bingAI: BingAI,
@@ -21,7 +31,7 @@ const optionComponents: { [key: string]: OptionComponentType } = {
   chatGPTBrowser: ChatGPT,
 };
 
-export default function ModelSelect({ conversation, setOption }: SelectProps) {
+export default function ModelSelect({ conversation, setOption }: TSelectProps) {
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
   if (!conversation?.endpoint) {
     return null;

client/src/components/Input/ModelSelect/OpenAI.tsx

@@ -1,8 +1,8 @@
 import { SelectDropDown } from '~/components/ui';
 import { cn, cardStyle } from '~/utils/';
-import { ModelSelectProps } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 
-export default function OpenAI({ conversation, setOption, models }: ModelSelectProps) {
+export default function OpenAI({ conversation, setOption, models }: TModelSelectProps) {
   return (
     <SelectDropDown
       value={conversation?.model ?? ''}

client/src/components/Input/ModelSelect/Plugins.tsx

@@ -1,7 +1,8 @@
 import { useRecoilState } from 'recoil';
 import { useState, useEffect } from 'react';
 import { ChevronDownIcon } from 'lucide-react';
-import { ModelSelectProps, useAvailablePluginsQuery, TPlugin } from 'librechat-data-provider';
+import { useAvailablePluginsQuery, TPlugin } from 'librechat-data-provider';
+import type { TModelSelectProps } from '~/common';
 import { SelectDropDown, MultiSelectDropDown, Button } from '~/components/ui';
 import { useSetOptions, useAuthContext, useMediaQuery } from '~/hooks';
 import { cn, cardStyle } from '~/utils/';
@@ -17,7 +18,7 @@ const pluginStore: TPlugin = {
   authenticated: false,
 };
 
-export default function Plugins({ conversation, setOption, models }: ModelSelectProps) {
+export default function Plugins({ conversation, setOption, models }: TModelSelectProps) {
   const { data: allPlugins } = useAvailablePluginsQuery();
   const [visible, setVisibility] = useState<boolean>(true);
   const [availableTools, setAvailableTools] = useRecoilState(store.availableTools);

client/src/components/ui/MultiSelectDropDown.tsx

@@ -3,8 +3,22 @@ import { Listbox, Transition } from '@headlessui/react';
 import { Wrench, ArrowRight } from 'lucide-react';
 import { CheckMark } from '~/components/svg';
 import useOnClickOutside from '~/hooks/useOnClickOutside';
-import { MultiSelectDropDownProps } from 'librechat-data-provider';
 import { cn } from '~/utils/';
+import type { TPlugin } from 'librechat-data-provider';
+
+export type TMultiSelectDropDownProps = {
+  title?: string;
+  value: Array<{ icon?: string; name?: string; isButton?: boolean }>;
+  disabled?: boolean;
+  setSelected: (option: string) => void;
+  availableValues: TPlugin[];
+  showAbove?: boolean;
+  showLabel?: boolean;
+  containerClassName?: string;
+  isSelected: (value: string) => boolean;
+  className?: string;
+  optionValueKey?: string;
+};
 
 function MultiSelectDropDown({
   title = 'Plugins',
@@ -18,7 +32,7 @@ function MultiSelectDropDown({
   isSelected,
   className,
   optionValueKey = 'value',
-}: MultiSelectDropDownProps) {
+}: TMultiSelectDropDownProps) {
   const [isOpen, setIsOpen] = useState(false);
   const menuRef = useRef(null);
   const excludeIds = ['select-plugin', 'plugins-label', 'selected-plugins'];