diff --git a/src/components/PromptForm/PromptSendButton.tsx b/src/components/PromptForm/PromptSendButton.tsx index 72cc7aed..801cec8f 100644 --- a/src/components/PromptForm/PromptSendButton.tsx +++ b/src/components/PromptForm/PromptSendButton.tsx @@ -7,14 +7,17 @@ import { MenuList, MenuItem, Tooltip, + MenuDivider, + MenuGroup, } from "@chakra-ui/react"; import { TbChevronUp, TbSend } from "react-icons/tb"; +import { FreeModelProvider } from "../../lib/providers/DefaultProvider/FreeModelProvider"; import useMobileBreakpoint from "../../hooks/use-mobile-breakpoint"; import { useSettings } from "../../hooks/use-settings"; import { useModels } from "../../hooks/use-models"; import theme from "../../theme"; -import { MdVolumeUp, MdVolumeOff } from "react-icons/md"; +import { MdVolumeUp, MdVolumeOff, MdOutlineChevronRight } from "react-icons/md"; import { useMemo } from "react"; import useAudioPlayer from "../../hooks/use-audio-player"; import { usingOfficialOpenAI } from "../../lib/providers"; @@ -33,9 +36,14 @@ function MobilePromptSendButton({ isLoading }: PromptSendButtonProps) { const { clearAudioQueue } = useAudioPlayer(); + const providersList = { + ...settings.providers, + "Free AI Models": new FreeModelProvider(), + }; + return ( - + } /> - {models - .filter((model) => !usingOfficialOpenAI() || model.id.includes("gpt")) - .map((model) => ( - setSettings({ ...settings, model })}> - {model.prettyModel} + + {models + .filter((model) => !usingOfficialOpenAI() || model.id.includes("gpt")) + .map((model) => ( + setSettings({ ...settings, model })} + > + {model.prettyModel} + + ))} + + + + {Object.entries(providersList).map(([providerName, providerObject]) => ( + { + setSettings({ ...settings, currentProvider: providerObject }); + }} + > + {settings.currentProvider.name === providerName ? ( + + ) : ( + + )} + {providerName} ))} + @@ -111,13 +143,17 @@ function MobilePromptSendButton({ isLoading }: PromptSendButtonProps) { function DesktopPromptSendButton({ isLoading }: PromptSendButtonProps) { const { settings, setSettings } = useSettings(); const { models } = useModels(); - const isTtsSupported = useMemo(() => { return !!models.filter((model) => model.id.includes("tts"))?.length; }, [models]); const { clearAudioQueue } = useAudioPlayer(); + const providersList = { + ...settings.providers, + "Free AI Models": new FreeModelProvider(), + }; + return ( )} - + } /> - {models - .filter((model) => !usingOfficialOpenAI() || model.id.includes("gpt")) - .map((model) => ( - setSettings({ ...settings, model })}> - {model.prettyModel} + + {models + .filter((model) => !usingOfficialOpenAI() || model.id.includes("gpt")) + .map((model) => ( + setSettings({ ...settings, model })} + > + {model.prettyModel} + + ))} + + + + {Object.entries(providersList).map(([providerName, providerObject]) => ( + { + setSettings({ ...settings, currentProvider: providerObject }); + }} + > + {settings.currentProvider.name === providerName ? ( + + ) : ( + + )} + {providerName} ))} +