From 6e87f08821de5b28f6edf8a23e286e26e9f54f57 Mon Sep 17 00:00:00 2001
From: James <james@jan.ai>
Date: Wed, 6 Sep 2023 08:03:16 -0700
Subject: [PATCH] chore: remove the grid on blank chat screen

Signed-off-by: James <james@jan.ai>
---
 .../_components/GenerateImageList/index.tsx   | 36 +++++++++++--------
 .../_components/NewChatBlankState/index.tsx   | 10 +++---
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/web-client/app/_components/GenerateImageList/index.tsx b/web-client/app/_components/GenerateImageList/index.tsx
index c9a301627..1e9e1cd1f 100644
--- a/web-client/app/_components/GenerateImageList/index.tsx
+++ b/web-client/app/_components/GenerateImageList/index.tsx
@@ -6,22 +6,28 @@ type Props = {
   products: ProductDetailFragment[];
 };
 
-const GenerateImageList: React.FC<Props> = ({ products }) => (
-  <div className="pb-4">
-    <div className="flex mt-4 justify-between">
-      <div className="gap-4 flex items-center">
-        <Image src={"icons/ic_image.svg"} width={20} height={20} alt="" />
-        <h2 className="text-gray-900 font-bold dark:text-white">
-          Generate Images
-        </h2>
+const GenerateImageList: React.FC<Props> = ({ products }) => {
+  if (products.length === 0) {
+    return <div></div>;
+  }
+
+  return (
+    <div className="pb-4">
+      <div className="flex mt-4 justify-between">
+        <div className="gap-4 flex items-center">
+          <Image src={"icons/ic_image.svg"} width={20} height={20} alt="" />
+          <h2 className="text-gray-900 font-bold dark:text-white">
+            Generate Images
+          </h2>
+        </div>
+      </div>
+      <div className="mt-2 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8">
+        {products.map((item) => (
+          <GenerateImageCard key={item.name} product={item} />
+        ))}
       </div>
     </div>
-    <div className="mt-2 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8">
-      {products.map((item) => (
-        <GenerateImageCard key={item.name} product={item} />
-      ))}
-    </div>
-  </div>
-);
+  );
+};
 
 export default GenerateImageList;
diff --git a/web-client/app/_components/NewChatBlankState/index.tsx b/web-client/app/_components/NewChatBlankState/index.tsx
index 109017325..7f6c4c86e 100644
--- a/web-client/app/_components/NewChatBlankState/index.tsx
+++ b/web-client/app/_components/NewChatBlankState/index.tsx
@@ -43,12 +43,10 @@ const NewChatBlankState: React.FC = () => {
   }
 
   return (
-    <div className="grid">
-      <div className="bg-gray-100 px-6 pt-8 w-full h-full overflow-y-scroll scroll">
-        <Slider products={featured} />
-        <ConversationalList products={conversational} />
-        <GenerateImageList products={generativeArts} />
-      </div>
+    <div className="bg-gray-100 px-6 pt-8 w-full h-full overflow-y-scroll scroll">
+      <Slider products={featured} />
+      <ConversationalList products={conversational} />
+      <GenerateImageList products={generativeArts} />
     </div>
   );
 };