Fix regression messages not being sent from the beginning

src/Components/UI/UI.tsx

@@ -15,6 +15,9 @@ import { Sidebar } from '../Sidebar/Sidebar';
 import { Components } from '../Components/Components';
 import { Viewer } from '../Viewer/Viewer';
 import { Settings } from '../Settings/Settings';
+import { IMessage } from '../../Interfaces/IMessage';
+import { DISABLE_API } from '../../utils/default';
+import { UseWorker, UseAsync } from './UseWorker';
 
 export interface IUIProps {
   selectedContainer: IContainerModel | undefined
@@ -63,6 +66,20 @@ function UseSetOrToggleSidebar(
 
 export function UI(props: IUIProps): JSX.Element {
   const [selectedSidebar, setSelectedSidebar] = React.useState<SidebarType>(SidebarType.Components);
+  const [messages, setMessages] = React.useState<IMessage[]>([]);
+
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (window.Worker && !DISABLE_API) {
+    UseWorker(
+      props.current,
+      setMessages
+    );
+  } else if (!DISABLE_API) {
+    UseAsync(
+      props.current,
+      setMessages
+    );
+  }
 
   // Please use setOrToggleSidebar rather than setSelectedSidebar so we can close the sidebar
   const setOrToggleSidebar = UseSetOrToggleSidebar(selectedSidebar, setSelectedSidebar);
@@ -120,6 +137,8 @@ export function UI(props: IUIProps): JSX.Element {
       leftSidebarTitle = 'Messages';
       leftChildren = <Messages
         historyState={props.current}
+        messages={messages}
+        clearMessage={() => setMessages([])}
       />;
       break;