From 5c7fbdceac090bff1cdd628cdf5cd57d7670f882 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Fri, 27 Oct 2023 12:06:25 +0300
Subject: [PATCH] Merge pull request #15347 from
 overleaf/ii-ide-page-prototype-chat-pane

Chat for React IDE page

GitOrigin-RevId: 2a34e754a810fd6ef07e4213ad1d31d5e8e54b4c
---
 .../web/frontend/js/features/chat/context/chat-context.jsx   | 3 ++-
 .../js/features/ide-react/components/layout/ide-page.tsx     | 4 ++--
 .../ide-react/scope-adapters/layout-context-adapter.ts       | 2 +-
 services/web/frontend/stylesheets/app/editor/ide-react.less  | 5 +++++
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/chat/context/chat-context.jsx b/services/web/frontend/js/features/chat/context/chat-context.jsx
index cc6e744c24..a3ea07dd22 100644
--- a/services/web/frontend/js/features/chat/context/chat-context.jsx
+++ b/services/web/frontend/js/features/chat/context/chat-context.jsx
@@ -16,6 +16,7 @@ import { getJSON, postJSON } from '../../../infrastructure/fetch-json'
 import { appendMessage, prependMessages } from '../utils/message-list-appender'
 import useBrowserWindow from '../../../shared/hooks/use-browser-window'
 import { useLayoutContext } from '../../../shared/context/layout-context'
+import { useIdeContext } from '@/shared/context/ide-context'
 
 const PAGE_SIZE = 50
 
@@ -226,7 +227,7 @@ export function ChatProvider({ children }) {
   }, [])
 
   // Handling receiving messages over the socket
-  const socket = window._ide?.socket
+  const { socket } = useIdeContext()
   useEffect(() => {
     if (!socket) return
 
diff --git a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx
index f1c9f10595..ebbd51f76d 100644
--- a/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx
+++ b/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx
@@ -3,12 +3,12 @@ import useEventListener from '@/shared/hooks/use-event-listener'
 import { useCallback, useEffect, useState } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
 import { useLayoutContext } from '@/shared/context/layout-context'
-import PlaceholderChat from '@/features/ide-react/components/layout/placeholder/placeholder-chat'
 import PlaceholderHistory from '@/features/ide-react/components/layout/placeholder/placeholder-history'
 import MainLayout from '@/features/ide-react/components/layout/main-layout'
 import { EditorAndSidebar } from '@/features/ide-react/components/editor-and-sidebar'
 import EditorLeftMenu from '@/features/editor-left-menu/components/editor-left-menu'
 import EditorNavigationToolbar from '@/features/ide-react/components/editor-navigation-toolbar'
+import ChatPane from '@/features/chat/components/chat-pane'
 import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-event-tracking'
 import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners'
 
@@ -57,7 +57,7 @@ export default function IdePage() {
       <EditorLeftMenu />
       <MainLayout
         headerContent={<EditorNavigationToolbar />}
-        chatContent={<PlaceholderChat />}
+        chatContent={<ChatPane />}
         mainContent={mainContent}
         chatIsOpen={chatIsOpen}
         shouldPersistLayout
diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts
index 9214988d77..bbea6b814d 100644
--- a/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts
+++ b/services/web/frontend/js/features/ide-react/scope-adapters/layout-context-adapter.ts
@@ -10,7 +10,7 @@ export default function populateLayoutScope(store: ReactScopeValueStore) {
   store.set('toggleHistory', () => {})
 
   store.set('openFile', null)
-  store.set('ui.chatOpen', false)
+  store.persisted('ui.chatOpen', false, 'ui.chatOpen')
   store.persisted('ui.reviewPanelOpen', false, reviewPanelStorageKey)
   store.set('ui.leftMenuShown', false)
   store.set('ui.pdfLayout', 'sideBySide')
diff --git a/services/web/frontend/stylesheets/app/editor/ide-react.less b/services/web/frontend/stylesheets/app/editor/ide-react.less
index ec513769cc..5e63de5f66 100644
--- a/services/web/frontend/stylesheets/app/editor/ide-react.less
+++ b/services/web/frontend/stylesheets/app/editor/ide-react.less
@@ -7,6 +7,11 @@
     left: 0;
     right: 0;
   }
+
+  .chat {
+    position: relative;
+    height: 100%;
+  }
 }
 
 .ide-react-main {