funda-ui 4.6.111 → 4.6.222

package/lib/cjs/Date/index.js

@@ -5002,6 +5002,9 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
   var defaultValueIsEmpty = function defaultValueIsEmpty(s) {
     return typeof s === 'undefined' || s === null || s === 'null' || s === '';
   };
+  var propExist = function propExist(p) {
+    return typeof p !== 'undefined' && p !== null && p !== '';
+  };
 
   // Localization
   var _langHoursTitle = langHoursTitle || 'Hours';
@@ -5613,6 +5616,54 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     }
     return [_res, v];
   }
+  function tools() {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+      className: (0,cls.combinedCls)('date2d__control-tools', {
+        'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
+      })
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
+      tabIndex: -1,
+      href: "#",
+      className: (0,cls.combinedCls)('date2d__control-tools__close', {
+        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
+      }),
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation(); // Avoid triggering pop-ups
+
+        clearAll();
+        onClear === null || onClear === void 0 ? void 0 : onClear(getFullTimeData(''));
+      }
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
+      width: "12px",
+      height: "12px",
+      viewBox: "0 0 1024 1024"
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
+      fill: "#000",
+      d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+    }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
+      tabIndex: -1,
+      href: "#",
+      className: "date2d__control-tools__trigger",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation(); // Avoid triggering pop-ups
+
+        handleShow();
+      }
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
+      width: "14px",
+      height: "14px",
+      viewBox: "0 0 24 24",
+      fill: "none"
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
+      d: "M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z",
+      stroke: "#000000",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }))));
+  }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // update default value
     //--------------
@@ -5931,54 +5982,9 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         setChangedVal(_full);
         setTimeVal([splitVals[3], splitVals[4], _val]);
       }
-    }, attributes))) : null) : null)),
+    }, attributes))) : null) : null), propExist(iconRight) ? tools() : null),
     style: style
-  }, attributes)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
-    className: (0,cls.combinedCls)('date2d__control-tools', {
-      'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
-    })
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
-    tabIndex: -1,
-    href: "#",
-    className: (0,cls.combinedCls)('date2d__control-tools__close', {
-      'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
-    }),
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation(); // Avoid triggering pop-ups
-
-      clearAll();
-      onClear === null || onClear === void 0 ? void 0 : onClear(getFullTimeData(''));
-    }
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
-    width: "12px",
-    height: "12px",
-    viewBox: "0 0 1024 1024"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
-    fill: "#000",
-    d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
-  }))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("a", {
-    tabIndex: -1,
-    href: "#",
-    className: "date2d__control-tools__trigger",
-    onClick: function onClick(e) {
-      e.preventDefault();
-      e.stopPropagation(); // Avoid triggering pop-ups
-
-      handleShow();
-    }
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
-    width: "14px",
-    height: "14px",
-    viewBox: "0 0 24 24",
-    fill: "none"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("path", {
-    d: "M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z",
-    stroke: "#000000",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })))))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((dist_cjs_default()), {
+  }, attributes)), !propExist(iconRight) ? tools() : null)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((dist_cjs_default()), {
     show: isShow,
     containerClassName: (0,cls.combinedCls)('Date', "Date--".concat(type))
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", _extends({

package/lib/cjs/Select/index.d.ts

@@ -13,9 +13,9 @@ export interface OptionConfig {
     disabled?: boolean;
     optgroup?: any[];
     group?: boolean;
-    label: any;
-    listItemLabel?: any;
-    value: any;
+    label: string;
+    listItemLabel?: string;
+    value: string | number | boolean;
     queryString: string | number;
     callback?: () => void;
 }
@@ -46,7 +46,7 @@ export declare type SelectProps = {
     multiSelect?: MultiSelectConfig;
     multiSelectEntireAreaTrigger?: boolean;
     multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
-    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => void;
+    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     cleanTrigger?: CleanTriggerConfig;
     defaultValue?: string | OptionConfig;
     value?: string | OptionConfig;

package/lib/cjs/TagInput/index.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+export interface TagValConfig {
+    content: string;
+    id: number;
+    [key: string]: string | boolean | number;
+}
 export declare type TagInputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -13,6 +18,7 @@ export declare type TagInputProps = {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    renderSelectedValue?: (selectedData: TagValConfig[], removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     /** Whether to use square brackets to save result and initialize default value */
     extractValueByBrackets?: boolean;
     /** -- */

package/lib/cjs/TagInput/index.js

@@ -828,7 +828,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_convert__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__);
-var _excluded = ["contentRef", "wrapperClassName", "maxTags", "disabled", "required", "placeholder", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
+var _excluded = ["contentRef", "wrapperClassName", "maxTags", "disabled", "required", "placeholder", "renderSelectedValue", "readOnly", "value", "requiredLabel", "label", "name", "id", "autoComplete", "autoCapitalize", "spellCheck", "extractValueByBrackets", "minLength", "maxLength", "style", "tabIndex", "onChange", "onBlur", "onFocus"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -850,6 +850,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     disabled = props.disabled,
     required = props.required,
     placeholder = props.placeholder,
+    renderSelectedValue = props.renderSelectedValue,
     readOnly = props.readOnly,
     value = props.value,
     requiredLabel = props.requiredLabel,
@@ -932,6 +933,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   }
   function handleRemove(e) {
     e.preventDefault();
+    e.stopPropagation(); /* REQUIRED */
+
     var idToRemove = Number(e.currentTarget.dataset.item);
     var newArray = items.filter(function (item) {
       return item.id !== idToRemove;
@@ -1056,7 +1059,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     className: "tag-input__control-wrapper"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
     className: "tag-input__list"
-  }, items ? items.map(function (item, index) {
+  }, typeof renderSelectedValue === 'function' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, renderSelectedValue(items, handleRemove)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, items ? items.map(function (item, index) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: index
     }, item.content, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
@@ -1072,7 +1075,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       fill: "#000",
       d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
     }))));
-  }) : null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+  }) : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__control', {
       'disabled': disabled
     }),

package/lib/css/Chatbox/index.css

@@ -1,24 +1,19 @@
 /*=================== Chatbox (Loading) =================*/
 .custom-chatbox-loader-container {
+  --custom-chatbox-loader-color: #b9caf7;
+  --custom-chatbox-loader-color2: #0d6efd;
   width: 130px;
   text-align: start;
 }
 .custom-chatbox-loader-container .custom-chatbox-loader {
   height: 4px;
   width: 100%;
-  --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
-  background: var(--c), var(--c), #b9caf7;
+  --c: no-repeat linear-gradient(var(--custom-chatbox-loader-color2) 0 0);
+  background: var(--c), var(--c), var(--custom-chatbox-loader-color);
   background-size: 60% 100%;
-  animation: cssAnim--loadermove 3s infinite;
+  animation: loader-move 3s infinite;
 }
-
-.dark-mode .custom-chatbox-loader-container .custom-chatbox-loader,
-[data-bs-theme=dark] .custom-chatbox-loader-container .custom-chatbox-loader {
-  --c: no-repeat linear-gradient(var(--bs-primary) 0 0);
-  background: var(--c), var(--c), #8692b5;
-}
-
-@keyframes cssAnim--loadermove {
+@keyframes loader-move {
   0% {
     background-position: -150% 0, -150% 0;
   }
@@ -29,6 +24,29 @@
     background-position: 250% 0, 250% 0;
   }
 }
+
+.custom-chatbox-mini-loader {
+  --custom-chatbox-miniloader-color: rgba(0,0,0,.5);
+  width: 15px;
+  height: 15px;
+  margin: 0.5rem;
+  margin-bottom: 0;
+  border: 3px dotted var(--custom-chatbox-miniloader-color);
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: mini-loader-spin 1s linear infinite;
+}
+@keyframes mini-loader-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /*===================  Chatbox (Core) =================*/
 .custom-chatbox-circle {
   --custom-chatbox-circle-color: #5A5EB9;
@@ -113,6 +131,10 @@
   --custom-chatbox-toolkit-opt-border-color: #e9ecef;
   --custom-chatbox-toolkit-opt-active-color: #c2dfff;
   --custom-chatbox-toolkit-btn-radius: 20px;
+  --custom-chatbox-questions-bg: #f5f5f5;
+  --custom-chatbox-questions-hover-bg: #e9e9e9;
+  --custom-chatbox-content-html-elem-border-color: #ddd;
+  --custom-chatbox-content-html-elem-bg: rgba(0,0,0,.05);
   min-width: var(--custom-chatbox-w);
   max-width: var(--custom-chatbox-w);
   margin: auto;
@@ -132,6 +154,7 @@
   /* new chat button */
   /* toolkit buttons */
   /* toolkit options */
+  /* default questions */
 }
 .custom-chatbox-container details {
   font-style: italic;
@@ -139,6 +162,8 @@
   padding: 0;
   font-size: 0.75rem;
   margin-bottom: 0.5rem;
+  background: var(--custom-chatbox-msg-bg);
+  padding: 0.5rem;
 }
 .custom-chatbox-container summary {
   cursor: pointer;
@@ -168,7 +193,7 @@
   font-size: 0.75rem;
 }
 .custom-chatbox-container .messages {
-  height: calc(100% - 80px);
+  height: calc(100% - 110px);
   overflow-y: auto;
   margin-bottom: 10px;
   font-size: 13px;
@@ -213,6 +238,33 @@
   margin-top: 0.3rem;
   display: inline-block;
   text-align: start;
+  /* Custom HTML Styles */
+}
+.custom-chatbox-container .messages .qa-content .table-container {
+  overflow-x: auto;
+  margin-bottom: 0.5rem;
+}
+.custom-chatbox-container .messages .qa-content .table-container::-webkit-scrollbar {
+  height: 10px;
+}
+.custom-chatbox-container .messages .qa-content .table-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+}
+.custom-chatbox-container .messages .qa-content .table-container table {
+  width: 100%;
+  border-collapse: collapse;
+  border-radius: 0.35rem;
+}
+.custom-chatbox-container .messages .qa-content .table-container table thead {
+  background: var(--custom-chatbox-content-html-elem-bg);
+}
+.custom-chatbox-container .messages .qa-content .table-container table thead tr {
+  white-space: nowrap;
+}
+.custom-chatbox-container .messages .qa-content .table-container table th, .custom-chatbox-container .messages .qa-content .table-container table td {
+  padding: 0.25rem;
+  text-align: left;
+  border: 1px solid var(--custom-chatbox-content-html-elem-border-color);
 }
 .custom-chatbox-container .messages .request {
   text-align: end;
@@ -229,6 +281,8 @@
 }
 .custom-chatbox-container .messages .reply .qa-content {
   width: var(--custom-chatbox-content-w);
+  background: transparent;
+  padding-top: 0;
 }
 .custom-chatbox-container .msg-dotted-loader-container {
   font-weight: normal;
@@ -370,6 +424,11 @@
 }
 .custom-chatbox-container .newchat-btn {
   text-align: center;
+  position: absolute;
+  bottom: 95px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
 }
 .custom-chatbox-container .newchat-btn > button {
   padding: 3px 6px;
@@ -434,7 +493,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border: 1px solid #ddd;
+  border: 1px solid var(--custom-chatbox-gray-color);
   border-radius: var(--custom-chatbox-toolkit-btn-radius);
   cursor: pointer;
 }
@@ -459,6 +518,7 @@
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
   margin-bottom: 10px;
   max-height: 300px;
+  min-width: 120px;
   overflow-y: auto;
   animation: dropupAnimation 0.2s ease;
   position: absolute;
@@ -486,6 +546,27 @@
 .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.cancel {
   color: var(--custom-chatbox-gray-color);
 }
-.custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
+.custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option.selected:not(.cancel), .custom-chatbox-container .toolkit-select-wrapper .toolkit-select-option:hover {
   background-color: var(--custom-chatbox-toolkit-opt-active-color);
 }
+.custom-chatbox-container .default-questions-title {
+  margin-bottom: 0.5rem;
+}
+.custom-chatbox-container .default-questions {
+  padding: 15px;
+  width: 100%;
+}
+.custom-chatbox-container .default-question-item {
+  padding: 0.3rem 1rem;
+  margin-bottom: 0.2rem;
+  background-color: var(--custom-chatbox-questions-bg);
+  border-radius: 0.35rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+.custom-chatbox-container .default-question-item:hover {
+  background-color: var(--custom-chatbox-questions-hover-bg);
+}
+.custom-chatbox-container .default-question-item:last-child {
+  margin-bottom: 0;
+}

package/lib/esm/Chatbox/PureLoader.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 
 type PureLoaderProps = {
+    prefix?: string;
     txt?: React.ReactNode;
     center?: boolean;
     customClassName?: string;
@@ -12,6 +13,7 @@ type PureLoaderProps = {
 const PureLoader = (props: PureLoaderProps) => {
 
     const {
+        prefix = 'custom-',
         txt,
         center,
         customClassName
@@ -21,11 +23,11 @@ const PureLoader = (props: PureLoaderProps) => {
     return (
         <>
 
-            <div className={`app-chatbox-loader-container ${customClassName || ''}`}>
+            <div className={`${prefix}chatbox-loader-container ${customClassName || ''}`}>
                 <div className="row g-0 align-items-center">
                     <div className={center ? 'text-center' : ''}><small>{txt || txt === '' ? txt : 'Loading...'}</small></div>
                     <div>
-                        <div className="app-chatbox-loader"></div>
+                        <div className="${prefix}chatbox-loader"></div>
                     </div>
                 </div>
             </div>

package/lib/esm/Chatbox/TypingEffect.tsx

@@ -1,57 +1,28 @@
 import React, { useEffect, useState } from 'react';
 
-interface TypingEffectProps {
+// extract
+import { extractHtmlTags } from './utils/func';
+import type { HtmlTagPlaceholder } from './utils/func';
+
+export interface TypingEffectProps {
     content: string; // The content to display
     speed: number; // Speed of typing in milliseconds
     onComplete?: () => void; // Callback when typing is complete
     onUpdate?: () => void; // Callback when typing
 }
 
-interface ImagePlaceholder {
-    original: string;
-    placeholder: string;
-    type: 'img' | 'svg';
-}
+
 const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete, onUpdate }) => {
     const [displayedContent, setDisplayedContent] = useState<string>('');
     const [index, setIndex] = useState<number>(0);
-    const [imagePlaceholders, setImagePlaceholders] = useState<ImagePlaceholder[]>([]);
+    const [htmlTagPlaceholder, setHtmlTagPlaceholders] = useState<HtmlTagPlaceholder[]>([]);
     const [processedContent, setProcessedContent] = useState<string>('');
 
     // Extract and replace image tags
     useEffect(() => {
-        const extractImages = (html: string): { processedHtml: string; placeholders: ImagePlaceholder[] } => {
-            const placeholders: ImagePlaceholder[] = [];
-            let processedHtml = html;
-
-            // <img>
-            processedHtml = processedHtml.replace(/<img[^>]*>/g, (match) => {
-                const placeholder = `[IMG_${placeholders.length}]`;
-                placeholders.push({
-                    original: match,
-                    placeholder,
-                    type: 'img'
-                });
-                return placeholder;
-            });
-
-            // <svg>
-            processedHtml = processedHtml.replace(/<svg[^>]*>[\s\S]*?<\/svg>/g, (match) => {
-                const placeholder = `[SVG_${placeholders.length}]`;
-                placeholders.push({
-                    original: match,
-                    placeholder,
-                    type: 'svg'
-                });
-                return placeholder;
-            });
-
-            return { processedHtml, placeholders };
-        };
-
-        const { processedHtml, placeholders } = extractImages(content);
+        const { processedHtml, placeholders } = extractHtmlTags(content);
         setProcessedContent(processedHtml);
-        setImagePlaceholders(placeholders);
+        setHtmlTagPlaceholders(placeholders);
     }, [content]);
 
     // Handle typing effects
@@ -61,7 +32,7 @@ const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete,
                 let newContent = processedContent.substring(0, index + 1);
                 
                 // Replace the completed placeholder
-                imagePlaceholders.forEach(({ original, placeholder }) => {
+                htmlTagPlaceholder.forEach(({ original, placeholder }) => {
                     if (newContent.includes(placeholder)) {
                         newContent = newContent.replace(placeholder, original);
                     }
@@ -77,9 +48,9 @@ const TypingEffect: React.FC<TypingEffectProps> = ({ content, speed, onComplete,
         }, speed);
 
         return () => clearInterval(timer);
-    }, [processedContent, index, speed, onComplete, onUpdate, imagePlaceholders]);
+    }, [processedContent, index, speed, onComplete, onUpdate, htmlTagPlaceholder]);
 
-    return <span dangerouslySetInnerHTML={{ __html: displayedContent }} />;
+    return <div dangerouslySetInnerHTML={{ __html: displayedContent }} />;
 };
 
 export default TypingEffect;