feat(chat): add quick-apps-editor route (#2164)

Co-authored-by: Magomed-Elbi Dzhukalaev <magomed-elbi_dzhukalaev@epam.com>

apps/chat/src/components/QuickApps/QuickApps.tsx

@@ -0,0 +1,7 @@
+export const QuickApps = () => {
+  return (
+    <div className="size-full max-w-[1000px] overflow-auto bg-layer-2 p-5">
+      {/* QUICK APPS EDITOR */}
+    </div>
+  );
+};

apps/chat/src/components/QuickApps/QuickAppsHeader.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+
+import { ApiUtils } from '@/src/utils/server/api';
+
+import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
+import { SettingsSelectors } from '@/src/store/settings/settings.reducers';
+import { UIActions, UISelectors } from '@/src/store/ui/ui.reducers';
+
+import { User } from '@/src/components/Header/User/User';
+import { SettingDialog } from '@/src/components/Settings/SettingDialog';
+
+import { Feature } from '@epam/ai-dial-shared';
+import cssEscape from 'css.escape';
+
+export const QuickAppsHeader = () => {
+  const dispatch = useAppDispatch();
+
+  const isUserSettingsOpen = useAppSelector(
+    UISelectors.selectIsUserSettingsOpen,
+  );
+  const isOverlay = useAppSelector(SettingsSelectors.selectIsOverlay);
+  const customLogo = useAppSelector(UISelectors.selectCustomLogo);
+
+  const isCustomLogoFeatureEnabled = useAppSelector((state) =>
+    SettingsSelectors.isFeatureEnabled(state, Feature.CustomLogo),
+  );
+
+  const customLogoUrl =
+    isCustomLogoFeatureEnabled &&
+    customLogo &&
+    `api/${ApiUtils.encodeApiUrl(customLogo)}`;
+
+  const handleCloseUserSettings = () => {
+    dispatch(UIActions.setIsUserSettingsOpen(false));
+  };
+
+  return (
+    <div
+      className={classNames(
+        'z-40 flex w-full border-b border-tertiary bg-layer-3',
+        isOverlay ? 'min-h-[36px]' : 'min-h-[48px]',
+      )}
+      data-qa="header"
+    >
+      <div className="flex grow justify-between">
+        <span
+          className={classNames(
+            'mx-auto min-w-[110px] bg-contain bg-center bg-no-repeat md:ml-5 lg:bg-left',
+          )}
+          style={{
+            backgroundImage: customLogoUrl
+              ? `url(${cssEscape(customLogoUrl)})`
+              : `var(--app-logo)`,
+          }}
+        ></span>
+        <div className="w-[48px] max-md:border-l max-md:border-tertiary md:w-auto">
+          <User />
+        </div>
+      </div>
+
+      <SettingDialog
+        open={isUserSettingsOpen}
+        onClose={handleCloseUserSettings}
+      />
+    </div>
+  );
+};

apps/chat/src/pages/quick-apps-editor/index.tsx

@@ -0,0 +1,18 @@
+import { getCommonPageProps } from '@/src/utils/server/get-common-page-props';
+
+import { QuickApps } from '@/src/components/QuickApps/QuickApps';
+import { QuickAppsHeader } from '@/src/components/QuickApps/QuickAppsHeader';
+
+export default function QuickAppsEditor() {
+  return (
+    <div className="flex size-full flex-col">
+      <QuickAppsHeader />
+
+      <div className="relative flex h-screen w-full justify-center overflow-hidden">
+        <QuickApps />
+      </div>
+    </div>
+  );
+}
+
+export const getServerSideProps = getCommonPageProps;