funda-ui 4.6.344 → 4.6.358

package/Chatbox/index.css

@@ -364,20 +364,27 @@
   bottom: 10px;
   z-index: 1;
   width: calc(100% - 40px);
+  border: 1px solid var(--custom-chatbox-gray-color);
+  border-radius: 0.35rem;
+  transition: all 0.3s ease;
 }
 .custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
   display: inline;
 }
+.custom-chatbox-container .msgcontrol.focus {
+  border-color: var(--app-chatbox-primary-color);
+}
 .custom-chatbox-container .msgcontrol .messageInput {
   width: 100%;
-  border: 1px solid var(--custom-chatbox-msg-border);
   border-radius: 4px;
   font-size: 0.875rem;
   border: none;
   outline: none;
+  margin-bottom: 2.2rem;
 }
 .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
   background: var(--custom-chatbox-input-bg);
@@ -387,7 +394,7 @@
   color: var(--custom-chatbox-default-txt-color);
   resize: none;
   max-height: 50vh;
-  border: 1px solid var(--custom-chatbox-gray-color);
+  border: none;
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
   width: 3px;
@@ -397,7 +404,8 @@
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
   border-color: transparent;
-  outline: 1px solid var(--custom-chatbox-primary-color);
+  outline: none;
+  box-shadow: none;
 }
 .custom-chatbox-container .msgcontrol button {
   padding: 6px;
@@ -413,7 +421,7 @@
   font-size: 0.875rem;
   z-index: 2;
   right: 0.4rem;
-  bottom: 0.7rem;
+  bottom: 0.3rem;
   width: 40px;
   height: 40px;
   padding: 0;
@@ -466,7 +474,7 @@
 .custom-chatbox-container .toolkit-btns {
   display: flex;
   position: absolute;
-  bottom: 20px;
+  bottom: 15px;
   margin-left: 5px;
   z-index: 1;
   flex-wrap: wrap;

package/Chatbox/index.js

@@ -4258,36 +4258,40 @@ var Chatbox = function Chatbox(props) {
   var inputContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = src_slicedToArray(_useState, 2),
-    loaderDisplay = _useState2[0],
-    setLoaderDisplay = _useState2[1];
+    focused = _useState2[0],
+    setFocused = _useState2[1];
   var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState4 = src_slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
+    loaderDisplay = _useState4[0],
+    setLoaderDisplay = _useState4[1];
   var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState6 = src_slicedToArray(_useState5, 2),
-    thinking = _useState6[0],
-    setThinking = _useState6[1];
+    loading = _useState6[0],
+    setLoading = _useState6[1];
   var _useState7 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState8 = src_slicedToArray(_useState7, 2),
-    show = _useState8[0],
-    setShow = _useState8[1];
-  var _useState9 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
+    thinking = _useState8[0],
+    setThinking = _useState8[1];
+  var _useState9 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState10 = src_slicedToArray(_useState9, 2),
-    msgList = _useState10[0],
-    setMsgList = _useState10[1];
-  var _useState11 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    show = _useState10[0],
+    setShow = _useState10[1];
+  var _useState11 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
     _useState12 = src_slicedToArray(_useState11, 2),
-    elapsedTime = _useState12[0],
-    setElapsedTime = _useState12[1];
-  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(''),
+    msgList = _useState12[0],
+    setMsgList = _useState12[1];
+  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
     _useState14 = src_slicedToArray(_useState13, 2),
-    tempAnimText = _useState14[0],
-    setTempAnimText = _useState14[1];
-  var _useState15 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(true),
+    elapsedTime = _useState14[0],
+    setElapsedTime = _useState14[1];
+  var _useState15 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(''),
     _useState16 = src_slicedToArray(_useState15, 2),
-    enableStreamMode = _useState16[0],
-    setEnableStreamMode = _useState16[1];
+    tempAnimText = _useState16[0],
+    setTempAnimText = _useState16[1];
+  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(true),
+    _useState18 = src_slicedToArray(_useState17, 2),
+    enableStreamMode = _useState18[0],
+    setEnableStreamMode = _useState18[1];
   var animatedMessagesRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(new Set()); // Add a ref to keep track of messages that have already been animated
 
   //
@@ -4584,10 +4588,10 @@ var Chatbox = function Chatbox(props) {
   //================================================================
   // Custom Questions
   //================================================================
-  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultQuestions),
-    _useState18 = src_slicedToArray(_useState17, 2),
-    questions = _useState18[0],
-    setQuestions = _useState18[1];
+  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultQuestions),
+    _useState20 = src_slicedToArray(_useState19, 2),
+    questions = _useState20[0],
+    setQuestions = _useState20[1];
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.defaultQuestions) {
       setQuestions(props.defaultQuestions);
@@ -4608,10 +4612,10 @@ var Chatbox = function Chatbox(props) {
   // Custom buttons
   //================================================================
   var toolkitBtnsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState20 = src_slicedToArray(_useState19, 2),
-    activeButtons = _useState20[0],
-    setActiveButtons = _useState20[1];
+  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState22 = src_slicedToArray(_useState21, 2),
+    activeButtons = _useState22[0],
+    setActiveButtons = _useState22[1];
   var closeDropdowns = function closeDropdowns() {
     setActiveButtons(function (prev) {
       var _args$toolkitButtons;
@@ -4685,15 +4689,15 @@ var Chatbox = function Chatbox(props) {
   }();
 
   // options
-  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState22 = src_slicedToArray(_useState21, 2),
-    selectedOpt = _useState22[0],
-    setSelectedOpt = _useState22[1];
-  // Store dynamic options
   var _useState23 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
     _useState24 = src_slicedToArray(_useState23, 2),
-    dynamicOptions = _useState24[0],
-    setDynamicOptions = _useState24[1];
+    selectedOpt = _useState24[0],
+    setSelectedOpt = _useState24[1];
+  // Store dynamic options
+  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState26 = src_slicedToArray(_useState25, 2),
+    dynamicOptions = _useState26[0],
+    setDynamicOptions = _useState26[1];
   var getButtonOptions = function getButtonOptions(btn, buttonId) {
     // If you are using the dynamic option and already have a cache, return the option for caching
     //---------
@@ -5659,7 +5663,7 @@ var Chatbox = function Chatbox(props) {
       __html: ((_args$newChatButton = args().newChatButton) === null || _args$newChatButton === void 0 ? void 0 : _args$newChatButton.label) || ''
     }
   })))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "msgcontrol"
+    className: "msgcontrol ".concat(focused ? 'focus' : '')
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
     ref: msInput,
     contentRef: inputContentRef,
@@ -5681,7 +5685,13 @@ var Chatbox = function Chatbox(props) {
       var _args$onInputChange, _args16;
       (_args$onInputChange = (_args16 = args()).onInputChange) === null || _args$onInputChange === void 0 ? void 0 : _args$onInputChange.call(_args16, inputContentRef.current, e.target.value);
     },
-    rows: args().defaultRows || 3,
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    },
+    rows: args().defaultRows || 2,
     autoSize: true,
     autoSizeMaxHeight: 200
   }), loading ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {

package/lib/cjs/Chatbox/index.js

@@ -4258,36 +4258,40 @@ var Chatbox = function Chatbox(props) {
   var inputContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = src_slicedToArray(_useState, 2),
-    loaderDisplay = _useState2[0],
-    setLoaderDisplay = _useState2[1];
+    focused = _useState2[0],
+    setFocused = _useState2[1];
   var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState4 = src_slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
+    loaderDisplay = _useState4[0],
+    setLoaderDisplay = _useState4[1];
   var _useState5 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState6 = src_slicedToArray(_useState5, 2),
-    thinking = _useState6[0],
-    setThinking = _useState6[1];
+    loading = _useState6[0],
+    setLoading = _useState6[1];
   var _useState7 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState8 = src_slicedToArray(_useState7, 2),
-    show = _useState8[0],
-    setShow = _useState8[1];
-  var _useState9 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
+    thinking = _useState8[0],
+    setThinking = _useState8[1];
+  var _useState9 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState10 = src_slicedToArray(_useState9, 2),
-    msgList = _useState10[0],
-    setMsgList = _useState10[1];
-  var _useState11 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
+    show = _useState10[0],
+    setShow = _useState10[1];
+  var _useState11 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]),
     _useState12 = src_slicedToArray(_useState11, 2),
-    elapsedTime = _useState12[0],
-    setElapsedTime = _useState12[1];
-  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(''),
+    msgList = _useState12[0],
+    setMsgList = _useState12[1];
+  var _useState13 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(0),
     _useState14 = src_slicedToArray(_useState13, 2),
-    tempAnimText = _useState14[0],
-    setTempAnimText = _useState14[1];
-  var _useState15 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(true),
+    elapsedTime = _useState14[0],
+    setElapsedTime = _useState14[1];
+  var _useState15 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(''),
     _useState16 = src_slicedToArray(_useState15, 2),
-    enableStreamMode = _useState16[0],
-    setEnableStreamMode = _useState16[1];
+    tempAnimText = _useState16[0],
+    setTempAnimText = _useState16[1];
+  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(true),
+    _useState18 = src_slicedToArray(_useState17, 2),
+    enableStreamMode = _useState18[0],
+    setEnableStreamMode = _useState18[1];
   var animatedMessagesRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(new Set()); // Add a ref to keep track of messages that have already been animated
 
   //
@@ -4584,10 +4588,10 @@ var Chatbox = function Chatbox(props) {
   //================================================================
   // Custom Questions
   //================================================================
-  var _useState17 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultQuestions),
-    _useState18 = src_slicedToArray(_useState17, 2),
-    questions = _useState18[0],
-    setQuestions = _useState18[1];
+  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(props.defaultQuestions),
+    _useState20 = src_slicedToArray(_useState19, 2),
+    questions = _useState20[0],
+    setQuestions = _useState20[1];
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (props.defaultQuestions) {
       setQuestions(props.defaultQuestions);
@@ -4608,10 +4612,10 @@ var Chatbox = function Chatbox(props) {
   // Custom buttons
   //================================================================
   var toolkitBtnsRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var _useState19 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState20 = src_slicedToArray(_useState19, 2),
-    activeButtons = _useState20[0],
-    setActiveButtons = _useState20[1];
+  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState22 = src_slicedToArray(_useState21, 2),
+    activeButtons = _useState22[0],
+    setActiveButtons = _useState22[1];
   var closeDropdowns = function closeDropdowns() {
     setActiveButtons(function (prev) {
       var _args$toolkitButtons;
@@ -4685,15 +4689,15 @@ var Chatbox = function Chatbox(props) {
   }();
 
   // options
-  var _useState21 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
-    _useState22 = src_slicedToArray(_useState21, 2),
-    selectedOpt = _useState22[0],
-    setSelectedOpt = _useState22[1];
-  // Store dynamic options
   var _useState23 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
     _useState24 = src_slicedToArray(_useState23, 2),
-    dynamicOptions = _useState24[0],
-    setDynamicOptions = _useState24[1];
+    selectedOpt = _useState24[0],
+    setSelectedOpt = _useState24[1];
+  // Store dynamic options
+  var _useState25 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)({}),
+    _useState26 = src_slicedToArray(_useState25, 2),
+    dynamicOptions = _useState26[0],
+    setDynamicOptions = _useState26[1];
   var getButtonOptions = function getButtonOptions(btn, buttonId) {
     // If you are using the dynamic option and already have a cache, return the option for caching
     //---------
@@ -5659,7 +5663,7 @@ var Chatbox = function Chatbox(props) {
       __html: ((_args$newChatButton = args().newChatButton) === null || _args$newChatButton === void 0 ? void 0 : _args$newChatButton.label) || ''
     }
   })))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "msgcontrol"
+    className: "msgcontrol ".concat(focused ? 'focus' : '')
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), {
     ref: msInput,
     contentRef: inputContentRef,
@@ -5681,7 +5685,13 @@ var Chatbox = function Chatbox(props) {
       var _args$onInputChange, _args16;
       (_args$onInputChange = (_args16 = args()).onInputChange) === null || _args$onInputChange === void 0 ? void 0 : _args$onInputChange.call(_args16, inputContentRef.current, e.target.value);
     },
-    rows: args().defaultRows || 3,
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    },
+    rows: args().defaultRows || 2,
     autoSize: true,
     autoSizeMaxHeight: 200
   }), loading ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("button", {

package/lib/css/Chatbox/index.css

@@ -364,20 +364,27 @@
   bottom: 10px;
   z-index: 1;
   width: calc(100% - 40px);
+  border: 1px solid var(--custom-chatbox-gray-color);
+  border-radius: 0.35rem;
+  transition: all 0.3s ease;
 }
 .custom-chatbox-container .msgcontrol img, .custom-chatbox-container .msgcontrol svg, .custom-chatbox-container .msgcontrol video, .custom-chatbox-container .msgcontrol canvas, .custom-chatbox-container .msgcontrol audio, .custom-chatbox-container .msgcontrol iframe, .custom-chatbox-container .msgcontrol embed, .custom-chatbox-container .msgcontrol object {
   display: inline;
 }
+.custom-chatbox-container .msgcontrol.focus {
+  border-color: var(--app-chatbox-primary-color);
+}
 .custom-chatbox-container .msgcontrol .messageInput {
   width: 100%;
-  border: 1px solid var(--custom-chatbox-msg-border);
   border-radius: 4px;
   font-size: 0.875rem;
   border: none;
   outline: none;
+  margin-bottom: 2.2rem;
 }
 .custom-chatbox-container .msgcontrol .messageInput:focus, .custom-chatbox-container .msgcontrol .messageInput:focus-visible {
   outline: none;
+  box-shadow: none;
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control {
   background: var(--custom-chatbox-input-bg);
@@ -387,7 +394,7 @@
   color: var(--custom-chatbox-default-txt-color);
   resize: none;
   max-height: 50vh;
-  border: 1px solid var(--custom-chatbox-gray-color);
+  border: none;
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control::-webkit-scrollbar {
   width: 3px;
@@ -397,7 +404,8 @@
 }
 .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus, .custom-chatbox-container .msgcontrol .messageInput .messageInput-control:focus-visible {
   border-color: transparent;
-  outline: 1px solid var(--custom-chatbox-primary-color);
+  outline: none;
+  box-shadow: none;
 }
 .custom-chatbox-container .msgcontrol button {
   padding: 6px;
@@ -413,7 +421,7 @@
   font-size: 0.875rem;
   z-index: 2;
   right: 0.4rem;
-  bottom: 0.7rem;
+  bottom: 0.3rem;
   width: 40px;
   height: 40px;
   padding: 0;
@@ -466,7 +474,7 @@
 .custom-chatbox-container .toolkit-btns {
   display: flex;
   position: absolute;
-  bottom: 20px;
+  bottom: 15px;
   margin-left: 5px;
   z-index: 1;
   flex-wrap: wrap;

package/lib/esm/Chatbox/index.scss

@@ -166,7 +166,7 @@
     --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);
@@ -439,26 +439,33 @@
         bottom: 10px;
         z-index: 1;
         width: calc(100% - 40px);
+        border: 1px solid var(--custom-chatbox-gray-color);
+        border-radius: 0.35rem;
+        transition: all 0.3s ease;
 
         img, svg, video, canvas, audio, iframe, embed, object {
             display: inline;
         }
 
+        &.focus {
+            border-color: var(--app-chatbox-primary-color);
+        }
+
 
         .messageInput {
             width: 100%;
-            border: 1px solid var(--custom-chatbox-msg-border);
             border-radius: 4px;
             font-size: 0.875rem;
             border: none;
             outline: none;
+            margin-bottom: 2.2rem;
 
             &:focus,
             &:focus-visible {
                 outline: none;
+                box-shadow: none;
             }
 
-
             .messageInput-control {
                 background: var(--custom-chatbox-input-bg);
                 padding: .5rem;
@@ -467,7 +474,8 @@
                 color: var(--custom-chatbox-default-txt-color);
                 resize: none;
                 max-height: 50vh;
-                border: 1px solid var(--custom-chatbox-gray-color);
+                border: none;
+                
 
                 &::-webkit-scrollbar {
                     width: 3px;
@@ -480,7 +488,8 @@
                 &:focus,
                 &:focus-visible {
                     border-color: transparent;
-                    outline: 1px solid var(--custom-chatbox-primary-color);
+                    outline: none;
+                    box-shadow: none;
                 }
             
 
@@ -502,7 +511,7 @@
             font-size: 0.875rem;
             z-index: 2;
             right: .4rem;
-            bottom: .7rem;
+            bottom: .3rem;
             width: 40px;
             height: 40px;
             padding: 0;
@@ -576,7 +585,7 @@
     .toolkit-btns {
         display: flex;
         position: absolute;
-        bottom: 20px;
+        bottom: 15px;
         margin-left: 5px;
         z-index: 1;
         flex-wrap: wrap;
@@ -735,6 +744,6 @@
         } 
 
     }
-
+    
 
 }

package/lib/esm/Chatbox/index.tsx

@@ -161,6 +161,7 @@ const Chatbox = (props: ChatboxProps) => {
     const msgContainerRef = useRef<HTMLDivElement>(null);
     const msInput = useRef<HTMLTextAreaElement>(null);
     const inputContentRef = useRef<any>(null);
+    const [focused, setFocused] = useState(false);
 
     const [loaderDisplay, setLoaderDisplay] = useState<boolean>(false);
     const [loading, setLoading] = useState<boolean>(false);
@@ -1460,7 +1461,7 @@ const Chatbox = (props: ChatboxProps) => {
 
 
                 {/**------------- CONTROL AREA -------------*/}
-                <div className="msgcontrol">
+                <div className={`msgcontrol ${focused ? 'focus' : ''}`}>
 
                     <Textarea
                         ref={msInput}
@@ -1484,7 +1485,13 @@ const Chatbox = (props: ChatboxProps) => {
                         onChange={(e) => {
                             args().onInputChange?.(inputContentRef.current, e.target.value);
                         }}
-                        rows={args().defaultRows || 3}
+                        onFocus={() => {
+                            setFocused(true);
+                        }}
+                        onBlur={() => {
+                            setFocused(false);
+                        }}
+                        rows={args().defaultRows || 2}
                         autoSize
                         autoSizeMaxHeight={200}
                     />

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -2233,7 +2233,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                     {/* //########## MODE: WEEK ############# */}
                     {appearanceMode === 'week' ? <>
                         <div className="custom-event-tl__header__info">
-                            {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
+                            {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1]) as never}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
                         </div>
                     </> : null}
                     {/* //########## /MODE: WEEK ############# */}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.6.344",
+  "version": "4.6.358",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",