pressing issues

actualwitch · Dec 12, 2024 · 1c112d3 · 1c112d3
1 parent f4ab073
commit 1c112d3
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/pages/Parameters.tsx b/src/pages/Parameters.tsx
@@ -16,8 +16,6 @@ import { hasBackend } from "../utils/realm";
 import { type ProviderType, providers } from "./NewExperiment";
 import { TextField } from "../components/TextField";
 
-
-
 const StyledForm = styled.form`
   display: flex;
   & > * {
@@ -100,12 +98,11 @@ const ModalContent = ({ children, close }: PropsWithChildren<{ close: () => void
         </Select>
       </p>
       <p>
-        <TextField
+        <input
           type="password"
-          label="Token"
           placeholder={hasBackend() ? "Token or 1password reference" : "Token"}
           value={token}
-          onChange={(e) => setToken(e)}
+          onChange={(e) => setToken(e.target.value)}
         />
       </p>
       <Actions>
@@ -128,7 +125,24 @@ export default function Configure() {
   const [isDarkMode, setIsDarkMode] = useAtom(isDarkModeAtom);
   const [experimentLayout, setExperimentLayout] = useAtom(experimentLayoutAtom);
   const [tokens, setTokens] = useAtom(tokensAtom);
-
+  const [isAdding, setIsAdding] = useState(false);
+
+  const [selectedProvider, setSelectedProvider] = useState<ProviderType | null>(null);
+  const [token, setToken] = useState("");
+  const submit = () => {
+    if (!selectedProvider) {
+      return;
+    }
+    let value = token;
+
+    if (value.startsWith('"') && value.endsWith('"')) {
+      value = value.slice(1, -1);
+    }
+    setTokens({ ...tokens, [selectedProvider]: value });
+    setIsAdding(false);
+    setToken("");
+  };
+
   return (
     <>
       <StyledForm
@@ -160,16 +174,25 @@ export default function Configure() {
         <h3>Inference</h3>
         <Row>
           <header>Providers</header>
-          <ModalTrigger label="Add">
-            {(close) => {
-              return (
-                <ModalContent close={close}>
-                  <Button onClick={close}>close</Button>
-                </ModalContent>
-              );
-            }}
-          </ModalTrigger>
+          {isAdding ?
+            <Switch value={selectedProvider} onChange={setSelectedProvider}>
+              {[
+                { value: "anthropic", label: "Anthropic" },
+                { value: "openai", label: "OpenAI" },
+              ]}
+            </Switch>
+          : <Button onClick={() => setIsAdding(true)}>add</Button>}
         </Row>
+        {selectedProvider && (
+            <TextField
+              type="password"
+              placeholder={hasBackend() ? "Token or 1password reference" : "Token"}
+              onChange={(value) => setToken(value)}
+              onBlur={() => {
+                submit();
+              }}
+            />
+        )}
         {Object.keys(tokens).map((provider) => (
           <Row key={provider}>
             <header>{provider}</header>

diff --git a/src/style/index.tsx b/src/style/index.tsx
@@ -63,10 +63,10 @@ const InternalButton = styled.button<{ isDarkMode: boolean | undefined }>`
 //   return (Component: React.ComponentType<P>) => ((props: T & P) => <Component {...props} {...newProps} />);
 // }
 
-export const Button = (props: HTMLProps<HTMLButtonElement>) => {
+export const Button = ({onClick, ...props}: HTMLProps<HTMLButtonElement>) => {
   const [isDarkMode] = useAtom(isDarkModeAtom);
   const ref = useRef<HTMLButtonElement | null>(null);
-  const { buttonProps } = useButton({ ...props, isDisabled: props.disabled }, ref);
+  const { buttonProps } = useButton({ ...props, isDisabled: props.disabled, onClick, onPress: props.onPress ?? onClick }, ref);
   return (
     <InternalButton isDarkMode={isDarkMode} {...buttonProps}>
       {props.children}