feat(console): UI improvements (#172)

* feat(console): cosmetic changes, improved visuals

* feat(console): collapsed side menu

* chore(console): no sorting of variables

* fix(console): out of bounds horizontal scrolling for request details properties

* fix(console): hide copy project ID if not in project conext

* remove overview page

* fix formatting

Author: arielweinberger

apps/console/src/app/components/layout/LayoutWrapper.tsx

@@ -1,14 +1,16 @@
-import { Breadcrumb, Layout, theme } from "antd";
+import { Breadcrumb, Col, Layout, Row, theme } from "antd";
 import { SideNavigation } from "./SideNavigation";
 import styled from "@emotion/styled";
 import { Header } from "./Header";
 import { useBreadcrumbItems } from "../../lib/hooks/useBreadcrumbItems";
-import { colors } from "../../lib/theme/colors";
+import { ProjectCopy } from "../projects/ProjectCopy";
+import { motion } from "framer-motion";
+import { useLocation } from "react-router-dom";
+import { useCurrentProject } from "../../lib/hooks/useCurrentProject";
 
 const StyledContent = styled(Layout.Content)`
   padding: 18px;
-  max-width: 1280px;
-  margin-inline: auto;
+  margin-inline: 24px;
 
   max-height: calc(100vh - 64px);
   overflow-y: auto;
@@ -36,7 +38,9 @@ export const LayoutWrapper = ({
   withBreadcrumbs = true,
 }: Props) => {
   const { token } = theme.useToken();
+  const { project } = useCurrentProject();
   const breadcrumbItems = useBreadcrumbItems();
+  const location = useLocation();
 
   return (
     <Layout
@@ -49,16 +53,36 @@ export const LayoutWrapper = ({
       {withHeader && <Header />}
       <div style={{ display: "flex", flexDirection: "row", height: "100%" }}>
         {withSideNav && <SideNavigation />}
+
         <StyledContent>
-          {withBreadcrumbs && (
-            <Breadcrumb
-              items={breadcrumbItems}
-              style={{
-                marginBottom: token.marginLG,
-              }}
-            />
-          )}
-          {children}
+          <Row gutter={[24, 24]}>
+            <Col span={18}>
+              {withBreadcrumbs && (
+                <Breadcrumb
+                  items={breadcrumbItems}
+                  style={{
+                    marginBottom: token.marginLG,
+                  }}
+                />
+              )}
+            </Col>
+            <Col
+              span={6}
+              style={{ display: "flex", justifyContent: "flex-end" }}
+            >
+              {project && <ProjectCopy />}
+            </Col>
+          </Row>
+
+          <motion.div
+            key={location.pathname}
+            initial={{ y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{ duration: 0.1 }}
+          >
+            {children}
+          </motion.div>
         </StyledContent>
       </div>
     </Layout>

apps/console/src/app/components/layout/SideNavigation.tsx

@@ -1,34 +1,31 @@
-import {
-  BoltIcon,
-  ChartBarIcon,
-  QueueListIcon,
-  ServerStackIcon,
-  DocumentMagnifyingGlassIcon,
-} from "@heroicons/react/24/solid";
+import { ChatBubbleBottomCenterIcon } from "@heroicons/react/24/outline";
 import { Menu } from "antd";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 
-import { colors } from "../../lib/theme/colors";
 import { useCurrentProject } from "../../lib/hooks/useCurrentProject";
-import { ProjectCopy } from "../projects/ProjectCopy";
+import {
+  AcademicCapIcon,
+  CubeIcon,
+  ServerIcon,
+} from "@heroicons/react/24/outline";
 
 const topMenuItems = [
   {
     key: "prompts",
     label: "Prompts",
-    icon: <BoltIcon height={18} />,
+    icon: <CubeIcon height={18} />,
   },
   {
     key: "requests",
     label: "Requests",
-    icon: <QueueListIcon height={18} width={18} />,
+    icon: <ChatBubbleBottomCenterIcon height={18} width={18} />,
   },
   {
     key: "environments",
     label: "Environments",
-    icon: <ServerStackIcon height={18} />,
+    icon: <ServerIcon height={18} />,
   },
 ];
 
@@ -39,7 +36,6 @@ const BaseMenu = styled(Menu)`
   border-right: 1px solid red;
 `;
 const SidebarContainer = styled.div`
-  border-inline-end: 1px solid ${colors.neutral["800"]};
   height: 100%;
 
   display: flex;
@@ -51,22 +47,11 @@ const TopMenu = styled(BaseMenu)`
   flex: 100%;
 `;
 
-const DocsMenu = () => {
-  return (
-    <BaseMenu>
-      <Menu.Item key="docs" icon={<DocumentMagnifyingGlassIcon height={18} />}>
-        <a href="https://docs.pezzo.ai/" target="_blank">
-          <span>Read Docs</span>
-        </a>
-      </Menu.Item>
-    </BaseMenu>
-  );
-};
-
 export const SideNavigation = () => {
   const { project } = useCurrentProject();
   const location = useLocation();
   const navigate = useNavigate();
+  const [isCollapsed] = useState(true);
 
   const handleTopMenuClick = (item) => {
     navigate(`/projects/${project.id}/${item.key}`);
@@ -86,13 +71,21 @@ export const SideNavigation = () => {
   return (
     <SidebarContainer>
       <TopMenu
+        mode="inline"
         onClick={handleTopMenuClick}
         defaultSelectedKeys={["prompts"]}
         selectedKeys={selectedKeys.length ? selectedKeys : ["prompts"]}
         items={topMenuItems}
+        inlineCollapsed={isCollapsed}
       />
-      <ProjectCopy />
-      <DocsMenu />
+      {/* Bottom Menu */}
+      <BaseMenu inlineCollapsed={isCollapsed} mode="inline">
+        <Menu.Item key="docs" icon={<AcademicCapIcon height={18} />}>
+          <a href="https://docs.pezzo.ai/" target="_blank" rel="noreferrer">
+            <span>Docs</span>
+          </a>
+        </Menu.Item>
+      </BaseMenu>
     </SidebarContainer>
   );
 };

apps/console/src/app/components/prompts/PromptListItem.tsx

@@ -1,7 +1,6 @@
-import { ArrowRightCircleIcon } from "@heroicons/react/24/outline";
+import { ArrowRightCircleIcon, CubeIcon } from "@heroicons/react/24/outline";
 import { Card, Col, Row, Typography } from "antd";
 import { css } from "@emotion/css";
-import { BoltIcon } from "@heroicons/react/24/solid";
 import { colorPrimary } from "../../lib/theme/ant-theme";
 
 interface Props {
@@ -21,7 +20,7 @@ export const PromptListItem = ({ name, onClick }: Props) => {
               padding: 4px;
             `}
           >
-            <BoltIcon height={"80%"} width={"80%"} color={colorPrimary} />
+            <CubeIcon height={"80%"} width={"80%"} color={colorPrimary} />
           </div>
         </Col>
         <Col flex="auto">

apps/console/src/app/components/requests/RequestDetails.tsx

@@ -103,18 +103,6 @@ export const RequestDetails = (props: Props) => {
       title: "Duration",
       description: ms(props.calculated.duration),
     },
-    {
-      title: "Properties",
-      description: props.properties ? (
-        <Card size="small">
-          <pre>{JSON.stringify(props.properties, null, 2)}</pre>
-        </Card>
-      ) : (
-        <Typography.Text italic type="secondary">
-          No properties specified
-        </Typography.Text>
-      ),
-    },
     {
       title: "Display mode",
       description: (
@@ -158,6 +146,20 @@ export const RequestDetails = (props: Props) => {
         )}
       />
       <br />
+      <Space direction="vertical" style={{ width: "100%" }}>
+        <Typography.Text strong>Properties</Typography.Text>
+        {props.properties ? (
+          <Card size="small" style={{ maxWidth: "100%" }}>
+            <pre>{JSON.stringify(props.properties, null, 2)}</pre>
+          </Card>
+        ) : (
+          <Typography.Text italic type="secondary">
+            No properties specified
+          </Typography.Text>
+        )}
+      </Space>
+      <br />
+      <br />
       {selectedMode === "json" && (
         <RequestResponseViewJsonView request={request} response={response} />
       )}

apps/console/src/app/lib/utils/find-variables.ts

@@ -5,7 +5,5 @@ export function findVariables(text: string): string[] {
   const foundVariables = matches
     ? matches.map((match) => match.replace(/[{}]/g, ""))
     : [];
-  return Array.from(new Set(foundVariables)).sort((a, b) =>
-    a.toLowerCase() > b.toLowerCase() ? 1 : -1
-  );
+  return Array.from(new Set(foundVariables));
 }

apps/console/src/app/pages/requests/RequestsPage.tsx

@@ -118,8 +118,7 @@ export const RequestsPage = () => {
   return (
     <div>
       <Space direction="vertical" style={{ width: "100%" }}>
-        <Typography.Title level={4}>Requests</Typography.Title>
-        <Divider style={{ margin: 0 }} />
+        <Typography.Title level={2}>Requests</Typography.Title>
         <RequestFilters requests={tableData} />
         <Drawer
           title="Request Details"

package-lock.json

@@ -59,6 +59,7 @@
     "cross-fetch": "^4.0.0",
     "date-fns": "^2.30.0",
     "dotenv": "^16.1.4",
+    "framer-motion": "^10.16.0",
     "googleapis": "^118.0.0",
     "graphql": "^16.7.1",
     "graphql-request": "^6.0.0",