🔧 fix: Preset Dialog Styling and Values (#2657)

* style: preset dialog styling

* refactor: coerce number input for convo schema

* refactor: replace dynamic input number with static component

client/src/components/Endpoints/Settings/Anthropic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
-import type { TModelSelectProps } from '~/common';
+import type { TModelSelectProps, OnInputNumberChange } from '~/common';
 import {
   Input,
   Label,
@@ -12,18 +12,34 @@ import {
   HoverCardTrigger,
 } from '~/components/ui';
 import { cn, defaultTextProps, optionText, removeFocusOutlines } from '~/utils';
-import { DynamicInputNumber } from '~/components/SidePanel/Parameters';
+import OptionHoverAlt from '~/components/SidePanel/Parameters/OptionHover';
+import { useLocalize, useDebouncedInput } from '~/hooks';
 import OptionHover from './OptionHover';
-import { useLocalize } from '~/hooks';
 import { ESide } from '~/common';
 
 export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
   const localize = useLocalize();
+  const {
+    model,
+    modelLabel,
+    promptPrefix,
+    temperature,
+    topP,
+    topK,
+    maxOutputTokens,
+    maxContextTokens,
+    resendFiles,
+  } = conversation ?? {};
+  const [setMaxContextTokens, maxContextTokensValue] = useDebouncedInput<number | null | undefined>(
+    {
+      setOption,
+      optionKey: 'maxContextTokens',
+      initialValue: maxContextTokens,
+    },
+  );
   if (!conversation) {
     return null;
   }
-  const { model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens, resendFiles } =
-    conversation;
 
   const setModel = setOption('model');
   const setModelLabel = setOption('modelLabel');
@@ -84,28 +100,40 @@ export default function Settings({ conversation, setOption, models, readonly }:
         </div>
       </div>
       <div className="col-span-5 flex flex-col items-center justify-start gap-6 px-3 sm:col-span-2">
-        <DynamicInputNumber
-          columnSpan={2}
-          settingKey="maxContextTokens"
-          setOption={setOption}
-          label="com_endpoint_context_tokens"
-          labelCode={true}
-          description="com_endpoint_context_info"
-          descriptionCode={true}
-          placeholder="com_nav_theme_system"
-          placeholderCode={true}
-          descriptionSide="right"
-          conversation={conversation}
-          readonly={readonly}
-          range={{
-            min: 10,
-            max: 2000000,
-            step: 1000,
-          }}
-          className="mt-1 w-full justify-between"
-          inputClassName="w-1/3"
-          showDefault={false}
-        />
+        <HoverCard openDelay={300}>
+          <HoverCardTrigger className="grid w-full items-center gap-2">
+            <div className="mt-1 flex w-full justify-between">
+              <Label htmlFor="max-context-tokens" className="text-left text-sm font-medium">
+                {localize('com_endpoint_context_tokens')}{' '}
+              </Label>
+              <InputNumber
+                id="max-context-tokens"
+                stringMode={false}
+                disabled={readonly}
+                value={maxContextTokensValue as number}
+                onChange={setMaxContextTokens as OnInputNumberChange}
+                placeholder={localize('com_nav_theme_system')}
+                min={10}
+                max={2000000}
+                step={1000}
+                controls={false}
+                className={cn(
+                  defaultTextProps,
+                  cn(
+                    optionText,
+                    'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200',
+                    'w-1/3',
+                  ),
+                )}
+              />
+            </div>
+          </HoverCardTrigger>
+          <OptionHoverAlt
+            description="com_endpoint_context_info"
+            langCode={true}
+            side={ESide.Left}
+          />
+        </HoverCard>
         <HoverCard openDelay={300}>
           <HoverCardTrigger className="grid w-full items-center gap-2">
             <div className="flex justify-between">