Release 0.21.0 (#626)

* Vue 3 Migration (#620)

This PR is to upgrade the existing solution and relevant dependencies to Vue 3. Because we are also migrating from Vuetify 1.5 -> 3 in the process, skipping over Vuetify 2 entirely, every component required some clean-up. The goal was to get parity in UI from the previous release, which included some new CSS rules to maintain the look at feel of the previous UI.

These changes are likely to result in breaking changes to custom CSS modules, though again we have tried to maintain as much parity as possible its not feasible to test every CSS iteration end users might have implemented. Please use caution when updating to this version of the UI.

---------

Co-authored-by: Austin Johnson <austintj@amazon.com>, @michaelin-96

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.21.0] - 2024-03-01
+- Upgraded the existing solution and relevant dependencies to Vue 3. Migrating from Vuetify 1.5 -> 3 in the process, skipping over Vuetify 2 entirely, requiring clean-up and reconfiguration of all UI components. Goal was to get parity in UI from the previous release, which includes some new CSS rules to maintain the look at feel of the previous UI. These changes could result in **breaking changes** to custom CSS despite efforts to maintain backwards compatibilty many Vuetify classes changed names during the upgrade. Please use caution when updating to this version of the Lex Web UI UI.
+
 ## [0.20.6] - 2024-02-12
 - Emergency fix to upgrade Python function to version 3.8 across the board. As this will end of life later in the year we will release another update soon to move everything to 3.12.
 

README-css-style.md

@@ -80,9 +80,9 @@ There are two distinct mechanisms for changing the background color.
 1) Update lex-web-ui-loader-config.json. Change the property ui.toolbarColor. You must select a value
 from.
 https://vuetifyjs.com/en/styles/colors#
-2) OR use the following in css
+2) OR use the following in css to overwrite the color of the default red CSS
 ```
-.toolbar.theme--dark {
+.bg-red {
   background-color: #2b2b2b !important;
 }
 ```

build/create-custom-css.js

@@ -52,7 +52,7 @@ if (process.env['CHAT_BACKGROUND_COLOR'] && process.env['CHAT_BACKGROUND_COLOR']
     modifyRule(styleSheet, '.message-list-container', { "background-color": process.env['CHAT_BACKGROUND_COLOR'] + ' !important'});
 }
 if (process.env['TOOLBAR_COLOR'] && process.env['TOOLBAR_COLOR'].length > 0) { 
-    modifyRule(styleSheet, '.toolbar.theme--dark', { "background-color": process.env['TOOLBAR_COLOR'] + ' !important'});
+    modifyRule(styleSheet, '.bg-red', { "background-color": process.env['TOOLBAR_COLOR'] + ' !important'});
 }
 if (process.env['AGENT_CHAT_BUBBLE'] && process.env['AGENT_CHAT_BUBBLE'].length > 0) { 
     modifyRule(styleSheet, '.message-bot .message-bubble', { "background-color": process.env['AGENT_CHAT_BUBBLE'] + ' !important'});