feat(components): add debounced-textfield (#3)

* feat: add a debounced-textfield componet

* feat: add a debounced-textfield componet

* feat: add a debounced-textfield componet

* feat: add a debounced-textfield componet

src/components/debounced-textfield.tsx

@@ -0,0 +1,45 @@
+import type { ChangeEventHandler, FC, FocusEventHandler, ReactNode } from 'react'
+
+import { TextField } from '@radix-ui/themes'
+import { useCallback, useState } from 'react'
+
+interface WithOnBlurValueProps {
+  onBlurValueChange?: (text: string) => undefined | void
+}
+
+interface WithOnBlurValueRequiredProps {
+  children?: ReactNode
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  value?: number | string
+}
+
+const withOnBlurValue = <P extends WithOnBlurValueRequiredProps>(Component: FC<P>): FC<P & WithOnBlurValueProps> => ({
+  onBlur,
+  onBlurValueChange,
+  onChange,
+  value,
+  ...rest
+}) => {
+  const [indeterminate, setIndeterminate] = useState<typeof value>(undefined)
+  const [prevValue, setPrevValue] = useState(value)
+  if (prevValue !== value) {
+    setPrevValue(value)
+    setIndeterminate(undefined)
+  }
+  const _onBlur = useCallback<Exclude<typeof onBlur, undefined>>((e) => {
+    onBlur?.(e)
+    if (indeterminate !== undefined) {
+      onBlurValueChange?.(indeterminate.toString())
+      setIndeterminate(undefined)
+    }
+  }, [onBlur, onBlurValueChange, indeterminate, setIndeterminate])
+  const _onChange = useCallback<Exclude<typeof onChange, undefined>>((e) => {
+    onChange?.(e)
+    setIndeterminate(e.currentTarget.value)
+  }, [onChange, setIndeterminate])
+  const p = { onBlur: _onBlur, onChange: _onChange, value: indeterminate ?? value, ...rest }
+  return <Component {...p as P} />
+}
+
+export const DebouncedTextField = withOnBlurValue(TextField.Root)

src/components/settings/settings-chat.tsx

@@ -5,6 +5,7 @@ import { useOnline } from '@uiw/react-use-online'
 import { useChatModel, useEmbedModel } from '../../hooks/use-model'
 import { useListModels } from '../../hooks/xsai/use-list-models'
 import * as Sheet from '../ui/sheet'
+import {DebouncedTextField} from "../debounced-textfield.tsx";
 
 export const SettingsChat = () => {
   const [chatModel, setChatModel] = useChatModel()
@@ -59,18 +60,18 @@ export const SettingsChat = () => {
         <Text as="div" mb="1" weight="bold">
           Base URL
         </Text>
-        <TextField.Root disabled placeholder="https://openai.com/v1/">
+        <DebouncedTextField disabled placeholder="https://openai.com/v1/">
           <TextField.Slot />
-        </TextField.Root>
+        </DebouncedTextField>
       </label>
 
       <label>
         <Text as="div" mb="1" weight="bold">
           API Key
         </Text>
-        <TextField.Root disabled placeholder="sk-abcdefghijklmnop123">
+        <DebouncedTextField disabled placeholder="sk-abcdefghijklmnop123">
           <TextField.Slot />
-        </TextField.Root>
+        </DebouncedTextField>
       </label>
 
       <Separator size="3" />