fix: made some changes to fix custom elements not being sized correctly

BREAKING CHANGE: Classnames and styles are now injected by default when using WebChatCustomElement.

Author: TazmanianDI

README.md

@@ -14,7 +14,6 @@ The primary utility provided by this library is the `WebChatContainer` functiona
 - [Using WebChatContainer](#using-webchatcontainer)
 - [WebChatCustomElement](#webchatcustomelement)
 - [API](#api)
-- [withWebChat](#withWebChat)
 - [Additional resources](#additional-resources)
 - [License](#license)
 
@@ -200,10 +199,6 @@ function App() {
 }
 ```
 
-## withWebChat
-
-The [withWebChat](WITH_WEB_CHAT.MD) function is an older function that is used for loading web chat. It is now deprecated in favor of using the `WebChatContainer` component instead.
-
 ## Additional resources
 - [IBM watsonx Assistant](https://www.ibm.com/cloud/watson-assistant)
 - [IBM watsonx Assistant web chat feature documentation](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-deploy-web-chat)

WITH_WEB_CHAT.MD

@@ -22,7 +22,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "semver-compare": "^1.0.0"
+    "compare-versions": "^6.1.1"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",
@@ -44,7 +44,6 @@
     "@types/proper-url-join": "^2.1.1",
     "@types/react": "^16.14.17",
     "@types/react-dom": "^16.9.14",
-    "@types/semver-compare": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "babel-core": "^6.26.3",

package-lock.json

@@ -29,5 +29,5 @@ export default {
     },
   ],
   plugins: [typescript()],
-  external: ['react', 'react-dom'],
+  external: ['react', 'react-dom', 'compare-versions'],
 };

package.json

@@ -12,8 +12,8 @@
  *
  */
 
+import { compareVersions } from 'compare-versions';
 import React, { ReactNode, useEffect, useState, MutableRefObject, useRef, Dispatch, SetStateAction } from 'react';
-import semverCompare from 'semver-compare';
 import { UserDefinedResponsePortalsContainer } from './UserDefinedResponsePortalsContainer';
 import { WebChatConfig } from './types/WebChatConfig';
 import { WebChatInstance } from './types/WebChatInstance';
@@ -254,7 +254,7 @@ function addUserDefinedResponseHandler(
 
   // In web chat 8.2.0, the "customResponse" event was renamed to "userDefinedResponse".
   const webChatVersion = webChatInstance.getWidgetVersion();
-  const eventName = semverCompare(webChatVersion, '8.2.0') >= 0 ? 'userDefinedResponse' : 'customResponse';
+  const eventName = compareVersions(webChatVersion, '8.2.0') >= 0 ? 'userDefinedResponse' : 'customResponse';
 
   webChatInstance.on({ type: eventName, handler: userDefinedResponseHandler });
   webChatInstance.on({ type: 'restartConversation', handler: restartHandler });