Improve chat dialog spacing and layout (#1958)

* feat: improve chat dialog spacing and layout * Add changeset file * fix: copy grammar * fix(ai): remove separate handling of wide screen The grid usage is already leading to a dynamic spacing left and right, no need for manual spacing elements * fix: push missing files Git skills faded out so fast :-(
commercetools · Aug 1, 2024 · 66f1b6f · 66f1b6f
1 parent fa24f10
commit 66f1b6f
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 51 deletions.
diff --git a/.changeset/kind-shoes-march.md b/.changeset/kind-shoes-march.md
@@ -0,0 +1,5 @@
+---
+"@commercetools-docs/gatsby-theme-docs": patch
+---
+
+Improve chat dialog spacing and layout
diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-css-components.js b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-css-components.js
@@ -3,19 +3,17 @@ import { designSystem } from '@commercetools-docs/ui-kit';
 
 export const ChatContainer = styled.div`
   height: 100%;
+  max-width: ${designSystem.dimensions.widths.pageContentWithMarginsAndPageNavigation};
+  margin: auto;
+  margin-top -8px; /* hack: take back the full content area, the basic dialog has two spacings configured at the top */
   display: grid;
   grid-template-columns: auto;
   grid-template-areas: 'chat';
 
   @media screen and (${designSystem.dimensions.viewports.tablet}) {
-    grid-template-columns: auto 25%;
+    grid-template-columns: auto 30%;
     grid-template-areas: 'chat references';
   }
-
-  @media screen and (${designSystem.dimensions.viewports.largeDesktop}) {
-    grid-template-columns: 15% auto 25% 15%;
-    grid-template-areas: 'left-blank chat references right-blank';
-  }
 `;
 
 export const ChatMainArea = styled.div`
@@ -49,7 +47,7 @@ export const ChatMessagesWrapper = styled.div`
 
 export const ChatInputBox = styled.div`
   padding: ${designSystem.dimensions.spacings.m}
-    ${designSystem.dimensions.spacings.m} ${designSystem.dimensions.spacings.l}
+    ${designSystem.dimensions.spacings.m} 0
     ${designSystem.dimensions.spacings.m};
 `;
 
@@ -62,7 +60,7 @@ export const ResetButtonBox = styled.div`
 export const RestartButtonBox = styled.div`
   display: flex;
   justify-content: center;
-  padding-top: ${designSystem.dimensions.spacings.m};
+  padding-top: ${designSystem.dimensions.spacings.s};
 `;
 
 export const LockedChatFooterContainer = styled.div`
@@ -77,7 +75,7 @@ export const CubeContainer = styled.div`
 `;
 
 export const ChatSideArea = styled.div`
-  padding: 0px ${designSystem.dimensions.spacings.s};
+  padding: 0px ${designSystem.dimensions.spacings.m};
   grid-area: references;
   display: flex;
   flex-direction: column;
@@ -106,9 +104,7 @@ export const SubmitButtonBox = styled.div`
 
 export const ChatBottomContainer = styled.div`
   margin-top: auto;
-  padding: ${designSystem.dimensions.spacings.m}
-    ${designSystem.dimensions.spacings.m} ${designSystem.dimensions.spacings.l}
-    ${designSystem.dimensions.spacings.m};
+  padding-top: ${designSystem.dimensions.spacings.m};
 `;
 
 export const SideTopContainer = styled.div`
@@ -117,6 +113,9 @@ export const SideTopContainer = styled.div`
   flex-grow: 1;
   overflow-y: auto;
   padding: 0px ${designSystem.dimensions.spacings.m};
+  border: 1px solid ${designSystem.colors.light.borderPrimary};
+  background-color: ${designSystem.colors.light.surfacePrimary};
+  border-radius: 4px;
 `;
 
 export const BackgroundWrapper = styled.div`
@@ -130,24 +129,6 @@ export const SideDebugContainer = styled.div`
   margin-bottom: ${designSystem.dimensions.spacings.m};
 `;
 
-export const LeftBlank = styled.div`
-  grid-area: left-blank;
-  display: none;
-
-  @media screen and (${designSystem.dimensions.viewports.largeDesktop}) {
-    display: block;
-  }
-`;
-
-export const RightBlank = styled.div`
-  grid-area: right-blank;
-  display: none;
-
-  @media screen and (${designSystem.dimensions.viewports.largeDesktop}) {
-    display: block;
-  }
-`;
-
 export const CharCount = styled.div`
   padding-right: 5px;
   font-size: ${designSystem.typography.fontSizes.extraSmall};

diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-loading.js b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-loading.js
@@ -9,15 +9,12 @@ import {
   ChatMainAreaWhenLoggedOut,
   ChatSideArea,
   DisclaimerText,
-  LeftBlank,
-  RightBlank,
   SideTopContainer,
 } from './chat-modal-css-components';
 
 const ChatModalLoading = (props) => {
   return (
     <ChatContainer data-testid="ai-assistant-modal">
-      <LeftBlank />
       <ChatSideArea>
         <SideTopContainer>
           <BackgroundWrapper />
@@ -33,7 +30,6 @@ const ChatModalLoading = (props) => {
           <LoadingSpinner scale="l" />
         </ChatMainAreaWhenLoggedOut>
       </ChatMainArea>
-      <RightBlank />
     </ChatContainer>
   );
 };

diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-logged-out.jsx b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-logged-out.jsx
@@ -10,15 +10,12 @@ import {
   ChatMainAreaWhenLoggedOut,
   ChatSideArea,
   DisclaimerText,
-  LeftBlank,
-  RightBlank,
   SideTopContainer,
 } from './chat-modal-css-components';
 
 const ChatModalLoggedOut = (props) => {
   return (
     <ChatContainer data-testid="ai-assistant-modal">
-      <LeftBlank />
       <ChatSideArea>
         <SideTopContainer>
           <BackgroundWrapper>
@@ -43,7 +40,6 @@ const ChatModalLoggedOut = (props) => {
           )}
         </ChatMainAreaWhenLoggedOut>
       </ChatMainArea>
-      <RightBlank />
     </ChatContainer>
   );
 };

diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-not-verified.jsx b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal-not-verified.jsx
@@ -14,13 +14,11 @@ import {
   ChatSideArea,
   CubeContainer,
   DisclaimerText,
-  LeftBlank,
   LockedChatFooterContainer,
   NotificationListText,
   NotificationTextBig,
   NotificationTextSmall,
   ResetButtonBox,
-  RightBlank,
   SideTopContainer,
 } from './chat-modal-css-components';
 
@@ -59,7 +57,6 @@ const NOT_VERIFIED_INFO = (
 const ChatModalNotVerified = () => {
   return (
     <ChatContainer data-testid="ai-assistant-modal">
-      <LeftBlank />
       <ChatSideArea>
         <SideTopContainer>
           <BackgroundWrapper>
@@ -83,7 +80,6 @@ const ChatModalNotVerified = () => {
           </CubeContainer>
         </LockedChatFooterContainer>
       </ChatMainArea>
-      <RightBlank />
     </ChatContainer>
   );
 };

diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal.jsx b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-modal.jsx
@@ -43,11 +43,9 @@ import {
   CubeContainer,
   DisclaimerTextMobile,
   InputTextWrapper,
-  LeftBlank,
   LockedChatFooterContainer,
   ResetButtonBox,
   RestartButtonBox,
-  RightBlank,
   SubmitButtonBox,
 } from './chat-modal-css-components';
 import useChatInit from '../hooks/use-chat-init';
@@ -515,7 +513,6 @@ const ChatModal = () => {
       {/* standard state */}
       {assistantState === ASSISTANT_STATE_OPEN && (
         <ChatContainer data-testid="ai-assistant-modal">
-          <LeftBlank />
           <ChatSide
             user={user}
             chatMode={formik.values.chatMode}
@@ -552,7 +549,7 @@ const ChatModal = () => {
                     placeholder={
                       currentChatMode?.key === DEV_TOOLING_MODE
                         ? 'Specify your use case to generate the code.'
-                        : 'Use complete sentences for the best help.'
+                        : 'Use complete sentences for best results.'
                     }
                     value={formik.values.chatInput}
                     touched={formik.touched.chatInput}
@@ -615,7 +612,6 @@ const ChatModal = () => {
               <LegalDisclaimer />
             </DisclaimerTextMobile>
           </ChatMainArea>
-          <RightBlank />
         </ChatContainer>
       )}
     </FormDialog>

diff --git a/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-references-list.jsx b/packages/gatsby-theme-docs/src/modules/ai-assistant/components/chat-references-list.jsx
@@ -8,10 +8,7 @@ import { createReferenceGroup } from './chat.utils';
 const ReferenceContainer = styled.div`
   height: fit-content;
   width: 100%;
-  background-color: ${designSystem.colors.light.surfacePrimary};
-  border: 1px solid ${designSystem.colors.light.borderPrimary};
-  border-radius: 4px;
-  padding: ${designSystem.dimensions.spacings.m};
+  padding: ${designSystem.dimensions.spacings.m} 0;
   font-size: ${designSystem.typography.fontSizes.small};
   overflow: hidden;