'init'

app/views/Chat/Chat.tsx

@@ -0,0 +1,42 @@
+import { ChatHeader } from "@/app/components/ChatHeader/ChatHeader";
+import { DialogInput } from "@/app/components/DialogInput/DialogInput";
+import { Messages } from "@/app/components/Messages/Messages";
+import { DialogProvider } from "@/app/providers/DialogProvider/DialogProvider";
+import { Flex } from "@mantine/core";
+import { useParams } from "react-router-dom";
+import { useRosettaBreakpoints } from "@/app/hooks/useRosettaBreakpoints";
+import { useEffect } from "react";
+import { useViewPanelsState, ViewPanelsState } from "@/app/hooks/useViewPanelsState";
+import { GroupHeader } from "@/app/components/GroupHeader/GroupHeader";
+import { useGroups } from "@/app/providers/DialogProvider/useGroups";
+
+export function Chat() {
+    const params = useParams();
+    const dialog = params.id || "DELETED";
+    const {lg} = useRosettaBreakpoints();
+    const [__, setViewState] = useViewPanelsState();
+    const {hasGroup} = useGroups();
+
+    useEffect(() => {
+        if(!lg){
+            setViewState(ViewPanelsState.DIALOGS_PANEL_HIDE);
+            return;
+        }
+        if(lg){
+            setViewState(ViewPanelsState.DIALOGS_PANEL_SHOW);
+        }
+    }, [lg]);
+    
+    return (<>
+        <DialogProvider dialog={dialog} key={dialog}>
+            <Flex direction={'column'} justify={'space-between'} h={'100%'}>
+                {/* Group Header */}
+                {hasGroup(dialog) && <GroupHeader></GroupHeader>}
+                {/* Dialog peer to peer Header */}
+                {!hasGroup(dialog) && <ChatHeader></ChatHeader>}
+                <Messages></Messages>
+                <DialogInput key={dialog}></DialogInput>
+            </Flex>
+        </DialogProvider>
+    </>);
+}