From 216b5cff7b9a791550081f9df43a7fcf8989ef97 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 16:11:32 +0530
Subject: [PATCH 01/50]  chore(uikit-playground): Fixed Prettier

---
 .../src/Components/CodeEditor/BlockEditor.tsx |  60 ++++++++++
 .../CodeEditor/Extensions/Extensions.ts       |  25 +++++
 .../CodeEditor/Extensions/HighlightStyle.ts   |   1 +
 .../Components/CodeEditor/Extensions/index.ts |   3 +-
 .../CodeEditor/Extensions/jsonLinter.ts       |   4 +
 .../Components/CodeEditor/Extensions/lint.ts  |   5 -
 .../CodeEditor/Extensions/payloadLinter.ts    |  65 +++++++++++
 .../src/Components/CodeEditor/Parser/index.ts |   1 +
 .../CodeEditor/Parser/parsePayload.ts         |  15 +++
 .../Components/CodeEditor/PreviewEditor.tsx   |  27 +++++
 .../src/Components/CodeEditor/index.tsx       |  14 +--
 .../ComponentSideBar/ScrollableSideBar.tsx    |   5 +-
 .../Components/ComponentSideBar/SideBar.tsx   |   5 +-
 .../Components/ComponentSideBar/SliderBtn.tsx |   6 +-
 .../Components/Draggable/DraggableList.tsx    |  60 +++++-----
 .../Draggable/DraggableListItem.tsx           |   7 +-
 .../src/Components/DropDown/DropDown.tsx      |   4 +-
 .../src/Components/DropDown/Items.tsx         |   5 +-
 .../src/Components/DropDown/ItemsIcon.tsx     |  11 +-
 .../NavBar/BurgerIcon/BurgerIcon.tsx          |   2 +-
 .../src/Components/NavBar/BurgerIcon/Line.tsx |   5 +-
 .../Components/NavBar/BurgerIcon/Wrapper.tsx  |   1 +
 .../src/Components/NavBar/Divider.tsx         |   1 +
 .../src/Components/NavBar/Logo.tsx            |   1 +
 .../src/Components/NavBar/NavBar.tsx          |  22 +++-
 .../src/Components/NavBar/RightNavBtn.tsx     |   5 +-
 .../RenderPayload/DeleteElementBtn.tsx        |   5 +-
 .../Display/RenderPayload/ElementWrapper.tsx  |   2 +-
 .../Display/RenderPayload/RenderPayload.tsx   |   9 +-
 .../Preview/Display/Surface/BannerSurface.tsx |   1 +
 .../Display/Surface/MessageSurface.tsx        |   7 +-
 .../Preview/Display/Surface/ModalSurface.tsx  |   1 +
 .../Preview/Display/Surface/Surface.tsx       |  64 ++++++++---
 .../{Editor.tsx => ActionBlockEditor.tsx}     |  11 +-
 .../Preview/Editor/ActionPreviewEditor.tsx    |  25 +++++
 .../Components/Preview/Editor/EditorPanel.tsx |  77 +++++++++++++
 .../src/Components/Preview/Editor/index.tsx   |   2 +-
 .../Components/Preview/NavPanel/NavPanel.tsx  |  38 +++----
 .../Components/Preview/NavPanel/PanelBtn.tsx  |   6 +-
 .../src/Components/Preview/Preview.tsx        |   7 +-
 .../SplitPlaneContainer.tsx                   |  21 ++--
 .../SplitPlaneContainer/splitPlane.css        | 103 +++++++++---------
 .../src/Components/Preview/Wrapper.tsx        |   6 +-
 .../SurfaceSelect/SurfaceSelect.tsx           |   7 +-
 .../src/Components/SurfaceSelect/options.ts   |   2 +-
 .../TabChange.tsx => ToggleTabs/index.tsx}    |  21 ++--
 .../src/Components/navMenu/Menu/MenuItem.tsx  |   1 +
 .../src/Components/navMenu/Menu/Wrapper.tsx   |   1 +
 .../src/Components/navMenu/Menu/index.tsx     |   1 +
 .../src/Components/navMenu/NavMenu.tsx        |   5 +-
 .../src/Components/utils/codePrettier.ts      |  14 ---
 .../src/Context/action/actionPreviewAction.ts |  11 ++
 .../src/Context/action/docAction.ts           |   8 +-
 .../Context/action/editorTabsToggleAction.ts  |   9 ++
 .../src/Context/action/index.ts               |   5 +-
 .../src/Context/action/isMobileAction.ts      |   4 +-
 .../src/Context/action/isTabletAction.ts      |   4 +-
 .../src/Context/action/navMenuToggleAction.ts |   4 +-
 .../Context/action/previewTabsToggleAction.ts |   9 ++
 .../src/Context/action/sidebarToggleAction.ts |   4 +-
 .../src/Context/action/surfaceAction.ts       |   4 +-
 .../src/Context/action/tabsToggleAction.ts    |   4 +-
 .../src/Context/action/userAction.ts          |  11 ++
 .../uikit-playground/src/Context/index.tsx    |   3 +-
 .../src/Context/initialState.ts               |  39 ++++++-
 .../uikit-playground/src/Context/reducer.ts   |  17 +--
 .../uikit-playground/src/Pages/Playground.tsx |   6 +-
 .../Payload/{ => actionBlock}/BlocksTree.ts   |   2 +-
 .../{ => actionBlock}/action/button.ts        |   0
 .../{ => actionBlock}/action/datePicker.ts    |   0
 .../Payload/{ => actionBlock}/action/image.ts |   0
 .../Payload/{ => actionBlock}/action/index.ts |   4 +-
 .../Payload/{ => actionBlock}/action/input.ts |   0
 .../{ => actionBlock}/action/linearScale.ts   |   0
 .../Payload/{ => actionBlock}/action/menu.ts  |   0
 .../{ => actionBlock}/action/staticSelect.ts  |   0
 .../{ => actionBlock}/context/index.ts        |   0
 .../{ => actionBlock}/divider/index.ts        |   0
 .../Payload/{ => actionBlock}/image/index.ts  |   0
 .../{ => actionBlock}/input/datePicker.ts     |   0
 .../Payload/{ => actionBlock}/input/index.ts  |   0
 .../Payload/{ => actionBlock}/input/input.ts  |   0
 .../{ => actionBlock}/input/linearScale.ts    |   0
 .../{ => actionBlock}/input/staticSelect.ts   |   0
 .../{ => actionBlock}/preview/index.ts        |   2 +-
 .../{ => actionBlock}/section/button.ts       |   0
 .../{ => actionBlock}/section/datePicker.ts   |   0
 .../{ => actionBlock}/section/image.ts        |   0
 .../{ => actionBlock}/section/index.ts        |   0
 .../Payload/{ => actionBlock}/section/menu.ts |   0
 .../Payload/{ => actionBlock}/section/text.ts |   0
 .../src/Payload/actionPreview/container.ts    |  19 ++++
 .../actionPreview/generateActionPreview.ts    |  31 ++++++
 .../uikit-playground/src/Payload/index.ts     |   2 +
 .../uikit-playground/src/cssVariables.css     |  26 ++---
 .../src/hooks/useCodeMirror.ts                |   2 +-
 packages/uikit-playground/src/index.css       |  15 +--
 packages/uikit-playground/src/module.d.ts     |   6 +-
 .../src/utils/codePrettier.ts                 |   4 +-
 99 files changed, 748 insertions(+), 304 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/Extensions/jsonLinter.ts
 delete mode 100644 packages/uikit-playground/src/Components/CodeEditor/Extensions/lint.ts
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/Parser/index.ts
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
 create mode 100644 packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
 rename packages/uikit-playground/src/Components/Preview/Editor/{Editor.tsx => ActionBlockEditor.tsx} (55%)
 create mode 100644 packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
 create mode 100644 packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
 rename packages/uikit-playground/src/Components/{Preview/NavPanel/TabChange.tsx => ToggleTabs/index.tsx} (57%)
 delete mode 100644 packages/uikit-playground/src/Components/utils/codePrettier.ts
 create mode 100644 packages/uikit-playground/src/Context/action/actionPreviewAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/userAction.ts
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/BlocksTree.ts (99%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/button.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/datePicker.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/image.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/index.ts (83%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/input.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/linearScale.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/menu.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/action/staticSelect.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/context/index.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/divider/index.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/image/index.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/input/datePicker.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/input/index.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/input/input.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/input/linearScale.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/input/staticSelect.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/preview/index.ts (98%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/button.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/datePicker.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/image.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/index.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/menu.ts (100%)
 rename packages/uikit-playground/src/Payload/{ => actionBlock}/section/text.ts (100%)
 create mode 100644 packages/uikit-playground/src/Payload/actionPreview/container.ts
 create mode 100644 packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
 create mode 100644 packages/uikit-playground/src/Payload/index.ts

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
new file mode 100644
index 000000000000..e3e19a228aab
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -0,0 +1,60 @@
+import type { Extension } from '@codemirror/state';
+import { Box } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import json5 from 'json5';
+import { useEffect, useContext } from 'react';
+
+import { docAction, context } from '../../Context';
+import useCodeMirror from '../../hooks/useCodeMirror';
+import codePrettier from '../../utils/codePrettier';
+
+type CodeMirrorProps = {
+  extensions?: Extension[],
+};
+
+const BlockEditor = ({ extensions }: CodeMirrorProps) => {
+  const { state, dispatch } = useContext(context);
+  const { editor, changes, setValue } = useCodeMirror(
+    extensions,
+    JSON.stringify(state.doc.payload, undefined, 4)
+  );
+  const debounceValue = useDebouncedValue(changes?.value, 1500);
+
+  useEffect(() => {
+    if (!changes?.isDispatch) {
+      try {
+        const parsedCode = json5.parse(changes.value);
+        dispatch(docAction({ payload: parsedCode }));
+      } catch (e) {
+        // do nothing
+      }
+    }
+  }, [changes?.value]);
+
+  useEffect(() => {
+    if (!changes?.isDispatch) {
+      try {
+        const prettierCode = codePrettier(changes.value, changes.cursor);
+        setValue(prettierCode.formatted, {
+          cursor: prettierCode.cursorOffset,
+        });
+      } catch (e) {
+        // do nothing
+      }
+    }
+  }, [debounceValue]);
+
+  useEffect(() => {
+    if (!state.doc.changedByEditor) {
+      setValue(JSON.stringify(state.doc.payload, undefined, 4), {});
+    }
+  }, [state.doc.payload]);
+
+  return (
+    <>
+      <Box display='grid' height='100%' width={'100%'} ref={editor} />
+    </>
+  );
+};
+
+export default BlockEditor;
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts
new file mode 100644
index 000000000000..cb276ceaf2f9
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/Extensions.ts
@@ -0,0 +1,25 @@
+import { json } from '@codemirror/lang-json';
+import { EditorView } from 'codemirror';
+
+import highlightStyle from './HighlightStyle';
+import basicSetup from './basicSetup';
+import jsonLinter from './jsonLinter';
+// import payloadLinter from './payloadLinter';
+import theme from './theme';
+
+export const actionBlockExtensions = [
+  highlightStyle,
+  json(),
+  jsonLinter,
+  basicSetup,
+  // payloadLinter,
+  ...theme,
+];
+
+export const actionPreviewExtensions = [
+  EditorView.contentAttributes.of({ contenteditable: 'false' }),
+  highlightStyle,
+  json(),
+  basicSetup,
+  ...theme,
+];
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/HighlightStyle.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/HighlightStyle.ts
index 3329c3c6a859..fc5aa5e9e958 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/Extensions/HighlightStyle.ts
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/HighlightStyle.ts
@@ -6,6 +6,7 @@ const highLightStyle = () => {
     { tag: t.literal, color: 'var(--RCPG-primary-color)' },
     { tag: t.bool, color: 'var(--RCPG-tertary-color)' },
     { tag: t.number, color: 'var(--RCPG-secondary-color)' },
+    { tag: t.null, color: 'var(--RCPG-tertary-color)' },
   ]);
 
   return syntaxHighlighting(style);
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/index.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/index.ts
index 9dda5b45b58d..4e2251e75a9c 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/Extensions/index.ts
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/index.ts
@@ -2,9 +2,8 @@ import { javascript } from '@codemirror/lang-javascript';
 
 import highlightStyle from './HighlightStyle';
 import basicSetup from './basicSetup';
-import lint from './lint';
 import theme from './theme';
 
-const extensions = [highlightStyle, javascript(), lint, basicSetup, ...theme];
+const extensions = [highlightStyle, javascript(), basicSetup, ...theme];
 
 export default extensions;
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/jsonLinter.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/jsonLinter.ts
new file mode 100644
index 000000000000..663ec6092024
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/jsonLinter.ts
@@ -0,0 +1,4 @@
+import { jsonParseLinter } from '@codemirror/lang-json';
+import { lintGutter, linter } from '@codemirror/lint';
+
+export default [lintGutter(), linter(jsonParseLinter())];
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/lint.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/lint.ts
deleted file mode 100644
index d8eb7870f0ec..000000000000
--- a/packages/uikit-playground/src/Components/CodeEditor/Extensions/lint.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { esLint } from '@codemirror/lang-javascript';
-import { lintGutter, linter } from '@codemirror/lint';
-import Linter from 'eslint4b-prebuilt';
-
-export default [lintGutter(), linter(esLint(new Linter()))];
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
new file mode 100644
index 000000000000..e6a2b8168998
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
@@ -0,0 +1,65 @@
+import { syntaxTree } from '@codemirror/language';
+import type { Diagnostic } from '@codemirror/lint';
+import { linter } from '@codemirror/lint';
+import type { EditorView } from 'codemirror';
+
+import parsePayload from '../Parser';
+
+const payloadLinter = linter((view: EditorView) => {
+  const diagnostics: Diagnostic[] = [];
+  const tree = syntaxTree(view.state);
+  let head = tree.topNode.firstChild;
+  if (!head || !head.matchContext(['Script'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting a Script',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  head = head.firstChild;
+  if (!head || !head.matchContext(['ExpressionStatement'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting an expression statement',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  head = head.firstChild;
+  if (!head || !head.matchContext(['ArrayExpression'])) {
+    diagnostics.push({
+      from: 0,
+      to: 0,
+      message: 'Expecting an array expression',
+      severity: 'error',
+    });
+    return diagnostics;
+  }
+  // while (head.nextSibling && head.nextSibling.name !== ']') {
+  // }
+  do {
+    if (
+      head.name !== '[' &&
+      head.name !== ',' &&
+      head.name !== ']' &&
+      head.name !== 'ObjectExpression'
+    ) {
+      diagnostics.push({
+        from: head.from,
+        to: head.to,
+        message: 'Expecting an Object expression',
+        severity: 'error',
+      });
+      return diagnostics;
+    }
+    if (head.name === 'ObjectExpression') parsePayload(head, diagnostics, view);
+    head = head.nextSibling;
+  } while (head);
+
+  return diagnostics;
+});
+
+export default payloadLinter;
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Parser/index.ts b/packages/uikit-playground/src/Components/CodeEditor/Parser/index.ts
new file mode 100644
index 000000000000..482568e69baf
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/Parser/index.ts
@@ -0,0 +1 @@
+export { default } from './parsePayload';
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts b/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
new file mode 100644
index 000000000000..114ec242009d
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
@@ -0,0 +1,15 @@
+import type { Diagnostic } from '@codemirror/lint';
+import type { EditorView } from 'codemirror';
+
+const parsePayload = (
+  head: any,
+  Diagnostic: Diagnostic[],
+  view: EditorView
+) => {
+  const payload = JSON.parse(
+    view.state.doc.toString().slice(head.from, head.to)
+  );
+  payload && 1;
+};
+
+export default parsePayload;
diff --git a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
new file mode 100644
index 000000000000..055a17aae465
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
@@ -0,0 +1,27 @@
+import type { Extension } from '@codemirror/state';
+import { Box } from '@rocket.chat/fuselage';
+import { useEffect, useContext } from 'react';
+
+import { context } from '../../Context';
+import useCodeMirror from '../../hooks/useCodeMirror';
+
+type CodeMirrorProps = {
+  extensions?: Extension[],
+};
+
+const PreviewEditor = ({ extensions }: CodeMirrorProps) => {
+  const { state } = useContext(context);
+  const { editor, setValue } = useCodeMirror(extensions, `{}`);
+
+  useEffect(() => {
+    setValue(JSON.stringify(state.actionPreview, undefined, 4), {});
+  }, [state.actionPreview]);
+
+  return (
+    <>
+      <Box display='grid' height='100%' width={'100%'} ref={editor} />
+    </>
+  );
+};
+
+export default PreviewEditor;
diff --git a/packages/uikit-playground/src/Components/CodeEditor/index.tsx b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
index 781c00c4821a..e9547eeaa08c 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/index.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
@@ -4,13 +4,12 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import json5 from 'json5';
 import { useEffect, useContext } from 'react';
 
-import { context } from '../../Context';
-import { docAction } from '../../Context/action';
+import { docAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 
 type CodeMirrorProps = {
-  extensions?: Extension[];
+  extensions?: Extension[],
 };
 
 const CodeEditor = ({ extensions }: CodeMirrorProps) => {
@@ -19,10 +18,9 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
     extensions,
     json5.stringify(state.doc.payload, undefined, 4)
   );
-  const debounceValue = useDebouncedValue(changes?.value, 500);
+  const debounceValue = useDebouncedValue(changes?.value, 1500);
 
   useEffect(() => {
-    console.log('a');
     if (!changes?.isDispatch) {
       try {
         const parsedCode = json5.parse(changes.value);
@@ -35,15 +33,12 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
 
         dispatch(docAction({ payload: parsedCode }));
       } catch (e) {
-        console.log(e);
         // do nothing
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changes?.value]);
 
   useEffect(() => {
-    console.log('b');
     if (!changes?.isDispatch) {
       try {
         const prettierCode = codePrettier(changes.value, changes.cursor);
@@ -54,15 +49,12 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
         // do nothing
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debounceValue]);
 
   useEffect(() => {
-    console.log('c');
     if (!state.doc.changedByEditor) {
       setValue(JSON.stringify(state.doc.payload, undefined, 4), {});
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.doc.payload]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
index 1c75c93cbf6a..e614f458f1c9 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
@@ -1,14 +1,15 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Scrollable, Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
-import BlocksTree from '../../Payload/BlocksTree';
+import BlocksTree from '../../Payload/actionBlock/BlocksTree';
 import DropDown from '../DropDown';
 
 const ScrollableSideBar: FC = () => (
   <Scrollable vertical>
     <Box
-      flexGrow={1}
+      width={'100%'}
       mbs='39px'
       borderBlockStart='var(--default-border)'
       bg={'var(--primaryBackgroundColor)'}
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
index 0cf71a6a159b..ef58fbc732b1 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
@@ -1,10 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 
-import { context } from '../../Context';
-import { sidebarToggleAction } from '../../Context/action';
+import { context, sidebarToggleAction } from '../../Context';
 import ScrollableSideBar from './ScrollableSideBar';
 import SliderBtn from './SliderBtn';
 
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
index a328ee395074..0f13639581ac 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
@@ -1,10 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
-import { context } from '../../Context';
-import { sidebarToggleAction } from '../../Context/action';
+import { context, sidebarToggleAction } from '../../Context';
 
 const SliderBtn: FC = () => {
   const {
@@ -49,6 +48,7 @@ const SliderBtn: FC = () => {
         transition: var(--animation-default);
       `;
 
+  // eslint-disable-next-line no-nested-ternary
   const toggleStyle = !isMobile
     ? css`
         left: 0px;
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
index 76e7af15538d..2900127afdda 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
@@ -1,50 +1,44 @@
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
-import * as React from 'react';
+import React from 'react';
 import type { OnDragEndResponder } from 'react-beautiful-dnd';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import DraggableListItem from './DraggableListItem';
 
 export type Block = {
-  id: string;
-  payload: LayoutBlock;
+  id: string,
+  payload: LayoutBlock,
 };
 
 export type DraggableListProps = {
-  blocks: Block[];
-  surface?: number;
-  onDragEnd: OnDragEndResponder;
+  blocks: Block[],
+  surface?: number,
+  onDragEnd: OnDragEndResponder,
 };
 
 const DraggableList = React.memo(
   ({ blocks, surface, onDragEnd }: DraggableListProps) => (
-    <>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <>
-          <Droppable droppableId='droppable-list'>
-            {(provided) => (
-              <div
-                style={{ padding: '10px' }}
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-              >
-                <>
-                  {blocks.map((block, index) => (
-                    <DraggableListItem
-                      surface={surface || 1}
-                      block={block}
-                      index={index}
-                      key={block.id}
-                    />
-                  ))}
-                  {provided.placeholder}
-                </>
-              </div>
-            )}
-          </Droppable>
-        </>
-      </DragDropContext>
-    </>
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId='droppable-list'>
+        {(provided) => (
+          <div
+            style={{ padding: '10px' }}
+            ref={provided.innerRef}
+            {...provided.droppableProps}
+          >
+            {blocks.map((block, index) => (
+              <DraggableListItem
+                surface={surface || 1}
+                block={block}
+                index={index}
+                key={block.id}
+              />
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
   )
 );
 
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
index d06d2769f15e..6b644d37a684 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
@@ -1,12 +1,13 @@
+import * as React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
 import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
 import type { Block } from './DraggableList';
 
 export type DraggableListItemProps = {
-  block: Block;
-  surface: number;
-  index: number;
+  block: Block,
+  surface: number,
+  index: number,
 };
 
 const DraggableListItem = ({
diff --git a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
index dd6470a4d632..cc4580576a1f 100644
--- a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
@@ -1,11 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 
 import Items from './Items';
 import type { Item, ItemBranch } from './types';
 
 interface DropDownProps {
-  readonly BlocksTree: Item;
+  readonly BlocksTree: Item,
 }
 
 const DropDown = ({ BlocksTree }: DropDownProps) => {
diff --git a/packages/uikit-playground/src/Components/DropDown/Items.tsx b/packages/uikit-playground/src/Components/DropDown/Items.tsx
index a8cc4acea83f..49bb502434d2 100644
--- a/packages/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/Items.tsx
@@ -1,12 +1,11 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label, Chevron } from '@rocket.chat/fuselage';
-import { useState, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 
-import { context } from '../../Context';
+import { context, docAction } from '../../Context';
 import ItemsIcon from './ItemsIcon';
 import { itemStyle, labelStyle } from './itemsStyle';
 import type { ItemProps } from './types';
-import { docAction } from '../../Context/action';
 
 const Items = ({ label, children, layer, payload }: ItemProps) => {
 	const [isOpen, toggleItemOpen] = useState<boolean>(layer === 1);
diff --git a/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx b/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
index 9a1d74f3f1f1..1bd1554c6b84 100644
--- a/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
@@ -1,13 +1,14 @@
 import { Icon } from '@rocket.chat/fuselage';
+import React from 'react';
 
 const ItemsIcon = ({
   layer,
   lastNode,
   hover,
 }: {
-  layer: number;
-  lastNode: boolean;
-  hover: boolean;
+  layer: number,
+  lastNode: boolean,
+  hover: boolean,
 }) => {
   const selectIcon = (layer: number, hover: boolean) => {
     if (layer === 1) {
@@ -18,9 +19,7 @@ const ItemsIcon = ({
     if (lastNode) {
       return <Icon name='cube' size='x12' color={hover ? '#fff' : '#f5455c'} />;
     }
-    return (
-      <Icon name='burger-menu' size='x12' color={hover ? '#fff' : '#19ac7c'} />
-    );
+    return <Icon name='burger' size='x12' color={hover ? '#fff' : '#19ac7c'} />;
   };
   return <>{selectIcon(layer, hover)}</>;
 };
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
index af02130ca4e0..4c1409153c01 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
@@ -1,6 +1,6 @@
 import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement, ReactNode } from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
 import { context } from '../../../Context';
 import Line from './Line';
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
index e1ddfed3ac0b..30c22f53d05b 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
@@ -1,13 +1,14 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
+import React from 'react';
 
 const Line = ({
   animated,
   moved,
 }: {
-  animated: boolean;
-  moved?: boolean;
+  animated: boolean,
+  moved?: boolean,
 }): ReactElement => {
   const animatedStyle = animated
     ? css`
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
index 0d3f8eefa45d..b484b7800f39 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
@@ -1,6 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
 
 const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box
diff --git a/packages/uikit-playground/src/Components/NavBar/Divider.tsx b/packages/uikit-playground/src/Components/NavBar/Divider.tsx
index 0fea72ba0e88..0a2c25f207ca 100644
--- a/packages/uikit-playground/src/Components/NavBar/Divider.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/Divider.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
 const Divider: FC = () => <Box height='70%' width='1px' bg='#c7c7c7' />;
 
diff --git a/packages/uikit-playground/src/Components/NavBar/Logo.tsx b/packages/uikit-playground/src/Components/NavBar/Logo.tsx
index 1ea6ccbd5939..64849882d3c7 100644
--- a/packages/uikit-playground/src/Components/NavBar/Logo.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/Logo.tsx
@@ -1,6 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import { RocketChatLogo } from '@rocket.chat/logo';
 import type { FC } from 'react';
+import React from 'react';
 
 const Logo: FC = () => (
   <Box
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index 7e74cab78c53..d32795e6abb3 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -1,6 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Tile, Flex } from '@rocket.chat/fuselage';
+import { Box, Tile, Flex, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
 import Divider from './Divider';
 import Logo from './Logo';
@@ -22,7 +23,24 @@ const NabBar: FC = () => (
     >
       <Logo />
       <Divider />
-      <Box flexGrow={1} minWidth='15px' />
+      <Box
+        flexGrow={1}
+        minWidth='15px'
+        display={'flex'}
+        justifyContent={'flex-end'}
+      >
+        <Box display='flex' height='100%'>
+          <ButtonGroup
+            pie={'20px'}
+            className={css`
+              column-gap: 5px;
+            `}
+          >
+            <Button small>Clear Blocks</Button>
+            <Button small>Copy Payload</Button>
+          </ButtonGroup>
+        </Box>
+      </Box>
       <RightNavBtn />
     </Box>
   </Flex.Container>
diff --git a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
index 653ab5c07da0..6dc4c2cfb8c4 100644
--- a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
@@ -1,9 +1,8 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
-import { context } from '../../Context';
-import { navMenuToggleAction } from '../../Context/action';
+import { context, navMenuToggleAction } from '../../Context';
 import BurgerIcon from './BurgerIcon';
 
 const RightNavBtn: FC = () => {
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
index 2d03bce3595b..aed482c6d9ec 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Icon } from '@rocket.chat/fuselage';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
-import { context } from '../../../../Context';
-import { docAction } from '../../../../Context/action';
+import { context, docAction } from '../../../../Context';
 
 const Display = ({ elementIndex }: { elementIndex: number }) => {
   const { state, dispatch } = useContext(context);
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
index e8f4ded24758..0f031532f3df 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
@@ -5,7 +5,7 @@ import type { ReactElement, ReactNode } from 'react';
 const ElementWrapper = ({
   children,
 }: {
-  children: ReactNode;
+  children: ReactNode,
 }): ReactElement => (
   <Box
     children={children}
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index 9cb989319b81..61d02e3b15a4 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -6,6 +6,7 @@ import {
   UiKitContextualBar as uiKitContextualBar,
 } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import React from 'react';
 
 import DeleteElementBtn from './DeleteElementBtn';
 import ElementWrapper from './ElementWrapper';
@@ -15,11 +16,11 @@ const RenderPayload = ({
   payload,
   surface,
 }: {
-  index: number;
-  payload: readonly LayoutBlock[];
-  surface: number;
+  index: number,
+  payload: readonly LayoutBlock[],
+  surface: number,
 }) => {
-  const uiKitRender: { [key: number]: () => unknown } = {
+  const uiKitRender: { [key: number]: any } = {
     '1': () => uiKitMessage(payload),
     '2': () => uiKitBanner(payload),
     '3': () => uiKitModal(payload),
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
index d6eb3a92754e..f3dcb5860401 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
@@ -1,4 +1,5 @@
 import { Banner, Icon } from '@rocket.chat/fuselage';
+import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index d1a8d74c8b96..86f87a288f7d 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -1,4 +1,5 @@
 import { Message, Avatar } from '@rocket.chat/fuselage';
+import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
@@ -23,10 +24,8 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
     </Message.LeftContainer>
     <Message.Container>
       <Message.Header>
-        <Message.NameContainer>
-          <Message.Name>Haylie George</Message.Name>{' '}
-          <Message.Username>@haylie.george</Message.Username>
-        </Message.NameContainer>
+        <Message.Name>Haylie George</Message.Name>
+        <Message.Username>@haylie.george</Message.Username>
         <Message.Role>Admin</Message.Role>
         <Message.Role>User</Message.Role>
         <Message.Role>Owner</Message.Role>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
index 909cc05274f6..de38af3eff7a 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
@@ -9,6 +9,7 @@ import {
   ButtonGroup,
   Button,
 } from '@rocket.chat/fuselage';
+import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index 630c16a7d27f..be7e93584a9d 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -1,9 +1,11 @@
 import { Box } from '@rocket.chat/fuselage';
+import { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
 import type { FC } from 'react';
-import { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
 
-import { context } from '../../../../Context';
+import { context, docAction, actionPreviewAction } from '../../../../Context';
+import generateActionPreview from '../../../../Payload/actionPreview/generateActionPreview';
 import type { Block } from '../../../Draggable/DraggableList';
 import BannerSurface from './BannerSurface';
 import MessageSurface from './MessageSurface';
@@ -17,30 +19,66 @@ const Surface: FC = () => {
 			doc: { payload },
 			surface,
 		},
+		dispatch,
 	} = useContext(context);
-	const [uniqueBlocks, setUniqueBlocks] = useState<Block[]>(payload.map((block, i) => ({ id: `${i}`, payload: block })));
-
+	const [uniqueBlocks, setUniqueBlocks] = useState<{
+		block: Block[];
+		isChangeByDnd: boolean;
+	}>({
+		block: payload.map((block, i) => ({ id: `${i}`, payload: block })),
+		isChangeByDnd: false,
+	});
+	const preview = generateActionPreview('Action Block', {});
 	useEffect(() => {
-		setUniqueBlocks(payload.map((block, i) => ({ id: `${i}`, payload: block })));
+		setUniqueBlocks({
+			block: payload.map((block, i) => ({ id: `${i}`, payload: block })),
+			isChangeByDnd: false,
+		});
 	}, [payload]);
 
+	useEffect(() => {
+		if (uniqueBlocks.isChangeByDnd) {
+			dispatch(
+				docAction({
+					payload: uniqueBlocks.block.map((block) => block.payload),
+					changedByEditor: false,
+				}),
+			);
+		}
+	}, [uniqueBlocks]);
+
 	const onDragEnd = ({ destination, source }: DropResult) => {
 		if (!destination) return;
 
-		const newBlocks = reorder(uniqueBlocks, source.index, destination.index);
+		const newBlocks = reorder(uniqueBlocks.block, source.index, destination.index);
 
-		setUniqueBlocks(newBlocks);
+		setUniqueBlocks({ block: newBlocks, isChangeByDnd: true });
 	};
 
-	const surfaceRender: { [key: number]: () => JSX.Element } = {
-		'1': () => <MessageSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
-		'2': () => <BannerSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
-		'3': () => <ModalSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
+	const surfaceRender: { [key: number]: any } = {
+		'1': () => <MessageSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
+		'2': () => <BannerSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
+		'3': () => <ModalSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
 		'4': () => <ContextualBarSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
 	};
 	return (
-		<Box pb='40px' pi={20}>
-			{surfaceRender[surface]()}
+		<Box padding='20px'>
+			<UiKitContext.Provider
+				value={{
+					action: (a) => {
+						preview.action = a;
+						dispatch(actionPreviewAction({ ...preview }));
+					},
+					state: (s) => {
+						preview.state = s;
+						dispatch(actionPreviewAction({ ...preview }));
+					},
+					values: {},
+					appId: 'core',
+				}}
+			>
+				{surfaceRender[surface]()}{' '}
+			</UiKitContext.Provider>
 		</Box>
 	);
 };
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/Editor.tsx b/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
similarity index 55%
rename from packages/uikit-playground/src/Components/Preview/Editor/Editor.tsx
rename to packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
index 7b39ea56e372..a7b0b5e09347 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/Editor.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
@@ -1,10 +1,11 @@
 import { Box, Scrollable } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
-import CodeEditor from '../../CodeEditor';
-import extensions from '../../CodeEditor/Extensions';
+import BlockEditor from '../../CodeEditor/BlockEditor';
+import { actionBlockExtensions } from '../../CodeEditor/Extensions/Extensions';
 
-const Editor: FC = () => (
+const ActionBlockEditor: FC = () => (
   <Scrollable vertical>
     <Box
       position='relative'
@@ -16,9 +17,9 @@ const Editor: FC = () => (
       borderInlineStart={'var(--default-border)'}
       overflow={'auto'}
     >
-      <CodeEditor extensions={extensions} />
+      <BlockEditor extensions={actionBlockExtensions} />
     </Box>
   </Scrollable>
 );
 
-export default Editor;
+export default ActionBlockEditor;
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx b/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
new file mode 100644
index 000000000000..70e8c31f655d
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
@@ -0,0 +1,25 @@
+import { Box, Scrollable } from '@rocket.chat/fuselage';
+import type { FC } from 'react';
+import React from 'react';
+
+import { actionPreviewExtensions } from '../../CodeEditor/Extensions/Extensions';
+import PreviewEditor from '../../CodeEditor/PreviewEditor';
+
+const ActionPreviewEditor: FC = () => (
+  <Scrollable vertical>
+    <Box
+      position='relative'
+      height={'100%'}
+      width={'100%'}
+      zIndex={1}
+      bg={'#f6f9fc'}
+      display={'flex'}
+      borderInlineStart={'var(--default-border)'}
+      overflow={'auto'}
+    >
+      <PreviewEditor extensions={actionPreviewExtensions} />
+    </Box>
+  </Scrollable>
+);
+
+export default ActionPreviewEditor;
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
new file mode 100644
index 000000000000..14cf52e76f00
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
@@ -0,0 +1,77 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+
+import { context, editorTabsToggleAction } from '../../../Context';
+import ToggleTabs from '../../ToggleTabs';
+import ActionBlockEditor from './ActionBlockEditor';
+import ActionPreviewEditor from './ActionPreviewEditor';
+
+const EditorPanel: FC = () => {
+  const tabsItem: string[] = ['Action Block', 'Action Preview'];
+  const {
+    state: { editorTabsToggle },
+    dispatch,
+  } = useContext(context);
+
+  const toggleTabsHandler = (index: number) => {
+    dispatch(editorTabsToggleAction(index));
+  };
+
+  const tabChangeStyle = () => {
+    switch (editorTabsToggle) {
+      case 0:
+        return css`
+          transition: 0.5s ease;
+          left: 0;
+        `;
+      case 1:
+        return css`
+          transition: 0.5s ease;
+          left: -100%;
+        `;
+    }
+  };
+
+  return (
+    <Box width={'100%'} height={'100%'}>
+      <Box
+        position='relative'
+        width={'100%'}
+        height={'100%'}
+        overflow='hidden'
+        className={[
+          css`
+            user-select: none;
+          `,
+        ]}
+      >
+        <ToggleTabs
+          tabsItem={tabsItem}
+          onChange={toggleTabsHandler}
+          selectedTab={editorTabsToggle}
+        />
+        <Box
+          position='relative'
+          width='100%'
+          height='calc(100% - 40px)'
+          flexDirection='column'
+        >
+          <Box
+            position='absolute'
+            width={'200%'}
+            height={'100%'}
+            display={'flex'}
+            borderBlockStart='var(--default-border)'
+            className={tabChangeStyle()}
+          >
+            <ActionBlockEditor />
+            <ActionPreviewEditor />
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+export default EditorPanel;
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/index.tsx b/packages/uikit-playground/src/Components/Preview/Editor/index.tsx
index e7967e758ab1..88fa3c8aa53e 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/index.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/index.tsx
@@ -1 +1 @@
-export { default } from './Editor';
+export { default } from './EditorPanel';
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index d4c20e159aed..a856fafb320b 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -1,47 +1,41 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, ButtonGroup, Icon } from '@rocket.chat/fuselage';
-import { useContext } from 'react';
+import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React, { useContext } from 'react';
 
-import { context } from '../../../Context';
+import { context, previewTabsToggleAction } from '../../../Context';
 import SurfaceSelect from '../../SurfaceSelect';
-import PanelBtn from './PanelBtn';
-import TabChange from './TabChange';
+import ToggleTabs from '../../ToggleTabs';
 
 const NavPanel: FC = () => {
 	const {
-		state: { isMobile, isTablet },
+		state: { isMobile, isTablet, previewTabsToggle },
+		dispatch,
 	} = useContext(context);
 
+	const toggleTabsHandler = (index: number) => {
+		dispatch(previewTabsToggleAction(index));
+	};
+
 	const tabsItem: string[] = ['Preview', 'Editor'];
 	return (
 		<Box
-			borderBlockEnd='var(--default-border)'
+			width={'100%'}
+			height={'40px'}
+			borderBlockEnd={'var(--default-border)'}
 			display={'flex'}
 			alignItems={'center'}
 			zIndex={1}
 			justifyContent={isMobile ? 'flex-end' : 'space-between'}
-			bg='light'
+			bg={'alternative'}
 			className={css`
 				user-select: none;
 			`}
-			p={16}
 		>
-			<Box flexGrow={0}>
+			<Box flexGrow={0} pis={'5px'}>
 				<SurfaceSelect />
 			</Box>
-			<Box display='flex' height='100%' alignContent={'center'}>
-				<ButtonGroup
-					pis={'20px'}
-					className={css`
-						column-gap: 10px;
-					`}
-				>
-					<PanelBtn icon={<Icon name='file' width={16} />} name={'Clear Blocks'} isSmall={isTablet} />
-					<PanelBtn icon={<Icon name='copy' width={16} />} name={'Copy Payload'} isSmall={isTablet} />
-				</ButtonGroup>
-			</Box>
-			{isTablet && <TabChange tabsItem={tabsItem} />}
+			{isTablet && <ToggleTabs tabsItem={tabsItem} onChange={toggleTabsHandler} selectedTab={previewTabsToggle} />}
 		</Box>
 	);
 };
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
index 7e49ab128443..2cf3f2f9dc41 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Button, Label } from '@rocket.chat/fuselage';
 import type { FC, ReactNode } from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 const PanelBtn: FC<{ icon: ReactNode; name: string; isSmall: boolean }> = ({ icon, name, isSmall }) => {
 	const [hover, setHover] = useState(false);
@@ -17,12 +17,12 @@ const PanelBtn: FC<{ icon: ReactNode; name: string; isSmall: boolean }> = ({ ico
 			<Button tiny square onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
 				{icon}
 			</Button>
-			<Label overflow={'hidden'} className={style} fontScale='micro'>
+			<Label overflow={'hidden'} className={style} fontSize='micro'>
 				{name}
 			</Label>
 		</>
 	) : (
-		<Button>{name}</Button>
+		<Button small>{name}</Button>
 	);
 };
 
diff --git a/packages/uikit-playground/src/Components/Preview/Preview.tsx b/packages/uikit-playground/src/Components/Preview/Preview.tsx
index 4cf851e172f1..60203fee7086 100644
--- a/packages/uikit-playground/src/Components/Preview/Preview.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Preview.tsx
@@ -1,10 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 
-import { context } from '../../Context';
-import { tabsToggleAction } from '../../Context/action';
+import { context, previewTabsToggleAction } from '../../Context';
 import NavPanel from './NavPanel';
 import Wrapper from './Wrapper';
 
@@ -15,7 +14,7 @@ const Preview: FC = () => {
   } = useContext(context);
 
   useEffect(() => {
-    dispatch(tabsToggleAction(0));
+    dispatch(previewTabsToggleAction(0));
   }, [isTablet, dispatch]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
index fe71e19e6b9f..50596f94c0ef 100644
--- a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
+++ b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
@@ -1,16 +1,15 @@
 import './splitPlane.css';
 import type { FC } from 'react';
-import { useEffect, useContext } from 'react';
+import React, { useEffect, useContext } from 'react';
 import SplitPane from 'react-split-pane';
 
-import { context } from '../../../Context';
-import { tabsToggleAction } from '../../../Context/action';
+import { context, previewTabsToggleAction } from '../../../Context';
 import Display from '../Display';
-import Editor from '../Editor';
+import EditorPanel from '../Editor';
 
 type PreviewSizeType = {
-  blockSize?: number;
-  inlineSize?: number;
+  blockSize: number,
+  inlineSize: number,
 };
 const SplitPlaneContainer: FC<{ PreviewSize: PreviewSizeType }> = ({
   PreviewSize,
@@ -21,25 +20,25 @@ const SplitPlaneContainer: FC<{ PreviewSize: PreviewSizeType }> = ({
   } = useContext(context);
 
   useEffect(() => {
-    dispatch(tabsToggleAction(0));
+    dispatch(previewTabsToggleAction(0));
   }, [isTablet, dispatch]);
 
   const splitPaneProps = {
-    defaultSize: (PreviewSize.inlineSize ?? 0) * 0.5,
+    defaultSize: PreviewSize.inlineSize * 0.5,
     minSize: 500,
-    maxSize: (PreviewSize.inlineSize ?? 0) - 300,
+    maxSize: PreviewSize.inlineSize - 300,
     allowResize: !isTablet,
   };
 
   return isTablet ? (
     <>
       <Display />
-      <Editor />
+      <EditorPanel />
     </>
   ) : (
     <SplitPane {...splitPaneProps}>
       <Display />
-      <Editor />
+      <EditorPanel />
     </SplitPane>
   );
 };
diff --git a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/splitPlane.css b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/splitPlane.css
index 741b24f31e19..96dde577c0b1 100644
--- a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/splitPlane.css
+++ b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/splitPlane.css
@@ -1,53 +1,54 @@
-.Resizer {
-  background: #000;
-  opacity: 0.2;
-  z-index: 10;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding;
-  background-clip: padding-box;
-}
 
-.Resizer:hover {
-  -webkit-transition: all 2s ease;
-  transition: all 2s ease;
-}
+  .Resizer {
+    background: #000;
+    opacity: 0.2;
+    z-index: 10;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding;
+    background-clip: padding-box;
+  }
+   
+  .Resizer:hover {
+    -webkit-transition: all 2s ease;
+    transition: all 2s ease;
+  }
+   
+  .Resizer.horizontal {
+    height: 11px;
+    margin: -5px 0;
+    border-top: 5px solid rgba(255, 255, 255, 0);
+    border-bottom: 5px solid rgba(255, 255, 255, 0);
+    cursor: row-resize;
+    width: 100%;
+  }
+   
+  .Resizer.horizontal:hover {
+    border-top: 5px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  }
+   
+  .Resizer.vertical {
+    width: 11px;
+    margin: 0 -5px;
+    border-left: 5px solid rgba(255, 255, 255, 0);
+    border-right: 5px solid rgba(255, 255, 255, 0);
+    cursor: col-resize;
+  }
+   
+  .Resizer.vertical:hover {
+    border-left: 5px solid rgba(0, 0, 0, 0.5);
+    border-right: 5px solid rgba(0, 0, 0, 0.5);
+  }
+  .Resizer.disabled {
+    cursor: not-allowed;
+  }
+  .Resizer.disabled:hover {
+    border-color: transparent;
+  }
 
-.Resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgba(255, 255, 255, 0);
-  border-bottom: 5px solid rgba(255, 255, 255, 0);
-  cursor: row-resize;
-  width: 100%;
-}
-
-.Resizer.horizontal:hover {
-  border-top: 5px solid rgba(0, 0, 0, 0.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-  width: 11px;
-  margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
-  cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-  border-left: 5px solid rgba(0, 0, 0, 0.5);
-  border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-.Resizer.disabled {
-  cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-  border-color: transparent;
-}
-
-.pane1Style {
-  width: 40%;
-}
+  .pane1Style{
+    width: 40%
+  }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/Preview/Wrapper.tsx b/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
index 19969dd48cf5..ffd501c0b14f 100644
--- a/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
 import { context } from '../../Context';
 import SplitPlaneContainer from './SplitPlaneContainer/SplitPlaneContainer';
@@ -9,11 +9,11 @@ import SplitPlaneContainer from './SplitPlaneContainer/SplitPlaneContainer';
 const Wrapper = () => {
   const { ref, contentBoxSize } = useResizeObserver();
   const {
-    state: { isTablet, tabsToggle },
+    state: { isTablet, previewTabsToggle },
   } = useContext(context);
 
   const tabChangeStyle = () => {
-    switch (tabsToggle) {
+    switch (previewTabsToggle) {
       case 0:
         return css`
           transition: 0.5s ease;
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
index 145c9b70c330..cbba8a574b65 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
@@ -1,9 +1,8 @@
 import { Select } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 
-import { context } from '../../Context';
-import { surfaceAction } from '../../Context/action';
+import { context, surfaceAction } from '../../Context';
 import options from './options';
 
 const SurfaceSelect: FC = () => {
@@ -15,7 +14,7 @@ const SurfaceSelect: FC = () => {
     <Select
       options={options}
       value={`${surface}`}
-      placeholder='Surface'
+      placeholder={'Surface'}
       onChange={(e) => {
         dispatch(surfaceAction(parseInt(e)));
       }}
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
index 315b864a8feb..e9ffc840767f 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
@@ -1,4 +1,4 @@
-type SelectOption = readonly [value: string, label: string, selected?: boolean];
+type SelectOption = [value: string, label: string, selected?: boolean]
 
 const options: SelectOption[] = [
   ['1', 'Message Preview'],
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/TabChange.tsx b/packages/uikit-playground/src/Components/ToggleTabs/index.tsx
similarity index 57%
rename from packages/uikit-playground/src/Components/Preview/NavPanel/TabChange.tsx
rename to packages/uikit-playground/src/Components/ToggleTabs/index.tsx
index 2479f324521d..7e08140c3c41 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/TabChange.tsx
+++ b/packages/uikit-playground/src/Components/ToggleTabs/index.tsx
@@ -1,17 +1,12 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Tabs } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useContext } from 'react';
-
-import { context } from '../../../Context';
-import { tabsToggleAction } from '../../../Context/action';
-
-const TabChange: FC<{ tabsItem: string[] }> = ({ tabsItem }) => {
-  const {
-    state: { tabsToggle },
-    dispatch,
-  } = useContext(context);
 
+const ToggleTabs: FC<{
+  tabsItem: string[],
+  onChange: (index: number) => void,
+  selectedTab: number,
+}> = ({ tabsItem, onChange, selectedTab }) => {
   const disableBorder = css`
     border-left: none !important;
     border-right: none !important;
@@ -24,8 +19,8 @@ const TabChange: FC<{ tabsItem: string[] }> = ({ tabsItem }) => {
       {tabsItem.map((item: string, index: number) => (
         <Tabs.Item
           key={index}
-          selected={tabsToggle === index}
-          onClick={() => dispatch(tabsToggleAction(index))}
+          selected={selectedTab === index}
+          onClick={() => onChange(index)}
           className={disableBorder}
           children={item}
         />
@@ -34,4 +29,4 @@ const TabChange: FC<{ tabsItem: string[] }> = ({ tabsItem }) => {
   );
 };
 
-export default TabChange;
+export default ToggleTabs;
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
index 9dc1a610aaf1..9b90eddd5ea0 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
@@ -1,6 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
 const MenuItem: FC<{ name: string }> = ({ name }) => {
 	const pointer = css`
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
index 46074b6f3abb..56b1b1f4e43f 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
@@ -1,5 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
 
 const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
   <Box
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
index e57db8d7746c..be94a8f5a0d6 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
@@ -1,6 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
+import React from 'react';
 
 import SurfaceSelect from '../../SurfaceSelect';
 import MenuItem from './MenuItem';
diff --git a/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx b/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
index c56428b04f29..d70bf9a02a46 100644
--- a/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
@@ -1,10 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 
-import { context } from '../../Context';
-import { navMenuToggleAction } from '../../Context/action';
+import { context, navMenuToggleAction } from '../../Context';
 import Menu from './Menu';
 
 const NavMenu: FC = () => {
diff --git a/packages/uikit-playground/src/Components/utils/codePrettier.ts b/packages/uikit-playground/src/Components/utils/codePrettier.ts
deleted file mode 100644
index 0fda62bb93ba..000000000000
--- a/packages/uikit-playground/src/Components/utils/codePrettier.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import prettier from 'prettier';
-import pluginBabel from 'prettier/parser-babel';
-
-const codePrettier = (code: string, cursor: number) =>
-  prettier.formatWithCursor(code, {
-    parser: 'json',
-    plugins: [pluginBabel],
-    tabWidth: 4,
-    useTabs: true,
-    singleQuote: false,
-    cursorOffset: cursor,
-  });
-
-export default codePrettier;
diff --git a/packages/uikit-playground/src/Context/action/actionPreviewAction.ts b/packages/uikit-playground/src/Context/action/actionPreviewAction.ts
new file mode 100644
index 000000000000..fbcc1995c324
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/actionPreviewAction.ts
@@ -0,0 +1,11 @@
+import type { actionPreviewType } from '../initialState';
+
+type action = {
+  type: string,
+  payload: actionPreviewType,
+};
+
+export const actionPreviewAction = (payload: actionPreviewType): action => ({
+  type: 'actionPreview',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/docAction.ts b/packages/uikit-playground/src/Context/action/docAction.ts
index 308cc2cd42e2..9ad2d5bc0ab7 100644
--- a/packages/uikit-playground/src/Context/action/docAction.ts
+++ b/packages/uikit-playground/src/Context/action/docAction.ts
@@ -1,11 +1,11 @@
 import type { docType } from '../initialState';
 
-export type DocAction = {
-  type: 'doc';
-  payload: docType;
+type action = {
+  type: string,
+  payload: docType,
 };
 
-export const docAction = (payload: docType): DocAction => ({
+export const docAction = (payload: docType): action => ({
   type: 'doc',
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts b/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
new file mode 100644
index 000000000000..e1f658a5b210
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: number,
+};
+
+export const editorTabsToggleAction = (payload: number): action => ({
+  type: 'editorToggle',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index 70aaed3fa64d..061906fdd1c8 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -1,7 +1,10 @@
 export { isMobileAction } from './isMobileAction';
 export { isTabletAction } from './isTabletAction';
 export { sidebarToggleAction } from './sidebarToggleAction';
-export { tabsToggleAction } from './tabsToggleAction';
+export { editorTabsToggleAction } from './editorTabsToggleAction';
+export { previewTabsToggleAction } from './previewTabsToggleAction';
 export { navMenuToggleAction } from './navMenuToggleAction';
 export { docAction } from './docAction';
 export { surfaceAction } from './surfaceAction';
+export { actionPreviewAction } from './actionPreviewAction';
+export { userAction } from './userAction';
diff --git a/packages/uikit-playground/src/Context/action/isMobileAction.ts b/packages/uikit-playground/src/Context/action/isMobileAction.ts
index 1260a21b4b72..434a8f567aa9 100644
--- a/packages/uikit-playground/src/Context/action/isMobileAction.ts
+++ b/packages/uikit-playground/src/Context/action/isMobileAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'isMobile';
-  payload: boolean;
+  type: string,
+  payload: boolean,
 };
 
 export const isMobileAction = (payload: boolean): action => ({
diff --git a/packages/uikit-playground/src/Context/action/isTabletAction.ts b/packages/uikit-playground/src/Context/action/isTabletAction.ts
index a96e34612237..068d8df07e00 100644
--- a/packages/uikit-playground/src/Context/action/isTabletAction.ts
+++ b/packages/uikit-playground/src/Context/action/isTabletAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'isTablet';
-  payload: boolean;
+  type: string,
+  payload: boolean,
 };
 
 export const isTabletAction = (payload: boolean): action => ({
diff --git a/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts b/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
index 78296f17d326..1a2fef9d2147 100644
--- a/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'navMenuToggle';
-  payload: boolean;
+  type: string,
+  payload: boolean,
 };
 
 export const navMenuToggleAction = (payload: boolean): action => ({
diff --git a/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts b/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
new file mode 100644
index 000000000000..c108d492d2da
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: number,
+};
+
+export const previewTabsToggleAction = (payload: number): action => ({
+  type: 'previewToggle',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts b/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
index 3c410fe09d8c..3b43c7e2dea5 100644
--- a/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'sidebarToggle';
-  payload: boolean;
+  type: string,
+  payload: boolean,
 };
 
 export const sidebarToggleAction = (payload: boolean): action => ({
diff --git a/packages/uikit-playground/src/Context/action/surfaceAction.ts b/packages/uikit-playground/src/Context/action/surfaceAction.ts
index a2ab0fd23ba7..74f8c665e324 100644
--- a/packages/uikit-playground/src/Context/action/surfaceAction.ts
+++ b/packages/uikit-playground/src/Context/action/surfaceAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'surface';
-  payload: number;
+  type: string,
+  payload: number,
 };
 
 export const surfaceAction = (payload: number): action => ({
diff --git a/packages/uikit-playground/src/Context/action/tabsToggleAction.ts b/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
index 53563194e338..38a17c2f73bc 100644
--- a/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
@@ -1,6 +1,6 @@
 type action = {
-  type: 'editorToggle';
-  payload: number;
+  type: string,
+  payload: number,
 };
 
 export const tabsToggleAction = (payload: number): action => ({
diff --git a/packages/uikit-playground/src/Context/action/userAction.ts b/packages/uikit-playground/src/Context/action/userAction.ts
new file mode 100644
index 000000000000..ab1d0ea512cd
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/userAction.ts
@@ -0,0 +1,11 @@
+import type { userType } from '../initialState';
+
+type action = {
+  type: string,
+  payload: userType,
+};
+
+export const userAction = (payload: userType): action => ({
+  type: 'user',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/index.tsx b/packages/uikit-playground/src/Context/index.tsx
index fa4f7ce60624..ee4b960de789 100644
--- a/packages/uikit-playground/src/Context/index.tsx
+++ b/packages/uikit-playground/src/Context/index.tsx
@@ -2,7 +2,8 @@ import createCtx from './createCtx';
 import { initialState } from './initialState';
 import reducer from './reducer';
 
+export * from './action';
+
 const [context, Provider] = createCtx(reducer, initialState);
 
-// eslint-disable-next-line react-refresh/only-export-components
 export { context, Provider };
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 3222cb3462b8..eee26b65b0fb 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -5,22 +5,57 @@ export type docType = {
   changedByEditor?: boolean;
 };
 
+export type userType = {
+  id: string;
+  username: string;
+  name: string;
+  team_id: string;
+} | null;
+
+export type actionPreviewType = {
+  type?: string;
+  user?: userType | null;
+  api_app_id?: string;
+  token?: string;
+  container?: {
+    type: string;
+    text: string;
+  };
+  trigger_id?: string;
+  team?: {
+    id: string;
+    domain: string;
+  } | null;
+  enterprise?: string | null;
+  is_enterprise_install?: boolean;
+  action?: object;
+  response_url?: string;
+  state?: object;
+  view?: readonly LayoutBlock[];
+};
+
 export type initialStateType = {
   isMobile: boolean;
   isTablet: boolean;
   sideBarToggle: boolean;
-  tabsToggle: number;
+  previewTabsToggle: number;
+  editorTabsToggle: number;
   navMenuToggle: boolean;
   surface: number;
   doc: docType;
+  actionPreview: actionPreviewType;
+  user: userType;
 };
 
 export const initialState: initialStateType = {
   isMobile: false,
   isTablet: false,
   sideBarToggle: false,
-  tabsToggle: 0,
+  previewTabsToggle: 0,
+  editorTabsToggle: 0,
   navMenuToggle: false,
   surface: 1,
   doc: { payload: [], changedByEditor: true },
+  actionPreview: {},
+  user: null,
 };
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 57057a28ad07..32e8eb4823f4 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -1,12 +1,8 @@
-import type { DocAction } from './action/docAction';
 import type { initialStateType } from './initialState';
 
-type ActionType =
-  | DocAction
-  | { type: 'navMenuToogle' | 'surface' | 'editorToggle'; payload: number }
-  | { type: 'isMobile' | 'isTablet' | 'sidebarToggle' | 'navMenuToggle'; payload: boolean }
+type actionType = { type: string; payload: any };
 
-const reducer = (state: initialStateType, action: ActionType) => {
+const reducer = (state: initialStateType, action: actionType) => {
   switch (action.type) {
     case 'isMobile':
       return { ...state, isMobile: action.payload };
@@ -14,8 +10,10 @@ const reducer = (state: initialStateType, action: ActionType) => {
       return { ...state, isTablet: action.payload };
     case 'sidebarToggle':
       return { ...state, sideBarToggle: action.payload };
+    case 'previewToggle':
+      return { ...state, previewTabsToggle: action.payload };
     case 'editorToggle':
-      return { ...state, tabsToggle: action.payload };
+      return { ...state, editorTabsToggle: action.payload };
     case 'navMenuToggle':
       return { ...state, navMenuToggle: action.payload };
     case 'surface':
@@ -28,8 +26,13 @@ const reducer = (state: initialStateType, action: ActionType) => {
           changedByEditor: action.payload.changedByEditor === undefined,
         },
       };
+    case 'actionPreview':
+      return { ...state, actionPreview: action.payload };
+    case 'user':
+      return { ...state, user: action.payload };
     default:
       return state;
   }
 };
+
 export default reducer;
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 43e5f37e7d13..07db5088b3d7 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -7,8 +7,7 @@ import ComponentSideBar from '../Components/ComponentSideBar';
 import NavBar from '../Components/NavBar';
 import Preview from '../Components/Preview';
 import NavMenu from '../Components/navMenu';
-import { context } from '../Context';
-import { isMobileAction, isTabletAction } from '../Context/action';
+import { context, isMobileAction, isTabletAction } from '../Context';
 
 const Playground: FC = () => {
   const {
@@ -17,7 +16,7 @@ const Playground: FC = () => {
   } = useContext(context);
 
   const [isMobile, isTablet] = useMediaQueries(
-    '(max-width: 500px)',
+    '(max-width: 630px)',
     '(max-width: 1050px)'
   );
 
@@ -39,6 +38,7 @@ const Playground: FC = () => {
       bg={'var(--primaryBackgroundColor)'}
     >
       <NavBar />
+
       {navMenuToggle && <NavMenu />}
       <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
         <ComponentSideBar />
diff --git a/packages/uikit-playground/src/Payload/BlocksTree.ts b/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
similarity index 99%
rename from packages/uikit-playground/src/Payload/BlocksTree.ts
rename to packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
index c69b59564a3c..aa97da04e2f3 100644
--- a/packages/uikit-playground/src/Payload/BlocksTree.ts
+++ b/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
@@ -1,4 +1,4 @@
-import type { Item } from '../Components/DropDown/types';
+import type { Item } from '../../Components/DropDown/types';
 import {
   actionWithButtonDefault,
   actionWithButtonPrimary,
diff --git a/packages/uikit-playground/src/Payload/action/button.ts b/packages/uikit-playground/src/Payload/actionBlock/action/button.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/button.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/button.ts
diff --git a/packages/uikit-playground/src/Payload/action/datePicker.ts b/packages/uikit-playground/src/Payload/actionBlock/action/datePicker.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/datePicker.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/datePicker.ts
diff --git a/packages/uikit-playground/src/Payload/action/image.ts b/packages/uikit-playground/src/Payload/actionBlock/action/image.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/image.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/image.ts
diff --git a/packages/uikit-playground/src/Payload/action/index.ts b/packages/uikit-playground/src/Payload/actionBlock/action/index.ts
similarity index 83%
rename from packages/uikit-playground/src/Payload/action/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/index.ts
index 2d2f75a9c58e..33eaa00b26d3 100644
--- a/packages/uikit-playground/src/Payload/action/index.ts
+++ b/packages/uikit-playground/src/Payload/actionBlock/action/index.ts
@@ -1,10 +1,10 @@
 export * from './button';
 
-// export * from "./input";
+// export * from './input';
 
 export * from './staticSelect';
 
-// export * from "./image";
+// export * from './image';
 
 export * from './menu';
 
diff --git a/packages/uikit-playground/src/Payload/action/input.ts b/packages/uikit-playground/src/Payload/actionBlock/action/input.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/input.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/input.ts
diff --git a/packages/uikit-playground/src/Payload/action/linearScale.ts b/packages/uikit-playground/src/Payload/actionBlock/action/linearScale.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/linearScale.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/linearScale.ts
diff --git a/packages/uikit-playground/src/Payload/action/menu.ts b/packages/uikit-playground/src/Payload/actionBlock/action/menu.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/menu.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/menu.ts
diff --git a/packages/uikit-playground/src/Payload/action/staticSelect.ts b/packages/uikit-playground/src/Payload/actionBlock/action/staticSelect.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/action/staticSelect.ts
rename to packages/uikit-playground/src/Payload/actionBlock/action/staticSelect.ts
diff --git a/packages/uikit-playground/src/Payload/context/index.ts b/packages/uikit-playground/src/Payload/actionBlock/context/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/context/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/context/index.ts
diff --git a/packages/uikit-playground/src/Payload/divider/index.ts b/packages/uikit-playground/src/Payload/actionBlock/divider/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/divider/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/divider/index.ts
diff --git a/packages/uikit-playground/src/Payload/image/index.ts b/packages/uikit-playground/src/Payload/actionBlock/image/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/image/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/image/index.ts
diff --git a/packages/uikit-playground/src/Payload/input/datePicker.ts b/packages/uikit-playground/src/Payload/actionBlock/input/datePicker.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/input/datePicker.ts
rename to packages/uikit-playground/src/Payload/actionBlock/input/datePicker.ts
diff --git a/packages/uikit-playground/src/Payload/input/index.ts b/packages/uikit-playground/src/Payload/actionBlock/input/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/input/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/input/index.ts
diff --git a/packages/uikit-playground/src/Payload/input/input.ts b/packages/uikit-playground/src/Payload/actionBlock/input/input.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/input/input.ts
rename to packages/uikit-playground/src/Payload/actionBlock/input/input.ts
diff --git a/packages/uikit-playground/src/Payload/input/linearScale.ts b/packages/uikit-playground/src/Payload/actionBlock/input/linearScale.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/input/linearScale.ts
rename to packages/uikit-playground/src/Payload/actionBlock/input/linearScale.ts
diff --git a/packages/uikit-playground/src/Payload/input/staticSelect.ts b/packages/uikit-playground/src/Payload/actionBlock/input/staticSelect.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/input/staticSelect.ts
rename to packages/uikit-playground/src/Payload/actionBlock/input/staticSelect.ts
diff --git a/packages/uikit-playground/src/Payload/preview/index.ts b/packages/uikit-playground/src/Payload/actionBlock/preview/index.ts
similarity index 98%
rename from packages/uikit-playground/src/Payload/preview/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/preview/index.ts
index db030d20123d..1ccd833b8e5f 100644
--- a/packages/uikit-playground/src/Payload/preview/index.ts
+++ b/packages/uikit-playground/src/Payload/actionBlock/preview/index.ts
@@ -116,6 +116,6 @@ export const previewWithImageAndUrl: readonly LayoutBlock[] = [
         },
       ],
     },
-    // externalUrl: "https://rocket.chat",
+    // externalUrl: 'https://rocket.chat',
   },
 ];
diff --git a/packages/uikit-playground/src/Payload/section/button.ts b/packages/uikit-playground/src/Payload/actionBlock/section/button.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/button.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/button.ts
diff --git a/packages/uikit-playground/src/Payload/section/datePicker.ts b/packages/uikit-playground/src/Payload/actionBlock/section/datePicker.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/datePicker.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/datePicker.ts
diff --git a/packages/uikit-playground/src/Payload/section/image.ts b/packages/uikit-playground/src/Payload/actionBlock/section/image.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/image.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/image.ts
diff --git a/packages/uikit-playground/src/Payload/section/index.ts b/packages/uikit-playground/src/Payload/actionBlock/section/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/index.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/index.ts
diff --git a/packages/uikit-playground/src/Payload/section/menu.ts b/packages/uikit-playground/src/Payload/actionBlock/section/menu.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/menu.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/menu.ts
diff --git a/packages/uikit-playground/src/Payload/section/text.ts b/packages/uikit-playground/src/Payload/actionBlock/section/text.ts
similarity index 100%
rename from packages/uikit-playground/src/Payload/section/text.ts
rename to packages/uikit-playground/src/Payload/actionBlock/section/text.ts
diff --git a/packages/uikit-playground/src/Payload/actionPreview/container.ts b/packages/uikit-playground/src/Payload/actionPreview/container.ts
new file mode 100644
index 000000000000..22ecfca5a6b0
--- /dev/null
+++ b/packages/uikit-playground/src/Payload/actionPreview/container.ts
@@ -0,0 +1,19 @@
+type containerType = {
+  type: string;
+  text: string;
+};
+const container: containerType[] = [
+  {
+    type: 'message',
+    text: 'The contents of the original message where the action originated',
+  },
+  {
+    type: 'banner',
+    text: '',
+  },
+  {
+    type: 'modal',
+    text: '',
+  },
+];
+export default container;
diff --git a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
new file mode 100644
index 000000000000..6253fe53e336
--- /dev/null
+++ b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
@@ -0,0 +1,31 @@
+import { useContext } from 'react';
+
+import { context } from '../../Context';
+import type { actionPreviewType } from '../../Context/initialState';
+import container from './container';
+
+const generateActionPreview = (type: string, data: actionPreviewType) => {
+  const {
+    state: { user, surface, doc },
+  } = useContext(context);
+
+  const actionPreview: actionPreviewType = {
+    type,
+    user,
+    api_app_id: '',
+    token: '',
+    container: container[surface-1],
+    trigger_id: '',
+    team: null,
+    enterprise: null,
+    is_enterprise_install: false,
+    response_url: '',
+    ...data,
+  };
+  if (type === 'View Submission') {
+    actionPreview.view = doc.payload;
+  }
+  return actionPreview;
+};
+
+export default generateActionPreview;
diff --git a/packages/uikit-playground/src/Payload/index.ts b/packages/uikit-playground/src/Payload/index.ts
new file mode 100644
index 000000000000..637c62ac57e2
--- /dev/null
+++ b/packages/uikit-playground/src/Payload/index.ts
@@ -0,0 +1,2 @@
+export * from './actionBlock/BlocksTree';
+export * from './actionPreview/generateActionPreview';
diff --git a/packages/uikit-playground/src/cssVariables.css b/packages/uikit-playground/src/cssVariables.css
index fd447ac55ccc..ceca8f9d6a16 100644
--- a/packages/uikit-playground/src/cssVariables.css
+++ b/packages/uikit-playground/src/cssVariables.css
@@ -1,14 +1,14 @@
 :root {
-  --primaryBackgroundColor: #f6f9fc;
-  --RCPG-primary-color: #f5455c;
-  --RCPG-secondary-color: #19ac7c;
-  --RCPG-tertary-color: #156ff5;
-  --animation-default: 0.5s ease;
-  --animation-fast: 0.3s ease;
-  --animation-very-fast: 0.1s ease;
-  --sidebar-width: min(35%, 250px);
-  --dropdown-box-shadow: inset -15px 15px 20px -30px rgb(47 52 61 / 55%);
-  --default-border: 1px solid #e6e6e6;
-  --elements-border: 1px solid #b9b8b8;
-  --elements-box-shadow: 0px 0px 8px 1px #ddd;
-}
+    --primaryBackgroundColor: #f6f9fc;
+    --RCPG-primary-color: #f5455c;
+    --RCPG-secondary-color: #19ac7c;
+    --RCPG-tertary-color: #156ff5;
+    --animation-default:  0.5s ease;
+    --animation-fast:  0.3s ease;
+    --animation-very-fast:  0.1s ease;
+    --sidebar-width: min(35%, 250px);
+    --dropdown-box-shadow: inset -15px 15px 20px -30px rgb(47 52 61 / 55%);
+    --default-border: 1px solid #e6e6e6;
+    --elements-border: 1px solid #b9b8b8;
+    --elements-box-shadow:  0px 0px 8px 1px #ddd;
+  }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/hooks/useCodeMirror.ts b/packages/uikit-playground/src/hooks/useCodeMirror.ts
index 48bdcddfcaa2..8816f5f2991c 100644
--- a/packages/uikit-playground/src/hooks/useCodeMirror.ts
+++ b/packages/uikit-playground/src/hooks/useCodeMirror.ts
@@ -73,7 +73,7 @@ export default function useCodeMirror(extensions?: Extension[], doc?: string) {
     });
 
     return () => view.current?.destroy();
-  }, [doc, element, extensions, updateListener]);
+  }, [element]);
 
   return { editor, changes, setValue };
 }
diff --git a/packages/uikit-playground/src/index.css b/packages/uikit-playground/src/index.css
index f7d3249ba616..d20d4290e40a 100644
--- a/packages/uikit-playground/src/index.css
+++ b/packages/uikit-playground/src/index.css
@@ -1,7 +1,5 @@
-body,
-html {
-  width: 100%;
-  height: 100%;
+body,html {
+  width: 100%; height: 100%;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,12 +8,11 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-#root {
-  width: 100%;
-  height: 100%;
+#root{
+  width: 100%; height: 100%;
 }
 
-div {
+div{
   outline: none !important;
 }
 
@@ -24,4 +21,4 @@ code {
     monospace;
 }
 
-/* .cm-scroller { overflow: auto; min-height: 350px !important} */
+/* .cm-scroller { overflow: auto; min-height: 350px !important} */
\ No newline at end of file
diff --git a/packages/uikit-playground/src/module.d.ts b/packages/uikit-playground/src/module.d.ts
index 6fe1070d8a2d..65486d449683 100644
--- a/packages/uikit-playground/src/module.d.ts
+++ b/packages/uikit-playground/src/module.d.ts
@@ -1,7 +1,5 @@
 declare module '*.svg' {
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-  const src: unknown;
+  const src: any;
   export default src;
-}
-
-declare module 'eslint4b-prebuilt';
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/utils/codePrettier.ts b/packages/uikit-playground/src/utils/codePrettier.ts
index 8c296728ac98..b1b455f8748a 100644
--- a/packages/uikit-playground/src/utils/codePrettier.ts
+++ b/packages/uikit-playground/src/utils/codePrettier.ts
@@ -1,14 +1,14 @@
 import prettier from 'prettier';
 import pluginBabel from 'prettier/parser-babel';
 
-const codePrettier = (code: string, cursor?: number) =>
+const codePrettier = (code: string, cursor: any) =>
   prettier.formatWithCursor(code, {
     parser: 'json',
     plugins: [pluginBabel],
     tabWidth: 4,
     useTabs: true,
     singleQuote: false,
-    cursorOffset: cursor || 0,
+    cursorOffset: cursor,
   });
 
 export default codePrettier;

From a05b56b7a132ace6a20324cb348c14fc3a0b5bab Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 16:35:59 +0530
Subject: [PATCH 02/50] feat(uikit-playground): Added Templates

---
 packages/uikit-playground/src/App.tsx         |   4 +-
 .../src/Components/CodeEditor/BlockEditor.tsx |   2 +-
 .../Components/Preview/NavPanel/NavPanel.tsx  |   9 +-
 .../Components/Preview/NavPanel/PanelBtn.tsx  |  29 --
 .../TemplatesModal/Container/Container.tsx    |  19 +
 .../TemplatesModal/Container/Payload.tsx      |  83 ++++
 .../TemplatesModal/Container/Section.tsx      |  29 ++
 .../TemplatesModal/Container/index.ts         |   1 +
 .../Components/TemplatesModal/Templates.tsx   |  52 +++
 .../src/Components/TemplatesModal/index.ts    |   1 +
 .../Components/TemplatesModal/templates.ts    | 401 ++++++++++++++++++
 .../src/Context/action/index.ts               |   1 +
 .../Context/action/templatesToggleAction.ts   |   9 +
 .../src/Context/initialState.ts               |   2 +
 .../uikit-playground/src/Context/reducer.ts   |   4 +-
 .../uikit-playground/src/Pages/Playground.tsx |  31 +-
 packages/uikit-playground/src/index.tsx       |  16 +
 17 files changed, 643 insertions(+), 50 deletions(-)
 delete mode 100644 packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/index.ts
 create mode 100644 packages/uikit-playground/src/Components/TemplatesModal/templates.ts
 create mode 100644 packages/uikit-playground/src/Context/action/templatesToggleAction.ts
 create mode 100644 packages/uikit-playground/src/index.tsx

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 750c4df4795f..f01d81375f6f 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -8,8 +8,8 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path='/' element={<Playground />} />
-        <Route path='*' element={<Playground />} />
+        <Route path="/" element={<Playground />} />
+        <Route path="*" element={<Playground />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index e3e19a228aab..15510ea59def 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -52,7 +52,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
 
   return (
     <>
-      <Box display='grid' height='100%' width={'100%'} ref={editor} />
+      <Box display="grid" height="100%" width={'100%'} ref={editor} />
     </>
   );
 };
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index a856fafb320b..6cf1dc87f0ff 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -1,9 +1,9 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 import React, { useContext } from 'react';
 
-import { context, previewTabsToggleAction } from '../../../Context';
+import { context, previewTabsToggleAction, templatesToggleAction } from '../../../Context';
 import SurfaceSelect from '../../SurfaceSelect';
 import ToggleTabs from '../../ToggleTabs';
 
@@ -32,8 +32,11 @@ const NavPanel: FC = () => {
 				user-select: none;
 			`}
 		>
-			<Box flexGrow={0} pis={'5px'}>
+			<Box display='flex' flexGrow={0} pis={'5px'}>
 				<SurfaceSelect />
+				<Button mis='10px' small onClick={() => dispatch(templatesToggleAction(true))}>
+					Templates
+				</Button>
 			</Box>
 			{isTablet && <ToggleTabs tabsItem={tabsItem} onChange={toggleTabsHandler} selectedTab={previewTabsToggle} />}
 		</Box>
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
deleted file mode 100644
index 2cf3f2f9dc41..000000000000
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/PanelBtn.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-import { Button, Label } from '@rocket.chat/fuselage';
-import type { FC, ReactNode } from 'react';
-import React, { useState } from 'react';
-
-const PanelBtn: FC<{ icon: ReactNode; name: string; isSmall: boolean }> = ({ icon, name, isSmall }) => {
-	const [hover, setHover] = useState(false);
-
-	const style = css`
-		width: ${hover ? '100%' : '0px'};
-		white-space: nowrap;
-		transition: 0.3s ease;
-	`;
-
-	return isSmall ? (
-		<>
-			<Button tiny square onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
-				{icon}
-			</Button>
-			<Label overflow={'hidden'} className={style} fontSize='micro'>
-				{name}
-			</Label>
-		</>
-	) : (
-		<Button small>{name}</Button>
-	);
-};
-
-export default PanelBtn;
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx b/packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx
new file mode 100644
index 000000000000..12f4d5549d29
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx
@@ -0,0 +1,19 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import type { templateType } from '../templates';
+import Section from './Section';
+
+const Container = ({ templates }: { templates: templateType[] }) => {
+  console.log('');
+  return (
+    <Box width="50%" mbs="80px" height="max-content">
+      {templates &&
+        templates.map((template, i) => (
+          <Section template={template} index={i} />
+        ))}
+    </Box>
+  );
+};
+
+export default Container;
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx b/packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx
new file mode 100644
index 000000000000..f393da149c50
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx
@@ -0,0 +1,83 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Message, Avatar, Button } from '@rocket.chat/fuselage';
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import React, { useContext } from 'react';
+
+import { context, templatesToggleAction, docAction } from '../../../Context';
+import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+
+const Payload = ({ payload }: { payload: readonly LayoutBlock[] }) => {
+  const { dispatch } = useContext(context);
+  const clickHandler = () => {
+    dispatch(templatesToggleAction(false));
+    dispatch(docAction({ payload, changedByEditor: false }));
+  };
+  return (
+    <>
+      <Box
+        onClick={clickHandler}
+        border="1px solid #e6e6e6"
+        padding="4px"
+        borderRadius={12}
+        className={css`
+          cursor: pointer;
+        `}
+      >
+        <Box
+          className={css`
+            pointer-events: none;
+            &hover {
+              box-shadow: var(--elements-box-shadow);
+            }
+          `}
+        >
+          <Message clickable>
+            <Message.LeftContainer>
+              <Avatar
+                url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
+                    4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
+                    IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
+                    AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
+                    MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
+                    xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
+                    jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
+                    eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
+                    6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
+                    SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
+                    UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+                size={'x36'}
+              />
+            </Message.LeftContainer>
+            <Message.Container>
+              <Message.Header>
+                <Message.Name>Haylie George</Message.Name>
+                <Message.Username>@haylie.george</Message.Username>
+                <Message.Role>Admin</Message.Role>
+                <Message.Role>User</Message.Role>
+                <Message.Role>Owner</Message.Role>
+                <Message.Timestamp>12:00 PM</Message.Timestamp>
+              </Message.Header>
+              <Message.Body>
+                {payload.map((element) => (
+                  <RenderPayload surface={1} payload={[element]} index={1} />
+                ))}
+              </Message.Body>
+            </Message.Container>
+            <Message.Toolbox.Wrapper>
+              <Message.Toolbox>
+                <Message.Toolbox.Item icon="quote" />
+                <Message.Toolbox.Item icon="clock" />
+                <Message.Toolbox.Item icon="thread" />
+              </Message.Toolbox>
+            </Message.Toolbox.Wrapper>
+          </Message>
+        </Box>
+      </Box>
+      <Button onClick={clickHandler} primary mbs={'15px'} mbe={'25px'}>
+        Use This Template
+      </Button>
+    </>
+  );
+};
+
+export default Payload;
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx b/packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx
new file mode 100644
index 000000000000..907fa9a5123f
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx
@@ -0,0 +1,29 @@
+import { Box, Label } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import type { templateType } from '../templates';
+import Payload from './Payload';
+
+const Section = ({
+  template,
+  index,
+}: {
+  template: templateType,
+  index: number,
+}) => (
+  <Box mbs="25px" width="100%" key={index}>
+    <Box mbe="5px">
+      <Label fontSize={24} fontWeight={800}>
+        {template.heading}
+      </Label>
+    </Box>
+    <Box mbe="15px">
+      <Label>{template.description}</Label>
+    </Box>
+    {template.payloads.map((payload) => (
+      <Payload payload={payload} />
+    ))}
+  </Box>
+);
+
+export default Section;
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts b/packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts
new file mode 100644
index 000000000000..a147b67a64f4
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts
@@ -0,0 +1 @@
+export { default } from './Container';
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx b/packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx
new file mode 100644
index 000000000000..3149f16b0fa7
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx
@@ -0,0 +1,52 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Icon, Scrollable } from '@rocket.chat/fuselage';
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+
+import { context, templatesToggleAction } from '../../Context';
+import Container from './Container';
+import { templates } from './templates';
+
+const Templates: FC = () => {
+  const {
+    state: { templatesToggle },
+    dispatch,
+  } = useContext(context);
+  return (
+    <>
+      {templatesToggle && (
+        <Scrollable vertical>
+          <Box
+            position="absolute"
+            width={'100%'}
+            height={'100%'}
+            display="flex"
+            justifyContent="center"
+            alignItems="flex-start"
+            bg="white"
+            zIndex={100}
+            overflow="auto"
+            className={css`
+              top: 0;
+              left: 0;
+            `}
+          >
+            <Button
+              position="fixed"
+              className={css`
+                top: 40px;
+                right: 40px;
+              `}
+              onClick={() => dispatch(templatesToggleAction(false))}
+            >
+              <Icon name="cross" size="x15" />
+            </Button>
+            <Container templates={templates} />
+          </Box>
+        </Scrollable>
+      )}
+    </>
+  );
+};
+
+export default Templates;
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/index.ts b/packages/uikit-playground/src/Components/TemplatesModal/index.ts
new file mode 100644
index 000000000000..e4ee3d27fde0
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/index.ts
@@ -0,0 +1 @@
+export { default } from './Templates';
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/templates.ts b/packages/uikit-playground/src/Components/TemplatesModal/templates.ts
new file mode 100644
index 000000000000..e8a18ee348e6
--- /dev/null
+++ b/packages/uikit-playground/src/Components/TemplatesModal/templates.ts
@@ -0,0 +1,401 @@
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+
+type payload = LayoutBlock[];
+
+export type templateType = {
+  heading: string,
+  description: string,
+  payloads: payload[],
+};
+
+export const templates: templateType[] = [
+  {
+    heading: 'Approval',
+    description: 'Example message for receiving and responding to requests.',
+    payloads: [
+      [
+        {
+          type: 'section',
+          text: {
+            type: 'plain_text',
+            emoji: true,
+            text: 'Looks like you have a scheduling conflict with this event:',
+          },
+        },
+        {
+          type: 'divider',
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Iris Zelda 1-1 Tuesday, January 21 4:00-4:30pm Building 2 - Havarti Cheese (3) 2 guests',
+          },
+          accessory: {
+            type: 'image',
+            imageUrl:
+              'https://api.slack.com/img/blocks/bkb_template_images/notifications.png',
+            altText: 'calendar thumbnail',
+          },
+        },
+        {
+          type: 'context',
+          elements: [
+            {
+              type: 'image',
+              imageUrl:
+                'https://api.slack.com/img/blocks/bkb_template_images/notificationsWarningIcon.png',
+              altText: 'notifications warning icon',
+            },
+            {
+              type: 'mrkdwn',
+              text: 'Conflicts with Team Huddle: 4:15-4:30pm',
+            },
+          ],
+        },
+        {
+          type: 'divider',
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Propose a new time:',
+          },
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Today - 4:30-5pm Everyone is available: @iris, @zelda',
+          },
+          accessory: {
+            type: 'button',
+            appId: 'app-id',
+            blockId: 'block-id',
+            actionId: 'action-id',
+            text: {
+              type: 'plain_text',
+              emoji: true,
+              text: 'Choose',
+            },
+            value: 'click_me_123',
+          },
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Tomorrow - 4-4:30pm Everyone is available: @iris, @zelda',
+          },
+          accessory: {
+            type: 'button',
+            appId: 'app-id',
+            blockId: 'block-id',
+            actionId: 'action-id',
+            text: {
+              type: 'plain_text',
+              emoji: true,
+              text: 'Choose',
+            },
+            value: 'click_me_123',
+          },
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: "Tomorrow - 6-6:30pm Some people aren't available: @iris, ~@zelda~",
+          },
+          accessory: {
+            type: 'button',
+            appId: 'app-id',
+            blockId: 'block-id',
+            actionId: 'action-id',
+            text: {
+              type: 'plain_text',
+              emoji: true,
+              text: 'Choose',
+            },
+            value: 'click_me_123',
+          },
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'Show more times',
+          },
+        },
+      ],
+      [
+        {
+          type: 'actions',
+          elements: [
+            {
+              type: 'overflow',
+              appId: 'app-id',
+              blockId: 'block-id',
+              actionId: 'action-id',
+              options: [
+                {
+                  value: 'option_1',
+                  text: {
+                    type: 'plain_text',
+                    text: 'lorem ipsum 🚀',
+                    emoji: true,
+                  },
+                },
+                {
+                  value: 'option_2',
+                  text: {
+                    type: 'plain_text',
+                    text: 'lorem ipsum 🚀',
+                    emoji: true,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'actions',
+          elements: [
+            {
+              type: 'button',
+              appId: 'app-id',
+              blockId: 'block-id',
+              actionId: 'action-id',
+              text: {
+                type: 'plain_text',
+                text: 'Click Me',
+                emoji: true,
+              },
+            },
+          ],
+        },
+        {
+          type: 'actions',
+          elements: [
+            {
+              type: 'button',
+              appId: 'app-id',
+              blockId: 'block-id',
+              actionId: 'action-id',
+              text: {
+                type: 'plain_text',
+                text: 'Click Me',
+                emoji: true,
+              },
+              style: 'primary',
+            },
+          ],
+        },
+        {
+          type: 'actions',
+          elements: [
+            {
+              type: 'button',
+              appId: 'app-id',
+              blockId: 'block-id',
+              actionId: 'action-id',
+              text: {
+                type: 'plain_text',
+                text: 'Click Me',
+                emoji: true,
+              },
+              style: 'danger',
+            },
+          ],
+        },
+        {
+          type: 'actions',
+          elements: [
+            {
+              type: 'button',
+              appId: 'app-id',
+              blockId: 'block-id',
+              actionId: 'action-id',
+              text: {
+                type: 'plain_text',
+                text: 'Click Me',
+                emoji: true,
+              },
+              url: 'https://rocket.chat',
+            },
+          ],
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'plain_text',
+            text: 'This is a plain text section block.',
+            emoji: true,
+          },
+        },
+        {
+          type: 'section',
+          text: {
+            type: 'mrkdwn',
+            text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
+          },
+        },
+        {
+          type: 'section',
+          fields: [
+            {
+              type: 'plain_text',
+              text: '*this is plain_text text*',
+              emoji: true,
+            },
+            {
+              type: 'plain_text',
+              text: '*this is plain_text text*',
+              emoji: true,
+            },
+            {
+              type: 'plain_text',
+              text: '*this is plain_text text*',
+              emoji: true,
+            },
+            {
+              type: 'plain_text',
+              text: '*this is plain_text text*',
+              emoji: true,
+            },
+            {
+              type: 'plain_text',
+              text: '*this is plain_text text*',
+              emoji: true,
+            },
+          ],
+        },
+      ],
+    ],
+  },
+  {
+    heading: 'Notification',
+    description:
+      'Example message for getting updates on new info and taking relevant action.',
+    payloads: [
+      [
+        {
+          type: 'preview',
+          title: [
+            {
+              type: 'plain_text',
+              text: 'Vivek',
+              emoji: true,
+            },
+          ],
+          description: [
+            {
+              type: 'plain_text',
+              text: 'I Need a Description',
+              emoji: true,
+            },
+          ],
+          footer: {
+            type: 'context',
+            elements: [
+              {
+                type: 'plain_text',
+                text: 'Srivastava',
+              },
+            ],
+          },
+        },
+        {
+          type: 'preview',
+          title: [
+            {
+              type: 'plain_text',
+              text: 'Vivek',
+              emoji: true,
+            },
+          ],
+          description: [
+            {
+              type: 'plain_text',
+              text: 'I Need a Description',
+              emoji: true,
+            },
+          ],
+          thumb: {
+            url: 'https://picsum.photos/200/300',
+          },
+          footer: {
+            type: 'context',
+            elements: [
+              {
+                type: 'plain_text',
+                text: 'Srivastava',
+              },
+            ],
+          },
+        },
+        {
+          type: 'preview',
+          title: [
+            {
+              type: 'plain_text',
+              text: 'Vivek',
+              emoji: true,
+            },
+          ],
+          description: [
+            {
+              type: 'plain_text',
+              text: 'I Need a Description',
+              emoji: true,
+            },
+          ],
+          thumb: {
+            url: 'https://picsum.photos/200/300',
+          },
+          footer: {
+            type: 'context',
+            elements: [
+              {
+                type: 'plain_text',
+                text: 'Srivastava',
+              },
+            ],
+          },
+        },
+        {
+          type: 'preview',
+          title: [
+            {
+              type: 'plain_text',
+              text: 'Vivek',
+              emoji: true,
+            },
+          ],
+          description: [
+            {
+              type: 'plain_text',
+              text: 'I Need a Description',
+              emoji: true,
+            },
+          ],
+          footer: {
+            type: 'context',
+            elements: [
+              {
+                type: 'plain_text',
+                text: 'Srivastava',
+              },
+            ],
+          },
+          externalUrl: 'https://rocket.chat',
+        },
+        {
+          type: 'image',
+          imageUrl: 'https://picsum.photos/200/300',
+          altText: 'inspiration',
+        },
+      ],
+    ],
+  },
+];
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index 061906fdd1c8..f86b0d3e23a0 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -8,3 +8,4 @@ export { docAction } from './docAction';
 export { surfaceAction } from './surfaceAction';
 export { actionPreviewAction } from './actionPreviewAction';
 export { userAction } from './userAction';
+export { templatesToggleAction } from './templatesToggleAction';
diff --git a/packages/uikit-playground/src/Context/action/templatesToggleAction.ts b/packages/uikit-playground/src/Context/action/templatesToggleAction.ts
new file mode 100644
index 000000000000..a3dd86b7989a
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/templatesToggleAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: boolean,
+};
+
+export const templatesToggleAction = (payload: boolean): action => ({
+  type: 'templatesToggle',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index eee26b65b0fb..d8c77c416878 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -38,6 +38,7 @@ export type initialStateType = {
   isMobile: boolean;
   isTablet: boolean;
   sideBarToggle: boolean;
+  templatesToggle: boolean,
   previewTabsToggle: number;
   editorTabsToggle: number;
   navMenuToggle: boolean;
@@ -51,6 +52,7 @@ export const initialState: initialStateType = {
   isMobile: false,
   isTablet: false,
   sideBarToggle: false,
+  templatesToggle: false,
   previewTabsToggle: 0,
   editorTabsToggle: 0,
   navMenuToggle: false,
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 32e8eb4823f4..d74054ed6ee1 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -1,6 +1,6 @@
 import type { initialStateType } from './initialState';
 
-type actionType = { type: string; payload: any };
+type actionType = { type: string, payload: any };
 
 const reducer = (state: initialStateType, action: actionType) => {
   switch (action.type) {
@@ -14,6 +14,8 @@ const reducer = (state: initialStateType, action: actionType) => {
       return { ...state, previewTabsToggle: action.payload };
     case 'editorToggle':
       return { ...state, editorTabsToggle: action.payload };
+    case 'templatesToggle':
+      return { ...state, templatesToggle: action.payload };
     case 'navMenuToggle':
       return { ...state, navMenuToggle: action.payload };
     case 'surface':
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 07db5088b3d7..94708dd5241a 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -6,6 +6,7 @@ import { useEffect, useContext } from 'react';
 import ComponentSideBar from '../Components/ComponentSideBar';
 import NavBar from '../Components/NavBar';
 import Preview from '../Components/Preview';
+import Templates from '../Components/TemplatesModal';
 import NavMenu from '../Components/navMenu';
 import { context, isMobileAction, isTabletAction } from '../Context';
 
@@ -29,20 +30,22 @@ const Playground: FC = () => {
   }, [isTablet, dispatch]);
 
   return (
-    <Box
-      display={'flex'}
-      width={'100%'}
-      height={'100%'}
-      flexDirection={'column'}
-      overflow='hidden'
-      bg={'var(--primaryBackgroundColor)'}
-    >
-      <NavBar />
-
-      {navMenuToggle && <NavMenu />}
-      <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
-        <ComponentSideBar />
-        <Preview />
+    <Box position="relative" width={'100%'} height={'100%'}>
+      <Templates />
+      <Box
+        display={'flex'}
+        width={'100%'}
+        height={'100%'}
+        flexDirection={'column'}
+        overflow="hidden"
+        bg={'var(--primaryBackgroundColor)'}
+      >
+        <NavBar />
+        {navMenuToggle && <NavMenu />}
+        <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
+          <ComponentSideBar />
+          <Preview />
+        </Box>
       </Box>
     </Box>
   );
diff --git a/packages/uikit-playground/src/index.tsx b/packages/uikit-playground/src/index.tsx
new file mode 100644
index 000000000000..f1aa74874c8c
--- /dev/null
+++ b/packages/uikit-playground/src/index.tsx
@@ -0,0 +1,16 @@
+import '@rocket.chat/icons/dist/rocketchat.css';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './index.css';
+import App from './App';
+import { Provider } from './Context';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Provider>
+      <App />
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);

From 869a2327be0ee169d956ce19c30738beaff85d47 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 16:48:00 +0530
Subject: [PATCH 03/50] chore(uikit-playground): Fixed padding in preview of
 payloads

---
 .../Display/RenderPayload/ElementWrapper.tsx     | 15 ++++++++-------
 .../Display/RenderPayload/RenderPayload.tsx      |  3 +--
 .../Container/Container.tsx                      |  2 +-
 .../Container/Payload.tsx                        |  0
 .../Container/Section.tsx                        |  2 +-
 .../Container/index.ts                           |  0
 .../{TemplatesModal => Templates}/Templates.tsx  |  2 +-
 .../{TemplatesModal => Templates}/index.ts       |  0
 .../uikit-playground/src/Pages/Playground.tsx    |  2 +-
 packages/uikit-playground/src/index.tsx          | 16 ----------------
 .../TemplatesModal => utils}/templates.ts        |  0
 11 files changed, 13 insertions(+), 29 deletions(-)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/Container/Container.tsx (87%)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/Container/Payload.tsx (100%)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/Container/Section.tsx (90%)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/Container/index.ts (100%)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/Templates.tsx (96%)
 rename packages/uikit-playground/src/Components/{TemplatesModal => Templates}/index.ts (100%)
 delete mode 100644 packages/uikit-playground/src/index.tsx
 rename packages/uikit-playground/src/{Components/TemplatesModal => utils}/templates.ts (100%)

diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
index 0f031532f3df..0b0c31bf54c4 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
@@ -12,27 +12,28 @@ const ElementWrapper = ({
     className={css`
       position: relative;
       box-sizing: border-box;
-      border: 1px solid transparent;
+      outline: 1px solid transparent;
+      height: fit-content;
+      padding: 0 8px;
       align-items: center;
-      padding: 7px;
       transition: var(--animation-fast);
       &:hover {
+        padding: 8px;
         border-radius: 4px;
-        border: var(--elements-border);
+        outline: var(--elements-border);
         transition: var(--animation-fast);
         box-shadow: 0px 0px 8px 1px #ddd;
+
         > .closeBtn {
           visibility: visible !important;
         }
       }
       &:active {
+        padding: 8px;
         background-color: #fff;
-        border: var(--elements-border);
+        outline: var(--elements-border);
         box-shadow: 0px 0px 8px 1px #ddd;
       }
-      & > div > div {
-        margin: 0 !important;
-      }
     `}
   />
 );
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index 61d02e3b15a4..ec08d44b3b33 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@rocket.chat/fuselage';
 import {
   UiKitModal as uiKitModal,
   UiKitBanner as uiKitBanner,
@@ -30,7 +29,7 @@ const RenderPayload = ({
   return (
     <ElementWrapper key={index}>
       <DeleteElementBtn elementIndex={index} />
-      <Box>{uiKitRender[surface]()}</Box>
+      <>{uiKitRender[surface]()}</>
     </ElementWrapper>
   );
 };
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
similarity index 87%
rename from packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx
rename to packages/uikit-playground/src/Components/Templates/Container/Container.tsx
index 12f4d5549d29..6524758bd9b0 100644
--- a/packages/uikit-playground/src/Components/TemplatesModal/Container/Container.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import type { templateType } from '../templates';
+import type { templateType } from '../../../utils/templates';
 import Section from './Section';
 
 const Container = ({ templates }: { templates: templateType[] }) => {
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
similarity index 100%
rename from packages/uikit-playground/src/Components/TemplatesModal/Container/Payload.tsx
rename to packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
similarity index 90%
rename from packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx
rename to packages/uikit-playground/src/Components/Templates/Container/Section.tsx
index 907fa9a5123f..da365a91f0fb 100644
--- a/packages/uikit-playground/src/Components/TemplatesModal/Container/Section.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -1,8 +1,8 @@
 import { Box, Label } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import type { templateType } from '../templates';
 import Payload from './Payload';
+import { templateType } from '../../../utils/templates';
 
 const Section = ({
   template,
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts b/packages/uikit-playground/src/Components/Templates/Container/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Components/TemplatesModal/Container/index.ts
rename to packages/uikit-playground/src/Components/Templates/Container/index.ts
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx b/packages/uikit-playground/src/Components/Templates/Templates.tsx
similarity index 96%
rename from packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx
rename to packages/uikit-playground/src/Components/Templates/Templates.tsx
index 3149f16b0fa7..dcd56b234858 100644
--- a/packages/uikit-playground/src/Components/TemplatesModal/Templates.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Templates.tsx
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 
 import { context, templatesToggleAction } from '../../Context';
 import Container from './Container';
-import { templates } from './templates';
+import { templates } from '../../utils/templates';
 
 const Templates: FC = () => {
   const {
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/index.ts b/packages/uikit-playground/src/Components/Templates/index.ts
similarity index 100%
rename from packages/uikit-playground/src/Components/TemplatesModal/index.ts
rename to packages/uikit-playground/src/Components/Templates/index.ts
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 94708dd5241a..944bf1bed21a 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -6,7 +6,7 @@ import { useEffect, useContext } from 'react';
 import ComponentSideBar from '../Components/ComponentSideBar';
 import NavBar from '../Components/NavBar';
 import Preview from '../Components/Preview';
-import Templates from '../Components/TemplatesModal';
+import Templates from '../Components/Templates';
 import NavMenu from '../Components/navMenu';
 import { context, isMobileAction, isTabletAction } from '../Context';
 
diff --git a/packages/uikit-playground/src/index.tsx b/packages/uikit-playground/src/index.tsx
deleted file mode 100644
index f1aa74874c8c..000000000000
--- a/packages/uikit-playground/src/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import '@rocket.chat/icons/dist/rocketchat.css';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import './index.css';
-import App from './App';
-import { Provider } from './Context';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <Provider>
-      <App />
-    </Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
-);
diff --git a/packages/uikit-playground/src/Components/TemplatesModal/templates.ts b/packages/uikit-playground/src/utils/templates.ts
similarity index 100%
rename from packages/uikit-playground/src/Components/TemplatesModal/templates.ts
rename to packages/uikit-playground/src/utils/templates.ts

From cf38256ee77f6c03d589ffe4ff4c8d972b3f0eaa Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 17:10:31 +0530
Subject: [PATCH 04/50] feat(uikit-playground): Add Home and protected layout

---
 packages/uikit-playground/package.json        |  1 +
 packages/uikit-playground/src/App.css         | 39 +---------
 packages/uikit-playground/src/App.tsx         | 47 ++++++++++--
 .../src/Components/Routes/HomeLayout.tsx      | 15 ++++
 .../src/Components/Routes/ProtectedLayout.tsx | 15 ++++
 .../src/Pages/SignInSignUp.tsx                | 73 +++++++++++++++++++
 .../uikit-playground/src/Routes/Routes.ts     |  8 ++
 .../uikit-playground/src/hooks/useAuth.tsx    | 41 +++++++++++
 .../src/hooks/useLocalStorage.js              | 28 +++++++
 yarn.lock                                     |  1 +
 10 files changed, 226 insertions(+), 42 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
 create mode 100644 packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
 create mode 100644 packages/uikit-playground/src/Pages/SignInSignUp.tsx
 create mode 100644 packages/uikit-playground/src/Routes/Routes.ts
 create mode 100644 packages/uikit-playground/src/hooks/useAuth.tsx
 create mode 100644 packages/uikit-playground/src/hooks/useLocalStorage.js

diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index 9d16d68a724b..095e81168056 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -18,6 +18,7 @@
     "@rocket.chat/fuselage": "next",
     "@rocket.chat/fuselage-hooks": "next",
     "@rocket.chat/fuselage-polyfills": "next",
+    "@rocket.chat/fuselage-toastbar": "next",
     "@rocket.chat/fuselage-tokens": "next",
     "@rocket.chat/fuselage-ui-kit": "workspace:~",
     "@rocket.chat/icons": "next",
diff --git a/packages/uikit-playground/src/App.css b/packages/uikit-playground/src/App.css
index 10e4996c0f9a..51371f9df7e8 100644
--- a/packages/uikit-playground/src/App.css
+++ b/packages/uikit-playground/src/App.css
@@ -2,38 +2,7 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+#toastBarRoot{
+  position: fixed;
+  z-index: 9999;
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index f01d81375f6f..30504871e9b9 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -1,17 +1,50 @@
 import './App.css';
 import './cssVariables.css';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
+import { HomeLayout } from './Components/Routes/HomeLayout';
+import { ProtectedLayout } from './Components/Routes/ProtectedLayout';
 import Playground from './Pages/Playground';
+import SignInToWorkspace from './Pages/SignInSignUp';
+import routes from './Routes/Routes';
+import React from 'react';
 
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Playground />} />
-        <Route path="*" element={<Playground />} />
-      </Routes>
-    </BrowserRouter>
+    <ToastBarProvider>
+      <BrowserRouter>
+        {/* <Routes>
+          <Route path={`/${routes.home}`} element={<Playground />} />
+          <Route
+            path={`/${routes.login}`}
+            element={<SignInToWorkspace route={routes.login} />}
+          />
+          <Route
+            path={`/${routes.signup}`}
+            element={<SignInToWorkspace route={routes.signup} />}
+          />
+          <Route path="*" element={<Playground />} />
+        </Routes> */}
+        <Routes>
+          <Route element={<HomeLayout />}>
+            <Route
+              path={`/${routes.login}`}
+              element={<SignInToWorkspace route={routes.login} />}
+            />
+            <Route
+              path={`/${routes.signup}`}
+              element={<SignInToWorkspace route={routes.signup} />}
+            />
+            <Route path={`*`} element={<Playground />} />
+          </Route>
+          <Route element={<ProtectedLayout />}>
+            <Route path={`/${routes.home}`} element={<Playground />} />
+            <Route path={`*`} element={<Playground />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </ToastBarProvider>
   );
 }
 
diff --git a/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx b/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
new file mode 100644
index 000000000000..bfcf1c5d3501
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
@@ -0,0 +1,15 @@
+import { Navigate, useOutlet } from 'react-router-dom';
+
+import routes from '../../Routes/Routes';
+import { useAuth } from '../../hooks/useAuth';
+
+export const HomeLayout = () => {
+  const { user } = useAuth();
+  const outlet = useOutlet();
+
+  if (user) {
+    return <Navigate to={`/${routes.home}`} replace />;
+  }
+
+  return <>{outlet}</>;
+};
diff --git a/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx b/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
new file mode 100644
index 000000000000..c7ddcee2df81
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
@@ -0,0 +1,15 @@
+import { Navigate, useOutlet } from 'react-router-dom';
+
+import routes from '../../Routes/Routes';
+import { useAuth } from '../../hooks/useAuth';
+
+export const ProtectedLayout = () => {
+  const { user } = useAuth();
+  const outlet = useOutlet();
+
+  if (!user) {
+    return <Navigate to={`/${routes.login}`} />;
+  }
+
+  return <>{outlet}</>;
+};
diff --git a/packages/uikit-playground/src/Pages/SignInSignUp.tsx b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
new file mode 100644
index 000000000000..e2e2af78761f
--- /dev/null
+++ b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
@@ -0,0 +1,73 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Flex, Box, InputBox, Button, Label } from '@rocket.chat/fuselage';
+import { RocketChatLogo } from '@rocket.chat/logo';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import routes from '../Routes/Routes';
+
+const labels = {
+  [routes.login]: {
+    header: 'Sign in to your workspace',
+    description: 'Sign in to your workspace',
+    button: 'Continue',
+    footer: 'dont have a workspace?',
+    footerButton: 'Create one',
+  },
+  [routes.signup]: {
+    header: 'First, enter your email',
+    description: 'We suggest using the email address you use at work.',
+    button: 'Create a workspace',
+    footer: 'Already have a workspace?',
+    footerButton: 'Sign in',
+  },
+};
+
+const SignInSignUp = ({ route }: { route: string }) => {
+  const navigate = useNavigate();
+  const clickHandler = () => {
+    navigate(`/${route === routes.login ? routes.signup : routes.login}`);
+  };
+  return (
+    <Flex.Container justifyContent="center" alignItems="center">
+      <Box w="100%" h="100%">
+        <Flex.Container
+          justifyContent="start"
+          alignItems="center"
+          direction="column"
+        >
+          <Box w="max-content" h="100%">
+            <Box w="180px" h="40px" mbs="100px">
+              <RocketChatLogo />
+            </Box>
+            <Label mbs="20px" fontScale="hero">
+              {labels[route].header}
+            </Label>
+            <Label mbs="10px" fontScale="p2">
+              {labels[route].description}
+            </Label>
+            <InputBox mbs="20px" w="80%" maxHeight="50px" type="email" />
+            <Button mbs="20px" w="80%" primary>
+              {labels[route].button}
+            </Button>
+            <Label mbs="20px" fontScale="p2">
+              {`${labels[route].footer} `}
+              <Label
+                fontScale="p2"
+                color="primary"
+                onClick={clickHandler}
+                className={css`
+                  cursor: pointer;
+                `}
+              >
+                {labels[route].footerButton}
+              </Label>
+            </Label>
+          </Box>
+        </Flex.Container>
+      </Box>
+    </Flex.Container>
+  );
+};
+
+export default SignInSignUp;
diff --git a/packages/uikit-playground/src/Routes/Routes.ts b/packages/uikit-playground/src/Routes/Routes.ts
new file mode 100644
index 000000000000..fe1bbda3c1b3
--- /dev/null
+++ b/packages/uikit-playground/src/Routes/Routes.ts
@@ -0,0 +1,8 @@
+const routes = {
+  home: '',
+  login: 'login',
+  flow: 'flow',
+  signup: 'createnewworkspace',
+};
+
+export default routes;
diff --git a/packages/uikit-playground/src/hooks/useAuth.tsx b/packages/uikit-playground/src/hooks/useAuth.tsx
new file mode 100644
index 000000000000..e87c063c71a1
--- /dev/null
+++ b/packages/uikit-playground/src/hooks/useAuth.tsx
@@ -0,0 +1,41 @@
+// ts-nocheck
+
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useLocalStorage } from './useLocalStorage';
+
+const AuthContext = createContext<{
+  user?: any,
+  login?: (data: any) => Promise<void>,
+  logout?: () => void,
+}>({});
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useLocalStorage('user', null);
+  const navigate = useNavigate();
+
+  const login = async (data: any) => {
+    setUser(data);
+    navigate('/dashboard/profile', { replace: true });
+  };
+
+  const logout = () => {
+    setUser(null);
+    navigate('/', { replace: true });
+  };
+
+  const value = useMemo(
+    () => ({
+      user,
+      login,
+      logout,
+    }),
+    [user]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/packages/uikit-playground/src/hooks/useLocalStorage.js b/packages/uikit-playground/src/hooks/useLocalStorage.js
new file mode 100644
index 000000000000..373c056256fb
--- /dev/null
+++ b/packages/uikit-playground/src/hooks/useLocalStorage.js
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export const useLocalStorage = (keyName, defaultValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+
+      if (value) {
+        return JSON.parse(value);
+      }
+      window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
+      return defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } catch (err) {
+      //
+    }
+    setStoredValue(newValue);
+  };
+
+  return [storedValue, setValue];
+};
diff --git a/yarn.lock b/yarn.lock
index 9fb0568e49f1..49ffcf9c3e13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8936,6 +8936,7 @@ __metadata:
     "@rocket.chat/fuselage": next
     "@rocket.chat/fuselage-hooks": next
     "@rocket.chat/fuselage-polyfills": next
+    "@rocket.chat/fuselage-toastbar": next
     "@rocket.chat/fuselage-tokens": next
     "@rocket.chat/fuselage-ui-kit": "workspace:~"
     "@rocket.chat/icons": next

From 02ce030bf553294a95bdcb48ff6be2580b1b8701 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 17:22:34 +0530
Subject: [PATCH 05/50] feat(uikit-playground): Added Multi screen support

---
 .../src/Components/CodeEditor/BlockEditor.tsx | 21 +++--
 .../src/Components/CodeEditor/index.tsx       | 21 +++--
 .../CreateNewScreenContainer.tsx              | 86 +++++++++++++++++++
 .../CreateNewScreen/ScreenThumbnail.tsx       | 79 +++++++++++++++++
 .../ScreenThumbnailWrapper.tsx                | 37 ++++++++
 .../Components/CreateNewScreen/Thumbnail.tsx  | 41 +++++++++
 .../src/Components/CreateNewScreen/index.ts   |  1 +
 .../src/Components/DropDown/Items.tsx         |  6 +-
 .../RenderPayload/DeleteElementBtn.tsx        |  4 +-
 .../Preview/Display/Surface/Surface.tsx       | 21 +++--
 .../Templates/Container/Payload.tsx           |  4 +-
 .../src/Context/action/activeScreenAction.ts  |  9 ++
 .../Context/action/createNewScreenAction.ts   |  9 ++
 .../src/Context/action/deleteScreenAction.ts  |  9 ++
 .../src/Context/action/docAction.ts           | 11 ---
 .../Context/action/duplicateScreenAction.ts   | 12 +++
 .../src/Context/action/index.ts               |  7 +-
 .../action/openCreateNewScreenAction.ts       |  9 ++
 .../src/Context/action/updatePayloadAction.ts | 11 +++
 .../src/Context/initialState.ts               | 19 +++-
 .../uikit-playground/src/Context/reducer.ts   | 74 ++++++++++++++--
 .../uikit-playground/src/Pages/Playground.tsx |  2 +
 .../actionPreview/generateActionPreview.ts    |  6 +-
 .../src/hooks/useHorizontalScroll.ts          | 24 ++++++
 .../uikit-playground/src/utils/getUniqueId.ts |  5 ++
 25 files changed, 474 insertions(+), 54 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
 create mode 100644 packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
 create mode 100644 packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
 create mode 100644 packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
 create mode 100644 packages/uikit-playground/src/Components/CreateNewScreen/index.ts
 create mode 100644 packages/uikit-playground/src/Context/action/activeScreenAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/createNewScreenAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/deleteScreenAction.ts
 delete mode 100644 packages/uikit-playground/src/Context/action/docAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/updatePayloadAction.ts
 create mode 100644 packages/uikit-playground/src/hooks/useHorizontalScroll.ts
 create mode 100644 packages/uikit-playground/src/utils/getUniqueId.ts

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index 15510ea59def..f5f5dff40784 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -4,7 +4,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import json5 from 'json5';
 import { useEffect, useContext } from 'react';
 
-import { docAction, context } from '../../Context';
+import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 
@@ -13,10 +13,13 @@ type CodeMirrorProps = {
 };
 
 const BlockEditor = ({ extensions }: CodeMirrorProps) => {
-  const { state, dispatch } = useContext(context);
+  const {
+    state: { screens, activeScreen },
+    dispatch,
+  } = useContext(context);
   const { editor, changes, setValue } = useCodeMirror(
     extensions,
-    JSON.stringify(state.doc.payload, undefined, 4)
+    JSON.stringify(screens[activeScreen].payload, undefined, 4)
   );
   const debounceValue = useDebouncedValue(changes?.value, 1500);
 
@@ -24,7 +27,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
     if (!changes?.isDispatch) {
       try {
         const parsedCode = json5.parse(changes.value);
-        dispatch(docAction({ payload: parsedCode }));
+        dispatch(updatePayloadAction({ payload: parsedCode }));
       } catch (e) {
         // do nothing
       }
@@ -45,10 +48,14 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
   }, [debounceValue]);
 
   useEffect(() => {
-    if (!state.doc.changedByEditor) {
-      setValue(JSON.stringify(state.doc.payload, undefined, 4), {});
+    if (!screens[activeScreen].changedByEditor) {
+      setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
     }
-  }, [state.doc.payload]);
+  }, [screens[activeScreen].payload]);
+
+  useEffect(() => {
+    setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
+  }, [activeScreen]);
 
   return (
     <>
diff --git a/packages/uikit-playground/src/Components/CodeEditor/index.tsx b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
index e9547eeaa08c..e7a12ca2d296 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/index.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
@@ -4,7 +4,7 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import json5 from 'json5';
 import { useEffect, useContext } from 'react';
 
-import { docAction, context } from '../../Context';
+import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 
@@ -13,10 +13,13 @@ type CodeMirrorProps = {
 };
 
 const CodeEditor = ({ extensions }: CodeMirrorProps) => {
-  const { state, dispatch } = useContext(context);
+  const {
+    state: { screens, activeScreen },
+    dispatch,
+  } = useContext(context);
   const { editor, changes, setValue } = useCodeMirror(
     extensions,
-    json5.stringify(state.doc.payload, undefined, 4)
+    json5.stringify(screens[activeScreen].payload, undefined, 4)
   );
   const debounceValue = useDebouncedValue(changes?.value, 1500);
 
@@ -25,13 +28,13 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
       try {
         const parsedCode = json5.parse(changes.value);
         dispatch(
-          docAction({
+          updatePayloadAction({
             payload: parsedCode,
             changedByEditor: false,
           })
         );
 
-        dispatch(docAction({ payload: parsedCode }));
+        dispatch(updatePayloadAction({ payload: parsedCode }));
       } catch (e) {
         // do nothing
       }
@@ -52,14 +55,14 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
   }, [debounceValue]);
 
   useEffect(() => {
-    if (!state.doc.changedByEditor) {
-      setValue(JSON.stringify(state.doc.payload, undefined, 4), {});
+    if (!screens[activeScreen].changedByEditor) {
+      setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
     }
-  }, [state.doc.payload]);
+  }, [screens[activeScreen].payload]);
 
   return (
     <>
-      <Box display='grid' height='100%' width={'100%'} ref={editor} />
+      <Box display="grid" height="100%" width={'100%'} ref={editor} />
     </>
   );
 };
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
new file mode 100644
index 000000000000..62ebc2054130
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
@@ -0,0 +1,86 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Icon, Scrollable } from '@rocket.chat/fuselage';
+import { useOutsideClick, useMergedRefs } from '@rocket.chat/fuselage-hooks';
+import React, { useContext, useRef } from 'react';
+
+import { context } from '../../Context';
+import {
+  openCreateNewScreenAction,
+  createNewScreenAction,
+} from '../../Context/action';
+import { useHorizontalScroll } from '../../hooks/useHorizontalScroll';
+import ScreenThumbnail from './ScreenThumbnail';
+
+const CreateNewScreenContainer = () => {
+  const {
+    state: { screens, openCreateNewScreen },
+    dispatch,
+  } = useContext(context);
+  const ref = useRef(null);
+  useOutsideClick([ref], () => dispatch(openCreateNewScreenAction(false)));
+
+  const scrollRef = useHorizontalScroll();
+
+  const mergedRef = useMergedRefs(scrollRef, ref);
+  const createNewScreenhandler = () => {
+    dispatch(createNewScreenAction());
+  };
+
+  return (
+    <Scrollable horizontal>
+      <Box
+        ref={mergedRef}
+        w="100%"
+        height="250px"
+        borderBlockEnd="var(--default-border)"
+        position="fixed"
+        pi="40px"
+        className={css`
+          top: -255px;
+          left: 0;
+          z-index: 10;
+          align-items: center;
+          display: flex;
+          justify-content: center;
+          background-color: var(--primaryBackgroundColor);
+          box-shadow: var(--elements-box-shadow);
+          transform: translateY(${openCreateNewScreen ? '255px' : '0px'});
+          transition: var(--animation-default);
+        `}
+      >
+        <Box
+          width="max-content"
+          display="flex"
+          className={css`
+            gap: 50px;
+            align-items: center;
+          `}
+        >
+          {Object.values(screens).map((screen, i) => (
+            <ScreenThumbnail
+              screen={screen}
+              key={i}
+              disableDelete={Object.keys(screens).length <= 1}
+            />
+          ))}
+          <Icon
+            onClick={createNewScreenhandler}
+            size="60px"
+            height={'60px'}
+            name={'plus'}
+            className={css`
+              cursor: pointer;
+              transition: var(--animation-default);
+              &:hover {
+                scale: 1.1;
+                transition: var(--animation-default);
+              }
+            `}
+          />
+        </Box>
+      </Box>
+    </Scrollable>
+  );
+};
+
+export default CreateNewScreenContainer;
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
new file mode 100644
index 000000000000..d91830b2b891
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -0,0 +1,79 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button } from '@rocket.chat/fuselage';
+import type { ReactNode, ComponentProps } from 'react';
+import React, { useContext, useState } from 'react';
+
+import { context } from '../../Context';
+import { activeScreenAction } from '../../Context/action/activeScreenAction';
+import { deleteScreenAction } from '../../Context/action/deleteScreenAction';
+import { duplicateScreenAction } from '../../Context/action/duplicateScreenAction';
+import type { docType } from '../../Context/initialState';
+import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import ScreenThumbnailWrapper from './ScreenThumbnailWrapper';
+import Thumbnail from './Thumbnail';
+
+const IntractButton = ({
+  label,
+  ...props
+}: {
+  label: string,
+  icon?: ReactNode,
+} & ComponentProps<typeof Button>) => <Button {...props}>{label}</Button>;
+
+const ScreenThumbnail = ({
+  screen,
+  disableDelete,
+}: {
+  screen: docType,
+  disableDelete: boolean,
+}) => {
+  const { dispatch } = useContext(context);
+  const [isHover, setIsHover] = useState(false);
+
+  const activateScreenHandler = () => {
+    dispatch(activeScreenAction(screen?.id));
+  };
+
+  const duplicateScreenHandler = () => {
+    dispatch(duplicateScreenAction({ id: screen?.id }));
+  };
+
+  const deleteScreenHandler = () => {
+    dispatch(deleteScreenAction(screen?.id));
+  };
+  return (
+    <ScreenThumbnailWrapper
+      onMouseOver={() => setIsHover(true)}
+      onFocus={() => setIsHover(true)}
+      onMouseOut={() => setIsHover(false)}
+      onBlur={() => setIsHover(false)}
+    >
+      <Thumbnail
+        of={renderPayload({ index: 0, surface: 1, payload: screen.payload })}
+      />
+      <Box
+        w="100%"
+        h="100%"
+        insetBlockStart={0}
+        display="flex"
+        position="absolute"
+        className={css`
+          flex-direction: column;
+          justify-content: space-evenly;
+          transition: var(--animation-default);
+        `}
+        opacity={isHover ? 1 : 0}
+      >
+        <IntractButton label={'Select'} onClick={activateScreenHandler} />
+        <IntractButton label={'Duplicate'} onClick={duplicateScreenHandler} />
+        <IntractButton
+          label={'Delete'}
+          onClick={deleteScreenHandler}
+          disabled={disableDelete}
+        />
+      </Box>
+    </ScreenThumbnailWrapper>
+  );
+};
+
+export default ScreenThumbnail;
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
new file mode 100644
index 000000000000..766ffe76f3c7
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
@@ -0,0 +1,37 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode, ComponentProps } from 'react';
+import React from 'react';
+
+const ScreenThumbnailWrapper = ({
+  children,
+  ...props
+}: {
+  children: ReactNode,
+} & ComponentProps<typeof Box>) => (
+  <Box
+    w="120px"
+    h="170px"
+    bg="white"
+    border="var(--default-border)"
+    borderRadius={'20px'}
+    className={css`
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      overflow: hidden;
+      transition: var(--animation-default);
+      &:hover {
+        scale: 1.1;
+        transition: var(--animation-default);
+        box-shadow: var(--elements-box-shadow);
+      }
+    `}
+  >
+    <Box w="100px" h="150px" position="relative" {...props}>
+      {children}
+    </Box>
+  </Box>
+);
+
+export default ScreenThumbnailWrapper;
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
new file mode 100644
index 000000000000..acd0c99b4a93
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
@@ -0,0 +1,41 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import React, { useRef, useMemo } from 'react';
+
+interface ThumbnailRendererProps {
+  of: ReactNode;
+}
+
+const ThumbnailRenderer: React.FC<ThumbnailRendererProps> = ({ of }) => {
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const elementRef = useRef<HTMLDivElement | null>(null);
+
+  const scale = useMemo(() => {
+    const pw = parentRef.current?.parentElement?.offsetWidth || 0;
+    const ph = parentRef.current?.parentElement?.offsetHeight || 0;
+
+    const width = elementRef.current?.offsetWidth || 0;
+    const height = elementRef.current?.offsetHeight || 0;
+
+    const scale = Math.min(pw / width, ph / height);
+    return scale;
+  }, [elementRef.current?.offsetHeight, elementRef.current?.offsetWidth]);
+
+  return (
+    <Box overflow="hidden" ref={parentRef}>
+      <Box
+        className={css`
+          transform: scale(${scale});
+          transform-origin: top;
+          pointer-events: none;
+        `}
+        ref={elementRef}
+      >
+        {of}
+      </Box>
+    </Box>
+  );
+};
+
+export default ThumbnailRenderer;
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/index.ts b/packages/uikit-playground/src/Components/CreateNewScreen/index.ts
new file mode 100644
index 000000000000..a11dbe0843ff
--- /dev/null
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/index.ts
@@ -0,0 +1 @@
+export { default } from './CreateNewScreenContainer';
diff --git a/packages/uikit-playground/src/Components/DropDown/Items.tsx b/packages/uikit-playground/src/Components/DropDown/Items.tsx
index 49bb502434d2..5c4ed0bec386 100644
--- a/packages/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/Items.tsx
@@ -2,7 +2,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { Box, Label, Chevron } from '@rocket.chat/fuselage';
 import React, { useState, useContext } from 'react';
 
-import { context, docAction } from '../../Context';
+import { context, updatePayloadAction } from '../../Context';
 import ItemsIcon from './ItemsIcon';
 import { itemStyle, labelStyle } from './itemsStyle';
 import type { ItemProps } from './types';
@@ -16,8 +16,8 @@ const Items = ({ label, children, layer, payload }: ItemProps) => {
 		toggleItemOpen(!isOpen);
 		payload &&
 			dispatch(
-				docAction({
-					payload: [...state.doc.payload, payload[0]],
+				updatePayloadAction({
+					payload: [...state.screens[state.activeScreen].payload, payload[0]],
 					changedByEditor: false,
 				}),
 			);
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
index aed482c6d9ec..804e9e180cb9 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
@@ -2,7 +2,7 @@
 import { Icon } from '@rocket.chat/fuselage';
 import React, { useContext } from 'react';
 
-import { context, docAction } from '../../../../Context';
+import { context, updatePayloadAction } from '../../../../Context';
 
 const Display = ({ elementIndex }: { elementIndex: number }) => {
   const { state, dispatch } = useContext(context);
@@ -13,7 +13,7 @@ const Display = ({ elementIndex }: { elementIndex: number }) => {
     } = state;
     // @ts-ignore
     payload.splice(elementIndex, 1);
-    dispatch(docAction({ payload: [...payload], changedByEditor: false }));
+    dispatch(updatePayloadAction({ payload: [...payload], changedByEditor: false }));
   };
   return (
     <div
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index be7e93584a9d..469baeb220cb 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react';
 import React, { useContext, useState, useEffect } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
 
-import { context, docAction, actionPreviewAction } from '../../../../Context';
+import { context, updatePayloadAction, actionPreviewAction } from '../../../../Context';
 import generateActionPreview from '../../../../Payload/actionPreview/generateActionPreview';
 import type { Block } from '../../../Draggable/DraggableList';
 import BannerSurface from './BannerSurface';
@@ -15,31 +15,34 @@ import { reorder } from './Reorder';
 
 const Surface: FC = () => {
 	const {
-		state: {
-			doc: { payload },
-			surface,
-		},
+		state: { screens, surface, activeScreen },
 		dispatch,
 	} = useContext(context);
 	const [uniqueBlocks, setUniqueBlocks] = useState<{
 		block: Block[];
 		isChangeByDnd: boolean;
 	}>({
-		block: payload.map((block, i) => ({ id: `${i}`, payload: block })),
+		block: screens[activeScreen]?.payload.map((block, i) => ({
+			id: `${i}`,
+			payload: block,
+		})),
 		isChangeByDnd: false,
 	});
 	const preview = generateActionPreview('Action Block', {});
 	useEffect(() => {
 		setUniqueBlocks({
-			block: payload.map((block, i) => ({ id: `${i}`, payload: block })),
+			block: screens[activeScreen]?.payload.map((block, i) => ({
+				id: `${i}`,
+				payload: block,
+			})),
 			isChangeByDnd: false,
 		});
-	}, [payload]);
+	}, [screens[activeScreen]?.payload]);
 
 	useEffect(() => {
 		if (uniqueBlocks.isChangeByDnd) {
 			dispatch(
-				docAction({
+				updatePayloadAction({
 					payload: uniqueBlocks.block.map((block) => block.payload),
 					changedByEditor: false,
 				}),
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index f393da149c50..75dee1ae347b 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -3,14 +3,14 @@ import { Box, Message, Avatar, Button } from '@rocket.chat/fuselage';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import React, { useContext } from 'react';
 
-import { context, templatesToggleAction, docAction } from '../../../Context';
+import { context, templatesToggleAction, updatePayloadAction } from '../../../Context';
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
 
 const Payload = ({ payload }: { payload: readonly LayoutBlock[] }) => {
   const { dispatch } = useContext(context);
   const clickHandler = () => {
     dispatch(templatesToggleAction(false));
-    dispatch(docAction({ payload, changedByEditor: false }));
+    dispatch(updatePayloadAction({ payload, changedByEditor: false }));
   };
   return (
     <>
diff --git a/packages/uikit-playground/src/Context/action/activeScreenAction.ts b/packages/uikit-playground/src/Context/action/activeScreenAction.ts
new file mode 100644
index 000000000000..d3fe5a2fac8e
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/activeScreenAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: string,
+};
+
+export const activeScreenAction = (payload: string): action => ({
+  type: 'activeScreen',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/createNewScreenAction.ts b/packages/uikit-playground/src/Context/action/createNewScreenAction.ts
new file mode 100644
index 000000000000..08c9820d196c
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/createNewScreenAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload?: string,
+};
+
+export const createNewScreenAction = (payload?: string): action => ({
+  type: 'createNewScreen',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/deleteScreenAction.ts b/packages/uikit-playground/src/Context/action/deleteScreenAction.ts
new file mode 100644
index 000000000000..9a5e67a251b2
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/deleteScreenAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: string,
+};
+
+export const deleteScreenAction = (payload: string): action => ({
+  type: 'deleteScreen',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/docAction.ts b/packages/uikit-playground/src/Context/action/docAction.ts
deleted file mode 100644
index 9ad2d5bc0ab7..000000000000
--- a/packages/uikit-playground/src/Context/action/docAction.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { docType } from '../initialState';
-
-type action = {
-  type: string,
-  payload: docType,
-};
-
-export const docAction = (payload: docType): action => ({
-  type: 'doc',
-  payload,
-});
diff --git a/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts b/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
new file mode 100644
index 000000000000..ed298c800111
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
@@ -0,0 +1,12 @@
+type action = {
+  type: string,
+  payload: { id: string, name?: string },
+};
+
+export const duplicateScreenAction = (payload: {
+  id: string,
+  name?: string,
+}): action => ({
+  type: 'duplicateScreen',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index f86b0d3e23a0..8833802ff469 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -4,8 +4,13 @@ export { sidebarToggleAction } from './sidebarToggleAction';
 export { editorTabsToggleAction } from './editorTabsToggleAction';
 export { previewTabsToggleAction } from './previewTabsToggleAction';
 export { navMenuToggleAction } from './navMenuToggleAction';
-export { docAction } from './docAction';
+export { updatePayloadAction } from './updatePayloadAction';
 export { surfaceAction } from './surfaceAction';
 export { actionPreviewAction } from './actionPreviewAction';
 export { userAction } from './userAction';
 export { templatesToggleAction } from './templatesToggleAction';
+export { openCreateNewScreenAction } from './openCreateNewScreenAction';
+export { createNewScreenAction } from './createNewScreenAction';
+export { activeScreenAction } from './activeScreenAction';
+export { duplicateScreenAction } from './duplicateScreenAction';
+export { deleteScreenAction } from './deleteScreenAction';
diff --git a/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts b/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
new file mode 100644
index 000000000000..d050d47fa3bc
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
@@ -0,0 +1,9 @@
+type action = {
+  type: string,
+  payload: boolean,
+};
+
+export const openCreateNewScreenAction = (payload: boolean): action => ({
+  type: 'openCreateNewScreen',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
new file mode 100644
index 000000000000..80646957b7eb
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
@@ -0,0 +1,11 @@
+import type { docType } from '../initialState';
+
+type action = {
+  type: string,
+  payload: Partial<docType>,
+};
+
+export const updatePayloadAction = (payload: Partial<docType>): action => ({
+  type: 'updatePayload',
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index d8c77c416878..d6815c76b1da 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -1,7 +1,11 @@
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
 
+import getUniqueId from '../utils/getUniqueId';
+
 export type docType = {
   payload: readonly LayoutBlock[];
+  id: string;
+  name: string;
   changedByEditor?: boolean;
 };
 
@@ -34,6 +38,10 @@ export type actionPreviewType = {
   view?: readonly LayoutBlock[];
 };
 
+export type ScreensType = {
+  [key: string]: docType
+}
+
 export type initialStateType = {
   isMobile: boolean;
   isTablet: boolean;
@@ -43,11 +51,15 @@ export type initialStateType = {
   editorTabsToggle: number;
   navMenuToggle: boolean;
   surface: number;
-  doc: docType;
+  activeScreen: string;
+  screens: ScreensType;
   actionPreview: actionPreviewType;
+  openCreateNewScreen: boolean;
   user: userType;
 };
 
+const initialPageId = getUniqueId();
+
 export const initialState: initialStateType = {
   isMobile: false,
   isTablet: false,
@@ -57,7 +69,10 @@ export const initialState: initialStateType = {
   editorTabsToggle: 0,
   navMenuToggle: false,
   surface: 1,
-  doc: { payload: [], changedByEditor: true },
+  screens: {[initialPageId] : { id: initialPageId, name: 'default1', payload: [], changedByEditor: true },
+},
+  activeScreen: initialPageId,
   actionPreview: {},
+  openCreateNewScreen: false,
   user: null,
 };
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index d74054ed6ee1..e5d6080aa99c 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -1,6 +1,9 @@
+import _ from 'lodash';
+
+import getUniqueId from '../utils/getUniqueId';
 import type { initialStateType } from './initialState';
 
-type actionType = { type: string, payload: any };
+type actionType = { type: string, payload?: any };
 
 const reducer = (state: initialStateType, action: actionType) => {
   switch (action.type) {
@@ -20,18 +23,79 @@ const reducer = (state: initialStateType, action: actionType) => {
       return { ...state, navMenuToggle: action.payload };
     case 'surface':
       return { ...state, surface: action.payload };
-    case 'doc':
+    case 'updatePayload':
       return {
         ...state,
-        doc: {
-          payload: action.payload.payload,
-          changedByEditor: action.payload.changedByEditor === undefined,
+        screens: {
+          ...state.screens,
+          [state.activeScreen]: {
+            ...state.screens[state.activeScreen],
+            payload: action.payload.payload,
+            changedByEditor: action.payload.changedByEditor === undefined,
+          },
         },
       };
     case 'actionPreview':
       return { ...state, actionPreview: action.payload };
     case 'user':
       return { ...state, user: action.payload };
+    case 'openCreateNewScreen':
+      return { ...state, openCreateNewScreen: action.payload };
+    case 'activeScreen':
+      return {
+        ...state,
+        screens: _.cloneDeep(state.screens),
+        openCreateNewScreen: false,
+        activeScreen: action.payload,
+      };
+    case 'createNewScreen': {
+      const id = getUniqueId();
+      return {
+        ...state,
+        screens: {
+          ...state.screens,
+          [id]: {
+            id,
+            name: action?.payload || 'default',
+            payload: [],
+            changedByEditor: true,
+          },
+        },
+        openCreateNewScreen: false,
+        activeScreen: id,
+      };
+    }
+    case 'duplicateScreen': {
+      const id = getUniqueId();
+      return {
+        ...state,
+        screens: {
+          ...state.screens,
+          [id]: {
+            id,
+            name: action?.payload.name || 'default',
+            payload: state.screens[action.payload.id].payload,
+            changedByEditor: true,
+          },
+        },
+        activeScreen: id,
+      };
+    }
+    case 'deleteScreen': {
+      const screens = _.cloneDeep(state.screens);
+      delete screens[action.payload];
+      if (state.activeScreen === action.payload) {
+        return {
+          ...state,
+          screens,
+          activeScreen: Object.keys(screens)[0],
+        };
+      }
+      return {
+        ...state,
+        screens,
+      };
+    }
     default:
       return state;
   }
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 944bf1bed21a..1f072f22e58b 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import { useEffect, useContext } from 'react';
 
 import ComponentSideBar from '../Components/ComponentSideBar';
+import CreateNewScreenContainer from '../Components/CreateNewScreen/CreateNewScreenContainer';
 import NavBar from '../Components/NavBar';
 import Preview from '../Components/Preview';
 import Templates from '../Components/Templates';
@@ -31,6 +32,7 @@ const Playground: FC = () => {
 
   return (
     <Box position="relative" width={'100%'} height={'100%'}>
+      <CreateNewScreenContainer />
       <Templates />
       <Box
         display={'flex'}
diff --git a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
index 6253fe53e336..66456e91db36 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
@@ -6,7 +6,7 @@ import container from './container';
 
 const generateActionPreview = (type: string, data: actionPreviewType) => {
   const {
-    state: { user, surface, doc },
+    state: { user, surface, screens, activeScreen },
   } = useContext(context);
 
   const actionPreview: actionPreviewType = {
@@ -14,7 +14,7 @@ const generateActionPreview = (type: string, data: actionPreviewType) => {
     user,
     api_app_id: '',
     token: '',
-    container: container[surface-1],
+    container: container[surface - 1],
     trigger_id: '',
     team: null,
     enterprise: null,
@@ -23,7 +23,7 @@ const generateActionPreview = (type: string, data: actionPreviewType) => {
     ...data,
   };
   if (type === 'View Submission') {
-    actionPreview.view = doc.payload;
+    actionPreview.view = screens[activeScreen].payload;
   }
   return actionPreview;
 };
diff --git a/packages/uikit-playground/src/hooks/useHorizontalScroll.ts b/packages/uikit-playground/src/hooks/useHorizontalScroll.ts
new file mode 100644
index 000000000000..27c531e77314
--- /dev/null
+++ b/packages/uikit-playground/src/hooks/useHorizontalScroll.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export function useHorizontalScroll() {
+  const elRef = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    const el = elRef.current;
+    if (el) {
+      const onWheel = (e: WheelEvent) => {
+        if (e.deltaY === 0) {
+          return;
+        }
+        if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+          e.preventDefault();
+          el.scrollLeft += e.deltaX;
+        }
+        el.scrollTo({ left: el.scrollLeft + e.deltaY });
+      };
+      el.addEventListener('wheel', onWheel);
+      return () => el.removeEventListener('wheel', onWheel);
+    }
+  }, []);
+  return elRef;
+}
diff --git a/packages/uikit-playground/src/utils/getUniqueId.ts b/packages/uikit-playground/src/utils/getUniqueId.ts
new file mode 100644
index 000000000000..2cf15d1699ab
--- /dev/null
+++ b/packages/uikit-playground/src/utils/getUniqueId.ts
@@ -0,0 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
+const getUniqueId = () => uuidv4().slice(0, 8);
+
+export default getUniqueId;

From 29df11b06882aef7626319d472c41c0b832f57ef Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 17:31:32 +0530
Subject: [PATCH 06/50] fix(uikit-playground): Added Screens and flow btn

---
 packages/uikit-playground/package.json        |   1 +
 packages/uikit-playground/src/App.tsx         |   5 +-
 .../Components/CreateNewScreen/Thumbnail.tsx  |   6 +-
 .../FlowContainer/FlowContainer.tsx           |  60 +++
 .../Components/FlowContainer/UIKitWrapper.tsx |  11 +
 .../src/Components/FlowContainer/index.ts     |   1 +
 .../src/Components/NavBar/NavBar.tsx          | 130 +++--
 .../RenderPayload/DeleteElementBtn.tsx        |  11 +-
 .../Display/RenderPayload/ElementWrapper.tsx  |   9 +-
 .../Preview/Display/Surface/BannerSurface.tsx |   9 +-
 .../Display/Surface/MessageSurface.tsx        |  17 +-
 .../Preview/Display/Surface/ModalSurface.tsx  |  11 +-
 .../Preview/Display/Surface/constant.ts       |   5 +
 .../Components/Preview/NavPanel/NavPanel.tsx  |   2 +-
 .../Templates/Container/Container.tsx         |  17 +-
 .../Templates/Container/Section.tsx           |   2 +-
 .../src/Components/Templates/Templates.tsx    |   2 +-
 .../src/Pages/FlowDiagram.tsx                 |  12 +
 yarn.lock                                     | 501 +++++++++++++++++-
 19 files changed, 739 insertions(+), 73 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/index.ts
 create mode 100644 packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
 create mode 100644 packages/uikit-playground/src/Pages/FlowDiagram.tsx

diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index 095e81168056..2732f0d8a480 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -34,6 +34,7 @@
     "react-router-dom": "^6.11.2",
     "react-split-pane": "^0.1.92",
     "react-virtuoso": "^4.3.10",
+    "reactflow": "^11.7.2",
     "use-subscription": "^1.8.0"
   },
   "devDependencies": {
diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 30504871e9b9..b4264788ad7a 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import './App.css';
 import './cssVariables.css';
 import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
@@ -5,10 +6,11 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import { HomeLayout } from './Components/Routes/HomeLayout';
 import { ProtectedLayout } from './Components/Routes/ProtectedLayout';
+import FlowDiagram from './Pages/FlowDiagram';
 import Playground from './Pages/Playground';
 import SignInToWorkspace from './Pages/SignInSignUp';
 import routes from './Routes/Routes';
-import React from 'react';
+
 
 function App() {
   return (
@@ -36,6 +38,7 @@ function App() {
               path={`/${routes.signup}`}
               element={<SignInToWorkspace route={routes.signup} />}
             />
+            <Route path={`/${routes.flow}`} element={<FlowDiagram />} />
             <Route path={`*`} element={<Playground />} />
           </Route>
           <Route element={<ProtectedLayout />}>
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
index acd0c99b4a93..4a12ccba109a 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
@@ -3,11 +3,11 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
 import React, { useRef, useMemo } from 'react';
 
-interface ThumbnailRendererProps {
+interface ThumbnailProps {
   of: ReactNode;
 }
 
-const ThumbnailRenderer: React.FC<ThumbnailRendererProps> = ({ of }) => {
+const Thumbnail: React.FC<ThumbnailProps> = ({ of }) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const elementRef = useRef<HTMLDivElement | null>(null);
 
@@ -38,4 +38,4 @@ const ThumbnailRenderer: React.FC<ThumbnailRendererProps> = ({ of }) => {
   );
 };
 
-export default ThumbnailRenderer;
+export default Thumbnail;
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
new file mode 100644
index 000000000000..3b7a09ba4f33
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useContext } from 'react';
+import ReactFlow, {
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+} from 'reactflow';
+
+import 'reactflow/dist/style.css';
+import { context } from '../../Context';
+import UIKitWrapper from './UIKitWrapper';
+
+const nodeTypes = {
+  custom: UIKitWrapper,
+};
+
+const FlowContainer = () => {
+  const {
+    state: { screens },
+  } = useContext(context);
+
+  //   const initialNodes = [
+  //     { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
+  //     { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
+  //   ];
+  const initialNodes = Object.values(screens).map((screen) => ({
+    id: screen.id,
+    type: 'custom',
+    position: { x: 0, y: 0 },
+    data: screen.payload,
+  }));
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnect = useCallback(
+    (params) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges]
+  );
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      fitView
+      attributionPosition="top-right"
+      nodeTypes={nodeTypes}
+    >
+      <MiniMap zoomable pannable />
+      <Controls />
+      <Background color="#aaa" gap={16} />
+    </ReactFlow>
+  );
+};
+
+export default FlowContainer;
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
new file mode 100644
index 000000000000..6c7261ed9b90
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
@@ -0,0 +1,11 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+
+const UIKitWrapper = ({ id, data }) => {
+  console.log(data, id);
+  return <Box>{renderPayload({ index: 0, surface: 1, payload: data })}</Box>;
+};
+
+export default UIKitWrapper;
diff --git a/packages/uikit-playground/src/Components/FlowContainer/index.ts b/packages/uikit-playground/src/Components/FlowContainer/index.ts
new file mode 100644
index 000000000000..7d6e867f2119
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './FlowContainer';
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index d32795e6abb3..e0b36e7cc799 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -1,49 +1,109 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Tile, Flex, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 
+import { context, updatePayloadAction } from '../../Context';
+import { openCreateNewScreenAction } from '../../Context/action/openCreateNewScreenAction';
+import routes from '../../Routes/Routes';
 import Divider from './Divider';
 import Logo from './Logo';
 import RightNavBtn from './RightNavBtn';
 
-const NabBar: FC = () => (
-  <Flex.Container alignItems='center'>
-    <Box
-      position='relative'
-      width={'100%'}
-      height={'min(60px, 25vw)'}
-      is={Tile}
-      padding={0}
-      zIndex={3}
-      elevation={'2'}
-      className={css`
-        user-select: none;
-      `}
-    >
-      <Logo />
-      <Divider />
+const NabBar: FC = () => {
+  const { state, dispatch } = useContext(context);
+  const toast = useToastBarDispatch();
+  const navigate = useNavigate();
+
+  return (
+    <Flex.Container alignItems="center">
       <Box
-        flexGrow={1}
-        minWidth='15px'
-        display={'flex'}
-        justifyContent={'flex-end'}
+        position="relative"
+        width={'100%'}
+        height={'min(60px, 25vw)'}
+        is={Tile}
+        padding={0}
+        zIndex={3}
+        elevation={'2'}
+        className={css`
+          user-select: none;
+        `}
       >
-        <Box display='flex' height='100%'>
-          <ButtonGroup
-            pie={'20px'}
-            className={css`
-              column-gap: 5px;
-            `}
-          >
-            <Button small>Clear Blocks</Button>
-            <Button small>Copy Payload</Button>
-          </ButtonGroup>
+        <Logo />
+        <Divider />
+        <Box
+          flexGrow={1}
+          minWidth="15px"
+          display={'flex'}
+          justifyContent={'flex-end'}
+        >
+          <Box display="flex" height="100%">
+            {!state?.isMobile && (
+              <ButtonGroup
+                pie={'20px'}
+                className={css`
+                  column-gap: 5px;
+                `}
+              >
+                <Button
+                  small
+                  onClick={() => {
+                    navigate(`/${routes.flow}`);
+                  }}
+                >
+                  Flow
+                </Button>
+                <Button
+                  small
+                  onClick={() => {
+                    dispatch(openCreateNewScreenAction(true));
+                  }}
+                >
+                  Screens
+                </Button>
+                <Button
+                  small
+                  onClick={() => {
+                    dispatch(
+                      updatePayloadAction({
+                        payload: [],
+                        changedByEditor: false,
+                      })
+                    );
+                    toast({
+                      type: 'success',
+                      message: 'All Blocks Cleared',
+                    });
+                  }}
+                >
+                  Clear Blocks
+                </Button>
+                <Button
+                  small
+                  onClick={() => {
+                    navigator.clipboard.writeText(
+                      JSON.stringify(
+                        state?.screens[state.activeScreen]?.payload
+                      )
+                    );
+                    toast({
+                      type: 'success',
+                      message: 'Payload Copied',
+                    });
+                  }}
+                >
+                  Copy Payload
+                </Button>
+              </ButtonGroup>
+            )}
+          </Box>
         </Box>
+        <RightNavBtn />
       </Box>
-      <RightNavBtn />
-    </Box>
-  </Flex.Container>
-);
+    </Flex.Container>
+  );
+};
 
 export default NabBar;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
index 804e9e180cb9..fc9fbfa43820 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
@@ -8,12 +8,13 @@ const Display = ({ elementIndex }: { elementIndex: number }) => {
   const { state, dispatch } = useContext(context);
 
   const deleteElement = () => {
-    const {
-      doc: { payload },
-    } = state;
+    const { screens, activeScreen } = state;
     // @ts-ignore
+    const payload = [...screens[activeScreen].payload];
     payload.splice(elementIndex, 1);
-    dispatch(updatePayloadAction({ payload: [...payload], changedByEditor: false }));
+    dispatch(
+      updatePayloadAction({ payload: [...payload], changedByEditor: false })
+    );
   };
   return (
     <div
@@ -35,7 +36,7 @@ const Display = ({ elementIndex }: { elementIndex: number }) => {
       className={'closeBtn'}
       onClick={deleteElement}
     >
-      <Icon name='cross' size='x20' />
+      <Icon name="cross" size="x20" />
     </div>
   );
 };
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
index 0b0c31bf54c4..2842850cc3f8 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
@@ -14,12 +14,13 @@ const ElementWrapper = ({
       box-sizing: border-box;
       outline: 1px solid transparent;
       height: fit-content;
-      padding: 0 8px;
       align-items: center;
       transition: var(--animation-fast);
+      padding: 0 8px;
+
       &:hover {
-        padding: 8px;
         border-radius: 4px;
+        padding: 8px;
         outline: var(--elements-border);
         transition: var(--animation-fast);
         box-shadow: 0px 0px 8px 1px #ddd;
@@ -28,9 +29,11 @@ const ElementWrapper = ({
           visibility: visible !important;
         }
       }
+
       &:active {
-        padding: 8px;
         background-color: #fff;
+        padding: 8px;
+        transition: var(--animation-fast);
         outline: var(--elements-border);
         box-shadow: 0px 0px 8px 1px #ddd;
       }
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
index f3dcb5860401..4cb2e6da4abd 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
@@ -3,10 +3,15 @@ import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
+import { SurfaceOptions } from './constant';
 
 const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
-  <Banner icon={<Icon name='info' size='x20' />}>
-    <DraggableList surface={2} blocks={blocks} onDragEnd={onDragEnd} />
+  <Banner icon={<Icon name="info" size="x20" />}>
+    <DraggableList
+      surface={SurfaceOptions.Banner}
+      blocks={blocks}
+      onDragEnd={onDragEnd}
+    />
   </Banner>
 );
 
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index 86f87a288f7d..2b5a27292601 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -3,12 +3,13 @@ import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
+import { SurfaceOptions } from './constant';
 
 const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
   <Message clickable>
     <Message.LeftContainer>
       <Avatar
-        url='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
+        url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
               4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
               IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
               AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
@@ -18,7 +19,7 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
               eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
               6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
               SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-              UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'
+              UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
         size={'x36'}
       />
     </Message.LeftContainer>
@@ -32,14 +33,18 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
         <Message.Timestamp>12:00 PM</Message.Timestamp>
       </Message.Header>
       <Message.Body>
-        <DraggableList surface={1} blocks={blocks} onDragEnd={onDragEnd} />
+        <DraggableList
+          surface={SurfaceOptions.message}
+          blocks={blocks}
+          onDragEnd={onDragEnd}
+        />
       </Message.Body>
     </Message.Container>
     <Message.Toolbox.Wrapper>
       <Message.Toolbox>
-        <Message.Toolbox.Item icon='quote' />
-        <Message.Toolbox.Item icon='clock' />
-        <Message.Toolbox.Item icon='thread' />
+        <Message.Toolbox.Item icon="quote" />
+        <Message.Toolbox.Item icon="clock" />
+        <Message.Toolbox.Item icon="thread" />
       </Message.Toolbox>
     </Message.Toolbox.Wrapper>
   </Message>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
index de38af3eff7a..04611c6d22ee 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
@@ -13,19 +13,24 @@ import React from 'react';
 
 import DraggableList from '../../../Draggable/DraggableList';
 import type { DraggableListProps } from '../../../Draggable/DraggableList';
+import { SurfaceOptions } from './constant';
 
 const ModalSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
   <Modal>
     <ModalHeader>
-      <ModalThumb url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />
+      <ModalThumb url="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
       <ModalTitle>Modal Header</ModalTitle>
       <ModalClose />
     </ModalHeader>
     <ModalContent>
-      <DraggableList surface={3} blocks={blocks} onDragEnd={onDragEnd} />
+      <DraggableList
+        surface={SurfaceOptions.Modal}
+        blocks={blocks}
+        onDragEnd={onDragEnd}
+      />
     </ModalContent>
     <ModalFooter>
-      <ButtonGroup align='end'>
+      <ButtonGroup align="end">
         <Button>Cancel</Button>
         <Button primary>Submit</Button>
       </ButtonGroup>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
new file mode 100644
index 000000000000..6104c8669540
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
@@ -0,0 +1,5 @@
+export enum SurfaceOptions {
+    message = 1,
+    Banner,
+    Modal
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index 6cf1dc87f0ff..8b65e4af52ce 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -33,7 +33,7 @@ const NavPanel: FC = () => {
 			`}
 		>
 			<Box display='flex' flexGrow={0} pis={'5px'}>
-				<SurfaceSelect />
+				{!isMobile && <SurfaceSelect />}
 				<Button mis='10px' small onClick={() => dispatch(templatesToggleAction(true))}>
 					Templates
 				</Button>
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
index 6524758bd9b0..13bc2456221e 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
@@ -4,16 +4,11 @@ import React from 'react';
 import type { templateType } from '../../../utils/templates';
 import Section from './Section';
 
-const Container = ({ templates }: { templates: templateType[] }) => {
-  console.log('');
-  return (
-    <Box width="50%" mbs="80px" height="max-content">
-      {templates &&
-        templates.map((template, i) => (
-          <Section template={template} index={i} />
-        ))}
-    </Box>
-  );
-};
+const Container = ({ templates }: { templates: templateType[] }) => (
+  <Box width="50%" mbs="80px" height="max-content">
+    {templates &&
+      templates.map((template, i) => <Section template={template} index={i} />)}
+  </Box>
+);
 
 export default Container;
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
index da365a91f0fb..fe2a13ae0913 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -1,8 +1,8 @@
 import { Box, Label } from '@rocket.chat/fuselage';
 import React from 'react';
 
+import type { templateType } from '../../../utils/templates';
 import Payload from './Payload';
-import { templateType } from '../../../utils/templates';
 
 const Section = ({
   template,
diff --git a/packages/uikit-playground/src/Components/Templates/Templates.tsx b/packages/uikit-playground/src/Components/Templates/Templates.tsx
index dcd56b234858..b7120371c3f9 100644
--- a/packages/uikit-playground/src/Components/Templates/Templates.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Templates.tsx
@@ -4,8 +4,8 @@ import type { FC } from 'react';
 import React, { useContext } from 'react';
 
 import { context, templatesToggleAction } from '../../Context';
-import Container from './Container';
 import { templates } from '../../utils/templates';
+import Container from './Container';
 
 const Templates: FC = () => {
   const {
diff --git a/packages/uikit-playground/src/Pages/FlowDiagram.tsx b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
new file mode 100644
index 000000000000..82b5471018b4
--- /dev/null
+++ b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import FlowContainer from '../Components/FlowContainer/FlowContainer';
+
+const FlowDiagram = () => (
+  <Box w="100vW" h="100vh">
+    <FlowContainer />
+  </Box>
+);
+
+export default FlowDiagram;
diff --git a/yarn.lock b/yarn.lock
index 49ffcf9c3e13..4f60ccfa7ce6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6985,6 +6985,102 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reactflow/background@npm:11.2.2":
+  version: 11.2.2
+  resolution: "@reactflow/background@npm:11.2.2"
+  dependencies:
+    "@reactflow/core": 11.7.2
+    classcat: ^5.0.3
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 02c753dada8fc3f0d6bfe0480543ac53704bc50a2ffdf54f4a38c57bdde54df357a421380dc97c01c342c3dae328deb80a21be003fb3d61eb8644bc16cc72596
+  languageName: node
+  linkType: hard
+
+"@reactflow/controls@npm:11.1.13":
+  version: 11.1.13
+  resolution: "@reactflow/controls@npm:11.1.13"
+  dependencies:
+    "@reactflow/core": 11.7.2
+    classcat: ^5.0.3
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: aab2091685a348ff6d95bbc6eb8f16a7b13f1a2fededdfa07159998da3cbd10cc7e98e6a3e7378891716c79374ea71f1b422189e40cbba8a4ddd83d0d66f7541
+  languageName: node
+  linkType: hard
+
+"@reactflow/core@npm:11.7.2, @reactflow/core@npm:^11.6.0":
+  version: 11.7.2
+  resolution: "@reactflow/core@npm:11.7.2"
+  dependencies:
+    "@types/d3": ^7.4.0
+    "@types/d3-drag": ^3.0.1
+    "@types/d3-selection": ^3.0.3
+    "@types/d3-zoom": ^3.0.1
+    classcat: ^5.0.3
+    d3-drag: ^3.0.0
+    d3-selection: ^3.0.0
+    d3-zoom: ^3.0.0
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 855f6787d7207c553a16d92ae450b6e9d0f1e1094dc6387e8838367e30e24f5018eaf7c90ab5f268ff985addea088d86f2405e528649fce51e107fdf27b5feca
+  languageName: node
+  linkType: hard
+
+"@reactflow/minimap@npm:11.5.2":
+  version: 11.5.2
+  resolution: "@reactflow/minimap@npm:11.5.2"
+  dependencies:
+    "@reactflow/core": 11.7.2
+    "@types/d3-selection": ^3.0.3
+    "@types/d3-zoom": ^3.0.1
+    classcat: ^5.0.3
+    d3-selection: ^3.0.0
+    d3-zoom: ^3.0.0
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: c4bc374307840b55c60ec7d2d399123f3d4250a860cddb4ce0d4d481600be1f09849566c7375177477141aa70f3e9a8ba6df0c00d90e7bddac36d331c63699f8
+  languageName: node
+  linkType: hard
+
+"@reactflow/node-resizer@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@reactflow/node-resizer@npm:2.1.0"
+  dependencies:
+    "@reactflow/core": ^11.6.0
+    classcat: ^5.0.4
+    d3-drag: ^3.0.0
+    d3-selection: ^3.0.0
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: f995f6aa05f1d6fa4e406d127c9ecf10ac8723bed8247c4b882958d128c5f799f6fbc64919fd70277c748086f66ab2f1ce62a2df7f37f8acb87a867bd0ad0442
+  languageName: node
+  linkType: hard
+
+"@reactflow/node-toolbar@npm:1.2.1":
+  version: 1.2.1
+  resolution: "@reactflow/node-toolbar@npm:1.2.1"
+  dependencies:
+    "@reactflow/core": 11.7.2
+    classcat: ^5.0.3
+    zustand: ^4.3.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: e327ae5c2f4b6c1b0d302cb1c3c5754273bb32fba6fb7d28e761741642ccf9ed3878041d602819138be7f96a18c8a1933b20690817fa7143e57c94bfd6f54a87
+  languageName: node
+  linkType: hard
+
 "@redis/bloom@npm:1.0.2":
   version: 1.0.2
   resolution: "@redis/bloom@npm:1.0.2"
@@ -8962,6 +9058,7 @@ __metadata:
     react-router-dom: ^6.11.2
     react-split-pane: ^0.1.92
     react-virtuoso: ^4.3.10
+    reactflow: ^11.7.2
     typescript: ~5.1.6
     use-subscription: ^1.8.0
     vite: ^4.3.9
@@ -11105,6 +11202,278 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/d3-array@npm:*":
+  version: 3.0.5
+  resolution: "@types/d3-array@npm:3.0.5"
+  checksum: c0014042f75dc77ff4749f6a7a78074aa73e63e5b6a985ac79a0abf3e3d943b19ddd3fbfcfcd11124f25b7f4b97cd0948eec84b2e0783cd617b49c593de695f0
+  languageName: node
+  linkType: hard
+
+"@types/d3-axis@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-axis@npm:3.0.2"
+  dependencies:
+    "@types/d3-selection": "*"
+  checksum: 3067a949572da14050c1ee1dc6a4e9ceb32e9a1bdd99e4029cdf1f541b86a843294d12f911fb9faa32a75107d36d925efcc66116f8341573cba4bb780f42ca00
+  languageName: node
+  linkType: hard
+
+"@types/d3-brush@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-brush@npm:3.0.2"
+  dependencies:
+    "@types/d3-selection": "*"
+  checksum: 5a539f94ff8f397a1ca874b1cf4e641a9b26cb965904f13b1b566a6505685124c37fecf45bd88b0527727b3ffcfadf53613e90aceb5cd774fa3b62f5960db019
+  languageName: node
+  linkType: hard
+
+"@types/d3-chord@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-chord@npm:3.0.2"
+  checksum: 7ea3398d826a0a6affe4bafb96340f74baf6126c11547af37962f486e31d4dd48d85ade8a357585bbc7616e46e43f82d2d2435e8bfe4c2d57977fd75dd53d1e5
+  languageName: node
+  linkType: hard
+
+"@types/d3-color@npm:*":
+  version: 3.1.0
+  resolution: "@types/d3-color@npm:3.1.0"
+  checksum: b1856f17d6366559a68eaba0164f30727e9dc5eaf1b3a6c8844354da228860240423d19fa4de65bff9da26b4ead8843eab14b1566962665412e8fd82c3810554
+  languageName: node
+  linkType: hard
+
+"@types/d3-contour@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-contour@npm:3.0.2"
+  dependencies:
+    "@types/d3-array": "*"
+    "@types/geojson": "*"
+  checksum: 7b0f7ccf33dbad8124bd96736adf64b3630087fa0bda355685bcde43e13d51109a30de738785dd33d627bd2672d78d0210b7997403358974ac87b57fcf5e2752
+  languageName: node
+  linkType: hard
+
+"@types/d3-delaunay@npm:*":
+  version: 6.0.1
+  resolution: "@types/d3-delaunay@npm:6.0.1"
+  checksum: c46fd6f399ed604e9f40841851c432c936c4408af9e61b235a7f6030e93faa9b5c4f6c33a62be221e1d33f48a9162e9c4bbfa173746c0e4787483310da9a03b2
+  languageName: node
+  linkType: hard
+
+"@types/d3-dispatch@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-dispatch@npm:3.0.2"
+  checksum: 716f21bdc4e0057ecc2989f8c3b69ba18244b40ba42e6029aad30cbd254a42ce113ec775f40ca300e02fb23823a5ebf378dae3008614d7e591b7759607fde68a
+  languageName: node
+  linkType: hard
+
+"@types/d3-drag@npm:*, @types/d3-drag@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "@types/d3-drag@npm:3.0.2"
+  dependencies:
+    "@types/d3-selection": "*"
+  checksum: cd2fd6a628c097c0c4fbd1ebe647f846d7bcc7819879882e48fd64fd743b5328efe715d002e9cbf47faa2ce3fabaec9795659cb0849c326576e98cd2bf95cbf1
+  languageName: node
+  linkType: hard
+
+"@types/d3-dsv@npm:*":
+  version: 3.0.1
+  resolution: "@types/d3-dsv@npm:3.0.1"
+  checksum: f3dbb3c994b1564b5cbeb2991fa9a0e0cee82e93e2d304f2e643b1808818493c6bb11da5503562e21ba6f6cced0faccc8d9cd5005e9065af8e4b6b4477cc8982
+  languageName: node
+  linkType: hard
+
+"@types/d3-ease@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-ease@npm:3.0.0"
+  checksum: 1be7c993643b5a08332e0ee146375a3845545d8deb423db5d152e0b061524385d2345ceccf968f75f605247b940dd3f9a144335fee2e7d935cddaf187afb7095
+  languageName: node
+  linkType: hard
+
+"@types/d3-fetch@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-fetch@npm:3.0.2"
+  dependencies:
+    "@types/d3-dsv": "*"
+  checksum: 10fad5c1d4d8c225f2381772fe85e92cfab6575d85069e7a6361eb4d8c0030e1cde7e9db484be7db2b2f075e8e0043dae827b72396a20b94b97e58cedc50f7a5
+  languageName: node
+  linkType: hard
+
+"@types/d3-force@npm:*":
+  version: 3.0.4
+  resolution: "@types/d3-force@npm:3.0.4"
+  checksum: 779fb597fb41e7bc6a5e1b8969d500deb95c4a73428c7c268bf0ca6f3ed668dd2ed6aa652de7af14d2f9c192dad4f6e7badf2c5bc330624bd8405ac88440b278
+  languageName: node
+  linkType: hard
+
+"@types/d3-format@npm:*":
+  version: 3.0.1
+  resolution: "@types/d3-format@npm:3.0.1"
+  checksum: 6819fae7e7c3fce1e44cd56e9b6d8ea5508f708cb7a42793edf82ff914b120bf6cddc35208b1b33ec82615ab82b843c284709f9cea5c3fe1ea5f012106b3d32c
+  languageName: node
+  linkType: hard
+
+"@types/d3-geo@npm:*":
+  version: 3.0.3
+  resolution: "@types/d3-geo@npm:3.0.3"
+  dependencies:
+    "@types/geojson": "*"
+  checksum: d2f0d386024efb97a0829488cf31d574669ff37f452bb4bb58ba62b03e705e583e166ba30844beffb51119909bf1a168a1efc91885c55ab72da9a52a46c114e2
+  languageName: node
+  linkType: hard
+
+"@types/d3-hierarchy@npm:*":
+  version: 3.1.2
+  resolution: "@types/d3-hierarchy@npm:3.1.2"
+  checksum: fc423b25843fb54a411e4e119eaa5a092c6da65cf17855c56fcd4807dcc897145aed78578d9af7dd9b924204c34588b1d8c9b973c27474512048e9486439b2d4
+  languageName: node
+  linkType: hard
+
+"@types/d3-interpolate@npm:*":
+  version: 3.0.1
+  resolution: "@types/d3-interpolate@npm:3.0.1"
+  dependencies:
+    "@types/d3-color": "*"
+  checksum: 29ce472968b9e6611bdf0eeedaf89e8d6066190b52ced011d16d8183b8b9f8e6dd6516ca2b85242594942896299b42f37504d44e635f8fba3090c2c58594e21b
+  languageName: node
+  linkType: hard
+
+"@types/d3-path@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-path@npm:3.0.0"
+  checksum: af7f45ea912cddd794c03384baba856f11e1f9b57a49d05a66a61968dafaeb86e0e42394883118b9b8ccadce21a5f25b1f9a88ad05235e1dc6d24c3e34a379ff
+  languageName: node
+  linkType: hard
+
+"@types/d3-polygon@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-polygon@npm:3.0.0"
+  checksum: 2b4fbd864e6e40c8f63c56c46ed27f63c18d4b9b8c6f03c48bda048bc29e0d77c01763122a3cf85cce89acb12c4a65f3cd7b1d87b53ced8bf6ce341831b30190
+  languageName: node
+  linkType: hard
+
+"@types/d3-quadtree@npm:*":
+  version: 3.0.2
+  resolution: "@types/d3-quadtree@npm:3.0.2"
+  checksum: 2a831a80590df125b07bc573c081449823e85159bb8fafbfee9f211dbe402840aeb01f4b04b4b47b0f28394daee29c8a10185f9acf17b6a8be649a377aff006b
+  languageName: node
+  linkType: hard
+
+"@types/d3-random@npm:*":
+  version: 3.0.1
+  resolution: "@types/d3-random@npm:3.0.1"
+  checksum: 7ed9f83ee3c0b02510767bf15551984c229491d694c3c9a45a8eb80b27f7eb5f9096a48011c8cae6787b3e36321a6aaf2fe0efed8685a669481927a3d08e6b8a
+  languageName: node
+  linkType: hard
+
+"@types/d3-scale-chromatic@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-scale-chromatic@npm:3.0.0"
+  checksum: e06afffd2725570aa90cb3050eb96a94727264948d9256e56807ab582aba379168d84d1d98bcaa275bf38375148b35dfe13697e06fc7565dd17ac7e2acb11980
+  languageName: node
+  linkType: hard
+
+"@types/d3-scale@npm:*":
+  version: 4.0.3
+  resolution: "@types/d3-scale@npm:4.0.3"
+  dependencies:
+    "@types/d3-time": "*"
+  checksum: 76684da8519ab5f2210e647f74f96ece9c6816dea4ad5d76131121703a5268cc65687a8bc9ebbf4a44039482247336d98811ecc3fbfeb7f0122fdce4bb295547
+  languageName: node
+  linkType: hard
+
+"@types/d3-selection@npm:*, @types/d3-selection@npm:^3.0.3":
+  version: 3.0.5
+  resolution: "@types/d3-selection@npm:3.0.5"
+  checksum: 77ea35c92273cd2d736355ab5a4cf6477086b064a1f608489a6fef4198ee6bc1d5440e5dfd880099265ac96c4f4b4fda659d89fbaaef37ba03708663196ba8ad
+  languageName: node
+  linkType: hard
+
+"@types/d3-shape@npm:*":
+  version: 3.1.1
+  resolution: "@types/d3-shape@npm:3.1.1"
+  dependencies:
+    "@types/d3-path": "*"
+  checksum: 8f1762ecdeb4833a3802be1c65363cbc7cca753d0b836a3855fde4ba12f8e6fc142dba3c5f6d669a9e89374cc6dc414464e4f2d04e72fafd4bc64819ce30bb63
+  languageName: node
+  linkType: hard
+
+"@types/d3-time-format@npm:*":
+  version: 4.0.0
+  resolution: "@types/d3-time-format@npm:4.0.0"
+  checksum: ac3a841b0cd6e7f4d4c6c2cd09a2662facea6993c16b10f40fdf84f55adf7be59a6d08fd6ac1c42c27c7340f3b5eeafef968b45b052a5476a580c78a991668db
+  languageName: node
+  linkType: hard
+
+"@types/d3-time@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-time@npm:3.0.0"
+  checksum: e76adb056daccf80107f4db190ac6deb77e8774f00362bb6c76f178e67f2f217422fe502b654edbc9ac6451f6619045b9f6f5fe0db1ec5520e2ada377af7c72e
+  languageName: node
+  linkType: hard
+
+"@types/d3-timer@npm:*":
+  version: 3.0.0
+  resolution: "@types/d3-timer@npm:3.0.0"
+  checksum: 1ec86b3808de6ecfa93cfdf34254761069658af0cc1d9540e8353dbcba161cdf1296a0724187bd17433b2ff16563115fd20b85fc89d5e809ff28f9b1ab134b42
+  languageName: node
+  linkType: hard
+
+"@types/d3-transition@npm:*":
+  version: 3.0.3
+  resolution: "@types/d3-transition@npm:3.0.3"
+  dependencies:
+    "@types/d3-selection": "*"
+  checksum: ab9ce125108a5a5b67b972cfe23a73a0efbe958a38f51e7a2ef1003759d79f72e4563baac12400a6d6663885372bef25a50ea4433243f1a040e7fc9096b44d9d
+  languageName: node
+  linkType: hard
+
+"@types/d3-zoom@npm:*, @types/d3-zoom@npm:^3.0.1":
+  version: 3.0.3
+  resolution: "@types/d3-zoom@npm:3.0.3"
+  dependencies:
+    "@types/d3-interpolate": "*"
+    "@types/d3-selection": "*"
+  checksum: 1c828538e2b04c47f659ead552824bed1c545dd1934f38abfec95f4a3c1cb4eaf7e107959ebd05a3dfec0166fa98677037ede6f633383c6502b1a05eaeb1d418
+  languageName: node
+  linkType: hard
+
+"@types/d3@npm:^7.4.0":
+  version: 7.4.0
+  resolution: "@types/d3@npm:7.4.0"
+  dependencies:
+    "@types/d3-array": "*"
+    "@types/d3-axis": "*"
+    "@types/d3-brush": "*"
+    "@types/d3-chord": "*"
+    "@types/d3-color": "*"
+    "@types/d3-contour": "*"
+    "@types/d3-delaunay": "*"
+    "@types/d3-dispatch": "*"
+    "@types/d3-drag": "*"
+    "@types/d3-dsv": "*"
+    "@types/d3-ease": "*"
+    "@types/d3-fetch": "*"
+    "@types/d3-force": "*"
+    "@types/d3-format": "*"
+    "@types/d3-geo": "*"
+    "@types/d3-hierarchy": "*"
+    "@types/d3-interpolate": "*"
+    "@types/d3-path": "*"
+    "@types/d3-polygon": "*"
+    "@types/d3-quadtree": "*"
+    "@types/d3-random": "*"
+    "@types/d3-scale": "*"
+    "@types/d3-scale-chromatic": "*"
+    "@types/d3-selection": "*"
+    "@types/d3-shape": "*"
+    "@types/d3-time": "*"
+    "@types/d3-time-format": "*"
+    "@types/d3-timer": "*"
+    "@types/d3-transition": "*"
+    "@types/d3-zoom": "*"
+  checksum: d1383f5fca7c4a819d57eb4bccc387dccaa7cb4c24d56388e5247954db6c88f5fb7c74d156165dfe044f1da8d4d510796c8d8487b5956d8270a94a1182a6e00f
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.1.8":
   version: 4.1.8
   resolution: "@types/debug@npm:4.1.8"
@@ -11218,6 +11587,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/geojson@npm:*":
+  version: 7946.0.10
+  resolution: "@types/geojson@npm:7946.0.10"
+  checksum: 12c407c2dc93ecb26c08af533ee732f1506a9b29456616ba7ba1d525df96206c28ddf44a528f6a5415d7d22893e9d967420940a9c095ee5e539c1eba5fefc1f4
+  languageName: node
+  linkType: hard
+
 "@types/glob@npm:*, @types/glob@npm:^7.1.1":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
@@ -15947,6 +16323,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classcat@npm:^5.0.3, classcat@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "classcat@npm:5.0.4"
+  checksum: 77373c58fa15ad2d4494b5c73c7ed2f859e7126227c357a3931e3f2a28e45dd9d8e779c1c8d3a8ba9ece833b21f14cd79160a7999973e28888d7e47f56c83170
+  languageName: node
+  linkType: hard
+
 "clean-css@npm:^4.2.3":
   version: 4.2.4
   resolution: "clean-css@npm:4.2.4"
@@ -17461,6 +17844,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-color@npm:1 - 3":
+  version: 3.1.0
+  resolution: "d3-color@npm:3.1.0"
+  checksum: 4931fbfda5d7c4b5cfa283a13c91a954f86e3b69d75ce588d06cde6c3628cebfc3af2069ccf225e982e8987c612aa7948b3932163ce15eb3c11cd7c003f3ee3b
+  languageName: node
+  linkType: hard
+
 "d3-delaunay@npm:^5.3.0":
   version: 5.3.0
   resolution: "d3-delaunay@npm:5.3.0"
@@ -17470,6 +17860,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-dispatch@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-dispatch@npm:3.0.1"
+  checksum: fdfd4a230f46463e28e5b22a45dd76d03be9345b605e1b5dc7d18bd7ebf504e6c00ae123fd6d03e23d9e2711e01f0e14ea89cd0632545b9f0c00b924ba4be223
+  languageName: node
+  linkType: hard
+
+"d3-drag@npm:2 - 3, d3-drag@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-drag@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-selection: 3
+  checksum: d297231e60ecd633b0d076a63b4052b436ddeb48b5a3a11ff68c7e41a6774565473a6b064c5e9256e88eca6439a917ab9cea76032c52d944ddbf4fd289e31111
+  languageName: node
+  linkType: hard
+
+"d3-ease@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-ease@npm:3.0.1"
+  checksum: 06e2ee5326d1e3545eab4e2c0f84046a123dcd3b612e68858219aa034da1160333d9ce3da20a1d3486d98cb5c2a06f7d233eee1bc19ce42d1533458bd85dedcd
+  languageName: node
+  linkType: hard
+
 "d3-format@npm:1 - 2":
   version: 2.0.0
   resolution: "d3-format@npm:2.0.0"
@@ -17493,6 +17907,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-interpolate@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-interpolate@npm:3.0.1"
+  dependencies:
+    d3-color: 1 - 3
+  checksum: a42ba314e295e95e5365eff0f604834e67e4a3b3c7102458781c477bd67e9b24b6bb9d8e41ff5521050a3f2c7c0c4bbbb6e187fd586daa3980943095b267e78b
+  languageName: node
+  linkType: hard
+
 "d3-path@npm:1":
   version: 1.0.9
   resolution: "d3-path@npm:1.0.9"
@@ -17523,6 +17946,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-selection@npm:2 - 3, d3-selection@npm:3, d3-selection@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-selection@npm:3.0.0"
+  checksum: f4e60e133309115b99f5b36a79ae0a19d71ee6e2d5e3c7216ef3e75ebd2cb1e778c2ed2fa4c01bef35e0dcbd96c5428f5bd6ca2184fe2957ed582fde6841cbc5
+  languageName: node
+  linkType: hard
+
 "d3-shape@npm:^1.3.5":
   version: 1.3.7
   resolution: "d3-shape@npm:1.3.7"
@@ -17557,6 +17987,41 @@ __metadata:
   languageName: node
   linkType: hard
 
+"d3-timer@npm:1 - 3":
+  version: 3.0.1
+  resolution: "d3-timer@npm:3.0.1"
+  checksum: 1cfddf86d7bca22f73f2c427f52dfa35c49f50d64e187eb788dcad6e927625c636aa18ae4edd44d084eb9d1f81d8ca4ec305dae7f733c15846a824575b789d73
+  languageName: node
+  linkType: hard
+
+"d3-transition@npm:2 - 3":
+  version: 3.0.1
+  resolution: "d3-transition@npm:3.0.1"
+  dependencies:
+    d3-color: 1 - 3
+    d3-dispatch: 1 - 3
+    d3-ease: 1 - 3
+    d3-interpolate: 1 - 3
+    d3-timer: 1 - 3
+  peerDependencies:
+    d3-selection: 2 - 3
+  checksum: cb1e6e018c3abf0502fe9ff7b631ad058efb197b5e14b973a410d3935aead6e3c07c67d726cfab258e4936ef2667c2c3d1cd2037feb0765f0b4e1d3b8788c0ea
+  languageName: node
+  linkType: hard
+
+"d3-zoom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "d3-zoom@npm:3.0.0"
+  dependencies:
+    d3-dispatch: 1 - 3
+    d3-drag: 2 - 3
+    d3-interpolate: 1 - 3
+    d3-selection: 2 - 3
+    d3-transition: 2 - 3
+  checksum: 8056e3527281cfd1ccbcbc458408f86973b0583e9dac00e51204026d1d36803ca437f970b5736f02fafed9f2b78f145f72a5dbc66397e02d4d95d4c594b8ff54
+  languageName: node
+  linkType: hard
+
 "dashdash@npm:^1.12.0":
   version: 1.14.1
   resolution: "dashdash@npm:1.14.1"
@@ -32118,6 +32583,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reactflow@npm:^11.7.2":
+  version: 11.7.2
+  resolution: "reactflow@npm:11.7.2"
+  dependencies:
+    "@reactflow/background": 11.2.2
+    "@reactflow/controls": 11.1.13
+    "@reactflow/core": 11.7.2
+    "@reactflow/minimap": 11.5.2
+    "@reactflow/node-resizer": 2.1.0
+    "@reactflow/node-toolbar": 1.2.1
+  peerDependencies:
+    react: ">=17"
+    react-dom: ">=17"
+  checksum: 7cbafbbb787b26ff7c19ed47e48ca8f0bc55971003e2cd5456b5de84e92b74f479d0c7a22a7f3766e3632b04d14f780db9d03d338c03207cf69900f4e7dbcf0e
+  languageName: node
+  linkType: hard
+
 "read-cache@npm:^1.0.0":
   version: 1.0.0
   resolution: "read-cache@npm:1.0.0"
@@ -37290,7 +37772,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:~1.2.0":
+"use-sync-external-store@npm:1.2.0, use-sync-external-store@npm:^1.2.0, use-sync-external-store@npm:~1.2.0":
   version: 1.2.0
   resolution: "use-sync-external-store@npm:1.2.0"
   peerDependencies:
@@ -38992,6 +39474,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zustand@npm:^4.3.1":
+  version: 4.3.8
+  resolution: "zustand@npm:4.3.8"
+  dependencies:
+    use-sync-external-store: 1.2.0
+  peerDependencies:
+    immer: ">=9.0"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    immer:
+      optional: true
+    react:
+      optional: true
+  checksum: 24db6bf063ce1fc8b2ee238f13211a88f43236541a716e5f6f706f613c671a45332465f9ed06d694f8c353da3d24c53ea668e5712a86aceda9ad74f6c433e8c0
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^1.0.0":
   version: 1.0.5
   resolution: "zwitch@npm:1.0.5"

From 271aab6bd49aaa7a054e4098eaf47bb31ff66bdc Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 17:38:14 +0530
Subject: [PATCH 07/50] refactor(uikit-playground): Uikit and surface Renderer

---
 .../CreateNewScreen/ScreenThumbnail.tsx       |  4 +-
 .../Draggable/DraggableListItem.tsx           | 11 ++---
 .../src/Components/DropDown/itemsStyle.ts     | 32 +++++++-------
 .../FlowContainer/FlowContainer.tsx           |  2 +-
 .../Components/FlowContainer/UIKitWrapper.tsx | 14 +++++--
 .../Display/RenderPayload/RenderPayload.tsx   | 42 ++++++-------------
 .../Preview/Display/Surface/BannerSurface.tsx | 15 ++-----
 .../Display/Surface/MessageSurface.tsx        | 15 ++-----
 .../Preview/Display/Surface/ModalSurface.tsx  | 15 ++-----
 .../Preview/Display/Surface/Surface.tsx       | 19 ++++-----
 .../Preview/Display/Surface/SurfaceRender.tsx | 26 ++++++++++++
 .../Preview/Display/Surface/constant.ts       |  2 +-
 .../SurfaceSelect/SurfaceSelect.tsx           |  4 +-
 .../src/Components/SurfaceSelect/options.ts   | 12 +++---
 .../Templates/Container/Payload.tsx           |  2 +-
 .../src/Context/initialState.ts               |  6 +--
 .../uikit-playground/src/Context/reducer.ts   | 15 ++++++-
 .../src/Payload/actionPreview/container.ts    | 18 ++++----
 .../actionPreview/generateActionPreview.ts    |  6 ++-
 .../src/utils/uiKitRenderer.ts                |  0
 20 files changed, 133 insertions(+), 127 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
 create mode 100644 packages/uikit-playground/src/utils/uiKitRenderer.ts

diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index d91830b2b891..f316a2d5b508 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -48,9 +48,7 @@ const ScreenThumbnail = ({
       onMouseOut={() => setIsHover(false)}
       onBlur={() => setIsHover(false)}
     >
-      <Thumbnail
-        of={renderPayload({ index: 0, surface: 1, payload: screen.payload })}
-      />
+      <Thumbnail of={renderPayload({ payload: screen.payload })} />
       <Box
         w="100%"
         h="100%"
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
index 6b644d37a684..aa41ee447834 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
+import DeleteElementBtn from '../Preview/Display/RenderPayload/DeleteElementBtn';
+import ElementWrapper from '../Preview/Display/RenderPayload/ElementWrapper';
 import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
 import type { Block } from './DraggableList';
 
@@ -22,11 +24,10 @@ const DraggableListItem = ({
         {...provided.draggableProps}
         {...provided.dragHandleProps}
       >
-        <RenderPayload
-          surface={surface}
-          payload={[block.payload]}
-          index={index}
-        />
+        <ElementWrapper key={index}>
+          <DeleteElementBtn elementIndex={index} />
+          <RenderPayload surface={surface} payload={[block.payload]} />
+        </ElementWrapper>
       </div>
     )}
   </Draggable>
diff --git a/packages/uikit-playground/src/Components/DropDown/itemsStyle.ts b/packages/uikit-playground/src/Components/DropDown/itemsStyle.ts
index da9c9ff0b2c5..d91dc5b80f9d 100644
--- a/packages/uikit-playground/src/Components/DropDown/itemsStyle.ts
+++ b/packages/uikit-playground/src/Components/DropDown/itemsStyle.ts
@@ -2,9 +2,11 @@ import { css } from '@rocket.chat/css-in-js';
 
 export const itemStyle = (layer: number, hover: boolean) => {
   const style = css`
-    cursor: pointer;
-    padding-left: ${10 + (layer - 1) * 16}px;
-    background-color: ${hover ? 'var(--RCPG-primary-color)' : 'transparent'};
+    cursor: pointer !important;
+    padding-left: ${10 + (layer - 1) * 16}px !important;
+    background-color: ${hover
+      ? 'var(--RCPG-primary-color) !important'
+      : 'transparent !important'};
   `;
   return style;
 };
@@ -18,26 +20,26 @@ export const labelStyle = (layer: number, hover: boolean) => {
   switch (layer) {
     case 1:
       customStyle = css`
-        font-weight: 700;
-        font-size: 14px;
-        letter-spacing: 0.3px;
-        color: ${hover ? '#fff' : '#999'};
-        text-transform: uppercase;
+        font-weight: 700 !important;
+        font-size: 14px !important;
+        letter-spacing: 0.3px !important;
+        color: ${hover ? '#fff !important' : '#999 !important'};
+        text-transform: uppercase !important;
       `;
       break;
     case 2:
       customStyle = css`
-        letter-spacing: 0.1px;
-        font-size: 12px;
-        color: ${hover ? '#fff' : '#555'};
-        text-transform: capitalize;
+        letter-spacing: 0.1px !important;
+        font-size: 12px !important;
+        color: ${hover ? '#fff !important' : '#555 !important'};
+        text-transform: capitalize !important;
       `;
       break;
     default:
       customStyle = css`
-        font-size: 12px;
-        color: ${hover ? '#fff' : '#555'};
-        text-transform: capitalize;
+        font-size: 12px !important;
+        color: ${hover ? '#fff !important' : '#555 !important'};
+        text-transform: capitalize !important;
       `;
       break;
   }
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 3b7a09ba4f33..d33055ed83c7 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -29,7 +29,7 @@ const FlowContainer = () => {
     id: screen.id,
     type: 'custom',
     position: { x: 0, y: 0 },
-    data: screen.payload,
+    data: screen,
   }));
 
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
index 6c7261ed9b90..b25cfb66d1d6 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
@@ -1,11 +1,19 @@
 import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import type { docType } from '../../Context/initialState';
+import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
 
-const UIKitWrapper = ({ id, data }) => {
+const UIKitWrapper = ({ id, data }: { id: string, data: docType }) => {
   console.log(data, id);
-  return <Box>{renderPayload({ index: 0, surface: 1, payload: data })}</Box>;
+  return (
+    <Box>
+      <SurfaceRender type={data.surface}>
+        <RenderPayload payload={data.payload} surface={data.surface} />
+      </SurfaceRender>
+    </Box>
+  );
 };
 
 export default UIKitWrapper;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index ec08d44b3b33..508fbc89691f 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -1,37 +1,19 @@
 import {
-  UiKitModal as uiKitModal,
-  UiKitBanner as uiKitBanner,
-  UiKitMessage as uiKitMessage,
-  UiKitContextualBar as uiKitContextualBar,
+	UiKitModal as uiKitModal,
+	UiKitBanner as uiKitBanner,
+	UiKitMessage as uiKitMessage,
+	UiKitContextualBar as uiKitContextualBar,
 } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
-import React from 'react';
 
-import DeleteElementBtn from './DeleteElementBtn';
-import ElementWrapper from './ElementWrapper';
-
-const RenderPayload = ({
-  index,
-  payload,
-  surface,
-}: {
-  index: number,
-  payload: readonly LayoutBlock[],
-  surface: number,
-}) => {
-  const uiKitRender: { [key: number]: any } = {
-    '1': () => uiKitMessage(payload),
-    '2': () => uiKitBanner(payload),
-    '3': () => uiKitModal(payload),
-    '4': () => uiKitContextualBar(payload)
-  };
-
-  return (
-    <ElementWrapper key={index}>
-      <DeleteElementBtn elementIndex={index} />
-      <>{uiKitRender[surface]()}</>
-    </ElementWrapper>
-  );
+const RenderPayload = ({ payload, surface = 1 }: { index?: number; payload: readonly LayoutBlock[]; surface?: number }) => {
+	const uiKitRender: { [key: number]: any } = {
+		'1': () => uiKitMessage(payload),
+		'2': () => uiKitBanner(payload),
+		'3': () => uiKitModal(payload),
+		'4': () => uiKitContextualBar(payload),
+	};
+	return <>{uiKitRender[surface]()}</>;
 };
 
 export default RenderPayload;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
index 4cb2e6da4abd..55a0dc9ba746 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
@@ -1,18 +1,9 @@
 import { Banner, Icon } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
 import React from 'react';
 
-import DraggableList from '../../../Draggable/DraggableList';
-import type { DraggableListProps } from '../../../Draggable/DraggableList';
-import { SurfaceOptions } from './constant';
-
-const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
-  <Banner icon={<Icon name="info" size="x20" />}>
-    <DraggableList
-      surface={SurfaceOptions.Banner}
-      blocks={blocks}
-      onDragEnd={onDragEnd}
-    />
-  </Banner>
+const MessageSurface = ({ children }: { children: ReactNode }) => (
+  <Banner icon={<Icon name="info" size="x20" />}>{children}</Banner>
 );
 
 export default MessageSurface;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index 2b5a27292601..f8d27f1be62a 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -1,11 +1,8 @@
 import { Message, Avatar } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
 import React from 'react';
 
-import DraggableList from '../../../Draggable/DraggableList';
-import type { DraggableListProps } from '../../../Draggable/DraggableList';
-import { SurfaceOptions } from './constant';
-
-const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
+const MessageSurface = ({ children }: { children: ReactNode }) => (
   <Message clickable>
     <Message.LeftContainer>
       <Avatar
@@ -32,13 +29,7 @@ const MessageSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
         <Message.Role>Owner</Message.Role>
         <Message.Timestamp>12:00 PM</Message.Timestamp>
       </Message.Header>
-      <Message.Body>
-        <DraggableList
-          surface={SurfaceOptions.message}
-          blocks={blocks}
-          onDragEnd={onDragEnd}
-        />
-      </Message.Body>
+      <Message.Body>{children}</Message.Body>
     </Message.Container>
     <Message.Toolbox.Wrapper>
       <Message.Toolbox>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
index 04611c6d22ee..4185db41db17 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
@@ -9,26 +9,17 @@ import {
   ButtonGroup,
   Button,
 } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
 import React from 'react';
 
-import DraggableList from '../../../Draggable/DraggableList';
-import type { DraggableListProps } from '../../../Draggable/DraggableList';
-import { SurfaceOptions } from './constant';
-
-const ModalSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
+const ModalSurface = ({ children }: { children: ReactNode }) => (
   <Modal>
     <ModalHeader>
       <ModalThumb url="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
       <ModalTitle>Modal Header</ModalTitle>
       <ModalClose />
     </ModalHeader>
-    <ModalContent>
-      <DraggableList
-        surface={SurfaceOptions.Modal}
-        blocks={blocks}
-        onDragEnd={onDragEnd}
-      />
-    </ModalContent>
+    <ModalContent>{children}</ModalContent>
     <ModalFooter>
       <ButtonGroup align="end">
         <Button>Cancel</Button>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index 469baeb220cb..f5852eb65dcc 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -7,15 +7,14 @@ import type { DropResult } from 'react-beautiful-dnd';
 import { context, updatePayloadAction, actionPreviewAction } from '../../../../Context';
 import generateActionPreview from '../../../../Payload/actionPreview/generateActionPreview';
 import type { Block } from '../../../Draggable/DraggableList';
-import BannerSurface from './BannerSurface';
-import MessageSurface from './MessageSurface';
-import ModalSurface from './ModalSurface';
-import ContextualBarSurface from './ContextualBarSurface';
+import DraggableList from '../../../Draggable/DraggableList';
 import { reorder } from './Reorder';
+import SurfaceRender from './SurfaceRender';
+import { SurfaceOptions } from './constant';
 
 const Surface: FC = () => {
 	const {
-		state: { screens, surface, activeScreen },
+		state: { screens, activeScreen },
 		dispatch,
 	} = useContext(context);
 	const [uniqueBlocks, setUniqueBlocks] = useState<{
@@ -58,12 +57,6 @@ const Surface: FC = () => {
 		setUniqueBlocks({ block: newBlocks, isChangeByDnd: true });
 	};
 
-	const surfaceRender: { [key: number]: any } = {
-		'1': () => <MessageSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
-		'2': () => <BannerSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
-		'3': () => <ModalSurface blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />,
-		'4': () => <ContextualBarSurface blocks={uniqueBlocks} onDragEnd={onDragEnd} />,
-	};
 	return (
 		<Box padding='20px'>
 			<UiKitContext.Provider
@@ -80,7 +73,9 @@ const Surface: FC = () => {
 					appId: 'core',
 				}}
 			>
-				{surfaceRender[surface]()}{' '}
+				<SurfaceRender type={screens[activeScreen].surface}>
+					<DraggableList surface={SurfaceOptions.Modal} blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />
+				</SurfaceRender>
 			</UiKitContext.Provider>
 		</Box>
 	);
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
new file mode 100644
index 000000000000..54cb132e0ffa
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+
+import BannerSurface from './BannerSurface';
+import MessageSurface from './MessageSurface';
+import ModalSurface from './ModalSurface';
+import { SurfaceOptions } from './constant';
+
+const SurfaceRender = ({
+  type,
+  children,
+}: {
+  type: SurfaceOptions,
+  children: ReactNode,
+}) => (
+  <>
+    {SurfaceOptions.Message === type && (
+      <MessageSurface>{children}</MessageSurface>
+    )}
+    {SurfaceOptions.Banner === type && (
+      <BannerSurface>{children}</BannerSurface>
+    )}
+    {SurfaceOptions.Modal === type && <ModalSurface>{children}</ModalSurface>}
+  </>
+);
+export default SurfaceRender;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
index 6104c8669540..fcdc6f26bfe3 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
@@ -1,5 +1,5 @@
 export enum SurfaceOptions {
-    message = 1,
+    Message = 1,
     Banner,
     Modal
 }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
index cbba8a574b65..bd5611139dbb 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
@@ -7,13 +7,13 @@ import options from './options';
 
 const SurfaceSelect: FC = () => {
   const {
-    state: { surface },
+    state: { screens, activeScreen },
     dispatch,
   } = useContext(context);
   return (
     <Select
       options={options}
-      value={`${surface}`}
+      value={`${screens[activeScreen].surface}`}
       placeholder={'Surface'}
       onChange={(e) => {
         dispatch(surfaceAction(parseInt(e)));
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
index e9ffc840767f..9747a704ab50 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
@@ -1,10 +1,12 @@
-type SelectOption = [value: string, label: string, selected?: boolean]
+import { SurfaceOptions } from '../Preview/Display/Surface/constant';
+
+type SelectOption = [value: string, label: string, selected?: boolean];
 
 const options: SelectOption[] = [
-  ['1', 'Message Preview'],
-  ['2', 'Banner Preview'],
-  ['3', 'Modal Preview'],
-  ['4', 'ContextualBar Preview'],
+	['1', 'Message Preview'],
+	['2', 'Banner Preview'],
+	['3', 'Modal Preview'],
+	['4', 'ContextualBar Preview'],
 ];
 
 export default options;
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 75dee1ae347b..3a35833fe549 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -59,7 +59,7 @@ const Payload = ({ payload }: { payload: readonly LayoutBlock[] }) => {
               </Message.Header>
               <Message.Body>
                 {payload.map((element) => (
-                  <RenderPayload surface={1} payload={[element]} index={1} />
+                  <RenderPayload payload={[element]} />
                 ))}
               </Message.Body>
             </Message.Container>
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index d6815c76b1da..661f70fffe91 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -1,11 +1,13 @@
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
 
+import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 
 export type docType = {
   payload: readonly LayoutBlock[];
   id: string;
   name: string;
+  surface: SurfaceOptions;
   changedByEditor?: boolean;
 };
 
@@ -50,7 +52,6 @@ export type initialStateType = {
   previewTabsToggle: number;
   editorTabsToggle: number;
   navMenuToggle: boolean;
-  surface: number;
   activeScreen: string;
   screens: ScreensType;
   actionPreview: actionPreviewType;
@@ -68,8 +69,7 @@ export const initialState: initialStateType = {
   previewTabsToggle: 0,
   editorTabsToggle: 0,
   navMenuToggle: false,
-  surface: 1,
-  screens: {[initialPageId] : { id: initialPageId, name: 'default1', payload: [], changedByEditor: true },
+  screens: {[initialPageId] : { id: initialPageId, name: 'default1', payload: [], surface: SurfaceOptions.Message, changedByEditor: true },
 },
   activeScreen: initialPageId,
   actionPreview: {},
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index e5d6080aa99c..d69dd92de516 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 
+import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 import type { initialStateType } from './initialState';
 
@@ -22,7 +23,17 @@ const reducer = (state: initialStateType, action: actionType) => {
     case 'navMenuToggle':
       return { ...state, navMenuToggle: action.payload };
     case 'surface':
-      return { ...state, surface: action.payload };
+      return {
+        ...state,
+        screens: {
+          ...state.screens,
+          [state.activeScreen]: {
+            ...state.screens[state.activeScreen],
+            surface: action.payload,
+            changedByEditor: false,
+          },
+        },
+      };
     case 'updatePayload':
       return {
         ...state,
@@ -56,6 +67,7 @@ const reducer = (state: initialStateType, action: actionType) => {
           ...state.screens,
           [id]: {
             id,
+            surface: SurfaceOptions.Message,
             name: action?.payload || 'default',
             payload: [],
             changedByEditor: true,
@@ -72,6 +84,7 @@ const reducer = (state: initialStateType, action: actionType) => {
         screens: {
           ...state.screens,
           [id]: {
+            ...state.screens[action.payload.id],
             id,
             name: action?.payload.name || 'default',
             payload: state.screens[action.payload.id].payload,
diff --git a/packages/uikit-playground/src/Payload/actionPreview/container.ts b/packages/uikit-playground/src/Payload/actionPreview/container.ts
index 22ecfca5a6b0..ddc6cf9708f1 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/container.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/container.ts
@@ -1,19 +1,23 @@
+import { SurfaceOptions } from '../../Components/Preview/Display/Surface/constant';
+
 type containerType = {
-  type: string;
-  text: string;
+  [key: number]: {
+    type: string,
+    text: string,
+  },
 };
-const container: containerType[] = [
-  {
+const container: containerType = {
+  [SurfaceOptions.Message]: {
     type: 'message',
     text: 'The contents of the original message where the action originated',
   },
-  {
+  [SurfaceOptions.Banner]: {
     type: 'banner',
     text: '',
   },
-  {
+  [SurfaceOptions.Modal]: {
     type: 'modal',
     text: '',
   },
-];
+};
 export default container;
diff --git a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
index 66456e91db36..65daf4829d59 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
@@ -1,12 +1,13 @@
 import { useContext } from 'react';
 
+import { SurfaceOptions } from '../../Components/Preview/Display/Surface/constant';
 import { context } from '../../Context';
 import type { actionPreviewType } from '../../Context/initialState';
 import container from './container';
 
 const generateActionPreview = (type: string, data: actionPreviewType) => {
   const {
-    state: { user, surface, screens, activeScreen },
+    state: { user, screens, activeScreen },
   } = useContext(context);
 
   const actionPreview: actionPreviewType = {
@@ -14,7 +15,8 @@ const generateActionPreview = (type: string, data: actionPreviewType) => {
     user,
     api_app_id: '',
     token: '',
-    container: container[surface - 1],
+    container:
+      container[screens[activeScreen].surface || SurfaceOptions.Message],
     trigger_id: '',
     team: null,
     enterprise: null,
diff --git a/packages/uikit-playground/src/utils/uiKitRenderer.ts b/packages/uikit-playground/src/utils/uiKitRenderer.ts
new file mode 100644
index 000000000000..e69de29bb2d1

From 8a2fff2759eb25d3899ac6271ca590c008abdf59 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 10 Jun 2023 17:48:38 +0530
Subject: [PATCH 08/50] chores(uikit-playground): revamp Reactflow and screen
 selector

---
 packages/uikit-playground/src/App.tsx         |  1 +
 .../CreateNewScreen/ScreenThumbnail.tsx       | 84 +++++++++---------
 .../ScreenThumbnailWrapper.tsx                | 23 ++++-
 .../FlowContainer/ConnectionLine.tsx          | 37 ++++++++
 .../FlowContainer/FlowContainer.tsx           | 86 +++++++++++++------
 .../Components/FlowContainer/UIKitWrapper.tsx | 48 ++++++++---
 .../src/Components/FlowContainer/utils.ts     | 34 ++++++++
 .../Display/RenderPayload/ElementWrapper.tsx  |  2 +-
 .../Preview/Display/Surface/ModalSurface.tsx  |  9 +-
 .../uikit-playground/src/Context/reducer.ts   |  1 +
 packages/uikit-playground/src/_global.css     | 55 ++++++++++++
 11 files changed, 291 insertions(+), 89 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/utils.ts
 create mode 100644 packages/uikit-playground/src/_global.css

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index b4264788ad7a..bd49d508c729 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import './App.css';
+import './_global.css';
 import './cssVariables.css';
 import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index f316a2d5b508..bee68e5dfa62 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -1,24 +1,16 @@
-import { css } from '@rocket.chat/css-in-js';
-import { Box, Button } from '@rocket.chat/fuselage';
-import type { ReactNode, ComponentProps } from 'react';
-import React, { useContext, useState } from 'react';
+import { Box, Menu } from '@rocket.chat/fuselage';
+import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
+import type { MouseEvent } from 'react';
+import React, { useContext } from 'react';
 
+import ScreenThumbnailWrapper from './ScreenThumbnailWrapper';
+import Thumbnail from './Thumbnail';
 import { context } from '../../Context';
 import { activeScreenAction } from '../../Context/action/activeScreenAction';
 import { deleteScreenAction } from '../../Context/action/deleteScreenAction';
 import { duplicateScreenAction } from '../../Context/action/duplicateScreenAction';
 import type { docType } from '../../Context/initialState';
 import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
-import ScreenThumbnailWrapper from './ScreenThumbnailWrapper';
-import Thumbnail from './Thumbnail';
-
-const IntractButton = ({
-  label,
-  ...props
-}: {
-  label: string,
-  icon?: ReactNode,
-} & ComponentProps<typeof Button>) => <Button {...props}>{label}</Button>;
 
 const ScreenThumbnail = ({
   screen,
@@ -28,46 +20,52 @@ const ScreenThumbnail = ({
   disableDelete: boolean,
 }) => {
   const { dispatch } = useContext(context);
-  const [isHover, setIsHover] = useState(false);
+  const toast = useToastBarDispatch();
 
-  const activateScreenHandler = () => {
+  const activateScreenHandler = (e: MouseEvent) => {
+    e.stopPropagation();
     dispatch(activeScreenAction(screen?.id));
   };
 
-  const duplicateScreenHandler = () => {
+  const duplicateScreenHandler = (e: MouseEvent) => {
+    e.stopPropagation();
     dispatch(duplicateScreenAction({ id: screen?.id }));
   };
 
-  const deleteScreenHandler = () => {
+  const deleteScreenHandler = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (disableDelete)
+      return toast({
+        type: 'info',
+        message: 'Cannot delete last screen.',
+      });
     dispatch(deleteScreenAction(screen?.id));
   };
   return (
-    <ScreenThumbnailWrapper
-      onMouseOver={() => setIsHover(true)}
-      onFocus={() => setIsHover(true)}
-      onMouseOut={() => setIsHover(false)}
-      onBlur={() => setIsHover(false)}
-    >
+    <ScreenThumbnailWrapper onClick={activateScreenHandler}>
       <Thumbnail of={renderPayload({ payload: screen.payload })} />
-      <Box
-        w="100%"
-        h="100%"
-        insetBlockStart={0}
-        display="flex"
-        position="absolute"
-        className={css`
-          flex-direction: column;
-          justify-content: space-evenly;
-          transition: var(--animation-default);
-        `}
-        opacity={isHover ? 1 : 0}
-      >
-        <IntractButton label={'Select'} onClick={activateScreenHandler} />
-        <IntractButton label={'Duplicate'} onClick={duplicateScreenHandler} />
-        <IntractButton
-          label={'Delete'}
-          onClick={deleteScreenHandler}
-          disabled={disableDelete}
+      <Box onClick={(e) => e.stopPropagation()}>
+        <Menu
+          tiny
+          position="absolute"
+          insetBlockStart="5px"
+          insetInlineEnd="5px"
+          zIndex={100}
+          placement="bottom-end"
+          icon="cog"
+          options={{
+            duplicate: {
+              label: <Box onClick={duplicateScreenHandler}>Duplicate</Box>,
+            },
+            delete: {
+              label: (
+                <Box onClick={deleteScreenHandler} color="danger">
+                  Delete
+                </Box>
+              ),
+              disabled: disableDelete,
+            },
+          }}
         />
       </Box>
     </ScreenThumbnailWrapper>
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
index 766ffe76f3c7..376b38268ea7 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
@@ -5,8 +5,10 @@ import React from 'react';
 
 const ScreenThumbnailWrapper = ({
   children,
+  onClick,
   ...props
 }: {
+  onClick?: ComponentProps<typeof Box>['onClick'],
   children: ReactNode,
 } & ComponentProps<typeof Box>) => (
   <Box
@@ -20,15 +22,28 @@ const ScreenThumbnailWrapper = ({
       place-items: center;
       cursor: pointer;
       overflow: hidden;
-      transition: var(--animation-default);
+      transition: var(--animation-fast);
       &:hover {
-        scale: 1.1;
-        transition: var(--animation-default);
+        scale: 1.02;
+        transition: var(--animation-fast);
         box-shadow: var(--elements-box-shadow);
+
+        .screenThumbnailBackdrop {
+          z-index: 10;
+          background: #cfcfcf45;
+          transition: var(--animation-fast);
+        }
       }
     `}
   >
-    <Box w="100px" h="150px" position="relative" {...props}>
+    <Box
+      w="120px"
+      h="170px"
+      position="absolute"
+      className="screenThumbnailBackdrop"
+      onClick={onClick}
+    />
+    <Box w="100px" h="150px" position="relative" onClick={onClick} {...props}>
       {children}
     </Box>
   </Box>
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
new file mode 100644
index 000000000000..fdb6c2582a52
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+const ConnectionLine = ({
+  fromX,
+  fromY,
+  toX,
+  toY,
+}: {
+  fromX: number,
+  fromY: number,
+  fromPosition: string,
+  toX: number,
+  toY: number,
+  toPosition: string,
+  connectionLineType: string,
+  connectionLineStyle?: any,
+}) => (
+  <g>
+    <path
+      fill="none"
+      stroke="#222"
+      strokeWidth={1.5}
+      className="animated"
+      d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
+    />
+    <circle
+      cx={toX}
+      cy={toY}
+      fill="#fff"
+      r={2}
+      stroke="#222"
+      strokeWidth={1.5}
+    />
+  </g>
+);
+
+export default ConnectionLine;
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index d33055ed83c7..7abed4d92296 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useRef } from 'react';
 import ReactFlow, {
   MiniMap,
   Controls,
@@ -6,11 +6,14 @@ import ReactFlow, {
   useNodesState,
   useEdgesState,
   addEdge,
+  updateEdge,
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
 import { context } from '../../Context';
+import ConnectionLine from './ConnectionLine';
 import UIKitWrapper from './UIKitWrapper';
+import { FlowParams, createNodesAndEdges } from './utils';
 
 const nodeTypes = {
   custom: UIKitWrapper,
@@ -21,39 +24,66 @@ const FlowContainer = () => {
     state: { screens },
   } = useContext(context);
 
-  //   const initialNodes = [
-  //     { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
-  //     { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
-  //   ];
-  const initialNodes = Object.values(screens).map((screen) => ({
-    id: screen.id,
-    type: 'custom',
-    position: { x: 0, y: 0 },
-    data: screen,
-  }));
-
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const { nodes: initialNodes } = createNodesAndEdges(screens);
+
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const edgeUpdateSuccessful = useRef(true);
 
   const onConnect = useCallback(
-    (params) => setEdges((eds) => addEdge(params, eds)),
+    (params) => {
+      if (params.source === params.target) return;
+      setEdges((eds) =>
+        addEdge(
+          {
+            ...params,
+            type: FlowParams.edgeType,
+            markerEnd: FlowParams.markerEnd,
+            style: FlowParams.style,
+          },
+          eds
+        )
+      );
+    },
     [setEdges]
   );
+
+  const onEdgeUpdateStart = useCallback(() => {
+    edgeUpdateSuccessful.current = false;
+  }, []);
+
+  const onEdgeUpdate = useCallback((oldEdge, newConnection) => {
+    edgeUpdateSuccessful.current = true;
+    setEdges((els) => updateEdge(oldEdge, newConnection, els));
+  }, []);
+
+  const onEdgeUpdateEnd = useCallback((_, edge) => {
+    if (!edgeUpdateSuccessful.current) {
+      setEdges((eds) => eds.filter((e) => e.id !== edge.id));
+    }
+    edgeUpdateSuccessful.current = true;
+  }, []);
+
   return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
-      fitView
-      attributionPosition="top-right"
-      nodeTypes={nodeTypes}
-    >
-      <MiniMap zoomable pannable />
-      <Controls />
-      <Background color="#aaa" gap={16} />
-    </ReactFlow>
+    <>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onEdgeUpdate={onEdgeUpdate}
+        onEdgeUpdateStart={onEdgeUpdateStart}
+        onEdgeUpdateEnd={onEdgeUpdateEnd}
+        onConnect={onConnect}
+        fitView
+        nodeTypes={nodeTypes}
+        connectionLineComponent={ConnectionLine}
+      >
+        <MiniMap zoomable pannable />
+        <Controls />
+        <Background color="#aaa" gap={16} />
+      </ReactFlow>
+    </>
   );
 };
 
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
index b25cfb66d1d6..00ed32671c6b 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
@@ -1,19 +1,43 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
 
 import type { docType } from '../../Context/initialState';
 import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
 import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
 
-const UIKitWrapper = ({ id, data }: { id: string, data: docType }) => {
-  console.log(data, id);
-  return (
-    <Box>
-      <SurfaceRender type={data.surface}>
-        <RenderPayload payload={data.payload} surface={data.surface} />
-      </SurfaceRender>
-    </Box>
-  );
-};
+const UIKitWrapper = ({ id, data }: { id: string, data: docType }) => (
+  <Box
+    padding="10px"
+    border="var(--default-border)"
+    bg="white"
+    borderRadius={'10px'}
+  >
+    <Handle
+      type="target"
+      className={'react-flow-targetHandle'}
+      position={Position.Left}
+      id={`${id}`}
+    />
+    <SurfaceRender type={data.surface}>
+      {data.payload.map((payload, index) => (
+        <Box
+          position="relative"
+          border="var(--default-border)"
+          padding="10px"
+          className="uiKitWrapper"
+        >
+          <RenderPayload payload={[payload]} surface={data.surface} />
+          <Handle
+            type="source"
+            className="react-flow-sourceHandle"
+            position={Position.Right}
+            id={`${id}-${index}`}
+          />
+        </Box>
+      ))}
+    </SurfaceRender>
+  </Box>
+);
 
-export default UIKitWrapper;
+export default memo(UIKitWrapper);
diff --git a/packages/uikit-playground/src/Components/FlowContainer/utils.ts b/packages/uikit-playground/src/Components/FlowContainer/utils.ts
new file mode 100644
index 000000000000..a09148ac4989
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/utils.ts
@@ -0,0 +1,34 @@
+import { MarkerType } from 'reactflow';
+
+import type { ScreensType } from '../../Context/initialState';
+
+export function createNodesAndEdges(screens: ScreensType) {
+  const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+
+  const nodes = Object.values(screens).map((screen, i) => {
+    const degrees = i * (360 / 8);
+    const radians = degrees * (Math.PI / 180);
+    const x = 250 * Math.cos(radians) + center.x;
+    const y = 250 * Math.sin(radians) + center.y;
+
+    return {
+      id: screen.id,
+      type: 'custom',
+      position: { x, y },
+      data: screen,
+    };
+  });
+
+  return { nodes };
+}
+
+export const FlowParams = {
+  edgeType: 'smoothstep',
+  markerEnd: {
+    type: MarkerType.Arrow,
+  },
+  style: {
+    strokeWidth: 2,
+    stroke: 'var(--RCPG-primary-color)',
+  },
+};
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
index 2842850cc3f8..132901fdaf46 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
@@ -16,7 +16,7 @@ const ElementWrapper = ({
       height: fit-content;
       align-items: center;
       transition: var(--animation-fast);
-      padding: 0 8px;
+      padding: 0px 8px;
 
       &:hover {
         border-radius: 4px;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
index 4185db41db17..54502649520a 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
@@ -1,3 +1,4 @@
+import { css } from '@rocket.chat/css-in-js';
 import {
   Modal,
   ModalHeader,
@@ -19,7 +20,13 @@ const ModalSurface = ({ children }: { children: ReactNode }) => (
       <ModalTitle>Modal Header</ModalTitle>
       <ModalClose />
     </ModalHeader>
-    <ModalContent>{children}</ModalContent>
+    <ModalContent
+      className={css`
+        overflow: visible;
+      `}
+    >
+      {children}
+    </ModalContent>
     <ModalFooter>
       <ButtonGroup align="end">
         <Button>Cancel</Button>
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index d69dd92de516..05826f4b91a6 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -91,6 +91,7 @@ const reducer = (state: initialStateType, action: actionType) => {
             changedByEditor: true,
           },
         },
+        openCreateNewScreen: false,
         activeScreen: id,
       };
     }
diff --git a/packages/uikit-playground/src/_global.css b/packages/uikit-playground/src/_global.css
new file mode 100644
index 000000000000..2d1df8cfd6bb
--- /dev/null
+++ b/packages/uikit-playground/src/_global.css
@@ -0,0 +1,55 @@
+.react-flow__edges{
+    z-index: 1000 !important;
+}
+
+.react-flow__nodes{
+    z-index: 1 !important;
+}
+
+.react-flow-targetHandle{
+    width: 8px !important; height: 12px !important;
+    border-radius: 2px !important;
+    background: rgb(125, 161, 185) !important;
+}
+
+.react-flow-sourceHandle{
+    
+}
+
+/* .react-flow-sourceHandle{
+    width: 8px !important; height: 12px !important;
+    border-radius: 2px !important;
+    background: rgb(125, 161, 185) !important;
+} */
+
+/* .react-flow-sourceHandle-message-left{
+    left: -82px !important;
+}
+
+.react-flow-sourceHandle-message-right{
+    right: -38px !important;
+}
+
+.react-flow-sourceHandle-banner-left{
+    left: -60px !important;
+}
+
+.react-flow-sourceHandle-banner-right{
+    right: -30px !important;
+}
+
+.react-flow-sourceHandle-modal-left{
+    left: -38px !important;
+}
+
+.react-flow-sourceHandle-modal-right{
+    right: -38px !important;
+} */
+
+.rcx-modal:has(.uiKitWrapper){
+    padding: 0px !important
+}
+
+.rcx-modal__content:has(.uiKitWrapper){
+    overflow: visible !important
+}
\ No newline at end of file

From e4fd1a4ce3be5a509e817b0775a1d557b94ea397 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Mon, 12 Jun 2023 02:53:49 +0530
Subject: [PATCH 09/50] refactor(uikit-playground): Fix Types in context

---
 packages/uikit-playground/src/App.tsx         |  14 +-
 .../src/Context/action/actionPreviewAction.ts |   9 +-
 .../src/Context/action/activeScreenAction.ts  |  10 +-
 .../Context/action/createNewScreenAction.ts   |  10 +-
 .../src/Context/action/deleteScreenAction.ts  |  10 +-
 .../Context/action/duplicateScreenAction.ts   |  10 +-
 .../Context/action/editorTabsToggleAction.ts  |  10 +-
 .../src/Context/action/index.ts               |  17 ++
 .../src/Context/action/isMobileAction.ts      |  10 +-
 .../src/Context/action/isTabletAction.ts      |  10 +-
 .../src/Context/action/navMenuToggleAction.ts |  10 +-
 .../action/openCreateNewScreenAction.ts       |  10 +-
 .../Context/action/previewTabsToggleAction.ts |  10 +-
 .../src/Context/action/sidebarToggleAction.ts |  10 +-
 .../src/Context/action/surfaceAction.ts       |  10 +-
 .../src/Context/action/tabsToggleAction.ts    |  10 +-
 .../Context/action/templatesToggleAction.ts   |  10 +-
 .../src/Context/action/updatePayloadAction.ts |  18 +-
 .../src/Context/action/userAction.ts          |   9 +-
 .../uikit-playground/src/Context/reducer.ts   | 255 +++++++++++-------
 20 files changed, 278 insertions(+), 184 deletions(-)

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index bd49d508c729..77a6c84e00ca 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -17,19 +17,8 @@ function App() {
   return (
     <ToastBarProvider>
       <BrowserRouter>
-        {/* <Routes>
-          <Route path={`/${routes.home}`} element={<Playground />} />
-          <Route
-            path={`/${routes.login}`}
-            element={<SignInToWorkspace route={routes.login} />}
-          />
-          <Route
-            path={`/${routes.signup}`}
-            element={<SignInToWorkspace route={routes.signup} />}
-          />
-          <Route path="*" element={<Playground />} />
-        </Routes> */}
         <Routes>
+        <Route path={`/`} element={<Playground />} />
           <Route element={<HomeLayout />}>
             <Route
               path={`/${routes.login}`}
@@ -40,7 +29,6 @@ function App() {
               element={<SignInToWorkspace route={routes.signup} />}
             />
             <Route path={`/${routes.flow}`} element={<FlowDiagram />} />
-            <Route path={`*`} element={<Playground />} />
           </Route>
           <Route element={<ProtectedLayout />}>
             <Route path={`/${routes.home}`} element={<Playground />} />
diff --git a/packages/uikit-playground/src/Context/action/actionPreviewAction.ts b/packages/uikit-playground/src/Context/action/actionPreviewAction.ts
index fbcc1995c324..fabdd706594e 100644
--- a/packages/uikit-playground/src/Context/action/actionPreviewAction.ts
+++ b/packages/uikit-playground/src/Context/action/actionPreviewAction.ts
@@ -1,11 +1,12 @@
 import type { actionPreviewType } from '../initialState';
+import { ActionTypes } from '../reducer';
 
-type action = {
-  type: string,
+export type ActionPreviewAction = {
+  type: ActionTypes.ActionPreview,
   payload: actionPreviewType,
 };
 
-export const actionPreviewAction = (payload: actionPreviewType): action => ({
-  type: 'actionPreview',
+export const actionPreviewAction = (payload: actionPreviewType): ActionPreviewAction => ({
+  type: ActionTypes.ActionPreview,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/activeScreenAction.ts b/packages/uikit-playground/src/Context/action/activeScreenAction.ts
index d3fe5a2fac8e..8e578a2a707e 100644
--- a/packages/uikit-playground/src/Context/action/activeScreenAction.ts
+++ b/packages/uikit-playground/src/Context/action/activeScreenAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type ActiveScreenAction = {
+  type: ActionTypes.ActiveScreen,
   payload: string,
 };
 
-export const activeScreenAction = (payload: string): action => ({
-  type: 'activeScreen',
+export const activeScreenAction = (payload: string): ActiveScreenAction => ({
+  type: ActionTypes.ActiveScreen,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/createNewScreenAction.ts b/packages/uikit-playground/src/Context/action/createNewScreenAction.ts
index 08c9820d196c..bf54e3fb8153 100644
--- a/packages/uikit-playground/src/Context/action/createNewScreenAction.ts
+++ b/packages/uikit-playground/src/Context/action/createNewScreenAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type CreateNewScreenAction = {
+  type: ActionTypes.CreateNewScreen,
   payload?: string,
 };
 
-export const createNewScreenAction = (payload?: string): action => ({
-  type: 'createNewScreen',
+export const createNewScreenAction = (payload?: string): CreateNewScreenAction => ({
+  type: ActionTypes.CreateNewScreen,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/deleteScreenAction.ts b/packages/uikit-playground/src/Context/action/deleteScreenAction.ts
index 9a5e67a251b2..a33c076a3d80 100644
--- a/packages/uikit-playground/src/Context/action/deleteScreenAction.ts
+++ b/packages/uikit-playground/src/Context/action/deleteScreenAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type DeleteScreenAction = {
+  type: ActionTypes.DeleteScreen,
   payload: string,
 };
 
-export const deleteScreenAction = (payload: string): action => ({
-  type: 'deleteScreen',
+export const deleteScreenAction = (payload: string): DeleteScreenAction => ({
+  type: ActionTypes.DeleteScreen,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts b/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
index ed298c800111..cdfe976b8487 100644
--- a/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
+++ b/packages/uikit-playground/src/Context/action/duplicateScreenAction.ts
@@ -1,12 +1,14 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type DuplicateScreenAction = {
+  type: ActionTypes.DuplicateScreen,
   payload: { id: string, name?: string },
 };
 
 export const duplicateScreenAction = (payload: {
   id: string,
   name?: string,
-}): action => ({
-  type: 'duplicateScreen',
+}): DuplicateScreenAction => ({
+  type: ActionTypes.DuplicateScreen,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts b/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
index e1f658a5b210..df5d5d27bb0d 100644
--- a/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/editorTabsToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type EditorTabsToggleAction = {
+  type: ActionTypes.EditorToggle,
   payload: number,
 };
 
-export const editorTabsToggleAction = (payload: number): action => ({
-  type: 'editorToggle',
+export const editorTabsToggleAction = (payload: number): EditorTabsToggleAction => ({
+  type: ActionTypes.EditorToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index 8833802ff469..bcd837c9409e 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -14,3 +14,20 @@ export { createNewScreenAction } from './createNewScreenAction';
 export { activeScreenAction } from './activeScreenAction';
 export { duplicateScreenAction } from './duplicateScreenAction';
 export { deleteScreenAction } from './deleteScreenAction';
+
+export type { IsMobileAction } from './isMobileAction';
+export type { IsTabletAction } from './isTabletAction';
+export type { SidebarToggleAction } from './sidebarToggleAction';
+export type { EditorTabsToggleAction } from './editorTabsToggleAction';
+export type { PreviewTabsToggleAction } from './previewTabsToggleAction';
+export type { NavMenuToggleAction } from './navMenuToggleAction';
+export type { UpdatePayloadAction } from './updatePayloadAction';
+export type { SurfaceAction } from './surfaceAction';
+export type { ActionPreviewAction } from './actionPreviewAction';
+export type { UserAction } from './userAction';
+export type { TemplatesToggleAction } from './templatesToggleAction';
+export type { OpenCreateNewScreenAction } from './openCreateNewScreenAction';
+export type { CreateNewScreenAction } from './createNewScreenAction';
+export type { ActiveScreenAction } from './activeScreenAction';
+export type { DuplicateScreenAction } from './duplicateScreenAction';
+export type { DeleteScreenAction } from './deleteScreenAction';
diff --git a/packages/uikit-playground/src/Context/action/isMobileAction.ts b/packages/uikit-playground/src/Context/action/isMobileAction.ts
index 434a8f567aa9..2985481ccde7 100644
--- a/packages/uikit-playground/src/Context/action/isMobileAction.ts
+++ b/packages/uikit-playground/src/Context/action/isMobileAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type IsMobileAction = {
+  type: ActionTypes.IsMobile,
   payload: boolean,
 };
 
-export const isMobileAction = (payload: boolean): action => ({
-  type: 'isMobile',
+export const isMobileAction = (payload: boolean): IsMobileAction => ({
+  type: ActionTypes.IsMobile,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/isTabletAction.ts b/packages/uikit-playground/src/Context/action/isTabletAction.ts
index 068d8df07e00..9c3d0f4f1218 100644
--- a/packages/uikit-playground/src/Context/action/isTabletAction.ts
+++ b/packages/uikit-playground/src/Context/action/isTabletAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type IsTabletAction = {
+  type: ActionTypes.IsTablet,
   payload: boolean,
 };
 
-export const isTabletAction = (payload: boolean): action => ({
-  type: 'isTablet',
+export const isTabletAction = (payload: boolean): IsTabletAction => ({
+  type: ActionTypes.IsTablet,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts b/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
index 1a2fef9d2147..66ebbce2af9f 100644
--- a/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/navMenuToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type NavMenuToggleAction = {
+  type: ActionTypes.NavMenuToggle,
   payload: boolean,
 };
 
-export const navMenuToggleAction = (payload: boolean): action => ({
-  type: 'navMenuToggle',
+export const navMenuToggleAction = (payload: boolean): NavMenuToggleAction => ({
+  type: ActionTypes.NavMenuToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts b/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
index d050d47fa3bc..e67c49f8ec52 100644
--- a/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
+++ b/packages/uikit-playground/src/Context/action/openCreateNewScreenAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type OpenCreateNewScreenAction = {
+  type: ActionTypes.OpenCreateNewScreen,
   payload: boolean,
 };
 
-export const openCreateNewScreenAction = (payload: boolean): action => ({
-  type: 'openCreateNewScreen',
+export const openCreateNewScreenAction = (payload: boolean): OpenCreateNewScreenAction => ({
+  type: ActionTypes.OpenCreateNewScreen,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts b/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
index c108d492d2da..cdae84f1caca 100644
--- a/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/previewTabsToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type PreviewTabsToggleAction = {
+  type: ActionTypes.PreviewToggle,
   payload: number,
 };
 
-export const previewTabsToggleAction = (payload: number): action => ({
-  type: 'previewToggle',
+export const previewTabsToggleAction = (payload: number): PreviewTabsToggleAction => ({
+  type: ActionTypes.PreviewToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts b/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
index 3b43c7e2dea5..57148bb61507 100644
--- a/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/sidebarToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type SidebarToggleAction = {
+  type: ActionTypes.SidebarToggle,
   payload: boolean,
 };
 
-export const sidebarToggleAction = (payload: boolean): action => ({
-  type: 'sidebarToggle',
+export const sidebarToggleAction = (payload: boolean): SidebarToggleAction => ({
+  type: ActionTypes.SidebarToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/surfaceAction.ts b/packages/uikit-playground/src/Context/action/surfaceAction.ts
index 74f8c665e324..594d4a9acb07 100644
--- a/packages/uikit-playground/src/Context/action/surfaceAction.ts
+++ b/packages/uikit-playground/src/Context/action/surfaceAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type SurfaceAction = {
+  type: ActionTypes.Surface,
   payload: number,
 };
 
-export const surfaceAction = (payload: number): action => ({
-  type: 'surface',
+export const surfaceAction = (payload: number): SurfaceAction => ({
+  type: ActionTypes.Surface,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/tabsToggleAction.ts b/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
index 38a17c2f73bc..fafe9f6eb76b 100644
--- a/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/tabsToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type TabsToggleAction = {
+  type: ActionTypes.EditorToggle,
   payload: number,
 };
 
-export const tabsToggleAction = (payload: number): action => ({
-  type: 'editorToggle',
+export const tabsToggleAction = (payload: number): TabsToggleAction => ({
+  type: ActionTypes.EditorToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/templatesToggleAction.ts b/packages/uikit-playground/src/Context/action/templatesToggleAction.ts
index a3dd86b7989a..79918048de82 100644
--- a/packages/uikit-playground/src/Context/action/templatesToggleAction.ts
+++ b/packages/uikit-playground/src/Context/action/templatesToggleAction.ts
@@ -1,9 +1,11 @@
-type action = {
-  type: string,
+import { ActionTypes } from "../reducer";
+
+export type TemplatesToggleAction = {
+  type: ActionTypes.TemplatesToggle,
   payload: boolean,
 };
 
-export const templatesToggleAction = (payload: boolean): action => ({
-  type: 'templatesToggle',
+export const templatesToggleAction = (payload: boolean): TemplatesToggleAction => ({
+  type: ActionTypes.TemplatesToggle,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
index 80646957b7eb..3ad445aa10d9 100644
--- a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
+++ b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
@@ -1,11 +1,17 @@
-import type { docType } from '../initialState';
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { ActionTypes } from '../reducer';
 
-type action = {
-  type: string,
-  payload: Partial<docType>,
+type PayloadType ={
+  payload: readonly LayoutBlock[];
+  changedByEditor?: boolean;
+}
+
+export type UpdatePayloadAction = {
+  type: ActionTypes.UpdatePayload,
+  payload:PayloadType,
 };
 
-export const updatePayloadAction = (payload: Partial<docType>): action => ({
-  type: 'updatePayload',
+export const updatePayloadAction = (payload: PayloadType): UpdatePayloadAction => ({
+  type: ActionTypes.UpdatePayload,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/action/userAction.ts b/packages/uikit-playground/src/Context/action/userAction.ts
index ab1d0ea512cd..7e47389d21c1 100644
--- a/packages/uikit-playground/src/Context/action/userAction.ts
+++ b/packages/uikit-playground/src/Context/action/userAction.ts
@@ -1,11 +1,12 @@
 import type { userType } from '../initialState';
+import { ActionTypes } from '../reducer';
 
-type action = {
-  type: string,
+export type UserAction = {
+  type: ActionTypes.User,
   payload: userType,
 };
 
-export const userAction = (payload: userType): action => ({
-  type: 'user',
+export const userAction = (payload: userType): UserAction => ({
+  type: ActionTypes.User,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 05826f4b91a6..07c5d8374360 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -3,116 +3,169 @@ import _ from 'lodash';
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 import type { initialStateType } from './initialState';
+import {
+  IsMobileAction,
+  IsTabletAction,
+  SidebarToggleAction,
+  PreviewTabsToggleAction,
+  TemplatesToggleAction,
+  NavMenuToggleAction,
+  SurfaceAction,
+  UpdatePayloadAction,
+  ActionPreviewAction,
+  UserAction,
+  OpenCreateNewScreenAction,
+  ActiveScreenAction,
+  CreateNewScreenAction,
+  DuplicateScreenAction,
+  DeleteScreenAction,
+  EditorTabsToggleAction,
+} from './action';
 
-type actionType = { type: string, payload?: any };
+  type IAction = 
+  | IsMobileAction 
+  | IsTabletAction 
+  | SidebarToggleAction 
+  | PreviewTabsToggleAction 
+  | EditorTabsToggleAction
+  | TemplatesToggleAction 
+  | NavMenuToggleAction 
+  | SurfaceAction 
+  | UpdatePayloadAction 
+  | ActionPreviewAction 
+  | UserAction 
+  | OpenCreateNewScreenAction 
+  | ActiveScreenAction 
+  | CreateNewScreenAction 
+  | DuplicateScreenAction 
+  | DeleteScreenAction;
 
-const reducer = (state: initialStateType, action: actionType) => {
-  switch (action.type) {
-    case 'isMobile':
-      return { ...state, isMobile: action.payload };
-    case 'isTablet':
-      return { ...state, isTablet: action.payload };
-    case 'sidebarToggle':
-      return { ...state, sideBarToggle: action.payload };
-    case 'previewToggle':
-      return { ...state, previewTabsToggle: action.payload };
-    case 'editorToggle':
-      return { ...state, editorTabsToggle: action.payload };
-    case 'templatesToggle':
-      return { ...state, templatesToggle: action.payload };
-    case 'navMenuToggle':
-      return { ...state, navMenuToggle: action.payload };
-    case 'surface':
-      return {
-        ...state,
-        screens: {
-          ...state.screens,
-          [state.activeScreen]: {
-            ...state.screens[state.activeScreen],
-            surface: action.payload,
-            changedByEditor: false,
+  export enum ActionTypes {
+    IsMobile,
+    IsTablet,
+    SidebarToggle,
+    PreviewToggle,
+    EditorToggle,
+    TemplatesToggle,
+    NavMenuToggle,
+    Surface,
+    UpdatePayload,
+    ActionPreview,
+    User,
+    OpenCreateNewScreen,
+    ActiveScreen,
+    CreateNewScreen,
+    DuplicateScreen,
+    DeleteScreen,
+  }
+  
+  const reducer = (state: initialStateType, action: IAction) => {
+    switch (action.type) {
+      case ActionTypes.IsMobile:
+        return { ...state, isMobile: action.payload };
+      case ActionTypes.IsTablet:
+        return { ...state, isTablet: action.payload };
+      case ActionTypes.SidebarToggle:
+        return { ...state, sidebarToggle: action.payload };
+      case ActionTypes.PreviewToggle:
+        return { ...state, previewTabsToggle: action.payload };
+      case ActionTypes.EditorToggle:
+        return { ...state, editorTabsToggle: action.payload };
+      case ActionTypes.TemplatesToggle:
+        return { ...state, templatesToggle: action.payload };
+      case ActionTypes.NavMenuToggle:
+        return { ...state, navMenuToggle: action.payload };
+      case ActionTypes.Surface:
+        return {
+          ...state,
+          screens: {
+            ...state.screens,
+            [state.activeScreen]: {
+              ...state.screens[state.activeScreen],
+              surface: action.payload,
+              changedByEditor: false,
+            },
           },
-        },
-      };
-    case 'updatePayload':
-      return {
-        ...state,
-        screens: {
-          ...state.screens,
-          [state.activeScreen]: {
-            ...state.screens[state.activeScreen],
-            payload: action.payload.payload,
-            changedByEditor: action.payload.changedByEditor === undefined,
+        };
+      case ActionTypes.UpdatePayload:
+        return {
+          ...state,
+          screens: {
+            ...state.screens,
+            [state.activeScreen]: {
+              ...state.screens[state.activeScreen],
+              payload: action?.payload?.payload,
+              changedByEditor: action?.payload?.changedByEditor === undefined,
+            },
           },
-        },
-      };
-    case 'actionPreview':
-      return { ...state, actionPreview: action.payload };
-    case 'user':
-      return { ...state, user: action.payload };
-    case 'openCreateNewScreen':
-      return { ...state, openCreateNewScreen: action.payload };
-    case 'activeScreen':
-      return {
-        ...state,
-        screens: _.cloneDeep(state.screens),
-        openCreateNewScreen: false,
-        activeScreen: action.payload,
-      };
-    case 'createNewScreen': {
-      const id = getUniqueId();
-      return {
-        ...state,
-        screens: {
-          ...state.screens,
-          [id]: {
-            id,
-            surface: SurfaceOptions.Message,
-            name: action?.payload || 'default',
-            payload: [],
-            changedByEditor: true,
+        };
+      case ActionTypes.ActionPreview:
+        return { ...state, actionPreview: action.payload };
+      case ActionTypes.User:
+        return { ...state, user: action.payload };
+      case ActionTypes.OpenCreateNewScreen:
+        return { ...state, openCreateNewScreen: action.payload };
+      case ActionTypes.ActiveScreen:
+        return {
+          ...state,
+          screens: _.cloneDeep(state.screens),
+          openCreateNewScreen: false,
+          activeScreen: action.payload,
+        };
+      case ActionTypes.CreateNewScreen: {
+        const id = getUniqueId();
+        return {
+          ...state,
+          screens: {
+            ...state.screens,
+            [id]: {
+              id,
+              surface: SurfaceOptions.Message,
+              name: action?.payload || 'default',
+              payload: [],
+              changedByEditor: true,
+            },
           },
-        },
-        openCreateNewScreen: false,
-        activeScreen: id,
-      };
-    }
-    case 'duplicateScreen': {
-      const id = getUniqueId();
-      return {
-        ...state,
-        screens: {
-          ...state.screens,
-          [id]: {
-            ...state.screens[action.payload.id],
-            id,
-            name: action?.payload.name || 'default',
-            payload: state.screens[action.payload.id].payload,
-            changedByEditor: true,
+          openCreateNewScreen: false,
+          activeScreen: id,
+        };
+      }
+      case ActionTypes.DuplicateScreen: {
+        const id = getUniqueId();
+        return {
+          ...state,
+          screens: {
+            ...state.screens,
+            [id]: {
+              ...state.screens[action.payload.id],
+              id,
+              name: action?.payload.name || 'default',
+              payload: state.screens[action?.payload?.id].payload,
+              changedByEditor: true,
+            },
           },
-        },
-        openCreateNewScreen: false,
-        activeScreen: id,
-      };
-    }
-    case 'deleteScreen': {
-      const screens = _.cloneDeep(state.screens);
-      delete screens[action.payload];
-      if (state.activeScreen === action.payload) {
+          openCreateNewScreen: false,
+          activeScreen: id,
+        };
+      }
+      case ActionTypes.DeleteScreen: {
+        const screens = _.cloneDeep(state.screens);
+        delete screens[action?.payload];
+        if (state.activeScreen === action.payload) {
+          return {
+            ...state,
+            screens,
+            activeScreen: Object.keys(screens)[0],
+          };
+        }
         return {
           ...state,
           screens,
-          activeScreen: Object.keys(screens)[0],
         };
       }
-      return {
-        ...state,
-        screens,
-      };
+      default:
+        return state;
     }
-    default:
-      return state;
-  }
-};
-
-export default reducer;
+  };
+  
+  export default reducer;

From acd21b3a857d9a9c39cb4a5ecdf1e8b766106849 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Wed, 14 Jun 2023 01:05:05 +0530
Subject: [PATCH 10/50] fix(uikit-playground): Added Prettier

---
 package.json                          | 1 +
 packages/uikit-playground/.prettierrc | 5 +++++
 yarn.lock                             | 8 ++++++++
 3 files changed, 14 insertions(+)
 create mode 100644 packages/uikit-playground/.prettierrc

diff --git a/package.json b/package.json
index 80c5d3bf1e25..16bb729554d9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@changesets/cli": "^2.26.1",
 		"@types/chart.js": "^2.9.37",
 		"@types/js-yaml": "^4.0.5",
+		"@types/prettier": "^2",
 		"husky": "^7.0.4",
 		"turbo": "latest"
 	},
diff --git a/packages/uikit-playground/.prettierrc b/packages/uikit-playground/.prettierrc
new file mode 100644
index 000000000000..e97ea1bfabba
--- /dev/null
+++ b/packages/uikit-playground/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true
+}
diff --git a/yarn.lock b/yarn.lock
index 4f60ccfa7ce6..642ce97a90e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12165,6 +12165,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prettier@npm:^2":
+  version: 2.7.3
+  resolution: "@types/prettier@npm:2.7.3"
+  checksum: 705384209cea6d1433ff6c187c80dcc0b95d99d5c5ce21a46a9a58060c527973506822e428789d842761e0280d25e3359300f017fbe77b9755bc772ab3dc2f83
+  languageName: node
+  linkType: hard
+
 "@types/prettier@npm:^2.1.5, @types/prettier@npm:^2.6.3":
   version: 2.6.3
   resolution: "@types/prettier@npm:2.6.3"
@@ -33567,6 +33574,7 @@ __metadata:
     "@changesets/cli": ^2.26.1
     "@types/chart.js": ^2.9.37
     "@types/js-yaml": ^4.0.5
+    "@types/prettier": ^2
     husky: ^7.0.4
     turbo: latest
   languageName: unknown

From 73b405c5bfdd1b8cf489facf83058ada5de48e5e Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 18 Jun 2023 22:00:21 +0530
Subject: [PATCH 11/50] feat(uikit-playground): Added context for "projects"

---
 .../src/Components/CodeEditor/BlockEditor.tsx |  16 +-
 .../Components/CodeEditor/PreviewEditor.tsx   |  15 +-
 .../CreateNewScreenContainer.tsx              |  23 +-
 .../Components/Draggable/DraggableList.tsx    |  15 +-
 .../src/Components/DropDown/Items.tsx         |  97 +++---
 .../Preview/Display/Surface/Surface.tsx       | 144 +++++----
 .../Preview/Display/Surface/SurfaceRender.tsx |   6 +-
 .../SurfaceSelect/SurfaceSelect.tsx           |   4 +-
 .../src/Context/initialState.ts               |  55 ++--
 .../uikit-playground/src/Context/reducer.ts   | 277 +++++++++---------
 .../actionPreview/generateActionPreview.ts    |  32 +-
 11 files changed, 377 insertions(+), 307 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index f5f5dff40784..25c5d716a0fa 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -9,7 +9,7 @@ import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 
 type CodeMirrorProps = {
-  extensions?: Extension[],
+  extensions?: Extension[];
 };
 
 const BlockEditor = ({ extensions }: CodeMirrorProps) => {
@@ -17,9 +17,10 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
     state: { screens, activeScreen },
     dispatch,
   } = useContext(context);
+
   const { editor, changes, setValue } = useCodeMirror(
     extensions,
-    JSON.stringify(screens[activeScreen].payload, undefined, 4)
+    JSON.stringify(screens[activeScreen]?.payload, undefined, 4)
   );
   const debounceValue = useDebouncedValue(changes?.value, 1500);
 
@@ -48,13 +49,16 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
   }, [debounceValue]);
 
   useEffect(() => {
-    if (!screens[activeScreen].changedByEditor) {
-      setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
+    if (!screens[activeScreen]?.changedByEditor) {
+      setValue(
+        JSON.stringify(screens[activeScreen]?.payload, undefined, 4),
+        {}
+      );
     }
-  }, [screens[activeScreen].payload]);
+  }, [screens[activeScreen]?.payload]);
 
   useEffect(() => {
-    setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
+    setValue(JSON.stringify(screens[activeScreen]?.payload, undefined, 4), {});
   }, [activeScreen]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
index 055a17aae465..9584193f0f81 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
@@ -6,20 +6,25 @@ import { context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 
 type CodeMirrorProps = {
-  extensions?: Extension[],
+  extensions?: Extension[];
 };
 
 const PreviewEditor = ({ extensions }: CodeMirrorProps) => {
-  const { state } = useContext(context);
+  const {
+    state: { screens, activeScreen },
+  } = useContext(context);
   const { editor, setValue } = useCodeMirror(extensions, `{}`);
 
   useEffect(() => {
-    setValue(JSON.stringify(state.actionPreview, undefined, 4), {});
-  }, [state.actionPreview]);
+    setValue(
+      JSON.stringify(screens[activeScreen]?.actionPreview, undefined, 4),
+      {}
+    );
+  }, [screens[activeScreen]?.actionPreview]);
 
   return (
     <>
-      <Box display='grid' height='100%' width={'100%'} ref={editor} />
+      <Box display="grid" height="100%" width={'100%'} ref={editor} />
     </>
   );
 };
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
index 62ebc2054130..7dd6e1ab334c 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Icon, Scrollable } from '@rocket.chat/fuselage';
 import { useOutsideClick, useMergedRefs } from '@rocket.chat/fuselage-hooks';
-import React, { useContext, useRef } from 'react';
+import { useContext, useRef } from 'react';
 
 import { context } from '../../Context';
 import {
@@ -13,7 +13,7 @@ import ScreenThumbnail from './ScreenThumbnail';
 
 const CreateNewScreenContainer = () => {
   const {
-    state: { screens, openCreateNewScreen },
+    state: { projects, screens, activeProject, openCreateNewScreen },
     dispatch,
   } = useContext(context);
   const ref = useRef(null);
@@ -56,13 +56,18 @@ const CreateNewScreenContainer = () => {
             align-items: center;
           `}
         >
-          {Object.values(screens).map((screen, i) => (
-            <ScreenThumbnail
-              screen={screen}
-              key={i}
-              disableDelete={Object.keys(screens).length <= 1}
-            />
-          ))}
+          {projects[activeProject]?.screens
+            .map((id) => screens[id])
+            .map((screen, i) => (
+              <ScreenThumbnail
+                screen={screen}
+                key={i}
+                disableDelete={
+                  projects[activeProject]?.screens.map((id) => screens[id])
+                    .length <= 1
+                }
+              />
+            ))}
           <Icon
             onClick={createNewScreenhandler}
             size="60px"
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
index 2900127afdda..65fd51fd90ac 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
@@ -4,22 +4,23 @@ import type { OnDragEndResponder } from 'react-beautiful-dnd';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import DraggableListItem from './DraggableListItem';
+import { SurfaceOptions } from '../Preview/Display/Surface/constant';
 
 export type Block = {
-  id: string,
-  payload: LayoutBlock,
+  id: string;
+  payload: LayoutBlock;
 };
 
 export type DraggableListProps = {
-  blocks: Block[],
-  surface?: number,
-  onDragEnd: OnDragEndResponder,
+  blocks: Block[];
+  surface?: SurfaceOptions;
+  onDragEnd: OnDragEndResponder;
 };
 
 const DraggableList = React.memo(
   ({ blocks, surface, onDragEnd }: DraggableListProps) => (
     <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId='droppable-list'>
+      <Droppable droppableId="droppable-list">
         {(provided) => (
           <div
             style={{ padding: '10px' }}
@@ -28,7 +29,7 @@ const DraggableList = React.memo(
           >
             {blocks.map((block, index) => (
               <DraggableListItem
-                surface={surface || 1}
+                surface={surface || SurfaceOptions.Message}
                 block={block}
                 index={index}
                 key={block.id}
diff --git a/packages/uikit-playground/src/Components/DropDown/Items.tsx b/packages/uikit-playground/src/Components/DropDown/Items.tsx
index 5c4ed0bec386..23bda2f1d688 100644
--- a/packages/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/Items.tsx
@@ -8,54 +8,59 @@ import { itemStyle, labelStyle } from './itemsStyle';
 import type { ItemProps } from './types';
 
 const Items = ({ label, children, layer, payload }: ItemProps) => {
-	const [isOpen, toggleItemOpen] = useState<boolean>(layer === 1);
-	const [hover, setHover] = useState<boolean>(false);
-	const { state, dispatch } = useContext(context);
+  const [isOpen, toggleItemOpen] = useState<boolean>(layer === 1);
+  const [hover, setHover] = useState<boolean>(false);
+  const { state, dispatch } = useContext(context);
+  console.log(state);
 
-	const itemClickHandler = () => {
-		toggleItemOpen(!isOpen);
-		payload &&
-			dispatch(
-				updatePayloadAction({
-					payload: [...state.screens[state.activeScreen].payload, payload[0]],
-					changedByEditor: false,
-				}),
-			);
-	};
+  const itemClickHandler = () => {
+    toggleItemOpen(!isOpen);
+    payload &&
+      dispatch(
+        updatePayloadAction({
+          payload: [...state.screens[state.activeScreen].payload, payload[0]],
+          changedByEditor: false,
+        })
+      );
+  };
 
-	return (
-		<Box mbe={layer === 1 ? '10px' : '0px'}>
-			<Box
-				display='flex'
-				alignItems='center'
-				className={itemStyle(layer, hover)}
-				onMouseEnter={() => setHover(true)}
-				onMouseLeave={() => setHover(false)}
-				onClick={itemClickHandler}
-			>
-				<Box size='x16' display='flex' alignItems='center'>
-					{children && children.length > 0 && (
-						<Box
-							size='x16'
-							display={'flex'}
-							alignItems={'center'}
-							className={css`
-								transform: rotate(${!isOpen ? '-90deg' : '0deg'});
-								transition: var(--animation-very-fast);
-							`}
-						>
-							<Chevron width='12px' color={hover ? '#fff' : '#000'} />
-						</Box>
-					)}
-				</Box>
-				<Box height='25px' display='flex' alignItems='center'>
-					<ItemsIcon layer={layer} hover={hover} lastNode={children === undefined} />
-					<Label className={labelStyle(layer, hover)}>{label}</Label>
-				</Box>
-			</Box>
-			<Box>{isOpen && children}</Box>
-		</Box>
-	);
+  return (
+    <Box mbe={layer === 1 ? '10px' : '0px'}>
+      <Box
+        display="flex"
+        alignItems="center"
+        className={itemStyle(layer, hover)}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        onClick={itemClickHandler}
+      >
+        <Box size="x16" display="flex" alignItems="center">
+          {children && children.length > 0 && (
+            <Box
+              size="x16"
+              display={'flex'}
+              alignItems={'center'}
+              className={css`
+                transform: rotate(${!isOpen ? '-90deg' : '0deg'});
+                transition: var(--animation-very-fast);
+              `}
+            >
+              <Chevron width="12px" color={hover ? '#fff' : '#000'} />
+            </Box>
+          )}
+        </Box>
+        <Box height="25px" display="flex" alignItems="center">
+          <ItemsIcon
+            layer={layer}
+            hover={hover}
+            lastNode={children === undefined}
+          />
+          <Label className={labelStyle(layer, hover)}>{label}</Label>
+        </Box>
+      </Box>
+      <Box>{isOpen && children}</Box>
+    </Box>
+  );
 };
 
 export default Items;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index f5852eb65dcc..5eef0c4c0a60 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -1,10 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
 import { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
 import type { FC } from 'react';
-import React, { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
 
-import { context, updatePayloadAction, actionPreviewAction } from '../../../../Context';
+import {
+  context,
+  updatePayloadAction,
+  actionPreviewAction,
+} from '../../../../Context';
 import generateActionPreview from '../../../../Payload/actionPreview/generateActionPreview';
 import type { Block } from '../../../Draggable/DraggableList';
 import DraggableList from '../../../Draggable/DraggableList';
@@ -13,72 +17,86 @@ import SurfaceRender from './SurfaceRender';
 import { SurfaceOptions } from './constant';
 
 const Surface: FC = () => {
-	const {
-		state: { screens, activeScreen },
-		dispatch,
-	} = useContext(context);
-	const [uniqueBlocks, setUniqueBlocks] = useState<{
-		block: Block[];
-		isChangeByDnd: boolean;
-	}>({
-		block: screens[activeScreen]?.payload.map((block, i) => ({
-			id: `${i}`,
-			payload: block,
-		})),
-		isChangeByDnd: false,
-	});
-	const preview = generateActionPreview('Action Block', {});
-	useEffect(() => {
-		setUniqueBlocks({
-			block: screens[activeScreen]?.payload.map((block, i) => ({
-				id: `${i}`,
-				payload: block,
-			})),
-			isChangeByDnd: false,
-		});
-	}, [screens[activeScreen]?.payload]);
+  const {
+    state: { screens, activeScreen, user },
+    dispatch,
+  } = useContext(context);
+  const [uniqueBlocks, setUniqueBlocks] = useState<{
+    block: Block[];
+    isChangeByDnd: boolean;
+  }>({
+    block: screens[activeScreen]?.payload.map((block, i) => ({
+      id: `${i}`,
+      payload: block,
+    })),
+    isChangeByDnd: false,
+  });
+  const preview = generateActionPreview({
+    type: 'Action Block',
+    data: {},
+    surface: screens[activeScreen]?.surface,
+    payload: screens[activeScreen]?.payload,
+    user: user,
+  });
+  useEffect(() => {
+    setUniqueBlocks({
+      block: screens[activeScreen]?.payload.map((block, i) => ({
+        id: `${i}`,
+        payload: block,
+      })),
+      isChangeByDnd: false,
+    });
+  }, [screens[activeScreen]?.payload]);
 
-	useEffect(() => {
-		if (uniqueBlocks.isChangeByDnd) {
-			dispatch(
-				updatePayloadAction({
-					payload: uniqueBlocks.block.map((block) => block.payload),
-					changedByEditor: false,
-				}),
-			);
-		}
-	}, [uniqueBlocks]);
+  useEffect(() => {
+    if (uniqueBlocks.isChangeByDnd) {
+      dispatch(
+        updatePayloadAction({
+          payload: uniqueBlocks.block.map((block) => block.payload),
+          changedByEditor: false,
+        })
+      );
+    }
+  }, [uniqueBlocks]);
 
-	const onDragEnd = ({ destination, source }: DropResult) => {
-		if (!destination) return;
+  const onDragEnd = ({ destination, source }: DropResult) => {
+    if (!destination) return;
 
-		const newBlocks = reorder(uniqueBlocks.block, source.index, destination.index);
+    const newBlocks = reorder(
+      uniqueBlocks.block,
+      source.index,
+      destination.index
+    );
 
-		setUniqueBlocks({ block: newBlocks, isChangeByDnd: true });
-	};
+    setUniqueBlocks({ block: newBlocks, isChangeByDnd: true });
+  };
 
-	return (
-		<Box padding='20px'>
-			<UiKitContext.Provider
-				value={{
-					action: (a) => {
-						preview.action = a;
-						dispatch(actionPreviewAction({ ...preview }));
-					},
-					state: (s) => {
-						preview.state = s;
-						dispatch(actionPreviewAction({ ...preview }));
-					},
-					values: {},
-					appId: 'core',
-				}}
-			>
-				<SurfaceRender type={screens[activeScreen].surface}>
-					<DraggableList surface={SurfaceOptions.Modal} blocks={uniqueBlocks.block} onDragEnd={onDragEnd} />
-				</SurfaceRender>
-			</UiKitContext.Provider>
-		</Box>
-	);
+  return (
+    <Box padding="20px">
+      <UiKitContext.Provider
+        value={{
+          action: (a) => {
+            preview.action = a;
+            dispatch(actionPreviewAction({ ...preview }));
+          },
+          state: (s) => {
+            preview.state = s;
+            dispatch(actionPreviewAction({ ...preview }));
+          },
+          values: {},
+          appId: 'core',
+        }}
+      >
+        <SurfaceRender type={screens[activeScreen]?.surface}>
+          <DraggableList
+            surface={SurfaceOptions.Modal}
+            blocks={uniqueBlocks.block || []}
+            onDragEnd={onDragEnd}
+          />
+        </SurfaceRender>
+      </UiKitContext.Provider>
+    </Box>
+  );
 };
 
 export default Surface;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
index 54cb132e0ffa..9f2b2f4f33d8 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
@@ -7,11 +7,11 @@ import ModalSurface from './ModalSurface';
 import { SurfaceOptions } from './constant';
 
 const SurfaceRender = ({
-  type,
+  type = SurfaceOptions.Message,
   children,
 }: {
-  type: SurfaceOptions,
-  children: ReactNode,
+  type?: SurfaceOptions;
+  children: ReactNode;
 }) => (
   <>
     {SurfaceOptions.Message === type && (
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
index bd5611139dbb..5df95bf14e5f 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
@@ -1,6 +1,6 @@
 import { Select } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, surfaceAction } from '../../Context';
 import options from './options';
@@ -13,7 +13,7 @@ const SurfaceSelect: FC = () => {
   return (
     <Select
       options={options}
-      value={`${screens[activeScreen].surface}`}
+      value={`${screens[activeScreen]?.surface}`}
       placeholder={'Surface'}
       onChange={(e) => {
         dispatch(surfaceAction(parseInt(e)));
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 661f70fffe91..67d21f7d2e7e 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -3,13 +3,7 @@ import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 
-export type docType = {
-  payload: readonly LayoutBlock[];
-  id: string;
-  name: string;
-  surface: SurfaceOptions;
-  changedByEditor?: boolean;
-};
+export type idType = string;
 
 export type userType = {
   id: string;
@@ -41,25 +35,38 @@ export type actionPreviewType = {
 };
 
 export type ScreensType = {
-  [key: string]: docType
-}
+  [key: idType]: {
+    payload: readonly LayoutBlock[];
+    id: idType;
+    name: string;
+    surface: SurfaceOptions;
+    actionPreview: actionPreviewType;
+    changedByEditor?: boolean;
+  };
+};
+
+export type ProjectsType = {
+  [key: idType]: { id: idType; name: string; screens: idType[] };
+};
 
 export type initialStateType = {
   isMobile: boolean;
   isTablet: boolean;
   sideBarToggle: boolean;
-  templatesToggle: boolean,
+  templatesToggle: boolean;
   previewTabsToggle: number;
   editorTabsToggle: number;
   navMenuToggle: boolean;
-  activeScreen: string;
+  projects: ProjectsType;
   screens: ScreensType;
-  actionPreview: actionPreviewType;
+  activeProject: string;
+  activeScreen: string;
   openCreateNewScreen: boolean;
   user: userType;
 };
 
-const initialPageId = getUniqueId();
+const initialProjectId = getUniqueId();
+const initialScreenId = getUniqueId();
 
 export const initialState: initialStateType = {
   isMobile: false,
@@ -69,10 +76,24 @@ export const initialState: initialStateType = {
   previewTabsToggle: 0,
   editorTabsToggle: 0,
   navMenuToggle: false,
-  screens: {[initialPageId] : { id: initialPageId, name: 'default1', payload: [], surface: SurfaceOptions.Message, changedByEditor: true },
-},
-  activeScreen: initialPageId,
-  actionPreview: {},
+  activeProject: initialProjectId,
+  activeScreen: initialScreenId,
   openCreateNewScreen: false,
+  projects: {
+    [initialProjectId]: {
+      id: initialProjectId,
+      name: 'Project1',
+      screens: [initialScreenId],
+    },
+  },
+  screens: {
+    [initialScreenId]: {
+      payload: [],
+      id: initialScreenId,
+      name: 'Screen1',
+      surface: SurfaceOptions.Message,
+      actionPreview: {},
+    },
+  },
   user: null,
 };
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 07c5d8374360..227c92c07dfe 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -22,150 +22,153 @@ import {
   EditorTabsToggleAction,
 } from './action';
 
-  type IAction = 
-  | IsMobileAction 
-  | IsTabletAction 
-  | SidebarToggleAction 
-  | PreviewTabsToggleAction 
+type IAction =
+  | IsMobileAction
+  | IsTabletAction
+  | SidebarToggleAction
+  | PreviewTabsToggleAction
   | EditorTabsToggleAction
-  | TemplatesToggleAction 
-  | NavMenuToggleAction 
-  | SurfaceAction 
-  | UpdatePayloadAction 
-  | ActionPreviewAction 
-  | UserAction 
-  | OpenCreateNewScreenAction 
-  | ActiveScreenAction 
-  | CreateNewScreenAction 
-  | DuplicateScreenAction 
+  | TemplatesToggleAction
+  | NavMenuToggleAction
+  | SurfaceAction
+  | UpdatePayloadAction
+  | ActionPreviewAction
+  | UserAction
+  | OpenCreateNewScreenAction
+  | ActiveScreenAction
+  | CreateNewScreenAction
+  | DuplicateScreenAction
   | DeleteScreenAction;
 
-  export enum ActionTypes {
-    IsMobile,
-    IsTablet,
-    SidebarToggle,
-    PreviewToggle,
-    EditorToggle,
-    TemplatesToggle,
-    NavMenuToggle,
-    Surface,
-    UpdatePayload,
-    ActionPreview,
-    User,
-    OpenCreateNewScreen,
-    ActiveScreen,
-    CreateNewScreen,
-    DuplicateScreen,
-    DeleteScreen,
-  }
-  
-  const reducer = (state: initialStateType, action: IAction) => {
-    switch (action.type) {
-      case ActionTypes.IsMobile:
-        return { ...state, isMobile: action.payload };
-      case ActionTypes.IsTablet:
-        return { ...state, isTablet: action.payload };
-      case ActionTypes.SidebarToggle:
-        return { ...state, sidebarToggle: action.payload };
-      case ActionTypes.PreviewToggle:
-        return { ...state, previewTabsToggle: action.payload };
-      case ActionTypes.EditorToggle:
-        return { ...state, editorTabsToggle: action.payload };
-      case ActionTypes.TemplatesToggle:
-        return { ...state, templatesToggle: action.payload };
-      case ActionTypes.NavMenuToggle:
-        return { ...state, navMenuToggle: action.payload };
-      case ActionTypes.Surface:
-        return {
-          ...state,
-          screens: {
-            ...state.screens,
-            [state.activeScreen]: {
-              ...state.screens[state.activeScreen],
-              surface: action.payload,
-              changedByEditor: false,
-            },
-          },
-        };
-      case ActionTypes.UpdatePayload:
-        return {
-          ...state,
-          screens: {
-            ...state.screens,
-            [state.activeScreen]: {
-              ...state.screens[state.activeScreen],
-              payload: action?.payload?.payload,
-              changedByEditor: action?.payload?.changedByEditor === undefined,
-            },
+export enum ActionTypes {
+  IsMobile,
+  IsTablet,
+  SidebarToggle,
+  PreviewToggle,
+  EditorToggle,
+  TemplatesToggle,
+  NavMenuToggle,
+  Surface,
+  UpdatePayload,
+  ActionPreview,
+  User,
+  OpenCreateNewScreen,
+  ActiveScreen,
+  CreateNewScreen,
+  DuplicateScreen,
+  DeleteScreen,
+}
+
+const reducer = (state: initialStateType, action: IAction) => {
+  const { activeProject, activeScreen } = state;
+  switch (action.type) {
+    case ActionTypes.IsMobile:
+      return { ...state, isMobile: action.payload };
+    case ActionTypes.IsTablet:
+      return { ...state, isTablet: action.payload };
+    case ActionTypes.SidebarToggle:
+      return { ...state, sidebarToggle: action.payload };
+    case ActionTypes.PreviewToggle:
+      return { ...state, previewTabsToggle: action.payload };
+    case ActionTypes.EditorToggle:
+      return { ...state, editorTabsToggle: action.payload };
+    case ActionTypes.TemplatesToggle:
+      return { ...state, templatesToggle: action.payload };
+    case ActionTypes.NavMenuToggle:
+      return { ...state, navMenuToggle: action.payload };
+    case ActionTypes.Surface: {
+      state.screens[activeScreen].surface = action.payload;
+      state.screens[activeScreen].changedByEditor = false;
+
+      return { ...state };
+    }
+    case ActionTypes.UpdatePayload: {
+      state.screens[activeScreen].payload = action?.payload?.payload;
+      state.screens[activeScreen].changedByEditor =
+        action?.payload?.changedByEditor === undefined;
+      return { ...state };
+    }
+    case ActionTypes.ActionPreview:
+      return { ...state, actionPreview: action.payload };
+    case ActionTypes.User:
+      return { ...state, user: action.payload };
+    case ActionTypes.OpenCreateNewScreen:
+      return { ...state, openCreateNewScreen: action.payload };
+    case ActionTypes.ActiveScreen:
+      return {
+        ...state,
+        openCreateNewScreen: false,
+        activeScreen: action.payload,
+      };
+    case ActionTypes.CreateNewScreen: {
+      const id = getUniqueId();
+      return {
+        ...state,
+        screens: {
+          ...state.screens,
+          [id]: {
+            id,
+            name: action?.payload || 'default',
+            payload: [],
           },
-        };
-      case ActionTypes.ActionPreview:
-        return { ...state, actionPreview: action.payload };
-      case ActionTypes.User:
-        return { ...state, user: action.payload };
-      case ActionTypes.OpenCreateNewScreen:
-        return { ...state, openCreateNewScreen: action.payload };
-      case ActionTypes.ActiveScreen:
-        return {
-          ...state,
-          screens: _.cloneDeep(state.screens),
-          openCreateNewScreen: false,
-          activeScreen: action.payload,
-        };
-      case ActionTypes.CreateNewScreen: {
-        const id = getUniqueId();
-        return {
-          ...state,
-          screens: {
-            ...state.screens,
-            [id]: {
-              id,
-              surface: SurfaceOptions.Message,
-              name: action?.payload || 'default',
-              payload: [],
-              changedByEditor: true,
-            },
+        },
+        projects: {
+          ...state.projects,
+          [activeProject]: {
+            ...state.projects[activeProject],
+            screens: [...state.projects[activeProject].screens, id],
           },
-          openCreateNewScreen: false,
-          activeScreen: id,
-        };
-      }
-      case ActionTypes.DuplicateScreen: {
-        const id = getUniqueId();
-        return {
-          ...state,
-          screens: {
-            ...state.screens,
-            [id]: {
-              ...state.screens[action.payload.id],
-              id,
-              name: action?.payload.name || 'default',
-              payload: state.screens[action?.payload?.id].payload,
-              changedByEditor: true,
-            },
+        },
+        openCreateNewScreen: false,
+        activeScreen: id,
+      };
+    }
+    case ActionTypes.DuplicateScreen: {
+      const id = getUniqueId();
+      const screens = state.projects[activeProject].screens;
+      screens.splice(screens.indexOf(action.payload.id), 0, id);
+      return {
+        ...state,
+        screens: {
+          ...state.screens,
+          [id]: {
+            id,
+            name: action?.payload.name || 'default',
+            payload: state.screens[action.payload.id].payload,
           },
-          openCreateNewScreen: false,
-          activeScreen: id,
-        };
-      }
-      case ActionTypes.DeleteScreen: {
-        const screens = _.cloneDeep(state.screens);
-        delete screens[action?.payload];
-        if (state.activeScreen === action.payload) {
-          return {
-            ...state,
+        },
+        projects: {
+          ...state.projects,
+          [activeProject]: {
+            ...state.projects[activeProject],
             screens,
-            activeScreen: Object.keys(screens)[0],
-          };
+          },
+        },
+        openCreateNewScreen: false,
+        activeScreen: id,
+      };
+    }
+    case ActionTypes.DeleteScreen: {
+      delete state.screens[action.payload];
+      state.projects[activeProject].screens = [
+        ...state.projects[activeProject].screens.filter(
+          (id) => id !== action.payload
+        ),
+      ];
+      if (state.projects[activeProject].screens.length > 0) {
+        state.activeScreen = state.projects[activeProject].screens[0];
+      } else if (state.projects[activeProject].screens.length === 0) {
+        if (Object.keys(state.projects).length > 0) {
+          delete state.projects[activeProject];
+          state.activeProject = '';
+          state.activeScreen = '';
         }
-        return {
-          ...state,
-          screens,
-        };
       }
-      default:
-        return state;
+      return { ...state };
     }
-  };
-  
-  export default reducer;
+    default:
+      return state;
+  }
+};
+
+export default reducer;
diff --git a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
index 65daf4829d59..287f909df952 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
@@ -1,22 +1,30 @@
-import { useContext } from 'react';
-
 import { SurfaceOptions } from '../../Components/Preview/Display/Surface/constant';
-import { context } from '../../Context';
-import type { actionPreviewType } from '../../Context/initialState';
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import type {
+  actionPreviewType,
+  initialStateType,
+} from '../../Context/initialState';
 import container from './container';
 
-const generateActionPreview = (type: string, data: actionPreviewType) => {
-  const {
-    state: { user, screens, activeScreen },
-  } = useContext(context);
-
+const generateActionPreview = ({
+  type,
+  data,
+  surface,
+  payload,
+  user,
+}: {
+  type: string;
+  data: actionPreviewType;
+  surface: SurfaceOptions;
+  payload: readonly LayoutBlock[];
+  user: initialStateType['user'];
+}) => {
   const actionPreview: actionPreviewType = {
     type,
     user,
     api_app_id: '',
     token: '',
-    container:
-      container[screens[activeScreen].surface || SurfaceOptions.Message],
+    container: container[surface || SurfaceOptions.Message],
     trigger_id: '',
     team: null,
     enterprise: null,
@@ -25,7 +33,7 @@ const generateActionPreview = (type: string, data: actionPreviewType) => {
     ...data,
   };
   if (type === 'View Submission') {
-    actionPreview.view = screens[activeScreen].payload;
+    actionPreview.view = payload;
   }
   return actionPreview;
 };

From 74d31dc1a0028ee477c2901dde0d174e6d6c9f3a Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 8 Jul 2023 13:20:59 +0530
Subject: [PATCH 12/50] feat(uikit-playground): Added projects ui

---
 packages/uikit-playground/package.json        |   5 +-
 packages/uikit-playground/src/App.tsx         |  19 ++--
 .../src/Components/CodeEditor/BlockEditor.tsx |   2 +-
 .../CreateNewScreen/ScreenThumbnail.tsx       |  82 +++++++-------
 .../HomeContainer/HomeContainer.tsx           |  39 +++++++
 .../ProjectsList/ProjectsList.tsx             |  34 ++++++
 .../ProjectsList/ProjectsThumbnail.tsx        | 104 ++++++++++++++++++
 .../HomeContainer/ProjectsList/index.ts       |   1 +
 .../src/Components/HomeContainer/index.ts     |   1 +
 .../src/Components/NavBar/NavBar.tsx          |  16 ++-
 .../ScreenThumbnail/CreateNewScreenButton.tsx |  30 +++++
 .../ScreenThumbnail/EditMenu/EditMenu.tsx     |  80 ++++++++++++++
 .../ScreenThumbnail/EditMenu/index.ts         |   1 +
 .../EditableLabel/EditableLabel.tsx           |  38 +++++++
 .../EditableLabel/Editablelabel.scss          |  22 ++++
 .../ScreenThumbnailWrapper.tsx                |  38 ++++---
 .../Thumbnail.tsx                             |   9 +-
 .../src/Context/action/activeProjectAction.ts |  11 ++
 .../Context/action/createNewProjectAction.ts  |  13 +++
 .../src/Context/action/deleteProjectAction.ts |  11 ++
 .../Context/action/duplicateProjectAction.ts  |  14 +++
 .../src/Context/action/index.ts               |  13 +++
 .../src/Context/action/renameProjectAction.ts |  16 +++
 .../src/Context/action/renameScreenAction.ts  |  16 +++
 .../src/Context/initialState.ts               |  30 +++--
 .../uikit-playground/src/Context/reducer.ts   | 101 ++++++++++++++++-
 packages/uikit-playground/src/Pages/Home.tsx  |  16 +++
 .../src/Pages/SignInSignUp.tsx                |   2 +-
 .../uikit-playground/src/Routes/Routes.ts     |   9 +-
 .../uikit-playground/src/cssVariables.css     |   2 +
 .../uikit-playground/src/utils/formatDate.ts  |   5 +
 .../uikit-playground/src/utils/getDate.ts     |   5 +
 yarn.lock                                     |   7 +-
 33 files changed, 696 insertions(+), 96 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
 create mode 100644 packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
 create mode 100644 packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
 create mode 100644 packages/uikit-playground/src/Components/HomeContainer/ProjectsList/index.ts
 create mode 100644 packages/uikit-playground/src/Components/HomeContainer/index.ts
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/index.ts
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/Editablelabel.scss
 rename packages/uikit-playground/src/Components/{CreateNewScreen => ScreenThumbnail}/ScreenThumbnailWrapper.tsx (53%)
 rename packages/uikit-playground/src/Components/{CreateNewScreen => ScreenThumbnail}/Thumbnail.tsx (82%)
 create mode 100644 packages/uikit-playground/src/Context/action/activeProjectAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/createNewProjectAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/deleteProjectAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/duplicateProjectAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/renameProjectAction.ts
 create mode 100644 packages/uikit-playground/src/Context/action/renameScreenAction.ts
 create mode 100644 packages/uikit-playground/src/Pages/Home.tsx
 create mode 100644 packages/uikit-playground/src/utils/formatDate.ts
 create mode 100644 packages/uikit-playground/src/utils/getDate.ts

diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index 2732f0d8a480..c93b81021ca6 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -24,9 +24,10 @@
     "@rocket.chat/icons": "next",
     "@rocket.chat/logo": "next",
     "@rocket.chat/styled": "next",
-    "@rocket.chat/ui-contexts": "workspace:~",
+    "@rocket.chat/ui-contexts": "workspace:^",
     "codemirror": "^6.0.1",
     "eslint4b-prebuilt": "^6.7.2",
+    "moment": "^2.29.4",
     "rc-scrollbars": "^1.1.6",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.1",
@@ -38,6 +39,7 @@
     "use-subscription": "^1.8.0"
   },
   "devDependencies": {
+    "@types/prettier": "^2",
     "@types/react": "~17.0.62",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "~17.0.20",
@@ -48,6 +50,7 @@
     "eslint": "~8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
+    "prettier": "^2.8.8",
     "typescript": "~5.1.6",
     "vite": "^4.3.9"
   },
diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 77a6c84e00ca..8fb980295b41 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -6,34 +6,31 @@ import { ToastBarProvider } from '@rocket.chat/fuselage-toastbar';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import { HomeLayout } from './Components/Routes/HomeLayout';
-import { ProtectedLayout } from './Components/Routes/ProtectedLayout';
-import FlowDiagram from './Pages/FlowDiagram';
 import Playground from './Pages/Playground';
 import SignInToWorkspace from './Pages/SignInSignUp';
 import routes from './Routes/Routes';
-
+import Home from './Pages/Home';
 
 function App() {
   return (
     <ToastBarProvider>
       <BrowserRouter>
         <Routes>
-        <Route path={`/`} element={<Playground />} />
           <Route element={<HomeLayout />}>
             <Route
-              path={`/${routes.login}`}
+              path={routes.login}
               element={<SignInToWorkspace route={routes.login} />}
             />
             <Route
-              path={`/${routes.signup}`}
+              path={routes.signup}
               element={<SignInToWorkspace route={routes.signup} />}
             />
-            <Route path={`/${routes.flow}`} element={<FlowDiagram />} />
-          </Route>
-          <Route element={<ProtectedLayout />}>
-            <Route path={`/${routes.home}`} element={<Playground />} />
-            <Route path={`*`} element={<Playground />} />
           </Route>
+          {/* <Route element={<ProtectedLayout />}> */}
+          <Route path={routes.home} element={<Home />} />
+          <Route path={routes.project} element={<Playground />} />
+          <Route path={`*`} element={<Playground />} />
+          {/* </Route> */}
         </Routes>
       </BrowserRouter>
     </ToastBarProvider>
diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index 25c5d716a0fa..c1f834ba80fb 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -55,7 +55,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
         {}
       );
     }
-  }, [screens[activeScreen]?.payload]);
+  }, [screens[activeScreen]?.payload, activeScreen]);
 
   useEffect(() => {
     setValue(JSON.stringify(screens[activeScreen]?.payload, undefined, 4), {});
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index bee68e5dfa62..93429270d237 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -1,25 +1,27 @@
-import { Box, Menu } from '@rocket.chat/fuselage';
+import { Box } from '@rocket.chat/fuselage';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
-import type { MouseEvent } from 'react';
-import React, { useContext } from 'react';
+import type { ChangeEvent, MouseEvent } from 'react';
+import { useContext, useState } from 'react';
 
-import ScreenThumbnailWrapper from './ScreenThumbnailWrapper';
-import Thumbnail from './Thumbnail';
-import { context } from '../../Context';
+import ScreenThumbnailWrapper from '../ScreenThumbnail/ScreenThumbnailWrapper';
+import Thumbnail from '../ScreenThumbnail/Thumbnail';
+import { context, renameScreenAction } from '../../Context';
 import { activeScreenAction } from '../../Context/action/activeScreenAction';
 import { deleteScreenAction } from '../../Context/action/deleteScreenAction';
 import { duplicateScreenAction } from '../../Context/action/duplicateScreenAction';
-import type { docType } from '../../Context/initialState';
 import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import { ScreenType } from '../../Context/initialState';
+import EditMenu from '../ScreenThumbnail/EditMenu/EditMenu';
 
 const ScreenThumbnail = ({
   screen,
   disableDelete,
 }: {
-  screen: docType,
-  disableDelete: boolean,
+  screen: ScreenType;
+  disableDelete: boolean;
 }) => {
   const { dispatch } = useContext(context);
+  const [name, setName] = useState<string>(screen?.name);
   const toast = useToastBarDispatch();
 
   const activateScreenHandler = (e: MouseEvent) => {
@@ -27,13 +29,26 @@ const ScreenThumbnail = ({
     dispatch(activeScreenAction(screen?.id));
   };
 
-  const duplicateScreenHandler = (e: MouseEvent) => {
-    e.stopPropagation();
+  const duplicateScreenHandler = () => {
     dispatch(duplicateScreenAction({ id: screen?.id }));
   };
 
-  const deleteScreenHandler = (e: MouseEvent) => {
-    e.stopPropagation();
+  const onChangeNameHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    setName(e.currentTarget.value);
+  };
+
+  const nameSaveHandler = () => {
+    if (!name.trim()) {
+      setName(screen.name);
+      return toast({
+        type: 'error',
+        message: 'Cannot rename screen to empty name.',
+      });
+    }
+    dispatch(renameScreenAction({ id: screen.id, name }));
+  };
+
+  const deleteScreenHandler = () => {
     if (disableDelete)
       return toast({
         type: 'info',
@@ -42,33 +57,20 @@ const ScreenThumbnail = ({
     dispatch(deleteScreenAction(screen?.id));
   };
   return (
-    <ScreenThumbnailWrapper onClick={activateScreenHandler}>
-      <Thumbnail of={renderPayload({ payload: screen.payload })} />
-      <Box onClick={(e) => e.stopPropagation()}>
-        <Menu
-          tiny
-          position="absolute"
-          insetBlockStart="5px"
-          insetInlineEnd="5px"
-          zIndex={100}
-          placement="bottom-end"
-          icon="cog"
-          options={{
-            duplicate: {
-              label: <Box onClick={duplicateScreenHandler}>Duplicate</Box>,
-            },
-            delete: {
-              label: (
-                <Box onClick={deleteScreenHandler} color="danger">
-                  Delete
-                </Box>
-              ),
-              disabled: disableDelete,
-            },
-          }}
-        />
-      </Box>
-    </ScreenThumbnailWrapper>
+    <Box position="relative">
+      <EditMenu
+        name={name}
+        date={screen.date}
+        onChange={onChangeNameHandler}
+        onDuplicate={duplicateScreenHandler}
+        onDelete={deleteScreenHandler}
+        onBlur={nameSaveHandler}
+        labelProps={{ fontScale: 'h5' }}
+      />
+      <ScreenThumbnailWrapper onClick={activateScreenHandler}>
+        <Thumbnail of={renderPayload({ payload: screen.payload })} />
+      </ScreenThumbnailWrapper>
+    </Box>
   );
 };
 
diff --git a/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
new file mode 100644
index 000000000000..92a65b7f461d
--- /dev/null
+++ b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
@@ -0,0 +1,39 @@
+import { Box, Button, Label } from '@rocket.chat/fuselage';
+import ProjectsList from './ProjectsList/ProjectsList';
+import { useContext } from 'react';
+import { context, createNewProjectAction } from '../../Context';
+import CreateNewScreenButton from '../ScreenThumbnail/CreateNewScreenButton';
+import { css } from '@rocket.chat/css-in-js';
+
+const HomeContainer = () => {
+  const { dispatch } = useContext(context);
+  return (
+    <Box
+      minWidth="100%"
+      display="flex"
+      justifyContent="center"
+      h="var(--content-height)"
+      pbs={'30px'}
+    >
+      <Box
+        width={'max-content'}
+        minWidth={'70%'}
+        display="flex"
+        flexDirection="column"
+        className={css`
+          gap: 30px;
+        `}
+      >
+        <Label fontScale="h1">Projects</Label>
+        <Label fontScale="h3">Start a new project</Label>
+        <CreateNewScreenButton
+          onClick={() => dispatch(createNewProjectAction())}
+        />
+        <Label fontScale="h4">Existing Projects</Label>
+        <ProjectsList />
+      </Box>
+    </Box>
+  );
+};
+
+export default HomeContainer;
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
new file mode 100644
index 000000000000..cd1490d26e9b
--- /dev/null
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
@@ -0,0 +1,34 @@
+import { Box } from '@rocket.chat/fuselage';
+import { context } from '../../../Context';
+import { useContext } from 'react';
+import ProjectsThumbnail from './ProjectsThumbnail';
+import { css } from '@rocket.chat/css-in-js';
+
+const ProjectsList = () => {
+  const {
+    state: { screens, projects },
+  } = useContext(context);
+
+  return (
+    <Box
+      className={css`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 200px);
+        gap: 30px;
+      `}
+      pbe="30px"
+    >
+      {Object.values(projects).map((project) => (
+        <ProjectsThumbnail
+          key={project.id}
+          id={project.id}
+          name={project.name}
+          date={project.date}
+          payload={screens[project.screens[0]].payload}
+        />
+      ))}
+    </Box>
+  );
+};
+
+export default ProjectsList;
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
new file mode 100644
index 000000000000..e2dd6f18bfa7
--- /dev/null
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -0,0 +1,104 @@
+import { Box } from '@rocket.chat/fuselage';
+import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
+import Thumbnail from '../../ScreenThumbnail/Thumbnail';
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import {
+  context,
+  duplicateProjectAction,
+  renameProjectAction,
+} from '../../../Context';
+import { ChangeEvent, useContext, useState } from 'react';
+import { activeProjectAction } from '../../../Context/action/activeProjectAction';
+import { useNavigate } from 'react-router-dom';
+import routes from '../../../Routes/Routes';
+import { formatDate } from '../../../utils/formatDate';
+import EditMenu from '../../ScreenThumbnail/EditMenu';
+import EditableLabel from '../../ScreenThumbnail/EditableLabel/EditableLabel';
+import { css } from '@rocket.chat/css-in-js';
+import { deleteProjectAction } from '../../../Context/action/deleteProjectAction';
+import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
+
+const ProjectsThumbnail = ({
+  id,
+  name: _name,
+  date,
+  payload,
+}: {
+  id: string;
+  name: string;
+  date: string;
+  payload: readonly LayoutBlock[];
+}) => {
+  const [name, setName] = useState<string>(_name);
+  const navigate = useNavigate();
+  const { dispatch } = useContext(context);
+  const toast = useToastBarDispatch();
+  const activeProjectHandler = () => {
+    dispatch(activeProjectAction(id));
+    navigate(`/${id}`);
+  };
+
+  const duplicateScreenHandler = () => {
+    dispatch(duplicateProjectAction({ id }));
+  };
+  const deleteScreenHandler = () => {
+    dispatch(deleteProjectAction(id));
+  };
+
+  const onChangeNameHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    setName(e.currentTarget.value);
+  };
+
+  const nameSaveHandler = () => {
+    window.console.log('nameSaveHandler');
+    if (!name.trim()) {
+      setName(_name);
+      return toast({
+        type: 'error',
+        message: 'Cannot rename project to empty name.',
+      });
+    }
+    dispatch(renameProjectAction({ id, name }));
+  };
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      className={css`
+        gap: 5px;
+      `}
+      position="relative"
+    >
+      <EditMenu
+        name={name}
+        date={date}
+        onChange={onChangeNameHandler}
+        onDuplicate={duplicateScreenHandler}
+        onDelete={deleteScreenHandler}
+        onBlur={nameSaveHandler}
+        labelProps={{ fontScale: 'h5' }}
+      />
+      <ScreenThumbnailWrapper
+        onClick={activeProjectHandler}
+        width={'200px'}
+        height="260px"
+      >
+        <Thumbnail of={RenderPayload({ payload })} />
+        <Box onClick={(e) => e.stopPropagation()}></Box>
+      </ScreenThumbnailWrapper>
+      <EditableLabel
+        value={name}
+        onChange={onChangeNameHandler}
+        fontScale="h5"
+        onBlur={nameSaveHandler}
+      />
+      <Box withTruncatedText fontScale="p2">
+        {formatDate(date)}
+      </Box>
+    </Box>
+  );
+};
+
+export default ProjectsThumbnail;
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/index.ts b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/index.ts
new file mode 100644
index 000000000000..257bedbfc719
--- /dev/null
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/index.ts
@@ -0,0 +1 @@
+export { default } from './ProjectsList';
diff --git a/packages/uikit-playground/src/Components/HomeContainer/index.ts b/packages/uikit-playground/src/Components/HomeContainer/index.ts
new file mode 100644
index 000000000000..b78a849a231a
--- /dev/null
+++ b/packages/uikit-playground/src/Components/HomeContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './HomeContainer';
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index e0b36e7cc799..f52bab6b1d9e 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -1,5 +1,12 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Tile, Flex, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import {
+  Box,
+  Tile,
+  Flex,
+  ButtonGroup,
+  Button,
+  Icon,
+} from '@rocket.chat/fuselage';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import type { FC } from 'react';
 import React, { useContext } from 'react';
@@ -22,7 +29,7 @@ const NabBar: FC = () => {
       <Box
         position="relative"
         width={'100%'}
-        height={'min(60px, 25vw)'}
+        height={'var(--navbar-height)'}
         is={Tile}
         padding={0}
         zIndex={3}
@@ -31,8 +38,9 @@ const NabBar: FC = () => {
           user-select: none;
         `}
       >
-        <Logo />
-        <Divider />
+        <Button onClick={() => navigate(routes.home)} mis="20px" small square>
+          <Icon name="home" size="x24" />
+        </Button>
         <Box
           flexGrow={1}
           minWidth="15px"
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
new file mode 100644
index 000000000000..41981ab2d9ab
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
@@ -0,0 +1,30 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Icon, Box } from '@rocket.chat/fuselage';
+import { ComponentProps } from 'react';
+
+const CreateNewScreenButton = ({
+  size = '60px',
+  ...props
+}: {
+  size?: ComponentProps<typeof Icon>['size'];
+} & ComponentProps<typeof Icon>) => {
+  return (
+    <Box width={size} height={size}>
+      <Icon
+        {...props}
+        size={size}
+        name={'plus'}
+        className={css`
+          cursor: pointer;
+          transition: var(--animation-default);
+          &:hover {
+            scale: 1.1;
+            transition: var(--animation-default);
+          }
+        `}
+      />
+    </Box>
+  );
+};
+
+export default CreateNewScreenButton;
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
new file mode 100644
index 000000000000..6a1aa8d9b221
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
@@ -0,0 +1,80 @@
+import { Box, Icon, Button, Divider, Option } from '@rocket.chat/fuselage';
+import EditableLabel from '../EditableLabel/EditableLabel';
+import { ComponentProps, useRef, useState } from 'react';
+import { ChangeEvent } from 'react';
+import { useOutsideClick } from '@rocket.chat/fuselage-hooks';
+import { formatDate } from '../../../utils/formatDate';
+
+const EditMenu = ({
+  name,
+  date,
+  onChange,
+  onBlur,
+  onDuplicate,
+  onDelete,
+  labelProps,
+}: {
+  name: string;
+  date: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onDuplicate: () => void;
+  onDelete: () => void;
+  onBlur: () => void;
+  labelProps?: ComponentProps<typeof EditableLabel>;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  useOutsideClick([containerRef], () => {
+    setIsOpen(false);
+    onBlur();
+  });
+
+  const duplicatehandler = (e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    onDuplicate();
+  };
+
+  const deleteHandler = (e: { stopPropagation: () => void }) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    onDelete();
+  };
+  return (
+    <Box
+      position="absolute"
+      insetBlockStart="5px"
+      insetInlineEnd="5px"
+      zIndex={100}
+      ref={containerRef}
+      onClick={() => setIsOpen(true)}
+    >
+      <Button ref={buttonRef} square mini>
+        <Icon name="cog" size="x16" />
+      </Button>
+      {isOpen && (
+        <Box position="absolute">
+          <Box elevation="1" pb="10px" bg="white">
+            <Box mi="10px">
+              <EditableLabel
+                value={name}
+                onChange={onChange}
+                onBlur={onBlur}
+                {...labelProps}
+              />
+              <Box withTruncatedText mbs="2px" fontScale="p2">
+                {formatDate(date)}
+              </Box>
+            </Box>
+            <Divider mbs="12px" />
+            <Option onClick={duplicatehandler}>Duplicate</Option>
+            <Option onClick={deleteHandler}>Delete</Option>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default EditMenu;
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/index.ts b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/index.ts
new file mode 100644
index 000000000000..5115a9d3899b
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/index.ts
@@ -0,0 +1 @@
+export {default} from './EditMenu';
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
new file mode 100644
index 000000000000..890f1dcb77a8
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
@@ -0,0 +1,38 @@
+import './Editablelabel.scss';
+import { Box, Icon, Input } from '@rocket.chat/fuselage';
+import { MouseEventHandler } from 'react';
+import { ComponentProps, useRef, useState } from 'react';
+
+const EditableLabel = (props: ComponentProps<typeof Input>) => {
+  const [hover, setHover] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const iconClickHandler: MouseEventHandler<HTMLElement> = (e) => {
+    e.stopPropagation();
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  };
+
+  return (
+    <Box
+      position="relative"
+      className="rc-editableLabel"
+      w="100%"
+      h="max-content"
+      display="flex"
+      alignItems="center"
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <Input ref={inputRef} {...props} />
+      <Icon
+        invisible={!hover}
+        className={'editableLabel-icon'}
+        name="pencil"
+        onClick={iconClickHandler}
+      />
+    </Box>
+  );
+};
+
+export default EditableLabel;
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/Editablelabel.scss b/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/Editablelabel.scss
new file mode 100644
index 000000000000..a5ba92c2c31f
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/Editablelabel.scss
@@ -0,0 +1,22 @@
+.rc-editableLabel{
+    >input{
+        border-width: 0px !important;
+        padding: 0px !important;
+        min-height: 0px !important;
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+
+    &:focus-within{
+        &.rc-editableLabel>.editableLabel-icon{
+            visibility: hidden;
+        }
+    }
+
+    >.editableLabel-icon{
+        cursor: pointer;
+        scale: 1.2;
+    }
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
similarity index 53%
rename from packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
rename to packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
index 376b38268ea7..17abc17236d2 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnailWrapper.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
@@ -1,49 +1,55 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode, ComponentProps } from 'react';
-import React from 'react';
 
 const ScreenThumbnailWrapper = ({
   children,
   onClick,
+  width = '120px',
+  height = '170px',
+  padding = '20px',
   ...props
 }: {
-  onClick?: ComponentProps<typeof Box>['onClick'],
-  children: ReactNode,
+  onClick?: ComponentProps<typeof Box>['onClick'];
+  children: ReactNode;
 } & ComponentProps<typeof Box>) => (
   <Box
-    w="120px"
-    h="170px"
+    w={width}
+    h={height}
     bg="white"
     border="var(--default-border)"
-    borderRadius={'20px'}
+    borderRadius="8px"
     className={css`
       display: grid;
       place-items: center;
       cursor: pointer;
       overflow: hidden;
-      transition: var(--animation-fast);
+      transition: var(--animation-very-fast);
       &:hover {
-        scale: 1.02;
-        transition: var(--animation-fast);
-        box-shadow: var(--elements-box-shadow);
-
+        transition: var(--animation-very-fast);
+        border: 1px solid var(--RCPG-tertary-color) !important;
         .screenThumbnailBackdrop {
           z-index: 10;
-          background: #cfcfcf45;
-          transition: var(--animation-fast);
+          background: #cfcfcf20;
+          transition: var(--animation-very-fast);
         }
       }
     `}
   >
     <Box
-      w="120px"
-      h="170px"
+      w={width}
+      h={height}
       position="absolute"
       className="screenThumbnailBackdrop"
       onClick={onClick}
     />
-    <Box w="100px" h="150px" position="relative" onClick={onClick} {...props}>
+    <Box
+      w={`calc(${width} - ${padding})`}
+      h={`calc(${height} - ${padding})`}
+      position="relative"
+      onClick={onClick}
+      {...props}
+    >
       {children}
     </Box>
   </Box>
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
similarity index 82%
rename from packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
rename to packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
index 4a12ccba109a..daf2e5703806 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/Thumbnail.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
@@ -1,13 +1,16 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
 import React, { useRef, useMemo } from 'react';
 
 interface ThumbnailProps {
   of: ReactNode;
 }
 
-const Thumbnail: React.FC<ThumbnailProps> = ({ of }) => {
+const Thumbnail: React.FC<ThumbnailProps & ComponentProps<typeof Box>> = ({
+  of,
+  ...props
+}) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const elementRef = useRef<HTMLDivElement | null>(null);
 
@@ -23,7 +26,7 @@ const Thumbnail: React.FC<ThumbnailProps> = ({ of }) => {
   }, [elementRef.current?.offsetHeight, elementRef.current?.offsetWidth]);
 
   return (
-    <Box overflow="hidden" ref={parentRef}>
+    <Box overflow="hidden" ref={parentRef} {...props}>
       <Box
         className={css`
           transform: scale(${scale});
diff --git a/packages/uikit-playground/src/Context/action/activeProjectAction.ts b/packages/uikit-playground/src/Context/action/activeProjectAction.ts
new file mode 100644
index 000000000000..61d098a59dc5
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/activeProjectAction.ts
@@ -0,0 +1,11 @@
+import { ActionTypes } from "../reducer";
+
+export type ActiveProjectAction = {
+  type: ActionTypes.ActiveProject,
+  payload: string,
+};
+
+export const activeProjectAction = (payload: string): ActiveProjectAction => ({
+  type: ActionTypes.ActiveProject,
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/createNewProjectAction.ts b/packages/uikit-playground/src/Context/action/createNewProjectAction.ts
new file mode 100644
index 000000000000..52cd05fb194c
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/createNewProjectAction.ts
@@ -0,0 +1,13 @@
+import { ActionTypes } from '../reducer';
+
+export type CreateNewProjectAction = {
+  type: ActionTypes.CreateNewProject;
+  payload?: string;
+};
+
+export const createNewProjectAction = (
+  payload?: string
+): CreateNewProjectAction => ({
+  type: ActionTypes.CreateNewProject,
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/deleteProjectAction.ts b/packages/uikit-playground/src/Context/action/deleteProjectAction.ts
new file mode 100644
index 000000000000..1991157506a9
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/deleteProjectAction.ts
@@ -0,0 +1,11 @@
+import { ActionTypes } from "../reducer";
+
+export type DeleteProjectAction = {
+  type: ActionTypes.DeleteProject,
+  payload: string,
+};
+
+export const deleteProjectAction = (payload: string): DeleteProjectAction => ({
+  type: ActionTypes.DeleteProject,
+  payload,
+});
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Context/action/duplicateProjectAction.ts b/packages/uikit-playground/src/Context/action/duplicateProjectAction.ts
new file mode 100644
index 000000000000..3ea4585a987d
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/duplicateProjectAction.ts
@@ -0,0 +1,14 @@
+import { ActionTypes } from "../reducer";
+
+export type DuplicateProjectAction = {
+  type: ActionTypes.DuplicateProject,
+  payload: { id: string, name?: string },
+};
+
+export const duplicateProjectAction = (payload: {
+  id: string,
+  name?: string,
+}): DuplicateProjectAction => ({
+  type: ActionTypes.DuplicateProject,
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index bcd837c9409e..8245d0be559f 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -14,6 +14,12 @@ export { createNewScreenAction } from './createNewScreenAction';
 export { activeScreenAction } from './activeScreenAction';
 export { duplicateScreenAction } from './duplicateScreenAction';
 export { deleteScreenAction } from './deleteScreenAction';
+export {renameScreenAction} from './renameScreenAction';
+export { createNewProjectAction } from './createNewProjectAction';
+export { activeProjectAction } from './activeProjectAction';
+export { duplicateProjectAction } from './duplicateProjectAction';
+export { deleteProjectAction } from './deleteProjectAction';
+export { renameProjectAction } from './renameProjectAction';
 
 export type { IsMobileAction } from './isMobileAction';
 export type { IsTabletAction } from './isTabletAction';
@@ -31,3 +37,10 @@ export type { CreateNewScreenAction } from './createNewScreenAction';
 export type { ActiveScreenAction } from './activeScreenAction';
 export type { DuplicateScreenAction } from './duplicateScreenAction';
 export type { DeleteScreenAction } from './deleteScreenAction';
+export type { RenameScreenAction } from './renameScreenAction';
+export type { CreateNewProjectAction } from './createNewProjectAction';
+export type { ActiveProjectAction } from './activeProjectAction';
+export type { DuplicateProjectAction } from './duplicateProjectAction';
+export type { DeleteProjectAction } from './deleteProjectAction';
+export type { RenameProjectAction } from './renameProjectAction';
+
diff --git a/packages/uikit-playground/src/Context/action/renameProjectAction.ts b/packages/uikit-playground/src/Context/action/renameProjectAction.ts
new file mode 100644
index 000000000000..fab35366df37
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/renameProjectAction.ts
@@ -0,0 +1,16 @@
+import { ActionTypes } from "../reducer";
+
+type payloadType = {
+    id: string,
+    name: string,
+};
+
+export type RenameProjectAction = {
+  type: ActionTypes.RenameProject,
+  payload:payloadType,
+};
+
+export const renameProjectAction = (payload: payloadType): RenameProjectAction => ({
+  type: ActionTypes.RenameProject,
+  payload,
+});
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Context/action/renameScreenAction.ts b/packages/uikit-playground/src/Context/action/renameScreenAction.ts
new file mode 100644
index 000000000000..8e94302549e7
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/renameScreenAction.ts
@@ -0,0 +1,16 @@
+import { ActionTypes } from "../reducer";
+
+type payloadType = {
+    id: string,
+    name: string,
+};
+
+export type RenameScreenAction = {
+  type: ActionTypes.RenameScreen,
+  payload: payloadType,
+};
+
+export const renameScreenAction = (payload: payloadType): RenameScreenAction => ({
+  type: ActionTypes.RenameScreen,
+  payload,
+});
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 67d21f7d2e7e..1b1a73b329ec 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -2,6 +2,7 @@ import type { LayoutBlock } from '@rocket.chat/ui-kit';
 
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
+import getDate from '../utils/getDate';
 
 export type idType = string;
 
@@ -34,19 +35,24 @@ export type actionPreviewType = {
   view?: readonly LayoutBlock[];
 };
 
+export type ScreenType = {
+  payload: readonly LayoutBlock[];
+  id: idType;
+  name: string;
+  surface: SurfaceOptions;
+  actionPreview: actionPreviewType;
+  date: string;
+  changedByEditor?: boolean;
+};
+
 export type ScreensType = {
-  [key: idType]: {
-    payload: readonly LayoutBlock[];
-    id: idType;
-    name: string;
-    surface: SurfaceOptions;
-    actionPreview: actionPreviewType;
-    changedByEditor?: boolean;
-  };
+  [key: idType]: ScreenType;
 };
 
+export type ProjectType = { id: idType; name: string; screens: idType[], date: string};
+
 export type ProjectsType = {
-  [key: idType]: { id: idType; name: string; screens: idType[] };
+  [key: idType]: ProjectType;
 };
 
 export type initialStateType = {
@@ -82,16 +88,18 @@ export const initialState: initialStateType = {
   projects: {
     [initialProjectId]: {
       id: initialProjectId,
-      name: 'Project1',
+      name: 'Untitled Project',
       screens: [initialScreenId],
+      date: getDate(),
     },
   },
   screens: {
     [initialScreenId]: {
       payload: [],
       id: initialScreenId,
-      name: 'Screen1',
+      name: 'Untitled Screen',
       surface: SurfaceOptions.Message,
+      date: getDate(),
       actionPreview: {},
     },
   },
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 227c92c07dfe..abeae928bc89 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -1,6 +1,5 @@
 import _ from 'lodash';
 
-import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 import type { initialStateType } from './initialState';
 import {
@@ -19,8 +18,15 @@ import {
   CreateNewScreenAction,
   DuplicateScreenAction,
   DeleteScreenAction,
+  RenameScreenAction,
   EditorTabsToggleAction,
+  CreateNewProjectAction,
+  ActiveProjectAction,
+  DuplicateProjectAction,
+  DeleteProjectAction,
+  RenameProjectAction,
 } from './action';
+import getDate from '../utils/getDate';
 
 type IAction =
   | IsMobileAction
@@ -38,7 +44,13 @@ type IAction =
   | ActiveScreenAction
   | CreateNewScreenAction
   | DuplicateScreenAction
-  | DeleteScreenAction;
+  | DeleteScreenAction
+  | RenameScreenAction
+  | CreateNewProjectAction
+  | ActiveProjectAction
+  | DuplicateProjectAction
+  | DeleteProjectAction
+  | RenameProjectAction;
 
 export enum ActionTypes {
   IsMobile,
@@ -57,6 +69,12 @@ export enum ActionTypes {
   CreateNewScreen,
   DuplicateScreen,
   DeleteScreen,
+  RenameScreen,
+  CreateNewProject,
+  ActiveProject,
+  DeleteProject,
+  DuplicateProject,
+  RenameProject,
 }
 
 const reducer = (state: initialStateType, action: IAction) => {
@@ -148,6 +166,10 @@ const reducer = (state: initialStateType, action: IAction) => {
         activeScreen: id,
       };
     }
+    case ActionTypes.RenameScreen: {
+      state.screens[action?.payload?.id].name = action.payload.name;
+      return { ...state };
+    }
     case ActionTypes.DeleteScreen: {
       delete state.screens[action.payload];
       state.projects[activeProject].screens = [
@@ -166,6 +188,81 @@ const reducer = (state: initialStateType, action: IAction) => {
       }
       return { ...state };
     }
+
+    case ActionTypes.CreateNewProject: {
+      const activeProjectId = getUniqueId();
+      const activeScreenId = getUniqueId();
+      return {
+        ...state,
+        projects: {
+          ...state.projects,
+          [activeProjectId]: {
+            id: activeProjectId,
+            name: action?.payload || 'Untitled Project',
+            screens: [activeScreenId],
+            date: getDate(),
+          },
+        },
+        activeProject: activeProjectId,
+        screens: {
+          ...state.screens,
+          [activeScreenId]: {
+            id: activeScreenId,
+            name: 'Untitled Screen',
+            date: getDate(),
+            payload: [],
+          },
+        },
+      };
+    }
+    case ActionTypes.ActiveProject:
+      return {
+        ...state,
+        activeProject: action.payload,
+        activeScreen: state.projects[action.payload].screens[0],
+      };
+
+    case ActionTypes.DuplicateProject: {
+      const activeProjectId = getUniqueId();
+      const screensIds = state.projects[action.payload.id].screens;
+      const newScreensIds = screensIds.map(() => getUniqueId());
+      const screens = _.cloneDeep(state.screens);
+      newScreensIds.forEach((id, index) => {
+        screens[id] = {
+          ...screens[screensIds[index]],
+          date: getDate(),
+          id,
+        };
+      });
+
+      return {
+        ...state,
+        projects: {
+          ...state.projects,
+          [activeProjectId]: {
+            id: activeProjectId,
+            name: action?.payload.name || 'Untitled Project',
+            screens: newScreensIds,
+            date: getDate(),
+          },
+        },
+        activeProject: activeProjectId,
+        screens: screens,
+      };
+    }
+
+      case ActionTypes.DeleteProject: {
+        delete state.projects[action.payload];
+        return {
+          ...state,
+          activeProject: '',
+          activeScreen: '',
+        }
+      }
+      case ActionTypes.RenameProject: {
+        state.projects[action.payload.id].name = action.payload.name;
+        return { ...state };
+      }
     default:
       return state;
   }
diff --git a/packages/uikit-playground/src/Pages/Home.tsx b/packages/uikit-playground/src/Pages/Home.tsx
new file mode 100644
index 000000000000..d33ee7250736
--- /dev/null
+++ b/packages/uikit-playground/src/Pages/Home.tsx
@@ -0,0 +1,16 @@
+import { Box, Scrollable } from '@rocket.chat/fuselage';
+import NavBar from '../Components/NavBar';
+import HomeContainer from '../Components/HomeContainer/HomeContainer';
+
+const Home = () => {
+  return (
+    <Box display={'flex'} flexDirection={'column'} w="100vw" h="100vh">
+      <NavBar />
+      <Scrollable>
+        <HomeContainer />
+      </Scrollable>
+    </Box>
+  );
+};
+
+export default Home;
diff --git a/packages/uikit-playground/src/Pages/SignInSignUp.tsx b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
index e2e2af78761f..fd8ec305abcf 100644
--- a/packages/uikit-playground/src/Pages/SignInSignUp.tsx
+++ b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
@@ -26,7 +26,7 @@ const labels = {
 const SignInSignUp = ({ route }: { route: string }) => {
   const navigate = useNavigate();
   const clickHandler = () => {
-    navigate(`/${route === routes.login ? routes.signup : routes.login}`);
+    navigate(route === routes.login ? routes.signup : routes.login);
   };
   return (
     <Flex.Container justifyContent="center" alignItems="center">
diff --git a/packages/uikit-playground/src/Routes/Routes.ts b/packages/uikit-playground/src/Routes/Routes.ts
index fe1bbda3c1b3..de3a695db0a7 100644
--- a/packages/uikit-playground/src/Routes/Routes.ts
+++ b/packages/uikit-playground/src/Routes/Routes.ts
@@ -1,8 +1,9 @@
 const routes = {
-  home: '',
-  login: 'login',
-  flow: 'flow',
-  signup: 'createnewworkspace',
+  home: '/home',
+  project: '/:project',
+  login: '/login',
+  flow: '/flow',
+  signup: '/createnewworkspace',
 };
 
 export default routes;
diff --git a/packages/uikit-playground/src/cssVariables.css b/packages/uikit-playground/src/cssVariables.css
index ceca8f9d6a16..4ab7a711539e 100644
--- a/packages/uikit-playground/src/cssVariables.css
+++ b/packages/uikit-playground/src/cssVariables.css
@@ -11,4 +11,6 @@
     --default-border: 1px solid #e6e6e6;
     --elements-border: 1px solid #b9b8b8;
     --elements-box-shadow:  0px 0px 8px 1px #ddd;
+    --navbar-height: min(60px, 25vw);
+    --content-height: calc(100vh - var(--navbar-height));
   }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/utils/formatDate.ts b/packages/uikit-playground/src/utils/formatDate.ts
new file mode 100644
index 000000000000..03bfeda2e6db
--- /dev/null
+++ b/packages/uikit-playground/src/utils/formatDate.ts
@@ -0,0 +1,5 @@
+import moment from "moment";
+
+export const formatDate = (date: string, type='ll') => {
+    return moment(date).format(type);
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/utils/getDate.ts b/packages/uikit-playground/src/utils/getDate.ts
new file mode 100644
index 000000000000..db14236db6a8
--- /dev/null
+++ b/packages/uikit-playground/src/utils/getDate.ts
@@ -0,0 +1,5 @@
+const getDate = () => {
+    return new Date().toISOString();
+}
+
+export default getDate;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 642ce97a90e5..b9d80c6a9b84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9038,7 +9038,8 @@ __metadata:
     "@rocket.chat/icons": next
     "@rocket.chat/logo": next
     "@rocket.chat/styled": next
-    "@rocket.chat/ui-contexts": "workspace:~"
+    "@rocket.chat/ui-contexts": "workspace:^"
+    "@types/prettier": ^2
     "@types/react": ~17.0.62
     "@types/react-beautiful-dnd": ^13.1.4
     "@types/react-dom": ~17.0.20
@@ -9051,6 +9052,8 @@ __metadata:
     eslint-plugin-react-hooks: ^4.6.0
     eslint-plugin-react-refresh: ^0.4.1
     eslint4b-prebuilt: ^6.7.2
+    moment: ^2.29.4
+    prettier: ^2.8.8
     rc-scrollbars: ^1.1.6
     react: ^17.0.2
     react-beautiful-dnd: ^13.1.1
@@ -31362,7 +31365,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.7.1, prettier@npm:~2.8.8":
+"prettier@npm:^2.7.1, prettier@npm:^2.8.8, prettier@npm:~2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:

From 85b14238a3cd49f6b5d5042dde865c0de4a0a260 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 8 Jul 2023 13:45:14 +0530
Subject: [PATCH 13/50] fix(uikit-playground): Fixed layout

---
 packages/uikit-playground/src/App.tsx         | 70 +++++++++++++------
 packages/uikit-playground/src/Pages/Home.tsx  |  4 +-
 .../uikit-playground/src/Pages/Playground.tsx | 27 +------
 .../src/Pages/SignInSignUp.tsx                |  2 +-
 4 files changed, 51 insertions(+), 52 deletions(-)

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 8fb980295b41..0ba4261f651b 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useContext, useEffect } from 'react';
 import './App.css';
 import './_global.css';
 import './cssVariables.css';
@@ -10,30 +10,56 @@ import Playground from './Pages/Playground';
 import SignInToWorkspace from './Pages/SignInSignUp';
 import routes from './Routes/Routes';
 import Home from './Pages/Home';
+import { context, isMobileAction, isTabletAction } from './Context';
+import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
+import NavMenu from './Components/navMenu/NavMenu';
+import NavBar from './Components/NavBar';
+import { Box } from '@rocket.chat/fuselage';
 
 function App() {
+  const {
+    state: { navMenuToggle },
+    dispatch,
+  } = useContext(context);
+
+  const [isMobile, isTablet] = useMediaQueries(
+    '(max-width: 630px)',
+    '(max-width: 1050px)'
+  );
+
+  useEffect(() => {
+    dispatch(isMobileAction(isMobile));
+  }, [isMobile, dispatch]);
+
+  useEffect(() => {
+    dispatch(isTabletAction(isTablet));
+  }, [isTablet, dispatch]);
   return (
-    <ToastBarProvider>
-      <BrowserRouter>
-        <Routes>
-          <Route element={<HomeLayout />}>
-            <Route
-              path={routes.login}
-              element={<SignInToWorkspace route={routes.login} />}
-            />
-            <Route
-              path={routes.signup}
-              element={<SignInToWorkspace route={routes.signup} />}
-            />
-          </Route>
-          {/* <Route element={<ProtectedLayout />}> */}
-          <Route path={routes.home} element={<Home />} />
-          <Route path={routes.project} element={<Playground />} />
-          <Route path={`*`} element={<Playground />} />
-          {/* </Route> */}
-        </Routes>
-      </BrowserRouter>
-    </ToastBarProvider>
+    <Box w="100vw" h="100vh" display="flex" flexDirection="column">
+      <ToastBarProvider>
+        <BrowserRouter>
+          <NavBar />
+          {navMenuToggle && <NavMenu />}
+          <Routes>
+            <Route element={<HomeLayout />}>
+              <Route
+                path={routes.login}
+                element={<SignInToWorkspace route={routes.login} />}
+              />
+              <Route
+                path={routes.signup}
+                element={<SignInToWorkspace route={routes.signup} />}
+              />
+            </Route>
+            {/* <Route element={<ProtectedLayout />}> */}
+            <Route path={routes.home} element={<Home />} />
+            <Route path={routes.project} element={<Playground />} />
+            <Route path={`*`} element={<Playground />} />
+            {/* </Route> */}
+          </Routes>
+        </BrowserRouter>
+      </ToastBarProvider>
+    </Box>
   );
 }
 
diff --git a/packages/uikit-playground/src/Pages/Home.tsx b/packages/uikit-playground/src/Pages/Home.tsx
index d33ee7250736..d935d24a88da 100644
--- a/packages/uikit-playground/src/Pages/Home.tsx
+++ b/packages/uikit-playground/src/Pages/Home.tsx
@@ -1,11 +1,9 @@
 import { Box, Scrollable } from '@rocket.chat/fuselage';
-import NavBar from '../Components/NavBar';
 import HomeContainer from '../Components/HomeContainer/HomeContainer';
 
 const Home = () => {
   return (
-    <Box display={'flex'} flexDirection={'column'} w="100vw" h="100vh">
-      <NavBar />
+    <Box display={'flex'} flexDirection={'column'} w="100%" flexGrow={1}>
       <Scrollable>
         <HomeContainer />
       </Scrollable>
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 1f072f22e58b..5e49229f8f33 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -1,37 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
 import type { FC } from 'react';
-import { useEffect, useContext } from 'react';
 
 import ComponentSideBar from '../Components/ComponentSideBar';
 import CreateNewScreenContainer from '../Components/CreateNewScreen/CreateNewScreenContainer';
-import NavBar from '../Components/NavBar';
 import Preview from '../Components/Preview';
 import Templates from '../Components/Templates';
-import NavMenu from '../Components/navMenu';
-import { context, isMobileAction, isTabletAction } from '../Context';
 
 const Playground: FC = () => {
-  const {
-    state: { navMenuToggle },
-    dispatch,
-  } = useContext(context);
-
-  const [isMobile, isTablet] = useMediaQueries(
-    '(max-width: 630px)',
-    '(max-width: 1050px)'
-  );
-
-  useEffect(() => {
-    dispatch(isMobileAction(isMobile));
-  }, [isMobile, dispatch]);
-
-  useEffect(() => {
-    dispatch(isTabletAction(isTablet));
-  }, [isTablet, dispatch]);
-
   return (
-    <Box position="relative" width={'100%'} height={'100%'}>
+    <Box position="relative" width={'100%'} flexGrow={1}>
       <CreateNewScreenContainer />
       <Templates />
       <Box
@@ -42,8 +19,6 @@ const Playground: FC = () => {
         overflow="hidden"
         bg={'var(--primaryBackgroundColor)'}
       >
-        <NavBar />
-        {navMenuToggle && <NavMenu />}
         <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
           <ComponentSideBar />
           <Preview />
diff --git a/packages/uikit-playground/src/Pages/SignInSignUp.tsx b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
index fd8ec305abcf..a95f5e184246 100644
--- a/packages/uikit-playground/src/Pages/SignInSignUp.tsx
+++ b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
@@ -30,7 +30,7 @@ const SignInSignUp = ({ route }: { route: string }) => {
   };
   return (
     <Flex.Container justifyContent="center" alignItems="center">
-      <Box w="100%" h="100%">
+      <Box w="100%" flexGrow={1}>
         <Flex.Container
           justifyContent="start"
           alignItems="center"

From 1cc10080286f9e77920cd43da4c93532df41f915 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 8 Jul 2023 14:55:43 +0530
Subject: [PATCH 14/50] chore(uikit-playground): Fixed routing

---
 packages/uikit-playground/src/App.tsx         | 13 ++---
 .../ProjectsList/ProjectsThumbnail.tsx        |  1 -
 .../src/Components/NavBar/NavBar.tsx          |  6 +-
 .../src/Components/Routes/HomeLayout.tsx      |  2 +-
 .../src/Components/Routes/ProtectedLayout.tsx |  2 +-
 .../src/Components/navMenu/NavMenu.tsx        | 10 ++--
 .../uikit-playground/src/Pages/Playground.tsx | 55 +++++++++++++------
 .../uikit-playground/src/Routes/Routes.ts     |  2 +-
 8 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 0ba4261f651b..71ccadb3360f 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -12,15 +12,11 @@ import routes from './Routes/Routes';
 import Home from './Pages/Home';
 import { context, isMobileAction, isTabletAction } from './Context';
 import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
-import NavMenu from './Components/navMenu/NavMenu';
-import NavBar from './Components/NavBar';
 import { Box } from '@rocket.chat/fuselage';
+import FlowDiagram from './Pages/FlowDiagram';
 
 function App() {
-  const {
-    state: { navMenuToggle },
-    dispatch,
-  } = useContext(context);
+  const { dispatch } = useContext(context);
 
   const [isMobile, isTablet] = useMediaQueries(
     '(max-width: 630px)',
@@ -38,8 +34,6 @@ function App() {
     <Box w="100vw" h="100vh" display="flex" flexDirection="column">
       <ToastBarProvider>
         <BrowserRouter>
-          <NavBar />
-          {navMenuToggle && <NavMenu />}
           <Routes>
             <Route element={<HomeLayout />}>
               <Route
@@ -53,8 +47,9 @@ function App() {
             </Route>
             {/* <Route element={<ProtectedLayout />}> */}
             <Route path={routes.home} element={<Home />} />
+            <Route path={routes.flow} element={<FlowDiagram />} />
             <Route path={routes.project} element={<Playground />} />
-            <Route path={`*`} element={<Playground />} />
+            <Route path={`*`} element={<Home />} />
             {/* </Route> */}
           </Routes>
         </BrowserRouter>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index e2dd6f18bfa7..90d209b16653 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -35,7 +35,6 @@ const ProjectsThumbnail = ({
   const { dispatch } = useContext(context);
   const toast = useToastBarDispatch();
   const activeProjectHandler = () => {
-    dispatch(activeProjectAction(id));
     navigate(`/${id}`);
   };
 
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index f52bab6b1d9e..d9e587b1fb73 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -9,14 +9,12 @@ import {
 } from '@rocket.chat/fuselage';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { context, updatePayloadAction } from '../../Context';
 import { openCreateNewScreenAction } from '../../Context/action/openCreateNewScreenAction';
 import routes from '../../Routes/Routes';
-import Divider from './Divider';
-import Logo from './Logo';
 import RightNavBtn from './RightNavBtn';
 
 const NabBar: FC = () => {
@@ -58,7 +56,7 @@ const NabBar: FC = () => {
                 <Button
                   small
                   onClick={() => {
-                    navigate(`/${routes.flow}`);
+                    navigate(`${routes.flow}`);
                   }}
                 >
                   Flow
diff --git a/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx b/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
index bfcf1c5d3501..e61def99ee3f 100644
--- a/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
+++ b/packages/uikit-playground/src/Components/Routes/HomeLayout.tsx
@@ -8,7 +8,7 @@ export const HomeLayout = () => {
   const outlet = useOutlet();
 
   if (user) {
-    return <Navigate to={`/${routes.home}`} replace />;
+    return <Navigate to={`${routes.home}`} replace />;
   }
 
   return <>{outlet}</>;
diff --git a/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx b/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
index c7ddcee2df81..e4195d322a38 100644
--- a/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
+++ b/packages/uikit-playground/src/Components/Routes/ProtectedLayout.tsx
@@ -8,7 +8,7 @@ export const ProtectedLayout = () => {
   const outlet = useOutlet();
 
   if (!user) {
-    return <Navigate to={`/${routes.login}`} />;
+    return <Navigate to={`${routes.login}`} />;
   }
 
   return <>{outlet}</>;
diff --git a/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx b/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
index d70bf9a02a46..8718c70ae367 100644
--- a/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/NavMenu.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext } from 'react';
 
 import { context, navMenuToggleAction } from '../../Context';
 import Menu from './Menu';
@@ -27,16 +27,16 @@ const NavMenu: FC = () => {
 
   return (
     <Box
-      position='absolute'
-      width='100%'
-      height='100%'
+      position="absolute"
+      width="100%"
+      height="100%"
       zIndex={3}
       bg={isOpen ? '#000000cc' : 'transparent'}
       className={css`
         user-select: none;
         transition: var(--animation-fast);
       `}
-      overflow='hidden'
+      overflow="hidden"
       onClick={toggleHandler}
     >
       <Menu isOpen={isOpen} />
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 5e49229f8f33..010c616a1a50 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -1,30 +1,53 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { Box } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
+import { useContext, type FC, useEffect } from 'react';
 
 import ComponentSideBar from '../Components/ComponentSideBar';
 import CreateNewScreenContainer from '../Components/CreateNewScreen/CreateNewScreenContainer';
 import Preview from '../Components/Preview';
 import Templates from '../Components/Templates';
+import { useNavigate, useParams } from 'react-router-dom';
+import { activeProjectAction, context } from '../Context';
+import routes from '../Routes/Routes';
+import NavMenu from '../Components/navMenu/NavMenu';
+import NavBar from '../Components/NavBar';
 
 const Playground: FC = () => {
+  const {
+    state: { navMenuToggle, projects },
+    dispatch,
+  } = useContext(context);
+  const { project: projectId = '' } = useParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!projects[projectId]) navigate(routes.home);
+    else dispatch(activeProjectAction(projectId));
+  }, []);
+
   return (
-    <Box position="relative" width={'100%'} flexGrow={1}>
-      <CreateNewScreenContainer />
-      <Templates />
-      <Box
-        display={'flex'}
-        width={'100%'}
-        height={'100%'}
-        flexDirection={'column'}
-        overflow="hidden"
-        bg={'var(--primaryBackgroundColor)'}
-      >
-        <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
-          <ComponentSideBar />
-          <Preview />
+    <>
+      {' '}
+      <NavBar />
+      {navMenuToggle && <NavMenu />}
+      <Box position="relative" width={'100%'} flexGrow={1}>
+        <CreateNewScreenContainer />
+        <Templates />
+        <Box
+          display={'flex'}
+          width={'100%'}
+          height={'100%'}
+          flexDirection={'column'}
+          overflow="hidden"
+          bg={'var(--primaryBackgroundColor)'}
+        >
+          <Box width={'100%'} flexGrow={1} position={'relative'} zIndex={0}>
+            <ComponentSideBar />
+            <Preview />
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/packages/uikit-playground/src/Routes/Routes.ts b/packages/uikit-playground/src/Routes/Routes.ts
index de3a695db0a7..77cbafac92f5 100644
--- a/packages/uikit-playground/src/Routes/Routes.ts
+++ b/packages/uikit-playground/src/Routes/Routes.ts
@@ -1,6 +1,6 @@
 const routes = {
   home: '/home',
-  project: '/:project',
+  project: ':project',
   login: '/login',
   flow: '/flow',
   signup: '/createnewworkspace',

From 03990829c2619b39d9ca79b9242bf124595fedd9 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 9 Jul 2023 17:38:09 +0530
Subject: [PATCH 15/50] refactor(uikit-playground): Added project specific
 routes

---
 packages/uikit-playground/src/App.tsx         |  7 ++++--
 .../FlowContainer/ConnectionLine.tsx          | 18 +++++++--------
 .../ControlButtons/ControlButtons.tsx         | 23 +++++++++++++++++++
 .../FlowContainer/ControlButtons/index.ts     |  1 +
 .../FlowContainer/FlowContainer.tsx           |  4 ++--
 .../ProjectsList/ProjectsThumbnail.tsx        |  5 ++--
 .../src/Components/NavBar/NavBar.tsx          | 13 ++++++-----
 .../Routes/ProjectSpecificLayout.tsx          | 22 ++++++++++++++++++
 .../uikit-playground/src/Pages/Playground.tsx | 17 +++-----------
 .../uikit-playground/src/Routes/Routes.ts     |  5 ++--
 packages/uikit-playground/src/_global.css     |  9 ++++++++
 11 files changed, 85 insertions(+), 39 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/ControlButtons/index.ts
 create mode 100644 packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 71ccadb3360f..69939708a984 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -14,6 +14,7 @@ import { context, isMobileAction, isTabletAction } from './Context';
 import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
 import { Box } from '@rocket.chat/fuselage';
 import FlowDiagram from './Pages/FlowDiagram';
+import { ProjectSpecificLayout } from './Components/Routes/ProjectSpecificLayout';
 
 function App() {
   const { dispatch } = useContext(context);
@@ -47,8 +48,10 @@ function App() {
             </Route>
             {/* <Route element={<ProtectedLayout />}> */}
             <Route path={routes.home} element={<Home />} />
-            <Route path={routes.flow} element={<FlowDiagram />} />
-            <Route path={routes.project} element={<Playground />} />
+            <Route path={routes.projectId} element={<ProjectSpecificLayout />}>
+              <Route path={routes.flow} element={<FlowDiagram />} />
+              <Route path={routes.project} element={<Playground />} />
+            </Route>
             <Route path={`*`} element={<Home />} />
             {/* </Route> */}
           </Routes>
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
index fdb6c2582a52..97f7b1c39aa4 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
@@ -1,19 +1,17 @@
-import React from 'react';
-
 const ConnectionLine = ({
   fromX,
   fromY,
   toX,
   toY,
 }: {
-  fromX: number,
-  fromY: number,
-  fromPosition: string,
-  toX: number,
-  toY: number,
-  toPosition: string,
-  connectionLineType: string,
-  connectionLineStyle?: any,
+  fromX: number;
+  fromY: number;
+  fromPosition: string;
+  toX: number;
+  toY: number;
+  toPosition: string;
+  connectionLineType: string;
+  connectionLineStyle?: any;
 }) => (
   <g>
     <path
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
new file mode 100644
index 000000000000..63b6bb5811b4
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
@@ -0,0 +1,23 @@
+import { Icon } from '@rocket.chat/fuselage';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Controls, ControlButton } from 'reactflow';
+import routes from '../../../Routes/Routes';
+
+const ControlButtons = () => {
+  const navigate = useNavigate();
+  const { projectId } = useParams();
+  return (
+    <Controls>
+      <ControlButton
+        onClick={() => navigate(`/${projectId}/${routes.project}`)}
+      >
+        <Icon name="home" size={'x16'} />
+      </ControlButton>
+      <ControlButton>
+        <Icon name="play-unfilled" size={'x16'} />
+      </ControlButton>
+    </Controls>
+  );
+};
+
+export default ControlButtons;
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/index.ts b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/index.ts
new file mode 100644
index 000000000000..63963693d46d
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/index.ts
@@ -0,0 +1 @@
+export {default} from './ControlButtons';
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 7abed4d92296..0baab99df80f 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useContext, useRef } from 'react';
 import ReactFlow, {
   MiniMap,
-  Controls,
   Background,
   useNodesState,
   useEdgesState,
@@ -14,6 +13,7 @@ import { context } from '../../Context';
 import ConnectionLine from './ConnectionLine';
 import UIKitWrapper from './UIKitWrapper';
 import { FlowParams, createNodesAndEdges } from './utils';
+import ControlButton from './ControlButtons';
 
 const nodeTypes = {
   custom: UIKitWrapper,
@@ -80,7 +80,7 @@ const FlowContainer = () => {
         connectionLineComponent={ConnectionLine}
       >
         <MiniMap zoomable pannable />
-        <Controls />
+        <ControlButton />
         <Background color="#aaa" gap={16} />
       </ReactFlow>
     </>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index 90d209b16653..e7e10d8dadb8 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -9,15 +9,14 @@ import {
   renameProjectAction,
 } from '../../../Context';
 import { ChangeEvent, useContext, useState } from 'react';
-import { activeProjectAction } from '../../../Context/action/activeProjectAction';
 import { useNavigate } from 'react-router-dom';
-import routes from '../../../Routes/Routes';
 import { formatDate } from '../../../utils/formatDate';
 import EditMenu from '../../ScreenThumbnail/EditMenu';
 import EditableLabel from '../../ScreenThumbnail/EditableLabel/EditableLabel';
 import { css } from '@rocket.chat/css-in-js';
 import { deleteProjectAction } from '../../../Context/action/deleteProjectAction';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
+import routes from '../../../Routes/Routes';
 
 const ProjectsThumbnail = ({
   id,
@@ -35,7 +34,7 @@ const ProjectsThumbnail = ({
   const { dispatch } = useContext(context);
   const toast = useToastBarDispatch();
   const activeProjectHandler = () => {
-    navigate(`/${id}`);
+    navigate(`/${id}/${routes.project}`);
   };
 
   const duplicateScreenHandler = () => {
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index d9e587b1fb73..e29afdb31236 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -18,7 +18,10 @@ import routes from '../../Routes/Routes';
 import RightNavBtn from './RightNavBtn';
 
 const NabBar: FC = () => {
-  const { state, dispatch } = useContext(context);
+  const {
+    state: { isMobile, activeProject, screens, activeScreen },
+    dispatch,
+  } = useContext(context);
   const toast = useToastBarDispatch();
   const navigate = useNavigate();
 
@@ -46,7 +49,7 @@ const NabBar: FC = () => {
           justifyContent={'flex-end'}
         >
           <Box display="flex" height="100%">
-            {!state?.isMobile && (
+            {!isMobile && (
               <ButtonGroup
                 pie={'20px'}
                 className={css`
@@ -56,7 +59,7 @@ const NabBar: FC = () => {
                 <Button
                   small
                   onClick={() => {
-                    navigate(`${routes.flow}`);
+                    navigate(`/${activeProject}/${routes.flow}`);
                   }}
                 >
                   Flow
@@ -90,9 +93,7 @@ const NabBar: FC = () => {
                   small
                   onClick={() => {
                     navigator.clipboard.writeText(
-                      JSON.stringify(
-                        state?.screens[state.activeScreen]?.payload
-                      )
+                      JSON.stringify(screens[activeScreen]?.payload)
                     );
                     toast({
                       type: 'success',
diff --git a/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx b/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx
new file mode 100644
index 000000000000..68cd25a02048
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx
@@ -0,0 +1,22 @@
+import { useNavigate, useOutlet, useParams } from 'react-router-dom';
+
+import routes from '../../Routes/Routes';
+import { useContext, useEffect } from 'react';
+import { activeProjectAction, context } from '../../Context';
+
+export const ProjectSpecificLayout = () => {
+  const {
+    state: { projects },
+    dispatch,
+  } = useContext(context);
+  const { projectId } = useParams();
+  const navigate = useNavigate();
+  const outlet = useOutlet();
+
+  useEffect(() => {
+    if (!projectId || !projects[projectId]) navigate(routes.home);
+    else dispatch(activeProjectAction(projectId));
+  }, []);
+
+  return <>{outlet}</>;
+};
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 010c616a1a50..4dd4deee7e8d 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -1,33 +1,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { Box } from '@rocket.chat/fuselage';
-import { useContext, type FC, useEffect } from 'react';
+import { useContext, type Fc } from 'react';
 
 import ComponentSideBar from '../Components/ComponentSideBar';
 import CreateNewScreenContainer from '../Components/CreateNewScreen/CreateNewScreenContainer';
 import Preview from '../Components/Preview';
 import Templates from '../Components/Templates';
-import { useNavigate, useParams } from 'react-router-dom';
-import { activeProjectAction, context } from '../Context';
-import routes from '../Routes/Routes';
+import { context } from '../Context';
 import NavMenu from '../Components/navMenu/NavMenu';
 import NavBar from '../Components/NavBar';
 
 const Playground: FC = () => {
   const {
-    state: { navMenuToggle, projects },
-    dispatch,
+    state: { navMenuToggle },
   } = useContext(context);
-  const { project: projectId = '' } = useParams();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!projects[projectId]) navigate(routes.home);
-    else dispatch(activeProjectAction(projectId));
-  }, []);
 
   return (
     <>
-      {' '}
       <NavBar />
       {navMenuToggle && <NavMenu />}
       <Box position="relative" width={'100%'} flexGrow={1}>
diff --git a/packages/uikit-playground/src/Routes/Routes.ts b/packages/uikit-playground/src/Routes/Routes.ts
index 77cbafac92f5..9a77e544dd93 100644
--- a/packages/uikit-playground/src/Routes/Routes.ts
+++ b/packages/uikit-playground/src/Routes/Routes.ts
@@ -1,8 +1,9 @@
 const routes = {
   home: '/home',
-  project: ':project',
+  project: 'project',
+  projectId: ':projectId',
   login: '/login',
-  flow: '/flow',
+  flow: 'flow',
   signup: '/createnewworkspace',
 };
 
diff --git a/packages/uikit-playground/src/_global.css b/packages/uikit-playground/src/_global.css
index 2d1df8cfd6bb..d4c714111c87 100644
--- a/packages/uikit-playground/src/_global.css
+++ b/packages/uikit-playground/src/_global.css
@@ -1,3 +1,5 @@
+@import url('./cssVariables.css');
+
 .react-flow__edges{
     z-index: 1000 !important;
 }
@@ -16,6 +18,13 @@
     
 }
 
+.react-flow__controls {
+    transform: translateX(25%) translateY(-25%) scale(1.5);
+    background: white;
+    display: flex;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;;
+  }
+
 /* .react-flow-sourceHandle{
     width: 8px !important; height: 12px !important;
     border-radius: 2px !important;

From 2d87331788a43afa4198a108fe74e43f7ba745c3 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Mon, 10 Jul 2023 21:30:27 +0530
Subject: [PATCH 16/50] refactor(uikit-playground): Moved Edit Menu

---
 .../CreateNewScreen/ScreenThumbnail.tsx       | 18 ++++++------
 .../ProjectsList/ProjectsThumbnail.tsx        | 19 ++++++------
 .../ScreenThumbnail/EditMenu/EditMenu.tsx     |  5 ++--
 .../ScreenThumbnailWrapper.tsx                | 27 ++---------------
 .../Components/ScreenThumbnail/Thumbnail.scss | 29 +++++++++++++++++++
 .../Components/ScreenThumbnail/Thumbnail.tsx  | 17 +++++------
 .../uikit-playground/src/cssVariables.css     |  4 ++-
 7 files changed, 65 insertions(+), 54 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss

diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index 93429270d237..34857f8fec01 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -58,16 +58,16 @@ const ScreenThumbnail = ({
   };
   return (
     <Box position="relative">
-      <EditMenu
-        name={name}
-        date={screen.date}
-        onChange={onChangeNameHandler}
-        onDuplicate={duplicateScreenHandler}
-        onDelete={deleteScreenHandler}
-        onBlur={nameSaveHandler}
-        labelProps={{ fontScale: 'h5' }}
-      />
       <ScreenThumbnailWrapper onClick={activateScreenHandler}>
+        <EditMenu
+          name={name}
+          date={screen.date}
+          onChange={onChangeNameHandler}
+          onDuplicate={duplicateScreenHandler}
+          onDelete={deleteScreenHandler}
+          onBlur={nameSaveHandler}
+          labelProps={{ fontScale: 'h5' }}
+        />
         <Thumbnail of={renderPayload({ payload: screen.payload })} />
       </ScreenThumbnailWrapper>
     </Box>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index e7e10d8dadb8..6ce79e385ae6 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -69,20 +69,21 @@ const ProjectsThumbnail = ({
       `}
       position="relative"
     >
-      <EditMenu
-        name={name}
-        date={date}
-        onChange={onChangeNameHandler}
-        onDuplicate={duplicateScreenHandler}
-        onDelete={deleteScreenHandler}
-        onBlur={nameSaveHandler}
-        labelProps={{ fontScale: 'h5' }}
-      />
       <ScreenThumbnailWrapper
         onClick={activeProjectHandler}
         width={'200px'}
         height="260px"
+        padding="30px"
       >
+        <EditMenu
+          name={name}
+          date={date}
+          onChange={onChangeNameHandler}
+          onDuplicate={duplicateScreenHandler}
+          onDelete={deleteScreenHandler}
+          onBlur={nameSaveHandler}
+          labelProps={{ fontScale: 'h5' }}
+        />
         <Thumbnail of={RenderPayload({ payload })} />
         <Box onClick={(e) => e.stopPropagation()}></Box>
       </ScreenThumbnailWrapper>
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
index 6a1aa8d9b221..9a507ec0af71 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
@@ -44,10 +44,11 @@ const EditMenu = ({
   return (
     <Box
       position="absolute"
-      insetBlockStart="5px"
-      insetInlineEnd="5px"
+      insetBlockStart="0px"
+      insetInlineEnd="0px"
       zIndex={100}
       ref={containerRef}
+      className="rc-edit-menu"
       onClick={() => setIsOpen(true)}
     >
       <Button ref={buttonRef} square mini>
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
index 17abc17236d2..66d8db9808f0 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
@@ -1,4 +1,4 @@
-import { css } from '@rocket.chat/css-in-js';
+import './Thumbnail.scss';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode, ComponentProps } from 'react';
 
@@ -13,29 +13,7 @@ const ScreenThumbnailWrapper = ({
   onClick?: ComponentProps<typeof Box>['onClick'];
   children: ReactNode;
 } & ComponentProps<typeof Box>) => (
-  <Box
-    w={width}
-    h={height}
-    bg="white"
-    border="var(--default-border)"
-    borderRadius="8px"
-    className={css`
-      display: grid;
-      place-items: center;
-      cursor: pointer;
-      overflow: hidden;
-      transition: var(--animation-very-fast);
-      &:hover {
-        transition: var(--animation-very-fast);
-        border: 1px solid var(--RCPG-tertary-color) !important;
-        .screenThumbnailBackdrop {
-          z-index: 10;
-          background: #cfcfcf20;
-          transition: var(--animation-very-fast);
-        }
-      }
-    `}
-  >
+  <Box w={width} h={height} className={'screen-thumbnail-wrapper'}>
     <Box
       w={width}
       h={height}
@@ -47,6 +25,7 @@ const ScreenThumbnailWrapper = ({
       w={`calc(${width} - ${padding})`}
       h={`calc(${height} - ${padding})`}
       position="relative"
+      overflow="hidden"
       onClick={onClick}
       {...props}
     >
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss
new file mode 100644
index 000000000000..c9e7c6b229a9
--- /dev/null
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss
@@ -0,0 +1,29 @@
+@import url('../../cssVariables.css');
+
+.screen-thumbnail-wrapper{
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    overflow: hidden;
+    transition: var(--animation-very-fast);
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0px 0px 0px 1px var(--item-border-color);
+
+    &:hover {
+      transition: var(--animation-very-fast);
+      box-shadow: 0px 0px 0px 1px var(--RCPG-tertary-color) !important;
+      .screenThumbnailBackdrop {
+        z-index: 10;
+        background: #cfcfcf20;
+        transition: var(--animation-very-fast);
+      }
+      .rc-edit-menu {
+        display: block;
+      }
+    }
+}
+
+.rc-edit-menu {
+    display: none;
+  }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
index daf2e5703806..c3e104d9def2 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode, ComponentProps } from 'react';
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useState, useEffect } from 'react';
 
 interface ThumbnailProps {
   of: ReactNode;
@@ -13,24 +13,23 @@ const Thumbnail: React.FC<ThumbnailProps & ComponentProps<typeof Box>> = ({
 }) => {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const elementRef = useRef<HTMLDivElement | null>(null);
+  const [scale, setScale] = useState(1);
 
-  const scale = useMemo(() => {
+  useEffect(() => {
     const pw = parentRef.current?.parentElement?.offsetWidth || 0;
-    const ph = parentRef.current?.parentElement?.offsetHeight || 0;
 
     const width = elementRef.current?.offsetWidth || 0;
-    const height = elementRef.current?.offsetHeight || 0;
 
-    const scale = Math.min(pw / width, ph / height);
-    return scale;
-  }, [elementRef.current?.offsetHeight, elementRef.current?.offsetWidth]);
+    setScale(pw / width);
+  }, [of]);
 
   return (
-    <Box overflow="hidden" ref={parentRef} {...props}>
+    <Box overflow="hidden" position="relative" ref={parentRef} {...props}>
       <Box
+        w={'max-content'}
         className={css`
           transform: scale(${scale});
-          transform-origin: top;
+          transform-origin: 0% 0%;
           pointer-events: none;
         `}
         ref={elementRef}
diff --git a/packages/uikit-playground/src/cssVariables.css b/packages/uikit-playground/src/cssVariables.css
index 4ab7a711539e..c6c8c3701629 100644
--- a/packages/uikit-playground/src/cssVariables.css
+++ b/packages/uikit-playground/src/cssVariables.css
@@ -3,12 +3,14 @@
     --RCPG-primary-color: #f5455c;
     --RCPG-secondary-color: #19ac7c;
     --RCPG-tertary-color: #156ff5;
+    --default-border-color: #e6e6e6;
+    --item-border-color: #d6d6d6;
     --animation-default:  0.5s ease;
     --animation-fast:  0.3s ease;
     --animation-very-fast:  0.1s ease;
     --sidebar-width: min(35%, 250px);
     --dropdown-box-shadow: inset -15px 15px 20px -30px rgb(47 52 61 / 55%);
-    --default-border: 1px solid #e6e6e6;
+    --default-border: 1px solid var(--default-border-color);
     --elements-border: 1px solid #b9b8b8;
     --elements-box-shadow:  0px 0px 8px 1px #ddd;
     --navbar-height: min(60px, 25vw);

From 342196e655812eb9f19ec0e9ee5bdaef02540549 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Mon, 10 Jul 2023 22:50:02 +0530
Subject: [PATCH 17/50] feat(uikik-playground): Added ContextualBar

---
 .../Display/RenderPayload/RenderPayload.tsx   |  34 ++++--
 .../Display/Surface/ContextualBarSurface.tsx  | 114 ++++++++++--------
 .../Preview/Display/Surface/Surface.tsx       |   2 +-
 .../Preview/Display/Surface/SurfaceRender.tsx |   4 +
 .../Preview/Display/Surface/constant.ts       |   3 +-
 .../src/Components/SurfaceSelect/options.ts   |   8 +-
 .../src/Payload/actionPreview/container.ts    |   4 +
 7 files changed, 100 insertions(+), 69 deletions(-)

diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index 508fbc89691f..8f07b9982d90 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -1,19 +1,27 @@
 import {
-	UiKitModal as uiKitModal,
-	UiKitBanner as uiKitBanner,
-	UiKitMessage as uiKitMessage,
-	UiKitContextualBar as uiKitContextualBar,
+  UiKitModal as uiKitModal,
+  UiKitBanner as uiKitBanner,
+  UiKitMessage as uiKitMessage,
+  UiKitContextualBar as uiKitContextualBar,
 } from '@rocket.chat/fuselage-ui-kit';
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
 
-const RenderPayload = ({ payload, surface = 1 }: { index?: number; payload: readonly LayoutBlock[]; surface?: number }) => {
-	const uiKitRender: { [key: number]: any } = {
-		'1': () => uiKitMessage(payload),
-		'2': () => uiKitBanner(payload),
-		'3': () => uiKitModal(payload),
-		'4': () => uiKitContextualBar(payload),
-	};
-	return <>{uiKitRender[surface]()}</>;
-};
+import { SurfaceOptions } from '../Surface/constant';
+
+const RenderPayload = ({
+  payload,
+  surface = 1,
+}: {
+  index?: number;
+  payload: readonly LayoutBlock[];
+  surface?: number;
+}) => (
+  <>
+    {SurfaceOptions.Message === surface && uiKitMessage(payload)}
+    {SurfaceOptions.Banner === surface && uiKitBanner(payload)}
+    {SurfaceOptions.Modal === surface && uiKitModal(payload)}
+    {SurfaceOptions.ContextualBar === surface && uiKitContextualBar(payload)}
+  </>
+);
 
 export default RenderPayload;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
index bd81f0ba0f3d..abba859a9182 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
@@ -1,60 +1,74 @@
 import {
-	Avatar,
-	Box,
-	Button,
-	ButtonGroup,
-	Contextualbar,
-	ContextualbarAction,
-	ContextualbarFooter,
-	ContextualbarHeader,
-	ContextualbarTitle,
-	Margins,
+  Avatar,
+  Box,
+  Button,
+  ButtonGroup,
+  Contextualbar,
+  ContextualbarAction,
+  ContextualbarFooter,
+  ContextualbarHeader,
+  ContextualbarTitle,
+  Margins,
 } from '@rocket.chat/fuselage';
 import { Scrollbars } from 'rc-scrollbars';
 import { useLayoutSizes } from '@rocket.chat/ui-contexts';
+import { ReactNode } from 'react';
 
-import DraggableList from '../../../Draggable/DraggableList';
-import type { DraggableListProps } from '../../../Draggable/DraggableList';
+const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
+  <Contextualbar h="100%" width={useLayoutSizes().contextualBar}>
+    <ContextualbarHeader>
+      <Avatar url="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
+      <ContextualbarTitle>{'Contextual Bar'}</ContextualbarTitle>
+      <ContextualbarAction
+        data-qa="ContextualbarActionClose"
+        title="Close"
+        name="cross"
+      />
+    </ContextualbarHeader>
 
-const ContextualBarSurface = ({ blocks, onDragEnd }: DraggableListProps) => (
-	<Contextualbar height='100%' width={useLayoutSizes().contextualBar} position='absolute'>
-		<ContextualbarHeader>
-			<Avatar url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />
-			<ContextualbarTitle>{'Contextual Bar'}</ContextualbarTitle>
-			<ContextualbarAction data-qa='ContextualbarActionClose' title='Close' name='cross' />
-		</ContextualbarHeader>
+    <Box height="100%" p="12px">
+      <Box
+        height="100%"
+        display="flex"
+        flexShrink={1}
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <Scrollbars
+          autoHide
+          autoHideTimeout={2000}
+          autoHideDuration={500}
+          style={{
+            width: '100%',
+            height: '100%',
+            flexGrow: 1,
+            willChange: 'transform',
+            overflowY: 'hidden',
+          }}
+          renderThumbVertical={({ style, ...props }): JSX.Element => (
+            <div
+              {...props}
+              style={{
+                ...style,
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                borderRadius: '7px',
+              }}
+            />
+          )}
+        >
+          <Margins blockEnd="x16">{children}</Margins>
+        </Scrollbars>
+      </Box>
+    </Box>
 
-		<Box height='100%' p='12px'>
-			<Box height='100%' display='flex' flexShrink={1} flexDirection='column' flexGrow={1} overflow='hidden'>
-				<Scrollbars
-					autoHide
-					autoHideTimeout={2000}
-					autoHideDuration={500}
-					style={{
-						width: '100%',
-						height: '100%',
-						flexGrow: 1,
-						willChange: 'transform',
-						overflowY: 'hidden',
-					}}
-					renderThumbVertical={({ style, ...props }): JSX.Element => (
-						<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: '7px' }} />
-					)}
-				>
-					<Margins blockEnd={16}>
-						<DraggableList surface={4} blocks={blocks} onDragEnd={onDragEnd} />
-					</Margins>
-				</Scrollbars>
-			</Box>
-		</Box>
-
-		<ContextualbarFooter>
-			<ButtonGroup stretch>
-				<Button>Cancel</Button>
-				<Button primary>Submit</Button>
-			</ButtonGroup>
-		</ContextualbarFooter>
-	</Contextualbar>
+    <ContextualbarFooter>
+      <ButtonGroup stretch>
+        <Button>Cancel</Button>
+        <Button primary>Submit</Button>
+      </ButtonGroup>
+    </ContextualbarFooter>
+  </Contextualbar>
 );
 
 export default ContextualBarSurface;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index 5eef0c4c0a60..6d5b82471a57 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -72,7 +72,7 @@ const Surface: FC = () => {
   };
 
   return (
-    <Box padding="20px">
+    <Box w="100%" h="100%" padding="20px">
       <UiKitContext.Provider
         value={{
           action: (a) => {
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
index 9f2b2f4f33d8..8554aacfe67f 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
@@ -5,6 +5,7 @@ import BannerSurface from './BannerSurface';
 import MessageSurface from './MessageSurface';
 import ModalSurface from './ModalSurface';
 import { SurfaceOptions } from './constant';
+import ContextualBarSurface from './ContextualBarSurface';
 
 const SurfaceRender = ({
   type = SurfaceOptions.Message,
@@ -21,6 +22,9 @@ const SurfaceRender = ({
       <BannerSurface>{children}</BannerSurface>
     )}
     {SurfaceOptions.Modal === type && <ModalSurface>{children}</ModalSurface>}
+    {SurfaceOptions.ContextualBar === type && (
+      <ContextualBarSurface>{children}</ContextualBarSurface>
+    )}
   </>
 );
 export default SurfaceRender;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
index fcdc6f26bfe3..d6e5cc395d25 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/constant.ts
@@ -1,5 +1,6 @@
 export enum SurfaceOptions {
     Message = 1,
     Banner,
-    Modal
+    Modal,
+    ContextualBar,
 }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
index 9747a704ab50..44c764601a47 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/options.ts
@@ -3,10 +3,10 @@ import { SurfaceOptions } from '../Preview/Display/Surface/constant';
 type SelectOption = [value: string, label: string, selected?: boolean];
 
 const options: SelectOption[] = [
-	['1', 'Message Preview'],
-	['2', 'Banner Preview'],
-	['3', 'Modal Preview'],
-	['4', 'ContextualBar Preview'],
+  [`${SurfaceOptions.Message}`, 'Message Preview'],
+  [`${SurfaceOptions.Banner}`, 'Banner Preview'],
+  [`${SurfaceOptions.Modal}`, 'Modal Preview'],
+  [`${SurfaceOptions.ContextualBar}`, 'Contextual Bar Preview'],
 ];
 
 export default options;
diff --git a/packages/uikit-playground/src/Payload/actionPreview/container.ts b/packages/uikit-playground/src/Payload/actionPreview/container.ts
index ddc6cf9708f1..b814ff81d58b 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/container.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/container.ts
@@ -19,5 +19,9 @@ const container: containerType = {
     type: 'modal',
     text: '',
   },
+  [SurfaceOptions.ContextualBar]: {
+    type: 'ContextualBar',
+    text: '',
+  },
 };
 export default container;

From 05cb1f58f5b6a258130df7d2b8b86ccf7e599ac2 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Wed, 12 Jul 2023 15:29:07 +0530
Subject: [PATCH 18/50] fix(uikit-playground): Saving edges state

---
 .../FlowContainer/FlowContainer.tsx           | 35 ++++++++++---------
 .../src/Components/FlowContainer/utils.ts     |  6 ++--
 .../src/Context/action/index.ts               |  2 ++
 .../Context/action/updateFlowEdgesAction.ts   | 12 +++++++
 .../src/Context/initialState.ts               |  4 ++-
 .../uikit-playground/src/Context/reducer.ts   | 13 ++++++-
 6 files changed, 51 insertions(+), 21 deletions(-)
 create mode 100644 packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts

diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 0baab99df80f..9a2033ccfc05 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
@@ -9,7 +9,7 @@ import ReactFlow, {
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
-import { context } from '../../Context';
+import { context, updateFlowEdgesAction } from '../../Context';
 import ConnectionLine from './ConnectionLine';
 import UIKitWrapper from './UIKitWrapper';
 import { FlowParams, createNodesAndEdges } from './utils';
@@ -21,29 +21,32 @@ const nodeTypes = {
 
 const FlowContainer = () => {
   const {
-    state: { screens },
+    state: { screens, projects, activeProject },
+    dispatch,
   } = useContext(context);
 
-  const { nodes: initialNodes } = createNodesAndEdges(screens);
+  const { nodes: initialNodes } = createNodesAndEdges(
+    projects[activeProject].screens.map((id) => screens[id])
+  );
 
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(
+    projects[activeProject].flowEdges
+  );
   const edgeUpdateSuccessful = useRef(true);
 
   const onConnect = useCallback(
     (params) => {
+      window.console.log({ params });
       if (params.source === params.target) return;
-      setEdges((eds) =>
-        addEdge(
-          {
-            ...params,
-            type: FlowParams.edgeType,
-            markerEnd: FlowParams.markerEnd,
-            style: FlowParams.style,
-          },
-          eds
-        )
-      );
+      const newEdge = {
+        ...params,
+        type: FlowParams.edgeType,
+        markerEnd: FlowParams.markerEnd,
+        style: FlowParams.style,
+      };
+      dispatch(updateFlowEdgesAction(newEdge));
+      setEdges((eds) => addEdge(newEdge, eds));
     },
     [setEdges]
   );
diff --git a/packages/uikit-playground/src/Components/FlowContainer/utils.ts b/packages/uikit-playground/src/Components/FlowContainer/utils.ts
index a09148ac4989..2318fe1f1efc 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/utils.ts
+++ b/packages/uikit-playground/src/Components/FlowContainer/utils.ts
@@ -1,11 +1,11 @@
 import { MarkerType } from 'reactflow';
 
-import type { ScreensType } from '../../Context/initialState';
+import type { ScreenType } from '../../Context/initialState';
 
-export function createNodesAndEdges(screens: ScreensType) {
+export function createNodesAndEdges(screens: ScreenType[]) {
   const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
 
-  const nodes = Object.values(screens).map((screen, i) => {
+  const nodes = screens.map((screen, i) => {
     const degrees = i * (360 / 8);
     const radians = degrees * (Math.PI / 180);
     const x = 250 * Math.cos(radians) + center.x;
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index 8245d0be559f..10fc34b0499f 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -20,6 +20,7 @@ export { activeProjectAction } from './activeProjectAction';
 export { duplicateProjectAction } from './duplicateProjectAction';
 export { deleteProjectAction } from './deleteProjectAction';
 export { renameProjectAction } from './renameProjectAction';
+export { updateFlowEdgesAction } from './updateFlowEdgesAction';
 
 export type { IsMobileAction } from './isMobileAction';
 export type { IsTabletAction } from './isTabletAction';
@@ -43,4 +44,5 @@ export type { ActiveProjectAction } from './activeProjectAction';
 export type { DuplicateProjectAction } from './duplicateProjectAction';
 export type { DeleteProjectAction } from './deleteProjectAction';
 export type { RenameProjectAction } from './renameProjectAction';
+export type { UpdateFlowEdgesAction } from './updateFlowEdgesAction';
 
diff --git a/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts b/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts
new file mode 100644
index 000000000000..4e699261eb84
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts
@@ -0,0 +1,12 @@
+import { Edge } from "reactflow";
+import { ActionTypes } from "../reducer";
+
+export type UpdateFlowEdgesAction = {
+  type: ActionTypes.UpdateFlowEdges,
+  payload: Edge,
+};
+
+export const updateFlowEdgesAction = (payload: Edge): UpdateFlowEdgesAction => ({
+  type: ActionTypes.UpdateFlowEdges,
+  payload,
+});
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 1b1a73b329ec..090238742011 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -3,6 +3,7 @@ import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 import getDate from '../utils/getDate';
+import { Edge } from 'reactflow';
 
 export type idType = string;
 
@@ -49,7 +50,7 @@ export type ScreensType = {
   [key: idType]: ScreenType;
 };
 
-export type ProjectType = { id: idType; name: string; screens: idType[], date: string};
+export type ProjectType = { id: idType; name: string; screens: idType[], date: string, flowEdges: Edge[]};
 
 export type ProjectsType = {
   [key: idType]: ProjectType;
@@ -91,6 +92,7 @@ export const initialState: initialStateType = {
       name: 'Untitled Project',
       screens: [initialScreenId],
       date: getDate(),
+      flowEdges: [],
     },
   },
   screens: {
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index abeae928bc89..7694d08de30e 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -25,6 +25,7 @@ import {
   DuplicateProjectAction,
   DeleteProjectAction,
   RenameProjectAction,
+  UpdateFlowEdgesAction,
 } from './action';
 import getDate from '../utils/getDate';
 
@@ -50,7 +51,8 @@ type IAction =
   | ActiveProjectAction
   | DuplicateProjectAction
   | DeleteProjectAction
-  | RenameProjectAction;
+  | RenameProjectAction
+  | UpdateFlowEdgesAction;
 
 export enum ActionTypes {
   IsMobile,
@@ -75,6 +77,7 @@ export enum ActionTypes {
   DeleteProject,
   DuplicateProject,
   RenameProject,
+  UpdateFlowEdges,
 }
 
 const reducer = (state: initialStateType, action: IAction) => {
@@ -263,6 +266,14 @@ const reducer = (state: initialStateType, action: IAction) => {
         state.projects[action.payload.id].name = action.payload.name;
         return { ...state };
       }
+
+      case ActionTypes.UpdateFlowEdges: {
+        let prevEdges = state.projects[activeProject].flowEdges;
+        prevEdges = [...prevEdges, action.payload]
+        window.console.log(prevEdges);
+        state.projects[activeProject].flowEdges = prevEdges;
+        return { ...state };
+      }
     default:
       return state;
   }

From d15af3ef091cb30f2bc928564c20ed670ed10ede Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 15 Jul 2023 17:34:00 +0530
Subject: [PATCH 19/50] Fix(uikit-playground): preserve flow edges after
 reorder from dnd

---
 .../src/Components/Draggable/DraggableList.tsx            | 4 ++--
 .../uikit-playground/src/Components/DropDown/Items.tsx    | 7 +++++--
 .../src/Components/FlowContainer/UIKitWrapper.tsx         | 8 ++++----
 .../Preview/Display/RenderPayload/RenderPayload.tsx       | 4 ++--
 .../src/Context/action/updatePayloadAction.ts             | 4 ++--
 packages/uikit-playground/src/Context/initialState.ts     | 6 ++++--
 6 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
index 65fd51fd90ac..af48ac55539f 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableList.tsx
@@ -1,14 +1,14 @@
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import React from 'react';
 import type { OnDragEndResponder } from 'react-beautiful-dnd';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 import DraggableListItem from './DraggableListItem';
 import { SurfaceOptions } from '../Preview/Display/Surface/constant';
+import { ILayoutBlock } from '../../Context/initialState';
 
 export type Block = {
   id: string;
-  payload: LayoutBlock;
+  payload: ILayoutBlock;
 };
 
 export type DraggableListProps = {
diff --git a/packages/uikit-playground/src/Components/DropDown/Items.tsx b/packages/uikit-playground/src/Components/DropDown/Items.tsx
index 23bda2f1d688..84eca2f88e8b 100644
--- a/packages/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/Items.tsx
@@ -6,19 +6,22 @@ import { context, updatePayloadAction } from '../../Context';
 import ItemsIcon from './ItemsIcon';
 import { itemStyle, labelStyle } from './itemsStyle';
 import type { ItemProps } from './types';
+import getUniqueId from '../../utils/getUniqueId';
 
 const Items = ({ label, children, layer, payload }: ItemProps) => {
   const [isOpen, toggleItemOpen] = useState<boolean>(layer === 1);
   const [hover, setHover] = useState<boolean>(false);
   const { state, dispatch } = useContext(context);
-  console.log(state);
 
   const itemClickHandler = () => {
     toggleItemOpen(!isOpen);
     payload &&
       dispatch(
         updatePayloadAction({
-          payload: [...state.screens[state.activeScreen].payload, payload[0]],
+          payload: [
+            ...state.screens[state.activeScreen].payload,
+            { actionId: getUniqueId(), ...payload[0] },
+          ],
           changedByEditor: false,
         })
       );
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
index 00ed32671c6b..c75208af5e7c 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
@@ -1,12 +1,12 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Handle, Position } from 'reactflow';
 
-import type { docType } from '../../Context/initialState';
 import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
 import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
+import { ScreenType } from '../../Context/initialState';
 
-const UIKitWrapper = ({ id, data }: { id: string, data: docType }) => (
+const UIKitWrapper = ({ id, data }: { id: string; data: ScreenType }) => (
   <Box
     padding="10px"
     border="var(--default-border)"
@@ -32,7 +32,7 @@ const UIKitWrapper = ({ id, data }: { id: string, data: docType }) => (
             type="source"
             className="react-flow-sourceHandle"
             position={Position.Right}
-            id={`${id}-${index}`}
+            id={payload.actionId}
           />
         </Box>
       ))}
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index 8f07b9982d90..9a7f5cf78ad2 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -4,16 +4,16 @@ import {
   UiKitMessage as uiKitMessage,
   UiKitContextualBar as uiKitContextualBar,
 } from '@rocket.chat/fuselage-ui-kit';
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
 
 import { SurfaceOptions } from '../Surface/constant';
+import { ILayoutBlock } from '../../../../Context/initialState';
 
 const RenderPayload = ({
   payload,
   surface = 1,
 }: {
   index?: number;
-  payload: readonly LayoutBlock[];
+  payload: ILayoutBlock[];
   surface?: number;
 }) => (
   <>
diff --git a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
index 3ad445aa10d9..dbe4558cdcd8 100644
--- a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
+++ b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
@@ -1,8 +1,8 @@
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { ILayoutBlock } from '../initialState';
 import { ActionTypes } from '../reducer';
 
 type PayloadType ={
-  payload: readonly LayoutBlock[];
+  payload: ILayoutBlock[];
   changedByEditor?: boolean;
 }
 
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 090238742011..908080d2ac77 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -33,11 +33,13 @@ export type actionPreviewType = {
   action?: object;
   response_url?: string;
   state?: object;
-  view?: readonly LayoutBlock[];
+  view?: ILayoutBlock[];
 };
 
+export type ILayoutBlock = {actionId: string} & LayoutBlock;
+
 export type ScreenType = {
-  payload: readonly LayoutBlock[];
+  payload: ILayoutBlock[];
   id: idType;
   name: string;
   surface: SurfaceOptions;

From 8f3494a73d385f23177b014573b1645482d6cb0e Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 16 Jul 2023 13:57:34 +0530
Subject: [PATCH 20/50] fix(Uikit-playground): fix syntax highlighting in
 codemirror

---
 packages/uikit-playground/package.json                        | 2 +-
 .../Preview/Display/Surface/ContextualBarSurface.tsx          | 3 +--
 yarn.lock                                                     | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index c93b81021ca6..c8daf4c74692 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -13,7 +13,7 @@
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/tooltip": "^0.19.16",
-    "@lezer/highlight": "^1.1.6",
+    "@lezer/highlight": "^1.0.0",
     "@rocket.chat/css-in-js": "next",
     "@rocket.chat/fuselage": "next",
     "@rocket.chat/fuselage-hooks": "next",
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
index abba859a9182..3e2af2a2dd53 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
@@ -11,11 +11,10 @@ import {
   Margins,
 } from '@rocket.chat/fuselage';
 import { Scrollbars } from 'rc-scrollbars';
-import { useLayoutSizes } from '@rocket.chat/ui-contexts';
 import { ReactNode } from 'react';
 
 const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
-  <Contextualbar h="100%" width={useLayoutSizes().contextualBar}>
+  <Contextualbar>
     <ContextualbarHeader>
       <Avatar url="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />
       <ContextualbarTitle>{'Contextual Bar'}</ContextualbarTitle>
diff --git a/yarn.lock b/yarn.lock
index b9d80c6a9b84..c09a0bf09916 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4182,7 +4182,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3, @lezer/highlight@npm:^1.1.6":
+"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.1.3":
   version: 1.1.6
   resolution: "@lezer/highlight@npm:1.1.6"
   dependencies:
@@ -9027,7 +9027,7 @@ __metadata:
     "@codemirror/lang-javascript": ^6.1.9
     "@codemirror/lang-json": ^6.0.1
     "@codemirror/tooltip": ^0.19.16
-    "@lezer/highlight": ^1.1.6
+    "@lezer/highlight": ^1.0.0
     "@rocket.chat/css-in-js": next
     "@rocket.chat/fuselage": next
     "@rocket.chat/fuselage-hooks": next

From c91807b43281d5b416a855a5c4592cf68f5d92ea Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 16 Jul 2023 14:24:01 +0530
Subject: [PATCH 21/50] fix(Uikit-playground): fix contextual bar

---
 .../FlowContainer/FlowContainer.tsx           |  2 +-
 .../Components/FlowContainer/UIKitWrapper.tsx | 43 ------------------
 .../UIKitWrapper/UIKitWrapper.scss            |  7 +++
 .../UIKitWrapper/UIKitWrapper.tsx             | 45 +++++++++++++++++++
 .../FlowContainer/UIKitWrapper/index.ts       |  1 +
 .../Display/Surface/ContextualBarSurface.tsx  |  7 ++-
 6 files changed, 57 insertions(+), 48 deletions(-)
 delete mode 100644 packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.scss
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
 create mode 100644 packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/index.ts

diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 9a2033ccfc05..00797817f874 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -11,7 +11,7 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import { context, updateFlowEdgesAction } from '../../Context';
 import ConnectionLine from './ConnectionLine';
-import UIKitWrapper from './UIKitWrapper';
+import UIKitWrapper from './UIKitWrapper/UIKitWrapper';
 import { FlowParams, createNodesAndEdges } from './utils';
 import ControlButton from './ControlButtons';
 
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
deleted file mode 100644
index c75208af5e7c..000000000000
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import { memo } from 'react';
-import { Handle, Position } from 'reactflow';
-
-import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
-import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
-import { ScreenType } from '../../Context/initialState';
-
-const UIKitWrapper = ({ id, data }: { id: string; data: ScreenType }) => (
-  <Box
-    padding="10px"
-    border="var(--default-border)"
-    bg="white"
-    borderRadius={'10px'}
-  >
-    <Handle
-      type="target"
-      className={'react-flow-targetHandle'}
-      position={Position.Left}
-      id={`${id}`}
-    />
-    <SurfaceRender type={data.surface}>
-      {data.payload.map((payload, index) => (
-        <Box
-          position="relative"
-          border="var(--default-border)"
-          padding="10px"
-          className="uiKitWrapper"
-        >
-          <RenderPayload payload={[payload]} surface={data.surface} />
-          <Handle
-            type="source"
-            className="react-flow-sourceHandle"
-            position={Position.Right}
-            id={payload.actionId}
-          />
-        </Box>
-      ))}
-    </SurfaceRender>
-  </Box>
-);
-
-export default memo(UIKitWrapper);
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.scss b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.scss
new file mode 100644
index 000000000000..cc3f56cc7990
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.scss
@@ -0,0 +1,7 @@
+.rc-scrollbars-view{
+    position: relative !important;
+    overflow: hidden !important;
+    width: 100% !important;
+    z-index: 1000 !important;
+    margin: 0 !important;
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
new file mode 100644
index 000000000000..8c3e1277afa9
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -0,0 +1,45 @@
+import { Box } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import './UIKitWrapper.scss';
+
+import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
+import { ScreenType } from '../../../Context/initialState';
+
+const UIKitWrapper = ({ id, data }: { id: string; data: ScreenType }) => (
+  <Box
+    padding="10px"
+    border="var(--default-border)"
+    bg="white"
+    borderRadius={'10px'}
+  >
+    <Handle
+      type="target"
+      className={'react-flow-targetHandle'}
+      position={Position.Left}
+      id={`${id}`}
+    />
+    <SurfaceRender type={data.surface}>
+      {data.payload.map((payload, index) => (
+        <Box pie="6px" className="uiKitWrapper">
+          <Box
+            position="relative"
+            border="var(--default-border)"
+            padding="10px"
+          >
+            <RenderPayload payload={[payload]} surface={data.surface} />
+            <Handle
+              type="source"
+              className="react-flow-sourceHandle"
+              position={Position.Right}
+              id={payload.actionId}
+            />
+          </Box>
+        </Box>
+      ))}
+    </SurfaceRender>
+  </Box>
+);
+
+export default memo(UIKitWrapper);
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/index.ts b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/index.ts
new file mode 100644
index 000000000000..82f4f03d69d3
--- /dev/null
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/index.ts
@@ -0,0 +1 @@
+export {default} from './UIKitWrapper';
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
index 3e2af2a2dd53..cd02667d0883 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
@@ -1,3 +1,4 @@
+import { css } from '@rocket.chat/css-in-js';
 import {
   Avatar,
   Box,
@@ -11,7 +12,7 @@ import {
   Margins,
 } from '@rocket.chat/fuselage';
 import { Scrollbars } from 'rc-scrollbars';
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
   <Contextualbar>
@@ -32,7 +33,6 @@ const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
         flexShrink={1}
         flexDirection="column"
         flexGrow={1}
-        overflow="hidden"
       >
         <Scrollbars
           autoHide
@@ -42,7 +42,6 @@ const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
             width: '100%',
             height: '100%',
             flexGrow: 1,
-            willChange: 'transform',
             overflowY: 'hidden',
           }}
           renderThumbVertical={({ style, ...props }): JSX.Element => (
@@ -56,7 +55,7 @@ const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
             />
           )}
         >
-          <Margins blockEnd="x16">{children}</Margins>
+          <div>{children}</div>
         </Scrollbars>
       </Box>
     </Box>

From 69970380fe8a884dca872dd9f6a04cf9b19103f2 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 23 Jul 2023 21:20:18 +0530
Subject: [PATCH 22/50] refactor(uikit-playground): added useNodesAndEdges hook

---
 .../src/hooks/useNodesAndEdges.ts             | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 packages/uikit-playground/src/hooks/useNodesAndEdges.ts

diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
new file mode 100644
index 000000000000..0e6126c1c00a
--- /dev/null
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -0,0 +1,48 @@
+import { MarkerType } from 'reactflow';
+import { useContext, useMemo } from 'react';
+import { context } from '../Context';
+export function useNodesAndEdges() {
+  const {
+    state: { screens, projects, activeProject },
+  } = useContext(context);
+
+  const nodes = useMemo(() => {
+    const prevNodes = projects[activeProject].flowNodes;
+    const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+    const activeScreens = projects[activeProject].screens.map(
+      (id) => screens[id]
+    );
+    activeScreens.map((screen, i) => {
+      if (prevNodes.map((node) => node.id).includes(screen.id)) return;
+
+      const degrees = i * (360 / 8);
+      const radians = degrees * (Math.PI / 180);
+      const x = 2500 * Math.cos(radians) + center.x;
+      const y = 2500 * Math.sin(radians) + center.y;
+
+      prevNodes.push({
+        id: screen.id,
+        type: 'custom',
+        position: { x, y },
+        data: screen.id,
+      });
+    });
+    return prevNodes;
+  }, []);
+
+  const edges = projects[activeProject].flowEdges;
+  const Viewport = projects[activeProject].viewport;
+
+  return { nodes, edges, Viewport };
+}
+
+export const FlowParams = {
+  edgeType: 'smoothstep',
+  markerEnd: {
+    type: MarkerType.Arrow,
+  },
+  style: {
+    strokeWidth: 2,
+    stroke: 'var(--RCPG-primary-color)',
+  },
+};

From 29c49a4c40a5e00c95561233da2cd2bea90bf3a2 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 23 Jul 2023 21:26:45 +0530
Subject: [PATCH 23/50] fix(uikit-playground): added psition save on reactflow

---
 packages/uikit-playground/src/App.tsx         |  1 +
 .../FlowContainer/FlowContainer.tsx           | 45 +++++++----
 .../UIKitWrapper/UIKitWrapper.tsx             | 77 ++++++++++---------
 .../ProjectsList/ProjectsThumbnail.tsx        |  1 -
 .../src/Context/action/index.ts               |  5 +-
 .../action/updateNodesAndViewPortAction.ts    | 19 +++++
 .../src/Context/initialState.ts               | 16 +++-
 .../uikit-playground/src/Context/reducer.ts   | 50 +++++++-----
 .../src/Pages/FlowDiagram.tsx                 |  6 +-
 9 files changed, 144 insertions(+), 76 deletions(-)
 create mode 100644 packages/uikit-playground/src/Context/action/updateNodesAndViewPortAction.ts

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 69939708a984..7e60bf6e198c 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -51,6 +51,7 @@ function App() {
             <Route path={routes.projectId} element={<ProjectSpecificLayout />}>
               <Route path={routes.flow} element={<FlowDiagram />} />
               <Route path={routes.project} element={<Playground />} />
+              {/* <Route path={routes.prototype} element={<Playground />} /> */}
             </Route>
             <Route path={`*`} element={<Home />} />
             {/* </Route> */}
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 00797817f874..792bcf0f1c40 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
@@ -6,38 +6,42 @@ import ReactFlow, {
   useEdgesState,
   addEdge,
   updateEdge,
+  Node,
+  Viewport,
+  ReactFlowInstance,
+  useReactFlow,
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
 import { context, updateFlowEdgesAction } from '../../Context';
 import ConnectionLine from './ConnectionLine';
 import UIKitWrapper from './UIKitWrapper/UIKitWrapper';
-import { FlowParams, createNodesAndEdges } from './utils';
+import { FlowParams } from './utils';
 import ControlButton from './ControlButtons';
+import { useNodesAndEdges } from '../../hooks/useNodesAndEdges';
+import { updateNodesAndViewPortAction } from '../../Context/action/updateNodesAndViewPortAction';
 
 const nodeTypes = {
   custom: UIKitWrapper,
 };
 
 const FlowContainer = () => {
-  const {
-    state: { screens, projects, activeProject },
-    dispatch,
-  } = useContext(context);
+  const { dispatch } = useContext(context);
 
-  const { nodes: initialNodes } = createNodesAndEdges(
-    projects[activeProject].screens.map((id) => screens[id])
-  );
+  const {
+    nodes: initialNodes,
+    edges: initialEdges,
+    Viewport,
+  } = useNodesAndEdges();
+  const { setViewport } = useReactFlow();
 
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(
-    projects[activeProject].flowEdges
-  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
   const edgeUpdateSuccessful = useRef(true);
 
   const onConnect = useCallback(
     (params) => {
-      window.console.log({ params });
       if (params.source === params.target) return;
       const newEdge = {
         ...params,
@@ -67,19 +71,34 @@ const FlowContainer = () => {
     edgeUpdateSuccessful.current = true;
   }, []);
 
+  const onNodeDragStop = () => {
+    if (!rfInstance?.toObject()) return;
+    const { nodes, viewport }: { nodes: Node[]; viewport: Viewport } =
+      rfInstance.toObject();
+    dispatch(updateNodesAndViewPortAction({ nodes, viewport }));
+  };
+
+  const onInit = (instance: ReactFlowInstance) => {
+    setRfInstance(instance);
+    Viewport && setViewport(Viewport);
+  };
+
   return (
     <>
       <ReactFlow
         nodes={nodes}
         edges={edges}
+        onInit={onInit}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onEdgeUpdate={onEdgeUpdate}
+        onNodeDragStop={onNodeDragStop}
         onEdgeUpdateStart={onEdgeUpdateStart}
         onEdgeUpdateEnd={onEdgeUpdateEnd}
         onConnect={onConnect}
         fitView
         nodeTypes={nodeTypes}
+        minZoom={0.1}
         connectionLineComponent={ConnectionLine}
       >
         <MiniMap zoomable pannable />
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index 8c3e1277afa9..c22b14ca2f7a 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -1,45 +1,52 @@
 import { Box } from '@rocket.chat/fuselage';
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 import { Handle, Position } from 'reactflow';
 import './UIKitWrapper.scss';
 
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
 import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
-import { ScreenType } from '../../../Context/initialState';
+import { idType } from '../../../Context/initialState';
+import { context } from '../../../Context';
 
-const UIKitWrapper = ({ id, data }: { id: string; data: ScreenType }) => (
-  <Box
-    padding="10px"
-    border="var(--default-border)"
-    bg="white"
-    borderRadius={'10px'}
-  >
-    <Handle
-      type="target"
-      className={'react-flow-targetHandle'}
-      position={Position.Left}
-      id={`${id}`}
-    />
-    <SurfaceRender type={data.surface}>
-      {data.payload.map((payload, index) => (
-        <Box pie="6px" className="uiKitWrapper">
-          <Box
-            position="relative"
-            border="var(--default-border)"
-            padding="10px"
-          >
-            <RenderPayload payload={[payload]} surface={data.surface} />
-            <Handle
-              type="source"
-              className="react-flow-sourceHandle"
-              position={Position.Right}
-              id={payload.actionId}
-            />
+const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
+  const {
+    state: { screens },
+  } = useContext(context);
+  const { payload, surface } = screens[data];
+  return (
+    <Box
+      padding="10px"
+      border="var(--default-border)"
+      bg="white"
+      borderRadius={'10px'}
+    >
+      <Handle
+        type="target"
+        className={'react-flow-targetHandle'}
+        position={Position.Left}
+        id={`${id}`}
+      />
+      <SurfaceRender type={surface}>
+        {payload.map((payload, index) => (
+          <Box key={index} pie="6px" className="uiKitWrapper">
+            <Box
+              position="relative"
+              border="var(--default-border)"
+              padding="10px"
+            >
+              <RenderPayload payload={[payload]} surface={surface} />
+              <Handle
+                type="source"
+                className="react-flow-sourceHandle"
+                position={Position.Right}
+                id={payload.actionId}
+              />
+            </Box>
           </Box>
-        </Box>
-      ))}
-    </SurfaceRender>
-  </Box>
-);
+        ))}
+      </SurfaceRender>
+    </Box>
+  );
+};
 
 export default memo(UIKitWrapper);
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index 6ce79e385ae6..a56ec47a7225 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -49,7 +49,6 @@ const ProjectsThumbnail = ({
   };
 
   const nameSaveHandler = () => {
-    window.console.log('nameSaveHandler');
     if (!name.trim()) {
       setName(_name);
       return toast({
diff --git a/packages/uikit-playground/src/Context/action/index.ts b/packages/uikit-playground/src/Context/action/index.ts
index 10fc34b0499f..3286d82b578f 100644
--- a/packages/uikit-playground/src/Context/action/index.ts
+++ b/packages/uikit-playground/src/Context/action/index.ts
@@ -14,13 +14,14 @@ export { createNewScreenAction } from './createNewScreenAction';
 export { activeScreenAction } from './activeScreenAction';
 export { duplicateScreenAction } from './duplicateScreenAction';
 export { deleteScreenAction } from './deleteScreenAction';
-export {renameScreenAction} from './renameScreenAction';
+export { renameScreenAction } from './renameScreenAction';
 export { createNewProjectAction } from './createNewProjectAction';
 export { activeProjectAction } from './activeProjectAction';
 export { duplicateProjectAction } from './duplicateProjectAction';
 export { deleteProjectAction } from './deleteProjectAction';
 export { renameProjectAction } from './renameProjectAction';
 export { updateFlowEdgesAction } from './updateFlowEdgesAction';
+export { updateNodesAndViewPortAction } from './updateNodesAndViewPortAction';
 
 export type { IsMobileAction } from './isMobileAction';
 export type { IsTabletAction } from './isTabletAction';
@@ -45,4 +46,4 @@ export type { DuplicateProjectAction } from './duplicateProjectAction';
 export type { DeleteProjectAction } from './deleteProjectAction';
 export type { RenameProjectAction } from './renameProjectAction';
 export type { UpdateFlowEdgesAction } from './updateFlowEdgesAction';
-
+export type { UpdateNodesAndViewPortAction } from './updateNodesAndViewPortAction';
diff --git a/packages/uikit-playground/src/Context/action/updateNodesAndViewPortAction.ts b/packages/uikit-playground/src/Context/action/updateNodesAndViewPortAction.ts
new file mode 100644
index 000000000000..93ca22396b14
--- /dev/null
+++ b/packages/uikit-playground/src/Context/action/updateNodesAndViewPortAction.ts
@@ -0,0 +1,19 @@
+import { Node, Viewport } from 'reactflow';
+import { ActionTypes } from '../reducer';
+
+type PayloadType = {
+  nodes: Node[];
+  viewport: Viewport;
+};
+
+export type UpdateNodesAndViewPortAction = {
+  type: ActionTypes.UpdateNodesAndViewPort;
+  payload: PayloadType;
+};
+
+export const updateNodesAndViewPortAction = (
+  payload: PayloadType
+): UpdateNodesAndViewPortAction => ({
+  type: ActionTypes.UpdateNodesAndViewPort,
+  payload,
+});
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 908080d2ac77..d2f58d922916 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -3,7 +3,7 @@ import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 import getUniqueId from '../utils/getUniqueId';
 import getDate from '../utils/getDate';
-import { Edge } from 'reactflow';
+import { Edge, Node, Viewport } from 'reactflow';
 
 export type idType = string;
 
@@ -36,7 +36,7 @@ export type actionPreviewType = {
   view?: ILayoutBlock[];
 };
 
-export type ILayoutBlock = {actionId: string} & LayoutBlock;
+export type ILayoutBlock = { actionId: string } & LayoutBlock;
 
 export type ScreenType = {
   payload: ILayoutBlock[];
@@ -52,7 +52,15 @@ export type ScreensType = {
   [key: idType]: ScreenType;
 };
 
-export type ProjectType = { id: idType; name: string; screens: idType[], date: string, flowEdges: Edge[]};
+export type ProjectType = {
+  id: idType;
+  name: string;
+  screens: idType[];
+  date: string;
+  flowEdges: Edge[];
+  flowNodes: Node[];
+  viewport?: Viewport;
+};
 
 export type ProjectsType = {
   [key: idType]: ProjectType;
@@ -95,6 +103,8 @@ export const initialState: initialStateType = {
       screens: [initialScreenId],
       date: getDate(),
       flowEdges: [],
+      flowNodes: [],
+      viewport: undefined,
     },
   },
   screens: {
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 7694d08de30e..5e568dd8fb80 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -26,6 +26,7 @@ import {
   DeleteProjectAction,
   RenameProjectAction,
   UpdateFlowEdgesAction,
+  UpdateNodesAndViewPortAction,
 } from './action';
 import getDate from '../utils/getDate';
 
@@ -52,7 +53,8 @@ type IAction =
   | DuplicateProjectAction
   | DeleteProjectAction
   | RenameProjectAction
-  | UpdateFlowEdgesAction;
+  | UpdateFlowEdgesAction
+  | UpdateNodesAndViewPortAction;
 
 export enum ActionTypes {
   IsMobile,
@@ -78,6 +80,7 @@ export enum ActionTypes {
   DuplicateProject,
   RenameProject,
   UpdateFlowEdges,
+  UpdateNodesAndViewPort,
 }
 
 const reducer = (state: initialStateType, action: IAction) => {
@@ -131,6 +134,7 @@ const reducer = (state: initialStateType, action: IAction) => {
             id,
             name: action?.payload || 'default',
             payload: [],
+            flowParams: {},
           },
         },
         projects: {
@@ -156,6 +160,7 @@ const reducer = (state: initialStateType, action: IAction) => {
             id,
             name: action?.payload.name || 'default',
             payload: state.screens[action.payload.id].payload,
+            flowParams: {},
           },
         },
         projects: {
@@ -254,26 +259,31 @@ const reducer = (state: initialStateType, action: IAction) => {
       };
     }
 
-      case ActionTypes.DeleteProject: {
-        delete state.projects[action.payload];
-        return {
-          ...state,
-          activeProject: '',
-          activeScreen: '',
-        }
-      }
-      case ActionTypes.RenameProject: {
-        state.projects[action.payload.id].name = action.payload.name;
-        return { ...state };
-      }
+    case ActionTypes.DeleteProject: {
+      delete state.projects[action.payload];
+      return {
+        ...state,
+        activeProject: '',
+        activeScreen: '',
+      };
+    }
+    case ActionTypes.RenameProject: {
+      state.projects[action.payload.id].name = action.payload.name;
+      return { ...state };
+    }
 
-      case ActionTypes.UpdateFlowEdges: {
-        let prevEdges = state.projects[activeProject].flowEdges;
-        prevEdges = [...prevEdges, action.payload]
-        window.console.log(prevEdges);
-        state.projects[activeProject].flowEdges = prevEdges;
-        return { ...state };
-      }
+    case ActionTypes.UpdateFlowEdges: {
+      let prevEdges = state.projects[activeProject].flowEdges;
+      prevEdges = [...prevEdges, action.payload];
+      state.projects[activeProject].flowEdges = prevEdges;
+      return { ...state };
+    }
+    case ActionTypes.UpdateNodesAndViewPort: {
+      const { nodes, viewport } = action.payload;
+      state.projects[activeProject].flowNodes = nodes;
+      state.projects[activeProject].viewport = viewport;
+      return { ...state };
+    }
     default:
       return state;
   }
diff --git a/packages/uikit-playground/src/Pages/FlowDiagram.tsx b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
index 82b5471018b4..99167f3f8e52 100644
--- a/packages/uikit-playground/src/Pages/FlowDiagram.tsx
+++ b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
@@ -1,11 +1,13 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
 
 import FlowContainer from '../Components/FlowContainer/FlowContainer';
+import { ReactFlowProvider } from 'reactflow';
 
 const FlowDiagram = () => (
   <Box w="100vW" h="100vh">
-    <FlowContainer />
+    <ReactFlowProvider>
+      <FlowContainer />
+    </ReactFlowProvider>
   </Box>
 );
 

From 63dcfaed8acbe92134837718c12a913dfa685493 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 23 Jul 2023 21:57:54 +0530
Subject: [PATCH 24/50] chores(uikit-playground): fix lint warnings

---
 .../src/Components/CodeEditor/BlockEditor.tsx |  4 ++++
 .../CodeEditor/Parser/parsePayload.ts         |  6 +++---
 .../Components/CodeEditor/PreviewEditor.tsx   |  1 +
 .../src/Components/CodeEditor/index.tsx       |  5 ++++-
 .../Components/ComponentSideBar/SliderBtn.tsx | 19 +++++++++----------
 .../FlowContainer/ConnectionLine.tsx          |  1 -
 .../FlowContainer/FlowContainer.tsx           |  5 ++++-
 .../UIKitWrapper/UIKitWrapper.tsx             |  4 ++--
 .../HomeContainer/HomeContainer.tsx           |  2 +-
 .../Display/Surface/ContextualBarSurface.tsx  |  4 +---
 .../Preview/Display/Surface/Surface.tsx       |  2 ++
 .../Routes/ProjectSpecificLayout.tsx          |  1 +
 .../Components/ScreenThumbnail/Thumbnail.tsx  |  2 +-
 .../uikit-playground/src/Context/index.tsx    |  3 +--
 .../uikit-playground/src/Pages/Playground.tsx |  3 +--
 .../uikit-playground/src/hooks/useAuth.tsx    | 13 +++++++------
 .../src/hooks/useCodeMirror.ts                |  1 +
 .../src/hooks/useNodesAndEdges.ts             |  1 +
 packages/uikit-playground/src/module.d.ts     |  4 ++--
 .../src/utils/codePrettier.ts                 |  2 +-
 20 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index c1f834ba80fb..381cbe15ff1b 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -33,6 +33,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
         // do nothing
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changes?.value]);
 
   useEffect(() => {
@@ -46,6 +47,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
         // do nothing
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debounceValue]);
 
   useEffect(() => {
@@ -55,10 +57,12 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
         {}
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen]?.payload, activeScreen]);
 
   useEffect(() => {
     setValue(JSON.stringify(screens[activeScreen]?.payload, undefined, 4), {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeScreen]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts b/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
index 114ec242009d..8a431bc05e15 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
+++ b/packages/uikit-playground/src/Components/CodeEditor/Parser/parsePayload.ts
@@ -1,9 +1,9 @@
-import type { Diagnostic } from '@codemirror/lint';
+// import type { Diagnostic } from '@codemirror/lint';
 import type { EditorView } from 'codemirror';
 
 const parsePayload = (
-  head: any,
-  Diagnostic: Diagnostic[],
+  head: { from: number; to: number },
+  // Diagnostic: Diagnostic[],
   view: EditorView
 ) => {
   const payload = JSON.parse(
diff --git a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
index 9584193f0f81..46b7cbe3eea3 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
@@ -20,6 +20,7 @@ const PreviewEditor = ({ extensions }: CodeMirrorProps) => {
       JSON.stringify(screens[activeScreen]?.actionPreview, undefined, 4),
       {}
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen]?.actionPreview]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/CodeEditor/index.tsx b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
index e7a12ca2d296..067ddceb27ac 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/index.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
@@ -9,7 +9,7 @@ import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 
 type CodeMirrorProps = {
-  extensions?: Extension[],
+  extensions?: Extension[];
 };
 
 const CodeEditor = ({ extensions }: CodeMirrorProps) => {
@@ -39,6 +39,7 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
         // do nothing
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [changes?.value]);
 
   useEffect(() => {
@@ -52,12 +53,14 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
         // do nothing
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debounceValue]);
 
   useEffect(() => {
     if (!screens[activeScreen].changedByEditor) {
       setValue(JSON.stringify(screens[activeScreen].payload, undefined, 4), {});
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen].payload]);
 
   return (
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
index 0f13639581ac..52ba6d88d750 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
@@ -48,7 +48,6 @@ const SliderBtn: FC = () => {
         transition: var(--animation-default);
       `;
 
-  // eslint-disable-next-line no-nested-ternary
   const toggleStyle = !isMobile
     ? css`
         left: 0px;
@@ -71,8 +70,8 @@ const SliderBtn: FC = () => {
       width={sideBarToggle ? '100%' : '130px'}
       paddingInlineStart={'20px'}
       height={'40px'}
-      display='flex'
-      alignItems='center'
+      display="flex"
+      alignItems="center"
       justifyContent={'space-between'}
       onClick={() =>
         !sideBarToggle && dispatch(sidebarToggleAction(!sideBarToggle))
@@ -81,7 +80,7 @@ const SliderBtn: FC = () => {
       className={toggleStyle}
     >
       <Label
-        width='80px'
+        width="80px"
         className={
           isMobile && !sideBarToggle
             ? css`
@@ -94,11 +93,11 @@ const SliderBtn: FC = () => {
       </Label>
       {isMobile && (
         <Box
-          width='40px'
-          height='40px'
-          display='flex'
-          alignItems='center'
-          justifyContent='center'
+          width="40px"
+          height="40px"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
           onClick={() =>
             sideBarToggle && dispatch(sidebarToggleAction(!sideBarToggle))
           }
@@ -106,7 +105,7 @@ const SliderBtn: FC = () => {
             cursor: pointer;
           `}
         >
-          <Box size='50%' bg='info' className={slideBtnAnimation} />
+          <Box size="50%" bg="info" className={slideBtnAnimation} />
         </Box>
       )}
     </Box>
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
index 97f7b1c39aa4..82fb979ff075 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/ConnectionLine.tsx
@@ -11,7 +11,6 @@ const ConnectionLine = ({
   toY: number;
   toPosition: string;
   connectionLineType: string;
-  connectionLineStyle?: any;
 }) => (
   <g>
     <path
diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 792bcf0f1c40..410937709966 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
@@ -52,6 +52,7 @@ const FlowContainer = () => {
       dispatch(updateFlowEdgesAction(newEdge));
       setEdges((eds) => addEdge(newEdge, eds));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setEdges]
   );
 
@@ -62,6 +63,7 @@ const FlowContainer = () => {
   const onEdgeUpdate = useCallback((oldEdge, newConnection) => {
     edgeUpdateSuccessful.current = true;
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {
@@ -69,6 +71,7 @@ const FlowContainer = () => {
       setEdges((eds) => eds.filter((e) => e.id !== edge.id));
     }
     edgeUpdateSuccessful.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onNodeDragStop = () => {
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index c22b14ca2f7a..68f805f2d048 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { memo, useContext } from 'react';
+import { useContext } from 'react';
 import { Handle, Position } from 'reactflow';
 import './UIKitWrapper.scss';
 
@@ -49,4 +49,4 @@ const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
   );
 };
 
-export default memo(UIKitWrapper);
+export default UIKitWrapper;
diff --git a/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
index 92a65b7f461d..ad06830d4f18 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Label } from '@rocket.chat/fuselage';
+import { Box, Label } from '@rocket.chat/fuselage';
 import ProjectsList from './ProjectsList/ProjectsList';
 import { useContext } from 'react';
 import { context, createNewProjectAction } from '../../Context';
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
index cd02667d0883..690badae81e3 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
@@ -1,4 +1,3 @@
-import { css } from '@rocket.chat/css-in-js';
 import {
   Avatar,
   Box,
@@ -9,10 +8,9 @@ import {
   ContextualbarFooter,
   ContextualbarHeader,
   ContextualbarTitle,
-  Margins,
 } from '@rocket.chat/fuselage';
 import { Scrollbars } from 'rc-scrollbars';
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 const ContextualBarSurface = ({ children }: { children: ReactNode }) => (
   <Contextualbar>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index 6d5b82471a57..d4c135b37bd5 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -46,6 +46,7 @@ const Surface: FC = () => {
       })),
       isChangeByDnd: false,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen]?.payload]);
 
   useEffect(() => {
@@ -57,6 +58,7 @@ const Surface: FC = () => {
         })
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uniqueBlocks]);
 
   const onDragEnd = ({ destination, source }: DropResult) => {
diff --git a/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx b/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx
index 68cd25a02048..150dd6faadec 100644
--- a/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx
+++ b/packages/uikit-playground/src/Components/Routes/ProjectSpecificLayout.tsx
@@ -16,6 +16,7 @@ export const ProjectSpecificLayout = () => {
   useEffect(() => {
     if (!projectId || !projects[projectId]) navigate(routes.home);
     else dispatch(activeProjectAction(projectId));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return <>{outlet}</>;
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
index c3e104d9def2..c3c421d4e539 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactNode, ComponentProps } from 'react';
-import React, { useRef, useMemo, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 
 interface ThumbnailProps {
   of: ReactNode;
diff --git a/packages/uikit-playground/src/Context/index.tsx b/packages/uikit-playground/src/Context/index.tsx
index ee4b960de789..89ccdee94ef4 100644
--- a/packages/uikit-playground/src/Context/index.tsx
+++ b/packages/uikit-playground/src/Context/index.tsx
@@ -1,9 +1,8 @@
+/* eslint-disable react-refresh/only-export-components */
 import createCtx from './createCtx';
 import { initialState } from './initialState';
 import reducer from './reducer';
-
 export * from './action';
-
 const [context, Provider] = createCtx(reducer, initialState);
 
 export { context, Provider };
diff --git a/packages/uikit-playground/src/Pages/Playground.tsx b/packages/uikit-playground/src/Pages/Playground.tsx
index 4dd4deee7e8d..1f365ab1d544 100644
--- a/packages/uikit-playground/src/Pages/Playground.tsx
+++ b/packages/uikit-playground/src/Pages/Playground.tsx
@@ -1,6 +1,5 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { Box } from '@rocket.chat/fuselage';
-import { useContext, type Fc } from 'react';
+import { useContext, type FC } from 'react';
 
 import ComponentSideBar from '../Components/ComponentSideBar';
 import CreateNewScreenContainer from '../Components/CreateNewScreen/CreateNewScreenContainer';
diff --git a/packages/uikit-playground/src/hooks/useAuth.tsx b/packages/uikit-playground/src/hooks/useAuth.tsx
index e87c063c71a1..10f26376b673 100644
--- a/packages/uikit-playground/src/hooks/useAuth.tsx
+++ b/packages/uikit-playground/src/hooks/useAuth.tsx
@@ -1,22 +1,22 @@
-// ts-nocheck
-
+/* eslint-disable react-refresh/only-export-components */
 import type { ReactNode } from 'react';
 import { createContext, useContext, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useLocalStorage } from './useLocalStorage';
+import { userType } from '../Context/initialState';
 
 const AuthContext = createContext<{
-  user?: any,
-  login?: (data: any) => Promise<void>,
-  logout?: () => void,
+  user?: userType;
+  login?: (data: unknown) => Promise<void>;
+  logout?: () => void;
 }>({});
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useLocalStorage('user', null);
   const navigate = useNavigate();
 
-  const login = async (data: any) => {
+  const login = async (data: unknown) => {
     setUser(data);
     navigate('/dashboard/profile', { replace: true });
   };
@@ -32,6 +32,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
       login,
       logout,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [user]
   );
 
diff --git a/packages/uikit-playground/src/hooks/useCodeMirror.ts b/packages/uikit-playground/src/hooks/useCodeMirror.ts
index 8816f5f2991c..d4d67d3b8b20 100644
--- a/packages/uikit-playground/src/hooks/useCodeMirror.ts
+++ b/packages/uikit-playground/src/hooks/useCodeMirror.ts
@@ -73,6 +73,7 @@ export default function useCodeMirror(extensions?: Extension[], doc?: string) {
     });
 
     return () => view.current?.destroy();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element]);
 
   return { editor, changes, setValue };
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index 0e6126c1c00a..1fd0f13d482b 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -28,6 +28,7 @@ export function useNodesAndEdges() {
       });
     });
     return prevNodes;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const edges = projects[activeProject].flowEdges;
diff --git a/packages/uikit-playground/src/module.d.ts b/packages/uikit-playground/src/module.d.ts
index 65486d449683..4349c6c3bc1d 100644
--- a/packages/uikit-playground/src/module.d.ts
+++ b/packages/uikit-playground/src/module.d.ts
@@ -1,5 +1,5 @@
 declare module '*.svg' {
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-  const src: any;
+  const src: unknown;
   export default src;
-}
\ No newline at end of file
+}
diff --git a/packages/uikit-playground/src/utils/codePrettier.ts b/packages/uikit-playground/src/utils/codePrettier.ts
index b1b455f8748a..0fda62bb93ba 100644
--- a/packages/uikit-playground/src/utils/codePrettier.ts
+++ b/packages/uikit-playground/src/utils/codePrettier.ts
@@ -1,7 +1,7 @@
 import prettier from 'prettier';
 import pluginBabel from 'prettier/parser-babel';
 
-const codePrettier = (code: string, cursor: any) =>
+const codePrettier = (code: string, cursor: number) =>
   prettier.formatWithCursor(code, {
     parser: 'json',
     plugins: [pluginBabel],

From 8147170ce8b6f360d61cd24091c7158b26a2dd0c Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Fri, 28 Jul 2023 16:08:40 +0530
Subject: [PATCH 25/50] feat(uikit-playground): added prototype

---
 packages/uikit-playground/src/App.tsx         |  3 +-
 .../ControlButtons/ControlButtons.tsx         |  4 +-
 .../HomeContainer/HomeContainer.tsx           |  1 +
 .../PrototypeRender/PrototypeRender.scss      | 40 ++++++++++++
 .../PrototypeRender/PrototypeRender.tsx       | 63 +++++++++++++++++++
 .../src/Components/PrototypeRender/index.ts   |  1 +
 .../PtototypeContainer/PrototypeContainer.tsx | 40 ++++++++++++
 .../Components/PtototypeContainer/index.ts    |  1 +
 .../ScreenThumbnail/CreateNewScreenButton.tsx |  3 +-
 .../src/Components/Templates/Templates.tsx    |  2 +-
 .../uikit-playground/src/Pages/Prototype.tsx  | 12 ++++
 .../uikit-playground/src/Routes/Routes.ts     |  1 +
 12 files changed, 167 insertions(+), 4 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
 create mode 100644 packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
 create mode 100644 packages/uikit-playground/src/Components/PrototypeRender/index.ts
 create mode 100644 packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
 create mode 100644 packages/uikit-playground/src/Components/PtototypeContainer/index.ts
 create mode 100644 packages/uikit-playground/src/Pages/Prototype.tsx

diff --git a/packages/uikit-playground/src/App.tsx b/packages/uikit-playground/src/App.tsx
index 7e60bf6e198c..ed32f3c388fa 100644
--- a/packages/uikit-playground/src/App.tsx
+++ b/packages/uikit-playground/src/App.tsx
@@ -15,6 +15,7 @@ import { useMediaQueries } from '@rocket.chat/fuselage-hooks';
 import { Box } from '@rocket.chat/fuselage';
 import FlowDiagram from './Pages/FlowDiagram';
 import { ProjectSpecificLayout } from './Components/Routes/ProjectSpecificLayout';
+import Prototype from './Pages/Prototype';
 
 function App() {
   const { dispatch } = useContext(context);
@@ -51,7 +52,7 @@ function App() {
             <Route path={routes.projectId} element={<ProjectSpecificLayout />}>
               <Route path={routes.flow} element={<FlowDiagram />} />
               <Route path={routes.project} element={<Playground />} />
-              {/* <Route path={routes.prototype} element={<Playground />} /> */}
+              <Route path={routes.prototype} element={<Prototype />} />
             </Route>
             <Route path={`*`} element={<Home />} />
             {/* </Route> */}
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
index 63b6bb5811b4..39ef0beac8ed 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
@@ -13,7 +13,9 @@ const ControlButtons = () => {
       >
         <Icon name="home" size={'x16'} />
       </ControlButton>
-      <ControlButton>
+      <ControlButton
+        onClick={() => navigate(`/${projectId}/${routes.prototype}`)}
+      >
         <Icon name="play-unfilled" size={'x16'} />
       </ControlButton>
     </Controls>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
index ad06830d4f18..e6bf0e9274a7 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
@@ -27,6 +27,7 @@ const HomeContainer = () => {
         <Label fontScale="h1">Projects</Label>
         <Label fontScale="h3">Start a new project</Label>
         <CreateNewScreenButton
+          name="plus"
           onClick={() => dispatch(createNewProjectAction())}
         />
         <Label fontScale="h4">Existing Projects</Label>
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
new file mode 100644
index 000000000000..50197006c9e2
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
@@ -0,0 +1,40 @@
+.rc-prototype-renderer {
+    background: white;
+    padding: 20px !important;
+    border-radius: 20px;
+    outline: 1px solid var(--default-border-color) !important;
+
+    .rc-prototype_action{
+        position: relative;
+    
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--RCPG-tertary-color);
+            opacity: 0;
+        }
+    
+        &-glow {
+            &::after {
+                animation: glow 1s ease-out;
+            }
+        }
+        
+    
+        @keyframes glow {
+            0% {
+                opacity: 0;
+            }
+            2% {
+                opacity: 0.3;
+            }
+            100% {
+                opacity: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
new file mode 100644
index 000000000000..e01f6d46148b
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
@@ -0,0 +1,63 @@
+import './PrototypeRender.scss';
+import { Box } from '@rocket.chat/fuselage';
+import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
+import { SurfaceOptions } from '../Preview/Display/Surface/constant';
+import { ILayoutBlock, idType } from '../../Context/initialState';
+import { Edge } from 'reactflow';
+import { css } from '@rocket.chat/css-in-js';
+import { useState } from 'react';
+
+const PrototypeRender = ({
+  payload,
+  surface,
+  flowEdges,
+  activeActions,
+  onSelectAction,
+}: {
+  payload: ILayoutBlock[];
+  surface: SurfaceOptions;
+  flowEdges: Edge[];
+  activeActions: idType[];
+  onSelectAction: (id: idType) => void;
+}) => {
+  const [glowActive, setGlowActive] = useState(false);
+  const actionClickHandler = (id: idType) => {
+    const edge = flowEdges.find((edge) => edge.sourceHandle === id);
+    if (edge) return onSelectAction(edge.target);
+
+    setGlowActive(true);
+    setTimeout(() => setGlowActive(false), 1000);
+  };
+  return (
+    <Box w="40%" h="max-content" mb={'auto'} className="rc-prototype-renderer">
+      <SurfaceRender type={surface}>
+        {payload.map((action, id) => (
+          <Box key={id} onClick={() => actionClickHandler(action.actionId)}>
+            <Box
+              className={`${
+                activeActions.includes(action.actionId)
+                  ? 'rc-prototype_action' +
+                    (glowActive ? ' rc-prototype_action-glow' : '')
+                  : ''
+              }`}
+            >
+              <Box
+                w="100%"
+                h="100%"
+                className={css`
+                  pointer-events: none;
+                  user-select: none;
+                `}
+              >
+                <RenderPayload payload={[action]} surface={surface} />
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </SurfaceRender>
+    </Box>
+  );
+};
+
+export default PrototypeRender;
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/index.ts b/packages/uikit-playground/src/Components/PrototypeRender/index.ts
new file mode 100644
index 000000000000..74e698a56b43
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PrototypeRender/index.ts
@@ -0,0 +1 @@
+export { default } from './PrototypeRender';
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
new file mode 100644
index 000000000000..82003e2d0e0a
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -0,0 +1,40 @@
+import { useContext, useMemo, useState } from 'react';
+import { context } from '../../Context';
+import { Box, Scrollable } from '@rocket.chat/fuselage';
+import PrototypeRender from '../PrototypeRender/PrototypeRender';
+
+const PrototypeContainer = () => {
+  const {
+    state: { projects, activeProject, screens },
+  } = useContext(context);
+  window.console.log(projects[activeProject].flowEdges);
+  const [currentScreenID, setCurrentScreenID] = useState<string>(
+    projects[activeProject].screens[0]
+  );
+  const { surface, payload } = screens[currentScreenID];
+
+  const activeActions = useMemo(() => {
+    return projects[activeProject]?.flowEdges.map((edge) => edge.sourceHandle);
+  }, [activeProject, projects]);
+  return (
+    <Scrollable vertical>
+      <Box
+        w="100%"
+        h="100%"
+        paddingBlock={'40px'}
+        display="flex"
+        justifyContent="center"
+      >
+        <PrototypeRender
+          surface={surface}
+          payload={payload}
+          activeActions={activeActions as string[]}
+          flowEdges={projects[activeProject].flowEdges}
+          onSelectAction={setCurrentScreenID}
+        />
+      </Box>
+    </Scrollable>
+  );
+};
+
+export default PrototypeContainer;
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/index.ts b/packages/uikit-playground/src/Components/PtototypeContainer/index.ts
new file mode 100644
index 000000000000..9b39511e5001
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/index.ts
@@ -0,0 +1 @@
+export {default} from './PrototypeContainer';
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
index 41981ab2d9ab..afcec9320406 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/CreateNewScreenButton.tsx
@@ -4,6 +4,7 @@ import { ComponentProps } from 'react';
 
 const CreateNewScreenButton = ({
   size = '60px',
+  name = 'plus',
   ...props
 }: {
   size?: ComponentProps<typeof Icon>['size'];
@@ -13,7 +14,7 @@ const CreateNewScreenButton = ({
       <Icon
         {...props}
         size={size}
-        name={'plus'}
+        name={name}
         className={css`
           cursor: pointer;
           transition: var(--animation-default);
diff --git a/packages/uikit-playground/src/Components/Templates/Templates.tsx b/packages/uikit-playground/src/Components/Templates/Templates.tsx
index b7120371c3f9..d6fcc939d672 100644
--- a/packages/uikit-playground/src/Components/Templates/Templates.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Templates.tsx
@@ -34,7 +34,7 @@ const Templates: FC = () => {
             <Button
               position="fixed"
               className={css`
-                top: 40px;
+                top: 80px;
                 right: 40px;
               `}
               onClick={() => dispatch(templatesToggleAction(false))}
diff --git a/packages/uikit-playground/src/Pages/Prototype.tsx b/packages/uikit-playground/src/Pages/Prototype.tsx
new file mode 100644
index 000000000000..39263ca7f577
--- /dev/null
+++ b/packages/uikit-playground/src/Pages/Prototype.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@rocket.chat/fuselage';
+import PrototypeContainer from '../Components/PtototypeContainer/PrototypeContainer';
+
+const Prototype = () => {
+  return (
+    <Box w="100%" h="100%">
+      <PrototypeContainer />
+    </Box>
+  );
+};
+
+export default Prototype;
diff --git a/packages/uikit-playground/src/Routes/Routes.ts b/packages/uikit-playground/src/Routes/Routes.ts
index 9a77e544dd93..eaf0fc81fa68 100644
--- a/packages/uikit-playground/src/Routes/Routes.ts
+++ b/packages/uikit-playground/src/Routes/Routes.ts
@@ -4,6 +4,7 @@ const routes = {
   projectId: ':projectId',
   login: '/login',
   flow: 'flow',
+  prototype: 'prototype',
   signup: '/createnewworkspace',
 };
 

From 84119248d1bde7e32d299b6ebb9f68866b6f47ee Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 29 Jul 2023 18:23:40 +0530
Subject: [PATCH 26/50] refactor(uikit-playground): Added flow and prototype in
 tabs

---
 .../FlowContainer/FlowContainer.tsx           | 11 +---
 .../ProjectsList/ProjectsThumbnail.tsx        | 30 ++++------
 .../Display/Surface/MessageSurface.tsx        |  3 +-
 .../Components/Preview/Editor/EditorPanel.tsx | 53 ++++++++++++----
 .../PrototypeRender/PrototypeRender.scss      | 60 ++++++++++---------
 .../PrototypeRender/PrototypeRender.tsx       | 52 +++++++++-------
 .../PtototypeContainer/PrototypeContainer.tsx |  3 +-
 .../ScreenThumbnail/EditMenu/EditMenu.tsx     | 16 +++--
 .../uikit-playground/src/Context/reducer.ts   |  4 ++
 .../src/Pages/FlowDiagram.tsx                 |  2 +-
 .../src/hooks/useNodesAndEdges.ts             | 33 ++++++----
 11 files changed, 156 insertions(+), 111 deletions(-)

diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index 410937709966..c4253ea58af2 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -2,8 +2,6 @@ import { useCallback, useContext, useRef, useState } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
-  useNodesState,
-  useEdgesState,
   addEdge,
   updateEdge,
   Node,
@@ -28,15 +26,10 @@ const nodeTypes = {
 const FlowContainer = () => {
   const { dispatch } = useContext(context);
 
-  const {
-    nodes: initialNodes,
-    edges: initialEdges,
-    Viewport,
-  } = useNodesAndEdges();
+  const { nodes, edges, Viewport, onNodesChange, onEdgesChange, setEdges } =
+    useNodesAndEdges();
   const { setViewport } = useReactFlow();
 
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
   const edgeUpdateSuccessful = useRef(true);
 
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index a56ec47a7225..f105f3fef204 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -1,13 +1,8 @@
 import { Box } from '@rocket.chat/fuselage';
 import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
 import Thumbnail from '../../ScreenThumbnail/Thumbnail';
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
-import {
-  context,
-  duplicateProjectAction,
-  renameProjectAction,
-} from '../../../Context';
+import { context, renameProjectAction } from '../../../Context';
 import { ChangeEvent, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { formatDate } from '../../../utils/formatDate';
@@ -17,6 +12,7 @@ import { css } from '@rocket.chat/css-in-js';
 import { deleteProjectAction } from '../../../Context/action/deleteProjectAction';
 import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 import routes from '../../../Routes/Routes';
+import { ILayoutBlock } from '../../../Context/initialState';
 
 const ProjectsThumbnail = ({
   id,
@@ -27,7 +23,7 @@ const ProjectsThumbnail = ({
   id: string;
   name: string;
   date: string;
-  payload: readonly LayoutBlock[];
+  payload: ILayoutBlock[];
 }) => {
   const [name, setName] = useState<string>(_name);
   const navigate = useNavigate();
@@ -37,9 +33,6 @@ const ProjectsThumbnail = ({
     navigate(`/${id}/${routes.project}`);
   };
 
-  const duplicateScreenHandler = () => {
-    dispatch(duplicateProjectAction({ id }));
-  };
   const deleteScreenHandler = () => {
     dispatch(deleteProjectAction(id));
   };
@@ -74,18 +67,17 @@ const ProjectsThumbnail = ({
         height="260px"
         padding="30px"
       >
-        <EditMenu
-          name={name}
-          date={date}
-          onChange={onChangeNameHandler}
-          onDuplicate={duplicateScreenHandler}
-          onDelete={deleteScreenHandler}
-          onBlur={nameSaveHandler}
-          labelProps={{ fontScale: 'h5' }}
-        />
         <Thumbnail of={RenderPayload({ payload })} />
         <Box onClick={(e) => e.stopPropagation()}></Box>
       </ScreenThumbnailWrapper>
+      <EditMenu
+        name={name}
+        date={date}
+        onChange={onChangeNameHandler}
+        onDelete={deleteScreenHandler}
+        onBlur={nameSaveHandler}
+        labelProps={{ fontScale: 'h5' }}
+      />
       <EditableLabel
         value={name}
         onChange={onChangeNameHandler}
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index f8d27f1be62a..22a1da2d6ef3 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -1,9 +1,8 @@
 import { Message, Avatar } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
-import React from 'react';
 
 const MessageSurface = ({ children }: { children: ReactNode }) => (
-  <Message clickable>
+  <Message>
     <Message.LeftContainer>
       <Avatar
         url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
index 14cf52e76f00..27a704b79764 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
@@ -7,9 +7,23 @@ import { context, editorTabsToggleAction } from '../../../Context';
 import ToggleTabs from '../../ToggleTabs';
 import ActionBlockEditor from './ActionBlockEditor';
 import ActionPreviewEditor from './ActionPreviewEditor';
+import FlowDiagram from '../../../Pages/FlowDiagram';
+import PrototypeContainer from '../../PtototypeContainer/PrototypeContainer';
 
 const EditorPanel: FC = () => {
-  const tabsItem: string[] = ['Action Block', 'Action Preview'];
+  enum TabsItem {
+    ActionBlock,
+    ActionPreview,
+    FlowDiagram,
+    Prototype,
+  }
+
+  const tabsItem = {
+    [TabsItem.ActionBlock]: 'Action Block',
+    [TabsItem.ActionPreview]: 'Action Preview',
+    [TabsItem.FlowDiagram]: 'Flow Diagram',
+    [TabsItem.Prototype]: 'Prototype',
+  };
   const {
     state: { editorTabsToggle },
     dispatch,
@@ -21,26 +35,37 @@ const EditorPanel: FC = () => {
 
   const tabChangeStyle = () => {
     switch (editorTabsToggle) {
-      case 0:
+      case TabsItem.ActionBlock:
         return css`
           transition: 0.5s ease;
           left: 0;
         `;
-      case 1:
+      case TabsItem.ActionPreview:
         return css`
           transition: 0.5s ease;
           left: -100%;
         `;
+
+      case TabsItem.FlowDiagram:
+        return css`
+          transition: 0.5s ease;
+          left: -200%;
+        `;
+      case TabsItem.Prototype:
+        return css`
+          transition: 0.5s ease;
+          left: -300%;
+        `;
     }
   };
 
   return (
     <Box width={'100%'} height={'100%'}>
       <Box
-        position='relative'
+        position="relative"
         width={'100%'}
         height={'100%'}
-        overflow='hidden'
+        overflow="hidden"
         className={[
           css`
             user-select: none;
@@ -48,26 +73,28 @@ const EditorPanel: FC = () => {
         ]}
       >
         <ToggleTabs
-          tabsItem={tabsItem}
+          tabsItem={Object.values(tabsItem)}
           onChange={toggleTabsHandler}
           selectedTab={editorTabsToggle}
         />
         <Box
-          position='relative'
-          width='100%'
-          height='calc(100% - 40px)'
-          flexDirection='column'
+          position="relative"
+          width={'100%'}
+          height="calc(100% - 40px)"
+          flexDirection="column"
         >
           <Box
-            position='absolute'
-            width={'200%'}
+            position="absolute"
+            width={`calc(100% * ${Object.values(tabsItem).length})`}
             height={'100%'}
             display={'flex'}
-            borderBlockStart='var(--default-border)'
+            borderBlockStart="var(--default-border)"
             className={tabChangeStyle()}
           >
             <ActionBlockEditor />
             <ActionPreviewEditor />
+            <FlowDiagram />
+            <PrototypeContainer />
           </Box>
         </Box>
       </Box>
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
index 50197006c9e2..beb188367494 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
@@ -2,39 +2,41 @@
     background: white;
     padding: 20px !important;
     border-radius: 20px;
+    max-width: 800px !important;
     outline: 1px solid var(--default-border-color) !important;
 
     .rc-prototype_action{
         position: relative;
-    
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--RCPG-tertary-color);
-            opacity: 0;
-        }
-    
-        &-glow {
-            &::after {
-                animation: glow 1s ease-out;
-            }
-        }
-        
-    
-        @keyframes glow {
-            0% {
-                opacity: 0;
-            }
-            2% {
-                opacity: 0.3;
-            }
-            100% {
-                opacity: 0;
-            }
+
+    }
+
+    .rcx-message{
+        &:hover{
+            background: none !important;
         }
     }
+}
+
+.rc-prototype_action-glow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: glow 1s ease-out both;
+    width: 100%;
+    height: 100%;
+    z-index: 1000;
+    background-color: var(--RCPG-tertary-color);
+}
+
+
+@keyframes glow {
+    0% {
+        opacity: 0;
+    }
+    2% {
+        opacity: 0.3;
+    }
+    100% {
+        opacity: 0;
+    }
 }
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
index e01f6d46148b..706bab6cd909 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
@@ -6,7 +6,7 @@ import { SurfaceOptions } from '../Preview/Display/Surface/constant';
 import { ILayoutBlock, idType } from '../../Context/initialState';
 import { Edge } from 'reactflow';
 import { css } from '@rocket.chat/css-in-js';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 const PrototypeRender = ({
   payload,
@@ -21,37 +21,47 @@ const PrototypeRender = ({
   activeActions: idType[];
   onSelectAction: (id: idType) => void;
 }) => {
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
   const [glowActive, setGlowActive] = useState(false);
   const actionClickHandler = (id: idType) => {
     const edge = flowEdges.find((edge) => edge.sourceHandle === id);
     if (edge) return onSelectAction(edge.target);
 
-    setGlowActive(true);
-    setTimeout(() => setGlowActive(false), 1000);
+    clearTimeout(timerRef.current);
+
+    setGlowActive(false);
+    setTimeout(() => {
+      setGlowActive(true);
+    }, 0);
+    timerRef.current = setTimeout(() => {
+      setGlowActive(false);
+    }, 1000);
   };
   return (
-    <Box w="40%" h="max-content" mb={'auto'} className="rc-prototype-renderer">
+    <Box h="max-content" mb={'auto'} className="rc-prototype-renderer">
       <SurfaceRender type={surface}>
         {payload.map((action, id) => (
-          <Box key={id} onClick={() => actionClickHandler(action.actionId)}>
+          <Box
+            key={id}
+            className={css`
+              cursor: pointer;
+            `}
+            onClick={() => actionClickHandler(action.actionId)}
+          >
             <Box
-              className={`${
-                activeActions.includes(action.actionId)
-                  ? 'rc-prototype_action' +
-                    (glowActive ? ' rc-prototype_action-glow' : '')
-                  : ''
-              }`}
+              position="relative"
+              w="100%"
+              h="100%"
+              className={css`
+                pointer-events: none;
+                user-select: none;
+              `}
             >
-              <Box
-                w="100%"
-                h="100%"
-                className={css`
-                  pointer-events: none;
-                  user-select: none;
-                `}
-              >
-                <RenderPayload payload={[action]} surface={surface} />
-              </Box>
+              {glowActive && activeActions.includes(action.actionId) && (
+                <Box className={'rc-prototype_action-glow'} />
+              )}
+              <RenderPayload payload={[action]} surface={surface} />
             </Box>
           </Box>
         ))}
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
index 82003e2d0e0a..b252e1a0865f 100644
--- a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -15,7 +15,8 @@ const PrototypeContainer = () => {
 
   const activeActions = useMemo(() => {
     return projects[activeProject]?.flowEdges.map((edge) => edge.sourceHandle);
-  }, [activeProject, projects]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeProject, projects, projects[activeProject].flowEdges]);
   return (
     <Scrollable vertical>
       <Box
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
index 9a507ec0af71..74e470398073 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
@@ -17,8 +17,8 @@ const EditMenu = ({
   name: string;
   date: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  onDuplicate: () => void;
-  onDelete: () => void;
+  onDuplicate?: () => void;
+  onDelete?: () => void;
   onBlur: () => void;
   labelProps?: ComponentProps<typeof EditableLabel>;
 }) => {
@@ -33,13 +33,13 @@ const EditMenu = ({
   const duplicatehandler = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();
     setIsOpen(false);
-    onDuplicate();
+    onDuplicate && onDuplicate();
   };
 
   const deleteHandler = (e: { stopPropagation: () => void }) => {
     e.stopPropagation();
     setIsOpen(false);
-    onDelete();
+    onDelete && onDelete();
   };
   return (
     <Box
@@ -69,8 +69,12 @@ const EditMenu = ({
               </Box>
             </Box>
             <Divider mbs="12px" />
-            <Option onClick={duplicatehandler}>Duplicate</Option>
-            <Option onClick={deleteHandler}>Delete</Option>
+            <Option disabled={!onDuplicate} onClick={duplicatehandler}>
+              Duplicate
+            </Option>
+            <Option disabled={!onDelete} onClick={deleteHandler}>
+              Delete
+            </Option>
           </Box>
         </Box>
       )}
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 5e568dd8fb80..cd30002f90e6 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -209,6 +209,8 @@ const reducer = (state: initialStateType, action: IAction) => {
             name: action?.payload || 'Untitled Project',
             screens: [activeScreenId],
             date: getDate(),
+            flowEdges: [],
+            flowNodes: [],
           },
         },
         activeProject: activeProjectId,
@@ -219,6 +221,7 @@ const reducer = (state: initialStateType, action: IAction) => {
             name: 'Untitled Screen',
             date: getDate(),
             payload: [],
+            viewport: undefined,
           },
         },
       };
@@ -248,6 +251,7 @@ const reducer = (state: initialStateType, action: IAction) => {
         projects: {
           ...state.projects,
           [activeProjectId]: {
+            ...state.projects[action.payload.id],
             id: activeProjectId,
             name: action?.payload.name || 'Untitled Project',
             screens: newScreensIds,
diff --git a/packages/uikit-playground/src/Pages/FlowDiagram.tsx b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
index 99167f3f8e52..d4fed9b2872c 100644
--- a/packages/uikit-playground/src/Pages/FlowDiagram.tsx
+++ b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
@@ -4,7 +4,7 @@ import FlowContainer from '../Components/FlowContainer/FlowContainer';
 import { ReactFlowProvider } from 'reactflow';
 
 const FlowDiagram = () => (
-  <Box w="100vW" h="100vh">
+  <Box w="100%" h="100%" position="relative">
     <ReactFlowProvider>
       <FlowContainer />
     </ReactFlowProvider>
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index 1fd0f13d482b..d08054f359c8 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -1,12 +1,15 @@
-import { MarkerType } from 'reactflow';
-import { useContext, useMemo } from 'react';
+import { MarkerType, useEdgesState, useNodesState } from 'reactflow';
+import { useContext, useEffect } from 'react';
 import { context } from '../Context';
 export function useNodesAndEdges() {
   const {
     state: { screens, projects, activeProject },
   } = useContext(context);
 
-  const nodes = useMemo(() => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  useEffect(() => {
     const prevNodes = projects[activeProject].flowNodes;
     const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
     const activeScreens = projects[activeProject].screens.map(
@@ -17,8 +20,8 @@ export function useNodesAndEdges() {
 
       const degrees = i * (360 / 8);
       const radians = degrees * (Math.PI / 180);
-      const x = 2500 * Math.cos(radians) + center.x;
-      const y = 2500 * Math.sin(radians) + center.y;
+      const x = 250 * activeScreens.length * Math.cos(radians) + center.x;
+      const y = 250 * activeScreens.length * Math.sin(radians) + center.y;
 
       prevNodes.push({
         id: screen.id,
@@ -27,14 +30,24 @@ export function useNodesAndEdges() {
         data: screen.id,
       });
     });
-    return prevNodes;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    setNodes(prevNodes);
+  }, [activeProject, projects, screens, setNodes]);
 
-  const edges = projects[activeProject].flowEdges;
+  useEffect(() => {
+    const _edges = projects[activeProject].flowEdges;
+    setEdges(_edges);
+  }, [activeProject, projects, screens, setEdges]);
   const Viewport = projects[activeProject].viewport;
 
-  return { nodes, edges, Viewport };
+  return {
+    nodes,
+    edges,
+    Viewport,
+    onNodesChange,
+    onEdgesChange,
+    setNodes,
+    setEdges,
+  };
 }
 
 export const FlowParams = {

From 9aa284337f21927e3141cdc204393bf7951ec730 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 30 Jul 2023 14:09:37 +0530
Subject: [PATCH 27/50] fix(uikit-playground): fix delete screen

---
 .../UIKitWrapper/UIKitWrapper.tsx             |  1 +
 .../PtototypeContainer/PrototypeContainer.tsx |  9 ++++--
 .../uikit-playground/src/Context/reducer.ts   | 28 +++++++++++++++----
 .../src/hooks/useNodesAndEdges.ts             | 10 +++++--
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index 68f805f2d048..8e2885ca4bff 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -12,6 +12,7 @@ const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
   const {
     state: { screens },
   } = useContext(context);
+  if (!screens[data]) return null;
   const { payload, surface } = screens[data];
   return (
     <Box
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
index b252e1a0865f..35cc9b855525 100644
--- a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -7,16 +7,21 @@ const PrototypeContainer = () => {
   const {
     state: { projects, activeProject, screens },
   } = useContext(context);
-  window.console.log(projects[activeProject].flowEdges);
+
   const [currentScreenID, setCurrentScreenID] = useState<string>(
     projects[activeProject].screens[0]
   );
-  const { surface, payload } = screens[currentScreenID];
 
   const activeActions = useMemo(() => {
     return projects[activeProject]?.flowEdges.map((edge) => edge.sourceHandle);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeProject, projects, projects[activeProject].flowEdges]);
+
+  if (!projects[activeProject].screens.length) return null;
+
+  const { surface, payload } =
+    screens[currentScreenID] || screens[projects[activeProject].screens[0]];
+
   return (
     <Scrollable vertical>
       <Box
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index cd30002f90e6..e2569ec413cc 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -29,6 +29,7 @@ import {
   UpdateNodesAndViewPortAction,
 } from './action';
 import getDate from '../utils/getDate';
+import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 
 type IAction =
   | IsMobileAction
@@ -132,9 +133,11 @@ const reducer = (state: initialStateType, action: IAction) => {
           ...state.screens,
           [id]: {
             id,
-            name: action?.payload || 'default',
+            name: action?.payload || 'Untitled Screen',
             payload: [],
-            flowParams: {},
+            surface: SurfaceOptions.Message,
+            date: getDate(),
+            actionPreview: {},
           },
         },
         projects: {
@@ -157,10 +160,12 @@ const reducer = (state: initialStateType, action: IAction) => {
         screens: {
           ...state.screens,
           [id]: {
+            ...state.screens[action.payload.id],
             id,
-            name: action?.payload.name || 'default',
+            date: getDate(),
+            actionPreview: {},
+            name: action?.payload.name || 'Untitled Screen',
             payload: state.screens[action.payload.id].payload,
-            flowParams: {},
           },
         },
         projects: {
@@ -194,6 +199,18 @@ const reducer = (state: initialStateType, action: IAction) => {
           state.activeScreen = '';
         }
       }
+
+      state.projects[activeProject].flowEdges = state.projects[
+        activeProject
+      ].flowEdges.filter(
+        (edge) =>
+          edge.source !== action.payload && edge.target !== action.payload
+      );
+
+      state.projects[activeProject].flowNodes = state.projects[
+        activeProject
+      ].flowNodes.filter((node) => node.id !== action.payload);
+
       return { ...state };
     }
 
@@ -221,7 +238,8 @@ const reducer = (state: initialStateType, action: IAction) => {
             name: 'Untitled Screen',
             date: getDate(),
             payload: [],
-            viewport: undefined,
+            surface: SurfaceOptions.Message,
+            actionPreview: {},
           },
         },
       };
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index d08054f359c8..c83eb7302b9c 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -31,12 +31,18 @@ export function useNodesAndEdges() {
       });
     });
     setNodes(prevNodes);
-  }, [activeProject, projects, screens, setNodes]);
+  }, [activeProject, projects, screens, JSON.stringify(screens), setNodes]);
 
   useEffect(() => {
     const _edges = projects[activeProject].flowEdges;
     setEdges(_edges);
-  }, [activeProject, projects, screens, setEdges]);
+  }, [
+    activeProject,
+    projects,
+    screens,
+    projects[activeProject].flowEdges,
+    setEdges,
+  ]);
   const Viewport = projects[activeProject].viewport;
 
   return {

From 341915e2a7254da1ca7dd4df3547ed7e833c8fda Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 30 Jul 2023 15:44:32 +0530
Subject: [PATCH 28/50] feat(uikit-playground): added persist in localstorage

---
 .../Components/PersistStore/PersistStore.tsx  | 25 +++++++++++++++++
 .../src/Components/PersistStore/index.ts      |  1 +
 .../uikit-playground/src/Context/index.tsx    |  7 ++++-
 .../uikit-playground/src/hooks/useAuth.tsx    |  8 +++---
 .../src/hooks/useLocalStorage.js              | 28 -------------------
 .../src/hooks/useNodesAndEdges.ts             |  4 ++-
 packages/uikit-playground/src/main.tsx        |  7 +++--
 .../src/utils/persistStore.ts                 |  7 +++++
 8 files changed, 51 insertions(+), 36 deletions(-)
 create mode 100644 packages/uikit-playground/src/Components/PersistStore/PersistStore.tsx
 create mode 100644 packages/uikit-playground/src/Components/PersistStore/index.ts
 delete mode 100644 packages/uikit-playground/src/hooks/useLocalStorage.js
 create mode 100644 packages/uikit-playground/src/utils/persistStore.ts

diff --git a/packages/uikit-playground/src/Components/PersistStore/PersistStore.tsx b/packages/uikit-playground/src/Components/PersistStore/PersistStore.tsx
new file mode 100644
index 000000000000..915762627eb7
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PersistStore/PersistStore.tsx
@@ -0,0 +1,25 @@
+import {
+  ComponentProps,
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+} from 'react';
+import { context } from '../../Context';
+import persistStore from '../../utils/persistStore';
+
+const PersistStore = (props: ComponentProps<'div'>) => {
+  const { state } = useContext(context);
+
+  const handleBeforeUnload = useCallback(() => {
+    persistStore(state);
+  }, [state]);
+
+  useEffect(() => {
+    window.onbeforeunload = handleBeforeUnload;
+    return window.removeEventListener('onbeforeunload', handleBeforeUnload);
+  }, [handleBeforeUnload, state]);
+  return <Fragment {...props} />;
+};
+
+export default PersistStore;
diff --git a/packages/uikit-playground/src/Components/PersistStore/index.ts b/packages/uikit-playground/src/Components/PersistStore/index.ts
new file mode 100644
index 000000000000..00e93654bfee
--- /dev/null
+++ b/packages/uikit-playground/src/Components/PersistStore/index.ts
@@ -0,0 +1 @@
+export { default } from './PersistStore';
diff --git a/packages/uikit-playground/src/Context/index.tsx b/packages/uikit-playground/src/Context/index.tsx
index 89ccdee94ef4..268d136272c5 100644
--- a/packages/uikit-playground/src/Context/index.tsx
+++ b/packages/uikit-playground/src/Context/index.tsx
@@ -3,6 +3,11 @@ import createCtx from './createCtx';
 import { initialState } from './initialState';
 import reducer from './reducer';
 export * from './action';
-const [context, Provider] = createCtx(reducer, initialState);
+
+const initializer = localStorage.getItem('pesrist')
+  ? JSON.parse(localStorage.getItem('pesrist') || '')
+  : initialState;
+
+const [context, Provider] = createCtx(reducer, initializer);
 
 export { context, Provider };
diff --git a/packages/uikit-playground/src/hooks/useAuth.tsx b/packages/uikit-playground/src/hooks/useAuth.tsx
index 10f26376b673..14ad4eba1aa5 100644
--- a/packages/uikit-playground/src/hooks/useAuth.tsx
+++ b/packages/uikit-playground/src/hooks/useAuth.tsx
@@ -3,20 +3,20 @@ import type { ReactNode } from 'react';
 import { createContext, useContext, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { useLocalStorage } from './useLocalStorage';
 import { userType } from '../Context/initialState';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
 
 const AuthContext = createContext<{
   user?: userType;
-  login?: (data: unknown) => Promise<void>;
+  login?: (data: userType) => Promise<void>;
   logout?: () => void;
 }>({});
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [user, setUser] = useLocalStorage('user', null);
+  const [user, setUser] = useLocalStorage<userType>('user', null);
   const navigate = useNavigate();
 
-  const login = async (data: unknown) => {
+  const login = async (data: userType) => {
     setUser(data);
     navigate('/dashboard/profile', { replace: true });
   };
diff --git a/packages/uikit-playground/src/hooks/useLocalStorage.js b/packages/uikit-playground/src/hooks/useLocalStorage.js
deleted file mode 100644
index 373c056256fb..000000000000
--- a/packages/uikit-playground/src/hooks/useLocalStorage.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState } from 'react';
-
-export const useLocalStorage = (keyName, defaultValue) => {
-  const [storedValue, setStoredValue] = useState(() => {
-    try {
-      const value = window.localStorage.getItem(keyName);
-
-      if (value) {
-        return JSON.parse(value);
-      }
-      window.localStorage.setItem(keyName, JSON.stringify(defaultValue));
-      return defaultValue;
-    } catch (err) {
-      return defaultValue;
-    }
-  });
-
-  const setValue = (newValue) => {
-    try {
-      window.localStorage.setItem(keyName, JSON.stringify(newValue));
-    } catch (err) {
-      //
-    }
-    setStoredValue(newValue);
-  };
-
-  return [storedValue, setValue];
-};
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index c83eb7302b9c..8b8d76d2f9e6 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -31,6 +31,7 @@ export function useNodesAndEdges() {
       });
     });
     setNodes(prevNodes);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeProject, projects, screens, JSON.stringify(screens), setNodes]);
 
   useEffect(() => {
@@ -40,10 +41,11 @@ export function useNodesAndEdges() {
     activeProject,
     projects,
     screens,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     projects[activeProject].flowEdges,
     setEdges,
   ]);
-  const Viewport = projects[activeProject].viewport;
+  const Viewport = projects[activeProject]?.viewport;
 
   return {
     nodes,
diff --git a/packages/uikit-playground/src/main.tsx b/packages/uikit-playground/src/main.tsx
index 9188772b0c50..4c8af5239609 100644
--- a/packages/uikit-playground/src/main.tsx
+++ b/packages/uikit-playground/src/main.tsx
@@ -5,12 +5,15 @@ import '@rocket.chat/icons/dist/rocketchat.css';
 import './index.css';
 import App from './App';
 import { Provider } from './Context';
+import PersistStore from './Components/PersistStore/PersistStore';
 
 ReactDOM.render(
   <React.StrictMode>
     <Provider>
-      <App />
+      <PersistStore>
+        <App />
+      </PersistStore>
     </Provider>
   </React.StrictMode>,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/packages/uikit-playground/src/utils/persistStore.ts b/packages/uikit-playground/src/utils/persistStore.ts
new file mode 100644
index 000000000000..3b1558553773
--- /dev/null
+++ b/packages/uikit-playground/src/utils/persistStore.ts
@@ -0,0 +1,7 @@
+import { initialStateType } from '../Context/initialState';
+
+const persistStore = (state: initialStateType) => {
+  localStorage.setItem('pesrist', JSON.stringify(state));
+};
+
+export default persistStore;

From acb91076a465a55ad701921d4eafd4afbfae5335 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Mon, 31 Jul 2023 12:59:07 +0530
Subject: [PATCH 29/50] chores(uikit-playground): fix delete project bug

---
 .../ProjectsList/ProjectsThumbnail.tsx              |  7 ++++++-
 .../uikit-playground/src/hooks/useNodesAndEdges.ts  | 13 +++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index f105f3fef204..5436490673de 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -2,7 +2,11 @@ import { Box } from '@rocket.chat/fuselage';
 import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
 import Thumbnail from '../../ScreenThumbnail/Thumbnail';
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
-import { context, renameProjectAction } from '../../../Context';
+import {
+  activeProjectAction,
+  context,
+  renameProjectAction,
+} from '../../../Context';
 import { ChangeEvent, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { formatDate } from '../../../utils/formatDate';
@@ -30,6 +34,7 @@ const ProjectsThumbnail = ({
   const { dispatch } = useContext(context);
   const toast = useToastBarDispatch();
   const activeProjectHandler = () => {
+    dispatch(activeProjectAction(id));
     navigate(`/${id}/${routes.project}`);
   };
 
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index 8b8d76d2f9e6..93639cc11e3f 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { MarkerType, useEdgesState, useNodesState } from 'reactflow';
 import { useContext, useEffect } from 'react';
 import { context } from '../Context';
@@ -31,9 +32,14 @@ export function useNodesAndEdges() {
       });
     });
     setNodes(prevNodes);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeProject, projects, screens, JSON.stringify(screens), setNodes]);
-
+  }, [
+    activeProject,
+    projects,
+    screens,
+    JSON.stringify(screens),
+    projects[activeProject].screens,
+    setNodes,
+  ]);
   useEffect(() => {
     const _edges = projects[activeProject].flowEdges;
     setEdges(_edges);
@@ -41,7 +47,6 @@ export function useNodesAndEdges() {
     activeProject,
     projects,
     screens,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     projects[activeProject].flowEdges,
     setEdges,
   ]);

From d4af4d0818b9a49afadd3483c5b3372bf34e09f1 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sat, 5 Aug 2023 19:40:27 +0530
Subject: [PATCH 30/50] fix(uikit-playground): fix edges rerender

---
 .../FlowContainer/FlowContainer.tsx           | 91 ++++++++++---------
 .../Templates/Container/Payload.tsx           | 22 ++++-
 .../Context/action/updateFlowEdgesAction.ts   | 14 +--
 .../uikit-playground/src/Context/reducer.ts   | 10 +-
 .../src/hooks/useNodesAndEdges.ts             | 17 +++-
 .../uikit-playground/src/utils/filterEdges.ts | 13 +++
 6 files changed, 107 insertions(+), 60 deletions(-)
 create mode 100644 packages/uikit-playground/src/utils/filterEdges.ts

diff --git a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
index c4253ea58af2..f04d95b274c2 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/FlowContainer.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useRef, useState } from 'react';
+import { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import ReactFlow, {
   MiniMap,
   Background,
@@ -11,7 +11,7 @@ import ReactFlow, {
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
-import { context, updateFlowEdgesAction } from '../../Context';
+import { context } from '../../Context';
 import ConnectionLine from './ConnectionLine';
 import UIKitWrapper from './UIKitWrapper/UIKitWrapper';
 import { FlowParams } from './utils';
@@ -19,10 +19,6 @@ import ControlButton from './ControlButtons';
 import { useNodesAndEdges } from '../../hooks/useNodesAndEdges';
 import { updateNodesAndViewPortAction } from '../../Context/action/updateNodesAndViewPortAction';
 
-const nodeTypes = {
-  custom: UIKitWrapper,
-};
-
 const FlowContainer = () => {
   const { dispatch } = useContext(context);
 
@@ -30,6 +26,15 @@ const FlowContainer = () => {
     useNodesAndEdges();
   const { setViewport } = useReactFlow();
 
+  const nodeTypes = useMemo(
+    () => ({
+      custom: UIKitWrapper,
+    }),
+    // used to rerender edge lines on reorder payload
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [edges]
+  );
+
   const [rfInstance, setRfInstance] = useState<ReactFlowInstance>();
   const edgeUpdateSuccessful = useRef(true);
 
@@ -42,10 +47,8 @@ const FlowContainer = () => {
         markerEnd: FlowParams.markerEnd,
         style: FlowParams.style,
       };
-      dispatch(updateFlowEdgesAction(newEdge));
       setEdges((eds) => addEdge(newEdge, eds));
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setEdges]
   );
 
@@ -53,19 +56,25 @@ const FlowContainer = () => {
     edgeUpdateSuccessful.current = false;
   }, []);
 
-  const onEdgeUpdate = useCallback((oldEdge, newConnection) => {
-    edgeUpdateSuccessful.current = true;
-    setEdges((els) => updateEdge(oldEdge, newConnection, els));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const onEdgeUpdate = useCallback(
+    (oldEdge, newConnection) => {
+      edgeUpdateSuccessful.current = true;
+      setEdges((els) => updateEdge(oldEdge, newConnection, els));
+    },
+    [setEdges]
+  );
 
-  const onEdgeUpdateEnd = useCallback((_, edge) => {
-    if (!edgeUpdateSuccessful.current) {
-      setEdges((eds) => eds.filter((e) => e.id !== edge.id));
-    }
-    edgeUpdateSuccessful.current = true;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const onEdgeUpdateEnd = useCallback(
+    (_, edge) => {
+      if (!edgeUpdateSuccessful.current) {
+        setEdges((eds) => {
+          return eds.filter((e) => e.id !== edge.id);
+        });
+      }
+      edgeUpdateSuccessful.current = true;
+    },
+    [setEdges]
+  );
 
   const onNodeDragStop = () => {
     if (!rfInstance?.toObject()) return;
@@ -80,28 +89,26 @@ const FlowContainer = () => {
   };
 
   return (
-    <>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onInit={onInit}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onEdgeUpdate={onEdgeUpdate}
-        onNodeDragStop={onNodeDragStop}
-        onEdgeUpdateStart={onEdgeUpdateStart}
-        onEdgeUpdateEnd={onEdgeUpdateEnd}
-        onConnect={onConnect}
-        fitView
-        nodeTypes={nodeTypes}
-        minZoom={0.1}
-        connectionLineComponent={ConnectionLine}
-      >
-        <MiniMap zoomable pannable />
-        <ControlButton />
-        <Background color="#aaa" gap={16} />
-      </ReactFlow>
-    </>
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onInit={onInit}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onEdgeUpdate={onEdgeUpdate}
+      onNodeDragStop={onNodeDragStop}
+      onEdgeUpdateStart={onEdgeUpdateStart}
+      onEdgeUpdateEnd={onEdgeUpdateEnd}
+      onConnect={onConnect}
+      fitView
+      nodeTypes={nodeTypes}
+      minZoom={0.1}
+      connectionLineComponent={ConnectionLine}
+    >
+      <MiniMap zoomable pannable />
+      <ControlButton />
+      <Background color="#aaa" gap={16} />
+    </ReactFlow>
   );
 };
 
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 3a35833fe549..06623824a8c1 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -1,16 +1,30 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Message, Avatar, Button } from '@rocket.chat/fuselage';
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import React, { useContext } from 'react';
 
-import { context, templatesToggleAction, updatePayloadAction } from '../../../Context';
+import {
+  context,
+  templatesToggleAction,
+  updatePayloadAction,
+} from '../../../Context';
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import { ILayoutBlock } from '../../../Context/initialState';
+import getUniqueId from '../../../utils/getUniqueId';
 
-const Payload = ({ payload }: { payload: readonly LayoutBlock[] }) => {
+const Payload = ({ payload }: { payload: ILayoutBlock[] }) => {
   const { dispatch } = useContext(context);
   const clickHandler = () => {
     dispatch(templatesToggleAction(false));
-    dispatch(updatePayloadAction({ payload, changedByEditor: false }));
+    const payloadWithUniqueIds = payload.map((block) => {
+      block.actionId = getUniqueId();
+      return block;
+    });
+    dispatch(
+      updatePayloadAction({
+        payload: payloadWithUniqueIds,
+        changedByEditor: false,
+      })
+    );
   };
   return (
     <>
diff --git a/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts b/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts
index 4e699261eb84..e2c5a885165b 100644
--- a/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts
+++ b/packages/uikit-playground/src/Context/action/updateFlowEdgesAction.ts
@@ -1,12 +1,14 @@
-import { Edge } from "reactflow";
-import { ActionTypes } from "../reducer";
+import { Edge } from 'reactflow';
+import { ActionTypes } from '../reducer';
 
 export type UpdateFlowEdgesAction = {
-  type: ActionTypes.UpdateFlowEdges,
-  payload: Edge,
+  type: ActionTypes.UpdateFlowEdges;
+  payload: Edge[];
 };
 
-export const updateFlowEdgesAction = (payload: Edge): UpdateFlowEdgesAction => ({
+export const updateFlowEdgesAction = (
+  payload: Edge[]
+): UpdateFlowEdgesAction => ({
   type: ActionTypes.UpdateFlowEdges,
   payload,
-});
\ No newline at end of file
+});
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index e2569ec413cc..5a0429194678 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -30,6 +30,7 @@ import {
 } from './action';
 import getDate from '../utils/getDate';
 import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
+import { filterEdges } from '../utils/filterEdges';
 
 type IAction =
   | IsMobileAction
@@ -111,6 +112,11 @@ const reducer = (state: initialStateType, action: IAction) => {
       state.screens[activeScreen].payload = action?.payload?.payload;
       state.screens[activeScreen].changedByEditor =
         action?.payload?.changedByEditor === undefined;
+      state.projects[activeProject].flowEdges = filterEdges(
+        state.projects[activeProject].flowEdges,
+        action?.payload?.payload.map((node) => node.actionId),
+        activeScreen
+      );
       return { ...state };
     }
     case ActionTypes.ActionPreview:
@@ -295,9 +301,7 @@ const reducer = (state: initialStateType, action: IAction) => {
     }
 
     case ActionTypes.UpdateFlowEdges: {
-      let prevEdges = state.projects[activeProject].flowEdges;
-      prevEdges = [...prevEdges, action.payload];
-      state.projects[activeProject].flowEdges = prevEdges;
+      state.projects[activeProject].flowEdges = action.payload;
       return { ...state };
     }
     case ActionTypes.UpdateNodesAndViewPort: {
diff --git a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
index 93639cc11e3f..1ec1d8f8f093 100644
--- a/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
+++ b/packages/uikit-playground/src/hooks/useNodesAndEdges.ts
@@ -1,14 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { MarkerType, useEdgesState, useNodesState } from 'reactflow';
+import { Edge, MarkerType, useEdgesState, useNodesState } from 'reactflow';
 import { useContext, useEffect } from 'react';
-import { context } from '../Context';
+import { context, updateFlowEdgesAction } from '../Context';
 export function useNodesAndEdges() {
   const {
     state: { screens, projects, activeProject },
+    dispatch,
   } = useContext(context);
 
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, _setEdges, onEdgesChange] = useEdgesState([]);
+
+  const setEdges = (callback: (e: Edge[]) => Edge[]) => {
+    const _edges = callback(edges);
+    _setEdges(_edges);
+    dispatch(updateFlowEdgesAction(_edges));
+  };
 
   useEffect(() => {
     const prevNodes = projects[activeProject].flowNodes;
@@ -42,13 +49,13 @@ export function useNodesAndEdges() {
   ]);
   useEffect(() => {
     const _edges = projects[activeProject].flowEdges;
-    setEdges(_edges);
+    _setEdges(_edges);
   }, [
     activeProject,
     projects,
     screens,
     projects[activeProject].flowEdges,
-    setEdges,
+    _setEdges,
   ]);
   const Viewport = projects[activeProject]?.viewport;
 
diff --git a/packages/uikit-playground/src/utils/filterEdges.ts b/packages/uikit-playground/src/utils/filterEdges.ts
new file mode 100644
index 000000000000..7dafde0efa15
--- /dev/null
+++ b/packages/uikit-playground/src/utils/filterEdges.ts
@@ -0,0 +1,13 @@
+import { Edge } from 'reactflow';
+
+export const filterEdges = (
+  edges: Edge[],
+  activeActionIds: string[],
+  sourceId: string
+) => {
+  return edges.filter(
+    (edge) =>
+      sourceId !== edge.source ||
+      activeActionIds.includes(edge.sourceHandle || '')
+  );
+};

From b38a9eaa122d6ec323a45eb9fee833d5e45e3f0f Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Sun, 6 Aug 2023 21:04:44 +0530
Subject: [PATCH 31/50] chores(uikit-playground): fix ui bugs

---
 .../CreateNewScreenContainer.tsx              | 82 +++++++++++-------
 .../ControlButtons/ControlButtons.tsx         | 22 +----
 .../src/Components/NavBar/NavBar.tsx          | 57 +++++++------
 .../Display/Surface/MessageSurface.tsx        | 16 +---
 .../Components/Preview/Editor/EditorPanel.tsx | 84 +++++++++----------
 .../Components/Preview/NavPanel/NavPanel.tsx  | 82 +++++++++++-------
 .../SplitPlaneContainer.tsx                   | 10 +--
 .../PrototypeRender/PrototypeRender.scss      |  3 -
 .../PtototypeContainer/PrototypeContainer.tsx |  8 +-
 .../Templates/Container/Container.tsx         |  2 +-
 .../src/Components/Templates/Templates.tsx    |  1 +
 .../src/Components/ToggleTabs/index.tsx       | 15 ++--
 .../src/Components/navMenu/Menu/MenuItem.tsx  | 54 +++++++-----
 .../src/Components/navMenu/Menu/index.tsx     | 58 +++++++++++--
 .../uikit-playground/src/Context/reducer.ts   |  2 +-
 .../src/Pages/FlowDiagram.tsx                 |  3 +-
 16 files changed, 277 insertions(+), 222 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
index 7dd6e1ab334c..e32ed198562b 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon, Scrollable } from '@rocket.chat/fuselage';
+import { Box, Button, Icon, Scrollable } from '@rocket.chat/fuselage';
 import { useOutsideClick, useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import { useContext, useRef } from 'react';
 
@@ -17,7 +17,11 @@ const CreateNewScreenContainer = () => {
     dispatch,
   } = useContext(context);
   const ref = useRef(null);
-  useOutsideClick([ref], () => dispatch(openCreateNewScreenAction(false)));
+
+  const onClosehandler = () => {
+    dispatch(openCreateNewScreenAction(false));
+  };
+  useOutsideClick([ref], onClosehandler);
 
   const scrollRef = useHorizontalScroll();
 
@@ -48,41 +52,55 @@ const CreateNewScreenContainer = () => {
           transition: var(--animation-default);
         `}
       >
-        <Box
-          width="max-content"
-          display="flex"
+        <Button
+          position="fixed"
+          square
+          tiny
           className={css`
-            gap: 50px;
-            align-items: center;
+            top: 20px;
+            right: 20px;
           `}
+          onClick={onClosehandler}
         >
-          {projects[activeProject]?.screens
-            .map((id) => screens[id])
-            .map((screen, i) => (
-              <ScreenThumbnail
-                screen={screen}
-                key={i}
-                disableDelete={
-                  projects[activeProject]?.screens.map((id) => screens[id])
-                    .length <= 1
-                }
-              />
-            ))}
-          <Icon
-            onClick={createNewScreenhandler}
-            size="60px"
-            height={'60px'}
-            name={'plus'}
+          <Icon name="cross" size="x15" />
+        </Button>
+        {openCreateNewScreen && (
+          <Box
+            width="max-content"
+            display="flex"
             className={css`
-              cursor: pointer;
-              transition: var(--animation-default);
-              &:hover {
-                scale: 1.1;
-                transition: var(--animation-default);
-              }
+              gap: 50px;
+              align-items: center;
             `}
-          />
-        </Box>
+          >
+            {projects[activeProject]?.screens
+              .map((id) => screens[id])
+              .map((screen, i) => (
+                <ScreenThumbnail
+                  screen={screen}
+                  key={i}
+                  disableDelete={
+                    projects[activeProject]?.screens.map((id) => screens[id])
+                      .length <= 1
+                  }
+                />
+              ))}
+            <Icon
+              onClick={createNewScreenhandler}
+              size="60px"
+              height={'60px'}
+              name={'plus'}
+              className={css`
+                cursor: pointer;
+                transition: var(--animation-default);
+                &:hover {
+                  scale: 1.1;
+                  transition: var(--animation-default);
+                }
+              `}
+            />
+          </Box>
+        )}
       </Box>
     </Scrollable>
   );
diff --git a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
index 39ef0beac8ed..ecea95fdd067 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/ControlButtons/ControlButtons.tsx
@@ -1,25 +1,7 @@
-import { Icon } from '@rocket.chat/fuselage';
-import { useNavigate, useParams } from 'react-router-dom';
-import { Controls, ControlButton } from 'reactflow';
-import routes from '../../../Routes/Routes';
+import { Controls } from 'reactflow';
 
 const ControlButtons = () => {
-  const navigate = useNavigate();
-  const { projectId } = useParams();
-  return (
-    <Controls>
-      <ControlButton
-        onClick={() => navigate(`/${projectId}/${routes.project}`)}
-      >
-        <Icon name="home" size={'x16'} />
-      </ControlButton>
-      <ControlButton
-        onClick={() => navigate(`/${projectId}/${routes.prototype}`)}
-      >
-        <Icon name="play-unfilled" size={'x16'} />
-      </ControlButton>
-    </Controls>
-  );
+  return <Controls></Controls>;
 };
 
 export default ControlButtons;
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index e29afdb31236..1ec75a6bc236 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -19,7 +19,7 @@ import RightNavBtn from './RightNavBtn';
 
 const NabBar: FC = () => {
   const {
-    state: { isMobile, activeProject, screens, activeScreen },
+    state: { isMobile, screens, activeScreen },
     dispatch,
   } = useContext(context);
   const toast = useToastBarDispatch();
@@ -39,9 +39,27 @@ const NabBar: FC = () => {
           user-select: none;
         `}
       >
-        <Button onClick={() => navigate(routes.home)} mis="20px" small square>
+        <Button
+          primary
+          onClick={() => navigate(routes.home)}
+          mis="20px"
+          small
+          square
+        >
           <Icon name="home" size="x24" />
         </Button>
+        {!isMobile && (
+          <Button
+            mis="12px"
+            small
+            success
+            onClick={() => {
+              dispatch(openCreateNewScreenAction(true));
+            }}
+          >
+            Screens
+          </Button>
+        )}
         <Box
           flexGrow={1}
           minWidth="15px"
@@ -57,23 +75,24 @@ const NabBar: FC = () => {
                 `}
               >
                 <Button
+                  secondary
+                  success
                   small
                   onClick={() => {
-                    navigate(`/${activeProject}/${routes.flow}`);
-                  }}
-                >
-                  Flow
-                </Button>
-                <Button
-                  small
-                  onClick={() => {
-                    dispatch(openCreateNewScreenAction(true));
+                    navigator.clipboard.writeText(
+                      JSON.stringify(screens[activeScreen]?.payload)
+                    );
+                    toast({
+                      type: 'success',
+                      message: 'Payload Copied',
+                    });
                   }}
                 >
-                  Screens
+                  Copy Payload
                 </Button>
                 <Button
                   small
+                  danger
                   onClick={() => {
                     dispatch(
                       updatePayloadAction({
@@ -89,20 +108,6 @@ const NabBar: FC = () => {
                 >
                   Clear Blocks
                 </Button>
-                <Button
-                  small
-                  onClick={() => {
-                    navigator.clipboard.writeText(
-                      JSON.stringify(screens[activeScreen]?.payload)
-                    );
-                    toast({
-                      type: 'success',
-                      message: 'Payload Copied',
-                    });
-                  }}
-                >
-                  Copy Payload
-                </Button>
               </ButtonGroup>
             )}
           </Box>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
index 22a1da2d6ef3..ee429e3e2231 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/MessageSurface.tsx
@@ -5,24 +5,14 @@ const MessageSurface = ({ children }: { children: ReactNode }) => (
   <Message>
     <Message.LeftContainer>
       <Avatar
-        url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-              4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-              IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-              AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-              MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-              xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-              jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-              eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-              6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-              SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-              UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
+        url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAcHBwcIBwgJCQgMDAsMDBEQDg4QERoSFBIUEhonGB0YGB0YJyMqIiAiKiM+MSsrMT5IPDk8SFdOTldtaG2Pj8ABBwcHBwgHCAkJCAwMCwwMERAODhARGhIUEhQSGicYHRgYHRgnIyoiICIqIz4xKysxPkg8OTxIV05OV21obY+PwP/CABEIAGQAZAMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgQHAAIDAQj/2gAIAQEAAAAA+kczMwZGh8CUyurWAH80rVUuuWASGfG6m7nyp6Rinris4KpJ17U5Ysuo68Hxb1ZT6WebKzDM9dJfT1ud2KAULVUe518oCrOaBrmCY2JeVey0tKTFYsNow0vgdicyQkM0jcgFnDa9biJLTzrw4RZw2KBLGi42bsO5Rx5Nzr42MlZK58BJXqsPteM9eWRK8jRVN2nKbUosvzl9FytI41WeaeuL/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAIDBAEF/9oACAECEAAAAAABWHRedSXdHFeNk35pzvs6QzxrsEbCyekQTH//xAAZAQADAQEBAAAAAAAAAAAAAAABAgMABAX/2gAIAQMQAAAA2GOI1UQkP3V8oOtqW8tqMJAM1xDFRXp4hRx//8QAKhAAAgMAAgIBAwMEAwAAAAAAAwQBAgUABhESEwcUIRAWMhUgIjMjJDH/2gAIAQEAAQgA/u1mgprCMX+vgL+Eni9ibUIISbXbRn+XRjXx2vCj3wHRj2W3ejJ6uiV9Tmbsw1t6yM/pa9a+vnZ+qWDmsEAE31EwXYVIznaC+iiu4va9aWHFuw9jUw1ovdLtXaewGskFyrWCnQirctNXozklpQgyUt1Lrwl+y/ML9PqTp9gEGqeYt1R29ZI0515lNQjFuld4f6+4IBO5dl283WzKI1mLVraMU4rudg+LveYwywvej2BojhSUTgGyuUBOn4CFOxRcTvZc5LSEiXa11MlKxz63eLC8jGfa1LKjZOrpuHLH22slW3iRTvKLIphL1ftCWhJE+ZdB0f3vXveQEjazN8RISGQiMUz4rPOmxaddib9jx1Ge7gpPZdAdhtKr7dSPbIEmHWbDLdXixxA/K7/zPEFQOo5qYyuEuviWUBtt3d65pU0G9y9O6Xi1lKwiSt85Dmur95luA50xBoWxF5cgF+yKsRqNaMMGubY0GSuQzfXZR+8oWn30WtEC6FNTNM80VKHm0Hv8YCjtfptzkLryTuANmNa1x4lHA5KdWzNrnzz3Xxs0aQbRZK3y95CSdH2v2F3yktDVjqMft55BMxdAdBCsSs9c0Wk25+z0cd12wDU7AdzPuFg3043Qa07BRd4u+N9X7ZMhL5uba2EgdWL6LzW607tECstNx7jhq0DDrJ2rpDVW/wAV9MK+itZM9ei5M3m9ks7OzB+ivyR588hr1/8Aevzl5xjyHtl9c2n7LoMPQirDel2BcmwBC+eM7/cH5Hduotaqtamm6lq8FSaC/wATk+OLetJ9Vo5P58eSRERPi4/eRV4M3k82hUAwfMOaCLY7c8/YAvf3Fh5DJt3RNGetZ4+jaBSGjNh3+UNazNTXHNIioQzZcPCxNY5Yk28xVg3xmDTgq/z52kjC2QLSWzdEbytWhjtSPEVtcc6uiJbqytM8vwTeJhoVrDn1UmeEF/xrihuPVcNakOai0etGa0HS5dBr5dXO+MceKTPCrVeQcTt1XJfz824DgJ4pNudb0IW1tCLdduaQOM3c7oWC+Cmp4oGkWj/tXnjv4EDh/wDSPhPzWI5qsG+RO1K1vcVfVUBIvWboJFVLpD5X+dacxFxT158vEwUWRZgRrW9rV4nWJhCJr/pbtxz+A+EnyGOWmbUnifhg8WI24RLHIwNntu9qefl67FC4eeW//8QAOBAAAgIBAwIDBAUMAwAAAAAAAQIDEQAEEiExQRMiURAyYXEFFCNigQZCQ1JTgpGSobGywSByov/aAAgBAQAJPwD/AJS+Gv1qAFv3x15HGaLV6370SbU/nkKrn0LFEWoo0urWw6EMppFYHkZ9EeKApCro5k2AepEhUlsjaBnoeFq49gY/dLAqcZ5tOOsDG2UfcY/2OK2zUAO1VW72PHtgCeFRNmh5/wCB9vc1/S8hl1boaLLSJkOpfUrPG5D7fCQKbpMvw5V3C8/PYgfMAn/WRPPqH4h08Qt3Ofk1DHDe2d9UHKJ8GBC2cn8WO1DaV+lg8mEkkr/1PGatkgmQOwUL75JBsN0OE7WUg8lTR+Iqs1q7IhIw8KU7nHHDg9Rz7YzRjDtIitv5tCMmEf3RybyZWCsAAAckMmgd6kiPb1ZM08L6QBZjIUZ/ftCWK4QQRYI6HJVetevKm/0EeOWUxsBE8xRAV70O5vIZ2ifTI5KyEjc3XASkqMji64YUaIzxE+rh3SnPNGucsu9WQV8t5MEJ4jHUsx7ADISZXiLb5wYx+AI5yVYdNI7ASxryzDGklHdJASGGaYwS+80J6r8V9VyeaR49PEpcRO10o5us1amVSNiNaOR6U2KADqozQ45MCZqNQC8ZTw1cqo24zuHiEhLuSbf2d4H/AMhisolKeMF6scXdLp4qTePKsgquvwOaNRFFH55kKkbiCR1B7jGMmghURhfDtVK/2IyNVDd6y2lNACruu1YkZjgSNdUGAJbkLQzwN8YRtM680JeP5scMPrS7SFK+TYFGdVD3hIrToP4ZO8W+JvOlbloX3z6Um8OKJ2dWC049DlnWyuGhgJoLCooGTg0XOfRGgZ04dlZpGZf/ABhlCwHhIgW971F1XzxJmVkvljSk9V24GzqkYr5k5pjTsQNs+zdfw4zS6jchBDo+48EkXsIORRRrvhICKV6rmsgELxqYwyEsvYjrmpWRzHYKrtAUngZKkoeJtmxgdxI7ZR1D8Pz3Avw/kOpw7n8K3YirOWNp8rKdpFCzeQeHFJI6CRjtLAHnb05NZpRHBLSIxbzFvWsHIPU5EZZZBt8PreR6YybRvjkLeT12MM0U8kWnhVvFQ2CxO0qcjeO2h4bIEkXwPMCa6k4mxjpUtetHJFV3jteNoRB+kcdz6ZqPBEP2ccTD5sb+8QAcFuqLRoZG8BBBldiCxJHKqF4yFVG4tfUkt6k8nF3x8fMMO95NOwB5BfjNOqX1I6n5nqc64xrpV8HNPHANSRu2cAle9YkTQqg2ecr68MCueErhOFRidq2aB4HOMDCrEzv2aUe6o+C47rGmoeRDXfaUByUusUYViSTucA7jhPnfef3s948DOieUH1Y9Tnd/aavPdBofIZMWMkhdAx5ojoPhkjEeNwPQbRxn0vPfxUHNVJHHp2mjDg0ZXWzhlDBrDIgZiTYyRiqqFDMPMdvr8clBZP4Kzd8cbVwg2SbBse3qyEDPXDU2hkDni7S6I+VHNm2WmHqOBYOVuOE+HpdLqG4/Oln5Y5Zl0+l+1c8kvIdxH4YKLXnVpGJzq/JzpjWdtCxeRcsedvHGe4znO7ZVTwunPbcKyWJz4zEFGNUQMPLeQf7yB5RLudnHRArd8UPJO5PJIvcc0ausU3kKvVAH0IOen9znSGKvxrP1M/VOfmpijdFIj/Oz0xCe4AGcD4cnOQdbKy0BwDVDOiRqR+IB/wB4KkmkcO3elOEr4MTunPQqhIw8F8JP2UX+OdS9f1z9mM7JhI4PIxRYlUccd8VWaO9qtZXNY0Uf7KH7Nf6c4il3Ryx9adlz/8QAJxEAAgIABQMDBQAAAAAAAAAAAAECERASITFBAwRhE1GBIjNScaH/2gAIAQIBAT8AwSbGnjb/ACHusHn0yta8l8SaZpW41hrexaTYpZnzRldrybId0jUen7exGLllSVuyXatQ3+oh2/Uck5Oj0Om1vTJwcJU/4aHqOU74O3azrwWmxcEmqOpbhfsZ4ijVeSMoweulkVsPgcnXgWsWZV7D4+TrbohsvgfBPYl9tYf/xAAiEQACAgEEAgMBAAAAAAAAAAABEQACAxASITEEYTJBgSL/2gAIAQMBAT8A1BGv5rjrjLN6kr6EvjHFqVIHXM5+xBqA1MLFH1LZQK7gHthJJJfcXcAEADnAJPqYvI2khfyUDMnk4thrWrcNi+pUlQSuKys+El7lmjGQIYAzEjpawIPqUpe44DXcsU4C4AHLQCDq35PF+Npf5GDTF3p//9k="
         size={'x36'}
       />
     </Message.LeftContainer>
     <Message.Container>
       <Message.Header>
-        <Message.Name>Haylie George</Message.Name>
-        <Message.Username>@haylie.george</Message.Username>
+        <Message.Name>Vivek Srivastava</Message.Name>
+        <Message.Username>@vivek.srivastava</Message.Username>
         <Message.Role>Admin</Message.Role>
         <Message.Role>User</Message.Role>
         <Message.Role>Owner</Message.Role>
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
index 27a704b79764..c3cd23a22170 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, editorTabsToggleAction } from '../../../Context';
 import ToggleTabs from '../../ToggleTabs';
@@ -10,20 +10,30 @@ import ActionPreviewEditor from './ActionPreviewEditor';
 import FlowDiagram from '../../../Pages/FlowDiagram';
 import PrototypeContainer from '../../PtototypeContainer/PrototypeContainer';
 
-const EditorPanel: FC = () => {
-  enum TabsItem {
-    ActionBlock,
-    ActionPreview,
-    FlowDiagram,
-    Prototype,
-  }
+enum TabsItem {
+  ActionBlock,
+  ActionPreview,
+  FlowDiagram,
+  Prototype,
+}
 
-  const tabsItem = {
-    [TabsItem.ActionBlock]: 'Action Block',
-    [TabsItem.ActionPreview]: 'Action Preview',
-    [TabsItem.FlowDiagram]: 'Flow Diagram',
-    [TabsItem.Prototype]: 'Prototype',
-  };
+const tabsItem = {
+  [TabsItem.ActionBlock]: {
+    name: 'Action Block',
+    Container: ActionBlockEditor,
+  },
+  [TabsItem.ActionPreview]: {
+    name: 'Action Preview',
+    Container: ActionPreviewEditor,
+  },
+  [TabsItem.FlowDiagram]: {
+    name: 'Flow Diagram',
+    Container: FlowDiagram,
+  },
+  [TabsItem.Prototype]: { name: 'Prototype', Container: PrototypeContainer },
+} as const;
+
+const EditorPanel: FC = () => {
   const {
     state: { editorTabsToggle },
     dispatch,
@@ -33,30 +43,11 @@ const EditorPanel: FC = () => {
     dispatch(editorTabsToggleAction(index));
   };
 
-  const tabChangeStyle = () => {
-    switch (editorTabsToggle) {
-      case TabsItem.ActionBlock:
-        return css`
-          transition: 0.5s ease;
-          left: 0;
-        `;
-      case TabsItem.ActionPreview:
-        return css`
-          transition: 0.5s ease;
-          left: -100%;
-        `;
-
-      case TabsItem.FlowDiagram:
-        return css`
-          transition: 0.5s ease;
-          left: -200%;
-        `;
-      case TabsItem.Prototype:
-        return css`
-          transition: 0.5s ease;
-          left: -300%;
-        `;
-    }
+  const tabChangeStyle = (index: number) => {
+    return css`
+      transition: 0.5s ease;
+      left: calc(-100% * ${index});
+    `;
   };
 
   return (
@@ -73,7 +64,7 @@ const EditorPanel: FC = () => {
         ]}
       >
         <ToggleTabs
-          tabsItem={Object.values(tabsItem)}
+          tabsItem={Object.values(tabsItem).map((item) => item.name)}
           onChange={toggleTabsHandler}
           selectedTab={editorTabsToggle}
         />
@@ -89,12 +80,17 @@ const EditorPanel: FC = () => {
             height={'100%'}
             display={'flex'}
             borderBlockStart="var(--default-border)"
-            className={tabChangeStyle()}
+            className={tabChangeStyle(editorTabsToggle)}
           >
-            <ActionBlockEditor />
-            <ActionPreviewEditor />
-            <FlowDiagram />
-            <PrototypeContainer />
+            {Object.values(tabsItem).map(({ Container }, index) => (
+              <>
+                {index === editorTabsToggle ? (
+                  <Container />
+                ) : (
+                  <Box w="100%" h="100%" />
+                )}
+              </>
+            ))}
           </Box>
         </Box>
       </Box>
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index 8b65e4af52ce..118ae175048b 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -3,44 +3,62 @@ import { Box, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
 import React, { useContext } from 'react';
 
-import { context, previewTabsToggleAction, templatesToggleAction } from '../../../Context';
+import {
+  context,
+  previewTabsToggleAction,
+  templatesToggleAction,
+} from '../../../Context';
 import SurfaceSelect from '../../SurfaceSelect';
 import ToggleTabs from '../../ToggleTabs';
 
 const NavPanel: FC = () => {
-	const {
-		state: { isMobile, isTablet, previewTabsToggle },
-		dispatch,
-	} = useContext(context);
+  const {
+    state: { isMobile, isTablet, previewTabsToggle },
+    dispatch,
+  } = useContext(context);
 
-	const toggleTabsHandler = (index: number) => {
-		dispatch(previewTabsToggleAction(index));
-	};
+  const toggleTabsHandler = (index: number) => {
+    dispatch(previewTabsToggleAction(index));
+  };
 
-	const tabsItem: string[] = ['Preview', 'Editor'];
-	return (
-		<Box
-			width={'100%'}
-			height={'40px'}
-			borderBlockEnd={'var(--default-border)'}
-			display={'flex'}
-			alignItems={'center'}
-			zIndex={1}
-			justifyContent={isMobile ? 'flex-end' : 'space-between'}
-			bg={'alternative'}
-			className={css`
-				user-select: none;
-			`}
-		>
-			<Box display='flex' flexGrow={0} pis={'5px'}>
-				{!isMobile && <SurfaceSelect />}
-				<Button mis='10px' small onClick={() => dispatch(templatesToggleAction(true))}>
-					Templates
-				</Button>
-			</Box>
-			{isTablet && <ToggleTabs tabsItem={tabsItem} onChange={toggleTabsHandler} selectedTab={previewTabsToggle} />}
-		</Box>
-	);
+  const tabsItem: string[] = ['Preview', 'Editor'];
+  return (
+    <Box
+      width={'100%'}
+      height={'40px'}
+      borderBlockEnd={'var(--default-border)'}
+      display={'flex'}
+      alignItems={'center'}
+      zIndex={1}
+      justifyContent={isMobile ? 'flex-end' : 'space-between'}
+      bg={'alternative'}
+      className={css`
+        user-select: none;
+      `}
+    >
+      {!isMobile && (
+        <Box display="flex" alignItems="center" flexGrow={0} pis={4}>
+          <SurfaceSelect />
+          <Button
+            mis="10px"
+            small
+            warning
+            height={'max-content'}
+            onClick={() => dispatch(templatesToggleAction(true))}
+          >
+            Templates
+          </Button>
+        </Box>
+      )}
+      {isTablet && (
+        <ToggleTabs
+          tabsItem={tabsItem}
+          onChange={toggleTabsHandler}
+          selectedTab={previewTabsToggle}
+        />
+      )}
+    </Box>
+  );
 };
 
 export default NavPanel;
diff --git a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
index 50596f94c0ef..592da9d2b0e0 100644
--- a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
+++ b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
@@ -1,6 +1,6 @@
 import './splitPlane.css';
 import type { FC } from 'react';
-import React, { useEffect, useContext } from 'react';
+import { useEffect, useContext } from 'react';
 import SplitPane from 'react-split-pane';
 
 import { context, previewTabsToggleAction } from '../../../Context';
@@ -8,8 +8,8 @@ import Display from '../Display';
 import EditorPanel from '../Editor';
 
 type PreviewSizeType = {
-  blockSize: number,
-  inlineSize: number,
+  blockSize: number;
+  inlineSize: number;
 };
 const SplitPlaneContainer: FC<{ PreviewSize: PreviewSizeType }> = ({
   PreviewSize,
@@ -25,8 +25,8 @@ const SplitPlaneContainer: FC<{ PreviewSize: PreviewSizeType }> = ({
 
   const splitPaneProps = {
     defaultSize: PreviewSize.inlineSize * 0.5,
-    minSize: 500,
-    maxSize: PreviewSize.inlineSize - 300,
+    minSize: 300,
+    maxSize: PreviewSize.inlineSize - 350,
     allowResize: !isTablet,
   };
 
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
index beb188367494..84731b4f01ae 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
@@ -1,9 +1,6 @@
 .rc-prototype-renderer {
     background: white;
     padding: 20px !important;
-    border-radius: 20px;
-    max-width: 800px !important;
-    outline: 1px solid var(--default-border-color) !important;
 
     .rc-prototype_action{
         position: relative;
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
index 35cc9b855525..2cddaa055600 100644
--- a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -24,13 +24,7 @@ const PrototypeContainer = () => {
 
   return (
     <Scrollable vertical>
-      <Box
-        w="100%"
-        h="100%"
-        paddingBlock={'40px'}
-        display="flex"
-        justifyContent="center"
-      >
+      <Box w="100%" h="100%">
         <PrototypeRender
           surface={surface}
           payload={payload}
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
index 13bc2456221e..15bfca3cff34 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
@@ -5,7 +5,7 @@ import type { templateType } from '../../../utils/templates';
 import Section from './Section';
 
 const Container = ({ templates }: { templates: templateType[] }) => (
-  <Box width="50%" mbs="80px" height="max-content">
+  <Box maxWidth="800px" margin="80px" width={'90%'} height="max-content">
     {templates &&
       templates.map((template, i) => <Section template={template} index={i} />)}
   </Box>
diff --git a/packages/uikit-playground/src/Components/Templates/Templates.tsx b/packages/uikit-playground/src/Components/Templates/Templates.tsx
index d6fcc939d672..35b734f38e05 100644
--- a/packages/uikit-playground/src/Components/Templates/Templates.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Templates.tsx
@@ -33,6 +33,7 @@ const Templates: FC = () => {
           >
             <Button
               position="fixed"
+              square
               className={css`
                 top: 80px;
                 right: 40px;
diff --git a/packages/uikit-playground/src/Components/ToggleTabs/index.tsx b/packages/uikit-playground/src/Components/ToggleTabs/index.tsx
index 7e08140c3c41..1a949b5c1a02 100644
--- a/packages/uikit-playground/src/Components/ToggleTabs/index.tsx
+++ b/packages/uikit-playground/src/Components/ToggleTabs/index.tsx
@@ -1,12 +1,15 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Tabs } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
 
-const ToggleTabs: FC<{
-  tabsItem: string[],
-  onChange: (index: number) => void,
-  selectedTab: number,
-}> = ({ tabsItem, onChange, selectedTab }) => {
+const ToggleTabs = ({
+  tabsItem,
+  onChange,
+  selectedTab,
+}: {
+  tabsItem: string[];
+  onChange: (index: number) => void;
+  selectedTab: number;
+}) => {
   const disableBorder = css`
     border-left: none !important;
     border-right: none !important;
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
index 9b90eddd5ea0..8e07564bd9cf 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/MenuItem.tsx
@@ -1,29 +1,39 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
-import React from 'react';
+import type { ComponentProps, FC } from 'react';
 
-const MenuItem: FC<{ name: string }> = ({ name }) => {
-	const pointer = css`
-		cursor: pointer;
-	`;
+const MenuItem: FC<{ name: string } & ComponentProps<typeof Box>> = ({
+  name,
+  ...props
+}) => {
+  const pointer = css`
+    cursor: pointer;
+  `;
 
-	const style = css`
-		&:hover {
-			background-color: #1f2329;
-		}
-		&:active {
-			background-color: #6c727a;
-			opacity: 0.3;
-		}
-	`;
-	return (
-		<Box width='100%' height='28px' paddingBlock='4px' display='flex' alignItems='center' className={[pointer, style]}>
-			<Label className={pointer} color='hint' fontScale='p2'>
-				{name}
-			</Label>
-		</Box>
-	);
+  const style = css`
+    &:hover {
+      background-color: #1f2329;
+    }
+    &:active {
+      background-color: #6c727a;
+      opacity: 0.3;
+    }
+  `;
+  return (
+    <Box
+      width="100%"
+      height="28px"
+      paddingBlock="4px"
+      display="flex"
+      alignItems="center"
+      className={[pointer, style]}
+      {...props}
+    >
+      <Label className={pointer} color="hint" fontScale="p2">
+        {name}
+      </Label>
+    </Box>
+  );
 };
 
 export default MenuItem;
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
index be94a8f5a0d6..074666c031c6 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
@@ -1,13 +1,25 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
-import React from 'react';
+import { useContext, type FC } from 'react';
 
 import SurfaceSelect from '../../SurfaceSelect';
 import MenuItem from './MenuItem';
 import Wrapper from './Wrapper';
+import {
+  context,
+  templatesToggleAction,
+  updatePayloadAction,
+} from '../../../Context';
+import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
 
 const Menu: FC<{ isOpen: boolean }> = ({ isOpen }) => {
+  const {
+    state: { screens, activeScreen },
+    dispatch,
+  } = useContext(context);
+
+  const toast = useToastBarDispatch();
+
   const basicStyle = css`
     right: max(-85%, -280px);
     transition: 0.3s ease;
@@ -24,11 +36,10 @@ const Menu: FC<{ isOpen: boolean }> = ({ isOpen }) => {
 
   return (
     <Box
-      position='absolute'
-      width='min(85%, 280px)'
-      height='100%'
-      bg='default'
-      elevation='2'
+      position="absolute"
+      width="min(85%, 280px)"
+      height="100%"
+      bg="default"
       className={[basicStyle, toggleStyle]}
       onClick={(e) => {
         e.stopPropagation();
@@ -38,8 +49,37 @@ const Menu: FC<{ isOpen: boolean }> = ({ isOpen }) => {
         <Box alignSelf={'flex-start'}>
           <SurfaceSelect />
         </Box>
-        <MenuItem name={'Clear Blocks'} />
-        <MenuItem name={'Copy Payload'} />
+        <MenuItem
+          name={'Templates'}
+          onClick={() => dispatch(templatesToggleAction(true))}
+        />
+        <MenuItem
+          name={'Clear Blocks'}
+          onClick={() => {
+            dispatch(
+              updatePayloadAction({
+                payload: [],
+                changedByEditor: false,
+              })
+            );
+            toast({
+              type: 'success',
+              message: 'All Blocks Cleared',
+            });
+          }}
+        />
+        <MenuItem
+          name={'Copy Payload'}
+          onClick={() => {
+            navigator.clipboard.writeText(
+              JSON.stringify(screens[activeScreen]?.payload)
+            );
+            toast({
+              type: 'success',
+              message: 'Payload Copied',
+            });
+          }}
+        />
         <MenuItem name={'Send to RocketChat'} />
       </Wrapper>
     </Box>
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 5a0429194678..1aad29c7911f 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -93,7 +93,7 @@ const reducer = (state: initialStateType, action: IAction) => {
     case ActionTypes.IsTablet:
       return { ...state, isTablet: action.payload };
     case ActionTypes.SidebarToggle:
-      return { ...state, sidebarToggle: action.payload };
+      return { ...state, sideBarToggle: action.payload };
     case ActionTypes.PreviewToggle:
       return { ...state, previewTabsToggle: action.payload };
     case ActionTypes.EditorToggle:
diff --git a/packages/uikit-playground/src/Pages/FlowDiagram.tsx b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
index d4fed9b2872c..c228cd338aba 100644
--- a/packages/uikit-playground/src/Pages/FlowDiagram.tsx
+++ b/packages/uikit-playground/src/Pages/FlowDiagram.tsx
@@ -2,8 +2,9 @@ import { Box } from '@rocket.chat/fuselage';
 
 import FlowContainer from '../Components/FlowContainer/FlowContainer';
 import { ReactFlowProvider } from 'reactflow';
+import { FC } from 'react';
 
-const FlowDiagram = () => (
+const FlowDiagram: FC = () => (
   <Box w="100%" h="100%" position="relative">
     <ReactFlowProvider>
       <FlowContainer />

From cc1339998bfb6b1c1925e5c719e4d83b5a137cdf Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Mon, 7 Aug 2023 00:17:01 +0530
Subject: [PATCH 32/50] chores(uikit-playground): fix action preview

---
 .../src/Components/CodeEditor/BlockEditor.tsx        | 12 +++++-------
 .../src/Components/CodeEditor/PreviewEditor.tsx      | 11 ++++++-----
 packages/uikit-playground/src/Context/reducer.ts     |  6 ++++--
 packages/uikit-playground/src/utils/intendCode.ts    |  3 +++
 4 files changed, 18 insertions(+), 14 deletions(-)
 create mode 100644 packages/uikit-playground/src/utils/intendCode.ts

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index 381cbe15ff1b..a8106dbcd886 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -7,6 +7,7 @@ import { useEffect, useContext } from 'react';
 import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
+import intendCode from '../../utils/intendCode';
 
 type CodeMirrorProps = {
   extensions?: Extension[];
@@ -20,7 +21,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
 
   const { editor, changes, setValue } = useCodeMirror(
     extensions,
-    JSON.stringify(screens[activeScreen]?.payload, undefined, 4)
+    intendCode(screens[activeScreen]?.payload)
   );
   const debounceValue = useDebouncedValue(changes?.value, 1500);
 
@@ -39,7 +40,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
   useEffect(() => {
     if (!changes?.isDispatch) {
       try {
-        const prettierCode = codePrettier(changes.value, changes.cursor);
+        const prettierCode = codePrettier(changes.value, changes.cursor || 0);
         setValue(prettierCode.formatted, {
           cursor: prettierCode.cursorOffset,
         });
@@ -52,16 +53,13 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
 
   useEffect(() => {
     if (!screens[activeScreen]?.changedByEditor) {
-      setValue(
-        JSON.stringify(screens[activeScreen]?.payload, undefined, 4),
-        {}
-      );
+      setValue(intendCode(screens[activeScreen]?.payload), {});
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen]?.payload, activeScreen]);
 
   useEffect(() => {
-    setValue(JSON.stringify(screens[activeScreen]?.payload, undefined, 4), {});
+    setValue(intendCode(screens[activeScreen]?.payload), {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeScreen]);
 
diff --git a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
index 46b7cbe3eea3..0a0396167e3d 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/PreviewEditor.tsx
@@ -4,6 +4,7 @@ import { useEffect, useContext } from 'react';
 
 import { context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
+import intendCode from '../../utils/intendCode';
 
 type CodeMirrorProps = {
   extensions?: Extension[];
@@ -13,13 +14,13 @@ const PreviewEditor = ({ extensions }: CodeMirrorProps) => {
   const {
     state: { screens, activeScreen },
   } = useContext(context);
-  const { editor, setValue } = useCodeMirror(extensions, `{}`);
+  const { editor, setValue } = useCodeMirror(
+    extensions,
+    intendCode(screens[activeScreen]?.actionPreview)
+  );
 
   useEffect(() => {
-    setValue(
-      JSON.stringify(screens[activeScreen]?.actionPreview, undefined, 4),
-      {}
-    );
+    setValue(intendCode(screens[activeScreen]?.actionPreview), {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [screens[activeScreen]?.actionPreview]);
 
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 1aad29c7911f..1ae237505623 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -119,8 +119,10 @@ const reducer = (state: initialStateType, action: IAction) => {
       );
       return { ...state };
     }
-    case ActionTypes.ActionPreview:
-      return { ...state, actionPreview: action.payload };
+    case ActionTypes.ActionPreview: {
+      state.screens[activeScreen].actionPreview = action.payload;
+      return { ...state };
+    }
     case ActionTypes.User:
       return { ...state, user: action.payload };
     case ActionTypes.OpenCreateNewScreen:
diff --git a/packages/uikit-playground/src/utils/intendCode.ts b/packages/uikit-playground/src/utils/intendCode.ts
new file mode 100644
index 000000000000..0bd069880b2b
--- /dev/null
+++ b/packages/uikit-playground/src/utils/intendCode.ts
@@ -0,0 +1,3 @@
+const intendCode = (code: object) => JSON.stringify(code, null, 4);
+
+export default intendCode;

From 9acac550297a9b99af348bb26e5a51aa86eea712 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Tue, 8 Aug 2023 11:28:15 -0300
Subject: [PATCH 33/50] fix rebase result :s

---
 .../src/Payload/actionBlock/BlocksTree.ts     | 23 ++++++----------
 .../src/Payload/actionBlock/action/index.ts   | 12 ---------
 packages/uikit-playground/vite.config.ts      | 26 +++++++++----------
 3 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts b/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
index aa97da04e2f3..700c5505b6fb 100644
--- a/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
+++ b/packages/uikit-playground/src/Payload/actionBlock/BlocksTree.ts
@@ -1,4 +1,5 @@
 import type { Item } from '../../Components/DropDown/types';
+import { callout } from '../callout';
 import {
   actionWithButtonDefault,
   actionWithButtonPrimary,
@@ -9,17 +10,10 @@ import {
   actionWithButtonSuccess,
   actionWithButtonSecondaryWithVariant,
   actionWithMenu,
-  // actionWithImage,
-  // actionWithSingleLineInput,
-  // actionWithMultiLineInput,
   actionWithSingleStaticSelect,
   actionWithMultiStaticSelect,
   actionWithDatePicker,
   actionWithLinearScale,
-  actionWithToggleSwitch,
-  actionWithRadioButton,
-  actionWithCheckbox,
-  actionWithTimePicker,
 } from './action';
 import {
   contextWithPlainText,
@@ -28,7 +22,6 @@ import {
   contextWithAllElements,
 } from './context';
 import { divider } from './divider';
-import { callout } from './callout';
 import { imageWithTitle, imageWithoutTitle } from './image';
 import {
   inputWithSingleLineInput,
@@ -59,11 +52,11 @@ import {
   sectionWithMenu,
   sectionWithdatePicker,
 } from './section';
-import {
-  disabled,
-  plain,
-  selected,
-} from './tabNavigation';
+import { disabled, plain, selected } from '../tabNavigation';
+import { actionWithToggleSwitch } from '../action/toggleSwitch';
+import { actionWithTimePicker } from '../action/timePicker';
+import { actionWithRadioButton } from '../action/radioButton';
+import { actionWithCheckbox } from '../action/checkbox';
 
 const BlocksTree: Item = [
   {
@@ -347,9 +340,9 @@ const BlocksTree: Item = [
       {
         label: 'Selected',
         payload: selected,
-      }
+      },
     ],
-  }
+  },
 ];
 
 export default BlocksTree;
diff --git a/packages/uikit-playground/src/Payload/actionBlock/action/index.ts b/packages/uikit-playground/src/Payload/actionBlock/action/index.ts
index 33eaa00b26d3..e5909c4a26c6 100644
--- a/packages/uikit-playground/src/Payload/actionBlock/action/index.ts
+++ b/packages/uikit-playground/src/Payload/actionBlock/action/index.ts
@@ -1,21 +1,9 @@
 export * from './button';
 
-// export * from './input';
-
 export * from './staticSelect';
 
-// export * from './image';
-
 export * from './menu';
 
 export * from './datePicker';
 
 export * from './linearScale';
-
-export * from './toggleSwitch';
-
-export * from './radioButton';
-
-export * from './checkbox';
-
-export * from './timePicker';
diff --git a/packages/uikit-playground/vite.config.ts b/packages/uikit-playground/vite.config.ts
index 36f78a6ecda2..d4e34002e9fe 100644
--- a/packages/uikit-playground/vite.config.ts
+++ b/packages/uikit-playground/vite.config.ts
@@ -3,17 +3,17 @@ import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
-	logLevel: 'error',
-	esbuild: {
-		drop: mode === 'development' ? ['console', 'debugger'] : [],
-	},
-	plugins: [react()],
-	optimizeDeps: {
-		include: ['@rocket.chat/ui-contexts'],
-	},
-	build: {
-		commonjsOptions: {
-			include: [/ui-contexts/, /node_modules/],
-		},
-	},
+  logLevel: 'info',
+  esbuild: {
+    drop: mode === 'development' ? ['console', 'debugger'] : [],
+  },
+  plugins: [react()],
+  optimizeDeps: {
+    include: ['@rocket.chat/ui-contexts'],
+  },
+  build: {
+    commonjsOptions: {
+      include: [/ui-contexts/, /node_modules/],
+    },
+  },
 }));

From bacae79e6aeed2cde0700082b9001369386f5871 Mon Sep 17 00:00:00 2001
From: intVivek <viveksrivastava6180@gmail.com>
Date: Wed, 9 Aug 2023 01:58:54 +0530
Subject: [PATCH 34/50] fix(uikit-playground): fix imports

---
 .../src/Components/Preview/Display/Surface/Surface.tsx      | 6 +++---
 .../src/Components/PrototypeRender/PrototypeRender.scss     | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index d4c135b37bd5..e040b0ed2a8c 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
+import { kitContext } from '@rocket.chat/fuselage-ui-kit';
 import type { FC } from 'react';
 import { useContext, useState, useEffect } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
@@ -75,7 +75,7 @@ const Surface: FC = () => {
 
   return (
     <Box w="100%" h="100%" padding="20px">
-      <UiKitContext.Provider
+      <kitContext.Provider
         value={{
           action: (a) => {
             preview.action = a;
@@ -96,7 +96,7 @@ const Surface: FC = () => {
             onDragEnd={onDragEnd}
           />
         </SurfaceRender>
-      </UiKitContext.Provider>
+      </kitContext.Provider>
     </Box>
   );
 };
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
index 84731b4f01ae..5c5517cd842f 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
@@ -1,3 +1,5 @@
+@import url('../../cssVariables.css');
+
 .rc-prototype-renderer {
     background: white;
     padding: 20px !important;

From 975e347953cb0a35c278369cb84add21b0046990 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Thu, 10 Aug 2023 15:56:13 +0530
Subject: [PATCH 35/50] chores(uikit-playground): delete duplicate hook

---
 .../Preview/Display/Surface/Surface.tsx       |  6 +-
 .../src/Components/hooks/useCodeMirror.ts     | 79 -------------------
 2 files changed, 3 insertions(+), 82 deletions(-)
 delete mode 100644 packages/uikit-playground/src/Components/hooks/useCodeMirror.ts

diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index e040b0ed2a8c..d4c135b37bd5 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { kitContext } from '@rocket.chat/fuselage-ui-kit';
+import { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
 import type { FC } from 'react';
 import { useContext, useState, useEffect } from 'react';
 import type { DropResult } from 'react-beautiful-dnd';
@@ -75,7 +75,7 @@ const Surface: FC = () => {
 
   return (
     <Box w="100%" h="100%" padding="20px">
-      <kitContext.Provider
+      <UiKitContext.Provider
         value={{
           action: (a) => {
             preview.action = a;
@@ -96,7 +96,7 @@ const Surface: FC = () => {
             onDragEnd={onDragEnd}
           />
         </SurfaceRender>
-      </kitContext.Provider>
+      </UiKitContext.Provider>
     </Box>
   );
 };
diff --git a/packages/uikit-playground/src/Components/hooks/useCodeMirror.ts b/packages/uikit-playground/src/Components/hooks/useCodeMirror.ts
deleted file mode 100644
index 48bdcddfcaa2..000000000000
--- a/packages/uikit-playground/src/Components/hooks/useCodeMirror.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { EditorState } from '@codemirror/state';
-import type { Extension } from '@codemirror/state';
-import { EditorView } from 'codemirror';
-import { useCallback, useEffect, useState, useRef } from 'react';
-
-type changes = {
-  value: string;
-  isDispatch: boolean;
-  cursor?: number;
-};
-
-export default function useCodeMirror(extensions?: Extension[], doc?: string) {
-  const view = useRef<EditorView>();
-  const [element, setElement] = useState<HTMLElement>();
-  const [changes, setChanges] = useState<changes>({
-    value: '[]',
-    isDispatch: true,
-    cursor: 0,
-  });
-
-  const editor = useCallback((node: HTMLElement | null) => {
-    if (!node) return;
-
-    setElement(node);
-  }, []);
-
-  const updateListener = EditorView.updateListener.of((update) => {
-    if (update.docChanged) {
-      setChanges({
-        value: view.current?.state?.doc.toString() || '',
-        // @ts-expect-error Property 'annotations' does not exist on type 'Transaction'. Did you mean 'annotation'?
-        isDispatch: update?.transactions[0]?.annotations?.length === 1 || false,
-        cursor: view.current?.state?.selection?.main?.head || 0,
-      });
-    }
-  });
-
-  const setValue = (
-    value: string,
-    {
-      from,
-      to,
-      cursor,
-    }: {
-      from?: number;
-      to?: number;
-      cursor?: number;
-    }
-  ) => {
-    try {
-      view.current?.dispatch({
-        changes: {
-          from: from || 0,
-          to: to || view.current.state.doc.length,
-          insert: value || '',
-        },
-        selection: { anchor: cursor || 0 },
-      });
-    } catch (e) {
-      // do nothing;
-    }
-  };
-
-  useEffect(() => {
-    if (!element) return;
-
-    view.current = new EditorView({
-      state: EditorState.create({
-        doc: doc || '',
-        extensions: [updateListener, ...(extensions || [])],
-      }),
-      parent: element,
-    });
-
-    return () => view.current?.destroy();
-  }, [doc, element, extensions, updateListener]);
-
-  return { editor, changes, setValue };
-}

From 4acdea9a2f175bc35701faa4658ea707dc5784a3 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Fri, 11 Aug 2023 02:14:46 +0530
Subject: [PATCH 36/50] refactor(uikit-playground): Moved Edit Menu

---
 .../CreateNewScreen/ScreenThumbnail.tsx        | 18 +++++++++---------
 .../ProjectsList/ProjectsThumbnail.tsx         | 16 ++++++++--------
 .../PrototypeRender/PrototypeRender.scss       |  2 +-
 .../ScreenThumbnail/EditMenu/EditMenu.tsx      |  9 ++++++---
 .../Components/ScreenThumbnail/Thumbnail.scss  |  7 -------
 5 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index 34857f8fec01..93429270d237 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -58,16 +58,16 @@ const ScreenThumbnail = ({
   };
   return (
     <Box position="relative">
+      <EditMenu
+        name={name}
+        date={screen.date}
+        onChange={onChangeNameHandler}
+        onDuplicate={duplicateScreenHandler}
+        onDelete={deleteScreenHandler}
+        onBlur={nameSaveHandler}
+        labelProps={{ fontScale: 'h5' }}
+      />
       <ScreenThumbnailWrapper onClick={activateScreenHandler}>
-        <EditMenu
-          name={name}
-          date={screen.date}
-          onChange={onChangeNameHandler}
-          onDuplicate={duplicateScreenHandler}
-          onDelete={deleteScreenHandler}
-          onBlur={nameSaveHandler}
-          labelProps={{ fontScale: 'h5' }}
-        />
         <Thumbnail of={renderPayload({ payload: screen.payload })} />
       </ScreenThumbnailWrapper>
     </Box>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index 5436490673de..9fe35ebd4cf4 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -66,6 +66,14 @@ const ProjectsThumbnail = ({
       `}
       position="relative"
     >
+      <EditMenu
+        name={name}
+        date={date}
+        onChange={onChangeNameHandler}
+        onDelete={deleteScreenHandler}
+        onBlur={nameSaveHandler}
+        labelProps={{ fontScale: 'h5' }}
+      />
       <ScreenThumbnailWrapper
         onClick={activeProjectHandler}
         width={'200px'}
@@ -75,14 +83,6 @@ const ProjectsThumbnail = ({
         <Thumbnail of={RenderPayload({ payload })} />
         <Box onClick={(e) => e.stopPropagation()}></Box>
       </ScreenThumbnailWrapper>
-      <EditMenu
-        name={name}
-        date={date}
-        onChange={onChangeNameHandler}
-        onDelete={deleteScreenHandler}
-        onBlur={nameSaveHandler}
-        labelProps={{ fontScale: 'h5' }}
-      />
       <EditableLabel
         value={name}
         onChange={onChangeNameHandler}
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
index 5c5517cd842f..6cf843251032 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.scss
@@ -1,4 +1,4 @@
-@import url('../../cssVariables.css');
+@use '../../cssVariables.css';
 
 .rc-prototype-renderer {
     background: white;
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
index 74e470398073..3bab1f077f7c 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
@@ -44,12 +44,15 @@ const EditMenu = ({
   return (
     <Box
       position="absolute"
-      insetBlockStart="0px"
-      insetInlineEnd="0px"
+      insetBlockStart="10px"
+      insetInlineEnd="10px"
       zIndex={100}
       ref={containerRef}
       className="rc-edit-menu"
-      onClick={() => setIsOpen(true)}
+      onClick={(e) => {
+        e.stopPropagation();
+        setIsOpen(true);
+      }}
     >
       <Button ref={buttonRef} square mini>
         <Icon name="cog" size="x16" />
diff --git a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss
index c9e7c6b229a9..ab6e820153d8 100644
--- a/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss
+++ b/packages/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.scss
@@ -18,12 +18,5 @@
         background: #cfcfcf20;
         transition: var(--animation-very-fast);
       }
-      .rc-edit-menu {
-        display: block;
-      }
     }
 }
-
-.rc-edit-menu {
-    display: none;
-  }
\ No newline at end of file

From 1cf8d3da61f37ddf45259ce4bac63e1789d565ca Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Sun, 13 Aug 2023 19:37:13 +0530
Subject: [PATCH 37/50] fix(uikit-playground): fix trmplates to support surface

---
 .../Templates/Container/Payload.tsx           |  73 +-
 .../Templates/Container/Section.tsx           |   6 +-
 .../uikit-playground/src/utils/templates.ts   | 629 +++++++++---------
 3 files changed, 348 insertions(+), 360 deletions(-)

diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 06623824a8c1..0e864c58aa78 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -1,6 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Message, Avatar, Button } from '@rocket.chat/fuselage';
-import React, { useContext } from 'react';
+import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { Box, Button } from '@rocket.chat/fuselage';
+import { useContext, useMemo } from 'react';
 
 import {
   context,
@@ -8,20 +9,31 @@ import {
   updatePayloadAction,
 } from '../../../Context';
 import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
-import { ILayoutBlock } from '../../../Context/initialState';
 import getUniqueId from '../../../utils/getUniqueId';
+import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
+import { ILayoutBlock } from '../../../Context/initialState';
+import { SurfaceOptions } from '../../Preview/Display/Surface/constant';
 
-const Payload = ({ payload }: { payload: ILayoutBlock[] }) => {
+const Payload = ({
+  blocks,
+  surface,
+}: {
+  surface: SurfaceOptions;
+  blocks: LayoutBlock[];
+}) => {
   const { dispatch } = useContext(context);
+  const blocksWithUniqueIds: ILayoutBlock[] = useMemo(
+    () =>
+      blocks.map((block) => {
+        return { ...block, actionId: getUniqueId() };
+      }),
+    [blocks]
+  );
   const clickHandler = () => {
     dispatch(templatesToggleAction(false));
-    const payloadWithUniqueIds = payload.map((block) => {
-      block.actionId = getUniqueId();
-      return block;
-    });
     dispatch(
       updatePayloadAction({
-        payload: payloadWithUniqueIds,
+        payload: blocksWithUniqueIds,
         changedByEditor: false,
       })
     );
@@ -45,46 +57,9 @@ const Payload = ({ payload }: { payload: ILayoutBlock[] }) => {
             }
           `}
         >
-          <Message clickable>
-            <Message.LeftContainer>
-              <Avatar
-                url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC
-                    4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMj
-                    IyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAA
-                    AAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAg
-                    MREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6L
-                    xqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVr
-                    jbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRk
-                    eX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef
-                    6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkB
-                    SuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlP
-                    UH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z"
-                size={'x36'}
-              />
-            </Message.LeftContainer>
-            <Message.Container>
-              <Message.Header>
-                <Message.Name>Haylie George</Message.Name>
-                <Message.Username>@haylie.george</Message.Username>
-                <Message.Role>Admin</Message.Role>
-                <Message.Role>User</Message.Role>
-                <Message.Role>Owner</Message.Role>
-                <Message.Timestamp>12:00 PM</Message.Timestamp>
-              </Message.Header>
-              <Message.Body>
-                {payload.map((element) => (
-                  <RenderPayload payload={[element]} />
-                ))}
-              </Message.Body>
-            </Message.Container>
-            <Message.Toolbox.Wrapper>
-              <Message.Toolbox>
-                <Message.Toolbox.Item icon="quote" />
-                <Message.Toolbox.Item icon="clock" />
-                <Message.Toolbox.Item icon="thread" />
-              </Message.Toolbox>
-            </Message.Toolbox.Wrapper>
-          </Message>
+          <SurfaceRender type={surface}>
+            <RenderPayload payload={blocksWithUniqueIds} surface={surface} />
+          </SurfaceRender>
         </Box>
       </Box>
       <Button onClick={clickHandler} primary mbs={'15px'} mbe={'25px'}>
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
index fe2a13ae0913..9207b4c35e53 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -8,8 +8,8 @@ const Section = ({
   template,
   index,
 }: {
-  template: templateType,
-  index: number,
+  template: templateType;
+  index: number;
 }) => (
   <Box mbs="25px" width="100%" key={index}>
     <Box mbe="5px">
@@ -21,7 +21,7 @@ const Section = ({
       <Label>{template.description}</Label>
     </Box>
     {template.payloads.map((payload) => (
-      <Payload payload={payload} />
+      <Payload blocks={payload.blocks} surface={payload.surface} />
     ))}
   </Box>
 );
diff --git a/packages/uikit-playground/src/utils/templates.ts b/packages/uikit-playground/src/utils/templates.ts
index e8a18ee348e6..59a0a085f439 100644
--- a/packages/uikit-playground/src/utils/templates.ts
+++ b/packages/uikit-playground/src/utils/templates.ts
@@ -1,11 +1,15 @@
 import type { LayoutBlock } from '@rocket.chat/ui-kit';
+import { SurfaceOptions } from '../Components/Preview/Display/Surface/constant';
 
-type payload = LayoutBlock[];
+type payload = {
+  surface: SurfaceOptions;
+  blocks: LayoutBlock[];
+};
 
 export type templateType = {
-  heading: string,
-  description: string,
-  payloads: payload[],
+  heading: string;
+  description: string;
+  payloads: payload[];
 };
 
 export const templates: templateType[] = [
@@ -13,264 +17,270 @@ export const templates: templateType[] = [
     heading: 'Approval',
     description: 'Example message for receiving and responding to requests.',
     payloads: [
-      [
-        {
-          type: 'section',
-          text: {
-            type: 'plain_text',
-            emoji: true,
-            text: 'Looks like you have a scheduling conflict with this event:',
-          },
-        },
-        {
-          type: 'divider',
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'Iris Zelda 1-1 Tuesday, January 21 4:00-4:30pm Building 2 - Havarti Cheese (3) 2 guests',
-          },
-          accessory: {
-            type: 'image',
-            imageUrl:
-              'https://api.slack.com/img/blocks/bkb_template_images/notifications.png',
-            altText: 'calendar thumbnail',
-          },
-        },
-        {
-          type: 'context',
-          elements: [
-            {
-              type: 'image',
-              imageUrl:
-                'https://api.slack.com/img/blocks/bkb_template_images/notificationsWarningIcon.png',
-              altText: 'notifications warning icon',
-            },
-            {
-              type: 'mrkdwn',
-              text: 'Conflicts with Team Huddle: 4:15-4:30pm',
-            },
-          ],
-        },
-        {
-          type: 'divider',
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'Propose a new time:',
-          },
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'Today - 4:30-5pm Everyone is available: @iris, @zelda',
-          },
-          accessory: {
-            type: 'button',
-            appId: 'app-id',
-            blockId: 'block-id',
-            actionId: 'action-id',
+      {
+        surface: SurfaceOptions.Message,
+        blocks: [
+          {
+            type: 'section',
             text: {
               type: 'plain_text',
               emoji: true,
-              text: 'Choose',
+              text: 'Looks like you have a scheduling conflict with this event:',
             },
-            value: 'click_me_123',
           },
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'Tomorrow - 4-4:30pm Everyone is available: @iris, @zelda',
+          {
+            type: 'divider',
           },
-          accessory: {
-            type: 'button',
-            appId: 'app-id',
-            blockId: 'block-id',
-            actionId: 'action-id',
+          {
+            type: 'section',
             text: {
-              type: 'plain_text',
-              emoji: true,
-              text: 'Choose',
+              type: 'mrkdwn',
+              text: 'Iris Zelda 1-1 Tuesday, January 21 4:00-4:30pm Building 2 - Havarti Cheese (3) 2 guests',
+            },
+            accessory: {
+              type: 'image',
+              imageUrl:
+                'https://api.slack.com/img/blocks/bkb_template_images/notifications.png',
+              altText: 'calendar thumbnail',
             },
-            value: 'click_me_123',
           },
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: "Tomorrow - 6-6:30pm Some people aren't available: @iris, ~@zelda~",
+          {
+            type: 'context',
+            elements: [
+              {
+                type: 'image',
+                imageUrl:
+                  'https://api.slack.com/img/blocks/bkb_template_images/notificationsWarningIcon.png',
+                altText: 'notifications warning icon',
+              },
+              {
+                type: 'mrkdwn',
+                text: 'Conflicts with Team Huddle: 4:15-4:30pm',
+              },
+            ],
+          },
+          {
+            type: 'divider',
           },
-          accessory: {
-            type: 'button',
-            appId: 'app-id',
-            blockId: 'block-id',
-            actionId: 'action-id',
+          {
+            type: 'section',
             text: {
-              type: 'plain_text',
-              emoji: true,
-              text: 'Choose',
+              type: 'mrkdwn',
+              text: 'Propose a new time:',
             },
-            value: 'click_me_123',
           },
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'Show more times',
-          },
-        },
-      ],
-      [
-        {
-          type: 'actions',
-          elements: [
-            {
-              type: 'overflow',
-              appId: 'app-id',
-              blockId: 'block-id',
-              actionId: 'action-id',
-              options: [
-                {
-                  value: 'option_1',
-                  text: {
-                    type: 'plain_text',
-                    text: 'lorem ipsum 🚀',
-                    emoji: true,
-                  },
-                },
-                {
-                  value: 'option_2',
-                  text: {
-                    type: 'plain_text',
-                    text: 'lorem ipsum 🚀',
-                    emoji: true,
-                  },
-                },
-              ],
+          {
+            type: 'section',
+            text: {
+              type: 'mrkdwn',
+              text: 'Today - 4:30-5pm Everyone is available: @iris, @zelda',
             },
-          ],
-        },
-        {
-          type: 'actions',
-          elements: [
-            {
+            accessory: {
               type: 'button',
               appId: 'app-id',
               blockId: 'block-id',
               actionId: 'action-id',
               text: {
                 type: 'plain_text',
-                text: 'Click Me',
                 emoji: true,
+                text: 'Choose',
               },
+              value: 'click_me_123',
             },
-          ],
-        },
-        {
-          type: 'actions',
-          elements: [
-            {
-              type: 'button',
-              appId: 'app-id',
-              blockId: 'block-id',
-              actionId: 'action-id',
-              text: {
-                type: 'plain_text',
-                text: 'Click Me',
-                emoji: true,
-              },
-              style: 'primary',
+          },
+          {
+            type: 'section',
+            text: {
+              type: 'mrkdwn',
+              text: 'Tomorrow - 4-4:30pm Everyone is available: @iris, @zelda',
             },
-          ],
-        },
-        {
-          type: 'actions',
-          elements: [
-            {
+            accessory: {
               type: 'button',
               appId: 'app-id',
               blockId: 'block-id',
               actionId: 'action-id',
               text: {
                 type: 'plain_text',
-                text: 'Click Me',
                 emoji: true,
+                text: 'Choose',
               },
-              style: 'danger',
+              value: 'click_me_123',
+            },
+          },
+          {
+            type: 'section',
+            text: {
+              type: 'mrkdwn',
+              text: "Tomorrow - 6-6:30pm Some people aren't available: @iris, ~@zelda~",
             },
-          ],
-        },
-        {
-          type: 'actions',
-          elements: [
-            {
+            accessory: {
               type: 'button',
               appId: 'app-id',
               blockId: 'block-id',
               actionId: 'action-id',
               text: {
                 type: 'plain_text',
-                text: 'Click Me',
                 emoji: true,
+                text: 'Choose',
               },
-              url: 'https://rocket.chat',
+              value: 'click_me_123',
             },
-          ],
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'plain_text',
-            text: 'This is a plain text section block.',
-            emoji: true,
           },
-        },
-        {
-          type: 'section',
-          text: {
-            type: 'mrkdwn',
-            text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
-          },
-        },
-        {
-          type: 'section',
-          fields: [
-            {
-              type: 'plain_text',
-              text: '*this is plain_text text*',
-              emoji: true,
-            },
-            {
-              type: 'plain_text',
-              text: '*this is plain_text text*',
-              emoji: true,
-            },
-            {
-              type: 'plain_text',
-              text: '*this is plain_text text*',
-              emoji: true,
+          {
+            type: 'section',
+            text: {
+              type: 'mrkdwn',
+              text: 'Show more times',
             },
-            {
+          },
+        ],
+      },
+      {
+        surface: SurfaceOptions.Message,
+        blocks: [
+          {
+            type: 'actions',
+            elements: [
+              {
+                type: 'overflow',
+                appId: 'app-id',
+                blockId: 'block-id',
+                actionId: 'action-id',
+                options: [
+                  {
+                    value: 'option_1',
+                    text: {
+                      type: 'plain_text',
+                      text: 'lorem ipsum 🚀',
+                      emoji: true,
+                    },
+                  },
+                  {
+                    value: 'option_2',
+                    text: {
+                      type: 'plain_text',
+                      text: 'lorem ipsum 🚀',
+                      emoji: true,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'actions',
+            elements: [
+              {
+                type: 'button',
+                appId: 'app-id',
+                blockId: 'block-id',
+                actionId: 'action-id',
+                text: {
+                  type: 'plain_text',
+                  text: 'Click Me',
+                  emoji: true,
+                },
+              },
+            ],
+          },
+          {
+            type: 'actions',
+            elements: [
+              {
+                type: 'button',
+                appId: 'app-id',
+                blockId: 'block-id',
+                actionId: 'action-id',
+                text: {
+                  type: 'plain_text',
+                  text: 'Click Me',
+                  emoji: true,
+                },
+                style: 'primary',
+              },
+            ],
+          },
+          {
+            type: 'actions',
+            elements: [
+              {
+                type: 'button',
+                appId: 'app-id',
+                blockId: 'block-id',
+                actionId: 'action-id',
+                text: {
+                  type: 'plain_text',
+                  text: 'Click Me',
+                  emoji: true,
+                },
+                style: 'danger',
+              },
+            ],
+          },
+          {
+            type: 'actions',
+            elements: [
+              {
+                type: 'button',
+                appId: 'app-id',
+                blockId: 'block-id',
+                actionId: 'action-id',
+                text: {
+                  type: 'plain_text',
+                  text: 'Click Me',
+                  emoji: true,
+                },
+                url: 'https://rocket.chat',
+              },
+            ],
+          },
+          {
+            type: 'section',
+            text: {
               type: 'plain_text',
-              text: '*this is plain_text text*',
+              text: 'This is a plain text section block.',
               emoji: true,
             },
-            {
-              type: 'plain_text',
-              text: '*this is plain_text text*',
-              emoji: true,
+          },
+          {
+            type: 'section',
+            text: {
+              type: 'mrkdwn',
+              text: 'This is a mrkdwn section block :ghost: *this is bold*, and ~this is crossed out~, and <https://google.com|this is a link>',
             },
-          ],
-        },
-      ],
+          },
+          {
+            type: 'section',
+            fields: [
+              {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+              {
+                type: 'plain_text',
+                text: '*this is plain_text text*',
+                emoji: true,
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
   {
@@ -278,124 +288,127 @@ export const templates: templateType[] = [
     description:
       'Example message for getting updates on new info and taking relevant action.',
     payloads: [
-      [
-        {
-          type: 'preview',
-          title: [
-            {
-              type: 'plain_text',
-              text: 'Vivek',
-              emoji: true,
-            },
-          ],
-          description: [
-            {
-              type: 'plain_text',
-              text: 'I Need a Description',
-              emoji: true,
-            },
-          ],
-          footer: {
-            type: 'context',
-            elements: [
+      {
+        surface: SurfaceOptions.Message,
+        blocks: [
+          {
+            type: 'preview',
+            title: [
               {
                 type: 'plain_text',
-                text: 'Srivastava',
+                text: 'Vivek',
+                emoji: true,
               },
             ],
-          },
-        },
-        {
-          type: 'preview',
-          title: [
-            {
-              type: 'plain_text',
-              text: 'Vivek',
-              emoji: true,
-            },
-          ],
-          description: [
-            {
-              type: 'plain_text',
-              text: 'I Need a Description',
-              emoji: true,
+            description: [
+              {
+                type: 'plain_text',
+                text: 'I Need a Description',
+                emoji: true,
+              },
+            ],
+            footer: {
+              type: 'context',
+              elements: [
+                {
+                  type: 'plain_text',
+                  text: 'Srivastava',
+                },
+              ],
             },
-          ],
-          thumb: {
-            url: 'https://picsum.photos/200/300',
           },
-          footer: {
-            type: 'context',
-            elements: [
+          {
+            type: 'preview',
+            title: [
               {
                 type: 'plain_text',
-                text: 'Srivastava',
+                text: 'Vivek',
+                emoji: true,
               },
             ],
-          },
-        },
-        {
-          type: 'preview',
-          title: [
-            {
-              type: 'plain_text',
-              text: 'Vivek',
-              emoji: true,
+            description: [
+              {
+                type: 'plain_text',
+                text: 'I Need a Description',
+                emoji: true,
+              },
+            ],
+            thumb: {
+              url: 'https://picsum.photos/200/300',
             },
-          ],
-          description: [
-            {
-              type: 'plain_text',
-              text: 'I Need a Description',
-              emoji: true,
+            footer: {
+              type: 'context',
+              elements: [
+                {
+                  type: 'plain_text',
+                  text: 'Srivastava',
+                },
+              ],
             },
-          ],
-          thumb: {
-            url: 'https://picsum.photos/200/300',
           },
-          footer: {
-            type: 'context',
-            elements: [
+          {
+            type: 'preview',
+            title: [
               {
                 type: 'plain_text',
-                text: 'Srivastava',
+                text: 'Vivek',
+                emoji: true,
               },
             ],
-          },
-        },
-        {
-          type: 'preview',
-          title: [
-            {
-              type: 'plain_text',
-              text: 'Vivek',
-              emoji: true,
+            description: [
+              {
+                type: 'plain_text',
+                text: 'I Need a Description',
+                emoji: true,
+              },
+            ],
+            thumb: {
+              url: 'https://picsum.photos/200/300',
             },
-          ],
-          description: [
-            {
-              type: 'plain_text',
-              text: 'I Need a Description',
-              emoji: true,
+            footer: {
+              type: 'context',
+              elements: [
+                {
+                  type: 'plain_text',
+                  text: 'Srivastava',
+                },
+              ],
             },
-          ],
-          footer: {
-            type: 'context',
-            elements: [
+          },
+          {
+            type: 'preview',
+            title: [
               {
                 type: 'plain_text',
-                text: 'Srivastava',
+                text: 'Vivek',
+                emoji: true,
+              },
+            ],
+            description: [
+              {
+                type: 'plain_text',
+                text: 'I Need a Description',
+                emoji: true,
               },
             ],
+            footer: {
+              type: 'context',
+              elements: [
+                {
+                  type: 'plain_text',
+                  text: 'Srivastava',
+                },
+              ],
+            },
+            externalUrl: 'https://rocket.chat',
+          },
+          {
+            type: 'image',
+            imageUrl: 'https://picsum.photos/200/300',
+            altText: 'inspiration',
           },
-          externalUrl: 'https://rocket.chat',
-        },
-        {
-          type: 'image',
-          imageUrl: 'https://picsum.photos/200/300',
-          altText: 'inspiration',
-        },
-      ],
+        ],
+      },
     ],
   },
 ];

From d9f1385c1b9c4626ee8eccff0d7c3878dec66739 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Mon, 14 Aug 2023 01:50:53 +0530
Subject: [PATCH 38/50] refactor(uikit-playground): moved surface inside
 payload

---
 .../src/Components/CodeEditor/BlockEditor.tsx  |  7 ++++---
 .../src/Components/CodeEditor/index.tsx        |  9 +++++----
 .../CreateNewScreen/ScreenThumbnail.tsx        |  2 +-
 .../Components/Draggable/DraggableListItem.tsx |  8 ++++----
 .../src/Components/DropDown/DropDown.tsx       |  4 ++--
 .../src/Components/DropDown/Items.tsx          |  6 +++---
 .../UIKitWrapper/UIKitWrapper.tsx              |  8 ++++----
 .../ProjectsList/ProjectsList.tsx              |  2 +-
 .../ProjectsList/ProjectsThumbnail.tsx         |  6 +++---
 .../src/Components/NavBar/NavBar.tsx           |  2 +-
 .../src/Components/NavBar/RightNavBtn.tsx      | 15 ++++++++-------
 .../Display/RenderPayload/DeleteElementBtn.tsx | 10 ++++------
 .../Display/RenderPayload/RenderPayload.tsx    | 14 +++++++-------
 .../Preview/Display/Surface/Surface.tsx        | 14 +++++++-------
 .../SplitPlaneContainer.tsx                    |  2 +-
 .../PrototypeRender/PrototypeRender.tsx        |  8 ++++----
 .../PtototypeContainer/PrototypeContainer.tsx  |  7 ++++---
 .../Components/SurfaceSelect/SurfaceSelect.tsx |  2 +-
 .../Components/Templates/Container/Payload.tsx |  4 ++--
 .../src/Components/navMenu/Menu/index.tsx      |  2 +-
 .../src/Context/action/updatePayloadAction.ts  | 14 ++++++++------
 .../src/Context/initialState.ts                | 14 ++++++++++----
 .../uikit-playground/src/Context/reducer.ts    | 18 +++++++++++-------
 .../actionPreview/generateActionPreview.ts     |  8 ++++----
 24 files changed, 100 insertions(+), 86 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index a8106dbcd886..a7f2d8b3aa6f 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -8,6 +8,7 @@ import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
 import intendCode from '../../utils/intendCode';
+import { ILayoutBlock } from '../../Context/initialState';
 
 type CodeMirrorProps = {
   extensions?: Extension[];
@@ -28,8 +29,8 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
   useEffect(() => {
     if (!changes?.isDispatch) {
       try {
-        const parsedCode = json5.parse(changes.value);
-        dispatch(updatePayloadAction({ payload: parsedCode }));
+        const parsedCode: ILayoutBlock[] = json5.parse(changes.value);
+        dispatch(updatePayloadAction({ blocks: parsedCode }));
       } catch (e) {
         // do nothing
       }
@@ -56,7 +57,7 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
       setValue(intendCode(screens[activeScreen]?.payload), {});
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screens[activeScreen]?.payload, activeScreen]);
+  }, [screens[activeScreen]?.payload.blocks, activeScreen]);
 
   useEffect(() => {
     setValue(intendCode(screens[activeScreen]?.payload), {});
diff --git a/packages/uikit-playground/src/Components/CodeEditor/index.tsx b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
index 067ddceb27ac..a5237dd93279 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/index.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/index.tsx
@@ -7,6 +7,7 @@ import { useEffect, useContext } from 'react';
 import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
 import codePrettier from '../../utils/codePrettier';
+import { ILayoutBlock } from '../../Context/initialState';
 
 type CodeMirrorProps = {
   extensions?: Extension[];
@@ -26,15 +27,15 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
   useEffect(() => {
     if (!changes?.isDispatch) {
       try {
-        const parsedCode = json5.parse(changes.value);
+        const parsedCode: ILayoutBlock[] = json5.parse(changes.value);
         dispatch(
           updatePayloadAction({
-            payload: parsedCode,
+            blocks: parsedCode,
             changedByEditor: false,
           })
         );
 
-        dispatch(updatePayloadAction({ payload: parsedCode }));
+        dispatch(updatePayloadAction({ blocks: parsedCode }));
       } catch (e) {
         // do nothing
       }
@@ -45,7 +46,7 @@ const CodeEditor = ({ extensions }: CodeMirrorProps) => {
   useEffect(() => {
     if (!changes?.isDispatch) {
       try {
-        const prettierCode = codePrettier(changes.value, changes.cursor);
+        const prettierCode = codePrettier(changes.value, changes.cursor || 0);
         setValue(prettierCode.formatted, {
           cursor: prettierCode.cursorOffset,
         });
diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index 93429270d237..c4325c016420 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -68,7 +68,7 @@ const ScreenThumbnail = ({
         labelProps={{ fontScale: 'h5' }}
       />
       <ScreenThumbnailWrapper onClick={activateScreenHandler}>
-        <Thumbnail of={renderPayload({ payload: screen.payload })} />
+        <Thumbnail of={renderPayload({ blocks: screen.payload.blocks })} />
       </ScreenThumbnailWrapper>
     </Box>
   );
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
index aa41ee447834..996082637e5a 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
@@ -7,9 +7,9 @@ import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
 import type { Block } from './DraggableList';
 
 export type DraggableListItemProps = {
-  block: Block,
-  surface: number,
-  index: number,
+  block: Block;
+  surface: number;
+  index: number;
 };
 
 const DraggableListItem = ({
@@ -26,7 +26,7 @@ const DraggableListItem = ({
       >
         <ElementWrapper key={index}>
           <DeleteElementBtn elementIndex={index} />
-          <RenderPayload surface={surface} payload={[block.payload]} />
+          <RenderPayload surface={surface} blocks={[block.payload]} />
         </ElementWrapper>
       </div>
     )}
diff --git a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
index cc4580576a1f..ff5648b93185 100644
--- a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
@@ -5,7 +5,7 @@ import Items from './Items';
 import type { Item, ItemBranch } from './types';
 
 interface DropDownProps {
-  readonly BlocksTree: Item,
+  readonly BlocksTree: Item;
 }
 
 const DropDown = ({ BlocksTree }: DropDownProps) => {
@@ -23,7 +23,7 @@ const DropDown = ({ BlocksTree }: DropDownProps) => {
   );
 
   return (
-    <Box pbs='15px' pbe='30px'>
+    <Box pbs="15px" pbe="30px">
       {BlocksTree.map((branch: ItemBranch, i: number) => (
         <Box key={i}>{recursiveComponentTree(branch, layer)}</Box>
       ))}
diff --git a/packages/uikit-playground/src/Components/DropDown/Items.tsx b/packages/uikit-playground/src/Components/DropDown/Items.tsx
index 84eca2f88e8b..18eb6a10dcc5 100644
--- a/packages/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/Items.tsx
@@ -1,6 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label, Chevron } from '@rocket.chat/fuselage';
-import React, { useState, useContext } from 'react';
+import { useState, useContext } from 'react';
 
 import { context, updatePayloadAction } from '../../Context';
 import ItemsIcon from './ItemsIcon';
@@ -18,8 +18,8 @@ const Items = ({ label, children, layer, payload }: ItemProps) => {
     payload &&
       dispatch(
         updatePayloadAction({
-          payload: [
-            ...state.screens[state.activeScreen].payload,
+          blocks: [
+            ...state.screens[state.activeScreen].payload.blocks,
             { actionId: getUniqueId(), ...payload[0] },
           ],
           changedByEditor: false,
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index 8e2885ca4bff..7e29f065c684 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -13,7 +13,7 @@ const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
     state: { screens },
   } = useContext(context);
   if (!screens[data]) return null;
-  const { payload, surface } = screens[data];
+  const { blocks, surface } = screens[data].payload;
   return (
     <Box
       padding="10px"
@@ -28,19 +28,19 @@ const UIKitWrapper = ({ id, data }: { id: string; data: idType }) => {
         id={`${id}`}
       />
       <SurfaceRender type={surface}>
-        {payload.map((payload, index) => (
+        {blocks.map((block, index) => (
           <Box key={index} pie="6px" className="uiKitWrapper">
             <Box
               position="relative"
               border="var(--default-border)"
               padding="10px"
             >
-              <RenderPayload payload={[payload]} surface={surface} />
+              <RenderPayload blocks={[block]} surface={surface} />
               <Handle
                 type="source"
                 className="react-flow-sourceHandle"
                 position={Position.Right}
-                id={payload.actionId}
+                id={block.actionId}
               />
             </Box>
           </Box>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
index cd1490d26e9b..c767f406ad4e 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
@@ -24,7 +24,7 @@ const ProjectsList = () => {
           id={project.id}
           name={project.name}
           date={project.date}
-          payload={screens[project.screens[0]].payload}
+          blocks={screens[project.screens[0]].payload.blocks}
         />
       ))}
     </Box>
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index 9fe35ebd4cf4..78cc6dc43e9a 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -22,12 +22,12 @@ const ProjectsThumbnail = ({
   id,
   name: _name,
   date,
-  payload,
+  blocks,
 }: {
   id: string;
   name: string;
   date: string;
-  payload: ILayoutBlock[];
+  blocks: ILayoutBlock[];
 }) => {
   const [name, setName] = useState<string>(_name);
   const navigate = useNavigate();
@@ -80,7 +80,7 @@ const ProjectsThumbnail = ({
         height="260px"
         padding="30px"
       >
-        <Thumbnail of={RenderPayload({ payload })} />
+        <Thumbnail of={RenderPayload({ blocks })} />
         <Box onClick={(e) => e.stopPropagation()}></Box>
       </ScreenThumbnailWrapper>
       <EditableLabel
diff --git a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
index 1ec75a6bc236..1c0ee371e025 100644
--- a/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -96,7 +96,7 @@ const NabBar: FC = () => {
                   onClick={() => {
                     dispatch(
                       updatePayloadAction({
-                        payload: [],
+                        blocks: [],
                         changedByEditor: false,
                       })
                     );
diff --git a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
index 6dc4c2cfb8c4..f032662001e9 100644
--- a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
@@ -6,17 +6,18 @@ import { context, navMenuToggleAction } from '../../Context';
 import BurgerIcon from './BurgerIcon';
 
 const RightNavBtn: FC = () => {
-  const {
-    state: { isMobile },
-    dispatch,
-  } = useContext(context);
+  const { state, dispatch } = useContext(context);
 
   return (
     <Box
-      mie='15px'
-      onClick={() => isMobile && dispatch(navMenuToggleAction(true))}
+      mie="15px"
+      onClick={() => state.isMobile && dispatch(navMenuToggleAction(true))}
     >
-      {isMobile ? <BurgerIcon /> : <Button primary>Send to RocketChat</Button>}
+      {state.isMobile ? (
+        <BurgerIcon />
+      ) : (
+        <Button primary>Send to RocketChat</Button>
+      )}
     </Box>
   );
 };
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
index fc9fbfa43820..7dafb4982edf 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { Icon } from '@rocket.chat/fuselage';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, updatePayloadAction } from '../../../../Context';
 
@@ -9,11 +8,10 @@ const Display = ({ elementIndex }: { elementIndex: number }) => {
 
   const deleteElement = () => {
     const { screens, activeScreen } = state;
-    // @ts-ignore
-    const payload = [...screens[activeScreen].payload];
-    payload.splice(elementIndex, 1);
+    const blocks = [...screens[activeScreen].payload.blocks];
+    blocks.splice(elementIndex, 1);
     dispatch(
-      updatePayloadAction({ payload: [...payload], changedByEditor: false })
+      updatePayloadAction({ blocks: [...blocks], changedByEditor: false })
     );
   };
   return (
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
index 9a7f5cf78ad2..a4449e75386a 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
@@ -9,18 +9,18 @@ import { SurfaceOptions } from '../Surface/constant';
 import { ILayoutBlock } from '../../../../Context/initialState';
 
 const RenderPayload = ({
-  payload,
-  surface = 1,
+  blocks,
+  surface = SurfaceOptions.Message,
 }: {
   index?: number;
-  payload: ILayoutBlock[];
+  blocks: ILayoutBlock[];
   surface?: number;
 }) => (
   <>
-    {SurfaceOptions.Message === surface && uiKitMessage(payload)}
-    {SurfaceOptions.Banner === surface && uiKitBanner(payload)}
-    {SurfaceOptions.Modal === surface && uiKitModal(payload)}
-    {SurfaceOptions.ContextualBar === surface && uiKitContextualBar(payload)}
+    {SurfaceOptions.Message === surface && uiKitMessage(blocks)}
+    {SurfaceOptions.Banner === surface && uiKitBanner(blocks)}
+    {SurfaceOptions.Modal === surface && uiKitModal(blocks)}
+    {SurfaceOptions.ContextualBar === surface && uiKitContextualBar(blocks)}
   </>
 );
 
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index d4c135b37bd5..801062b98bae 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -25,7 +25,7 @@ const Surface: FC = () => {
     block: Block[];
     isChangeByDnd: boolean;
   }>({
-    block: screens[activeScreen]?.payload.map((block, i) => ({
+    block: screens[activeScreen]?.payload?.blocks?.map((block, i) => ({
       id: `${i}`,
       payload: block,
     })),
@@ -34,26 +34,26 @@ const Surface: FC = () => {
   const preview = generateActionPreview({
     type: 'Action Block',
     data: {},
-    surface: screens[activeScreen]?.surface,
-    payload: screens[activeScreen]?.payload,
+    surface: screens[activeScreen]?.payload.surface,
+    blocks: screens[activeScreen]?.payload.blocks,
     user: user,
   });
   useEffect(() => {
     setUniqueBlocks({
-      block: screens[activeScreen]?.payload.map((block, i) => ({
+      block: screens[activeScreen]?.payload?.blocks?.map((block, i) => ({
         id: `${i}`,
         payload: block,
       })),
       isChangeByDnd: false,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screens[activeScreen]?.payload]);
+  }, [screens[activeScreen]?.payload.blocks]);
 
   useEffect(() => {
     if (uniqueBlocks.isChangeByDnd) {
       dispatch(
         updatePayloadAction({
-          payload: uniqueBlocks.block.map((block) => block.payload),
+          blocks: uniqueBlocks.block.map((block) => block.payload),
           changedByEditor: false,
         })
       );
@@ -89,7 +89,7 @@ const Surface: FC = () => {
           appId: 'core',
         }}
       >
-        <SurfaceRender type={screens[activeScreen]?.surface}>
+        <SurfaceRender type={screens[activeScreen]?.payload.surface}>
           <DraggableList
             surface={SurfaceOptions.Modal}
             blocks={uniqueBlocks.block || []}
diff --git a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
index 592da9d2b0e0..6ee7947d58ea 100644
--- a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
+++ b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
@@ -11,7 +11,7 @@ type PreviewSizeType = {
   blockSize: number;
   inlineSize: number;
 };
-const SplitPlaneContainer: FC<{ PreviewSize: PreviewSizeType }> = ({
+const SplitPlaneContainer: FC<{ PreviewSize: Partial<PreviewSizeType> }> = ({
   PreviewSize,
 }) => {
   const {
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
index 706bab6cd909..283b3ddd2ab3 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
@@ -9,13 +9,13 @@ import { css } from '@rocket.chat/css-in-js';
 import { useRef, useState } from 'react';
 
 const PrototypeRender = ({
-  payload,
+  blocks,
   surface,
   flowEdges,
   activeActions,
   onSelectAction,
 }: {
-  payload: ILayoutBlock[];
+  blocks: ILayoutBlock[];
   surface: SurfaceOptions;
   flowEdges: Edge[];
   activeActions: idType[];
@@ -41,7 +41,7 @@ const PrototypeRender = ({
   return (
     <Box h="max-content" mb={'auto'} className="rc-prototype-renderer">
       <SurfaceRender type={surface}>
-        {payload.map((action, id) => (
+        {blocks.map((action, id) => (
           <Box
             key={id}
             className={css`
@@ -61,7 +61,7 @@ const PrototypeRender = ({
               {glowActive && activeActions.includes(action.actionId) && (
                 <Box className={'rc-prototype_action-glow'} />
               )}
-              <RenderPayload payload={[action]} surface={surface} />
+              <RenderPayload blocks={[action]} surface={surface} />
             </Box>
           </Box>
         ))}
diff --git a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
index 2cddaa055600..1017645ac050 100644
--- a/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
+++ b/packages/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -19,15 +19,16 @@ const PrototypeContainer = () => {
 
   if (!projects[activeProject].screens.length) return null;
 
-  const { surface, payload } =
-    screens[currentScreenID] || screens[projects[activeProject].screens[0]];
+  const { surface, blocks } =
+    screens[currentScreenID]?.payload ||
+    screens[projects[activeProject].screens[0]].payload;
 
   return (
     <Scrollable vertical>
       <Box w="100%" h="100%">
         <PrototypeRender
           surface={surface}
-          payload={payload}
+          blocks={blocks}
           activeActions={activeActions as string[]}
           flowEdges={projects[activeProject].flowEdges}
           onSelectAction={setCurrentScreenID}
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
index 5df95bf14e5f..c525fd629c2c 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
@@ -13,7 +13,7 @@ const SurfaceSelect: FC = () => {
   return (
     <Select
       options={options}
-      value={`${screens[activeScreen]?.surface}`}
+      value={`${screens[activeScreen].payload.surface}`}
       placeholder={'Surface'}
       onChange={(e) => {
         dispatch(surfaceAction(parseInt(e)));
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 0e864c58aa78..29e6c1c9766b 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -33,7 +33,7 @@ const Payload = ({
     dispatch(templatesToggleAction(false));
     dispatch(
       updatePayloadAction({
-        payload: blocksWithUniqueIds,
+        blocks: blocksWithUniqueIds,
         changedByEditor: false,
       })
     );
@@ -58,7 +58,7 @@ const Payload = ({
           `}
         >
           <SurfaceRender type={surface}>
-            <RenderPayload payload={blocksWithUniqueIds} surface={surface} />
+            <RenderPayload blocks={blocksWithUniqueIds} surface={surface} />
           </SurfaceRender>
         </Box>
       </Box>
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
index 074666c031c6..3f28fad75884 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/index.tsx
@@ -58,7 +58,7 @@ const Menu: FC<{ isOpen: boolean }> = ({ isOpen }) => {
           onClick={() => {
             dispatch(
               updatePayloadAction({
-                payload: [],
+                blocks: [],
                 changedByEditor: false,
               })
             );
diff --git a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
index dbe4558cdcd8..e82d2626e4a9 100644
--- a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
+++ b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
@@ -1,17 +1,19 @@
 import { ILayoutBlock } from '../initialState';
 import { ActionTypes } from '../reducer';
 
-type PayloadType ={
-  payload: ILayoutBlock[];
+type PayloadType = {
+  blocks: ILayoutBlock[];
   changedByEditor?: boolean;
-}
+};
 
 export type UpdatePayloadAction = {
-  type: ActionTypes.UpdatePayload,
-  payload:PayloadType,
+  type: ActionTypes.UpdatePayload;
+  payload: PayloadType;
 };
 
-export const updatePayloadAction = (payload: PayloadType): UpdatePayloadAction => ({
+export const updatePayloadAction = (
+  payload: PayloadType
+): UpdatePayloadAction => ({
   type: ActionTypes.UpdatePayload,
   payload,
 });
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index d2f58d922916..5ea29ab9165b 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -38,11 +38,15 @@ export type actionPreviewType = {
 
 export type ILayoutBlock = { actionId: string } & LayoutBlock;
 
+export interface IPayload {
+  surface: SurfaceOptions;
+  blocks: ILayoutBlock[];
+}
+
 export type ScreenType = {
-  payload: ILayoutBlock[];
+  payload: IPayload;
   id: idType;
   name: string;
-  surface: SurfaceOptions;
   actionPreview: actionPreviewType;
   date: string;
   changedByEditor?: boolean;
@@ -109,10 +113,12 @@ export const initialState: initialStateType = {
   },
   screens: {
     [initialScreenId]: {
-      payload: [],
+      payload: {
+        blocks: [],
+        surface: SurfaceOptions.Message,
+      },
       id: initialScreenId,
       name: 'Untitled Screen',
-      surface: SurfaceOptions.Message,
       date: getDate(),
       actionPreview: {},
     },
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 1ae237505623..42eae4f68c43 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -103,18 +103,18 @@ const reducer = (state: initialStateType, action: IAction) => {
     case ActionTypes.NavMenuToggle:
       return { ...state, navMenuToggle: action.payload };
     case ActionTypes.Surface: {
-      state.screens[activeScreen].surface = action.payload;
+      state.screens[activeScreen].payload.surface = action.payload;
       state.screens[activeScreen].changedByEditor = false;
 
       return { ...state };
     }
     case ActionTypes.UpdatePayload: {
-      state.screens[activeScreen].payload = action?.payload?.payload;
+      state.screens[activeScreen].payload.blocks = action?.payload?.blocks;
       state.screens[activeScreen].changedByEditor =
         action?.payload?.changedByEditor === undefined;
       state.projects[activeProject].flowEdges = filterEdges(
         state.projects[activeProject].flowEdges,
-        action?.payload?.payload.map((node) => node.actionId),
+        action?.payload?.blocks.map((node) => node.actionId),
         activeScreen
       );
       return { ...state };
@@ -142,8 +142,10 @@ const reducer = (state: initialStateType, action: IAction) => {
           [id]: {
             id,
             name: action?.payload || 'Untitled Screen',
-            payload: [],
-            surface: SurfaceOptions.Message,
+            payload: {
+              blocks: [],
+              surface: SurfaceOptions.Message,
+            },
             date: getDate(),
             actionPreview: {},
           },
@@ -245,8 +247,10 @@ const reducer = (state: initialStateType, action: IAction) => {
             id: activeScreenId,
             name: 'Untitled Screen',
             date: getDate(),
-            payload: [],
-            surface: SurfaceOptions.Message,
+            payload: {
+              blocks: [],
+              surface: SurfaceOptions.Message,
+            },
             actionPreview: {},
           },
         },
diff --git a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
index 287f909df952..ae7a6fb758c3 100644
--- a/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
+++ b/packages/uikit-playground/src/Payload/actionPreview/generateActionPreview.ts
@@ -1,6 +1,6 @@
 import { SurfaceOptions } from '../../Components/Preview/Display/Surface/constant';
-import type { LayoutBlock } from '@rocket.chat/ui-kit';
 import type {
+  ILayoutBlock,
   actionPreviewType,
   initialStateType,
 } from '../../Context/initialState';
@@ -10,13 +10,13 @@ const generateActionPreview = ({
   type,
   data,
   surface,
-  payload,
+  blocks,
   user,
 }: {
   type: string;
   data: actionPreviewType;
   surface: SurfaceOptions;
-  payload: readonly LayoutBlock[];
+  blocks: ILayoutBlock[];
   user: initialStateType['user'];
 }) => {
   const actionPreview: actionPreviewType = {
@@ -33,7 +33,7 @@ const generateActionPreview = ({
     ...data,
   };
   if (type === 'View Submission') {
-    actionPreview.view = payload;
+    actionPreview.view = blocks;
   }
   return actionPreview;
 };

From f5dfbb65a2b794d9caee708ad23cf911c7397671 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Mon, 14 Aug 2023 18:19:41 +0530
Subject: [PATCH 39/50] fix(uikit-playground): fix dnd hover effect

---
 .../CreateNewScreen/ScreenThumbnail.tsx       |  2 +-
 .../Draggable/DraggableListItem.tsx           | 10 +--
 .../UIKitWrapper/UIKitWrapper.tsx             |  2 +-
 .../ProjectsList/ProjectsThumbnail.tsx        |  2 +-
 .../Display/RenderPayload/ElementWrapper.tsx  | 44 -------------
 .../DeleteElementBtn.tsx                      | 21 +------
 .../UiKitElementWrapper.scss                  | 62 +++++++++++++++++++
 .../UiKitElementWrapper.tsx                   |  9 +++
 .../Display/UiKitElementWrapper/index.ts      |  1 +
 .../PrototypeRender/PrototypeRender.tsx       |  2 +-
 .../RenderPayload/RenderPayload.tsx           |  4 +-
 .../Display => }/RenderPayload/intex.ts       |  0
 .../Templates/Container/Payload.tsx           |  2 +-
 13 files changed, 86 insertions(+), 75 deletions(-)
 delete mode 100644 packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
 rename packages/uikit-playground/src/Components/Preview/Display/{RenderPayload => UiKitElementWrapper}/DeleteElementBtn.tsx (58%)
 create mode 100644 packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.scss
 create mode 100644 packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.tsx
 create mode 100644 packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/index.ts
 rename packages/uikit-playground/src/Components/{Preview/Display => }/RenderPayload/RenderPayload.tsx (83%)
 rename packages/uikit-playground/src/Components/{Preview/Display => }/RenderPayload/intex.ts (100%)

diff --git a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
index c4325c016420..d3720a07595c 100644
--- a/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/CreateNewScreen/ScreenThumbnail.tsx
@@ -9,7 +9,7 @@ import { context, renameScreenAction } from '../../Context';
 import { activeScreenAction } from '../../Context/action/activeScreenAction';
 import { deleteScreenAction } from '../../Context/action/deleteScreenAction';
 import { duplicateScreenAction } from '../../Context/action/duplicateScreenAction';
-import renderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import renderPayload from '../RenderPayload/RenderPayload';
 import { ScreenType } from '../../Context/initialState';
 import EditMenu from '../ScreenThumbnail/EditMenu/EditMenu';
 
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
index 996082637e5a..a26b2d62deb8 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
-import DeleteElementBtn from '../Preview/Display/RenderPayload/DeleteElementBtn';
-import ElementWrapper from '../Preview/Display/RenderPayload/ElementWrapper';
-import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import DeleteElementBtn from '../Preview/Display/UiKitElementWrapper/DeleteElementBtn';
+import UiKitElementWrapper from '../Preview/Display/UiKitElementWrapper/UiKitElementWrapper';
+import RenderPayload from '../RenderPayload/RenderPayload';
 import type { Block } from './DraggableList';
 
 export type DraggableListItemProps = {
@@ -24,10 +24,10 @@ const DraggableListItem = ({
         {...provided.draggableProps}
         {...provided.dragHandleProps}
       >
-        <ElementWrapper key={index}>
+        <UiKitElementWrapper key={index}>
           <DeleteElementBtn elementIndex={index} />
           <RenderPayload surface={surface} blocks={[block.payload]} />
-        </ElementWrapper>
+        </UiKitElementWrapper>
       </div>
     )}
   </Draggable>
diff --git a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index 7e29f065c684..79010f9442cc 100644
--- a/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/packages/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { Handle, Position } from 'reactflow';
 import './UIKitWrapper.scss';
 
-import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import RenderPayload from '../../RenderPayload/RenderPayload';
 import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
 import { idType } from '../../../Context/initialState';
 import { context } from '../../../Context';
diff --git a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
index 78cc6dc43e9a..bcba0fca6306 100644
--- a/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
+++ b/packages/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsThumbnail.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
 import ScreenThumbnailWrapper from '../../ScreenThumbnail/ScreenThumbnailWrapper';
 import Thumbnail from '../../ScreenThumbnail/Thumbnail';
-import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import RenderPayload from '../../RenderPayload/RenderPayload';
 import {
   activeProjectAction,
   context,
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
deleted file mode 100644
index 132901fdaf46..000000000000
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/ElementWrapper.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { css } from '@rocket.chat/css-in-js';
-import { Box } from '@rocket.chat/fuselage';
-import type { ReactElement, ReactNode } from 'react';
-
-const ElementWrapper = ({
-  children,
-}: {
-  children: ReactNode,
-}): ReactElement => (
-  <Box
-    children={children}
-    className={css`
-      position: relative;
-      box-sizing: border-box;
-      outline: 1px solid transparent;
-      height: fit-content;
-      align-items: center;
-      transition: var(--animation-fast);
-      padding: 0px 8px;
-
-      &:hover {
-        border-radius: 4px;
-        padding: 8px;
-        outline: var(--elements-border);
-        transition: var(--animation-fast);
-        box-shadow: 0px 0px 8px 1px #ddd;
-
-        > .closeBtn {
-          visibility: visible !important;
-        }
-      }
-
-      &:active {
-        background-color: #fff;
-        padding: 8px;
-        transition: var(--animation-fast);
-        outline: var(--elements-border);
-        box-shadow: 0px 0px 8px 1px #ddd;
-      }
-    `}
-  />
-);
-
-export default ElementWrapper;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/DeleteElementBtn.tsx
similarity index 58%
rename from packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
rename to packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/DeleteElementBtn.tsx
index 7dafb4982edf..8b3072e2be9b 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/DeleteElementBtn.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/DeleteElementBtn.tsx
@@ -1,3 +1,4 @@
+import './UiKitElementWrapper.scss';
 import { Icon } from '@rocket.chat/fuselage';
 import { useContext } from 'react';
 
@@ -15,25 +16,7 @@ const Display = ({ elementIndex }: { elementIndex: number }) => {
     );
   };
   return (
-    <div
-      style={{
-        position: 'absolute',
-        width: '20px',
-        height: '20px',
-        top: '6px',
-        right: '6px',
-        visibility: 'hidden',
-        cursor: 'pointer',
-        zIndex: 1,
-        backgroundColor: 'white',
-        borderRadius: '4px',
-        border: 'var(--elements-border)',
-        display: 'grid',
-        placeItems: 'center',
-      }}
-      className={'closeBtn'}
-      onClick={deleteElement}
-    >
+    <div className={'uikit-element-delete-btn'} onClick={deleteElement}>
       <Icon name="cross" size="x20" />
     </div>
   );
diff --git a/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.scss b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.scss
new file mode 100644
index 000000000000..34718fe6a683
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.scss
@@ -0,0 +1,62 @@
+@use '../../../../cssVariables.css';
+
+.uikit-element-wrapper{
+    position: relative;
+    box-sizing: border-box;
+    outline: 1px solid transparent;
+    height: fit-content;
+    align-items: center;
+    transition: var(--animation-fast);
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: -8px;
+      border-radius: 4px;
+      outline: var(--elements-border) !important;
+      box-shadow: 0px 0px 8px 1px #ddd;
+      opacity: 0;
+      transition: var(--animation-fast);
+      background: white;
+    }
+
+    &:hover {
+      > * {
+        position: relative;
+      }
+      &::before {
+        opacity: 1;
+      }
+
+      > .uikit-element-delete-btn {
+        visibility: visible !important;
+      }
+    }
+
+    &:active {
+      > * {
+        position: relative;
+      }
+      &::before {
+        opacity: 1;
+      }
+    }
+}
+
+.uikit-element-delete-btn{
+    position: absolute !important;
+    top: 50%;
+    right: -19px;
+    width: 20px;
+    height: 20px;
+    visibility: hidden;
+    cursor: pointer;
+    z-index: 1;
+    background-color: white;
+    border-radius: 4px;
+    border: var(--elements-border);
+    display: grid;
+    place-items: center;
+    transform: translateY(-50%);
+}
\ No newline at end of file
diff --git a/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.tsx b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.tsx
new file mode 100644
index 000000000000..c1ba2f22dc9a
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/UiKitElementWrapper.tsx
@@ -0,0 +1,9 @@
+import './UiKitElementWrapper.scss';
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement } from 'react';
+
+const ElementWrapper = (props: ComponentProps<typeof Box>): ReactElement => (
+  <Box className={'uikit-element-wrapper'} {...props} />
+);
+
+export default ElementWrapper;
diff --git a/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/index.ts b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/index.ts
new file mode 100644
index 000000000000..33404c701361
--- /dev/null
+++ b/packages/uikit-playground/src/Components/Preview/Display/UiKitElementWrapper/index.ts
@@ -0,0 +1 @@
+export { default } from './UiKitElementWrapper';
diff --git a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
index 283b3ddd2ab3..49ca7b701bf9 100644
--- a/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
+++ b/packages/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
@@ -1,6 +1,6 @@
 import './PrototypeRender.scss';
 import { Box } from '@rocket.chat/fuselage';
-import RenderPayload from '../Preview/Display/RenderPayload/RenderPayload';
+import RenderPayload from '../RenderPayload/RenderPayload';
 import SurfaceRender from '../Preview/Display/Surface/SurfaceRender';
 import { SurfaceOptions } from '../Preview/Display/Surface/constant';
 import { ILayoutBlock, idType } from '../../Context/initialState';
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx b/packages/uikit-playground/src/Components/RenderPayload/RenderPayload.tsx
similarity index 83%
rename from packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
rename to packages/uikit-playground/src/Components/RenderPayload/RenderPayload.tsx
index a4449e75386a..8b340f743a52 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/RenderPayload.tsx
+++ b/packages/uikit-playground/src/Components/RenderPayload/RenderPayload.tsx
@@ -5,8 +5,8 @@ import {
   UiKitContextualBar as uiKitContextualBar,
 } from '@rocket.chat/fuselage-ui-kit';
 
-import { SurfaceOptions } from '../Surface/constant';
-import { ILayoutBlock } from '../../../../Context/initialState';
+import { SurfaceOptions } from '../Preview/Display/Surface/constant';
+import { ILayoutBlock } from '../../Context/initialState';
 
 const RenderPayload = ({
   blocks,
diff --git a/packages/uikit-playground/src/Components/Preview/Display/RenderPayload/intex.ts b/packages/uikit-playground/src/Components/RenderPayload/intex.ts
similarity index 100%
rename from packages/uikit-playground/src/Components/Preview/Display/RenderPayload/intex.ts
rename to packages/uikit-playground/src/Components/RenderPayload/intex.ts
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 29e6c1c9766b..e3473c5a58bf 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -8,7 +8,7 @@ import {
   templatesToggleAction,
   updatePayloadAction,
 } from '../../../Context';
-import RenderPayload from '../../Preview/Display/RenderPayload/RenderPayload';
+import RenderPayload from '../../RenderPayload/RenderPayload';
 import getUniqueId from '../../../utils/getUniqueId';
 import SurfaceRender from '../../Preview/Display/Surface/SurfaceRender';
 import { ILayoutBlock } from '../../../Context/initialState';

From a9dbb1cb4f939c311b8b5fea996f6e26ebe493d7 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Tue, 15 Aug 2023 15:45:48 +0530
Subject: [PATCH 40/50] fix(uikit-playground): fix code formatting

---
 .../src/Components/CodeEditor/BlockEditor.tsx | 63 ++++++++-----------
 .../SurfaceSelect/SurfaceSelect.tsx           | 20 ++++--
 .../src/Context/action/updatePayloadAction.ts |  2 +
 .../src/Context/initialState.ts               |  2 +-
 .../uikit-playground/src/Context/reducer.ts   |  9 ++-
 .../src/hooks/useCodeMirror.ts                |  4 +-
 .../src/hooks/useFormatCodeMirrorValue.ts     | 36 +++++++++++
 7 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 packages/uikit-playground/src/hooks/useFormatCodeMirrorValue.ts

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index a7f2d8b3aa6f..2f76faed9e98 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -1,14 +1,13 @@
 import type { Extension } from '@codemirror/state';
 import { Box } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import json5 from 'json5';
 import { useEffect, useContext } from 'react';
 
 import { updatePayloadAction, context } from '../../Context';
 import useCodeMirror from '../../hooks/useCodeMirror';
-import codePrettier from '../../utils/codePrettier';
 import intendCode from '../../utils/intendCode';
-import { ILayoutBlock } from '../../Context/initialState';
+import { IPayload } from '../../Context/initialState';
+import useFormatCodeMirrorValue from '../../hooks/useFormatCodeMirrorValue';
 
 type CodeMirrorProps = {
   extensions?: Extension[];
@@ -24,45 +23,35 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
     extensions,
     intendCode(screens[activeScreen]?.payload)
   );
-  const debounceValue = useDebouncedValue(changes?.value, 1500);
-
-  useEffect(() => {
-    if (!changes?.isDispatch) {
-      try {
-        const parsedCode: ILayoutBlock[] = json5.parse(changes.value);
-        dispatch(updatePayloadAction({ blocks: parsedCode }));
-      } catch (e) {
-        // do nothing
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [changes?.value]);
-
-  useEffect(() => {
-    if (!changes?.isDispatch) {
-      try {
-        const prettierCode = codePrettier(changes.value, changes.cursor || 0);
-        setValue(prettierCode.formatted, {
-          cursor: prettierCode.cursorOffset,
-        });
-      } catch (e) {
-        // do nothing
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debounceValue]);
+  const debounceValue = useDebouncedValue(changes, 1500);
+
+  useFormatCodeMirrorValue(
+    (
+      parsedCode: IPayload,
+      prettifiedCode: { formatted: string; cursorOffset: number }
+    ) => {
+      dispatch(
+        updatePayloadAction({
+          blocks: parsedCode.blocks,
+          surface: parsedCode.surface,
+        })
+      );
+      setValue(prettifiedCode.formatted, {
+        cursor: prettifiedCode.cursorOffset,
+      });
+    },
+    debounceValue
+  );
 
   useEffect(() => {
     if (!screens[activeScreen]?.changedByEditor) {
       setValue(intendCode(screens[activeScreen]?.payload), {});
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screens[activeScreen]?.payload.blocks, activeScreen]);
-
-  useEffect(() => {
-    setValue(intendCode(screens[activeScreen]?.payload), {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeScreen]);
+  }, [
+    screens[activeScreen]?.payload.blocks,
+    screens[activeScreen]?.payload.surface,
+    activeScreen,
+  ]);
 
   return (
     <>
diff --git a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
index c525fd629c2c..961c465ca13d 100644
--- a/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
+++ b/packages/uikit-playground/src/Components/SurfaceSelect/SurfaceSelect.tsx
@@ -1,6 +1,6 @@
 import { Select } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 
 import { context, surfaceAction } from '../../Context';
 import options from './options';
@@ -10,13 +10,25 @@ const SurfaceSelect: FC = () => {
     state: { screens, activeScreen },
     dispatch,
   } = useContext(context);
+
+  // temp fix for the placeholder
+  const placeHolder = useMemo(() => {
+    try {
+      return options[screens[activeScreen].payload.surface - 1][1];
+    } catch (e) {
+      return 'Select Surface';
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screens[activeScreen].payload.surface]);
+
+  // Fuselage Select component is not working properly with the value prop
   return (
     <Select
       options={options}
-      value={`${screens[activeScreen].payload.surface}`}
-      placeholder={'Surface'}
+      value={screens[activeScreen].payload.surface}
+      placeholder={placeHolder}
       onChange={(e) => {
-        dispatch(surfaceAction(parseInt(e)));
+        dispatch(surfaceAction(parseInt(`${e}`)));
       }}
     />
   );
diff --git a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
index e82d2626e4a9..ab4e219f1936 100644
--- a/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
+++ b/packages/uikit-playground/src/Context/action/updatePayloadAction.ts
@@ -1,9 +1,11 @@
+import { SurfaceOptions } from '../../Components/Preview/Display/Surface/constant';
 import { ILayoutBlock } from '../initialState';
 import { ActionTypes } from '../reducer';
 
 type PayloadType = {
   blocks: ILayoutBlock[];
   changedByEditor?: boolean;
+  surface?: SurfaceOptions;
 };
 
 export type UpdatePayloadAction = {
diff --git a/packages/uikit-playground/src/Context/initialState.ts b/packages/uikit-playground/src/Context/initialState.ts
index 5ea29ab9165b..610b45f20414 100644
--- a/packages/uikit-playground/src/Context/initialState.ts
+++ b/packages/uikit-playground/src/Context/initialState.ts
@@ -114,8 +114,8 @@ export const initialState: initialStateType = {
   screens: {
     [initialScreenId]: {
       payload: {
-        blocks: [],
         surface: SurfaceOptions.Message,
+        blocks: [],
       },
       id: initialScreenId,
       name: 'Untitled Screen',
diff --git a/packages/uikit-playground/src/Context/reducer.ts b/packages/uikit-playground/src/Context/reducer.ts
index 42eae4f68c43..af111090f527 100644
--- a/packages/uikit-playground/src/Context/reducer.ts
+++ b/packages/uikit-playground/src/Context/reducer.ts
@@ -110,6 +110,8 @@ const reducer = (state: initialStateType, action: IAction) => {
     }
     case ActionTypes.UpdatePayload: {
       state.screens[activeScreen].payload.blocks = action?.payload?.blocks;
+      if (action?.payload?.surface)
+        state.screens[activeScreen].payload.surface = action?.payload?.surface;
       state.screens[activeScreen].changedByEditor =
         action?.payload?.changedByEditor === undefined;
       state.projects[activeProject].flowEdges = filterEdges(
@@ -143,8 +145,8 @@ const reducer = (state: initialStateType, action: IAction) => {
             id,
             name: action?.payload || 'Untitled Screen',
             payload: {
-              blocks: [],
               surface: SurfaceOptions.Message,
+              blocks: [],
             },
             date: getDate(),
             actionPreview: {},
@@ -248,8 +250,8 @@ const reducer = (state: initialStateType, action: IAction) => {
             name: 'Untitled Screen',
             date: getDate(),
             payload: {
-              blocks: [],
               surface: SurfaceOptions.Message,
+              blocks: [],
             },
             actionPreview: {},
           },
@@ -294,6 +296,9 @@ const reducer = (state: initialStateType, action: IAction) => {
     }
 
     case ActionTypes.DeleteProject: {
+      window.console.log(state.projects[action.payload]?.screens);
+      const screensIds = state.projects[action.payload]?.screens;
+      screensIds?.map((id) => delete state.screens[id]);
       delete state.projects[action.payload];
       return {
         ...state,
diff --git a/packages/uikit-playground/src/hooks/useCodeMirror.ts b/packages/uikit-playground/src/hooks/useCodeMirror.ts
index d4d67d3b8b20..4622fc262bec 100644
--- a/packages/uikit-playground/src/hooks/useCodeMirror.ts
+++ b/packages/uikit-playground/src/hooks/useCodeMirror.ts
@@ -3,7 +3,7 @@ import type { Extension } from '@codemirror/state';
 import { EditorView } from 'codemirror';
 import { useCallback, useEffect, useState, useRef } from 'react';
 
-type changes = {
+export type ICodeMirrorChanges = {
   value: string;
   isDispatch: boolean;
   cursor?: number;
@@ -12,7 +12,7 @@ type changes = {
 export default function useCodeMirror(extensions?: Extension[], doc?: string) {
   const view = useRef<EditorView>();
   const [element, setElement] = useState<HTMLElement>();
-  const [changes, setChanges] = useState<changes>({
+  const [changes, setChanges] = useState<ICodeMirrorChanges>({
     value: '[]',
     isDispatch: true,
     cursor: 0,
diff --git a/packages/uikit-playground/src/hooks/useFormatCodeMirrorValue.ts b/packages/uikit-playground/src/hooks/useFormatCodeMirrorValue.ts
new file mode 100644
index 000000000000..e781c8eb94a7
--- /dev/null
+++ b/packages/uikit-playground/src/hooks/useFormatCodeMirrorValue.ts
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import codePrettier from '../utils/codePrettier';
+import { IPayload } from '../Context/initialState';
+import json5 from 'json5';
+import { ICodeMirrorChanges } from './useCodeMirror';
+
+// Todo: needs to make it more strict
+function isILayoutblock(obj: object): obj is IPayload {
+  return obj && typeof obj === 'object' && 'surface' in obj && 'blocks' in obj;
+}
+
+const useFormatCodeMirrorValue = (
+  callback: (
+    parsedCode: IPayload,
+    prettierCode: ReturnType<typeof codePrettier>
+  ) => void,
+  changes: ICodeMirrorChanges
+) => {
+  useEffect(() => {
+    if (changes?.isDispatch) return;
+
+    try {
+      const parsedCode = json5.parse(changes.value);
+      if (!isILayoutblock(parsedCode))
+        throw new Error('Please enter a valid LayoutBlock');
+      const prettierCode = codePrettier(changes.value, changes.cursor || 0);
+      callback(parsedCode, prettierCode);
+    } catch (e) {
+      // do nothing
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [changes]);
+};
+
+export default useFormatCodeMirrorValue;

From 35c0cba8d21d1f31dfce7c29b966ae6962fa4fe3 Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Mon, 21 Aug 2023 17:34:35 +0530
Subject: [PATCH 41/50] chores(uikit-playground): fix editor on screen change

---
 .../src/Components/CodeEditor/BlockEditor.tsx                | 5 +++++
 packages/uikit-playground/src/index.css                      | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
index 2f76faed9e98..15e3f7dcc856 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/CodeEditor/BlockEditor.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import type { Extension } from '@codemirror/state';
 import { Box } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
@@ -53,6 +54,10 @@ const BlockEditor = ({ extensions }: CodeMirrorProps) => {
     activeScreen,
   ]);
 
+  useEffect(() => {
+    setValue(intendCode(screens[activeScreen]?.payload), {});
+  }, [activeScreen]);
+
   return (
     <>
       <Box display="grid" height="100%" width={'100%'} ref={editor} />
diff --git a/packages/uikit-playground/src/index.css b/packages/uikit-playground/src/index.css
index d20d4290e40a..a37f1dfde11b 100644
--- a/packages/uikit-playground/src/index.css
+++ b/packages/uikit-playground/src/index.css
@@ -1,3 +1,5 @@
+@import url('./_global.css');
+
 body,html {
   width: 100%; height: 100%;
   margin: 0;

From c9eafb84fe11e863dcbf1d265d4f921a615190ce Mon Sep 17 00:00:00 2001
From: Vivek Srivastava <viveksrivastava6180@gmail.com>
Date: Mon, 21 Aug 2023 17:49:09 +0530
Subject: [PATCH 42/50] chores(uikit-playground): fix build

---
 .../CodeEditor/Extensions/payloadLinter.ts    |  2 +-
 .../ComponentSideBar/ScrollableSideBar.tsx    |  1 -
 .../Components/ComponentSideBar/SideBar.tsx   |  4 +--
 .../Components/ComponentSideBar/SliderBtn.tsx |  2 +-
 .../Draggable/DraggableListItem.tsx           |  1 -
 .../src/Components/DropDown/DropDown.tsx      |  2 +-
 .../src/Components/DropDown/ItemsIcon.tsx     | 13 ++++----
 .../NavBar/BurgerIcon/BurgerIcon.tsx          |  2 +-
 .../src/Components/NavBar/BurgerIcon/Line.tsx | 15 ++++-----
 .../Components/NavBar/BurgerIcon/Wrapper.tsx  | 33 +++++++++----------
 .../src/Components/NavBar/Divider.tsx         |  3 +-
 .../src/Components/NavBar/Logo.tsx            | 11 +++----
 .../src/Components/NavBar/RightNavBtn.tsx     |  2 +-
 .../Preview/Display/Surface/BannerSurface.tsx |  1 -
 .../Preview/Display/Surface/ModalSurface.tsx  |  1 -
 .../Preview/Display/Surface/SurfaceRender.tsx |  1 -
 .../Preview/Editor/ActionBlockEditor.tsx      |  3 +-
 .../Preview/Editor/ActionPreviewEditor.tsx    |  3 +-
 .../Components/Preview/NavPanel/NavPanel.tsx  |  2 +-
 .../src/Components/Preview/Preview.tsx        |  4 +--
 .../SplitPlaneContainer.tsx                   |  4 +--
 .../src/Components/Preview/Wrapper.tsx        |  6 ++--
 .../Templates/Container/Container.tsx         |  1 -
 .../Templates/Container/Section.tsx           |  1 -
 .../src/Components/Templates/Templates.tsx    |  2 +-
 .../src/Components/navMenu/Menu/Wrapper.tsx   | 17 +++++-----
 .../src/Pages/SignInSignUp.tsx                |  1 -
 27 files changed, 61 insertions(+), 77 deletions(-)

diff --git a/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts b/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
index e6a2b8168998..5eccf262f23f 100644
--- a/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
+++ b/packages/uikit-playground/src/Components/CodeEditor/Extensions/payloadLinter.ts
@@ -55,7 +55,7 @@ const payloadLinter = linter((view: EditorView) => {
       });
       return diagnostics;
     }
-    if (head.name === 'ObjectExpression') parsePayload(head, diagnostics, view);
+    if (head.name === 'ObjectExpression') parsePayload(head, view);
     head = head.nextSibling;
   } while (head);
 
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
index e614f458f1c9..1d0a1bf318c0 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
@@ -1,7 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Scrollable, Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React from 'react';
 
 import BlocksTree from '../../Payload/actionBlock/BlocksTree';
 import DropDown from '../DropDown';
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
index ef58fbc732b1..8deae40dffa7 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useEffect, useContext } from 'react';
+import { useEffect, useContext } from 'react';
 
 import { context, sidebarToggleAction } from '../../Context';
 import ScrollableSideBar from './ScrollableSideBar';
@@ -33,7 +33,7 @@ const SideBar: FC = () => {
       height={'100%'}
       display={'flex'}
       zIndex={4}
-      bg='#fff'
+      bg="#fff"
       className={[slide]}
     >
       <SliderBtn />
diff --git a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
index 52ba6d88d750..6d1e7982bc0c 100644
--- a/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
+++ b/packages/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Label } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, sidebarToggleAction } from '../../Context';
 
diff --git a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
index a26b2d62deb8..1660ee4b4cb1 100644
--- a/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
+++ b/packages/uikit-playground/src/Components/Draggable/DraggableListItem.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 
 import DeleteElementBtn from '../Preview/Display/UiKitElementWrapper/DeleteElementBtn';
diff --git a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
index ff5648b93185..8377a96c8a99 100644
--- a/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/DropDown.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 
 import Items from './Items';
 import type { Item, ItemBranch } from './types';
diff --git a/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx b/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
index 1bd1554c6b84..fb74ae397113 100644
--- a/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
+++ b/packages/uikit-playground/src/Components/DropDown/ItemsIcon.tsx
@@ -1,25 +1,24 @@
 import { Icon } from '@rocket.chat/fuselage';
-import React from 'react';
 
 const ItemsIcon = ({
   layer,
   lastNode,
   hover,
 }: {
-  layer: number,
-  lastNode: boolean,
-  hover: boolean,
+  layer: number;
+  lastNode: boolean;
+  hover: boolean;
 }) => {
   const selectIcon = (layer: number, hover: boolean) => {
     if (layer === 1) {
       return (
-        <Icon name='folder' size='x12' color={hover ? '#fff' : '#1d74f5'} />
+        <Icon name="folder" size="x12" color={hover ? '#fff' : '#1d74f5'} />
       );
     }
     if (lastNode) {
-      return <Icon name='cube' size='x12' color={hover ? '#fff' : '#f5455c'} />;
+      return <Icon name="cube" size="x12" color={hover ? '#fff' : '#f5455c'} />;
     }
-    return <Icon name='burger' size='x12' color={hover ? '#fff' : '#19ac7c'} />;
+    return <Icon name="burger" size="x12" color={hover ? '#fff' : '#19ac7c'} />;
   };
   return <>{selectIcon(layer, hover)}</>;
 };
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
index 4c1409153c01..af02130ca4e0 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/BurgerIcon.tsx
@@ -1,6 +1,6 @@
 import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
 import type { ReactElement, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context } from '../../../Context';
 import Line from './Line';
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
index 30c22f53d05b..64eb886b2967 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Line.tsx
@@ -1,14 +1,13 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import React from 'react';
 
 const Line = ({
   animated,
   moved,
 }: {
-  animated: boolean,
-  moved?: boolean,
+  animated: boolean;
+  moved?: boolean;
 }): ReactElement => {
   const animatedStyle = animated
     ? css`
@@ -40,12 +39,12 @@ const Line = ({
 
   return (
     <Box
-      is='span'
-      width='x20'
-      height='x2'
-      backgroundColor='currentColor'
+      is="span"
+      width="x20"
+      height="x2"
+      backgroundColor="currentColor"
       className={[animatedStyle, movedStyle]}
-      aria-hidden='true'
+      aria-hidden="true"
     />
   );
 };
diff --git a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
index b484b7800f39..661e0a67d0d3 100644
--- a/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/BurgerIcon/Wrapper.tsx
@@ -1,25 +1,24 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
 
 const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
-	<Box
-		is='span'
-		display='inline-flex'
-		flexDirection='column'
-		alignItems='center'
-		justifyContent='space-between'
-		paddingBlock={4}
-		paddingInline={2}
-		verticalAlign='middle'
-		children={children}
-		height='x24'
-		className={css`
-			cursor: pointer;
-		`}
-		width='x24'
-	/>
+  <Box
+    is="span"
+    display="inline-flex"
+    flexDirection="column"
+    alignItems="center"
+    justifyContent="space-between"
+    paddingBlock={4}
+    paddingInline={2}
+    verticalAlign="middle"
+    children={children}
+    height="x24"
+    className={css`
+      cursor: pointer;
+    `}
+    width="x24"
+  />
 );
 
 export default Wrapper;
diff --git a/packages/uikit-playground/src/Components/NavBar/Divider.tsx b/packages/uikit-playground/src/Components/NavBar/Divider.tsx
index 0a2c25f207ca..c9a42d7185f7 100644
--- a/packages/uikit-playground/src/Components/NavBar/Divider.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/Divider.tsx
@@ -1,7 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React from 'react';
 
-const Divider: FC = () => <Box height='70%' width='1px' bg='#c7c7c7' />;
+const Divider: FC = () => <Box height="70%" width="1px" bg="#c7c7c7" />;
 
 export default Divider;
diff --git a/packages/uikit-playground/src/Components/NavBar/Logo.tsx b/packages/uikit-playground/src/Components/NavBar/Logo.tsx
index 64849882d3c7..0a3b62485ce9 100644
--- a/packages/uikit-playground/src/Components/NavBar/Logo.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/Logo.tsx
@@ -1,16 +1,15 @@
 import { Box } from '@rocket.chat/fuselage';
 import { RocketChatLogo } from '@rocket.chat/logo';
 import type { FC } from 'react';
-import React from 'react';
 
 const Logo: FC = () => (
   <Box
-    display='flex'
-    justifyContent='center'
-    height='100%'
-    width='var(--sidebar-width)'
+    display="flex"
+    justifyContent="center"
+    height="100%"
+    width="var(--sidebar-width)"
   >
-    <Box height='100%' width='80%'>
+    <Box height="100%" width="80%">
       <RocketChatLogo />
     </Box>
   </Box>
diff --git a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
index f032662001e9..3e1a1ff287b7 100644
--- a/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
+++ b/packages/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
@@ -1,6 +1,6 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, navMenuToggleAction } from '../../Context';
 import BurgerIcon from './BurgerIcon';
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
index 55a0dc9ba746..3b1adf154e33 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/BannerSurface.tsx
@@ -1,6 +1,5 @@
 import { Banner, Icon } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
-import React from 'react';
 
 const MessageSurface = ({ children }: { children: ReactNode }) => (
   <Banner icon={<Icon name="info" size="x20" />}>{children}</Banner>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
index 54502649520a..5a19bb02fb2c 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/ModalSurface.tsx
@@ -11,7 +11,6 @@ import {
   Button,
 } from '@rocket.chat/fuselage';
 import type { ReactNode } from 'react';
-import React from 'react';
 
 const ModalSurface = ({ children }: { children: ReactNode }) => (
   <Modal>
diff --git a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
index 8554aacfe67f..9d5f36db6612 100644
--- a/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Display/Surface/SurfaceRender.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from 'react';
-import React from 'react';
 
 import BannerSurface from './BannerSurface';
 import MessageSurface from './MessageSurface';
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx b/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
index a7b0b5e09347..bd990e723765 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
@@ -1,6 +1,5 @@
 import { Box, Scrollable } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React from 'react';
 
 import BlockEditor from '../../CodeEditor/BlockEditor';
 import { actionBlockExtensions } from '../../CodeEditor/Extensions/Extensions';
@@ -8,7 +7,7 @@ import { actionBlockExtensions } from '../../CodeEditor/Extensions/Extensions';
 const ActionBlockEditor: FC = () => (
   <Scrollable vertical>
     <Box
-      position='relative'
+      position="relative"
       height={'100%'}
       width={'100%'}
       zIndex={1}
diff --git a/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx b/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
index 70e8c31f655d..ea7ada439b96 100644
--- a/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
@@ -1,6 +1,5 @@
 import { Box, Scrollable } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React from 'react';
 
 import { actionPreviewExtensions } from '../../CodeEditor/Extensions/Extensions';
 import PreviewEditor from '../../CodeEditor/PreviewEditor';
@@ -8,7 +7,7 @@ import PreviewEditor from '../../CodeEditor/PreviewEditor';
 const ActionPreviewEditor: FC = () => (
   <Scrollable vertical>
     <Box
-      position='relative'
+      position="relative"
       height={'100%'}
       width={'100%'}
       zIndex={1}
diff --git a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index 118ae175048b..f2d4fe5a1f9b 100644
--- a/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/packages/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import {
   context,
diff --git a/packages/uikit-playground/src/Components/Preview/Preview.tsx b/packages/uikit-playground/src/Components/Preview/Preview.tsx
index 60203fee7086..9a8fe61c2241 100644
--- a/packages/uikit-playground/src/Components/Preview/Preview.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Preview.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useEffect, useContext } from 'react';
+import { useEffect, useContext } from 'react';
 
 import { context, previewTabsToggleAction } from '../../Context';
 import NavPanel from './NavPanel';
@@ -21,7 +21,7 @@ const Preview: FC = () => {
     <Box
       display={'flex'}
       flexGrow={1}
-      bg='#fff'
+      bg="#fff"
       zIndex={3}
       height={'100%'}
       flexDirection={'column'}
diff --git a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
index 6ee7947d58ea..fb4ddf9639c8 100644
--- a/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
+++ b/packages/uikit-playground/src/Components/Preview/SplitPlaneContainer/SplitPlaneContainer.tsx
@@ -24,9 +24,9 @@ const SplitPlaneContainer: FC<{ PreviewSize: Partial<PreviewSizeType> }> = ({
   }, [isTablet, dispatch]);
 
   const splitPaneProps = {
-    defaultSize: PreviewSize.inlineSize * 0.5,
+    defaultSize: (PreviewSize.inlineSize || 1) * 0.5,
     minSize: 300,
-    maxSize: PreviewSize.inlineSize - 350,
+    maxSize: (PreviewSize.inlineSize || 1) - 350,
     allowResize: !isTablet,
   };
 
diff --git a/packages/uikit-playground/src/Components/Preview/Wrapper.tsx b/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
index ffd501c0b14f..9ed8aef650a8 100644
--- a/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/Preview/Wrapper.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context } from '../../Context';
 import SplitPlaneContainer from './SplitPlaneContainer/SplitPlaneContainer';
@@ -28,9 +28,9 @@ const Wrapper = () => {
   };
 
   return (
-    <Box position='relative' width={'100%'} flexGrow={1}>
+    <Box position="relative" width={'100%'} flexGrow={1}>
       <Box
-        position='absolute'
+        position="absolute"
         width={isTablet ? '200%' : '100%'}
         height={'100%'}
         display={'flex'}
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
index 15bfca3cff34..f52f3a3005b6 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Container.tsx
@@ -1,5 +1,4 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
 
 import type { templateType } from '../../../utils/templates';
 import Section from './Section';
diff --git a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
index 9207b4c35e53..954020bcf2df 100644
--- a/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -1,5 +1,4 @@
 import { Box, Label } from '@rocket.chat/fuselage';
-import React from 'react';
 
 import type { templateType } from '../../../utils/templates';
 import Payload from './Payload';
diff --git a/packages/uikit-playground/src/Components/Templates/Templates.tsx b/packages/uikit-playground/src/Components/Templates/Templates.tsx
index 35b734f38e05..e416eed7f265 100644
--- a/packages/uikit-playground/src/Components/Templates/Templates.tsx
+++ b/packages/uikit-playground/src/Components/Templates/Templates.tsx
@@ -1,7 +1,7 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, Button, Icon, Scrollable } from '@rocket.chat/fuselage';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
 import { context, templatesToggleAction } from '../../Context';
 import { templates } from '../../utils/templates';
diff --git a/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx b/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
index 56b1b1f4e43f..cbbd1fa94d69 100644
--- a/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
+++ b/packages/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
@@ -1,19 +1,18 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
 
 const Wrapper = ({ children }: { children: ReactNode }): ReactElement => (
   <Box
-    pbs='80px'
+    pbs="80px"
     pis={'50px'}
-    display='inline-flex'
-    flexDirection='column'
-    alignItems='center'
-    justifyContent='space-between'
-    verticalAlign='middle'
+    display="inline-flex"
+    flexDirection="column"
+    alignItems="center"
+    justifyContent="space-between"
+    verticalAlign="middle"
     children={children}
-    height='max-content'
-    width='100%'
+    height="max-content"
+    width="100%"
   />
 );
 
diff --git a/packages/uikit-playground/src/Pages/SignInSignUp.tsx b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
index a95f5e184246..55d06187cee2 100644
--- a/packages/uikit-playground/src/Pages/SignInSignUp.tsx
+++ b/packages/uikit-playground/src/Pages/SignInSignUp.tsx
@@ -1,7 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Flex, Box, InputBox, Button, Label } from '@rocket.chat/fuselage';
 import { RocketChatLogo } from '@rocket.chat/logo';
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import routes from '../Routes/Routes';

From 5fe16e1d1ee8e542d49bba15863308fbe7554142 Mon Sep 17 00:00:00 2001
From: Kevin Aleman <kaleman960@gmail.com>
Date: Fri, 25 Aug 2023 05:40:17 -0600
Subject: [PATCH 43/50] chore: Callback smol fixes (#29942)

Co-authored-by: murtaza98 <murtaza.patrawala@rocket.chat>
---
 .../livechat/server/hooks/offlineMessageToChannel.ts | 12 ++++++++----
 .../app/livechat/server/hooks/saveAnalyticsData.ts   |  2 +-
 .../server/hooks/saveLastVisitorMessageTs.ts         |  7 ++++---
 .../server/hooks/afterForwardChatToDepartment.ts     |  5 ++++-
 .../server/hooks/afterRemoveDepartment.ts            |  3 ---
 .../server/hooks/onTransferFailure.ts                |  9 ++++++---
 .../hooks/setPredictedVisitorAbandonmentTime.ts      | 10 +++++-----
 7 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/apps/meteor/app/livechat/server/hooks/offlineMessageToChannel.ts b/apps/meteor/app/livechat/server/hooks/offlineMessageToChannel.ts
index c8166d1a7454..7cc8f8e6e9ad 100644
--- a/apps/meteor/app/livechat/server/hooks/offlineMessageToChannel.ts
+++ b/apps/meteor/app/livechat/server/hooks/offlineMessageToChannel.ts
@@ -1,3 +1,4 @@
+import type { ILivechatDepartment } from '@rocket.chat/core-typings';
 import { isOmnichannelRoom } from '@rocket.chat/core-typings';
 import { LivechatDepartment, Users, Rooms } from '@rocket.chat/models';
 
@@ -17,9 +18,12 @@ callbacks.add(
 		let departmentName;
 		const { name, email, department, message: text, host } = data;
 		if (department && department !== '') {
-			const dept = await LivechatDepartment.findOneById(department, {
-				projection: { name: 1, offlineMessageChannelName: 1 },
-			});
+			const dept = await LivechatDepartment.findOneById<Pick<ILivechatDepartment, '_id' | 'name' | 'offlineMessageChannelName'>>(
+				department,
+				{
+					projection: { name: 1, offlineMessageChannelName: 1 },
+				},
+			);
 			departmentName = dept?.name;
 			if (dept?.offlineMessageChannelName) {
 				channelName = dept.offlineMessageChannelName;
@@ -30,7 +34,7 @@ callbacks.add(
 			return data;
 		}
 
-		const room: any = await Rooms.findOneByName(channelName, { projection: { t: 1, archived: 1 } });
+		const room = await Rooms.findOneByName(channelName, { projection: { t: 1, archived: 1 } });
 		if (!room || room.archived || (isOmnichannelRoom(room) && room.closedAt)) {
 			return data;
 		}
diff --git a/apps/meteor/app/livechat/server/hooks/saveAnalyticsData.ts b/apps/meteor/app/livechat/server/hooks/saveAnalyticsData.ts
index 48a52aa41fe0..ec584ec001d6 100644
--- a/apps/meteor/app/livechat/server/hooks/saveAnalyticsData.ts
+++ b/apps/meteor/app/livechat/server/hooks/saveAnalyticsData.ts
@@ -8,12 +8,12 @@ import { callbackLogger } from '../lib/logger';
 callbacks.add(
 	'afterSaveMessage',
 	async (message, room) => {
-		callbackLogger.debug(`Calculating Omnichannel metrics for room ${room._id}`);
 		// check if room is livechat
 		if (!isOmnichannelRoom(room)) {
 			return message;
 		}
 
+		callbackLogger.debug(`Calculating Omnichannel metrics for room ${room._id}`);
 		// skips this callback if the message was edited
 		if (!message || isEditedMessage(message)) {
 			return message;
diff --git a/apps/meteor/app/livechat/server/hooks/saveLastVisitorMessageTs.ts b/apps/meteor/app/livechat/server/hooks/saveLastVisitorMessageTs.ts
index 576b14722a2a..4bc28c3990ba 100644
--- a/apps/meteor/app/livechat/server/hooks/saveLastVisitorMessageTs.ts
+++ b/apps/meteor/app/livechat/server/hooks/saveLastVisitorMessageTs.ts
@@ -12,10 +12,11 @@ callbacks.add(
 		if (message.t) {
 			return message;
 		}
-		if (message.token) {
-			await LivechatRooms.setVisitorLastMessageTimestampByRoomId(room._id, message.ts);
+		if (!message.token) {
+			return message;
 		}
-		return message;
+
+		await LivechatRooms.setVisitorLastMessageTimestampByRoomId(room._id, message.ts);
 	},
 	callbacks.priority.HIGH,
 	'save-last-visitor-message-timestamp',
diff --git a/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterForwardChatToDepartment.ts b/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterForwardChatToDepartment.ts
index f5b5dc8234f1..8babfec041c7 100644
--- a/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterForwardChatToDepartment.ts
+++ b/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterForwardChatToDepartment.ts
@@ -1,3 +1,4 @@
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
 import { LivechatRooms, LivechatDepartment } from '@rocket.chat/models';
 
 import { callbacks } from '../../../../../lib/callbacks';
@@ -8,7 +9,9 @@ callbacks.add(
 	async (options) => {
 		const { rid, newDepartmentId } = options;
 
-		const room = await LivechatRooms.findOneById(rid);
+		const room = await LivechatRooms.findOneById<Pick<IOmnichannelRoom, '_id' | 'departmentAncestors'>>(rid, {
+			projection: { departmentAncestors: 1 },
+		});
 		if (!room) {
 			cbLogger.debug('Skipping callback. No room found');
 			return options;
diff --git a/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterRemoveDepartment.ts b/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterRemoveDepartment.ts
index a2f53f39715e..be732be66297 100644
--- a/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterRemoveDepartment.ts
+++ b/apps/meteor/ee/app/livechat-enterprise/server/hooks/afterRemoveDepartment.ts
@@ -15,9 +15,6 @@ const afterRemoveDepartment = async (options: { department: ILivechatDepartmentR
 
 	cbLogger.debug(`Removing department from forward list: ${department._id}`);
 	await LivechatDepartment.removeDepartmentFromForwardListById(department._id);
-	cbLogger.debug(`Removed department from forward list: ${department._id}`);
-
-	cbLogger.debug(`Post-department-removal actions completed in EE: ${department._id}`);
 
 	return options;
 };
diff --git a/apps/meteor/ee/app/livechat-enterprise/server/hooks/onTransferFailure.ts b/apps/meteor/ee/app/livechat-enterprise/server/hooks/onTransferFailure.ts
index d2d481c42d8b..bd33cfe12bbd 100644
--- a/apps/meteor/ee/app/livechat-enterprise/server/hooks/onTransferFailure.ts
+++ b/apps/meteor/ee/app/livechat-enterprise/server/hooks/onTransferFailure.ts
@@ -28,9 +28,12 @@ const onTransferFailure = async (
 		return false;
 	}
 
-	const department = (await LivechatDepartment.findOneById(departmentId, {
-		projection: { _id: 1, name: 1, fallbackForwardDepartment: 1 },
-	})) as Partial<ILivechatDepartment>;
+	const department = await LivechatDepartment.findOneById<Pick<ILivechatDepartment, 'name' | '_id' | 'fallbackForwardDepartment'>>(
+		departmentId,
+		{
+			projection: { _id: 1, name: 1, fallbackForwardDepartment: 1 },
+		},
+	);
 
 	if (!department?.fallbackForwardDepartment?.length) {
 		return false;
diff --git a/apps/meteor/ee/app/livechat-enterprise/server/hooks/setPredictedVisitorAbandonmentTime.ts b/apps/meteor/ee/app/livechat-enterprise/server/hooks/setPredictedVisitorAbandonmentTime.ts
index 4efafdf09d52..0f162f887913 100644
--- a/apps/meteor/ee/app/livechat-enterprise/server/hooks/setPredictedVisitorAbandonmentTime.ts
+++ b/apps/meteor/ee/app/livechat-enterprise/server/hooks/setPredictedVisitorAbandonmentTime.ts
@@ -7,6 +7,10 @@ import { setPredictedVisitorAbandonmentTime } from '../lib/Helper';
 callbacks.add(
 	'afterSaveMessage',
 	async (message, room) => {
+		if (!isOmnichannelRoom(room)) {
+			return message;
+		}
+
 		if (
 			!settings.get('Livechat_abandoned_rooms_action') ||
 			settings.get('Livechat_abandoned_rooms_action') === 'none' ||
@@ -19,12 +23,8 @@ callbacks.add(
 			return message;
 		}
 
-		if (!isOmnichannelRoom(room)) {
-			return message;
-		}
-
 		// message valid only if it is a livechat room
-		if (!(typeof room.t !== 'undefined' && room.t === 'l' && room.v && room.v.token)) {
+		if (!room.v?.token) {
 			return message;
 		}
 		// if the message has a type means it is a special message (like the closing comment), so skip it

From 5a0fa24c601d941dcd5738e10c1ceb6474286b5e Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 25 Aug 2023 12:35:14 -0300
Subject: [PATCH 44/50] fix: stop blinking  Room not found before dm creation
 (#30157)

---
 .changeset/rotten-turtles-agree.md            |  5 +++
 .../message/list/MessageListSkeleton.tsx      |  6 +---
 .../client/lib/errors/OldUrlRoomError.ts      | 16 +++++++++
 apps/meteor/client/views/room/RoomOpener.tsx  |  5 +++
 apps/meteor/client/views/room/RoomRoute.tsx   |  4 +--
 .../client/views/room/hooks/useOpenRoom.ts    | 36 +++++++++----------
 6 files changed, 47 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/rotten-turtles-agree.md
 create mode 100644 apps/meteor/client/lib/errors/OldUrlRoomError.ts

diff --git a/.changeset/rotten-turtles-agree.md b/.changeset/rotten-turtles-agree.md
new file mode 100644
index 000000000000..f915aa38f758
--- /dev/null
+++ b/.changeset/rotten-turtles-agree.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fix: stop blinking "Room not found" before dm creation
diff --git a/apps/meteor/client/components/message/list/MessageListSkeleton.tsx b/apps/meteor/client/components/message/list/MessageListSkeleton.tsx
index 7c780fae5946..5581f5ffc63d 100644
--- a/apps/meteor/client/components/message/list/MessageListSkeleton.tsx
+++ b/apps/meteor/client/components/message/list/MessageListSkeleton.tsx
@@ -10,11 +10,7 @@ type MessageListSkeletonProps = {
 
 const MessageListSkeleton = ({ messageCount = 2 }: MessageListSkeletonProps): ReactElement => {
 	const widths = useMemo(
-		() =>
-			Array.from(
-				{ length: messageCount },
-				() => `${availablePercentualWidths[Math.floor(Math.random() * availablePercentualWidths.length)]}%`,
-			),
+		() => Array.from({ length: messageCount }, (_, index) => `${availablePercentualWidths[index % availablePercentualWidths.length]}%`),
 		[messageCount],
 	);
 
diff --git a/apps/meteor/client/lib/errors/OldUrlRoomError.ts b/apps/meteor/client/lib/errors/OldUrlRoomError.ts
new file mode 100644
index 000000000000..d8fe7e49cd59
--- /dev/null
+++ b/apps/meteor/client/lib/errors/OldUrlRoomError.ts
@@ -0,0 +1,16 @@
+import type { IRoom, RoomType } from '@rocket.chat/core-typings';
+
+import { RocketChatError } from './RocketChatError';
+
+type OldUrlRoomErrorDetails =
+	| { rid: IRoom['_id'] }
+	| {
+			type: RoomType;
+			reference: string;
+	  };
+
+export class OldUrlRoomError extends RocketChatError<'old-url-format', OldUrlRoomErrorDetails> {
+	constructor(message = 'Old Url Format', details: OldUrlRoomErrorDetails) {
+		super('old-url-format', message, details);
+	}
+}
diff --git a/apps/meteor/client/views/room/RoomOpener.tsx b/apps/meteor/client/views/room/RoomOpener.tsx
index f954ad350da9..734f0434bf0d 100644
--- a/apps/meteor/client/views/room/RoomOpener.tsx
+++ b/apps/meteor/client/views/room/RoomOpener.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { getErrorMessage } from '../../lib/errorHandling';
 import { NotAuthorizedError } from '../../lib/errors/NotAuthorizedError';
+import { OldUrlRoomError } from '../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../lib/errors/RoomNotFoundError';
 import RoomSkeleton from './RoomSkeleton';
 import { useOpenRoom } from './hooks/useOpenRoom';
@@ -36,6 +37,10 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps): ReactElement => {
 			)}
 			{isError &&
 				(() => {
+					if (error instanceof OldUrlRoomError) {
+						return <RoomSkeleton />;
+					}
+
 					if (error instanceof RoomNotFoundError) {
 						return <RoomNotFound />;
 					}
diff --git a/apps/meteor/client/views/room/RoomRoute.tsx b/apps/meteor/client/views/room/RoomRoute.tsx
index a0e67d8bf800..863dbc02574e 100644
--- a/apps/meteor/client/views/room/RoomRoute.tsx
+++ b/apps/meteor/client/views/room/RoomRoute.tsx
@@ -1,6 +1,6 @@
 import type { RoomType } from '@rocket.chat/core-typings';
 import { useRouter } from '@rocket.chat/ui-contexts';
-import React, { useEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 
 import RoomOpener from './RoomOpener';
 
@@ -15,7 +15,7 @@ const RoomRoute = ({ extractOpenRoomParams }: RoomRouteProps) => {
 	const router = useRouter();
 	const [params, setParams] = useState(() => extractOpenRoomParams(router.getRouteParameters()));
 
-	useEffect(
+	useLayoutEffect(
 		() =>
 			router.subscribeToRouteChange(() => {
 				setParams(extractOpenRoomParams(router.getRouteParameters()));
diff --git a/apps/meteor/client/views/room/hooks/useOpenRoom.ts b/apps/meteor/client/views/room/hooks/useOpenRoom.ts
index 7fa0114bcd64..c2b694414002 100644
--- a/apps/meteor/client/views/room/hooks/useOpenRoom.ts
+++ b/apps/meteor/client/views/room/hooks/useOpenRoom.ts
@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import { roomFields } from '../../../../lib/publishFields';
 import { omit } from '../../../../lib/utils/omit';
 import { NotAuthorizedError } from '../../../lib/errors/NotAuthorizedError';
+import { OldUrlRoomError } from '../../../lib/errors/OldUrlRoomError';
 import { RoomNotFoundError } from '../../../lib/errors/RoomNotFoundError';
 
 export function useOpenRoom({ type, reference }: { type: RoomType; reference: string }) {
@@ -30,7 +31,21 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 			try {
 				roomData = await getRoomByTypeAndName(type, reference);
 			} catch (error) {
-				throw new RoomNotFoundError(undefined, { type, reference });
+				if (type !== 'd') {
+					throw new RoomNotFoundError(undefined, { type, reference });
+				}
+
+				try {
+					const { rid } = await createDirectMessage(...reference.split(', '));
+					const { ChatSubscription } = await import('../../../../app/models/client');
+					const { waitUntilFind } = await import('../../../lib/utils/waitUntilFind');
+					await waitUntilFind(() => ChatSubscription.findOne({ rid }));
+					directRoute.push({ rid }, (prev) => prev);
+				} catch (error) {
+					throw new RoomNotFoundError(undefined, { type, reference });
+				}
+
+				throw new OldUrlRoomError(undefined, { type, reference });
 			}
 
 			if (!roomData._id) {
@@ -62,7 +77,8 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 			if (room._id !== reference && type === 'd') {
 				// Redirect old url using username to rid
 				await LegacyRoomManager.close(type + reference);
-				throw new RoomNotFoundError(undefined, { rid: room._id });
+				directRoute.push({ rid: room._id }, (prev) => prev);
+				throw new OldUrlRoomError(undefined, { rid: room._id });
 			}
 
 			const { RoomManager } = await import('../../../lib/RoomManager');
@@ -86,22 +102,6 @@ export function useOpenRoom({ type, reference }: { type: RoomType; reference: st
 		},
 		{
 			retry: 0,
-			onError: async (error) => {
-				if (type !== 'd') {
-					return;
-				}
-
-				if (error instanceof RoomNotFoundError && error.details !== undefined && 'rid' in error.details) {
-					directRoute.push({ rid: error.details.rid }, (prev) => prev);
-					return;
-				}
-
-				const { rid } = await createDirectMessage(...reference.split(', '));
-				const { ChatSubscription } = await import('../../../../app/models/client');
-				const { waitUntilFind } = await import('../../../lib/utils/waitUntilFind');
-				await waitUntilFind(() => ChatSubscription.findOne({ rid }));
-				directRoute.push({ rid }, (prev) => prev);
-			},
 		},
 	);
 }

From 74244d761b3040e1b82972b30c696e643338966f Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Fri, 25 Aug 2023 13:34:04 -0300
Subject: [PATCH 45/50] test: bump playwright (#30176)

---
 .github/workflows/ci-test-e2e.yml |  2 +-
 apps/meteor/package.json          |  2 +-
 yarn.lock                         | 50 +++++++++++++++++--------------
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/.github/workflows/ci-test-e2e.yml b/.github/workflows/ci-test-e2e.yml
index be782d0b561e..e22b293d444b 100644
--- a/.github/workflows/ci-test-e2e.yml
+++ b/.github/workflows/ci-test-e2e.yml
@@ -142,7 +142,7 @@ jobs:
           path: |
             ~/.cache/ms-playwright
           # This is the version of Playwright that we are using, if you are willing to upgrade, you should update this.
-          key: playwright-1.23.1.
+          key: playwright-1.37.1
 
       - name: Install Playwright
         if: inputs.type == 'ui' && steps.cache-playwright.outputs.cache-hit != 'true'
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index b2e6a1bb9792..89a5c0002248 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -70,7 +70,7 @@
 		"@babel/preset-react": "~7.22.5",
 		"@babel/register": "~7.22.5",
 		"@faker-js/faker": "~8.0.2",
-		"@playwright/test": "^1.22.2",
+		"@playwright/test": "^1.37.1",
 		"@rocket.chat/eslint-config": "workspace:^",
 		"@rocket.chat/livechat": "workspace:^",
 		"@rocket.chat/mock-providers": "workspace:^",
diff --git a/yarn.lock b/yarn.lock
index e1d2bd75324b..bf92cfcbce40 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4955,15 +4955,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:^1.22.2":
-  version: 1.23.1
-  resolution: "@playwright/test@npm:1.23.1"
+"@playwright/test@npm:^1.37.1":
+  version: 1.37.1
+  resolution: "@playwright/test@npm:1.37.1"
   dependencies:
     "@types/node": "*"
-    playwright-core: 1.23.1
+    fsevents: 2.3.2
+    playwright-core: 1.37.1
+  dependenciesMeta:
+    fsevents:
+      optional: true
   bin:
     playwright: cli.js
-  checksum: 27fc6b4424dfb0f0dfaaecb01a33bf77c0f95e6a1e635fe85dd4ad36e5053afdbe4ad1de4be1c5705e482451b43f7ddacf667f6c5b70ab5f8e32c30110211c29
+  checksum: b7038f29000289103c08b215eff7aabdda70cdc1375fa7dad0e81651be71086a1e2fc0e0e29dc70348037c366cf0cc69f762373fda34ba1a74aa1658741d9195
   languageName: node
   linkType: hard
 
@@ -8065,7 +8069,7 @@ __metadata:
     "@nivo/heatmap": 0.80.0
     "@nivo/line": 0.80.0
     "@nivo/pie": 0.80.0
-    "@playwright/test": ^1.22.2
+    "@playwright/test": ^1.37.1
     "@react-aria/color": ^3.0.0-beta.15
     "@react-pdf/renderer": ^3.1.12
     "@rocket.chat/account-utils": "workspace:^"
@@ -21543,6 +21547,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:2.3.2, fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: latest
+  checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:^1.2.7":
   version: 1.2.13
   resolution: "fsevents@npm:1.2.13"
@@ -21554,12 +21568,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.1.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@patch:fsevents@2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@npm:2.3.2"
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
   dependencies:
     node-gyp: latest
-  checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
   conditions: os=darwin
   languageName: node
   linkType: hard
@@ -21574,15 +21587,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
-  version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
-  dependencies:
-    node-gyp: latest
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "ftp@npm:^0.3.10":
   version: 0.3.10
   resolution: "ftp@npm:0.3.10"
@@ -30477,12 +30481,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.23.1":
-  version: 1.23.1
-  resolution: "playwright-core@npm:1.23.1"
+"playwright-core@npm:1.37.1":
+  version: 1.37.1
+  resolution: "playwright-core@npm:1.37.1"
   bin:
-    playwright: cli.js
-  checksum: 1e6a3a7a9aaee1864b22195c7fef52b6980fcafc6d667749737455360a44a182a7035f12bfd76f298f957d1b99550420a8748f6a473ceeacf2cb2db42beb9be0
+    playwright-core: cli.js
+  checksum: 69f818da2230057584140d5b3af7778a4f4a822b5b18d133abfc5d259128becb943c343a2ddf6b0635277a69f28983e83e2bc3fce23595ececb1e410475b6368
   languageName: node
   linkType: hard
 

From 330647646889ae9156d65a3432f5062b644389c2 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Fri, 25 Aug 2023 15:00:38 -0300
Subject: [PATCH 46/50] fix: Unread mark not showing (#30084)

---
 .changeset/wise-ways-fetch.md                 |   5 +
 apps/meteor/app/ui-utils/client/index.ts      |   1 -
 .../ui-utils/client/lib/RoomHistoryManager.ts |   8 +-
 .../app/ui-utils/client/lib/readMessages.ts   | 171 -----------------
 apps/meteor/app/ui/client/lib/ChatMessages.ts |   5 +
 apps/meteor/client/lib/chats/ChatAPI.ts       |   3 +-
 apps/meteor/client/lib/chats/data.ts          |   8 +-
 .../client/lib/chats/flows/sendMessage.ts     |   3 +-
 .../client/lib/chats/readStateManager.ts      | 173 ++++++++++++++++++
 .../notifications/konchatNotifications.ts     |   5 +-
 .../views/room/MessageList/MessageList.tsx    |  14 +-
 .../MessageList/lib/isMessageFirstUnread.ts   |  13 --
 .../client/views/room/body/RoomBody.tsx       |  14 +-
 .../body/hooks/useReadMessageWindowEvents.ts  |  39 +---
 .../room/contextualBar/MessageListTab.tsx     |  12 +-
 .../components/MessageSearch.tsx              |   9 +-
 .../Threads/components/ThreadMessageList.tsx  |   8 +-
 .../room/hooks/useFirstUnreadMessageId.ts     |  13 ++
 .../hooks/useChatMessagesInstance.ts          |   9 +
 .../meteor/server/models/raw/Subscriptions.ts |   3 +-
 .../lib/isMessageFirstUnread.spec.ts          |  56 ------
 21 files changed, 241 insertions(+), 331 deletions(-)
 create mode 100644 .changeset/wise-ways-fetch.md
 delete mode 100644 apps/meteor/app/ui-utils/client/lib/readMessages.ts
 create mode 100644 apps/meteor/client/lib/chats/readStateManager.ts
 delete mode 100644 apps/meteor/client/views/room/MessageList/lib/isMessageFirstUnread.ts
 create mode 100644 apps/meteor/client/views/room/hooks/useFirstUnreadMessageId.ts
 delete mode 100644 apps/meteor/tests/unit/client/views/room/MessageList/lib/isMessageFirstUnread.spec.ts

diff --git a/.changeset/wise-ways-fetch.md b/.changeset/wise-ways-fetch.md
new file mode 100644
index 000000000000..a81063813c35
--- /dev/null
+++ b/.changeset/wise-ways-fetch.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fixed the unread messages mark not showing
diff --git a/apps/meteor/app/ui-utils/client/index.ts b/apps/meteor/app/ui-utils/client/index.ts
index aaa5a0825706..6409db5a3592 100644
--- a/apps/meteor/app/ui-utils/client/index.ts
+++ b/apps/meteor/app/ui-utils/client/index.ts
@@ -2,7 +2,6 @@ import './lib/messageActionDefault';
 
 export { MessageAction } from './lib/MessageAction';
 export { messageBox } from './lib/messageBox';
-export { readMessage } from './lib/readMessages';
 export { LegacyRoomManager } from './lib/LegacyRoomManager';
 export { upsertMessage, RoomHistoryManager } from './lib/RoomHistoryManager';
 export { mainReady } from './lib/mainReady';
diff --git a/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts b/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts
index 27ac9d893b15..4e2f0c020a12 100644
--- a/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts
+++ b/apps/meteor/app/ui-utils/client/lib/RoomHistoryManager.ts
@@ -13,7 +13,6 @@ import { getConfig } from '../../../../client/lib/utils/getConfig';
 import { waitForElement } from '../../../../client/lib/utils/waitForElement';
 import { ChatMessage, ChatSubscription } from '../../../models/client';
 import { getUserPreference } from '../../../utils/client';
-import { readMessage } from './readMessages';
 
 export async function upsertMessage(
 	{
@@ -196,14 +195,12 @@ class RoomHistoryManagerClass extends Emitter {
 		}
 
 		waitAfterFlush(() => {
+			this.emit('loaded-messages');
 			const heightDiff = wrapper.scrollHeight - (previousHeight ?? NaN);
 			wrapper.scrollTop = (scroll ?? NaN) + heightDiff;
 		});
 
 		room.isLoading.set(false);
-		waitAfterFlush(() => {
-			readMessage.refreshUnreadMark(rid);
-		});
 	}
 
 	public async getMoreNext(rid: IRoom['_id'], atBottomRef: MutableRefObject<boolean>) {
@@ -299,9 +296,8 @@ class RoomHistoryManagerClass extends Emitter {
 
 		upsertMessageBulk({ msgs: Array.from(result.messages).filter((msg) => msg.t !== 'command'), subscription });
 
-		readMessage.refreshUnreadMark(message.rid);
-
 		Tracker.afterFlush(async () => {
+			this.emit('loaded-messages');
 			room.isLoading.set(false);
 		});
 
diff --git a/apps/meteor/app/ui-utils/client/lib/readMessages.ts b/apps/meteor/app/ui-utils/client/lib/readMessages.ts
deleted file mode 100644
index 2d3951fef053..000000000000
--- a/apps/meteor/app/ui-utils/client/lib/readMessages.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import type { IRoom } from '@rocket.chat/core-typings';
-import { Emitter } from '@rocket.chat/emitter';
-import { Meteor } from 'meteor/meteor';
-
-import { RoomManager } from '../../../../client/lib/RoomManager';
-import { ChatSubscription, ChatMessage } from '../../../models/client';
-import { sdk } from '../../../utils/client/lib/SDKClient';
-import { LegacyRoomManager } from './LegacyRoomManager';
-import { RoomHistoryManager } from './RoomHistoryManager';
-
-class ReadMessage extends Emitter {
-	protected enabled: boolean;
-
-	protected debug = false;
-
-	constructor() {
-		super();
-		this.enable();
-	}
-
-	protected log(...args: any[]) {
-		return this.debug && console.log(...args);
-	}
-
-	public enable() {
-		this.enabled = document.hasFocus();
-	}
-
-	public disable() {
-		this.enabled = false;
-	}
-
-	public isEnable() {
-		return this.enabled === true;
-	}
-
-	public read(rid: IRoom['_id'] | undefined = RoomManager.opened) {
-		if (!this.enabled) {
-			this.log('readMessage -> readNow canceled by enabled: false');
-			return;
-		}
-
-		if (!rid) {
-			this.log('readMessage -> readNow canceled by rid: undefined');
-			return;
-		}
-
-		const subscription = ChatSubscription.findOne({ rid });
-		if (!subscription) {
-			this.log('readMessage -> readNow canceled, no subscription found for rid:', rid);
-			return;
-		}
-
-		if (subscription.alert === false && subscription.unread === 0) {
-			this.log('readMessage -> readNow canceled, alert', subscription.alert, 'and unread', subscription.unread);
-			return;
-		}
-
-		const room = LegacyRoomManager.getOpenedRoomByRid(rid);
-		if (!room) {
-			this.log('readMessage -> readNow canceled, no room found for typeName:', subscription.t + subscription.name);
-			return;
-		}
-
-		// Only read messages if user saw the first unread message
-		const unreadMark = document.querySelector<HTMLElement>('.message.first-unread, .rcx-message-divider--unread');
-		if (unreadMark) {
-			const visible = unreadMark.offsetTop >= 0;
-
-			if (!visible) {
-				this.log('readMessage -> readNow canceled, unread mark visible:', visible);
-				return;
-			}
-			// if unread mark is not visible and there is more more not loaded unread messages
-		} else if (RoomHistoryManager.getRoom(rid).unreadNotLoaded.get() > 0) {
-			return;
-		}
-
-		return this.readNow(rid);
-	}
-
-	public readNow(rid: IRoom['_id'] | undefined = RoomManager.opened) {
-		if (!rid) {
-			this.log('readMessage -> readNow canceled, no rid informed');
-			return;
-		}
-
-		const subscription = ChatSubscription.findOne({ rid });
-		if (!subscription) {
-			this.log('readMessage -> readNow canceled, no subscription found for rid:', rid);
-			return;
-		}
-
-		return sdk.rest.post('/v1/subscriptions.read', { rid }).then(() => {
-			RoomHistoryManager.getRoom(rid).unreadNotLoaded.set(0);
-			return this.emit(rid);
-		});
-	}
-
-	public refreshUnreadMark(rid: IRoom['_id']) {
-		if (!rid) {
-			return;
-		}
-
-		const subscription = ChatSubscription.findOne({ rid }, { reactive: false });
-		if (!subscription) {
-			return;
-		}
-
-		const room = LegacyRoomManager.getOpenedRoomByRid(rid);
-		if (!room) {
-			return;
-		}
-
-		if (!subscription.alert && subscription.unread === 0) {
-			document.querySelector('.message.first-unread')?.classList.remove('first-unread');
-			room.unreadSince.set(undefined);
-			return;
-		}
-
-		let lastReadRecord = ChatMessage.findOne(
-			{
-				rid: subscription.rid,
-				ts: {
-					$lt: subscription.ls,
-				},
-			},
-			{
-				sort: {
-					ts: -1,
-				},
-			},
-		) as { ts: Date } | undefined;
-		const { unreadNotLoaded } = RoomHistoryManager.getRoom(rid);
-
-		if (!lastReadRecord && unreadNotLoaded.get() === 0) {
-			lastReadRecord = { ts: new Date(0) };
-		}
-
-		room.unreadSince.set(lastReadRecord || unreadNotLoaded.get() > 0 ? subscription.ls : undefined);
-
-		if (!lastReadRecord) {
-			return;
-		}
-
-		const firstUnreadRecord = ChatMessage.findOne(
-			{
-				'rid': subscription.rid,
-				'ts': {
-					$gt: lastReadRecord.ts,
-				},
-				'u._id': {
-					$ne: Meteor.userId() ?? undefined,
-				},
-			},
-			{
-				sort: {
-					ts: 1,
-				},
-			},
-		);
-
-		if (firstUnreadRecord) {
-			room.unreadFirstId = firstUnreadRecord._id;
-			document.querySelector('.message.first-unread')?.classList.remove('first-unread');
-			document.querySelector(`.message[data-id="${firstUnreadRecord._id}"]`)?.classList.add('first-unread');
-		}
-	}
-}
-
-export const readMessage = new ReadMessage();
diff --git a/apps/meteor/app/ui/client/lib/ChatMessages.ts b/apps/meteor/app/ui/client/lib/ChatMessages.ts
index fad3625d0e2f..1fba5f4a877b 100644
--- a/apps/meteor/app/ui/client/lib/ChatMessages.ts
+++ b/apps/meteor/app/ui/client/lib/ChatMessages.ts
@@ -12,6 +12,7 @@ import { replyBroadcast } from '../../../../client/lib/chats/flows/replyBroadcas
 import { requestMessageDeletion } from '../../../../client/lib/chats/flows/requestMessageDeletion';
 import { sendMessage } from '../../../../client/lib/chats/flows/sendMessage';
 import { uploadFiles } from '../../../../client/lib/chats/flows/uploadFiles';
+import { ReadStateManager } from '../../../../client/lib/chats/readStateManager';
 import { createUploadsAPI } from '../../../../client/lib/chats/uploads';
 import {
 	setHighlightMessage,
@@ -37,6 +38,8 @@ export class ChatMessages implements ChatAPI {
 
 	public data: DataAPI;
 
+	public readStateManager: ReadStateManager;
+
 	public uploads: UploadsAPI;
 
 	public userCard: { open(username: string): (event: UIEvent) => void; close(): void };
@@ -149,6 +152,8 @@ export class ChatMessages implements ChatAPI {
 			throw new Error('Flow is not implemented');
 		};
 
+		this.readStateManager = new ReadStateManager(rid);
+
 		this.userCard = {
 			open: unimplemented,
 			close: unimplemented,
diff --git a/apps/meteor/client/lib/chats/ChatAPI.ts b/apps/meteor/client/lib/chats/ChatAPI.ts
index 33251b3e9641..1c60cd98b0e5 100644
--- a/apps/meteor/client/lib/chats/ChatAPI.ts
+++ b/apps/meteor/client/lib/chats/ChatAPI.ts
@@ -4,6 +4,7 @@ import type { UIEvent } from 'react';
 import type { FormattingButton } from '../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import type { Subscribable } from '../../definitions/Subscribable';
 import type { Upload } from './Upload';
+import type { ReadStateManager } from './readStateManager';
 
 export type ComposerAPI = {
 	release(): void;
@@ -86,7 +87,6 @@ export type DataAPI = {
 	getRoom(): Promise<IRoom>;
 	isSubscribedToRoom(): Promise<boolean>;
 	joinRoom(): Promise<void>;
-	markRoomAsRead(): Promise<void>;
 	findDiscussionByID(drid: IRoom['_id']): Promise<IRoom | undefined>;
 	getDiscussionByID(drid: IRoom['_id']): Promise<IRoom>;
 	findSubscription(): Promise<ISubscription | undefined>;
@@ -110,6 +110,7 @@ export type ChatAPI = {
 	readonly setComposerAPI: (composer: ComposerAPI) => void;
 	readonly data: DataAPI;
 	readonly uploads: UploadsAPI;
+	readonly readStateManager: ReadStateManager;
 	readonly messageEditing: {
 		toPreviousMessage(): Promise<void>;
 		toNextMessage(): Promise<void>;
diff --git a/apps/meteor/client/lib/chats/data.ts b/apps/meteor/client/lib/chats/data.ts
index c1dccc0a51f6..396a1b0c1989 100644
--- a/apps/meteor/client/lib/chats/data.ts
+++ b/apps/meteor/client/lib/chats/data.ts
@@ -5,7 +5,7 @@ import moment from 'moment';
 import { hasAtLeastOnePermission, hasPermission } from '../../../app/authorization/client';
 import { Messages, ChatRoom, ChatSubscription } from '../../../app/models/client';
 import { settings } from '../../../app/settings/client';
-import { readMessage, MessageTypes } from '../../../app/ui-utils/client';
+import { MessageTypes } from '../../../app/ui-utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
 import { onClientBeforeSendMessage } from '../onClientBeforeSendMessage';
 import { prependReplies } from '../utils/prependReplies';
@@ -249,11 +249,6 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage
 		await sdk.call('joinRoom', rid);
 	};
 
-	const markRoomAsRead = async (): Promise<void> => {
-		readMessage.readNow(rid);
-		readMessage.refreshUnreadMark(rid);
-	};
-
 	const findDiscussionByID = async (drid: IRoom['_id']): Promise<IRoom | undefined> =>
 		ChatRoom.findOne({ _id: drid, prid: { $exists: true } }, { reactive: false });
 
@@ -318,7 +313,6 @@ export const createDataAPI = ({ rid, tmid }: { rid: IRoom['_id']; tmid: IMessage
 		getRoom,
 		isSubscribedToRoom,
 		joinRoom,
-		markRoomAsRead,
 		findDiscussionByID,
 		getDiscussionByID,
 		findSubscription,
diff --git a/apps/meteor/client/lib/chats/flows/sendMessage.ts b/apps/meteor/client/lib/chats/flows/sendMessage.ts
index c46158003b3b..32fb1fb535f7 100644
--- a/apps/meteor/client/lib/chats/flows/sendMessage.ts
+++ b/apps/meteor/client/lib/chats/flows/sendMessage.ts
@@ -42,7 +42,8 @@ export const sendMessage = async (chat: ChatAPI, { text, tshow }: { text: string
 		}
 	}
 
-	await chat.data.markRoomAsRead();
+	chat.readStateManager.clearUnreadMark();
+	await chat.readStateManager.debouncedMarkAsRead();
 
 	text = text.trim();
 
diff --git a/apps/meteor/client/lib/chats/readStateManager.ts b/apps/meteor/client/lib/chats/readStateManager.ts
new file mode 100644
index 000000000000..5f4aa3d7ad97
--- /dev/null
+++ b/apps/meteor/client/lib/chats/readStateManager.ts
@@ -0,0 +1,173 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { Emitter } from '@rocket.chat/emitter';
+import { Meteor } from 'meteor/meteor';
+
+import { ChatMessage } from '../../../app/models/client';
+import { LegacyRoomManager } from '../../../app/ui-utils/client/lib/LegacyRoomManager';
+import { RoomHistoryManager } from '../../../app/ui-utils/client/lib/RoomHistoryManager';
+import { sdk } from '../../../app/utils/client/lib/SDKClient';
+import { withDebouncing } from '../../../lib/utils/highOrderFunctions';
+
+export class ReadStateManager extends Emitter {
+	private rid: IRoom['_id'];
+
+	private firstUnreadRecordId?: IMessage['_id'];
+
+	private subscription?: ISubscription;
+
+	public constructor(rid: IRoom['_id']) {
+		super();
+		this.rid = rid;
+	}
+
+	public getRid() {
+		return this.rid;
+	}
+
+	// TODO: Use ref to get unreadMark
+	// private unreadMark?: HTMLElement;
+	private get unreadMark() {
+		return document.querySelector<HTMLElement>('.rcx-message-divider--unread');
+	}
+
+	public onUnreadStateChange = (callback: () => void): (() => void) => {
+		return this.on('unread-state-change', callback);
+	};
+
+	public getFirstUnreadRecordId = () => {
+		return this.firstUnreadRecordId;
+	};
+
+	public updateSubscription(subscription?: ISubscription) {
+		if (!subscription) {
+			return;
+		}
+
+		const firstUpdate = !this.subscription;
+
+		this.subscription = subscription;
+		LegacyRoomManager.getOpenedRoomByRid(this.rid)?.unreadSince.set(this.subscription.ls);
+
+		const { unread, alert } = this.subscription;
+		if (!unread && !alert) {
+			return;
+		}
+
+		if (firstUpdate) {
+			this.updateFirstUnreadRecordId();
+			return;
+		}
+
+		if (document.hasFocus() && this.firstUnreadRecordId) {
+			return;
+		}
+
+		this.updateFirstUnreadRecordId();
+	}
+
+	private updateFirstUnreadRecordId() {
+		if (!this.subscription?.ls) {
+			return;
+		}
+
+		const firstUnreadRecord = ChatMessage.findOne(
+			{
+				'rid': this.subscription.rid,
+				'ts': {
+					$gt: this.subscription.ls,
+				},
+				'u._id': {
+					$ne: Meteor.userId() ?? undefined,
+				},
+			},
+			{
+				sort: {
+					ts: 1,
+				},
+			},
+		);
+
+		this.setFirstUnreadRecordId(firstUnreadRecord?._id);
+
+		RoomHistoryManager.once('loaded-messages', () => this.updateFirstUnreadRecordId());
+	}
+
+	private setFirstUnreadRecordId(firstUnreadRecordId: string | undefined) {
+		this.firstUnreadRecordId = firstUnreadRecordId;
+		this.emit('unread-state-change', this.firstUnreadRecordId);
+	}
+
+	public clearUnreadMark() {
+		this.setFirstUnreadRecordId(undefined);
+	}
+
+	public handleWindowEvents = (): (() => void) => {
+		const handleWindowFocus = () => {
+			this.attemptMarkAsRead();
+		};
+
+		const handleWindowKeyUp = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				this.markAsRead();
+				this.updateFirstUnreadRecordId();
+			}
+		};
+
+		window.addEventListener('focus', handleWindowFocus);
+		window.addEventListener('keyup', handleWindowKeyUp);
+
+		return () => {
+			window.removeEventListener('focus', handleWindowFocus);
+			window.removeEventListener('keyup', handleWindowKeyUp);
+		};
+	};
+
+	private isUnreadMarkVisible(): boolean {
+		if (!this.unreadMark) {
+			return false;
+		}
+
+		return this.unreadMark.offsetTop > (this.unreadMark.offsetParent?.scrollTop || 0);
+	}
+
+	// This will only mark as read if the unread mark is visible
+	public attemptMarkAsRead() {
+		const { alert, unread } = this.subscription || {};
+		if (!alert && unread === 0) {
+			return;
+		}
+
+		if (!document.hasFocus()) {
+			return;
+		}
+
+		if (this.unreadMark && !this.isUnreadMarkVisible()) {
+			return;
+		}
+		// if there are unloaded unread messages, don't mark as read
+		if (RoomHistoryManager.getRoom(this.rid).unreadNotLoaded.get() > 0) {
+			return;
+		}
+
+		return this.markAsRead();
+	}
+
+	public debouncedMarkAsRead = withDebouncing({ wait: 1000 })(() => {
+		try {
+			return this.markAsRead();
+		} catch (e) {
+			console.error(e);
+		}
+	});
+
+	// this will always mark as read.
+	public async markAsRead() {
+		if (!this.rid) {
+			return;
+		}
+
+		return sdk.rest.post('/v1/subscriptions.read', { rid: this.rid }).then(() => {
+			RoomHistoryManager.getRoom(this.rid).unreadNotLoaded.set(0);
+		});
+	}
+}
diff --git a/apps/meteor/client/startup/notifications/konchatNotifications.ts b/apps/meteor/client/startup/notifications/konchatNotifications.ts
index 80f60ab68ff2..723901b7f70b 100644
--- a/apps/meteor/client/startup/notifications/konchatNotifications.ts
+++ b/apps/meteor/client/startup/notifications/konchatNotifications.ts
@@ -6,7 +6,6 @@ import { lazy } from 'react';
 import { CachedChatSubscription } from '../../../app/models/client';
 import { Notifications } from '../../../app/notifications/client';
 import { settings } from '../../../app/settings/client';
-import { readMessage } from '../../../app/ui-utils/client';
 import { KonchatNotification } from '../../../app/ui/client/lib/KonchatNotification';
 import { getUserPreference } from '../../../app/utils/client';
 import { RoomManager } from '../../lib/RoomManager';
@@ -30,7 +29,7 @@ const notifyNewRoom = async (sub: AtLeast<ISubscription, 'rid'>): Promise<void>
 
 function notifyNewMessageAudio(rid?: string): void {
 	// This logic is duplicated in /client/startup/unread.coffee.
-	const hasFocus = readMessage.isEnable();
+	const hasFocus = document.hasFocus();
 	const messageIsInOpenedRoom = RoomManager.opened === rid;
 	const muteFocusedConversations = getUserPreference(Meteor.userId(), 'muteFocusedConversations');
 
@@ -86,7 +85,7 @@ Meteor.startup(() => {
 			const openedRoomId = ['channel', 'group', 'direct'].includes(router.getRouteName()!) ? RoomManager.opened : undefined;
 
 			// This logic is duplicated in /client/startup/unread.coffee.
-			const hasFocus = readMessage.isEnable();
+			const hasFocus = document.hasFocus();
 			const messageIsInOpenedRoom = openedRoomId === notification.payload.rid;
 
 			fireGlobalEvent('notification', {
diff --git a/apps/meteor/client/views/room/MessageList/MessageList.tsx b/apps/meteor/client/views/room/MessageList/MessageList.tsx
index 0d441b822b1f..5a3a267b73dc 100644
--- a/apps/meteor/client/views/room/MessageList/MessageList.tsx
+++ b/apps/meteor/client/views/room/MessageList/MessageList.tsx
@@ -11,9 +11,9 @@ import SystemMessage from '../../../components/message/variants/SystemMessage';
 import ThreadMessagePreview from '../../../components/message/variants/ThreadMessagePreview';
 import { useFormatDate } from '../../../hooks/useFormatDate';
 import { useRoomSubscription } from '../contexts/RoomContext';
+import { useFirstUnreadMessageId } from '../hooks/useFirstUnreadMessageId';
 import { SelectedMessagesProvider } from '../providers/SelectedMessagesProvider';
 import { useMessages } from './hooks/useMessages';
-import { isMessageFirstUnread } from './lib/isMessageFirstUnread';
 import { isMessageNewDay } from './lib/isMessageNewDay';
 import { isMessageSequential } from './lib/isMessageSequential';
 import MessageListProvider from './providers/MessageListProvider';
@@ -31,6 +31,8 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
 	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
 	const formatDate = useFormatDate();
 
+	const firstUnreadMessageId = useFirstUnreadMessageId();
+
 	return (
 		<MessageListProvider scrollMessageList={scrollMessageList}>
 			<SelectedMessagesProvider>
@@ -38,8 +40,10 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
 					const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
 
 					const newDay = isMessageNewDay(message, previous);
-					const firstUnread = isMessageFirstUnread(subscription, message, previous);
-					const showDivider = newDay || firstUnread;
+
+					const showUnreadDivider = firstUnreadMessageId === message._id;
+
+					const showDivider = newDay || showUnreadDivider;
 
 					const shouldShowAsSequential = sequential && !newDay;
 
@@ -54,7 +58,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
 					return (
 						<Fragment key={message._id}>
 							{showDivider && (
-								<MessageDivider unreadLabel={firstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
+								<MessageDivider unreadLabel={showUnreadDivider ? t('Unread_Messages').toLowerCase() : undefined}>
 									{newDay && formatDate(message.ts)}
 								</MessageDivider>
 							)}
@@ -75,7 +79,7 @@ export const MessageList = ({ rid, scrollMessageList }: MessageListProps): React
 								<ThreadMessagePreview
 									data-mid={message._id}
 									data-tmid={message.tmid}
-									data-unread={firstUnread}
+									data-unread={showUnreadDivider}
 									data-sequential={sequential}
 									sequential={shouldShowAsSequential}
 									message={message}
diff --git a/apps/meteor/client/views/room/MessageList/lib/isMessageFirstUnread.ts b/apps/meteor/client/views/room/MessageList/lib/isMessageFirstUnread.ts
deleted file mode 100644
index 7576eb2ce49b..000000000000
--- a/apps/meteor/client/views/room/MessageList/lib/isMessageFirstUnread.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ISubscription, IMessage } from '@rocket.chat/core-typings';
-
-export const isMessageFirstUnread = (subscription: ISubscription | undefined, message: IMessage, previous?: IMessage): boolean => {
-	if (!subscription || subscription.unread === 0) {
-		return false;
-	}
-
-	if (previous && isMessageFirstUnread(subscription, previous)) {
-		return false;
-	}
-
-	return message.ts > subscription.ls;
-};
diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx
index 4e2f3e8bc8ee..1c4e2262d905 100644
--- a/apps/meteor/client/views/room/body/RoomBody.tsx
+++ b/apps/meteor/client/views/room/body/RoomBody.tsx
@@ -15,7 +15,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 import { ChatMessage, RoomRoles } from '../../../../app/models/client';
-import { readMessage, RoomHistoryManager } from '../../../../app/ui-utils/client';
+import { RoomHistoryManager } from '../../../../app/ui-utils/client';
 import { isAtBottom } from '../../../../app/ui/client/views/app/lib/scrolling';
 import { callbacks } from '../../../../lib/callbacks';
 import { isTruthy } from '../../../../lib/isTruthy';
@@ -200,9 +200,9 @@ const RoomBody = (): ReactElement => {
 	}, [room._id, unread?.since, setUnreadCount]);
 
 	const handleMarkAsReadButtonClick = useCallback(() => {
-		readMessage.readNow(room._id);
+		chat.readStateManager.markAsRead();
 		setUnreadCount(0);
-	}, [room._id, setUnreadCount]);
+	}, [chat.readStateManager, setUnreadCount]);
 
 	const handleUploadProgressClose = useCallback(
 		(id: Upload['id']) => {
@@ -264,9 +264,9 @@ const RoomBody = (): ReactElement => {
 	const debouncedReadMessageRead = useMemo(
 		() =>
 			withDebouncing({ wait: 500 })(() => {
-				readMessage.read(room._id);
+				chat.readStateManager.attemptMarkAsRead();
 			}),
-		[room._id],
+		[chat.readStateManager],
 	);
 
 	useEffect(
@@ -278,9 +278,6 @@ const RoomBody = (): ReactElement => {
 				}
 
 				debouncedReadMessageRead();
-				if (subscribed && (subscription?.alert || subscription?.unread)) {
-					readMessage.refreshUnreadMark(room._id);
-				}
 			}),
 		[debouncedReadMessageRead, room._id, router, subscribed, subscription?.alert, subscription?.unread],
 	);
@@ -303,7 +300,6 @@ const RoomBody = (): ReactElement => {
 		if (!unread?.count) {
 			return debouncedReadMessageRead();
 		}
-		readMessage.refreshUnreadMark(room._id);
 	}, [debouncedReadMessageRead, room._id, unread?.count]);
 
 	useEffect(() => {
diff --git a/apps/meteor/client/views/room/body/hooks/useReadMessageWindowEvents.ts b/apps/meteor/client/views/room/body/hooks/useReadMessageWindowEvents.ts
index 03c74cf2bf80..efd264717a5e 100644
--- a/apps/meteor/client/views/room/body/hooks/useReadMessageWindowEvents.ts
+++ b/apps/meteor/client/views/room/body/hooks/useReadMessageWindowEvents.ts
@@ -1,42 +1,11 @@
 import { useEffect } from 'react';
 
-import { readMessage } from '../../../../../app/ui-utils/client';
-import { useRoom } from '../../contexts/RoomContext';
+import { useChat } from '../../contexts/ChatContext';
 
 export function useReadMessageWindowEvents() {
-	const { _id: rid } = useRoom();
+	const chat = useChat();
 
 	useEffect(() => {
-		const handleWindowBlur = () => {
-			readMessage.disable();
-		};
-
-		const handleWindowFocus = () => {
-			readMessage.enable();
-			readMessage.read();
-		};
-
-		const handleWindowTouchEnd = () => {
-			readMessage.enable();
-		};
-
-		const handleWindowKeyUp = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') {
-				readMessage.readNow(rid);
-				readMessage.refreshUnreadMark(rid);
-			}
-		};
-
-		window.addEventListener('blur', handleWindowBlur);
-		window.addEventListener('focus', handleWindowFocus);
-		window.addEventListener('touchend', handleWindowTouchEnd);
-		window.addEventListener('keyup', handleWindowKeyUp);
-
-		return () => {
-			window.removeEventListener('blur', handleWindowBlur);
-			window.removeEventListener('focus', handleWindowFocus);
-			window.removeEventListener('touchend', handleWindowTouchEnd);
-			window.removeEventListener('keyup', handleWindowKeyUp);
-		};
-	}, [rid]);
+		return chat?.readStateManager.handleWindowEvents();
+	}, [chat?.readStateManager]);
 }
diff --git a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx
index b56d47eddf7b..2cac2a84c1cb 100644
--- a/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx
+++ b/apps/meteor/client/views/room/contextualBar/MessageListTab.tsx
@@ -1,7 +1,7 @@
 import type { IMessage } from '@rocket.chat/core-typings';
 import { Box, MessageDivider, Throbber } from '@rocket.chat/fuselage';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import { useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useUserPreference } from '@rocket.chat/ui-contexts';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback } from 'react';
@@ -22,7 +22,6 @@ import RoomMessage from '../../../components/message/variants/RoomMessage';
 import SystemMessage from '../../../components/message/variants/SystemMessage';
 import { useFormatDate } from '../../../hooks/useFormatDate';
 import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary';
-import { isMessageFirstUnread } from '../MessageList/lib/isMessageFirstUnread';
 import { isMessageNewDay } from '../MessageList/lib/isMessageNewDay';
 import MessageListProvider from '../MessageList/providers/MessageListProvider';
 import { useRoomSubscription } from '../contexts/RoomContext';
@@ -37,7 +36,6 @@ type MessageListTabProps = {
 };
 
 const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryResult }: MessageListTabProps): ReactElement => {
-	const t = useTranslation();
 	const formatDate = useFormatDate();
 	const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
 
@@ -78,8 +76,6 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
 												const previous = queryResult.data[index - 1];
 
 												const newDay = isMessageNewDay(message, previous);
-												const firstUnread = isMessageFirstUnread(subscription, message, previous);
-												const showDivider = newDay || firstUnread;
 
 												const system = MessageTypes.isSystemMessage(message);
 
@@ -89,11 +85,7 @@ const MessageListTab = ({ iconName, title, emptyResultMessage, context, queryRes
 
 												return (
 													<>
-														{showDivider && (
-															<MessageDivider unreadLabel={firstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
-																{newDay && formatDate(message.ts)}
-															</MessageDivider>
-														)}
+														{newDay && <MessageDivider>{formatDate(message.ts)}</MessageDivider>}
 
 														{system ? (
 															<SystemMessage message={message} showUserAvatar={showUserAvatar} />
diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
index e065d42967dc..e3c8753a2282 100644
--- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
+++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
@@ -11,7 +11,6 @@ import RoomMessage from '../../../../../components/message/variants/RoomMessage'
 import SystemMessage from '../../../../../components/message/variants/SystemMessage';
 import { useFormatDate } from '../../../../../hooks/useFormatDate';
 import MessageListErrorBoundary from '../../../MessageList/MessageListErrorBoundary';
-import { isMessageFirstUnread } from '../../../MessageList/lib/isMessageFirstUnread';
 import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay';
 import MessageListProvider from '../../../MessageList/providers/MessageListProvider';
 import LoadingMessagesIndicator from '../../../body/LoadingMessagesIndicator';
@@ -51,8 +50,6 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
 											const previous = messageSearchQuery.data[index - 1];
 
 											const newDay = isMessageNewDay(message, previous);
-											const firstUnread = isMessageFirstUnread(subscription, message, previous);
-											const showDivider = newDay || firstUnread;
 
 											const system = MessageTypes.isSystemMessage(message);
 
@@ -62,11 +59,7 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
 
 											return (
 												<Fragment key={message._id}>
-													{showDivider && (
-														<MessageDivider unreadLabel={firstUnread ? t('Unread_Messages').toLowerCase() : undefined}>
-															{newDay && formatDate(message.ts)}
-														</MessageDivider>
-													)}
+													{newDay && <MessageDivider>{formatDate(message.ts)}</MessageDivider>}
 
 													{system ? (
 														<SystemMessage message={message} showUserAvatar={showUserAvatar} />
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
index cd688dc7c399..496b234cc9b6 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadMessageList.tsx
@@ -12,11 +12,10 @@ import ScrollableContentWrapper from '../../../../../components/ScrollableConten
 import SystemMessage from '../../../../../components/message/variants/SystemMessage';
 import ThreadMessage from '../../../../../components/message/variants/ThreadMessage';
 import { useFormatDate } from '../../../../../hooks/useFormatDate';
-import { isMessageFirstUnread } from '../../../MessageList/lib/isMessageFirstUnread';
 import { isMessageNewDay } from '../../../MessageList/lib/isMessageNewDay';
 import MessageListProvider from '../../../MessageList/providers/MessageListProvider';
 import LoadingMessagesIndicator from '../../../body/LoadingMessagesIndicator';
-import { useRoomSubscription } from '../../../contexts/RoomContext';
+import { useFirstUnreadMessageId } from '../../../hooks/useFirstUnreadMessageId';
 import { useScrollMessageList } from '../../../hooks/useScrollMessageList';
 import { useLegacyThreadMessageJump } from '../hooks/useLegacyThreadMessageJump';
 import { useLegacyThreadMessageListScrolling } from '../hooks/useLegacyThreadMessageListScrolling';
@@ -62,13 +61,14 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 	const hideUsernames = useUserPreference<boolean>('hideUsernames');
 	const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
 
-	const subscription = useRoomSubscription();
 	const formatDate = useFormatDate();
 	const t = useTranslation();
 	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
 
 	const scrollMessageList = useScrollMessageList(listWrapperScrollRef);
 
+	const firstUnreadMessageId = useFirstUnreadMessageId();
+
 	return (
 		<div className={['thread-list js-scroll-thread', hideUsernames && 'hide-usernames'].filter(isTruthy).join(' ')}>
 			<ScrollableContentWrapper
@@ -86,7 +86,7 @@ const ThreadMessageList = ({ mainMessage }: ThreadMessageListProps): ReactElemen
 							{[mainMessage, ...messages].map((message, index, { [index - 1]: previous }) => {
 								const sequential = isMessageSequential(message, previous, messageGroupingPeriod);
 								const newDay = isMessageNewDay(message, previous);
-								const firstUnread = isMessageFirstUnread(subscription, message, previous);
+								const firstUnread = firstUnreadMessageId === message._id;
 								const showDivider = newDay || firstUnread;
 
 								const shouldShowAsSequential = sequential && !newDay;
diff --git a/apps/meteor/client/views/room/hooks/useFirstUnreadMessageId.ts b/apps/meteor/client/views/room/hooks/useFirstUnreadMessageId.ts
new file mode 100644
index 000000000000..959c9c37fa73
--- /dev/null
+++ b/apps/meteor/client/views/room/hooks/useFirstUnreadMessageId.ts
@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { useChat } from '../contexts/ChatContext';
+
+export const useFirstUnreadMessageId = (): string | undefined => {
+	const chat = useChat();
+
+	if (!chat) {
+		throw new Error('useFirstUnreadMessageId must be used within a ChatContextProvider');
+	}
+
+	return useSyncExternalStore(chat.readStateManager.onUnreadStateChange, chat.readStateManager.getFirstUnreadRecordId);
+};
diff --git a/apps/meteor/client/views/room/providers/hooks/useChatMessagesInstance.ts b/apps/meteor/client/views/room/providers/hooks/useChatMessagesInstance.ts
index 124c04c52f0e..93ccddeadff3 100644
--- a/apps/meteor/client/views/room/providers/hooks/useChatMessagesInstance.ts
+++ b/apps/meteor/client/views/room/providers/hooks/useChatMessagesInstance.ts
@@ -1,20 +1,29 @@
 import type { IMessage, IRoom } from '@rocket.chat/core-typings';
 import { useUserId } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
 
 import { ChatMessages } from '../../../../../app/ui/client/lib/ChatMessages';
 import { useEmojiPicker } from '../../../../contexts/EmojiPickerContext';
 import type { ChatAPI } from '../../../../lib/chats/ChatAPI';
+import { useRoomSubscription } from '../../contexts/RoomContext';
 import { useInstance } from './useInstance';
 import { useUserCard } from './useUserCard';
 
 export function useChatMessagesInstance({ rid, tmid }: { rid: IRoom['_id']; tmid?: IMessage['_id'] }): ChatAPI {
 	const uid = useUserId();
+	const subscription = useRoomSubscription();
 	const chatMessages = useInstance(() => {
 		const instance = new ChatMessages({ rid, tmid, uid });
 
 		return [instance, () => instance.release()];
 	}, [rid, tmid, uid]);
 
+	useEffect(() => {
+		if (subscription) {
+			chatMessages?.readStateManager.updateSubscription(subscription);
+		}
+	}, [subscription, chatMessages?.readStateManager]);
+
 	chatMessages.userCard = useUserCard();
 	chatMessages.emojiPicker = useEmojiPicker();
 
diff --git a/apps/meteor/server/models/raw/Subscriptions.ts b/apps/meteor/server/models/raw/Subscriptions.ts
index 90cce9116116..4b42367bad05 100644
--- a/apps/meteor/server/models/raw/Subscriptions.ts
+++ b/apps/meteor/server/models/raw/Subscriptions.ts
@@ -1122,7 +1122,8 @@ export class SubscriptionsRaw extends BaseRaw<ISubscription> implements ISubscri
 			$set: {
 				open: true,
 				alert: true,
-				ls: firstMessageUnreadTimestamp,
+				ls: new Date(firstMessageUnreadTimestamp.getTime() - 1), // make sure last seen is before the first unread message
+				unread: 1,
 			},
 		};
 
diff --git a/apps/meteor/tests/unit/client/views/room/MessageList/lib/isMessageFirstUnread.spec.ts b/apps/meteor/tests/unit/client/views/room/MessageList/lib/isMessageFirstUnread.spec.ts
deleted file mode 100644
index cd197854f9f7..000000000000
--- a/apps/meteor/tests/unit/client/views/room/MessageList/lib/isMessageFirstUnread.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* eslint-env mocha */
-import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
-import { expect } from 'chai';
-
-import { isMessageFirstUnread } from '../../../../../../../client/views/room/MessageList/lib/isMessageFirstUnread';
-
-const date = new Date('2021-10-27T00:00:00.000Z');
-
-const baseMessage: IMessage = {
-	ts: date,
-	u: {
-		_id: 'userId',
-		name: 'userName',
-		username: 'userName',
-	},
-	msg: 'message',
-	rid: 'roomId',
-	_id: 'messageId',
-	_updatedAt: date,
-	urls: [],
-};
-
-describe('isMessageFirstUnread', () => {
-	it('should return true if the message is unread', () => {
-		const message: IMessage = {
-			...baseMessage,
-		};
-
-		const subscription: ISubscription = {
-			ls: new Date('2021-10-26T00:00:00.000Z'),
-		} as ISubscription;
-
-		expect(isMessageFirstUnread(subscription, message)).to.be.true;
-	});
-
-	it('should return false if the message is read', () => {
-		const message: IMessage = {
-			...baseMessage,
-		};
-
-		const subscription: ISubscription = {
-			ls: new Date('2021-10-26T00:00:00.000Z'),
-			unread: 0,
-		} as ISubscription;
-
-		expect(isMessageFirstUnread(subscription, message)).to.be.false;
-	});
-
-	it('should return false if there is no subscription', () => {
-		const message: IMessage = {
-			...baseMessage,
-		};
-
-		expect(isMessageFirstUnread(undefined, message)).to.be.false;
-	});
-});

From 3de63209a3e009d7c39d3eba64591e608a3e960d Mon Sep 17 00:00:00 2001
From: Pierre Lehnen <55164754+pierre-lehnen-rc@users.noreply.github.com>
Date: Fri, 25 Aug 2023 17:01:57 -0300
Subject: [PATCH 47/50] feat: [videoconf] mobile ringing (#30131)

---
 .changeset/bright-carpets-fly.md              |  7 ++
 apps/meteor/app/push/server/apn.ts            |  2 +-
 apps/meteor/app/push/server/definition.ts     |  1 +
 apps/meteor/app/push/server/push.ts           | 23 ++++--
 .../preferences/AccountPreferencesPage.tsx    |  1 +
 .../PreferencesNotificationsSection.tsx       | 17 +++++
 .../rocketchat-i18n/i18n/en.i18n.json         |  3 +
 .../server/methods/saveUserPreferences.ts     |  2 +
 .../services/video-conference/service.ts      | 74 +++++++++++++++++++
 apps/meteor/server/settings/accounts.ts       |  6 ++
 .../server/settings/video-conference.ts       |  9 +++
 apps/meteor/tests/data/user.ts                |  1 +
 .../tests/end-to-end/api/00-miscellaneous.js  |  1 +
 .../src/IPushNotificationConfig.ts            |  1 +
 .../v1/users/UsersSetPreferenceParamsPOST.ts  |  5 ++
 15 files changed, 147 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/bright-carpets-fly.md

diff --git a/.changeset/bright-carpets-fly.md b/.changeset/bright-carpets-fly.md
new file mode 100644
index 000000000000..6a8ac2608569
--- /dev/null
+++ b/.changeset/bright-carpets-fly.md
@@ -0,0 +1,7 @@
+---
+'@rocket.chat/core-typings': minor
+'@rocket.chat/rest-typings': minor
+'@rocket.chat/meteor': minor
+---
+
+new: ring mobile users on direct conference calls
diff --git a/apps/meteor/app/push/server/apn.ts b/apps/meteor/app/push/server/apn.ts
index e64bf08c1c78..1794a2886324 100644
--- a/apps/meteor/app/push/server/apn.ts
+++ b/apps/meteor/app/push/server/apn.ts
@@ -65,7 +65,7 @@ export const sendAPN = ({
 	note.payload.messageFrom = notification.from;
 	note.priority = priority;
 
-	note.topic = notification.topic;
+	note.topic = `${notification.topic}${notification.apn?.topicSuffix || ''}`;
 	note.mutableContent = true;
 
 	void apnConnection.send(note, userToken).then((response) => {
diff --git a/apps/meteor/app/push/server/definition.ts b/apps/meteor/app/push/server/definition.ts
index c849d06c11b8..39ab94de0a36 100644
--- a/apps/meteor/app/push/server/definition.ts
+++ b/apps/meteor/app/push/server/definition.ts
@@ -26,6 +26,7 @@ export type PendingPushNotification = {
 	notId?: number;
 	apn?: {
 		category?: string;
+		topicSuffix?: string;
 	};
 	gcm?: {
 		style?: string;
diff --git a/apps/meteor/app/push/server/push.ts b/apps/meteor/app/push/server/push.ts
index 4ffc2c288eb5..fe08f7b0a214 100644
--- a/apps/meteor/app/push/server/push.ts
+++ b/apps/meteor/app/push/server/push.ts
@@ -200,6 +200,17 @@ class PushClass {
 		}
 	}
 
+	private getGatewayNotificationData(notification: PendingPushNotification): Omit<GatewayNotification, 'uniqueId'> {
+		// Gateway accepts every attribute from the PendingPushNotification type, except for the priority and apn.topicSuffix
+		const { priority: _priority, apn, ...notifData } = notification;
+		const { topicSuffix: _topicSuffix, ...apnData } = apn || ({} as RequiredField<PendingPushNotification, 'apn'>['apn']);
+
+		return {
+			...notifData,
+			...(notification.apn ? { apn: { ...apnData } } : {}),
+		};
+	}
+
 	private async sendNotificationGateway(
 		app: IAppsTokens,
 		notification: PendingPushNotification,
@@ -210,20 +221,21 @@ class PushClass {
 			return;
 		}
 
-		// Gateway accepts every attribute from the PendingPushNotification type, except for the priority
-		const { priority: _priority, ...notifData } = notification;
+		const { topicSuffix = '' } = notification.apn || {};
+
+		const gatewayNotification = this.getGatewayNotificationData(notification);
 
 		for (const gateway of this.options.gateways) {
 			logger.debug('send to token', app.token);
 
 			if ('apn' in app.token && app.token.apn) {
 				countApn.push(app._id);
-				return this.sendGatewayPush(gateway, 'apn', app.token.apn, { topic: app.appName, ...notifData });
+				return this.sendGatewayPush(gateway, 'apn', app.token.apn, { topic: `${app.appName}${topicSuffix}`, ...gatewayNotification });
 			}
 
 			if ('gcm' in app.token && app.token.gcm) {
 				countGcm.push(app._id);
-				return this.sendGatewayPush(gateway, 'gcm', app.token.gcm, notifData);
+				return this.sendGatewayPush(gateway, 'gcm', app.token.gcm, gatewayNotification);
 			}
 		}
 	}
@@ -306,6 +318,7 @@ class PushClass {
 			contentAvailable: Match.Optional(Match.Integer),
 			apn: Match.Optional({
 				category: Match.Optional(String),
+				topicSuffix: Match.Optional(String),
 			}),
 			gcm: Match.Optional({
 				image: Match.Optional(String),
@@ -344,7 +357,7 @@ class PushClass {
 			...(this.hasApnOptions(options)
 				? {
 						apn: {
-							...pick(options.apn, 'category'),
+							...pick(options.apn, 'category', 'topicSuffix'),
 						},
 				  }
 				: {}),
diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
index da22c5501abc..ec747a913075 100644
--- a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
+++ b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
@@ -47,6 +47,7 @@ type CurrentData = {
 	receiveLoginDetectionEmail: boolean;
 	dontAskAgainList: [action: string, label: string][];
 	notifyCalendarEvents: boolean;
+	enableMobileRinging: boolean;
 };
 
 export type FormSectionProps = {
diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index 6801794169dd..634c5f555343 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -31,6 +31,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 	const userEmailNotificationMode = useUserPreference('emailNotificationMode') as keyof typeof emailNotificationOptionsLabelMap;
 	const userReceiveLoginDetectionEmail = useUserPreference('receiveLoginDetectionEmail');
 	const userNotifyCalendarEvents = useUserPreference('notifyCalendarEvents');
+	const userEnableMobileRinging = useUserPreference('enableMobileRinging');
 
 	const defaultDesktopNotifications = useSetting(
 		'Accounts_Default_User_Preferences_desktopNotifications',
@@ -44,6 +45,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 	const allowLoginEmailPreference = useSetting('Device_Management_Allow_Login_Email_preference');
 	const showNewLoginEmailPreference = loginEmailEnabled && allowLoginEmailPreference;
 	const showCalendarPreference = useSetting('Outlook_Calendar_Enabled');
+	const showMobileRinging = useSetting('VideoConf_Mobile_Ringing');
 
 	const { values, handlers, commit } = useForm(
 		{
@@ -53,6 +55,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 			emailNotificationMode: userEmailNotificationMode,
 			receiveLoginDetectionEmail: userReceiveLoginDetectionEmail,
 			notifyCalendarEvents: userNotifyCalendarEvents,
+			enableMobileRinging: userEnableMobileRinging,
 		},
 		onChange,
 	);
@@ -64,6 +67,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		emailNotificationMode,
 		receiveLoginDetectionEmail,
 		notifyCalendarEvents,
+		enableMobileRinging,
 	} = values as {
 		desktopNotificationRequireInteraction: boolean;
 		desktopNotifications: string;
@@ -71,6 +75,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		emailNotificationMode: string;
 		receiveLoginDetectionEmail: boolean;
 		notifyCalendarEvents: boolean;
+		enableMobileRinging: boolean;
 	};
 
 	const {
@@ -80,6 +85,7 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 		handleEmailNotificationMode,
 		handleReceiveLoginDetectionEmail,
 		handleNotifyCalendarEvents,
+		handleEnableMobileRinging,
 	} = handlers;
 
 	useEffect(() => setNotificationsPermission(window.Notification && Notification.permission), []);
@@ -203,6 +209,17 @@ const PreferencesNotificationsSection = ({ onChange, commitRef, ...props }: Form
 						</Box>
 					</Field>
 				)}
+
+				{showMobileRinging && (
+					<Field>
+						<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
+							<Field.Label>{t('VideoConf_Mobile_Ringing')}</Field.Label>
+							<Field.Row>
+								<ToggleSwitch checked={enableMobileRinging} onChange={handleEnableMobileRinging} />
+							</Field.Row>
+						</Box>
+					</Field>
+				)}
 			</FieldGroup>
 		</Accordion.Item>
 	);
diff --git a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
index d1e0248fba48..2769ab35f68a 100644
--- a/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -5442,6 +5442,9 @@
   "VideoConf_Enable_Groups": "Enable in private channels",
   "VideoConf_Enable_DMs": "Enable in direct messages",
   "VideoConf_Enable_Teams": "Enable in teams",
+  "VideoConf_Mobile_Ringing": "Enable mobile ringing",
+  "VideoConf_Mobile_Ringing_Description": "When enabled, direct calls to mobile users will ring their device as a phone call.",
+  "VideoConf_Mobile_Ringing_Alert": "This feature is currently in an experimental stage and may not yet be fully supported by the mobile app. When enabled it will send additional Push Notifications to users.",
   "videoconf-ring-users": "Ring other users when calling",
   "videoconf-ring-users_description": "Permission to ring other users when calling",
   "Video_record": "Video record",
diff --git a/apps/meteor/server/methods/saveUserPreferences.ts b/apps/meteor/server/methods/saveUserPreferences.ts
index 83dcb8bd238c..731b34abf283 100644
--- a/apps/meteor/server/methods/saveUserPreferences.ts
+++ b/apps/meteor/server/methods/saveUserPreferences.ts
@@ -40,6 +40,7 @@ type UserPreferences = {
 	fontSize?: FontSize;
 	receiveLoginDetectionEmail: boolean;
 	notifyCalendarEvents: boolean;
+	enableMobileRinging: boolean;
 };
 
 declare module '@rocket.chat/ui-contexts' {
@@ -85,6 +86,7 @@ export const saveUserPreferences = async (settings: Partial<UserPreferences>, us
 		omnichannelTranscriptEmail: Match.Optional(Boolean),
 		omnichannelTranscriptPDF: Match.Optional(Boolean),
 		notifyCalendarEvents: Match.Optional(Boolean),
+		enableMobileRinging: Match.Optional(Boolean),
 	};
 	check(settings, Match.ObjectIncluding(keys));
 	const user = await Users.findOneById(userId);
diff --git a/apps/meteor/server/services/video-conference/service.ts b/apps/meteor/server/services/video-conference/service.ts
index d89134ced032..77cdc1cbd8e0 100644
--- a/apps/meteor/server/services/video-conference/service.ts
+++ b/apps/meteor/server/services/video-conference/service.ts
@@ -32,10 +32,16 @@ import type { PaginatedResult } from '@rocket.chat/rest-typings';
 import type { MessageSurfaceLayout } from '@rocket.chat/ui-kit';
 import { MongoInternals } from 'meteor/mongo';
 
+import { RocketChatAssets } from '../../../app/assets/server';
 import { canAccessRoomIdAsync } from '../../../app/authorization/server/functions/canAccessRoom';
 import { sendMessage } from '../../../app/lib/server/functions/sendMessage';
+import { metrics } from '../../../app/metrics/server/lib/metrics';
+import PushNotification from '../../../app/push-notifications/server/lib/PushNotification';
+import { Push } from '../../../app/push/server/push';
 import { settings } from '../../../app/settings/server';
 import { updateCounter } from '../../../app/statistics/server/functions/updateStatsCounter';
+import { getUserAvatarURL } from '../../../app/utils/server/getUserAvatarURL';
+import { getUserPreference } from '../../../app/utils/server/lib/getUserPreference';
 import { Apps } from '../../../ee/server/apps';
 import { callbacks } from '../../../lib/callbacks';
 import { availabilityErrors } from '../../../lib/videoConference/constants';
@@ -199,6 +205,8 @@ export class VideoConfService extends ServiceClassInternal implements IVideoConf
 
 		await this.runVideoConferenceChangedEvent(callId);
 		this.notifyVideoConfUpdate(call.rid, call._id);
+
+		await this.sendAllPushNotifications(call._id);
 	}
 
 	public async get(callId: VideoConference['_id']): Promise<Omit<VideoConference, 'providerData'> | null> {
@@ -583,6 +591,69 @@ export class VideoConfService extends ServiceClassInternal implements IVideoConf
 		};
 	}
 
+	private async sendPushNotification(
+		call: AtLeast<IDirectVideoConference, 'createdBy' | 'rid' | '_id' | 'status'>,
+		calleeId: IUser['_id'],
+	): Promise<void> {
+		if (
+			settings.get('Push_enable') !== true ||
+			settings.get('VideoConf_Mobile_Ringing') !== true ||
+			!(await getUserPreference(calleeId, 'enableMobileRinging'))
+		) {
+			return;
+		}
+
+		metrics.notificationsSent.inc({ notification_type: 'mobile' });
+		await Push.send({
+			from: 'push',
+			badge: 0,
+			sound: 'default',
+			priority: 10,
+			title: `@${call.createdBy.username}`,
+			text: i18n.t('Video_Conference'),
+			payload: {
+				host: Meteor.absoluteUrl(),
+				rid: call.rid,
+				notificationType: 'videoconf',
+				caller: call.createdBy,
+				avatar: getUserAvatarURL(call.createdBy.username),
+				status: call.status,
+			},
+			userId: calleeId,
+			notId: PushNotification.getNotificationId(`${call.rid}|${call._id}`),
+			gcm: {
+				style: 'inbox',
+				image: RocketChatAssets.getURL('Assets_favicon_192'),
+			},
+			apn: {
+				category: 'MESSAGE_NOREPLY',
+				topicSuffix: '.voip',
+			},
+		});
+	}
+
+	private async sendAllPushNotifications(callId: VideoConference['_id']): Promise<void> {
+		if (settings.get('Push_enable') !== true || settings.get('VideoConf_Mobile_Ringing') !== true) {
+			return;
+		}
+
+		const call = await VideoConferenceModel.findOneById<Pick<VideoConference, 'createdBy' | 'rid' | '_id' | 'users' | 'status'>>(callId, {
+			projection: { createdBy: 1, rid: 1, users: 1, status: 1 },
+		});
+
+		if (!call) {
+			return;
+		}
+
+		const subscriptions = Subscriptions.findByRoomIdAndNotUserId(call.rid, call.createdBy._id, {
+			projection: { 'u._id': 1, '_id': 0 },
+		});
+
+		for await (const subscription of subscriptions) {
+			await this.sendPushNotification(call, subscription.u._id);
+		}
+	}
+
 	private async startDirect(
 		providerName: string,
 		user: IUser,
@@ -637,6 +708,8 @@ export class VideoConfService extends ServiceClassInternal implements IVideoConf
 			}
 		}, 40000);
 
+		await this.sendPushNotification(call, calleeId);
+
 		return {
 			type: 'direct',
 			callId,
@@ -949,5 +1022,6 @@ export class VideoConfService extends ServiceClassInternal implements IVideoConf
 		this.notifyVideoConfUpdate(call.rid, call._id);
 
 		await this.runVideoConferenceChangedEvent(call._id);
+		await this.sendAllPushNotifications(call._id);
 	}
 }
diff --git a/apps/meteor/server/settings/accounts.ts b/apps/meteor/server/settings/accounts.ts
index ea9ced816cd6..a7592829578d 100644
--- a/apps/meteor/server/settings/accounts.ts
+++ b/apps/meteor/server/settings/accounts.ts
@@ -697,6 +697,12 @@ export const createAccountSettings = () =>
 				public: true,
 				i18nLabel: 'Notify_Calendar_Events',
 			});
+
+			await this.add('Accounts_Default_User_Preferences_enableMobileRinging', true, {
+				type: 'boolean',
+				public: true,
+				i18nLabel: 'VideoConf_Mobile_Ringing',
+			});
 		});
 
 		await this.section('Avatar', async function () {
diff --git a/apps/meteor/server/settings/video-conference.ts b/apps/meteor/server/settings/video-conference.ts
index 4acb665bb825..9abee80d5c87 100644
--- a/apps/meteor/server/settings/video-conference.ts
+++ b/apps/meteor/server/settings/video-conference.ts
@@ -8,6 +8,15 @@ export const createVConfSettings = () =>
 			public: true,
 		});
 
+		await this.add('VideoConf_Mobile_Ringing', false, {
+			type: 'boolean',
+			public: true,
+			enterprise: true,
+			modules: ['videoconference-enterprise'],
+			invalidValue: false,
+			alert: 'VideoConf_Mobile_Ringing_Alert',
+		});
+
 		// #ToDo: Those should probably be handled by the apps themselves
 		await this.add('Jitsi_Click_To_Join_Count', 0, {
 			type: 'int',
diff --git a/apps/meteor/tests/data/user.ts b/apps/meteor/tests/data/user.ts
index c76d823cb1ab..f9086bd351bc 100644
--- a/apps/meteor/tests/data/user.ts
+++ b/apps/meteor/tests/data/user.ts
@@ -33,6 +33,7 @@ export const preferences = {
 		sendOnEnter: 'normal',
 		idleTimeLimit: 3600,
 		notifyCalendarEvents: false,
+		enableMobileRinging: false,
 	},
 };
 
diff --git a/apps/meteor/tests/end-to-end/api/00-miscellaneous.js b/apps/meteor/tests/end-to-end/api/00-miscellaneous.js
index 89b439c51126..7525fd6ab443 100644
--- a/apps/meteor/tests/end-to-end/api/00-miscellaneous.js
+++ b/apps/meteor/tests/end-to-end/api/00-miscellaneous.js
@@ -176,6 +176,7 @@ describe('miscellaneous', function () {
 					'sidebarGroupByType',
 					'muteFocusedConversations',
 					'notifyCalendarEvents',
+					'enableMobileRinging',
 				].filter((p) => Boolean(p));
 
 				expect(res.body).to.have.property('success', true);
diff --git a/packages/core-typings/src/IPushNotificationConfig.ts b/packages/core-typings/src/IPushNotificationConfig.ts
index 3fd25d8720c6..3279d42aa7b2 100644
--- a/packages/core-typings/src/IPushNotificationConfig.ts
+++ b/packages/core-typings/src/IPushNotificationConfig.ts
@@ -14,5 +14,6 @@ export interface IPushNotificationConfig {
 	};
 	apn?: {
 		category: string;
+		topicSuffix?: string;
 	};
 }
diff --git a/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
index 5ab60b79fd0c..b572a5bdc532 100644
--- a/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
+++ b/packages/rest-typings/src/v1/users/UsersSetPreferenceParamsPOST.ts
@@ -49,6 +49,7 @@ export type UsersSetPreferencesParamsPOST = {
 		idleTimeLimit?: number;
 		omnichannelTranscriptEmail?: boolean;
 		omnichannelTranscriptPDF?: boolean;
+		enableMobileRinging?: boolean;
 	};
 };
 
@@ -240,6 +241,10 @@ const UsersSetPreferencesParamsPostSchema = {
 					type: 'boolean',
 					nullable: true,
 				},
+				enableMobileRinging: {
+					type: 'boolean',
+					nullable: true,
+				},
 			},
 			required: [],
 			additionalProperties: false,

From c30d2facd7a1f62a9f9e1a604b4d06922e977c53 Mon Sep 17 00:00:00 2001
From: Matheus Barbosa Silva
 <36537004+matheusbsilva137@users.noreply.github.com>
Date: Fri, 25 Aug 2023 18:03:27 -0300
Subject: [PATCH 48/50] chore: Update name or username from SAML even if one of
 them is undefined (#30177)

---
 apps/meteor/app/meteor-accounts-saml/server/lib/SAML.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/app/meteor-accounts-saml/server/lib/SAML.ts b/apps/meteor/app/meteor-accounts-saml/server/lib/SAML.ts
index 3b734e70e233..46edd98dbce2 100644
--- a/apps/meteor/app/meteor-accounts-saml/server/lib/SAML.ts
+++ b/apps/meteor/app/meteor-accounts-saml/server/lib/SAML.ts
@@ -221,8 +221,8 @@ export class SAML {
 			},
 		);
 
-		if (username && fullName && (username !== user.username || fullName !== user.name)) {
-			await saveUserIdentity({ _id: user._id, name: fullName, username });
+		if ((username && username !== user.username) || (fullName && fullName !== user.name)) {
+			await saveUserIdentity({ _id: user._id, name: fullName || undefined, username });
 		}
 
 		// sending token along with the userId

From a5befbab276d9c5cc28d19b03426a57e0200e629 Mon Sep 17 00:00:00 2001
From: Martin Schoeler <martin.schoeler@rocket.chat>
Date: Sat, 26 Aug 2023 01:09:54 -0300
Subject: [PATCH 49/50] chore: swap flaky current chats e2e tests for unit
 tests (#30182)

---
 .../AccountFeaturePreviewPage.spec.tsx        |  27 +-
 .../OmnichannelPreferencesPage.spec.tsx       |  37 +-
 .../currentChats/CurrentChatsPage.spec.tsx    |  17 +
 .../currentChats/CurrentChatsPage.tsx         | 350 ++++++++++++++++++
 .../currentChats/CurrentChatsRoute.tsx        | 349 +----------------
 .../omnichannel-currentChats.spec.ts          |  94 -----
 6 files changed, 392 insertions(+), 482 deletions(-)
 create mode 100644 apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.spec.tsx
 create mode 100644 apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
 delete mode 100644 apps/meteor/tests/e2e/omnichannel/omnichannel-currentChats.spec.ts

diff --git a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.spec.tsx b/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.spec.tsx
index bee1ee862d26..157fa9b7acdf 100644
--- a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.spec.tsx
+++ b/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.spec.tsx
@@ -1,5 +1,4 @@
-import { MockedSettingsContext } from '@rocket.chat/mock-providers/src/MockedSettingsContext';
-import { MockedUserContext } from '@rocket.chat/mock-providers/src/MockedUserContext';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { defaultFeaturesPreview } from '@rocket.chat/ui-client';
 import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
@@ -11,17 +10,19 @@ expect.extend(toHaveNoViolations);
 
 it('should have no a11y violations', async () => {
 	const { container } = render(<AccountFeaturePreviewPage />, {
-		wrapper: ({ children }) => (
-			<MockedSettingsContext settings={{ Accounts_AllowFeaturePreview: true }}>
-				<MockedUserContext
-					userPreferences={{
-						featuresPreview: defaultFeaturesPreview,
-					}}
-				>
-					{children}
-				</MockedUserContext>
-			</MockedSettingsContext>
-		),
+		wrapper: mockAppRoot()
+			.withSetting('Accounts_AllowFeaturePreview', true)
+			.withUserPreference('featurePreview', defaultFeaturesPreview)
+			.withEndpoint('POST', '/v1/users.setPreferences', () => ({
+				user: {
+					_id: 'userId',
+					settings: {
+						profile: {},
+						preferences: {},
+					},
+				},
+			}))
+			.build(),
 	});
 
 	const results = await axe(container);
diff --git a/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.spec.tsx b/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.spec.tsx
index 55a5c7a07744..263d29c2ebdf 100644
--- a/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.spec.tsx
+++ b/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.spec.tsx
@@ -1,8 +1,4 @@
-import { MockedModalContext } from '@rocket.chat/mock-providers/src/MockedModalContext';
-import { MockedServerContext } from '@rocket.chat/mock-providers/src/MockedServerContext';
-import { MockedSettingsContext } from '@rocket.chat/mock-providers/src/MockedSettingsContext';
-import { MockedUserContext } from '@rocket.chat/mock-providers/src/MockedUserContext';
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
 import { render } from '@testing-library/react';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import React from 'react';
@@ -11,36 +7,11 @@ import OmnichannelPreferencesPage from './OmnichannelPreferencesPage';
 
 expect.extend(toHaveNoViolations);
 
-const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			// ✅ turns retries off
-			retry: false,
-		},
-	},
-});
-
 it('should have no a11y violations', async () => {
 	const { container } = render(<OmnichannelPreferencesPage />, {
-		wrapper: ({ children }) => (
-			<QueryClientProvider client={queryClient}>
-				<MockedServerContext
-					handleMethod={(methodName, ..._) => {
-						if (methodName === 'license:getModules') {
-							return ['livechat-enterprise'] as any;
-						}
-
-						throw new Error('Method not mocked');
-					}}
-				>
-					<MockedSettingsContext settings={{}}>
-						<MockedUserContext userPreferences={{}}>
-							<MockedModalContext>{children}</MockedModalContext>
-						</MockedUserContext>
-					</MockedSettingsContext>
-				</MockedServerContext>
-			</QueryClientProvider>
-		),
+		wrapper: mockAppRoot()
+			.withMethod('license:getModules', () => ['livechat-enterprise'])
+			.build(),
 	});
 
 	const results = await axe(container);
diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.spec.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.spec.tsx
new file mode 100644
index 000000000000..b95af28fe6a6
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.spec.tsx
@@ -0,0 +1,17 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+
+import CurrentChatsPage from './CurrentChatsPage';
+
+expect.extend(toHaveNoViolations);
+
+it('should have no a11y violations', async () => {
+	const { container } = render(<CurrentChatsPage onRowClick={() => undefined} />, {
+		wrapper: mockAppRoot().build(),
+	});
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});
diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
new file mode 100644
index 000000000000..013d91707c7c
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx
@@ -0,0 +1,350 @@
+import { Pagination } from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GETLivechatRoomsParams } from '@rocket.chat/rest-typings';
+import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { hashQueryKey } from '@tanstack/react-query';
+import moment from 'moment';
+import type { ComponentProps, ReactElement } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
+
+import { useOmnichannelPriorities } from '../../../../ee/client/omnichannel/hooks/useOmnichannelPriorities';
+import { PriorityIcon } from '../../../../ee/client/omnichannel/priorities/PriorityIcon';
+import GenericNoResults from '../../../components/GenericNoResults';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableCell,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	GenericTableRow,
+} from '../../../components/GenericTable';
+import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
+import { useSort } from '../../../components/GenericTable/hooks/useSort';
+import Page from '../../../components/Page';
+import CustomFieldsList from './CustomFieldsList';
+import FilterByText from './FilterByText';
+import RemoveChatButton from './RemoveChatButton';
+import { useAllCustomFields } from './hooks/useAllCustomFields';
+import { useCurrentChats } from './hooks/useCurrentChats';
+
+type DebouncedParams = {
+	fname: string;
+	guest: string;
+	servedBy: string;
+	department: string;
+	status: string;
+	from: string;
+	to: string;
+	tags: any[];
+};
+
+type CurrentChatQuery = {
+	agents?: string[];
+	offset?: number;
+	roomName?: string;
+	departmentId?: string;
+	open?: boolean;
+	createdAt?: string;
+	closedAt?: string;
+	tags?: string[];
+	onhold?: boolean;
+	customFields?: string;
+	sort: string;
+	count?: number;
+};
+
+type useQueryType = (
+	debouncedParams: DebouncedParams,
+	customFields: { [key: string]: string } | undefined,
+	[column, direction]: [string, 'asc' | 'desc'],
+	current: number,
+	itemsPerPage: 25 | 50 | 100,
+) => GETLivechatRoomsParams;
+
+const sortDir = (sortDir: 'asc' | 'desc'): 1 | -1 => (sortDir === 'asc' ? 1 : -1);
+
+const currentChatQuery: useQueryType = (
+	{ guest, servedBy, department, status, from, to, tags },
+	customFields,
+	[column, direction],
+	current,
+	itemsPerPage,
+) => {
+	const query: CurrentChatQuery = {
+		...(guest && { roomName: guest }),
+		sort: JSON.stringify({
+			[column]: sortDir(direction),
+			ts: column === 'ts' ? sortDir(direction) : undefined,
+		}),
+		...(itemsPerPage && { count: itemsPerPage }),
+		...(current && { offset: current }),
+	};
+
+	if (from || to) {
+		query.createdAt = JSON.stringify({
+			...(from && {
+				start: moment(new Date(from)).set({ hour: 0, minutes: 0, seconds: 0 }).format('YYYY-MM-DDTHH:mm:ss'),
+			}),
+			...(to && {
+				end: moment(new Date(to)).set({ hour: 23, minutes: 59, seconds: 59 }).format('YYYY-MM-DDTHH:mm:ss'),
+			}),
+		});
+	}
+
+	if (status !== 'all') {
+		query.open = status === 'opened' || status === 'onhold';
+		query.onhold = status === 'onhold';
+	}
+	if (servedBy && servedBy !== 'all') {
+		query.agents = [servedBy];
+	}
+	if (department && department !== 'all') {
+		query.departmentId = department;
+	}
+
+	if (tags && tags.length > 0) {
+		query.tags = tags;
+	}
+
+	if (customFields && Object.keys(customFields).length > 0) {
+		const customFieldsQuery = Object.fromEntries(Object.entries(customFields).filter((item) => item[1] !== undefined && item[1] !== ''));
+		if (Object.keys(customFieldsQuery).length > 0) {
+			query.customFields = JSON.stringify(customFieldsQuery);
+		}
+	}
+
+	return query;
+};
+
+const CurrentChatsRoute = ({ id, onRowClick }: { id?: string; onRowClick: (_id: string) => void }): ReactElement => {
+	const { sortBy, sortDirection, setSort } = useSort<'fname' | 'departmentId' | 'servedBy' | 'priorityWeight' | 'ts' | 'lm' | 'open'>(
+		'ts',
+		'desc',
+	);
+	const [customFields, setCustomFields] = useState<{ [key: string]: string }>();
+
+	const t = useTranslation();
+
+	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
+	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
+
+	const { data: allCustomFields } = useAllCustomFields();
+
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+
+	const [params, setParams] = useState({
+		guest: '',
+		fname: '',
+		servedBy: '',
+		status: 'all',
+		department: '',
+		from: '',
+		to: '',
+		tags: [] as string[],
+	});
+
+	const hasCustomFields = useMemo(
+		() => !!allCustomFields?.customFields?.find((customField) => customField.scope === 'room'),
+		[allCustomFields],
+	);
+
+	const query = useMemo(
+		() => currentChatQuery(params, customFields, [sortBy, sortDirection], current, itemsPerPage),
+		[customFields, itemsPerPage, params, sortBy, sortDirection, current],
+	);
+
+	const { data, isLoading, isSuccess } = useCurrentChats(query);
+
+	const [defaultQuery] = useState(hashQueryKey([query]));
+	const queryHasChanged = defaultQuery !== hashQueryKey([query]);
+
+	const onFilter = useMutableCallback((params: DebouncedParams): void => {
+		setParams(params);
+		setCurrent(0);
+	});
+
+	const renderRow = useCallback(
+		({ _id, fname, servedBy, ts, lm, department, open, onHold, priorityWeight }) => {
+			const getStatusText = (open: boolean, onHold: boolean): string => {
+				if (!open) return t('Closed');
+				return onHold ? t('On_Hold_Chats') : t('Open');
+			};
+
+			return (
+				<GenericTableRow key={_id} onClick={(): void => onRowClick(_id)} action>
+					{isPriorityEnabled && (
+						<GenericTableCell withTruncatedText data-qa='current-chats-cell-priority'>
+							<PriorityIcon level={priorityWeight} />
+						</GenericTableCell>
+					)}
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-name'>
+						{fname}
+					</GenericTableCell>
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-department'>
+						{department ? department.name : ''}
+					</GenericTableCell>
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-servedBy'>
+						{servedBy?.username}
+					</GenericTableCell>
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-startedAt'>
+						{moment(ts).format('L LTS')}
+					</GenericTableCell>
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-lastMessage'>
+						{moment(lm).format('L LTS')}
+					</GenericTableCell>
+					<GenericTableCell withTruncatedText data-qa='current-chats-cell-status'>
+						{getStatusText(open, onHold)}
+					</GenericTableCell>
+					{canRemoveClosedChats && !open && <RemoveChatButton _id={_id} />}
+				</GenericTableRow>
+			);
+		},
+		[canRemoveClosedChats, onRowClick, isPriorityEnabled, t],
+	);
+
+	const headers = (
+		<>
+			{isPriorityEnabled && (
+				<GenericTableHeaderCell
+					key='priorityWeight'
+					direction={sortDirection}
+					active={sortBy === 'priorityWeight'}
+					onClick={setSort}
+					sort='priorityWeight'
+					w='x100'
+					alignItems='center'
+				>
+					{t('Priority')}
+				</GenericTableHeaderCell>
+			)}
+			<GenericTableHeaderCell
+				key='fname'
+				direction={sortDirection}
+				active={sortBy === 'fname'}
+				onClick={setSort}
+				sort='fname'
+				data-qa='current-chats-header-name'
+			>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='departmentId'
+				direction={sortDirection}
+				active={sortBy === 'departmentId'}
+				onClick={setSort}
+				sort='departmentId'
+				data-qa='current-chats-header-department'
+			>
+				{t('Department')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='servedBy'
+				direction={sortDirection}
+				active={sortBy === 'servedBy'}
+				onClick={setSort}
+				sort='servedBy'
+				data-qa='current-chats-header-servedBy'
+			>
+				{t('Served_By')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='ts'
+				direction={sortDirection}
+				active={sortBy === 'ts'}
+				onClick={setSort}
+				sort='ts'
+				data-qa='current-chats-header-startedAt'
+			>
+				{t('Started_At')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='lm'
+				direction={sortDirection}
+				active={sortBy === 'lm'}
+				onClick={setSort}
+				sort='lm'
+				data-qa='current-chats-header-lastMessage'
+			>
+				{t('Last_Message')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='open'
+				direction={sortDirection}
+				active={sortBy === 'open'}
+				onClick={setSort}
+				sort='open'
+				w='x100'
+				data-qa='current-chats-header-status'
+			>
+				{t('Status')}
+			</GenericTableHeaderCell>
+			{canRemoveClosedChats && (
+				<GenericTableHeaderCell key='remove' w='x60' data-qa='current-chats-header-remove'>
+					{t('Remove')}
+				</GenericTableHeaderCell>
+			)}
+		</>
+	);
+
+	// TODO: Missing error state
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<Page.Header title={t('Current_Chats')} />
+				<Page.Content>
+					{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && (
+						<FilterByText
+							setFilter={onFilter as ComponentProps<typeof FilterByText>['setFilter']}
+							setCustomFields={setCustomFields}
+							customFields={customFields}
+							hasCustomFields={hasCustomFields}
+						/>
+					)}
+					{isSuccess && data?.rooms.length === 0 && queryHasChanged && <GenericNoResults />}
+					{isSuccess && data?.rooms.length === 0 && !queryHasChanged && (
+						<GenericNoResults
+							icon='discussion'
+							title={t('No_chats_yet')}
+							description={t('No_chats_yet_description')}
+							linkHref='https://go.rocket.chat/omnichannel-docs'
+							linkText={t('Learn_more_about_current_chats')}
+						/>
+					)}
+					{isLoading && (
+						<GenericTable>
+							<GenericTableHeader>{headers}</GenericTableHeader>
+							<GenericTableBody>
+								<GenericTableLoadingTable headerCells={6} />
+							</GenericTableBody>
+						</GenericTable>
+					)}
+					{isSuccess && data?.rooms.length > 0 && (
+						<>
+							<GenericTable>
+								<GenericTableHeader>{headers}</GenericTableHeader>
+								<GenericTableBody data-qa='GenericTableCurrentChatsBody'>
+									{data.rooms.map((room) => renderRow({ ...room }))}
+								</GenericTableBody>
+							</GenericTable>
+							<Pagination
+								divider
+								current={current}
+								itemsPerPage={itemsPerPage}
+								count={data.total}
+								onSetItemsPerPage={setItemsPerPage}
+								onSetCurrent={setCurrent}
+								{...paginationProps}
+							/>
+						</>
+					)}
+				</Page.Content>
+			</Page>
+			{id === 'custom-fields' && hasCustomFields && (
+				<CustomFieldsList setCustomFields={setCustomFields} allCustomFields={allCustomFields?.customFields || []} />
+			)}
+		</Page>
+	);
+};
+
+export default memo(CurrentChatsRoute);
diff --git a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
index a8694fca5c35..7d2694d242c9 100644
--- a/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
+++ b/apps/meteor/client/views/omnichannel/currentChats/CurrentChatsRoute.tsx
@@ -1,301 +1,22 @@
-import { Pagination } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import type { GETLivechatRoomsParams } from '@rocket.chat/rest-typings';
-import { usePermission, useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
-import { hashQueryKey } from '@tanstack/react-query';
-import moment from 'moment';
-import type { ComponentProps, ReactElement } from 'react';
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import { usePermission, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import React, { memo } from 'react';
+import type { ReactElement } from 'react';
 
-import { useOmnichannelPriorities } from '../../../../ee/client/omnichannel/hooks/useOmnichannelPriorities';
-import { PriorityIcon } from '../../../../ee/client/omnichannel/priorities/PriorityIcon';
-import GenericNoResults from '../../../components/GenericNoResults';
-import {
-	GenericTable,
-	GenericTableBody,
-	GenericTableCell,
-	GenericTableHeader,
-	GenericTableHeaderCell,
-	GenericTableLoadingTable,
-	GenericTableRow,
-} from '../../../components/GenericTable';
-import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
-import { useSort } from '../../../components/GenericTable/hooks/useSort';
-import Page from '../../../components/Page';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import Chat from '../directory/chats/Chat';
-import CustomFieldsList from './CustomFieldsList';
-import FilterByText from './FilterByText';
-import RemoveChatButton from './RemoveChatButton';
-import { useAllCustomFields } from './hooks/useAllCustomFields';
-import { useCurrentChats } from './hooks/useCurrentChats';
-
-type DebouncedParams = {
-	fname: string;
-	guest: string;
-	servedBy: string;
-	department: string;
-	status: string;
-	from: string;
-	to: string;
-	tags: any[];
-};
-
-type CurrentChatQuery = {
-	agents?: string[];
-	offset?: number;
-	roomName?: string;
-	departmentId?: string;
-	open?: boolean;
-	createdAt?: string;
-	closedAt?: string;
-	tags?: string[];
-	onhold?: boolean;
-	customFields?: string;
-	sort: string;
-	count?: number;
-};
-
-type useQueryType = (
-	debouncedParams: DebouncedParams,
-	customFields: { [key: string]: string } | undefined,
-	[column, direction]: [string, 'asc' | 'desc'],
-	current: number,
-	itemsPerPage: 25 | 50 | 100,
-) => GETLivechatRoomsParams;
-
-const sortDir = (sortDir: 'asc' | 'desc'): 1 | -1 => (sortDir === 'asc' ? 1 : -1);
-
-const currentChatQuery: useQueryType = (
-	{ guest, servedBy, department, status, from, to, tags },
-	customFields,
-	[column, direction],
-	current,
-	itemsPerPage,
-) => {
-	const query: CurrentChatQuery = {
-		...(guest && { roomName: guest }),
-		sort: JSON.stringify({
-			[column]: sortDir(direction),
-			ts: column === 'ts' ? sortDir(direction) : undefined,
-		}),
-		...(itemsPerPage && { count: itemsPerPage }),
-		...(current && { offset: current }),
-	};
-
-	if (from || to) {
-		query.createdAt = JSON.stringify({
-			...(from && {
-				start: moment(new Date(from)).set({ hour: 0, minutes: 0, seconds: 0 }).format('YYYY-MM-DDTHH:mm:ss'),
-			}),
-			...(to && {
-				end: moment(new Date(to)).set({ hour: 23, minutes: 59, seconds: 59 }).format('YYYY-MM-DDTHH:mm:ss'),
-			}),
-		});
-	}
-
-	if (status !== 'all') {
-		query.open = status === 'opened' || status === 'onhold';
-		query.onhold = status === 'onhold';
-	}
-	if (servedBy && servedBy !== 'all') {
-		query.agents = [servedBy];
-	}
-	if (department && department !== 'all') {
-		query.departmentId = department;
-	}
-
-	if (tags && tags.length > 0) {
-		query.tags = tags;
-	}
-
-	if (customFields && Object.keys(customFields).length > 0) {
-		const customFieldsQuery = Object.fromEntries(Object.entries(customFields).filter((item) => item[1] !== undefined && item[1] !== ''));
-		if (Object.keys(customFieldsQuery).length > 0) {
-			query.customFields = JSON.stringify(customFieldsQuery);
-		}
-	}
-
-	return query;
-};
+import CurrentChatsPage from './CurrentChatsPage';
 
 const CurrentChatsRoute = (): ReactElement => {
-	const { sortBy, sortDirection, setSort } = useSort<'fname' | 'departmentId' | 'servedBy' | 'priorityWeight' | 'ts' | 'lm' | 'open'>(
-		'ts',
-		'desc',
-	);
-	const [customFields, setCustomFields] = useState<{ [key: string]: string }>();
-
-	const t = useTranslation();
 	const id = useRouteParameter('id');
 
 	const canViewCurrentChats = usePermission('view-livechat-current-chats');
-	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
-	const directoryRoute = useRoute('omnichannel-current-chats');
-	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
-
-	const { data: allCustomFields } = useAllCustomFields();
-
-	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
-
-	const [params, setParams] = useState({
-		guest: '',
-		fname: '',
-		servedBy: '',
-		status: 'all',
-		department: '',
-		from: '',
-		to: '',
-		tags: [] as string[],
-	});
-
-	const hasCustomFields = useMemo(
-		() => !!allCustomFields?.customFields?.find((customField) => customField.scope === 'room'),
-		[allCustomFields],
-	);
-
-	const query = useMemo(
-		() => currentChatQuery(params, customFields, [sortBy, sortDirection], current, itemsPerPage),
-		[customFields, itemsPerPage, params, sortBy, sortDirection, current],
-	);
-
-	const { data, isLoading, isSuccess } = useCurrentChats(query);
-
-	const [defaultQuery] = useState(hashQueryKey([query]));
-	const queryHasChanged = defaultQuery !== hashQueryKey([query]);
+	const router = useRouter();
 
 	const onRowClick = useMutableCallback((_id) => {
-		directoryRoute.push({ id: _id });
-	});
-
-	const onFilter = useMutableCallback((params: DebouncedParams): void => {
-		setParams(params);
-		setCurrent(0);
+		router.navigate(`/omnichannel/current/${_id}`);
 	});
 
-	const renderRow = useCallback(
-		({ _id, fname, servedBy, ts, lm, department, open, onHold, priorityWeight }) => {
-			const getStatusText = (open: boolean, onHold: boolean): string => {
-				if (!open) return t('Closed');
-				return onHold ? t('On_Hold_Chats') : t('Open');
-			};
-
-			return (
-				<GenericTableRow key={_id} onClick={(): void => onRowClick(_id)} action>
-					{isPriorityEnabled && (
-						<GenericTableCell withTruncatedText data-qa='current-chats-cell-priority'>
-							<PriorityIcon level={priorityWeight} />
-						</GenericTableCell>
-					)}
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-name'>
-						{fname}
-					</GenericTableCell>
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-department'>
-						{department ? department.name : ''}
-					</GenericTableCell>
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-servedBy'>
-						{servedBy?.username}
-					</GenericTableCell>
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-startedAt'>
-						{moment(ts).format('L LTS')}
-					</GenericTableCell>
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-lastMessage'>
-						{moment(lm).format('L LTS')}
-					</GenericTableCell>
-					<GenericTableCell withTruncatedText data-qa='current-chats-cell-status'>
-						{getStatusText(open, onHold)}
-					</GenericTableCell>
-					{canRemoveClosedChats && !open && <RemoveChatButton _id={_id} />}
-				</GenericTableRow>
-			);
-		},
-		[canRemoveClosedChats, onRowClick, isPriorityEnabled, t],
-	);
-
-	const headers = (
-		<>
-			{isPriorityEnabled && (
-				<GenericTableHeaderCell
-					key='priorityWeight'
-					direction={sortDirection}
-					active={sortBy === 'priorityWeight'}
-					onClick={setSort}
-					sort='priorityWeight'
-					w='x100'
-					alignItems='center'
-				>
-					{t('Priority')}
-				</GenericTableHeaderCell>
-			)}
-			<GenericTableHeaderCell
-				key='fname'
-				direction={sortDirection}
-				active={sortBy === 'fname'}
-				onClick={setSort}
-				sort='fname'
-				data-qa='current-chats-header-name'
-			>
-				{t('Name')}
-			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='departmentId'
-				direction={sortDirection}
-				active={sortBy === 'departmentId'}
-				onClick={setSort}
-				sort='departmentId'
-				data-qa='current-chats-header-department'
-			>
-				{t('Department')}
-			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='servedBy'
-				direction={sortDirection}
-				active={sortBy === 'servedBy'}
-				onClick={setSort}
-				sort='servedBy'
-				data-qa='current-chats-header-servedBy'
-			>
-				{t('Served_By')}
-			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='ts'
-				direction={sortDirection}
-				active={sortBy === 'ts'}
-				onClick={setSort}
-				sort='ts'
-				data-qa='current-chats-header-startedAt'
-			>
-				{t('Started_At')}
-			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='lm'
-				direction={sortDirection}
-				active={sortBy === 'lm'}
-				onClick={setSort}
-				sort='lm'
-				data-qa='current-chats-header-lastMessage'
-			>
-				{t('Last_Message')}
-			</GenericTableHeaderCell>
-			<GenericTableHeaderCell
-				key='open'
-				direction={sortDirection}
-				active={sortBy === 'open'}
-				onClick={setSort}
-				sort='open'
-				w='x100'
-				data-qa='current-chats-header-status'
-			>
-				{t('Status')}
-			</GenericTableHeaderCell>
-			{canRemoveClosedChats && (
-				<GenericTableHeaderCell key='remove' w='x60' data-qa='current-chats-header-remove'>
-					{t('Remove')}
-				</GenericTableHeaderCell>
-			)}
-		</>
-	);
-
 	if (!canViewCurrentChats) {
 		return <NotAuthorizedPage />;
 	}
@@ -305,63 +26,7 @@ const CurrentChatsRoute = (): ReactElement => {
 	}
 
 	// TODO: Missing error state
-	return (
-		<Page flexDirection='row'>
-			<Page>
-				<Page.Header title={t('Current_Chats')} />
-				<Page.Content>
-					{((isSuccess && data?.rooms.length > 0) || queryHasChanged) && (
-						<FilterByText
-							setFilter={onFilter as ComponentProps<typeof FilterByText>['setFilter']}
-							setCustomFields={setCustomFields}
-							customFields={customFields}
-							hasCustomFields={hasCustomFields}
-						/>
-					)}
-					{isSuccess && data?.rooms.length === 0 && queryHasChanged && <GenericNoResults />}
-					{isSuccess && data?.rooms.length === 0 && !queryHasChanged && (
-						<GenericNoResults
-							icon='discussion'
-							title={t('No_chats_yet')}
-							description={t('No_chats_yet_description')}
-							linkHref='https://go.rocket.chat/omnichannel-docs'
-							linkText={t('Learn_more_about_current_chats')}
-						/>
-					)}
-					{isLoading && (
-						<GenericTable>
-							<GenericTableHeader>{headers}</GenericTableHeader>
-							<GenericTableBody>
-								<GenericTableLoadingTable headerCells={6} />
-							</GenericTableBody>
-						</GenericTable>
-					)}
-					{isSuccess && data?.rooms.length > 0 && (
-						<>
-							<GenericTable>
-								<GenericTableHeader>{headers}</GenericTableHeader>
-								<GenericTableBody data-qa='GenericTableCurrentChatsBody'>
-									{data.rooms.map((room) => renderRow({ ...room }))}
-								</GenericTableBody>
-							</GenericTable>
-							<Pagination
-								divider
-								current={current}
-								itemsPerPage={itemsPerPage}
-								count={data.total}
-								onSetItemsPerPage={setItemsPerPage}
-								onSetCurrent={setCurrent}
-								{...paginationProps}
-							/>
-						</>
-					)}
-				</Page.Content>
-			</Page>
-			{id === 'custom-fields' && hasCustomFields && (
-				<CustomFieldsList setCustomFields={setCustomFields} allCustomFields={allCustomFields?.customFields || []} />
-			)}
-		</Page>
-	);
+	return <CurrentChatsPage onRowClick={onRowClick} />;
 };
 
 export default memo(CurrentChatsRoute);
diff --git a/apps/meteor/tests/e2e/omnichannel/omnichannel-currentChats.spec.ts b/apps/meteor/tests/e2e/omnichannel/omnichannel-currentChats.spec.ts
deleted file mode 100644
index fa606025c83e..000000000000
--- a/apps/meteor/tests/e2e/omnichannel/omnichannel-currentChats.spec.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-import { Users } from '../fixtures/userStates';
-import { OmnichannelCurrentChats } from '../page-objects';
-
-test.use({ storageState: Users.admin.state });
-
-test.describe.serial('Current Chats', () => {
-	let pageOmnichannelCurrentChats: OmnichannelCurrentChats;
-
-	test.beforeEach(async ({ page }) => {
-		pageOmnichannelCurrentChats = new OmnichannelCurrentChats(page);
-		await page.goto('/omnichannel/current');
-	});
-
-	test('Render Fields', async () => {
-		await test.step('expect show guest Field', async () => {
-			await expect(pageOmnichannelCurrentChats.guestField).toBeVisible();
-		});
-
-		await test.step('expect show servedBy Field', async () => {
-			await expect(pageOmnichannelCurrentChats.servedByField).toBeVisible();
-		});
-
-		await test.step('expect show status Field', async () => {
-			await expect(pageOmnichannelCurrentChats.statusField).toBeVisible();
-		});
-
-		await test.step('expect show from Field', async () => {
-			await expect(pageOmnichannelCurrentChats.fromField).toBeVisible();
-		});
-
-		await test.step('expect show to Field', async () => {
-			await expect(pageOmnichannelCurrentChats.toField).toBeVisible();
-		});
-
-		await test.step('expect show department Field', async () => {
-			await expect(pageOmnichannelCurrentChats.departmentField).toBeVisible();
-		});
-
-		await test.step('expect show form options button', async () => {
-			await expect(pageOmnichannelCurrentChats.formOptions).toBeVisible();
-		});
-	});
-
-	test('Render Options', async () => {
-		await test.step('expect show form options button', async () => {
-			await pageOmnichannelCurrentChats.doOpenOptions();
-			await expect(pageOmnichannelCurrentChats.formOptions).toBeVisible();
-		});
-
-		await test.step('expect show clear filters option', async () => {
-			await expect(pageOmnichannelCurrentChats.clearFiltersOption).toBeVisible();
-		});
-
-		await test.step('expect show removeAllClosed option', async () => {
-			await expect(pageOmnichannelCurrentChats.removeAllClosedOption).toBeVisible();
-		});
-
-		await test.step('expect not to show custom fields option', async () => {
-			await expect(pageOmnichannelCurrentChats.customFieldsOption).not.toBeVisible();
-		});
-	});
-
-	test('Render Table', async () => {
-		await test.step('expect show table', async () => {
-			await expect(pageOmnichannelCurrentChats.table).toBeVisible();
-		});
-
-		await test.step('expect show name header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderName).toBeVisible();
-		});
-
-		await test.step('expect show department header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderDepartment).toBeVisible();
-		});
-
-		await test.step('expect show servedBy header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderServedBy).toBeVisible();
-		});
-
-		await test.step('expect show startedAt header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderStartedAt).toBeVisible();
-		});
-
-		await test.step('expect show lastMessage header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderLastMessage).toBeVisible();
-		});
-
-		await test.step('expect show form status header', async () => {
-			await expect(pageOmnichannelCurrentChats.tableHeaderStatus).toBeVisible();
-		});
-	});
-});

From 4e83b5ac6f5fd104d96d8746a1274f5a47a44bc8 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Sat, 26 Aug 2023 01:10:14 -0300
Subject: [PATCH 50/50] chore(deps): Bump TypeScript to version 5.2 (#30180)

---
 apps/meteor/ee/server/services/package.json   |   2 +-
 apps/meteor/package.json                      |   2 +-
 ee/apps/account-service/package.json          |   2 +-
 ee/apps/authorization-service/package.json    |   2 +-
 ee/apps/ddp-streamer/package.json             |   2 +-
 ee/apps/omnichannel-transcript/package.json   |   2 +-
 ee/apps/presence-service/package.json         |   2 +-
 ee/apps/queue-worker/package.json             |   2 +-
 ee/apps/stream-hub-service/package.json       |   2 +-
 ee/packages/api-client/package.json           |   2 +-
 ee/packages/ddp-client/package.json           |   2 +-
 ee/packages/omnichannel-services/package.json |   2 +-
 ee/packages/pdf-worker/package.json           |   2 +-
 ee/packages/presence/package.json             |   2 +-
 ee/packages/ui-theming/package.json           |   2 +-
 packages/account-utils/package.json           |   2 +-
 packages/agenda/package.json                  |   2 +-
 packages/base64/package.json                  |   2 +-
 packages/cas-validate/package.json            |   2 +-
 packages/core-services/package.json           |   2 +-
 packages/core-typings/package.json            |   2 +-
 packages/cron/package.json                    |   2 +-
 packages/favicon/package.json                 |   2 +-
 packages/fuselage-ui-kit/package.json         |   2 +-
 packages/gazzodown/package.json               |   2 +-
 packages/i18n/package.json                    |   2 +-
 packages/instance-status/package.json         |   2 +-
 packages/livechat/package.json                |   2 +-
 packages/log-format/package.json              |   2 +-
 packages/logger/package.json                  |   2 +-
 packages/mock-providers/package.json          |   2 +-
 packages/model-typings/package.json           |   2 +-
 packages/models/package.json                  |   2 +-
 packages/node-poplib/package.json             |   2 +-
 packages/random/package.json                  |   2 +-
 packages/release-action/package.json          |   2 +-
 packages/rest-typings/package.json            |   2 +-
 packages/server-fetch/package.json            |   2 +-
 packages/sha256/package.json                  |   2 +-
 packages/tools/package.json                   |   2 +-
 packages/ui-client/package.json               |   2 +-
 packages/ui-composer/package.json             |   2 +-
 packages/ui-contexts/package.json             |   2 +-
 packages/ui-video-conf/package.json           |   2 +-
 packages/uikit-playground/package.json        |   3 +-
 packages/web-ui-registration/package.json     |   2 +-
 yarn.lock                                     | 109 +++++++++---------
 47 files changed, 100 insertions(+), 102 deletions(-)

diff --git a/apps/meteor/ee/server/services/package.json b/apps/meteor/ee/server/services/package.json
index deb8599be0fb..41e456203983 100644
--- a/apps/meteor/ee/server/services/package.json
+++ b/apps/meteor/ee/server/services/package.json
@@ -62,7 +62,7 @@
 		"pino-pretty": "^7.6.1",
 		"pm2": "^5.2.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"volta": {
 		"extends": "../../../package.json"
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 89a5c0002248..dd1af33f6b5c 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -207,7 +207,7 @@
 		"supertest": "^6.2.3",
 		"template-file": "^6.0.1",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"dependencies": {
 		"@babel/runtime": "~7.22.6",
diff --git a/ee/apps/account-service/package.json b/ee/apps/account-service/package.json
index 4df71451f685..0a3240e84900 100644
--- a/ee/apps/account-service/package.json
+++ b/ee/apps/account-service/package.json
@@ -44,7 +44,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/account-service/src/service.js",
 	"files": [
diff --git a/ee/apps/authorization-service/package.json b/ee/apps/authorization-service/package.json
index df1fb3117a8a..4bd4f6942aba 100644
--- a/ee/apps/authorization-service/package.json
+++ b/ee/apps/authorization-service/package.json
@@ -41,7 +41,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/authorization-service/src/service.js",
 	"files": [
diff --git a/ee/apps/ddp-streamer/package.json b/ee/apps/ddp-streamer/package.json
index e10d0f2dfa31..5d3d5002420d 100644
--- a/ee/apps/ddp-streamer/package.json
+++ b/ee/apps/ddp-streamer/package.json
@@ -57,7 +57,7 @@
 		"eslint": "~8.45.0",
 		"pino-pretty": "^7.6.1",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/service.js",
 	"files": [
diff --git a/ee/apps/omnichannel-transcript/package.json b/ee/apps/omnichannel-transcript/package.json
index 2229a5f518b2..df09d6c3e470 100644
--- a/ee/apps/omnichannel-transcript/package.json
+++ b/ee/apps/omnichannel-transcript/package.json
@@ -48,7 +48,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/omnichannel-transcript/src/service.js",
 	"files": [
diff --git a/ee/apps/presence-service/package.json b/ee/apps/presence-service/package.json
index d4419b0fada0..9994b1a560f6 100644
--- a/ee/apps/presence-service/package.json
+++ b/ee/apps/presence-service/package.json
@@ -41,7 +41,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/presence-service/src/service.js",
 	"files": [
diff --git a/ee/apps/queue-worker/package.json b/ee/apps/queue-worker/package.json
index a55f177596d9..0b6ae36f4195 100644
--- a/ee/apps/queue-worker/package.json
+++ b/ee/apps/queue-worker/package.json
@@ -45,7 +45,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/queue-worker/src/service.js",
 	"files": [
diff --git a/ee/apps/stream-hub-service/package.json b/ee/apps/stream-hub-service/package.json
index 27b9ee5b3b2f..4556f3baef94 100644
--- a/ee/apps/stream-hub-service/package.json
+++ b/ee/apps/stream-hub-service/package.json
@@ -43,7 +43,7 @@
 		"@types/polka": "^0.5.4",
 		"eslint": "~8.45.0",
 		"ts-node": "^10.9.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"main": "./dist/ee/apps/stream-hub-service/src/service.js",
 	"files": [
diff --git a/ee/packages/api-client/package.json b/ee/packages/api-client/package.json
index 9e3ebb2ced27..f80f601c0cf3 100644
--- a/ee/packages/api-client/package.json
+++ b/ee/packages/api-client/package.json
@@ -10,7 +10,7 @@
 		"jest": "~29.6.1",
 		"jest-fetch-mock": "^3.0.3",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/ee/packages/ddp-client/package.json b/ee/packages/ddp-client/package.json
index 1d4fe56daed2..63e1f5ab3304 100644
--- a/ee/packages/ddp-client/package.json
+++ b/ee/packages/ddp-client/package.json
@@ -10,7 +10,7 @@
 		"jest": "~29.6.1",
 		"jest-environment-jsdom": "~29.6.1",
 		"jest-websocket-mock": "^2.4.0",
-		"typescript": "~5.1.6",
+		"typescript": "~5.2.2",
 		"ws": "^8.13.0"
 	},
 	"peerDependencies": {
diff --git a/ee/packages/omnichannel-services/package.json b/ee/packages/omnichannel-services/package.json
index 24a87e6a5eb8..b806cc131669 100644
--- a/ee/packages/omnichannel-services/package.json
+++ b/ee/packages/omnichannel-services/package.json
@@ -8,7 +8,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"dependencies": {
 		"@rocket.chat/core-services": "workspace:^",
diff --git a/ee/packages/pdf-worker/package.json b/ee/packages/pdf-worker/package.json
index 92e6b5670891..acd85a23313b 100644
--- a/ee/packages/pdf-worker/package.json
+++ b/ee/packages/pdf-worker/package.json
@@ -16,7 +16,7 @@
 		"jest-environment-jsdom": "~29.6.1",
 		"react-dom": "^18.2.0",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/ee/packages/presence/package.json b/ee/packages/presence/package.json
index 5ba4f4e03338..c41bbb8348cf 100644
--- a/ee/packages/presence/package.json
+++ b/ee/packages/presence/package.json
@@ -13,7 +13,7 @@
 		"babel-jest": "^29.0.3",
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint src",
diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json
index 10c4d69a1a64..b390d1563a53 100644
--- a/ee/packages/ui-theming/package.json
+++ b/ee/packages/ui-theming/package.json
@@ -29,7 +29,7 @@
 		"react": "~17.0.2",
 		"react-docgen-typescript-plugin": "~1.0.5",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/account-utils/package.json b/packages/account-utils/package.json
index 92c0b36cd34a..23423d568acc 100644
--- a/packages/account-utils/package.json
+++ b/packages/account-utils/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/agenda/package.json b/packages/agenda/package.json
index a03087b110b9..dfdeb009c090 100644
--- a/packages/agenda/package.json
+++ b/packages/agenda/package.json
@@ -17,7 +17,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/base64/package.json b/packages/base64/package.json
index 0d078be08f97..36e4d0da04af 100644
--- a/packages/base64/package.json
+++ b/packages/base64/package.json
@@ -21,7 +21,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"volta": {
 		"extends": "../../package.json"
diff --git a/packages/cas-validate/package.json b/packages/cas-validate/package.json
index 202e944e4550..ea7e05a1ba16 100644
--- a/packages/cas-validate/package.json
+++ b/packages/cas-validate/package.json
@@ -8,7 +8,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/core-services/package.json b/packages/core-services/package.json
index 1f293b4780f0..1fa11b75109c 100644
--- a/packages/core-services/package.json
+++ b/packages/core-services/package.json
@@ -15,7 +15,7 @@
 		"jest": "~29.6.1",
 		"mongodb": "^4.12.1",
 		"prettier": "~2.8.8",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/core-typings/package.json b/packages/core-typings/package.json
index 56039036af1a..ab7ab04f80c1 100644
--- a/packages/core-typings/package.json
+++ b/packages/core-typings/package.json
@@ -6,7 +6,7 @@
 		"eslint": "~8.45.0",
 		"mongodb": "^4.12.1",
 		"prettier": "~2.8.8",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/cron/package.json b/packages/cron/package.json
index 0e39f0d5f820..c9fe7d4abe62 100644
--- a/packages/cron/package.json
+++ b/packages/cron/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/favicon/package.json b/packages/favicon/package.json
index 04118b9dcf69..ac0c5ac905b0 100644
--- a/packages/favicon/package.json
+++ b/packages/favicon/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"devDependencies": {
 		"eslint": "~8.45.0",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index 1c99d284b31a..32044e7d4858 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -85,7 +85,7 @@
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "tslib": "^2.5.3",
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   },
   "dependencies": {
     "@rocket.chat/gazzodown": "workspace:^",
diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
index bd19ecff0e38..5fab04dc31ab 100644
--- a/packages/gazzodown/package.json
+++ b/packages/gazzodown/package.json
@@ -46,7 +46,7 @@
 		"react-docgen-typescript-plugin": "~1.0.5",
 		"react-dom": "~17.0.2",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index cc2e037fb663..146e7cc36a15 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -14,7 +14,7 @@
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
 		"tsup": "^6.7.0",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"build": "node ./src/index.mjs",
diff --git a/packages/instance-status/package.json b/packages/instance-status/package.json
index c3df3dc36064..4ffea7a98f59 100644
--- a/packages/instance-status/package.json
+++ b/packages/instance-status/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"mongodb": "^4.12.1",
 		"prettier": "~2.8.8",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/livechat/package.json b/packages/livechat/package.json
index cac4caeac8ec..728920f9097a 100644
--- a/packages/livechat/package.json
+++ b/packages/livechat/package.json
@@ -81,7 +81,7 @@
 		"stylelint-order": "^5.0.0",
 		"svg-loader": "^0.0.2",
 		"terser-webpack-plugin": "~4.2.3",
-		"typescript": "~5.1.6",
+		"typescript": "~5.2.2",
 		"url-loader": "^4.1.1",
 		"webpack": "~4.46.0",
 		"webpack-cli": "~4.10.0",
diff --git a/packages/log-format/package.json b/packages/log-format/package.json
index a3ef425e0b43..dc21d5a87dfe 100644
--- a/packages/log-format/package.json
+++ b/packages/log-format/package.json
@@ -9,7 +9,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 6056fb0f8df6..48968b3d5095 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/mock-providers/package.json b/packages/mock-providers/package.json
index b8253c2290a1..e42f4f3055ba 100644
--- a/packages/mock-providers/package.json
+++ b/packages/mock-providers/package.json
@@ -10,7 +10,7 @@
 		"jest": "~29.6.1",
 		"react": "~17.0.2",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"peerDependencies": {
 		"@tanstack/react-query": "*",
diff --git a/packages/model-typings/package.json b/packages/model-typings/package.json
index dc3e713dbc81..b604ab8d8139 100644
--- a/packages/model-typings/package.json
+++ b/packages/model-typings/package.json
@@ -9,7 +9,7 @@
 		"jest": "~29.6.1",
 		"mongodb": "^4.12.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/models/package.json b/packages/models/package.json
index b9d39ede5da0..ae26168b3c45 100644
--- a/packages/models/package.json
+++ b/packages/models/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"dependencies": {
 		"@rocket.chat/model-typings": "workspace:^"
diff --git a/packages/node-poplib/package.json b/packages/node-poplib/package.json
index 1e96c7c07b0c..dc91a3722016 100644
--- a/packages/node-poplib/package.json
+++ b/packages/node-poplib/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"test": "jest"
diff --git a/packages/random/package.json b/packages/random/package.json
index 459025870e57..15ca3ee0b47a 100644
--- a/packages/random/package.json
+++ b/packages/random/package.json
@@ -23,7 +23,7 @@
 		"jest": "~29.6.1",
 		"jest-environment-jsdom": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"volta": {
 		"extends": "../../package.json"
diff --git a/packages/release-action/package.json b/packages/release-action/package.json
index 1f40f9a12f06..ed96cfdf8437 100644
--- a/packages/release-action/package.json
+++ b/packages/release-action/package.json
@@ -11,7 +11,7 @@
 	"packageManager": "yarn@3.5.1",
 	"devDependencies": {
 		"@types/node": "^16.18.36",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"dependencies": {
 		"@actions/core": "^1.10.0",
diff --git a/packages/rest-typings/package.json b/packages/rest-typings/package.json
index 9f0c9916ec78..54840f12539d 100644
--- a/packages/rest-typings/package.json
+++ b/packages/rest-typings/package.json
@@ -9,7 +9,7 @@
 		"jest-environment-jsdom": "~29.6.1",
 		"mongodb": "^4.12.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/server-fetch/package.json b/packages/server-fetch/package.json
index 42d46e9479d4..8509aa70d558 100644
--- a/packages/server-fetch/package.json
+++ b/packages/server-fetch/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/sha256/package.json b/packages/sha256/package.json
index a6749aab4580..b343cc5cae2d 100644
--- a/packages/sha256/package.json
+++ b/packages/sha256/package.json
@@ -21,7 +21,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"volta": {
 		"extends": "../../package.json"
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 1a264a10fe4e..d9ab70550ce4 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -7,7 +7,7 @@
 		"eslint": "~8.45.0",
 		"jest": "~29.6.1",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
index 26f3e9892e97..21ebbd9a58b7 100644
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@@ -38,7 +38,7 @@
 		"react-dom": "^17.0.2",
 		"react-hook-form": "^7.30.0",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"scripts": {
 		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
index 2833b8f3684e..40c5c052874e 100644
--- a/packages/ui-composer/package.json
+++ b/packages/ui-composer/package.json
@@ -23,7 +23,7 @@
     "jest": "~29.6.1",
     "react-docgen-typescript-plugin": "~1.0.5",
     "ts-jest": "~29.0.5",
-    "typescript": "~5.1.6"
+    "typescript": "~5.2.2"
   },
   "peerDependencies": {
     "@rocket.chat/fuselage": "*",
diff --git a/packages/ui-contexts/package.json b/packages/ui-contexts/package.json
index a015487d0968..5666f9ebd068 100644
--- a/packages/ui-contexts/package.json
+++ b/packages/ui-contexts/package.json
@@ -17,7 +17,7 @@
 		"mongodb": "^4.12.1",
 		"react": "~17.0.2",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6",
+		"typescript": "~5.2.2",
 		"use-sync-external-store": "^1.2.0"
 	},
 	"peerDependencies": {
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
index 059827a6e5d5..5009ab1914ac 100644
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@@ -27,7 +27,7 @@
 		"jest": "~29.6.1",
 		"react-docgen-typescript-plugin": "~1.0.5",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"peerDependencies": {
 		"@rocket.chat/css-in-js": "*",
diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index c8daf4c74692..cb77973ae51a 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -50,8 +50,7 @@
     "eslint": "~8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.1",
-    "prettier": "^2.8.8",
-    "typescript": "~5.1.6",
+    "typescript": "~5.2.2",
     "vite": "^4.3.9"
   },
   "volta": {
diff --git a/packages/web-ui-registration/package.json b/packages/web-ui-registration/package.json
index fb1b25b8acff..48c82c1a02b7 100644
--- a/packages/web-ui-registration/package.json
+++ b/packages/web-ui-registration/package.json
@@ -13,7 +13,7 @@
 		"jest": "~29.6.1",
 		"react-hook-form": "^7.34.2",
 		"ts-jest": "~29.0.5",
-		"typescript": "~5.1.6"
+		"typescript": "~5.2.2"
 	},
 	"peerDependencies": {
 		"@rocket.chat/layout": "*",
diff --git a/yarn.lock b/yarn.lock
index bf92cfcbce40..6d5a76e209bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7196,7 +7196,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     uuid: ^9.0.0
   languageName: unknown
   linkType: soft
@@ -7209,7 +7209,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7228,7 +7228,7 @@ __metadata:
     moment-timezone: ~0.5.43
     mongodb: ^4.12.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7250,7 +7250,7 @@ __metadata:
     split-on-first: ^3.0.0
     strict-uri-encode: ^2.0.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7318,7 +7318,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7334,7 +7334,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7347,7 +7347,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7376,7 +7376,7 @@ __metadata:
     jest: ~29.6.1
     mongodb: ^4.12.1
     prettier: ~2.8.8
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7392,7 +7392,7 @@ __metadata:
     eslint: ~8.45.0
     mongodb: ^4.12.1
     prettier: ~2.8.8
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7409,7 +7409,7 @@ __metadata:
     jest: ~29.6.1
     mongodb: ^4.12.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7484,7 +7484,7 @@ __metadata:
     jest: ~29.6.1
     jest-environment-jsdom: ~29.6.1
     jest-websocket-mock: ^2.4.0
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     ws: ^8.13.0
   peerDependencies:
     "@rocket.chat/emitter": "*"
@@ -7532,7 +7532,7 @@ __metadata:
     polka: ^0.5.2
     sharp: ^0.30.7
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     underscore: ^1.13.6
     uuid: ^7.0.3
     ws: ^8.8.1
@@ -7571,7 +7571,7 @@ __metadata:
   resolution: "@rocket.chat/favicon@workspace:packages/favicon"
   dependencies:
     eslint: ~8.45.0
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7725,7 +7725,7 @@ __metadata:
     react-dom: ^17.0.2
     rimraf: ^3.0.2
     tslib: ^2.5.3
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/apps-engine": "*"
     "@rocket.chat/eslint-config": "*"
@@ -7817,7 +7817,7 @@ __metadata:
     react-dom: ~17.0.2
     react-error-boundary: ^3.1.4
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/core-typings": 6.3.0
     "@rocket.chat/css-in-js": "*"
@@ -7847,7 +7847,7 @@ __metadata:
     jest: ~29.6.1
     ts-jest: ~29.0.5
     tsup: ^6.7.0
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7867,7 +7867,7 @@ __metadata:
     eslint: ~8.45.0
     mongodb: ^4.12.1
     prettier: ~2.8.8
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -7962,7 +7962,7 @@ __metadata:
     stylelint-order: ^5.0.0
     svg-loader: ^0.0.2
     terser-webpack-plugin: ~4.2.3
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     url-loader: ^4.1.1
     webpack: ~4.46.0
     webpack-cli: ~4.10.0
@@ -7986,7 +7986,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8000,7 +8000,7 @@ __metadata:
     jest: ~29.6.1
     pino: ^8.15.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8405,7 +8405,7 @@ __metadata:
     turndown: ^7.1.2
     twilio: ^3.76.1
     twit: ^2.2.11
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     ua-parser-js: ^1.0.35
     underscore: ^1.13.6
     universal-perf-hooks: ^1.0.1
@@ -8433,7 +8433,7 @@ __metadata:
     jest: ~29.6.1
     react: ~17.0.2
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@tanstack/react-query": "*"
     react: "*"
@@ -8451,7 +8451,7 @@ __metadata:
     jest: ~29.6.1
     mongodb: ^4.12.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8464,7 +8464,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8506,7 +8506,7 @@ __metadata:
     mongodb: ^4.12.1
     pino: ^8.15.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8545,7 +8545,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8596,7 +8596,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8608,7 +8608,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8640,7 +8640,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8662,7 +8662,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     mongodb: ^4.12.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8707,7 +8707,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8724,7 +8724,7 @@ __metadata:
     jest: ~29.6.1
     jest-environment-jsdom: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8743,7 +8743,7 @@ __metadata:
     remark-parse: 9.0.0
     remark-stringify: 9.0.1
     semver: ^7.5.2
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     unified: 9.2.2
   languageName: unknown
   linkType: soft
@@ -8765,7 +8765,7 @@ __metadata:
     jest-environment-jsdom: ~29.6.1
     mongodb: ^4.12.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8795,7 +8795,7 @@ __metadata:
     node-fetch: 2.3.0
     proxy-from-env: ^1.1.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8811,7 +8811,7 @@ __metadata:
     eslint: ~8.45.0
     jest: ~29.6.1
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8845,7 +8845,7 @@ __metadata:
     pino: ^8.15.0
     polka: ^0.5.2
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8914,7 +8914,7 @@ __metadata:
     jest: ~29.6.1
     moment-timezone: ^0.5.43
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   languageName: unknown
   linkType: soft
 
@@ -8957,7 +8957,7 @@ __metadata:
     react-dom: ^17.0.2
     react-hook-form: ^7.30.0
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/css-in-js": "*"
     "@rocket.chat/fuselage": "*"
@@ -8992,7 +8992,7 @@ __metadata:
     jest: ~29.6.1
     react-docgen-typescript-plugin: ~1.0.5
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/fuselage": "*"
     "@rocket.chat/icons": "*"
@@ -9019,7 +9019,7 @@ __metadata:
     mongodb: ^4.12.1
     react: ~17.0.2
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     use-sync-external-store: ^1.2.0
   peerDependencies:
     "@rocket.chat/core-typings": "workspace:^"
@@ -9071,7 +9071,7 @@ __metadata:
     react: ~17.0.2
     react-docgen-typescript-plugin: ~1.0.5
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/css-in-js": "*"
     "@rocket.chat/fuselage": "*"
@@ -9110,7 +9110,7 @@ __metadata:
     jest: ~29.6.1
     react-docgen-typescript-plugin: ~1.0.5
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/css-in-js": "*"
     "@rocket.chat/fuselage": "*"
@@ -9164,8 +9164,7 @@ __metadata:
     react-router-dom: ^6.11.2
     react-split-pane: ^0.1.92
     react-virtuoso: ^4.3.10
-    reactflow: ^11.7.2
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     use-subscription: ^1.8.0
     vite: ^4.3.9
   languageName: unknown
@@ -9185,7 +9184,7 @@ __metadata:
     jest: ~29.6.1
     react-hook-form: ^7.34.2
     ts-jest: ~29.0.5
-    typescript: ~5.1.6
+    typescript: ~5.2.2
   peerDependencies:
     "@rocket.chat/layout": "*"
     "@rocket.chat/ui-contexts": 1.0.0
@@ -33768,7 +33767,7 @@ __metadata:
     sodium-native: ^3.3.0
     sodium-plus: ^0.9.0
     ts-node: ^10.9.1
-    typescript: ~5.1.6
+    typescript: ~5.2.2
     uuid: ^8.3.2
     ws: ^8.8.1
   languageName: unknown
@@ -37299,23 +37298,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~5.1.6":
-  version: 5.1.6
-  resolution: "typescript@npm:5.1.6"
+"typescript@npm:~5.2.2":
+  version: 5.2.2
+  resolution: "typescript@npm:5.2.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: b2f2c35096035fe1f5facd1e38922ccb8558996331405eb00a5111cc948b2e733163cc22fab5db46992aba7dd520fff637f2c1df4996ff0e134e77d3249a7350
+  checksum: 7912821dac4d962d315c36800fe387cdc0a6298dba7ec171b350b4a6e988b51d7b8f051317786db1094bd7431d526b648aba7da8236607febb26cf5b871d2d3c
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@~5.1.6#~builtin<compat/typescript>":
-  version: 5.1.6
-  resolution: "typescript@patch:typescript@npm%3A5.1.6#~builtin<compat/typescript>::version=5.1.6&hash=f456af"
+"typescript@patch:typescript@~5.2.2#~builtin<compat/typescript>":
+  version: 5.2.2
+  resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=f456af"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 21e88b0a0c0226f9cb9fd25b9626fb05b4c0f3fddac521844a13e1f30beb8f14e90bd409a9ac43c812c5946d714d6e0dee12d5d02dfc1c562c5aacfa1f49b606
+  checksum: 07106822b4305de3f22835cbba949a2b35451cad50888759b6818421290ff95d522b38ef7919e70fb381c5fe9c1c643d7dea22c8b31652a717ddbd57b7f4d554
   languageName: node
   linkType: hard