[Agent Builder] Landing Page - Change layout and add quick links

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation.tsx

@@ -17,6 +17,7 @@ import { useConversationId } from '../../hooks/use_conversation_id';
 import { useSendMessage } from '../../context/send_message_context';
 import { useConversationScrollActions } from '../../hooks/use_conversation_scroll_actions';
 import { useConversationStatus } from '../../hooks/use_conversation';
+import { ConversationContent } from './conversation_grid';
 
 const fullHeightStyles = css`
   height: 100%;
@@ -70,39 +71,41 @@ export const Conversation: React.FC<{}> = () => {
     left: 50%;
     transform: translateX(-50%);
   `;
+  const contentStyles = css`
+    ${fullHeightStyles}
+    align-items: stretch;
+  `;
+
+  if (!hasActiveConversation) {
+    return <NewConversationPrompt />;
+  }
 
   return (
     <EuiResizableContainer direction="vertical" css={conversationContainerStyles}>
       {(EuiResizablePanel, EuiResizableButton) => {
         return (
           <>
-            {hasActiveConversation ? (
-              <EuiResizablePanel initialSize={80}>
-                <div ref={scrollContainerRef} css={scrollContainerStyles}>
-                  <ConversationRounds scrollContainerHeight={scrollContainerHeight} />
-                </div>
-                {showScrollButton && (
-                  <EuiButtonIcon
-                    display="base"
-                    size="s"
-                    color="text"
-                    css={scrollDownButtonStyles}
-                    iconType="sortDown"
-                    aria-label="Scroll down"
-                    onClick={scrollToMostRecentRoundBottom}
-                  />
-                )}
-              </EuiResizablePanel>
-            ) : (
-              <EuiResizablePanel initialSize={80}>
-                <div css={fullHeightStyles}>
-                  <NewConversationPrompt />
-                </div>
-              </EuiResizablePanel>
-            )}
+            <EuiResizablePanel initialSize={80}>
+              <div ref={scrollContainerRef} css={scrollContainerStyles}>
+                <ConversationRounds scrollContainerHeight={scrollContainerHeight} />
+              </div>
+              {showScrollButton && (
+                <EuiButtonIcon
+                  display="base"
+                  size="s"
+                  color="text"
+                  css={scrollDownButtonStyles}
+                  iconType="sortDown"
+                  aria-label="Scroll down"
+                  onClick={scrollToMostRecentRoundBottom}
+                />
+              )}
+            </EuiResizablePanel>
             <EuiResizableButton />
             <EuiResizablePanel initialSize={20} minSize="20%">
-              <ConversationInputForm onSubmit={scrollToMostRecentRoundTop} />
+              <ConversationContent css={contentStyles}>
+                <ConversationInputForm onSubmit={scrollToMostRecentRoundTop} />
+              </ConversationContent>
             </EuiResizablePanel>
           </>
         );

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_grid.styles.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+
+export const useConversationGridCenterColumnWidth = () => {
+  const { euiTheme } = useEuiTheme();
+  const contentMaxWidth = `calc(${euiTheme.size.xl} * 25)`;
+  return contentMaxWidth;
+};

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_grid.tsx

@@ -8,6 +8,9 @@
 import { useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
+import { useConversationGridCenterColumnWidth } from './conversation_grid.styles';
+
+// Main grid
 
 interface ConversationGridProps {
   children: React.ReactNode;
@@ -17,10 +20,13 @@ interface ConversationGridProps {
 export const ConversationGrid: React.FC<ConversationGridProps> = ({ children, className }) => {
   const { euiTheme } = useEuiTheme();
   const sideColumnWidth = `minmax(calc(${euiTheme.size.xxl} * 2), 1fr)`;
-  const contentMaxWidth = `calc(${euiTheme.size.xl} * 25)`;
+  const contentMarginWidth = euiTheme.size.l;
+  const centerColumnWidth = useConversationGridCenterColumnWidth();
   const gridStyles = css`
     display: grid;
-    grid-template-columns: ${sideColumnWidth} minmax(auto, ${contentMaxWidth}) ${sideColumnWidth};
+    grid-template-columns:
+      ${sideColumnWidth} ${contentMarginWidth} minmax(auto, ${centerColumnWidth})
+      ${contentMarginWidth} ${sideColumnWidth};
     align-items: center;
     width: 100%;
   `;
@@ -32,22 +38,88 @@ export const ConversationGrid: React.FC<ConversationGridProps> = ({ children, cl
   );
 };
 
-interface ConversationContentProps {
+interface ConversationGridContainerProps {
   children: React.ReactNode;
   className?: string;
 }
 
-const contentStyles = css`
-  grid-column: 2;
+// Left side column
+
+const leftContainerStyles = css`
+  grid-column: 1;
+`;
+
+export const ConversationLeft: React.FC<ConversationGridContainerProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div css={leftContainerStyles} className={className}>
+      {children}
+    </div>
+  );
+};
+
+// Center column without the margins
+
+const centerContainerStyles = css`
+  grid-column: 3;
+`;
+
+export const ConversationCenter: React.FC<ConversationGridContainerProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div css={centerContainerStyles} className={className}>
+      {children}
+    </div>
+  );
+};
+
+// Right side column
+
+const rightContainerStyles = css`
+  grid-column: 5;
+`;
+
+export const ConversationRight: React.FC<ConversationGridContainerProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div css={rightContainerStyles} className={className}>
+      {children}
+    </div>
+  );
+};
+
+// Shorthand for using centered content in the grid
+
+export const ConversationContent: React.FC<ConversationGridContainerProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <ConversationGrid className={className}>
+      <ConversationCenter>{children}</ConversationCenter>
+    </ConversationGrid>
+  );
+};
+
+// Shorthand for using centered content with margins in the grid
+
+const contentWithMarginsStyles = css`
+  grid-column: 2 / 5;
 `;
 
-export const ConversationContent: React.FC<ConversationContentProps> = ({
+export const ConversationContentWithMargins: React.FC<ConversationGridContainerProps> = ({
   children,
   className,
 }) => {
   return (
     <ConversationGrid className={className}>
-      <div css={contentStyles}>{children}</div>
+      <div css={contentWithMarginsStyles}>{children}</div>
     </ConversationGrid>
   );
 };

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_header.tsx

@@ -8,7 +8,12 @@
 import React from 'react';
 import { useHasActiveConversation } from '../../hooks/use_conversation';
 import { ConversationActions } from './conversation_actions';
-import { ConversationGrid } from './conversation_grid';
+import {
+  ConversationCenter,
+  ConversationGrid,
+  ConversationLeft,
+  ConversationRight,
+} from './conversation_grid';
 import { ConversationSidebarToggle } from './conversation_sidebar/conversation_sidebar_toggle';
 import { ConversationTitle } from './conversation_title';
 
@@ -24,11 +29,17 @@ export const ConversationHeader: React.FC<ConversationHeaderProps> = ({
   const hasActiveConversation = useHasActiveConversation();
   return (
     <ConversationGrid>
-      <ConversationSidebarToggle isSidebarOpen={isSidebarOpen} onToggle={onToggleSidebar} />
+      <ConversationLeft>
+        <ConversationSidebarToggle isSidebarOpen={isSidebarOpen} onToggle={onToggleSidebar} />
+      </ConversationLeft>
       {hasActiveConversation && (
         <>
-          <ConversationTitle />
-          <ConversationActions />
+          <ConversationCenter>
+            <ConversationTitle />
+          </ConversationCenter>
+          <ConversationRight>
+            <ConversationActions />
+          </ConversationRight>
         </>
       )}
     </ConversationGrid>

x-pack/platform/plugins/shared/onechat/public/application/components/conversations/conversation_input/conversation_input_form.tsx

@@ -11,12 +11,11 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { useSendMessage } from '../../../context/send_message_context';
 import { useIsSendingMessage } from '../../../hooks/use_is_sending_message';
-import { ConversationContent } from '../conversation_grid';
 import { ConversationInputActions } from './conversation_input_actions';
 import { ConversationInputTextArea } from './conversation_input_text_area';
 
 interface ConversationInputFormProps {
-  onSubmit: () => void;
+  onSubmit?: () => void;
 }
 
 const fullHeightStyles = css`
@@ -36,13 +35,9 @@ export const ConversationInputForm: React.FC<ConversationInputFormProps> = ({ on
     }
     sendMessage({ message: input });
     setInput('');
-    onSubmit();
+    onSubmit?.();
   };
 
-  const contentStyles = css`
-    ${fullHeightStyles}
-    align-items: stretch;
-  `;
   const formContainerStyles = css`
     ${fullHeightStyles}
     padding: ${euiTheme.size.base};
@@ -56,29 +51,27 @@ export const ConversationInputForm: React.FC<ConversationInputFormProps> = ({ on
   `;
 
   return (
-    <ConversationContent css={contentStyles}>
-      <EuiFlexGroup
-        css={formContainerStyles}
-        direction="column"
-        gutterSize="s"
-        responsive={false}
-        alignItems="stretch"
-        justifyContent="center"
-        aria-label={i18n.translate('xpack.onechat.conversationInputForm', {
-          defaultMessage: 'Message input form',
-        })}
-      >
-        <ConversationInputTextArea input={input} setInput={setInput} onSubmit={handleSubmit} />
-        <ConversationInputActions
-          onSubmit={handleSubmit}
-          isSubmitDisabled={isSubmitDisabled}
-          resetToPendingMessage={() => {
-            if (pendingMessage) {
-              setInput(pendingMessage);
-            }
-          }}
-        />
-      </EuiFlexGroup>
-    </ConversationContent>
+    <EuiFlexGroup
+      css={formContainerStyles}
+      direction="column"
+      gutterSize="s"
+      responsive={false}
+      alignItems="stretch"
+      justifyContent="center"
+      aria-label={i18n.translate('xpack.onechat.conversationInputForm', {
+        defaultMessage: 'Message input form',
+      })}
+    >
+      <ConversationInputTextArea input={input} setInput={setInput} onSubmit={handleSubmit} />
+      <ConversationInputActions
+        onSubmit={handleSubmit}
+        isSubmitDisabled={isSubmitDisabled}
+        resetToPendingMessage={() => {
+          if (pendingMessage) {
+            setInput(pendingMessage);
+          }
+        }}
+      />
+    </EuiFlexGroup>
   );
 };