Skip to content

Commit

Permalink
feat(chat): add quick-apps-editor route (#2164)
Browse files Browse the repository at this point in the history
Co-authored-by: Magomed-Elbi Dzhukalaev <magomed-elbi_dzhukalaev@epam.com>
  • Loading branch information
Gimir and Magomed-Elbi Dzhukalaev authored Sep 20, 2024
1 parent 7c43fd5 commit 00f0f4c
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 0 deletions.
7 changes: 7 additions & 0 deletions apps/chat/src/components/QuickApps/QuickApps.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
67 changes: 67 additions & 0 deletions apps/chat/src/components/QuickApps/QuickAppsHeader.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
18 changes: 18 additions & 0 deletions apps/chat/src/pages/quick-apps-editor/index.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 00f0f4c

Please sign in to comment.