From 793a7b0c5dbe68d6a08556864d397d3a6eefb648 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Tue, 5 Mar 2024 20:30:03 +0530
Subject: [PATCH] Refactor UI layout and fix integration display

---
 app/ui/src/Layout/BotLayout.tsx               | 74 ++++++++++---------
 .../src/components/Bot/Playground/index.tsx   | 10 +--
 app/ui/src/routes/bot/integrations.tsx        |  2 +-
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/app/ui/src/Layout/BotLayout.tsx b/app/ui/src/Layout/BotLayout.tsx
index 3f76771d..496c86be 100644
--- a/app/ui/src/Layout/BotLayout.tsx
+++ b/app/ui/src/Layout/BotLayout.tsx
@@ -183,42 +183,7 @@ export default function BotLayout({
           </Dialog>
         </Transition.Root>
 
-        <div className="hidden md:fixed md:inset-y-0 md:flex md:flex-col">
-          <div className="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600">
-            <div className="mt-14 flex flex-grow flex-col">
-              <nav className="flex-1 space-y-1 px-2 pb-4">
-                {navigation.map((item) => (
-                  <Tooltip placement="right" key={item.name} title={item.name}>
-                    <Link
-                      to={{
-                        pathname: item.href.replace(":id", params.id!),
-                      }}
-                      className={classNames(
-                        location.pathname ===
-                          item.href.replace(":id", params.id!)
-                          ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
-                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
-                        "group  flex items-center px-2 py-2 text-sm font-medium rounded-md"
-                      )}
-                    >
-                      <item.icon
-                        className={classNames(
-                          location.pathname ===
-                            item.href.replace(":id", params.id!)
-                            ? "text-gray-500 dark:text-white"
-                            : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white",
-                          "flex-shrink-0 h-6 w-6"
-                        )}
-                        aria-hidden="true"
-                      />
-                      {/* {item.name} */}
-                    </Link>
-                  </Tooltip>
-                ))}
-              </nav>
-            </div>
-          </div>
-        </div>
+    
 
         <div className="flex flex-col">
           <div className="sticky top-0 z-[999] flex h-14  bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600">
@@ -255,6 +220,43 @@ export default function BotLayout({
                 </div> */}
           </main>
         </div>
+
+        <div className="hidden md:fixed md:inset-y-0 md:flex md:flex-col ">
+          <div className="flex flex-grow flex-col overflow-y-auto border-r border-gray-200 bg-white pt-5 dark:bg-[#171717] dark:border-gray-600">
+            <div className="mt-14 flex flex-grow flex-col">
+              <nav className="flex-1 space-y-1 px-2 pb-4">
+                {navigation.map((item) => (
+                  <Tooltip placement="right" key={item.name} title={item.name}>
+                    <Link
+                      to={{
+                        pathname: item.href.replace(":id", params.id!),
+                      }}
+                      className={classNames(
+                        location.pathname ===
+                          item.href.replace(":id", params.id!)
+                          ? "bg-gray-100 text-gray-900 dark:bg-[#262626] dark:text-white"
+                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
+                        "group  flex items-center px-2 py-2 text-sm font-medium rounded-md"
+                      )}
+                    >
+                      <item.icon
+                        className={classNames(
+                          location.pathname ===
+                            item.href.replace(":id", params.id!)
+                            ? "text-gray-500 dark:text-white"
+                            : "text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-white",
+                          "flex-shrink-0 h-6 w-6"
+                        )}
+                        aria-hidden="true"
+                      />
+                      {/* {item.name} */}
+                    </Link>
+                  </Tooltip>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/app/ui/src/components/Bot/Playground/index.tsx b/app/ui/src/components/Bot/Playground/index.tsx
index df07ec8e..f85cb454 100644
--- a/app/ui/src/components/Bot/Playground/index.tsx
+++ b/app/ui/src/components/Bot/Playground/index.tsx
@@ -7,25 +7,25 @@ import { Skeleton } from "antd";
 export const PlaygroundBody = () => {
   const { isLoading } = useMessage();
   return (
-    <div className="relative md:ml-14">
+    <div className=" md:ml-14">
       <div className="flex flex-col">
         {" "}
-        <div className="hidden md:block">
+        <div className="hidden  lg:block">
           <PlaygroundMenu />
         </div>
-        <div className="flex-grow md:pl-[100px]">
+        <div className="flex-grow  flex-1">
           {isLoading ? (
             <div className="flex p-12 items-center justify-center h-full">
               <Skeleton active paragraph={{ rows: 10 }} />
             </div>
           ) : (
             <div>
-              <div className="md:ml-[150px]">
+              <div>
                 <PlaygroundChat />
               </div>
               <div>
                 <div className="bottom-0 w-full bg-transparent border-0 fixed pt-2">
-                  <div className="stretch mx-2 flex flex-row gap-3 md:mx-4 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
+                  <div className="stretch mx-2 flex flex-row gap-3 lg:mx-auto lg:max-w-2xl xl:max-w-3xl md:max-w-3xl md:mx-auto">
                     <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
                       <PlaygroundgForm />
                     </div>
diff --git a/app/ui/src/routes/bot/integrations.tsx b/app/ui/src/routes/bot/integrations.tsx
index e6c735be..b61d17b7 100644
--- a/app/ui/src/routes/bot/integrations.tsx
+++ b/app/ui/src/routes/bot/integrations.tsx
@@ -52,7 +52,7 @@ export default function BotIntegrationRoot() {
   }, [status]);
 
   return (
-    <div className="mx-auto my-3 w-full max-w-7xl">
+    <div className="mx-auto my-3  w-full max-w-7xl">
       {status === "loading" && <SkeletonLoading className="mt-6" />}
       {status === "success" && <IntegrationGrid data={data.data} />}
     </div>