From 96d29f73902b5ac01f0d2eb4ac7821a238ad811e Mon Sep 17 00:00:00 2001 From: Dan Orlando Date: Sat, 5 Aug 2023 13:45:26 -0700 Subject: [PATCH] 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 --- .eslintrc.js | 2 +- client/src/common/index.ts | 1 + client/src/common/types.ts | 50 ++++++ client/src/components/Conversations/Pages.tsx | 11 +- .../Endpoints/EndpointOptionsDialog.tsx | 12 +- .../Endpoints/EndpointOptionsPopover.tsx | 12 +- .../components/Endpoints/EndpointSettings.tsx | 8 +- .../components/Endpoints/PopoverButtons.tsx | 11 +- .../Endpoints/SaveAsPresetDialog.tsx | 7 +- .../Endpoints/Settings/AgentSettings.tsx | 11 +- .../Endpoints/Settings/Anthropic.tsx | 12 +- .../components/Endpoints/Settings/BingAI.tsx | 9 +- .../Endpoints/Settings/Examples.tsx | 14 +- .../components/Endpoints/Settings/Google.tsx | 12 +- .../components/Endpoints/Settings/OpenAI.tsx | 12 +- .../Endpoints/Settings/OptionHover.tsx | 10 +- .../components/Endpoints/Settings/Plugins.tsx | 12 +- .../Input/ModelSelect/Anthropic.tsx | 4 +- .../components/Input/ModelSelect/BingAI.tsx | 4 +- .../components/Input/ModelSelect/ChatGPT.tsx | 4 +- .../components/Input/ModelSelect/Google.tsx | 4 +- .../Input/ModelSelect/ModelSelect.tsx | 18 +- .../components/Input/ModelSelect/OpenAI.tsx | 4 +- .../components/Input/ModelSelect/Plugins.tsx | 5 +- .../src/components/ui/MultiSelectDropDown.tsx | 18 +- client/src/hooks/usePresetOptions.ts | 12 +- client/src/hooks/useSetOptions.ts | 20 +-- client/src/store/optionSettings.ts | 6 +- client/src/utils/cleanupPreset.ts | 9 +- package-lock.json | 4 +- packages/data-provider/src/createPayload.ts | 2 +- packages/data-provider/src/types.ts | 158 +----------------- 32 files changed, 233 insertions(+), 245 deletions(-) create mode 100644 client/src/common/index.ts create mode 100644 client/src/common/types.ts diff --git a/.eslintrc.js b/.eslintrc.js index b32358ad48..9e7858375e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -45,9 +45,9 @@ module.exports = { 'linebreak-style': 0, curly: ['error', 'all'], semi: ['error', 'always'], - 'no-trailing-spaces': 'error', 'object-curly-spacing': ['error', 'always'], 'no-multiple-empty-lines': ['error', { max: 1 }], + 'no-trailing-spaces': 'error', 'comma-dangle': ['error', 'always-multiline'], // "arrow-parens": [2, "as-needed", { requireForBlockBody: true }], // 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], diff --git a/client/src/common/index.ts b/client/src/common/index.ts new file mode 100644 index 0000000000..fcb073fefc --- /dev/null +++ b/client/src/common/index.ts @@ -0,0 +1 @@ +export * from './types'; diff --git a/client/src/common/types.ts b/client/src/common/types.ts new file mode 100644 index 0000000000..dfcf5d5446 --- /dev/null +++ b/client/src/common/types.ts @@ -0,0 +1,50 @@ +import { TConversation, TPreset } from 'librechat-data-provider'; + +export type TSetOption = (param: number | string) => (newValue: number | string | boolean) => void; +export type TSetExample = ( + i: number, + type: string, + newValue: number | string | boolean | null, +) => void; + +export enum ESide { + Top = 'top', + Right = 'right', + Bottom = 'bottom', + Left = 'left', +} + +export type TBaseSettingsProps = { + conversation: TConversation | TPreset | null; + className?: string; + isPreset?: boolean; + readonly?: boolean; +}; + +export type TSettingsProps = TBaseSettingsProps & { + setOption: TSetOption; +}; + +export type TModels = { + models: string[]; +}; + +export type TModelSelectProps = TSettingsProps & TModels; + +export type TEditPresetProps = { + open: boolean; + onOpenChange: React.Dispatch>; + preset: TPreset; + title?: string; +}; + +export type TSetOptionsPayload = { + setOption: TSetOption; + setExample: TSetExample; + addExample: () => void; + removeExample: () => void; + setAgentOption: TSetOption; + getConversation: () => TConversation | TPreset | null; + checkPluginSelection: (value: string) => boolean; + setTools: (newValue: string) => void; +}; diff --git a/client/src/components/Conversations/Pages.tsx b/client/src/components/Conversations/Pages.tsx index 7564386339..50604f0c62 100644 --- a/client/src/components/Conversations/Pages.tsx +++ b/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; + previousPage: () => Promise; +}; export default function Pages({ pageNumber, @@ -7,7 +14,7 @@ export default function Pages({ nextPage, previousPage, setPageNumber, -}: PagesProps) { +}: TPagesProps) { const clickHandler = (func: () => Promise) => async (e: React.MouseEvent) => { e.preventDefault(); diff --git a/client/src/components/Endpoints/EndpointOptionsDialog.tsx b/client/src/components/Endpoints/EndpointOptionsDialog.tsx index ff3efc51a7..8182ec1f46 100644 --- a/client/src/components/Endpoints/EndpointOptionsDialog.tsx +++ b/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) => diff --git a/client/src/components/Endpoints/EndpointOptionsPopover.tsx b/client/src/components/Endpoints/EndpointOptionsPopover.tsx index 268ced017a..0fa3b999fe 100644 --- a/client/src/components/Endpoints/EndpointOptionsPopover.tsx +++ b/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'; diff --git a/client/src/components/Endpoints/EndpointSettings.tsx b/client/src/components/Endpoints/EndpointSettings.tsx index 572941ded4..68512d0165 100644 --- a/client/src/components/Endpoints/EndpointSettings.tsx +++ b/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 } = { openAI: OpenAISettings, azureOpenAI: OpenAISettings, bingAI: BingAISettings, anthropic: AnthropicSettings, }; -const multiViewComponents: { [key: string]: MultiViewComponent } = { +const multiViewComponents: { [key: string]: React.FC } = { 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; diff --git a/client/src/components/Endpoints/PopoverButtons.tsx b/client/src/components/Endpoints/PopoverButtons.tsx index f172529e53..3b65b8f290 100644 --- a/client/src/components/Endpoints/PopoverButtons.tsx +++ b/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', diff --git a/client/src/components/Endpoints/SaveAsPresetDialog.tsx b/client/src/components/Endpoints/SaveAsPresetDialog.tsx index cd9f535f4e..6adcb2842d 100644 --- a/client/src/components/Endpoints/SaveAsPresetDialog.tsx +++ b/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(preset?.title || 'My Preset'); const endpointsConfig = useRecoilValue(store.endpointsConfig); const createPresetMutation = useCreatePresetMutation(); const localize = useLocalize(); diff --git a/client/src/components/Endpoints/Settings/AgentSettings.tsx b/client/src/components/Endpoints/Settings/AgentSettings.tsx index ef575493e7..8d9baad6db 100644 --- a/client/src/components/Endpoints/Settings/AgentSettings.tsx +++ b/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" /> - +
@@ -102,7 +103,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="ml-4 mt-2" /> - + @@ -120,7 +121,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="ml-4 mt-2" /> - +
{/* diff --git a/client/src/components/Endpoints/Settings/Anthropic.tsx b/client/src/components/Endpoints/Settings/Anthropic.tsx index 017ad88098..98378548a5 100644 --- a/client/src/components/Endpoints/Settings/Anthropic.tsx +++ b/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" /> - + @@ -148,7 +148,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -186,7 +186,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -226,7 +226,7 @@ export default function Settings({ conversation, setOption, models, readonly }: diff --git a/client/src/components/Endpoints/Settings/BingAI.tsx b/client/src/components/Endpoints/Settings/BingAI.tsx index 2ab59f3f18..f577fa42c2 100644 --- a/client/src/components/Endpoints/Settings/BingAI.tsx +++ b/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); diff --git a/client/src/components/Endpoints/Settings/Examples.tsx b/client/src/components/Endpoints/Settings/Examples.tsx index ee697f75be..b28f54c173 100644 --- a/client/src/components/Endpoints/Settings/Examples.tsx +++ b/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 ( <> diff --git a/client/src/components/Endpoints/Settings/Google.tsx b/client/src/components/Endpoints/Settings/Google.tsx index d05c5021f7..350606c43e 100644 --- a/client/src/components/Endpoints/Settings/Google.tsx +++ b/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" /> - + {!codeChat && ( <> @@ -164,7 +164,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -205,7 +205,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + )} @@ -250,7 +250,7 @@ export default function Settings({ conversation, setOption, models, readonly }: diff --git a/client/src/components/Endpoints/Settings/OpenAI.tsx b/client/src/components/Endpoints/Settings/OpenAI.tsx index f9777b75eb..d6090bb0ab 100644 --- a/client/src/components/Endpoints/Settings/OpenAI.tsx +++ b/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" /> - + @@ -168,7 +168,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -207,7 +207,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -246,7 +246,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + diff --git a/client/src/components/Endpoints/Settings/OptionHover.tsx b/client/src/components/Endpoints/Settings/OptionHover.tsx index b3b106f856..39fe8d30ef 100644 --- a/client/src/components/Endpoints/Settings/OptionHover.tsx +++ b/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) { diff --git a/client/src/components/Endpoints/Settings/Plugins.tsx b/client/src/components/Endpoints/Settings/Plugins.tsx index 060d21cb6f..3562abf24d 100644 --- a/client/src/components/Endpoints/Settings/Plugins.tsx +++ b/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" /> - + @@ -184,7 +184,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -225,7 +225,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + @@ -266,7 +266,7 @@ export default function Settings({ conversation, setOption, models, readonly }: className="flex h-4 w-full" /> - + diff --git a/client/src/components/Input/ModelSelect/Anthropic.tsx b/client/src/components/Input/ModelSelect/Anthropic.tsx index c03565de60..d594e48aa9 100644 --- a/client/src/components/Input/ModelSelect/Anthropic.tsx +++ b/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 ( ; +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 } = { 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; diff --git a/client/src/components/Input/ModelSelect/OpenAI.tsx b/client/src/components/Input/ModelSelect/OpenAI.tsx index cca893163b..e0025854f7 100644 --- a/client/src/components/Input/ModelSelect/OpenAI.tsx +++ b/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 ( (true); const [availableTools, setAvailableTools] = useRecoilState(store.availableTools); diff --git a/client/src/components/ui/MultiSelectDropDown.tsx b/client/src/components/ui/MultiSelectDropDown.tsx index c4476586c3..df176e9b3f 100644 --- a/client/src/components/ui/MultiSelectDropDown.tsx +++ b/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']; diff --git a/client/src/hooks/usePresetOptions.ts b/client/src/hooks/usePresetOptions.ts index 8bec318666..0bf3a6645e 100644 --- a/client/src/hooks/usePresetOptions.ts +++ b/client/src/hooks/usePresetOptions.ts @@ -1,16 +1,20 @@ -import { UsePresetOptions, TPreset, SetOption, SetExample } from 'librechat-data-provider'; +import { TPreset } from 'librechat-data-provider'; +import type { TSetOptionsPayload, TSetExample, TSetOption } from '~/common'; import { useRecoilState, useRecoilValue } from 'recoil'; import { cleanupPreset } from '~/utils'; import store from '~/store'; -const usePresetOptions: UsePresetOptions = (_preset) => { +type TUsePresetOptions = (preset?: TPreset | boolean | null) => TSetOptionsPayload | boolean; + +const usePresetOptions: TUsePresetOptions = (_preset) => { const [preset, setPreset] = useRecoilState(store.preset); const endpointsConfig = useRecoilValue(store.endpointsConfig); if (!_preset) { return false; } const getConversation: () => TPreset | null = () => preset; - const setOption: SetOption = (param) => (newValue) => { + + const setOption: TSetOption = (param) => (newValue) => { const update = {}; update[param] = newValue; setPreset((prevState) => @@ -24,7 +28,7 @@ const usePresetOptions: UsePresetOptions = (_preset) => { ); }; - const setExample: SetExample = (i, type, newValue = null) => { + const setExample: TSetExample = (i, type, newValue = null) => { const update = {}; const current = preset?.examples?.slice() || []; const currentExample = { ...current[i] } || {}; diff --git a/client/src/hooks/useSetOptions.ts b/client/src/hooks/useSetOptions.ts index feb357773b..b27c09e21c 100644 --- a/client/src/hooks/useSetOptions.ts +++ b/client/src/hooks/useSetOptions.ts @@ -1,16 +1,12 @@ -import { - UseSetOptions, - TConversation, - SetOption, - SetExample, - TPlugin, - tConversationSchema, -} from 'librechat-data-provider'; +import { TConversation, TPreset, TPlugin, tConversationSchema } from 'librechat-data-provider'; +import type { TSetExample, TSetOption, TSetOptionsPayload } from '~/common'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; import usePresetOptions from './usePresetOptions'; import store from '~/store'; -const useSetOptions: UseSetOptions = (preset = false) => { +type TUseSetOptions = (preset?: TPreset | boolean | null) => TSetOptionsPayload; + +const useSetOptions: TUseSetOptions = (preset = false) => { const setShowPluginStoreDialog = useSetRecoilState(store.showPluginStoreDialog); const [conversation, setConversation] = useRecoilState(store.conversation); const availableTools = useRecoilValue(store.availableTools); @@ -21,7 +17,7 @@ const useSetOptions: UseSetOptions = (preset = false) => { return result; } - const setOption: SetOption = (param) => (newValue) => { + const setOption: TSetOption = (param) => (newValue) => { const update = {}; update[param] = newValue; setConversation((prevState) => @@ -32,7 +28,7 @@ const useSetOptions: UseSetOptions = (preset = false) => { ); }; - const setExample: SetExample = (i, type, newValue = null) => { + const setExample: TSetExample = (i, type, newValue = null) => { const update = {}; const current = conversation?.examples?.slice() || []; const currentExample = { ...current[i] } || {}; @@ -92,7 +88,7 @@ const useSetOptions: UseSetOptions = (preset = false) => { return conversation.tools.find((el) => el.pluginKey === value) ? true : false; } - const setAgentOption: SetOption = (param) => (newValue) => { + const setAgentOption: TSetOption = (param) => (newValue) => { const editableConvo = JSON.stringify(conversation); const convo = JSON.parse(editableConvo); const { agentOptions } = convo; diff --git a/client/src/store/optionSettings.ts b/client/src/store/optionSettings.ts index c6affdc2d3..d2956f9070 100644 --- a/client/src/store/optionSettings.ts +++ b/client/src/store/optionSettings.ts @@ -1,5 +1,9 @@ import { atom } from 'recoil'; -import { TOptionSettings } from 'librechat-data-provider'; + +type TOptionSettings = { + showExamples?: boolean; + isCodeChat?: boolean; +}; const optionSettings = atom({ key: 'optionSettings', diff --git a/client/src/utils/cleanupPreset.ts b/client/src/utils/cleanupPreset.ts index c02d9b8258..5f924f6027 100644 --- a/client/src/utils/cleanupPreset.ts +++ b/client/src/utils/cleanupPreset.ts @@ -1,6 +1,11 @@ -import { CleanupPreset, TPreset } from 'librechat-data-provider'; +import { TEndpointsConfig, TPreset } from 'librechat-data-provider'; -const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }: CleanupPreset): TPreset => { +type TCleanupPreset = { + preset: Partial; + endpointsConfig?: TEndpointsConfig | Record; +}; + +const cleanupPreset = ({ preset: _preset, endpointsConfig = {} }: TCleanupPreset): TPreset => { const { endpoint } = _preset; let preset = {} as TPreset; diff --git a/package-lock.json b/package-lock.json index 13b8f3ab2c..5f4c826067 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26944,7 +26944,7 @@ }, "packages/data-provider": { "name": "librechat-data-provider", - "version": "0.1.3", + "version": "0.1.4", "license": "ISC", "dependencies": { "@tanstack/react-query": "^4.28.0", @@ -39521,7 +39521,7 @@ "rollup": "^3.26.0", "rollup-plugin-typescript2": "^0.35.0", "typescript": "^5.0.4", - "zod": "*" + "zod": "^3.21.4" }, "dependencies": { "brace-expansion": { diff --git a/packages/data-provider/src/createPayload.ts b/packages/data-provider/src/createPayload.ts index debe5c6b2e..8e1a860288 100644 --- a/packages/data-provider/src/createPayload.ts +++ b/packages/data-provider/src/createPayload.ts @@ -1,5 +1,5 @@ import { tConversationSchema } from './schemas'; -import type { TSubmission, EModelEndpoint } from './types'; +import { TSubmission, EModelEndpoint } from './types'; export default function createPayload(submission: TSubmission) { const { conversation, message, endpointOption } = submission; diff --git a/packages/data-provider/src/types.ts b/packages/data-provider/src/types.ts index 95f4496fcb..6bf0a23d2b 100644 --- a/packages/data-provider/src/types.ts +++ b/packages/data-provider/src/types.ts @@ -1,5 +1,4 @@ -import * as React from 'react'; -import { TExample, TMessage, EModelEndpoint, TPlugin, TConversation, TPreset } from './schemas'; +import { TMessage, EModelEndpoint, TConversation } from './schemas'; export * from './schemas'; @@ -49,19 +48,20 @@ export type TPluginAction = { auth?: unknown; }; -export type TTemplate = { - [key: string]: TPlugin; -}; - export type TUpdateUserPlugins = { pluginKey: string; action: string; auth?: unknown; }; -export type TOptionSettings = { - showExamples?: boolean; - isCodeChat?: boolean; +export type TError = { + message: string; + code?: number; + response?: { + data?: { + message?: string; + }; + }; }; export type TUser = { @@ -204,143 +204,3 @@ export type TRequestPasswordResetResponse = { link?: string; message?: string; }; - -export type File = { - name: string; - date: number; - size: number; -}; - -export type SetOption = (param: number | string) => (newValue: number | string | boolean) => void; -export type SetExample = ( - i: number, - type: string, - newValue: number | string | boolean | null, -) => void; - -export enum Side { - Top = 'top', - Right = 'right', - Bottom = 'bottom', - Left = 'left', -} - -export type OptionHoverProps = { - endpoint: string; - type: string; - side: Side; -}; - -export type BaseProps = { - conversation: TConversation | TPreset | null; - className?: string; - isPreset?: boolean; - readonly?: boolean; -}; - -export type SettingsProps = BaseProps & { - setOption: SetOption; -}; - -export type TModels = { - models: string[]; -}; - -export type ModelSelectProps = SettingsProps & TModels; - -export type ExamplesProps = { - readonly?: boolean; - className?: string; - examples: TExample[]; - setExample: SetExample; - addExample: () => void; - removeExample: () => void; -}; - -export type GoogleProps = { - showExamples: boolean; - isCodeChat: boolean; -}; - -export type GoogleViewProps = SettingsProps & GoogleProps; -export type OptionComponent = React.FC; -export type MultiViewComponent = React.FC; - -export type SelectProps = { - conversation: TConversation | null; - setOption: SetOption; - extraProps?: GoogleProps; -}; - -export type SetOptionsPayload = { - setOption: SetOption; - setExample: SetExample; - addExample: () => void; - removeExample: () => void; - setAgentOption: SetOption; - getConversation: () => TConversation | TPreset | null; - checkPluginSelection: (value: string) => boolean; - setTools: (newValue: string) => void; -}; - -export type UseSetOptions = (preset?: TPreset | boolean | null) => SetOptionsPayload; -export type UsePresetOptions = (preset?: TPreset | boolean | null) => SetOptionsPayload | boolean; - -export type PopoverButton = { - label: string; - buttonClass: string; - handler: () => void; - icon: React.ReactNode; -}; - -export type EndpointOptionsPopoverProps = { - children: React.ReactNode; - visible: boolean; - endpoint: EModelEndpoint; - saveAsPreset: () => void; - closePopover: () => void; -}; - -export type EditPresetProps = { - open: boolean; - onOpenChange: React.Dispatch>; - preset: TPreset; - title?: string; -}; - -export type MultiSelectDropDownProps = { - 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; -}; - -export type TError = { - message: string; - code?: number; - response?: { - data?: { - message?: string; - }; - }; -}; - -export type CleanupPreset = { - preset: Partial; - endpointsConfig?: TEndpointsConfig | Record; -}; - -export type PagesProps = { - pages: number; - pageNumber: number; - setPageNumber: (pageNumber: number) => void; - nextPage: () => Promise; - previousPage: () => Promise; -};