feat(chat): add possibility to send message from the visualizer to th…

…e chat (#1787)

apps/chat/environment.d.ts

@@ -13,6 +13,7 @@ declare global {
       IS_IFRAME?: string;
       ALLOWED_IFRAME_SOURCES?: string;
       CUSTOM_VISUALIZERS?: string;
+      ALLOW_VISUALIZER_SEND_MESSAGES?: boolean;
       ENABLED_FEATURES?: string;
       PUBLICATION_FILTERS?: string;
       NEXT_PUBLIC_APP_NAME?: string;

apps/chat/src/components/VisualalizerRenderer/VisualizerRenderer.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
+import { Role } from '@/src/types/chat';
 import { CustomVisualizer } from '@/src/types/custom-visualizers';
 import { Translation } from '@/src/types/translation';
 
@@ -11,6 +12,7 @@ import {
   ConversationsSelectors,
 } from '@/src/store/conversations/conversations.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
 
 import {
   DEFAULT_CUSTOM_ATTACHMENT_HEIGHT,
@@ -56,6 +58,14 @@ export const VisualizerRenderer = ({
     ConversationsSelectors.selectCustomAttachmentData(state, attachmentUrl),
   );
 
+  const currentConversations = useAppSelector(
+    ConversationsSelectors.selectSelectedConversations,
+  );
+
+  const isAllowedSendMessage = useAppSelector(
+    SettingsSelectors.selectAllowVisualizerSendMessages,
+  );
+
   const scrollWidth =
     iframeContainerRef?.current && iframeContainerRef.current.scrollWidth;
 
@@ -139,12 +149,40 @@ export const VisualizerRenderer = ({
       ) {
         setReady(true);
       }
+
+      if (
+        isAllowedSendMessage &&
+        event.data.type ===
+          `${visualizerTitle}/${VisualizerConnectorEvents.sendMessage}` &&
+        event.data.payload &&
+        typeof event.data.payload === 'object' &&
+        Object.prototype.hasOwnProperty.call(event.data.payload, 'message')
+      ) {
+        const content = (event.data.payload as { message: string }).message;
+        dispatch(
+          ConversationsActions.sendMessages({
+            conversations: currentConversations,
+            deleteCount: 0,
+            message: {
+              role: Role.User,
+              content,
+            },
+            activeReplayIndex: 0,
+          }),
+        );
+      }
     };
 
     window.addEventListener('message', postMessageListener, false);
 
     return () => window.removeEventListener('message', postMessageListener);
-  }, [visualizerTitle, rendererUrl]);
+  }, [
+    visualizerTitle,
+    rendererUrl,
+    dispatch,
+    currentConversations,
+    isAllowedSendMessage,
+  ]);
 
   if (!attachmentUrl) {
     return null;

apps/chat/src/pages/index.tsx

@@ -347,6 +347,7 @@ export const getServerSideProps: GetServerSideProps = async ({
     announcement: process.env.ANNOUNCEMENT_HTML_MESSAGE || '',
     themesHostDefined: !!process.env.THEMES_CONFIG_HOST,
     customRenderers: customRenderers || [],
+    allowVisualizerSendMessages: !!process.env.ALLOW_VISUALIZER_SEND_MESSAGES,
   };
 
   if (params?.has(ISOLATED_MODEL_QUERY_PARAM)) {

apps/chat/src/store/settings/settings.reducers.ts

@@ -30,6 +30,7 @@ export interface SettingsState {
   isolatedModelId?: string;
   customRenderers?: CustomVisualizer[];
   isSignInInSameWindow?: boolean;
+  allowVisualizerSendMessages?: boolean;
 }
 
 const initialState: SettingsState = {
@@ -279,6 +280,13 @@ const selectIsSignInInSameWindow = createSelector([rootSelector], (state) => {
   return state.isSignInInSameWindow;
 });
 
+const selectAllowVisualizerSendMessages = createSelector(
+  [rootSelector],
+  (state) => {
+    return state.allowVisualizerSendMessages;
+  },
+);
+
 export const SettingsActions = settingsSlice.actions;
 export const SettingsSelectors = {
   selectAppName,
@@ -304,4 +312,5 @@ export const SettingsSelectors = {
   selectPublicationFilters,
   selectOverlayConversationId,
   selectIsSignInInSameWindow,
+  selectAllowVisualizerSendMessages,
 };

libs/chat-visualizer-connector/src/lib/ChatVisualizerConnector.ts

@@ -40,6 +40,36 @@ export class ChatVisualizerConnector {
     window.addEventListener('message', this.postMessageListener, false);
   }
 
+  /**
+   * Sends the post message to the DIAL Chat
+   * @param type Visualizer Event name
+   * @param payload Event payload
+   * @param dialHost host of the DIAL Chat
+   */
+  public send({
+    type,
+    payload,
+    dialHost = this.dialHost,
+  }: {
+    type: VisualizerConnectorEvents;
+    payload?: unknown;
+    dialHost?: string;
+  }) {
+    if (!window?.parent) {
+      throw new Error(
+        `[${this.appName}] There is no parent window to send requests`,
+      );
+    }
+
+    window.parent.postMessage(
+      {
+        type: `${this.appName}/${type}`,
+        payload,
+      },
+      dialHost,
+    );
+  }
+
   /**
    * Sends response via postMessage to the DIAL CHAT to notify it data received
    * @param requestParams {PostMessageRequestParams}
@@ -90,20 +120,25 @@ export class ChatVisualizerConnector {
    * Sends 'READY' event via postMessage to the DIAL CHAT to notify that Visualizer loaded
    */
   public sendReady() {
-    window?.parent.postMessage(
-      { type: `${this.appName}/${VisualizerConnectorEvents.ready}` },
-      this.dialHost,
-    );
+    this.send({ type: VisualizerConnectorEvents.ready });
   }
 
   /**
    * Sends 'READY_TO_INTERACT' event via postMessage to the DIAL CHAT to notify that Visualizer ready to get data
    */
   public sendReadyToInteract() {
-    window?.parent.postMessage(
-      { type: `${this.appName}/${VisualizerConnectorEvents.readyToInteract}` },
-      this.dialHost,
-    );
+    this.send({ type: VisualizerConnectorEvents.readyToInteract });
+  }
+
+  /**
+   * Send message into the selected conversations
+   * @param content {string} text of message that should be sent to the chat
+   */
+  public async sendMessage(content: string) {
+    this.send({
+      type: VisualizerConnectorEvents.sendMessage,
+      payload: { message: content },
+    });
   }
 
   /**

libs/shared/src/constants/visualizer-connector.ts

@@ -4,6 +4,7 @@ export enum VisualizerConnectorEvents {
   initReady = 'INIT_READY',
   ready = 'READY',
   readyToInteract = 'READY_TO_INTERACT',
+  sendMessage = 'SEND_MESSAGE',
 }
 
 export enum VisualizerConnectorRequests {