From b68d4e76c0c2a99e8cc9733f47b5fdbe464e0d77 Mon Sep 17 00:00:00 2001
From: izawartka <59137928+izawartka@users.noreply.github.com>
Date: Wed, 29 Jul 2026 19:47:28 +0200
Subject: [PATCH] Add embedded dialogs

- Extracted DialogManager component selection to utils/getDialogComponent
- Added EmbeddedDialog
- Updated DialogManager to use EmbeddedDialog instead of Dialog if an app is running in embedded mode
---
 src/components/dialog/DialogManager.js            | 11 +++++------
 src/components/dialog/EmbeddedDialog.css          | 14 ++++++++++++++
 src/components/dialog/EmbeddedDialog.js           | 15 +++++++++++++++
 src/components/dialog/utils/getDialogComponent.js | 15 +++++++++++++++
 4 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 src/components/dialog/EmbeddedDialog.css
 create mode 100644 src/components/dialog/EmbeddedDialog.js
 create mode 100644 src/components/dialog/utils/getDialogComponent.js

diff --git a/src/components/dialog/DialogManager.js b/src/components/dialog/DialogManager.js
index e8d0b44..f2f3f3a 100644
--- a/src/components/dialog/DialogManager.js
+++ b/src/components/dialog/DialogManager.js
@@ -1,13 +1,15 @@
 import React, { useRef } from 'react';
 import './Dialog.css';
-import Dialog from './Dialog';
 import { useDialogs } from '../../hooks/useDialogs';
 import { removeDialog } from '../../services/dialogService';
+import { getDialogComponent } from './utils/getDialogComponent';
+import { useEmbeddedContext } from '../../contexts/EmbeddedContext';
 
 function DialogManager() {
   const dialogs = useDialogs();
   const currentDialogRef = useRef(null);
   const currentDialog = dialogs[dialogs.length - 1];
+  const { isEmbedded } = useEmbeddedContext();
 
   const onClose = () => {
     removeDialog();
@@ -20,14 +22,11 @@ function DialogManager() {
 
   if (!currentDialog) return null;
 
-  const { customComponent, message, buttons } = currentDialog;
-  const DialogContent = customComponent ?
-    React.cloneElement(customComponent, { onClose, ref: currentDialogRef }) :
-    <Dialog message={message} buttons={buttons} onClose={onClose} ref={currentDialogRef} />;
+  const DialogComponent = getDialogComponent(currentDialog, onClose, currentDialogRef, isEmbedded);
 
   return (
     <div className="dialog-background" onClick={onBgClick}>
-      {DialogContent}
+      {DialogComponent}
     </div>
   );
 }
diff --git a/src/components/dialog/EmbeddedDialog.css b/src/components/dialog/EmbeddedDialog.css
new file mode 100644
index 0000000..0b7fc18
--- /dev/null
+++ b/src/components/dialog/EmbeddedDialog.css
@@ -0,0 +1,14 @@
+.embedded-dialog {
+    display: flex;
+    background-color: var(--background-color);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.embedded-dialog-message {
+    white-space: pre-wrap;
+    text-align: center;
+}
diff --git a/src/components/dialog/EmbeddedDialog.js b/src/components/dialog/EmbeddedDialog.js
new file mode 100644
index 0000000..6f50c5e
--- /dev/null
+++ b/src/components/dialog/EmbeddedDialog.js
@@ -0,0 +1,15 @@
+import './EmbeddedDialog.css';
+
+const EmbeddedDialog = (props) => {
+    const {message} = props;
+
+    return (
+        <div className='embedded-dialog'>
+            <div className='embedded-dialog-message'>
+                {message}
+            </div>
+        </div>
+    );
+};
+
+export default EmbeddedDialog;
\ No newline at end of file
diff --git a/src/components/dialog/utils/getDialogComponent.js b/src/components/dialog/utils/getDialogComponent.js
new file mode 100644
index 0000000..abce0f4
--- /dev/null
+++ b/src/components/dialog/utils/getDialogComponent.js
@@ -0,0 +1,15 @@
+import { cloneElement } from 'react';
+import Dialog from '../Dialog';
+import EmbeddedDialog from '../EmbeddedDialog';
+
+export const getDialogComponent = (dialog, onClose, ref, isEmbedded) => {
+    if (dialog.customComponent) {
+        return cloneElement(dialog.customComponent, { onClose, ref });
+    }
+
+    if (isEmbedded) {
+        return <EmbeddedDialog message={dialog.message} />;
+    }
+
+    return <Dialog message={dialog.message} buttons={dialog.buttons} onClose={onClose} ref={ref} />;
+}
\ No newline at end of file