funda-ui 4.7.822 → 4.7.855

package/Chatbox/index.css

@@ -463,6 +463,16 @@
   width: 40px;
   height: 40px;
   z-index: 4;
+  pointer-events: all;
+  /* Core: Disable the system popup menu during long press */
+  -webkit-touch-callout: none;
+  /* Disable text selection */
+  -webkit-user-select: none;
+  user-select: none;
+  /* Core: Disable all default browser gestures to ensure touch events are passed directly to JS */
+  touch-action: none;
+  /* Remove the default tap highlight color on iOS for faster response perception */
+  -webkit-tap-highlight-color: transparent;
 }
 .custom-chatbox-container .msgcontrol [class*=chatbox-voice-input-btn] svg path {
   fill: var(--custom-chatbox-primary-text);

package/Chatbox/index.js

@@ -7525,6 +7525,7 @@ var Chatbox = function Chatbox(props) {
   //================================================================
   // Voice Input
   //================================================================
+  var pressStartTimeRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0); // Record the time when the button was pressed.
   var DEFAULT_VOICE_REQUEST_BODY_TEMPLATE = "{\n        \"common\": {\n            \"app_id\": \"{appId}\"\n        },\n        \"business\": {\n            \"language\": \"{lang}\",\n            \"domain\": \"iat\",\n            \"accent\": \"mandarin\",\n            \"dwa\": \"wpgs\"\n        },\n        \"data\": {\n            \"status\": 0,\n            \"format\": \"{format}\",\n            \"encoding\": \"{encoding}\"\n        }\n    }";
   var DEFAULT_AUDIO_BODY_TEMPLATE = "{\n        \"data\": {\n            \"status\": 1,\n            \"format\": \"{format}\",\n            \"encoding\": \"{encoding}\",\n            \"audio\": \"{audioData}\"\n        }\n    }";
   var _useState29 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
@@ -8214,20 +8215,30 @@ var Chatbox = function Chatbox(props) {
     var holdToTalk = typeof (voiceConfig === null || voiceConfig === void 0 ? void 0 : voiceConfig.holdToTalk) === 'undefined' ? true : voiceConfig.holdToTalk;
     if (enableVoiceInput) {
       // Helper to stop recording safely
-      var handleActionStop = function handleActionStop(e) {
-        // Prevent firing both Mouse and Touch events on some devices
-        if (e.cancelable) e.preventDefault();
-        if (isVoiceInputActive) {
-          stopVoiceInput();
-        }
-      };
       var handleActionStart = function handleActionStart(e) {
         if (loading) return;
         if (e.cancelable) e.preventDefault();
+        pressStartTimeRef.current = Date.now();
         if (!isVoiceInputActive) {
           startVoiceInput();
         }
       };
+      var handleActionStop = function handleActionStop(e) {
+        if (e.cancelable) e.preventDefault();
+        var duration = Date.now() - pressStartTimeRef.current;
+
+        // If the press time is extremely short (e.g. less than 100ms), 
+        // it means that it is a mistakeal touch or extremely fast
+        // Add a small delay to execute to ensure that startVoiceInput has finished initializing
+        if (duration < 150) {
+          // > 50, < 160
+          setTimeout(function () {
+            stopVoiceInput();
+          }, 100);
+          return;
+        }
+        stopVoiceInput();
+      };
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
         className: "".concat(args().prefix || 'custom-', "chatbox-voice-input-btn-wrapper ").concat(isVoiceInputActive ? 'active' : '')
       }, isVoiceInputActive ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
@@ -8237,18 +8248,16 @@ var Chatbox = function Chatbox(props) {
           userSelect: 'none'
         }
 
-        // Mobile
-        ,
-        onTouchStart: !holdToTalk ? undefined : handleActionStart,
-        onTouchEnd: !holdToTalk ? undefined : handleActionStop,
-        onTouchCancel: !holdToTalk ? undefined : handleActionStop // Handle system interruptions
-
-        // Desktop
-        ,
-        onMouseDown: !holdToTalk ? undefined : handleActionStart,
-        onMouseUp: !holdToTalk ? undefined : handleActionStop,
-        onMouseLeave: !holdToTalk ? undefined : handleActionStop // Handle mouse dragging out of button
+        // Mobile & Desktop 
+        // (using Pointer to avoid the stop problem caused by mixing Touch and Mouse)
         ,
+        onPointerDown: holdToTalk ? handleActionStart : undefined,
+        onPointerUp: holdToTalk ? handleActionStop : undefined,
+        onPointerCancel: holdToTalk ? handleActionStop : undefined,
+        onPointerLeave: holdToTalk ? handleActionStop : undefined,
+        onContextMenu: function onContextMenu(e) {
+          return e.preventDefault();
+        },
         onClick: function onClick(e) {
           e.preventDefault();
           e.stopPropagation();

package/lib/cjs/Chatbox/index.js

@@ -7525,6 +7525,7 @@ var Chatbox = function Chatbox(props) {
   //================================================================
   // Voice Input
   //================================================================
+  var pressStartTimeRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0); // Record the time when the button was pressed.
   var DEFAULT_VOICE_REQUEST_BODY_TEMPLATE = "{\n        \"common\": {\n            \"app_id\": \"{appId}\"\n        },\n        \"business\": {\n            \"language\": \"{lang}\",\n            \"domain\": \"iat\",\n            \"accent\": \"mandarin\",\n            \"dwa\": \"wpgs\"\n        },\n        \"data\": {\n            \"status\": 0,\n            \"format\": \"{format}\",\n            \"encoding\": \"{encoding}\"\n        }\n    }";
   var DEFAULT_AUDIO_BODY_TEMPLATE = "{\n        \"data\": {\n            \"status\": 1,\n            \"format\": \"{format}\",\n            \"encoding\": \"{encoding}\",\n            \"audio\": \"{audioData}\"\n        }\n    }";
   var _useState29 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
@@ -8214,20 +8215,30 @@ var Chatbox = function Chatbox(props) {
     var holdToTalk = typeof (voiceConfig === null || voiceConfig === void 0 ? void 0 : voiceConfig.holdToTalk) === 'undefined' ? true : voiceConfig.holdToTalk;
     if (enableVoiceInput) {
       // Helper to stop recording safely
-      var handleActionStop = function handleActionStop(e) {
-        // Prevent firing both Mouse and Touch events on some devices
-        if (e.cancelable) e.preventDefault();
-        if (isVoiceInputActive) {
-          stopVoiceInput();
-        }
-      };
       var handleActionStart = function handleActionStart(e) {
         if (loading) return;
         if (e.cancelable) e.preventDefault();
+        pressStartTimeRef.current = Date.now();
         if (!isVoiceInputActive) {
           startVoiceInput();
         }
       };
+      var handleActionStop = function handleActionStop(e) {
+        if (e.cancelable) e.preventDefault();
+        var duration = Date.now() - pressStartTimeRef.current;
+
+        // If the press time is extremely short (e.g. less than 100ms), 
+        // it means that it is a mistakeal touch or extremely fast
+        // Add a small delay to execute to ensure that startVoiceInput has finished initializing
+        if (duration < 150) {
+          // > 50, < 160
+          setTimeout(function () {
+            stopVoiceInput();
+          }, 100);
+          return;
+        }
+        stopVoiceInput();
+      };
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
         className: "".concat(args().prefix || 'custom-', "chatbox-voice-input-btn-wrapper ").concat(isVoiceInputActive ? 'active' : '')
       }, isVoiceInputActive ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", null) : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {
@@ -8237,18 +8248,16 @@ var Chatbox = function Chatbox(props) {
           userSelect: 'none'
         }
 
-        // Mobile
-        ,
-        onTouchStart: !holdToTalk ? undefined : handleActionStart,
-        onTouchEnd: !holdToTalk ? undefined : handleActionStop,
-        onTouchCancel: !holdToTalk ? undefined : handleActionStop // Handle system interruptions
-
-        // Desktop
-        ,
-        onMouseDown: !holdToTalk ? undefined : handleActionStart,
-        onMouseUp: !holdToTalk ? undefined : handleActionStop,
-        onMouseLeave: !holdToTalk ? undefined : handleActionStop // Handle mouse dragging out of button
+        // Mobile & Desktop 
+        // (using Pointer to avoid the stop problem caused by mixing Touch and Mouse)
         ,
+        onPointerDown: holdToTalk ? handleActionStart : undefined,
+        onPointerUp: holdToTalk ? handleActionStop : undefined,
+        onPointerCancel: holdToTalk ? handleActionStop : undefined,
+        onPointerLeave: holdToTalk ? handleActionStop : undefined,
+        onContextMenu: function onContextMenu(e) {
+          return e.preventDefault();
+        },
         onClick: function onClick(e) {
           e.preventDefault();
           e.stopPropagation();

package/lib/css/Chatbox/index.css

@@ -463,6 +463,16 @@
   width: 40px;
   height: 40px;
   z-index: 4;
+  pointer-events: all;
+  /* Core: Disable the system popup menu during long press */
+  -webkit-touch-callout: none;
+  /* Disable text selection */
+  -webkit-user-select: none;
+  user-select: none;
+  /* Core: Disable all default browser gestures to ensure touch events are passed directly to JS */
+  touch-action: none;
+  /* Remove the default tap highlight color on iOS for faster response perception */
+  -webkit-tap-highlight-color: transparent;
 }
 .custom-chatbox-container .msgcontrol [class*=chatbox-voice-input-btn] svg path {
   fill: var(--custom-chatbox-primary-text);

package/lib/esm/Chatbox/index.scss

@@ -560,6 +560,20 @@
             width: 40px;
             height: 40px;
             z-index: 4;
+            pointer-events: all;
+
+            /* Core: Disable the system popup menu during long press */
+            -webkit-touch-callout: none;
+
+            /* Disable text selection */
+            -webkit-user-select: none;
+            user-select: none;
+
+            /* Core: Disable all default browser gestures to ensure touch events are passed directly to JS */
+            touch-action: none;
+
+            /* Remove the default tap highlight color on iOS for faster response perception */
+            -webkit-tap-highlight-color: transparent;
 
             svg path {
                 fill: var(--custom-chatbox-primary-text);

package/lib/esm/Chatbox/index.tsx

@@ -1380,6 +1380,7 @@ const Chatbox = (props: ChatboxProps) => {
     //================================================================
     // Voice Input
     //================================================================
+    const pressStartTimeRef = useRef<number>(0); // Record the time when the button was pressed.
     const DEFAULT_VOICE_REQUEST_BODY_TEMPLATE = `{
         "common": {
             "app_id": "{appId}"
@@ -1730,6 +1731,7 @@ const Chatbox = (props: ChatboxProps) => {
             console.error('--> The voice input failed to start:', error);
             config.onVoiceInputError?.(error as Error);
         }
+
     };
 
     const stopVoiceInput = async () => {
@@ -2065,24 +2067,36 @@ const Chatbox = (props: ChatboxProps) => {
                             if (enableVoiceInput) {
 
                                 // Helper to stop recording safely
-                                const handleActionStop = (e: React.SyntheticEvent) => {
-                                    // Prevent firing both Mouse and Touch events on some devices
-                                    if (e.cancelable) e.preventDefault(); 
-                                    
-                                    if (isVoiceInputActive) {
-                                        stopVoiceInput();
-                                    }
-                                };
-
                                 const handleActionStart = (e: React.SyntheticEvent) => {
                                     if (loading) return;
                                     if (e.cancelable) e.preventDefault();
-
+                                    
+                                    pressStartTimeRef.current = Date.now();
+                                    
                                     if (!isVoiceInputActive) {
                                         startVoiceInput();
                                     }
                                 };
 
+                                const handleActionStop = (e: React.SyntheticEvent) => {
+                                    if (e.cancelable) e.preventDefault(); 
+                                    
+                                    const duration = Date.now() - pressStartTimeRef.current;
+                                
+                                    // If the press time is extremely short (e.g. less than 100ms), 
+                                    // it means that it is a mistakeal touch or extremely fast
+                                    // Add a small delay to execute to ensure that startVoiceInput has finished initializing
+                                    if (duration < 150) { // > 50, < 160
+                                        setTimeout(() => {
+                                            stopVoiceInput();
+                                        }, 100);
+                                        return;
+                                    }
+
+                                    stopVoiceInput();
+
+                                };
+
                                 return (
                                     <div className={`${args().prefix || 'custom-'}chatbox-voice-input-btn-wrapper ${isVoiceInputActive ? 'active' : ''}`}>
                                         {isVoiceInputActive ? <span></span> : null}
@@ -2090,15 +2104,13 @@ const Chatbox = (props: ChatboxProps) => {
                                             // CSS touch-action is crucial here
                                             style={!holdToTalk ? undefined : { touchAction: 'none', userSelect: 'none' }}
 
-                                            // Mobile
-                                            onTouchStart={!holdToTalk ? undefined : handleActionStart}
-                                            onTouchEnd={!holdToTalk ? undefined : handleActionStop}
-                                            onTouchCancel={!holdToTalk ? undefined : handleActionStop} // Handle system interruptions
-
-                                            // Desktop
-                                            onMouseDown={!holdToTalk ? undefined : handleActionStart}
-                                            onMouseUp={!holdToTalk ? undefined : handleActionStop}
-                                            onMouseLeave={!holdToTalk ? undefined : handleActionStop} // Handle mouse dragging out of button
+                                            // Mobile & Desktop 
+                                            // (using Pointer to avoid the stop problem caused by mixing Touch and Mouse)
+                                            onPointerDown={holdToTalk ? handleActionStart : undefined}
+                                            onPointerUp={holdToTalk ? handleActionStop : undefined}
+                                            onPointerCancel={holdToTalk ? handleActionStop : undefined}
+                                            onPointerLeave={holdToTalk ? handleActionStop : undefined}
+                                            onContextMenu={(e) => e.preventDefault()}
                                             onClick={(e: React.MouseEvent) => {
                                                 e.preventDefault();
                                                 e.stopPropagation();

package/lib/esm/Chatbox/utils/func.ts

@@ -171,7 +171,7 @@ export function extractHtmlTags(html: string): { processedHtml: string; placehol
 };
 
 
-export function toBoolean(val) {
+export function toBoolean(val: any) {
     if (typeof val === "boolean") return val;
     if (typeof val === "string") {
         return val.toLowerCase() === "true";

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.822","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.855","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}