adding a new expanded mode to the playground

website/src/pages/playground.css

@@ -1,5 +1,6 @@
 .playground {
   background: var(--playground-background);
+  overflow-x: hidden !important;
 }
 
 .playground-panorama {
@@ -14,6 +15,8 @@
   color: var(--start-header-color);
   margin-top: 30px;
   margin-bottom: 60px;
+  position: relative;
+  width: 100vw;
 }
 
 #playground-chat-list-parent {
@@ -40,10 +43,19 @@
   display: flex;
 }
 
+.playground-chat-list-expanded {
+  display: grid;
+  width: 90vw !important;
+}
+
 #playground-chat-list:empty {
   height: 440px;
 }
 
+.playground-chat-list-expanded:empty {
+  height: 20vw !important;
+}
+
 #playground-chat-list::-webkit-scrollbar {
   height: 8px;
 }
@@ -76,6 +88,15 @@
   z-index: 100;
 }
 
+.playground-expanded > #playground-title {
+  margin-top: 0px !important;
+  margin-bottom: 10px !important;
+}
+
+.playground-expanded > #playground-title > b {
+  opacity: 0;
+}
+
 @media (max-height: 800px) {
   .playground-panorama {
     padding-bottom: 0px;
@@ -105,13 +126,6 @@
 
 @media (max-height: 700px) {
   .playground-grid > #playground-title,
-  .playground-panorama > #playground-title {
-    margin-top: 0px;
-    margin-bottom: 25px;
-  }
-}
-
-@media (max-height: 670px) {
   .playground-panorama > #playground-title {
     margin-top: 0px;
     margin-bottom: 10px;
@@ -152,7 +166,7 @@
     overflow: unset;
   }
   .playground-panorama {
-    padding-bottom: 60px;
+    padding-bottom: 5px;
   }
   .playground-chat-list-panorama {
     display: block;

website/src/pages/playground.jsx

@@ -15,23 +15,26 @@ import React from 'react';
 import './playground.css';
 
 // Different shadow/bubble color depending on service used
-// Video to show off how it works
 
 // TO-DO - when the user is typing in one chat and hits tab - focus next
-const playgroundConfig = {components: [{connect: {demo: true}, messages: [], description: ''}], isFirstTime: true};
+const playgroundConfig = {
+  components: [{connect: {demo: true}, messages: [], description: ''}],
+  isFirstTime: true,
+  viewMode: 1,
+};
 const modalCollapseStates = {optionalParams: true, code: true};
 // state kept here as the chat components are not re-rendered when something happens in other components, hence
 // they do not have a reference to the latest state
 const chatComponents = [];
 const latestChatIndex = {index: 0};
 // because components are not refreshed, they will not have access to the latest state, hence this is an alternative to reference it
-const view = {isGrid: true, isBeingCreated: true, isKeyVisible: false};
+const view = {isBeingCreated: true, isKeyVisible: false};
 
 export default function Playground() {
   // this is a workaround to force component list render
   const [, refreshList] = React.useState(-1);
+  const [viewMode, setViewMode] = React.useState(1); // need state here for reactiveness
   const [editingChatRef, setEditingChatRef] = React.useState(null);
-  const [isGrid, setIsGrid] = React.useState(view.isGrid);
   const [isIntroModalDisplayed, setIsIntroModalDisplayed] = React.useState(false);
   const [isWaitingToCloseIntroModal, setIsWaitingToCloseIntroModal] = React.useState(false);
   const componentListRef = React.useRef(null);
@@ -40,6 +43,7 @@ export default function Playground() {
     window.addEventListener('beforeunload', recordConfig); // before leaving the website
     setTimeout(() => {
       if (localStorage.getItem('deep-chat-config')) overwriteDefaultConfig();
+      setViewMode(playgroundConfig.viewMode);
       if (playgroundConfig.isFirstTime) {
         setTimeout(() => {
           setIsIntroModalDisplayed(true);
@@ -78,12 +82,15 @@ export default function Playground() {
   };
 
   function scrollToNewChat(index, wasCloned, elementRef) {
-    if (view.isGrid) {
+    if (playgroundConfig.viewMode === 1) {
       if (wasCloned) {
         if (index - 1 !== 0 && isChatAtEnd(index - 1)) elementRef.scrollIntoView();
       } else {
         window.scrollTo({left: 0, top: document.body.scrollHeight, behavior: 'smooth'});
       }
+    } else if (playgroundConfig.viewMode === 3 && chatComponents.length > 1) {
+      const targetIndex = wasCloned ? index : chatComponents.length - 1;
+      window.scrollTo({left: 0, top: chatComponents[targetIndex]?.ref.current.getOffsetTop() + 55, behavior: 'smooth'});
     }
     if (wasCloned) {
       if (!elementRef.isVisibleInParent(componentListRef.current)) {
@@ -96,7 +103,7 @@ export default function Playground() {
 
   function isChatAtEnd(index) {
     let isAtEnd = !index || chatComponents.length === index;
-    if (!isAtEnd && view.isGrid) {
+    if (!isAtEnd && playgroundConfig.viewMode === 1) {
       const chatInTarget = chatComponents[index]?.ref.current;
       const chatAfterTarget = chatComponents[index + 1]?.ref.current;
       isAtEnd = !chatAfterTarget || chatAfterTarget.getOffsetTop() !== chatInTarget.getOffsetTop(); // checks if on same row
@@ -132,9 +139,11 @@ export default function Playground() {
     }, timeout);
   }
 
+  // prettier-ignore
   function removeComponent(componentToBeRemoved) {
     componentToBeRemoved.current.scaleOut();
-    if (view.isGrid) componentToBeRemoved.current.reduceHeightWhenLastOnRow();
+    if (playgroundConfig.viewMode === 1) componentToBeRemoved.current.reduceHeightWhenLastOnRow();
+    if (playgroundConfig.viewMode === 3) componentToBeRemoved.current.reduceHeight(chatComponents.length === 1);
     const componentIndex = playgroundConfig.components.findIndex(
       (component) => component === componentToBeRemoved.current.config
     );
@@ -145,8 +154,8 @@ export default function Playground() {
         const index = chatComponents.findIndex((component) => component.ref === componentToBeRemoved);
         chatComponents.splice(index, 1);
         refreshList((latestChatIndex.index += 1));
-      }, 400);
-    }, 300);
+      }, playgroundConfig.viewMode === 3 ? 300 : 400);
+    }, playgroundConfig.viewMode === 3 ? 0 : 300);
   }
 
   function cloneComponent(componentToBeCloned) {
@@ -156,14 +165,12 @@ export default function Playground() {
   }
 
   function toggleLayout() {
-    setIsGrid((previousValue) => !previousValue);
-    view.isGrid = !view.isGrid;
+    const newMode = (viewMode % 3) + 1;
+    playgroundConfig.viewMode = newMode;
+    setViewMode(newMode);
   }
 
   function overwriteDefaultConfig() {
-    Object.keys(playgroundConfig).forEach((key) => {
-      delete playgroundConfig[key];
-    });
     Object.assign(playgroundConfig, JSON.parse(localStorage.getItem('deep-chat-config')));
   }
 
@@ -204,33 +211,47 @@ export default function Playground() {
       )}
       {isIntroModalDisplayed && <InformationModal setIsModalDisplayed={setIsIntroModalDisplayed} isIntro={true} />}
       <Tooltip id="chat-wrapper-configuration-tooltip" />
-      <div id="playground" className={isGrid ? 'playground-grid' : 'playground-panorama'}>
+      <div id="playground" className={viewModeToClasses[viewMode].playground}>
         <div id="playground-title" className={'start-page-title-visible'}>
           <b>Playground</b>
-          <HeaderButtons isGrid={isGrid} toggleLayout={toggleLayout}></HeaderButtons>
+          <HeaderButtons viewMode={viewMode} toggleLayout={toggleLayout}></HeaderButtons>
         </div>
         <div>
           <div id="playground-chat-list-parent">
-            <div
-              ref={componentListRef}
-              id="playground-chat-list"
-              className={isGrid ? 'playground-chat-list-grid' : 'playground-chat-list-panorama'}
-            >
+            <div ref={componentListRef} id="playground-chat-list" className={viewModeToClasses[viewMode].chatList}>
               {chatComponents}
             </div>
           </div>
-          <AddButton isGrid={isGrid} addComponent={addComponent} />
+          <AddButton viewMode={viewMode} addComponent={addComponent} />
         </div>
       </div>
     </Layout>
   );
 }
 
+// 1 - grid
+// 2 - panorama
+// 3 - expanded
+const viewModeToClasses = {
+  1: {
+    playground: 'playground-grid',
+    chatList: 'playground-chat-list-grid',
+  },
+  2: {
+    playground: 'playground-panorama',
+    chatList: 'playground-chat-list-panorama',
+  },
+  3: {
+    playground: 'playground-expanded',
+    chatList: 'playground-chat-list-expanded',
+  },
+};
+
 function setHorizontalScroll(componentList) {
   componentList.addEventListener(
     'wheel',
     (e) => {
-      if (!view.isGrid) {
+      if (playgroundConfig.viewMode === 2) {
         // scroll only when there is overflow (useful when 1 element in column and no overflow)
         if (componentList.scrollWidth > componentList.clientWidth) {
           e.preventDefault();

website/src/pages/playground/chat/manipulate/playgroundAddButton.css

@@ -6,13 +6,18 @@
 .playground-add-button-container-grid {
   margin-top: 10px;
   /* required to have space when at end of a grid */
-  margin-bottom: 50px;
+  margin-bottom: 49px;
 }
 
 .playground-add-button-container-panorama {
   margin-top: 30px;
 }
 
+.playground-add-button-container-expanded {
+  margin-top: 7px;
+  margin-bottom: 25px;
+}
+
 #playground-add-button {
   background-color: var(--playground-add-background);
   width: 50px;

website/src/pages/playground/chat/manipulate/playgroundAddButton.js

@@ -1,15 +1,21 @@
 import './playgroundAddButton.css';
 import React from 'react';
 
-export default function AddButton({isGrid, addComponent}) {
+export default function AddButton({viewMode, addComponent}) {
   return (
-    <div
-      id="playground-add-button-container"
-      className={isGrid ? 'playground-add-button-container-grid' : 'playground-add-button-container-panorama'}
-    >
+    <div id="playground-add-button-container" className={viewModeToClass[viewMode]}>
       <div id="playground-add-button" className="start-panel-logo" onClick={() => addComponent()}>
         <img src="/img/plus.svg" id="playground-add-button-image" className="playground-button"></img>
       </div>
     </div>
   );
 }
+
+// 1 - grid
+// 2 - panorama
+// 3 - expanded
+const viewModeToClass = {
+  1: 'playground-add-button-container-grid',
+  2: 'playground-add-button-container-panorama',
+  3: 'playground-add-button-container-expanded',
+};

website/src/pages/playground/chat/playgroundChatComponent.css

@@ -2,3 +2,16 @@
   display: flex;
   justify-content: center;
 }
+
+.playground-chat-list-expanded > .playground-chat-wrapper > .playground-chat-component {
+  height: calc(100vh - 150px);
+}
+
+.playground-chat-list-expanded > .playground-chat-wrapper:first-child > .playground-chat-component {
+  height: calc(100vh - 205px);
+}
+
+.playground-chat-list-expanded > .playground-chat-wrapper > .playground-chat-component > deep-chat {
+  height: 100% !important;
+  width: 100% !important;
+}

website/src/pages/playground/chat/playgroundChatWrapper.css

@@ -26,6 +26,19 @@
   height: 0px;
 }
 
+.playground-chat-list-expanded > .playground-chat-wrapper {
+  width: unset;
+  height: 0px;
+}
+
+.playground-chat-list-expanded > .playground-chat-wrapper-height-expanded {
+  height: calc(100vh - 62px);
+}
+
+.playground-chat-list-expanded > .playground-chat-wrapper-height-expanded:first-child {
+  height: calc(100vh - 116px);
+}
+
 .playground-chat-animated {
   transition: 0.5s;
 }

website/src/pages/playground/chat/playgroundChatWrapper.js

@@ -20,6 +20,9 @@ const ChatWrapper = React.forwardRef(
       scaleOut() {
         setScaleExpanded(false); // shrunk already has animation
       },
+      reduceHeight(isOnlyComponent) {
+        if (!isOnlyComponent) setHeightExpanded(false);
+      },
       reduceHeightWhenLastOnRow() {
         const previousSibling = elementRef.current.previousSibling;
         if (!elementRef.current.nextSibling && previousSibling) {
@@ -110,7 +113,7 @@ const ChatWrapper = React.forwardRef(
               className={`playground-chat-wrapper ${allowAnimation ? 'playground-chat-animated' : ''} ${
                 scaleExpanded ? 'playground-chat-wrapper-scale-expanded' : 'playground-chat-wrapper-scale-shrunk'
               } ${widthExpanded ? 'playground-chat-wrapper-width-expanded' : 'playground-chat-wrapper-width-shrunk'} ${
-                heightExpanded ? '' : 'playground-chat-wrapper-height-shrunk'
+                heightExpanded ? 'playground-chat-wrapper-height-expanded' : 'playground-chat-wrapper-height-shrunk'
               }`}
             >
               {/* The wrapper is used to manipulate the css without re-rendering the actual chat component by storing it inside children */}