funda-ui 4.7.815 → 4.7.850

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),
@@ -7746,18 +7747,39 @@ var Chatbox = function Chatbox(props) {
             }));
             ws.onmessage = function (e) {
               var jsonData = JSON.parse(e.data);
-              if (jsonData.data && jsonData.data.result) {
-                var data = jsonData.data.result;
-                var path = config.voiceResponseExtractor || "ws[].cw[0].w";
-                var extractedStr = getValueByPath(data, path);
-
-                // Only update the temporary variable when content is extracted to prevent it from being overwritten by empty responses
-                if (extractedStr) {
-                  if (data.pgs === "apd") {
-                    resultText += resultTextTemp;
+              if (jsonData.data) {
+                var data = jsonData.data;
+                var extractorTemplate = config.voiceResponseExtractor || "{{if data.result && data.result.pgs === \"apd\"}}resultText += resultTextTemp;{{/if}}{{resultTextTemp = getValueByPath(data, \"result.ws[].cw[0].w\");}}";
+
+                // you could use `if (data.result && data.result.pgs === "apd") { resultText += resultTextTemp;} resultTextTemp = data.result.ws.map(w => w.cw[0].w).join("");`
+
+                if (extractorTemplate) {
+                  try {
+                    // Construct the execution function, passing in the context variables
+                    // Syntax Translation: Convert {{if}} to standard JS
+                    // Support: {{if}}, {{else}}, {{/if}}, and direct expressions {{...}}
+                    var jsScript = extractorTemplate.replace(/{{if\s+(.+?)}}/g, 'if ($1) {').replace(/{{else}}/g, '} else {').replace(/{{\/if}}/g, '}').replace(/{{(.+?)}}/g, '$1');
+
+                    /**
+                     * Sandbox Execution Environment
+                     * @param data - The source data (jsonData.data)
+                     * @param resultText - Confirmed text from previous turns
+                     * @param resultTextTemp - Temporary text from the current turn
+                     * @param getValueByPath - Helper for safe property access
+                     */
+                    var resolver = new Function('data', 'resultText', 'resultTextTemp', 'getValueByPath', "\n                                try {\n                                    ".concat(jsScript, "\n                                } catch (e) {\n                                    console.error(\"Voice Template Runtime Error:\", e);\n                                }\n                                // Crucial: Return updated values to synchronize with component scope\n                                return { resultText, resultTextTemp };\n                            "));
+
+                    // Execute and update local variables
+                    var updated = resolver(data, resultText, resultTextTemp, getValueByPath);
+                    resultText = updated.resultText;
+                    resultTextTemp = updated.resultTextTemp;
+                  } catch (err) {
+                    console.error("--> [ERROR] Failed to parse property: [voiceResponseExtractor]");
+                    interruptVoiceInput();
                   }
-                  resultTextTemp = extractedStr;
                 }
+
+                //
                 var currentFullText = resultText + resultTextTemp;
 
                 // Store to Ref for use by stopVoiceInput
@@ -8193,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", {
@@ -8216,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),
@@ -7746,18 +7747,39 @@ var Chatbox = function Chatbox(props) {
             }));
             ws.onmessage = function (e) {
               var jsonData = JSON.parse(e.data);
-              if (jsonData.data && jsonData.data.result) {
-                var data = jsonData.data.result;
-                var path = config.voiceResponseExtractor || "ws[].cw[0].w";
-                var extractedStr = getValueByPath(data, path);
-
-                // Only update the temporary variable when content is extracted to prevent it from being overwritten by empty responses
-                if (extractedStr) {
-                  if (data.pgs === "apd") {
-                    resultText += resultTextTemp;
+              if (jsonData.data) {
+                var data = jsonData.data;
+                var extractorTemplate = config.voiceResponseExtractor || "{{if data.result && data.result.pgs === \"apd\"}}resultText += resultTextTemp;{{/if}}{{resultTextTemp = getValueByPath(data, \"result.ws[].cw[0].w\");}}";
+
+                // you could use `if (data.result && data.result.pgs === "apd") { resultText += resultTextTemp;} resultTextTemp = data.result.ws.map(w => w.cw[0].w).join("");`
+
+                if (extractorTemplate) {
+                  try {
+                    // Construct the execution function, passing in the context variables
+                    // Syntax Translation: Convert {{if}} to standard JS
+                    // Support: {{if}}, {{else}}, {{/if}}, and direct expressions {{...}}
+                    var jsScript = extractorTemplate.replace(/{{if\s+(.+?)}}/g, 'if ($1) {').replace(/{{else}}/g, '} else {').replace(/{{\/if}}/g, '}').replace(/{{(.+?)}}/g, '$1');
+
+                    /**
+                     * Sandbox Execution Environment
+                     * @param data - The source data (jsonData.data)
+                     * @param resultText - Confirmed text from previous turns
+                     * @param resultTextTemp - Temporary text from the current turn
+                     * @param getValueByPath - Helper for safe property access
+                     */
+                    var resolver = new Function('data', 'resultText', 'resultTextTemp', 'getValueByPath', "\n                                try {\n                                    ".concat(jsScript, "\n                                } catch (e) {\n                                    console.error(\"Voice Template Runtime Error:\", e);\n                                }\n                                // Crucial: Return updated values to synchronize with component scope\n                                return { resultText, resultTextTemp };\n                            "));
+
+                    // Execute and update local variables
+                    var updated = resolver(data, resultText, resultTextTemp, getValueByPath);
+                    resultText = updated.resultText;
+                    resultTextTemp = updated.resultTextTemp;
+                  } catch (err) {
+                    console.error("--> [ERROR] Failed to parse property: [voiceResponseExtractor]");
+                    interruptVoiceInput();
                   }
-                  resultTextTemp = extractedStr;
                 }
+
+                //
                 var currentFullText = resultText + resultTextTemp;
 
                 // Store to Ref for use by stopVoiceInput
@@ -8193,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", {
@@ -8216,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/esm/Chatbox/index.tsx

@@ -16,6 +16,7 @@ import guid from 'funda-utils/dist/cjs/guid';
 import { uint8arrayToBase64Str } from 'funda-utils/dist/cjs/buffer';
 
 
+
 // loader
 import PureLoader from './PureLoader';
 import TypingEffect from './TypingEffect';
@@ -1379,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}"
@@ -1582,20 +1584,55 @@ const Chatbox = (props: ChatboxProps) => {
 
             ws.onmessage = (e) => {
                 const jsonData = JSON.parse(e.data);
-                if (jsonData.data && jsonData.data.result) {
-                    const data = jsonData.data.result;
 
-                    const path = config.voiceResponseExtractor || "ws[].cw[0].w";
-                    const extractedStr = getValueByPath(data, path);
-                    
-                    // Only update the temporary variable when content is extracted to prevent it from being overwritten by empty responses
-                    if (extractedStr) {
-                        if (data.pgs === "apd") {
-                            resultText += resultTextTemp;
+                if (jsonData.data) {
+                    const data = jsonData.data;
+                    const extractorTemplate = config.voiceResponseExtractor || `{{if data.result && data.result.pgs === "apd"}}resultText += resultTextTemp;{{/if}}{{resultTextTemp = getValueByPath(data, "result.ws[].cw[0].w");}}`;
+
+                    // you could use `if (data.result && data.result.pgs === "apd") { resultText += resultTextTemp;} resultTextTemp = data.result.ws.map(w => w.cw[0].w).join("");`
+
+
+                    if (extractorTemplate) {
+                        try {
+
+                            // Construct the execution function, passing in the context variables
+                            // Syntax Translation: Convert {{if}} to standard JS
+                            // Support: {{if}}, {{else}}, {{/if}}, and direct expressions {{...}}
+                            let jsScript = extractorTemplate
+                                .replace(/{{if\s+(.+?)}}/g, 'if ($1) {')
+                                .replace(/{{else}}/g, '} else {')
+                                .replace(/{{\/if}}/g, '}')
+                                .replace(/{{(.+?)}}/g, '$1');
+
+                            /**
+                             * Sandbox Execution Environment
+                             * @param data - The source data (jsonData.data)
+                             * @param resultText - Confirmed text from previous turns
+                             * @param resultTextTemp - Temporary text from the current turn
+                             * @param getValueByPath - Helper for safe property access
+                             */
+                            const resolver = new Function('data', 'resultText', 'resultTextTemp', 'getValueByPath', `
+                                try {
+                                    ${jsScript}
+                                } catch (e) {
+                                    console.error("Voice Template Runtime Error:", e);
+                                }
+                                // Crucial: Return updated values to synchronize with component scope
+                                return { resultText, resultTextTemp };
+                            `);
+
+                            // Execute and update local variables
+                            const updated = resolver(data, resultText, resultTextTemp, getValueByPath);
+                            resultText = updated.resultText;
+                            resultTextTemp = updated.resultTextTemp;
+
+                        } catch (err) {
+                            console.error("--> [ERROR] Failed to parse property: [voiceResponseExtractor]");
+                            interruptVoiceInput();
                         }
-                        resultTextTemp = extractedStr;
                     }
 
+                    //
                     const currentFullText = resultText + resultTextTemp;
 
                     // Store to Ref for use by stopVoiceInput
@@ -1694,6 +1731,7 @@ const Chatbox = (props: ChatboxProps) => {
             console.error('--> The voice input failed to start:', error);
             config.onVoiceInputError?.(error as Error);
         }
+
     };
 
     const stopVoiceInput = async () => {
@@ -2029,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}
@@ -2054,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.815","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.850","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"}}