🛠️ fix: enhance UI/UX and address a11y issues in SetKeyDialog (#5672)

* ✨ refactor: Improve UI consistency and accessibility in SetKeyDialog components

* 🎨 style: Add cursor pointer to Slider component for better UX

* 🐛 chore: Remove unnecessary console log from SetKeyDialog component

client/src/components/Input/SetKeyDialog/GoogleConfig.tsx

@@ -28,9 +28,9 @@ const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 's
         <Label htmlFor={AuthKeys.GOOGLE_SERVICE_KEY} className="text-left text-sm font-medium">
           {localize('com_endpoint_config_google_service_key')}
         </Label>
-        <div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">
+        <Label className="mx-1 text-right text-sm text-text-secondary">
           {localize('com_endpoint_config_google_cloud_platform')}
-        </div>
+        </Label>
         <br />
       </div>
       <FileUpload

client/src/components/Input/SetKeyDialog/HelpText.tsx

@@ -5,34 +5,9 @@ import { useLocalize } from '~/hooks';
 function HelpText({ endpoint }: { endpoint: string }) {
   const localize = useLocalize();
   const textMap = {
-    [EModelEndpoint.chatGPTBrowser]: (
-      <small className="break-all text-gray-500">
-        {localize('com_endpoint_config_key_chatgpt')}{' '}
-        <a
-          target="_blank"
-          href="https://chat.openai.com"
-          rel="noreferrer"
-          className="text-blue-600 underline"
-        >
-          https://chat.openai.com
-        </a>
-        {', '}
-        {localize('com_endpoint_config_key_chatgpt_then_visit')}{' '}
-        <a
-          target="_blank"
-          href="https://chat.openai.com/api/auth/session"
-          rel="noreferrer"
-          className="text-blue-600 underline"
-        >
-          https://chat.openai.com/api/auth/session
-        </a>
-        {'. '}
-        {localize('com_endpoint_config_key_chatgpt_copy_token')}
-      </small>
-    ),
     [EModelEndpoint.google]: (
       <>
-        <small className="break-all text-gray-500">
+        <small className="mt-4 break-all text-text-secondary">
           {localize('com_endpoint_config_google_service_key')}
           {': '}
           {localize('com_endpoint_config_key_google_need_to')}{' '}
@@ -40,7 +15,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://console.cloud.google.com/vertex-ai"
             rel="noreferrer"
-            className="text-blue-600 underline"
+            className="text-blue-700 underline dark:text-blue-400"
           >
             {localize('com_endpoint_config_key_google_vertex_ai')}
           </a>{' '}
@@ -49,14 +24,14 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
             rel="noreferrer"
-            className="text-blue-600 underline"
+            className="text-blue-700 underline dark:text-blue-400"
           >
             {localize('com_endpoint_config_key_google_service_account')}
           </a>
           {'. '}
           {localize('com_endpoint_config_key_google_vertex_api_role')}
         </small>
-        <small className="break-all text-gray-500">
+        <small className="break-all text-text-secondary">
           {localize('com_endpoint_config_google_api_key')}
           {': '}
           {localize('com_endpoint_config_google_api_info')}{' '}
@@ -64,7 +39,7 @@ function HelpText({ endpoint }: { endpoint: string }) {
             target="_blank"
             href="https://makersuite.google.com/app/apikey"
             rel="noreferrer"
-            className="text-blue-600 underline"
+            className="text-blue-700 underline dark:text-blue-400"
           >
             {localize('com_endpoint_config_click_here')}
           </a>{' '}

client/src/components/Input/SetKeyDialog/InputWithLabel.tsx

@@ -20,13 +20,11 @@ const InputWithLabel: FC<InputWithLabelProps> = forwardRef((props, ref) => {
   const localize = useLocalize();
   return (
     <>
-      <div className={cn('flex flex-row', labelClassName)}>
+      <div className={cn('mt-4 flex flex-row', labelClassName)}>
         <Label htmlFor={id} className="text-left text-sm font-medium">
           {label}
         </Label>
-        {subLabel && (
-          <div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">{subLabel}</div>
-        )}
+        {Label && <Label className="mx-1 text-right text-sm text-text-secondary">{subLabel}</Label>}
         <br />
       </div>
       <div className="h-1" />

client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx

@@ -163,7 +163,7 @@ const SetKeyDialog = ({
     <OGDialog open={open} onOpenChange={onOpenChange}>
       <OGDialogTemplate
         title={`${localize('com_endpoint_config_key_for')} ${alternateName[endpoint] ?? endpoint}`}
-        className="w-11/12 max-w-[650px] sm:w-3/4 md:w-3/4 lg:w-3/4"
+        className="w-11/12 max-w-2xl"
         showCancelButton={false}
         main={
           <div className="grid w-full items-center gap-2">
@@ -180,6 +180,7 @@ const SetKeyDialog = ({
               onChange={handleExpirationChange}
               options={expirationOptions.map((option) => option.label)}
               sizeClasses="w-[185px]"
+              portal={false}
             />
             <div className="mt-2" />
             <FormProvider {...methods}>