feat(client): add doubleClickHandler prop to Slider component to reset to default

feat(client): add doubleClickHandler to temperature, topP, freqP, and presP sliders in OpenAI Settings component

client/package-lock.json

@@ -22,6 +22,7 @@
         "@types/node": "^18.15.10",
         "@types/react": "^18.0.30",
         "@types/react-dom": "^18.0.11",
+        "@zattoo/use-double-click": "1.2.0",
         "axios": "^1.3.4",
         "class-variance-authority": "^0.4.0",
         "clsx": "^1.2.1",
@@ -4137,6 +4138,14 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/@zattoo/use-double-click": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@zattoo/use-double-click/-/use-double-click-1.2.0.tgz",
+      "integrity": "sha512-ArRw8SDCgYFvxc4Vpm2JIk1TuWBSUm0cYFqUfgRokz9lgW9m39NZAoeKMu3n3Mp3eKaBMXBrZhTWHUt+vYD87w==",
+      "dependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "dev": true,
@@ -16257,6 +16266,14 @@
       "version": "4.2.2",
       "dev": true
     },
+    "@zattoo/use-double-click": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@zattoo/use-double-click/-/use-double-click-1.2.0.tgz",
+      "integrity": "sha512-ArRw8SDCgYFvxc4Vpm2JIk1TuWBSUm0cYFqUfgRokz9lgW9m39NZAoeKMu3n3Mp3eKaBMXBrZhTWHUt+vYD87w==",
+      "requires": {
+        "react": ">=16.8.0"
+      }
+    },
     "abab": {
       "version": "2.0.6",
       "dev": true

client/package.json

@@ -34,6 +34,7 @@
     "@types/node": "^18.15.10",
     "@types/react": "^18.0.30",
     "@types/react-dom": "^18.0.11",
+    "@zattoo/use-double-click": "1.2.0",
     "axios": "^1.3.4",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",

client/src/components/Endpoints/OpenAI/Settings.jsx

@@ -148,6 +148,7 @@ function Settings(props) {
                 disabled={readonly}
                 value={[temperature]}
                 onValueChange={value => setTemperature(value[0])}
+                doubleClickHandler={() => setTemperature(1)}
                 max={2}
                 min={0}
                 step={0.01}
@@ -227,6 +228,7 @@ function Settings(props) {
                 disabled={readonly}
                 value={[topP]}
                 onValueChange={value => setTopP(value[0])}
+                doubleClickHandler={() => setTopP(1)}
                 max={1}
                 min={0}
                 step={0.01}
@@ -270,6 +272,7 @@ function Settings(props) {
                 disabled={readonly}
                 value={[freqP]}
                 onValueChange={value => setFreqP(value[0])}
+                doubleClickHandler={() => setFreqP(0)}
                 max={2}
                 min={-2}
                 step={0.01}
@@ -313,6 +316,7 @@ function Settings(props) {
                 disabled={readonly}
                 value={[presP]}
                 onValueChange={value => setPresP(value[0])}
+                doubleClickHandler={() => setPresP(0)}
                 max={2}
                 min={-2}
                 step={0.01}

client/src/components/ui/Slider.tsx

@@ -2,13 +2,19 @@
 
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
-
+import { useDoubleClick } from "@zattoo/use-double-click"
 import { cn } from "../../utils"
 
+type clickEvent = (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  doubleClickHandler?: clickEvent;
+}
+
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+  SliderProps
->(({ className, ...props }, ref) => (
+>(({ className, doubleClickHandler, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
@@ -20,7 +26,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-100 dark:bg-gray-900">
       <SliderPrimitive.Range className="absolute h-full bg-gray-400  dark:bg-gray-400" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900" />
+    <SliderPrimitive.Thumb onClick={useDoubleClick(doubleClickHandler) ?? (() => {})}  className="block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900" />
   </SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName