Support custom providers (#530)

Enable adding custom providers in user settings

src/components/Message/AppMessage/Instructions.tsx

@@ -13,12 +13,11 @@ import {
 
 import MessageBase, { type MessageBaseProps } from "../MessageBase";
 import { ChatCraftAppMessage } from "../../../lib/ChatCraftMessage";
-import { providerFromUrl, getSupportedProviders } from "../../../lib/providers";
+import { nameToUrlMap, providerFromUrl, supportedProviders } from "../../../lib/providers";
 import { OpenRouterProvider } from "../../../lib/providers/OpenRouterProvider";
-import RevealablePasswordInput from "../../RevealablePasswordInput";
+import PasswordInput from "../../PasswordInput";
 import { useSettings } from "../../../hooks/use-settings";
 import { FreeModelProvider } from "../../../lib/providers/DefaultProvider/FreeModelProvider";
-import { nameToUrlMap } from "../../../lib/ChatCraftProvider";
 
 const ApiKeyInstructionsText = `## Getting Started with ChatCraft
 
@@ -57,7 +56,6 @@ function Instructions(props: MessageBaseProps) {
   const { settings, setSettings } = useSettings();
   const [isValidating, setIsValidating] = useState(false);
   const [isInvalid, setIsInvalid] = useState(false);
-  const supportedProviders = getSupportedProviders();
 
   // Override the text of the message
   const message = new ChatCraftAppMessage({ ...props.message, text: ApiKeyInstructionsText });
@@ -156,7 +154,7 @@ function Instructions(props: MessageBaseProps) {
             <FormControl isInvalid={isInvalid}>
               <FormLabel>{settings.currentProvider.name} API Key </FormLabel>
               <Flex gap={4} align="center">
-                <RevealablePasswordInput
+                <PasswordInput
                   flex="1"
                   type="password"
                   name="openai-api-key"

src/components/PasswordInput.tsx

@@ -0,0 +1,37 @@
+import { useState, type ComponentPropsWithRef } from "react";
+import { Input, InputGroup, InputRightElement, Button } from "@chakra-ui/react";
+
+type PasswordInputProps = ComponentPropsWithRef<typeof Input> & {
+  inputSize?: "sm" | "md";
+  isInvalid?: boolean;
+};
+
+function PasswordInput({ inputSize = "md", isInvalid, ...props }: PasswordInputProps) {
+  const [show, setShow] = useState(false);
+
+  const paddingRight = inputSize === "sm" ? "2.5rem" : "4.5rem";
+  const paddingLeft = inputSize === "sm" ? "0.4rem" : undefined;
+  const inputFieldSize = inputSize === "sm" ? "sm" : "md";
+  const buttonSize = inputSize === "sm" ? "xs" : "sm";
+
+  return (
+    <InputGroup size={inputFieldSize}>
+      <Input
+        {...props}
+        pr={paddingRight}
+        pl={paddingLeft}
+        type={show ? "text" : "password"}
+        focusBorderColor={isInvalid ? "red.500" : "blue.500"}
+        borderColor={isInvalid ? "red.500" : "gray.200"}
+        isInvalid={isInvalid}
+      />
+      <InputRightElement width={paddingRight}>
+        <Button variant="ghost" h="1.75rem" size={buttonSize} onClick={() => setShow(!show)}>
+          {show ? "Hide" : "Show"}
+        </Button>
+      </InputRightElement>
+    </InputGroup>
+  );
+}
+
+export default PasswordInput;