Merge pull request #92 from Royal-lobster/better-start-auth

Royal-lobster · Oct 25, 2024 · dbfbbc6 · dbfbbc6
2 parents ea21da4 + e3573e1
commit dbfbbc6
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 23 deletions.
diff --git a/.changeset/afraid-fishes-rule.md b/.changeset/afraid-fishes-rule.md
@@ -0,0 +1,5 @@
+---
+"syncia": patch
+---
+
+Fixes UI for welcome auth screen and settings page base url input
diff --git a/src/components/Settings/Sections/ChatSettings.tsx b/src/components/Settings/Sections/ChatSettings.tsx
@@ -86,14 +86,6 @@ const ChatSettings = () => {
               type={showPassword ? 'text' : 'password'}
               className="input"
             />
-            <input
-              ref={OpenAiBaseUrlInputRef}
-              name="openAiBaseUrl"
-              defaultValue={chatSettings.openAiBaseUrl || ''}
-              placeholder="Enter your OpenAI Base URL"
-              className="cdx-mt-4 cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50 data-[error]:cdx-text-red-500"
-            />
-
             <button
               type="button"
               className="cdx-absolute cdx-right-4 cdx-top-1/2 cdx-transform cdx--translate-y-1/2 cdx-text-neutral-500 dark:cdx-text-neutral-200 cdx-bg-transparent cdx-outline-none cdx-cursor-pointer"
@@ -111,6 +103,24 @@ const ChatSettings = () => {
           </button>
         </div>
       </FieldWrapper>
+      <FieldWrapper
+        title="OpenAI Base URL"
+        description="Enter your custom OpenAI API base URL (optional)"
+        onSubmit={handleOpenAiKeySubmit}
+      >
+        <div className="cdx-flex cdx-gap-2 cdx-items-center">
+          <input
+            ref={OpenAiBaseUrlInputRef}
+            name="openAiBaseUrl"
+            defaultValue={chatSettings.openAiBaseUrl || ''}
+            placeholder="Enter your OpenAI Base URL"
+            className="input cdx-w-full"
+          />
+          <button type="submit" className="btn">
+            Update
+          </button>
+        </div>
+      </FieldWrapper>{' '}
       {/* =========================
              Model Setting
           ===========================*/}

diff --git a/src/components/Sidebar/auth/index.tsx b/src/components/Sidebar/auth/index.tsx
@@ -5,6 +5,7 @@ import { validateApiKey } from '../../../lib/validApiKey'
 const Auth = () => {
   const [, setSettings] = useSettings()
   const [error, setError] = React.useState<string | null>(null)
+  const [showAdvanced, setShowAdvanced] = React.useState(false)
 
   useEffect(() => {
     if (error) {
@@ -18,23 +19,23 @@ const Auth = () => {
     e.preventDefault()
     const data = new FormData(e.currentTarget)
     const key = data.get('openAiKey') as string | null
-    const openAiBaseUrl = data.get('openAiBaseUrl') as
-      | string
-      | 'https://api.openai.com/v1'
+    const openAiBaseUrl =
+      (data.get('openAiBaseUrl') as string) || 'https://api.openai.com/v1'
 
     if (key && (await validateApiKey(key, openAiBaseUrl))) {
       setSettings((prev) => ({
         ...prev,
         chat: {
           ...prev.chat,
           openAIKey: key as string,
-          openAiBaseUrl: openAiBaseUrl as string,
+          openAiBaseUrl: openAiBaseUrl,
         },
       }))
     } else {
       setError('Invalid API key. Please try with a valid one.')
     }
   }
+
   return (
     <form
       onSubmit={handleOpenAiKeySubmit}
@@ -58,17 +59,48 @@ const Auth = () => {
       <div className="cdx-text-sm cdx-text-gray-400 cdx-mt-2">
         sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
       </div>
-      <input
-        name="openAiKey"
-        placeholder="Enter your OpenAI API key"
-        data-error={error ? 'true' : undefined}
-        className="cdx-mt-4 cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50 data-[error]:cdx-text-red-500"
-      />
-      <input
-        name="openAiBaseUrl"
-        placeholder="Enter your OpenAI Base URL"
-        className="cdx-mt-4 cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50 data-[error]:cdx-text-red-500"
-      />
+
+      <div className="cdx-w-full cdx-mt-6">
+        <label
+          htmlFor="openAiKey"
+          className="cdx-block cdx-text-center cdx-text-sm cdx-text-gray-500 dark:cdx-text-gray-400 cdx-mb-2"
+        >
+          API Key
+        </label>
+        <input
+          id="openAiKey"
+          name="openAiKey"
+          placeholder="Paste your OpenAI API key"
+          data-error={error ? 'true' : undefined}
+          className="cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50 data-[error]:cdx-text-red-500"
+        />
+      </div>
+
+      <button
+        type="button"
+        onClick={() => setShowAdvanced(!showAdvanced)}
+        className="cdx-mt-4 cdx-text-sm cdx-text-blue-400 hover:cdx-underline"
+      >
+        {showAdvanced ? 'Hide Advanced Settings' : 'Show Advanced Settings'}
+      </button>
+
+      {showAdvanced && (
+        <div className="cdx-w-full cdx-mt-4">
+          <label
+            htmlFor="openAiBaseUrl"
+            className="cdx-block cdx-text-center cdx-text-sm cdx-text-gray-500 dark:cdx-text-gray-400 cdx-mb-2"
+          >
+            Base URL (optional)
+          </label>
+          <input
+            id="openAiBaseUrl"
+            name="openAiBaseUrl"
+            placeholder="https://api.openai.com/v1"
+            defaultValue="https://api.openai.com/v1"
+            className="cdx-text-center cdx-p-2 cdx-w-full cdx-rounded-md cdx-border dark:cdx-border-neutral-600 cdx-border-neutral-200 dark:cdx-bg-neutral-800/90 cdx-bg-neutral-200/90 focus:cdx-outline-none focus:cdx-ring-2 focus:cdx-ring-blue-900 focus:cdx-ring-opacity-50"
+          />
+        </div>
+      )}
 
       {error && (
         <div className="cdx-text-sm cdx-text-red-500 cdx-mt-2">{error}</div>
@@ -80,6 +112,7 @@ const Auth = () => {
       >
         Submit
       </button>
+
       <div className="cdx-text-sm cdx-text-gray-400 cdx-mt-2">
         (Note: we only store your key locally. We do not send it anywhere. You
         can check the{' '}