✨ Refactor Chat Widget and Remove Unused Features ✨

- 🗑️ Removed the 'text_area_wrap' field from the widget theme configuration as it was no longer needed.
- 🎨 Updated the widget theme template to remove the associated input field for 'text_area_wrap'.
- 🔄 Adjusted the user chat layout to ensure compatibility with the new widget structure.
- 📦 Updated React components to handle textarea resizing dynamically, improving user experience.
- 🔧 Cleaned up the StartChat component by removing unnecessary calculations related to 'text_area_wrap'.
- 🔄 Updated API responses to eliminate references to 'text_area_wrap', ensuring consistency across the application.
- 📈 Bumped the React app version to 389 to reflect the latest changes.

These changes streamline the chat widget functionality and enhance the overall performance of the application. 🚀

Author: remdex

lhc_web/design/defaulttheme/css/css_static/2e09162829e15b6cbc70195cf8bb6b29.css

@@ -128,6 +128,9 @@ div.message-row {
     scrollbar-width: thin;
 }
 
+
+
+
 .header-chat {
     background-color: #ededed;
     user-select: none;
@@ -902,6 +905,8 @@ textarea[name=ChatMessage] {
     scrollbar-color: #888 transparent;
     scrollbar-width: thin;
     scroll-padding-bottom: 10px;
+    max-height: 100px ; /* Limit to ~4 lines */
+    field-sizing: content;
 }
 
 .settings {
@@ -1226,15 +1231,6 @@ a.btn-link.visited{
     margin-left:0!important;
 }
 
-#CSChatMessage.msg-two-line{
-    height:56px;
-}
-
-#CSChatMessage.msg-one-line{
-    height:36px;
-    overflow-y: hidden;
-}
-
 .bb-list > a.p-1{
     padding:1px !important;
 }

lhc_web/design/defaulttheme/css/css_static/6cc8571e0e95098f55b7de6f9713354a.css

@@ -420,12 +420,6 @@
                             <?php echo erLhcoreClassAbstract::renderInput('widget_border_width', $fields['widget_border_width'], $object)?>
                             </div>
                         </div>
-                        <div class="col-6">
-                            <div class="form-group">
-                            <label><?php echo $fields['text_area_wrap']['trans'];?></label>
-                            <?php echo erLhcoreClassAbstract::renderInput('text_area_wrap', $fields['text_area_wrap'], $object)?>
-                            </div>
-                        </div>
                     </div>
 
                         <div class="row">

lhc_web/design/defaulttheme/css/css_static/91b0a7056b7f8428a91be2f55972b537.css

@@ -102,14 +102,14 @@
 ) : ?>
     <?php if (!isset($Result['voice_call'])) : ?>
         <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/vendor.ie.js')?>?v=a4"></script>
-        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.ie.js')?>?t=387"></script>
+        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.ie.js')?>?t=388"></script>
     <?php else : ?>
         <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/voice/voice.call.js')?>?t=3"></script>
     <?php endif; ?>
 <?php else : ?>
     <?php if (!isset($Result['voice_call'])) : ?>
         <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/vendor.js')?>?v=a4"></script>
-        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.js')?>?t=387"></script>
+        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.js')?>?t=388"></script>
         <?php else : ?>
         <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/voice/voice.call.js')?>?t=2"></script>
     <?php endif; ?>

lhc_web/design/defaulttheme/css/widgetv2/widget.css

@@ -96,6 +96,7 @@ class OnlineChat extends Component {
         this.changeLanguage = this.changeLanguage.bind(this);
         this.onFilePreview = this.onFilePreview.bind(this);
         this.removeFilePreview = this.removeFilePreview.bind(this);
+        this.onTextareaResize = this.onTextareaResize.bind(this);
 
         // Messages Area
         this.messagesAreaRef = React.createRef();
@@ -976,6 +977,15 @@ class OnlineChat extends Component {
         });
     }
 
+    onTextareaResize() {
+        if (this.messagesAreaRef.current) {
+            let scrollValue = this.messagesAreaRef.current.scrollHeight - this.messagesAreaRef.current.scrollTop;
+            if ((scrollValue - this.messagesAreaRef.current.offsetHeight) < 70) {
+                this.scrollBottom(false, false);
+            }
+        }
+    }
+
     render() {
         const { t } = this.props;
 
@@ -1121,8 +1131,6 @@ class OnlineChat extends Component {
 
             const fontSizeStyle = {fontSize: (this.props.chatwidget.hasIn(['chat_ui','font_size']) ? this.state.fontSize : '100') + '%'};
 
-            const taw = this.props.chatwidget.hasIn(['chat_ui','taw']) ? this.props.chatwidget.getIn(['chat_ui','taw']) : 8.6;
-
             return (
                 <React.Fragment>
 
@@ -1230,9 +1238,10 @@ class OnlineChat extends Component {
                                         onTextKeyDown={this.enterKeyDown}
                                         textReadOnly={this.props.chatwidget.getIn(['chatLiveData','closed']) || this.props.chatwidget.get('network_down')}
                                         onTextFocus={(e) => {this.setState({'reactToMsgId' : 0})}}
-                                        classNameText={"ps-0 no-outline form-control rounded-0 form-control rounded-start-0 rounded-end-0 border-0 "+((this.props.chatwidget.get('shown') === true && this.textMessageRef.current && (/\r|\n/.exec(this.state.value) || (this.state.value.length > this.textMessageRef.current.offsetWidth/taw))) ? 'msg-two-line' : 'msg-one-line')}
+                                        classNameText={"ps-0 no-outline form-control rounded-0 form-control rounded-start-0 rounded-end-0 border-0"}
                                         textPlaceholder={placeholder}
                                         textareaRef={this.props.textMessageRef}
+                                        onResize={this.onTextareaResize}
                                     />
                                 </React.Fragment>
                             }

lhc_web/design/defaulttheme/js/widgetv2/react.app.js

@@ -1,6 +1,24 @@
 import React from 'react';
 
 class SharedTextarea extends React.Component {
+    componentDidMount() {
+        const el = this.props.textareaRef && this.props.textareaRef.current;
+        if (!el) return;
+        this._resizeObserver = new ResizeObserver(() => {
+            if (typeof this.props.onResize === 'function') {
+                this.props.onResize();
+            }
+        });
+        this._resizeObserver.observe(el);
+    }
+
+    componentWillUnmount() {
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+    }
+
     render() {
         const {text, onTextChange, textareaRef, classNameText, textPlaceholder, onTextKeyDown, onTextFocus, textAutoFocus, textMaxLength, onTextTouchStart, onTextKeyUp, textReadOnly} = this.props;