Create /chat page with existing social features

packages/client-core/package.json

@@ -78,7 +78,14 @@
     "tick-tock": "^1.0.0",
     "typescript": "5.0.2",
     "util": "^0.12.5",
-    "uuid": "9.0.0"
+    "uuid": "9.0.0",
+    "pino": "^8.11.0",
+    "pino-pretty": "^10.0.0",
+    "postcss": "^8.4.21",
+    "qrcode.react": "^3.1.0",
+    "react-icons": "^4.9.0",
+    "react-json-view": "^1.21.3",
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
     "@emotion/react": "11.10.6",

packages/client/src/main.tsx

@@ -39,7 +39,8 @@ const Engine = lazy(() => import('./engine'))
 
 const AppPage = lazy(() => import('./pages/_app'))
 const AdminPage = lazy(() => import('./pages/admin'))
-const TailwindPage = lazy(() => import('./pages/_app_tw'))
+const CapturePage = lazy(() => import('./pages/_app_tw'))
+const ChatPage = lazy(() => import('./pages/_app_chat'))
 
 const options = {
   immediate: true,
@@ -93,7 +94,16 @@ const App = () => {
             path={'/capture/*'}
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
-                <TailwindPage />
+                <CapturePage />
+              </Suspense>
+            }
+          />
+          <Route
+            key={'chat'}
+            path={'/chat/*'}
+            element={
+              <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
+                <ChatPage />
               </Suspense>
             }
           />

packages/client/src/pages/_app_chat.tsx

@@ -0,0 +1,149 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+// import * as chapiWalletPolyfill from 'credential-handler-polyfill'
+import { SnackbarProvider } from 'notistack'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  AdminClientSettingsState,
+  ClientSettingService
+} from '@etherealengine/client-core/src/admin/services/Setting/ClientSettingService'
+import { AdminCoilSettingService } from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
+import { API } from '@etherealengine/client-core/src/API'
+import { initGA, logPageView } from '@etherealengine/client-core/src/common/analytics'
+import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags'
+// import { defaultAction } from '@etherealengine/client-core/src/common/components/NotificationActions'
+import {
+  NotificationAction,
+  NotificationActions
+} from '@etherealengine/client-core/src/common/services/NotificationService'
+import { ProjectService, ProjectState } from '@etherealengine/client-core/src/common/services/ProjectService'
+import Debug from '@etherealengine/client-core/src/components/Debug'
+import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
+import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
+import { matches } from '@etherealengine/engine/src/common/functions/MatchesUtils'
+import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
+import { addActionReceptor, getMutableState, removeActionReceptor, useHookstate } from '@etherealengine/hyperflux'
+import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
+
+import EngineTW from '../engine_tw'
+import ChatComp from '../route/chat'
+import { ThemeContextProvider } from '../themes/themeContext'
+
+const AppPage = () => {
+  const notistackRef = useRef<SnackbarProvider>()
+  const authState = useHookstate(getMutableState(AuthState))
+  const selfUser = authState.user
+  const clientSettingState = useHookstate(getMutableState(AdminClientSettingsState))
+  const [projectComponents, setProjectComponents] = useState<Array<any>>([])
+  const [fetchedProjectComponents, setFetchedProjectComponents] = useState(false)
+  const projectState = useHookstate(getMutableState(ProjectState))
+
+  const initApp = useCallback(() => {
+    initGA()
+    logPageView()
+  }, [])
+
+  useEffect(() => {
+    const receptor = (action): any => {
+      // @ts-ignore
+      matches(action).when(NotificationAction.notify.matches, (action) => {
+        AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.alert, 0.5)
+        notistackRef.current?.enqueueSnackbar(action.message, {
+          variant: action.options.variant,
+          action: NotificationActions[action.options.actionType ?? 'default']
+        })
+      })
+    }
+    addActionReceptor(receptor)
+
+    return () => {
+      removeActionReceptor(receptor)
+    }
+  }, [])
+
+  useEffect(initApp, [])
+
+  // useEffect(() => {
+  //   chapiWalletPolyfill
+  //     .loadOnce()
+  //     .then(() => console.log('CHAPI wallet polyfill loaded.'))
+  //     .catch((e) => console.error('Error loading polyfill:', e))
+  // }, [])
+
+  useEffect(() => {
+    if (selfUser?.id.value && projectState.updateNeeded.value) {
+      ProjectService.fetchProjects()
+      if (!fetchedProjectComponents) {
+        setFetchedProjectComponents(true)
+        API.instance.client
+          .service('projects')
+          .find()
+          .then((projects) => {
+            loadWebappInjection(projects).then((result) => {
+              setProjectComponents(result)
+            })
+          })
+      }
+    }
+  }, [selfUser, projectState.updateNeeded.value])
+
+  useEffect(() => {
+    Engine.instance.userId = selfUser.id.value
+  }, [selfUser.id])
+
+  useEffect(() => {
+    authState.isLoggedIn.value && AdminCoilSettingService.fetchCoil()
+  }, [authState.isLoggedIn])
+
+  useEffect(() => {
+    if (clientSettingState?.updateNeeded?.value) ClientSettingService.fetchClientSettings()
+  }, [clientSettingState?.updateNeeded?.value])
+
+  return (
+    <>
+      <div className="w-full h-full container mx-auto overflow-y-scroll pointer-events-auto">
+        <ChatComp />
+      </div>
+      {projectComponents.map((Component, i) => (
+        <Component key={i} />
+      ))}
+    </>
+  )
+}
+
+const TailwindPage = () => {
+  return (
+    <EngineTW>
+      <ThemeContextProvider>
+        <AppPage />
+        <Debug />
+      </ThemeContextProvider>
+    </EngineTW>
+  )
+}
+
+export default TailwindPage

packages/client/src/pages/chat/chat.tsx

@@ -0,0 +1,51 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+
+import { ChatSection } from '@etherealengine/ui/src/components/Chat/ChatSection'
+import { Media } from '@etherealengine/ui/src/components/Chat/Media'
+import { Message } from '@etherealengine/ui/src/components/Chat/Message'
+import { Sidebar } from '@etherealengine/ui/src/components/Chat/Sidebar'
+
+import './index.css'
+
+import EngineTW from '@etherealengine/client/src/engine_tw'
+import { ThemeContextProvider } from '@etherealengine/client/src/themes/themeContext'
+
+export default function Chat() {
+  return (
+    <EngineTW>
+      <ThemeContextProvider>
+        <div className="w-full h-[100%] flex bg-slate-600 pointer">
+          <Sidebar />
+          <ChatSection />
+          <Message />
+          <Media />
+        </div>
+      </ThemeContextProvider>
+    </EngineTW>
+  )
+}

packages/client/src/pages/chat/index.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.hide-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.pointer {
+  pointer-events: auto
+}