✨ Update CSS and JavaScript for Widget Enhancements

- 🎨 Changed the CSS class for background color in `page_head_css_theme.tpl.php` to `.widget-body` for better styling control.
- 📜 Updated script version numbers in `userchat2.php` to `421` for both IE and standard React app scripts, ensuring compatibility with the latest features.
- 🔄 Modified `BodyChat.js` to include a new class `popup-body` for improved layout handling in different modes, enhancing user experience.
- 🔧 Incremented React app version in `settings.php` to `421` to reflect the latest updates and ensure all components are in sync.

These changes aim to improve the visual consistency and functionality of the chat widget. 🚀

Author: remdex

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

@@ -153,7 +153,7 @@
         <?php endif;?>
 
         <?php if (isset($Result['theme']->bot_configuration_array['send_area_background']) && $Result['theme']->bot_configuration_array['send_area_background'] != '') : ?>
-        .mobile-body, .desktop-body{
+        .widget-body{
             background-color: #<?php echo htmlspecialchars($Result['theme']->bot_configuration_array['send_area_background']);?>!important;
         }
         <?php endif;?>

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

@@ -106,14 +106,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=a9_<?php echo $staticVersion;?>"></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=420_<?php echo $staticVersion;?>"></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=421_<?php echo $staticVersion;?>"></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_<?php echo $staticVersion;?>"></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=a9_<?php echo $staticVersion;?>"></script>
-        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.js')?>?t=420_<?php echo $staticVersion;?>"></script>
+        <script <?php isset($Result['app_scope']) ? print 'scope="' . htmlspecialchars($Result['app_scope']) . '"' : '' ?> src="<?php echo erLhcoreClassDesign::design('js/widgetv2/react.app.js')?>?t=421_<?php echo $staticVersion;?>"></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_<?php echo $staticVersion;?>"></script>
     <?php endif; ?>

lhc_web/design/defaulttheme/tpl/pagelayouts/parts/page_head_css_theme.tpl.php

@@ -179,12 +179,14 @@ class BodyChat extends Component {
             return  <Suspense fallback="..."><ProactiveInvitation setBotPayload={this.setBotPayload} /></Suspense>
         }
 
-        var className = 'd-flex flex-column flex-grow-1 reset-container-margins';
+        var className = 'd-flex flex-column flex-grow-1 reset-container-margins widget-body';
 
         if (this.props.chatwidget.get('mode') == 'widget') {
             className = className + (this.props.chatwidget.get('isMobile') == true ? ' mobile-body' : ' desktop-body');
         } else if (this.props.chatwidget.get('mode') == 'embed') {
             className = className + (this.props.chatwidget.get('isMobile') == true ? ' mobile-embed-body' : ' desktop-embed-body');
+        } else {
+            className = className + " popup-body";
         }
 
         if (this.props.chatwidget.hasIn(['chat_ui','msg_expand']) && this.props.chatwidget.get('mode') == 'embed') {

lhc_web/design/defaulttheme/tpl/pagelayouts/userchat2.php

@@ -581,7 +581,7 @@
 $outputResponse['wv'] = 276;
 
 // React APP versions
-$outputResponse['v'] = 420;
+$outputResponse['v'] = 421;
 
 $cfg = erConfigClassLhConfig::getInstance();