complete frontend design for default state

autogpt_platform/frontend/src/components/builder/block-menu/UGCAgentBlock.tsx

@@ -44,7 +44,7 @@ const UGCAgentBlock: React.FC<Props> = ({
         >
           {title}
         </span>
-        <div className="flex items-center space-x-2.5">
+        <div className="flex items-center space-x-1.5">
           <span
             className={cn(
               "line-clamp-1 font-sans text-xs font-normal leading-5 text-zinc-500 group-disabled:text-zinc-400",

autogpt_platform/frontend/src/components/builder/block-menu/default/ActionBlocksContent.tsx

@@ -1,7 +1,23 @@
 import React from "react";
+import Block from "../Block";
 
 const ActionBlocksContent: React.FC = () => {
-  return <div className="h-full w-full">ActionBlocksContent</div>;
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        <Block title="Date Input" description="Input a date into your agent." />
+        <Block
+          title="Dropdown input"
+          description="Give your users the ability to select from a dropdown menu"
+        />
+        <Block title="File upload" description="Upload a file to your agent" />
+        <Block
+          title="Text input"
+          description="Allow users to select multiple options using checkboxes"
+        />
+      </div>
+    </div>
+  );
 };
 
 export default ActionBlocksContent;

autogpt_platform/frontend/src/components/builder/block-menu/default/AllBlocksContent.tsx

@@ -7,114 +7,114 @@ import { Separator } from "@/components/ui/separator";
 
 const AllBlocksContent: React.FC = () => {
   return (
-    <div className="h-full w-full space-y-3 px-4">
-      {/* AI Category */}
-      <div className="space-y-2.5">
-        <div className="flex items-center justify-between">
-          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
-            AI
-          </p>
-          <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
-            10
-          </span>
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        {/* AI Category */}
+        <div className="space-y-2.5">
+          <div className="flex items-center justify-between">
+            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+              AI
+            </p>
+            <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
+              10
+            </span>
+          </div>
+
+          <div className="space-y-2">
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+
+            <Button
+              variant={"link"}
+              className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
+            >
+              see all
+            </Button>
+          </div>
         </div>
 
-        <div className="space-y-2">
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
+        <Separator className="h-[1px] w-full text-zinc-300" />
 
-          <Button
-            variant={"link"}
-            className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
-          >
-            see all
-          </Button>
+        {/* Basic Category */}
+        <div className="space-y-2.5">
+          <div className="flex items-center justify-between">
+            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+              Basic
+            </p>
+            <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
+              6
+            </span>
+          </div>
+
+          <div className="space-y-2">
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+
+            <Button
+              variant={"link"}
+              className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
+            >
+              see all
+            </Button>
+          </div>
+        </div>
+
+        <Separator className="h-[1px] w-full text-zinc-300" />
+
+        {/* Communincation Category */}
+        <div className="space-y-2.5">
+          <div className="flex items-center justify-between">
+            <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+              Communincation
+            </p>
+            <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
+              6
+            </span>
+          </div>
+
+          <div className="space-y-2">
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Add to list"
+              description="Enables your agent to chat with users in natural language."
+            />
+
+            <Button
+              variant={"link"}
+              className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
+            >
+              see all
+            </Button>
+          </div>
         </div>
       </div>
-
-      <Separator className="h-[1px] w-full text-zinc-300" />
-
-      {/* Basic Category */}
-      <div className="space-y-2.5">
-        <div className="flex items-center justify-between">
-          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
-            Basic
-          </p>
-          <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
-            6
-          </span>
-        </div>
-
-        <div className="space-y-2">
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-
-          <Button
-            variant={"link"}
-            className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
-          >
-            see all
-          </Button>
-        </div>
-      </div>
-
-      <Separator className="h-[1px] w-full text-zinc-300" />
-
-      {/* Communincation Category */}
-      <div className="space-y-2.5">
-        <div className="flex items-center justify-between">
-          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
-            Communincation
-          </p>
-          <span className="rounded-full bg-zinc-100 px-[0.375rem] font-sans text-sm leading-[1.375rem] text-zinc-600">
-            6
-          </span>
-        </div>
-
-        <div className="space-y-2">
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Add to list"
-            description="Enables your agent to chat with users in natural language."
-          />
-
-          <Button
-            variant={"link"}
-            className="px-0 font-sans text-sm leading-[1.375rem] text-zinc-600 underline hover:text-zinc-800"
-          >
-            see all
-          </Button>
-        </div>
-      </div>
-
-      <Separator className="h-[1px] w-full text-zinc-300" />
     </div>
   );
 };

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuDefault.tsx

@@ -18,17 +18,26 @@ export type DefaultStateType =
 const BlockMenuDefault: React.FC = () => {
   const [defaultState, setDefaultState] =
     useState<DefaultStateType>("suggestion");
+  const [integration, setIntegration] = useState("");
+
   return (
     <div className="flex flex-1 overflow-y-auto">
       {/* Left sidebar */}
       <BlockMenuSidebar
         defaultState={defaultState}
         setDefaultState={setDefaultState}
+        setIntegration={setIntegration}
+        integration={integration}
       />
 
       <Separator className="h-full w-[1px] text-zinc-300" />
 
-      <BlockMenuDefaultContent defaultState={defaultState} />
+      <BlockMenuDefaultContent
+        defaultState={defaultState}
+        setDefaultState={setDefaultState}
+        setIntegration={setIntegration}
+        integration={integration}
+      />
     </div>
   );
 };

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuDefaultContent.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { DefaultStateType } from "./BlockMenuDefault";
 import SuggestionContent from "./SuggestionContent";
 import AllBlocksContent from "./AllBlocksContent";
@@ -11,19 +11,36 @@ import MyAgentsContent from "./MyAgentsContent";
 
 interface BlockMenuDefaultContentProps {
   defaultState: DefaultStateType;
+  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const BlockMenuDefaultContent: React.FC<BlockMenuDefaultContentProps> = ({
   defaultState,
+  setDefaultState,
+  integration,
+  setIntegration,
 }) => {
   return (
-    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full flex-1 overflow-y-scroll pt-4">
-      {defaultState == "suggestion" && <SuggestionContent />}
+    <div className="h-full flex-1 overflow-hidden">
+      {defaultState == "suggestion" && (
+        <SuggestionContent
+          integration={integration}
+          setIntegration={setIntegration}
+          setDefaultState={setDefaultState}
+        />
+      )}
       {defaultState == "all_blocks" && <AllBlocksContent />}
       {defaultState == "input_blocks" && <InputBlocksContent />}
       {defaultState == "action_blocks" && <ActionBlocksContent />}
       {defaultState == "output_blocks" && <OutputBlocksContent />}
-      {defaultState == "integrations" && <IntegrationsContent />}
+      {defaultState == "integrations" && (
+        <IntegrationsContent
+          integration={integration}
+          setIntegration={setIntegration}
+        />
+      )}
       {defaultState == "marketplace_agents" && <MarketplaceAgentsContent />}
       {defaultState == "my_agents" && <MyAgentsContent />}
     </div>

autogpt_platform/frontend/src/components/builder/block-menu/default/BlockMenuSidebar.tsx

@@ -5,11 +5,15 @@ import { DefaultStateType } from "./BlockMenuDefault";
 interface BlockMenuSidebarProps {
   defaultState: DefaultStateType;
   setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const BlockMenuSidebar: React.FC<BlockMenuSidebarProps> = ({
   defaultState,
   setDefaultState,
+  integration,
+  setIntegration,
 }) => {
   // BLOCK MENU TODO: We need to fetch the number of Blocks/Integrations/Agents when opening the menu.
   // Alternatively, this might depend on the strategy we plan in the future.
@@ -52,7 +56,10 @@ const BlockMenuSidebar: React.FC<BlockMenuSidebarProps> = ({
         name={"Integrations"}
         number={24}
         selected={defaultState == "integrations"}
-        onClick={() => setDefaultState("integrations")}
+        onClick={() => {
+          setIntegration("");
+          setDefaultState("integrations");
+        }}
       />
       <MenuItem
         name={"Marketplace Agents"}

autogpt_platform/frontend/src/components/builder/block-menu/default/InputBlocksContent.tsx

@@ -3,37 +3,39 @@ import Block from "../Block";
 
 const InputBlocksContent: React.FC = () => {
   return (
-    <div className="h-full w-full space-y-3 px-4">
-      <Block title="Date Input" description="Input a date into your agent." />
-      <Block
-        title="Dropdown input"
-        description="Give your users the ability to select from a dropdown menu"
-      />
-      <Block title="File upload" description="Upload a file to your agent" />
-      <Block
-        title="Text input"
-        description="Allow users to select multiple options using checkboxes"
-      />
-      <Block
-        title="Add to list"
-        description="Enables your agent to chat with users in natural language."
-      />
-      <Block
-        title="Add to list"
-        description="Enables your agent to chat with users in natural language."
-      />
-      <Block
-        title="Add to list"
-        description="Enables your agent to chat with users in natural language."
-      />
-      <Block
-        title="Add to list"
-        description="Enables your agent to chat with users in natural language."
-      />
-      <Block
-        title="Add to list"
-        description="Enables your agent to chat with users in natural language."
-      />
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        <Block title="Date Input" description="Input a date into your agent." />
+        <Block
+          title="Dropdown input"
+          description="Give your users the ability to select from a dropdown menu"
+        />
+        <Block title="File upload" description="Upload a file to your agent" />
+        <Block
+          title="Text input"
+          description="Allow users to select multiple options using checkboxes"
+        />
+        <Block
+          title="Add to list"
+          description="Enables your agent to chat with users in natural language."
+        />
+        <Block
+          title="Add to list"
+          description="Enables your agent to chat with users in natural language."
+        />
+        <Block
+          title="Add to list"
+          description="Enables your agent to chat with users in natural language."
+        />
+        <Block
+          title="Add to list"
+          description="Enables your agent to chat with users in natural language."
+        />
+        <Block
+          title="Add to list"
+          description="Enables your agent to chat with users in natural language."
+        />
+      </div>
     </div>
   );
 };

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationBlocks.tsx

@@ -0,0 +1,91 @@
+import { Button } from "@/components/ui/button";
+import React from "react";
+import IntegrationBlock from "../IntegrationBlock";
+
+interface IntegrationBlocksProps {
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const IntegrationBlocks: React.FC<IntegrationBlocksProps> = ({
+  integration,
+  setIntegration,
+}) => {
+  return (
+    <div className="space-y-2.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <Button
+            variant={"link"}
+            className="p-0 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800"
+            onClick={() => {
+              setIntegration("");
+            }}
+          >
+            Integrations
+          </Button>
+          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            /
+          </p>
+          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            {integration}
+          </p>
+        </div>
+        <span className="flex h-[1.375rem] w-[1.6875rem] items-center justify-center rounded-[1.25rem] bg-[#f0f0f0] p-1.5 font-sans text-sm leading-[1.375rem] text-zinc-500 group-disabled:text-zinc-400">
+          {13}
+        </span>
+      </div>
+      {integration == "Twitter Blocks" && (
+        <div className="space-y-3">
+          <IntegrationBlock
+            title={`${integration}: Post tweet`}
+            description="Post tweet on twitter"
+            icon_url="/integrations/x.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Delete tweet`}
+            description="Delete tweet on twitter"
+            icon_url="/integrations/x.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Update tweet`}
+            description="Update tweet on twitter"
+            icon_url="/integrations/x.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Retweet tweet`}
+            description="Retweet tweet on twitter"
+            icon_url="/integrations/x.png"
+          />
+        </div>
+      )}
+
+      {integration == "Discord Blocks" && (
+        <div className="space-y-3">
+          <IntegrationBlock
+            title={`${integration}: Create`}
+            description="Create message on discord"
+            icon_url="/integrations/discord.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Delete`}
+            description="Delete message on discord"
+            icon_url="/integrations/discord.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Update`}
+            description="Update message on discord"
+            icon_url="/integrations/discord.png"
+          />
+          <IntegrationBlock
+            title={`${integration}: Read`}
+            description="Read message on discord"
+            icon_url="/integrations/discord.png"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IntegrationBlocks;

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationList.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import IntegrationBlock from "../IntegrationBlock";
+import Integration from "../Integration";
+interface IntegrationListProps {
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const IntegrationList: React.FC<IntegrationListProps> = ({
+  setIntegration,
+}) => {
+  return (
+    <div className="space-y-3">
+      <Integration
+        title="Twitter Blocks"
+        icon_url="/integrations/x.png"
+        description="All twitter blocks, It has everthing to interact with twitter"
+        number_of_blocks={10}
+        onClick={() => setIntegration("Twitter Blocks")}
+      />
+      <Integration
+        title="Discord Blocks"
+        icon_url="/integrations/discord.png"
+        description="All Discord blocks, It has everthing to interact with discord"
+        number_of_blocks={14}
+        onClick={() => setIntegration("Discord Blocks")}
+      />
+      <Integration
+        title="Github Blocks"
+        icon_url="/integrations/github.png"
+        description="All Github blocks, It has everthing to interact with github"
+        number_of_blocks={4}
+        onClick={() => setIntegration("Github Blocks")}
+      />
+      <Integration
+        title="Hubspot Blocks"
+        icon_url="/integrations/hubspot.png"
+        description="All Hubspot blocks, It has everthing to interact with Hubspot"
+        number_of_blocks={2}
+        onClick={() => setIntegration("Hubspot Blocks")}
+      />
+    </div>
+  );
+};
+
+export default IntegrationList;

autogpt_platform/frontend/src/components/builder/block-menu/default/IntegrationsContent.tsx

@@ -1,7 +1,31 @@
 import React from "react";
+import IntegrationList from "./IntegrationList";
+import IntegrationBlocks from "./IntegrationBlocks";
 
-const IntegrationsContent: React.FC = () => {
-  return <div className="h-full w-full">IntegerationsContent</div>;
+interface IntegrationsContentProps {
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const IntegrationsContent: React.FC<IntegrationsContentProps> = ({
+  integration,
+  setIntegration,
+}) => {
+  // I am currently comparing the integration with names, in future maybe using ids
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full px-4 pb-4">
+        {integration == "" ? (
+          <IntegrationList setIntegration={setIntegration} />
+        ) : (
+          <IntegrationBlocks
+            integration={integration}
+            setIntegration={setIntegration}
+          />
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default IntegrationsContent;

autogpt_platform/frontend/src/components/builder/block-menu/default/MarketplaceAgentsContent.tsx

@@ -1,7 +1,67 @@
 import React from "react";
+import MarketplaceAgentBlock from "../MarketplaceAgentBlock";
 
 const MarketplaceAgentsContent: React.FC = () => {
-  return <div className="h-full w-full">MarketplaceAgentsContent</div>;
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        <MarketplaceAgentBlock
+          title="turtle test"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={1000}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test 1"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={1324}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test 2"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={10030}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test 3"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={324}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={4345}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={324}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test 3"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={324}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={4345}
+        />
+        <MarketplaceAgentBlock
+          title="turtle test"
+          image_url="/placeholder.png"
+          creator_name="Autogpt"
+          number_of_runs={324}
+        />
+      </div>
+    </div>
+  );
 };
 
 export default MarketplaceAgentsContent;

autogpt_platform/frontend/src/components/builder/block-menu/default/MyAgentsContent.tsx

@@ -1,7 +1,49 @@
 import React from "react";
+import UGCAgentBlock from "../UGCAgentBlock";
 
 const MyAgentsContent: React.FC = () => {
-  return <div className="h-full w-full">MyAgentsContent</div>;
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        <UGCAgentBlock
+          title="My Agent 1"
+          edited_time="23rd April"
+          version={3}
+          image_url="/placeholder.png"
+        />
+        <UGCAgentBlock
+          title="My Agent 2"
+          edited_time="21st April"
+          version={4}
+          image_url="/placeholder.png"
+        />
+        <UGCAgentBlock
+          title="My Agent 3"
+          edited_time="23rd May"
+          version={7}
+          image_url="/placeholder.png"
+        />
+        <UGCAgentBlock
+          title="My Agent 4"
+          edited_time="23rd April"
+          version={3}
+          image_url="/placeholder.png"
+        />
+        <UGCAgentBlock
+          title="My Agent 5"
+          edited_time="23rd April"
+          version={3}
+          image_url="/placeholder.png"
+        />
+        <UGCAgentBlock
+          title="My Agent 6"
+          edited_time="23rd April"
+          version={3}
+          image_url="/placeholder.png"
+        />
+      </div>
+    </div>
+  );
 };
 
 export default MyAgentsContent;

autogpt_platform/frontend/src/components/builder/block-menu/default/OutputBlocksContent.tsx

@@ -1,7 +1,19 @@
 import React from "react";
+import Block from "../Block";
 
 const OutputBlocksContent: React.FC = () => {
-  return <div className="h-full w-full">OutputBlocksContent</div>;
+  return (
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-3 px-4 pb-4">
+        <Block title="Date Input" description="Input a date into your agent." />
+        <Block
+          title="Dropdown input"
+          description="Give your users the ability to select from a dropdown menu"
+        />
+        <Block title="File upload" description="Upload a file to your agent" />
+      </div>
+    </div>
+  );
 };
 
 export default OutputBlocksContent;

autogpt_platform/frontend/src/components/builder/block-menu/default/SuggestionContent.tsx

@@ -2,78 +2,104 @@ import React from "react";
 import SearchHistoryChip from "../SearchHistoryChip";
 import IntegrationChip from "../IntegrationChip";
 import Block from "../Block";
+import { DefaultStateType } from "./BlockMenuDefault";
 
-const SuggestionContent: React.FC = () => {
+interface SuggestionContentProps {
+  integration: string;
+  setIntegration: React.Dispatch<React.SetStateAction<string>>;
+  setDefaultState: React.Dispatch<React.SetStateAction<DefaultStateType>>;
+}
+
+const SuggestionContent: React.FC<SuggestionContentProps> = ({
+  integration,
+  setIntegration,
+  setDefaultState,
+}) => {
   return (
-    <div className="h-full w-full space-y-6">
-      {/* Recent Searches */}
-      <div className="space-y-2.5">
-        <p className="px-4 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
-          Recent searches
-        </p>
-        <div className="scrollbar-hide flex flex-nowrap gap-2 overflow-x-auto">
-          <SearchHistoryChip content="image generator" className="ml-4" />
-          <SearchHistoryChip content="deepfake" />
-          <SearchHistoryChip content="competitor analysis" />
-          <SearchHistoryChip content="image generator" />
-          <SearchHistoryChip content="deepfake" />
-          <SearchHistoryChip content="competitor analysis" />
-          <SearchHistoryChip content="image generator" />
-          <SearchHistoryChip content="deepfake" />
-          <SearchHistoryChip content="competitor analysis" />
+    <div className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-zinc-200 scrollbar-track-transparent h-full overflow-y-scroll pt-4">
+      <div className="w-full space-y-6 pb-4">
+        {/* Recent Searches */}
+        <div className="space-y-2.5">
+          <p className="px-4 font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            Recent searches
+          </p>
+          <div className="scrollbar-hide flex flex-nowrap gap-2 overflow-x-auto">
+            <SearchHistoryChip content="image generator" className="ml-4" />
+            <SearchHistoryChip content="deepfake" />
+            <SearchHistoryChip content="competitor analysis" />
+            <SearchHistoryChip content="image generator" />
+            <SearchHistoryChip content="deepfake" />
+            <SearchHistoryChip content="competitor analysis" />
+            <SearchHistoryChip content="image generator" />
+            <SearchHistoryChip content="deepfake" />
+            <SearchHistoryChip content="competitor analysis" />
+          </div>
         </div>
-      </div>
 
-      {/* Integrations */}
-      <div className="space-y-2.5 px-4">
-        <p className="font-sans text-xs font-medium leading-[1.25rem] text-zinc-500">
-          Integrations
-        </p>
-        <div className="grid grid-cols-3 grid-rows-2 gap-2">
-          <IntegrationChip icon_url="/integrations/x.png" name="Twitter" />
-          <IntegrationChip icon_url="/integrations/github.png" name="Github" />
-          <IntegrationChip
-            icon_url="/integrations/hubspot.png"
-            name="Hubspot"
-          />
-          <IntegrationChip
-            icon_url="/integrations/discord.png"
-            name="Discord"
-          />
-          <IntegrationChip icon_url="/integrations/medium.png" name="Medium" />
-          <IntegrationChip
-            icon_url="/integrations/todoist.png"
-            name="Todoist"
-          />
+        {/* Integrations */}
+        <div className="space-y-2.5 px-4">
+          <p className="font-sans text-xs font-medium leading-[1.25rem] text-zinc-500">
+            Integrations
+          </p>
+          <div className="grid grid-cols-3 grid-rows-2 gap-2">
+            <IntegrationChip
+              icon_url="/integrations/x.png"
+              name="Twitter"
+              onClick={() => {
+                setDefaultState("integrations");
+                setIntegration("Twitter Blocks");
+              }}
+            />
+            <IntegrationChip
+              icon_url="/integrations/github.png"
+              name="Github"
+            />
+            <IntegrationChip
+              icon_url="/integrations/hubspot.png"
+              name="Hubspot"
+            />
+            <IntegrationChip
+              icon_url="/integrations/discord.png"
+              name="Discord"
+            />
+            <IntegrationChip
+              icon_url="/integrations/medium.png"
+              name="Medium"
+            />
+            <IntegrationChip
+              icon_url="/integrations/todoist.png"
+              name="Todoist"
+            />
+          </div>
         </div>
-      </div>
 
-      {/* Top blocks */}
-      <div className="space-y-2.5 px-4 pb-4">
-        <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
-          Top blocks
-        </p>
-        <div className="space-y-2">
-          <Block
-            title="Find in Dictionary"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Find in Dictionary"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Find in Dictionary"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Find in Dictionary"
-            description="Enables your agent to chat with users in natural language."
-          />
-          <Block
-            title="Find in Dictionary"
-            description="Enables your agent to chat with users in natural language."
-          />
+        {/* Top blocks */}
+        <div className="space-y-2.5 px-4">
+          <p className="font-sans text-sm font-medium leading-[1.375rem] text-zinc-800">
+            Top blocks
+          </p>
+          <div className="space-y-2">
+            <Block
+              title="Find in Dictionary"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Find in Dictionary"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Find in Dictionary"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Find in Dictionary"
+              description="Enables your agent to chat with users in natural language."
+            />
+            <Block
+              title="Find in Dictionary"
+              description="Enables your agent to chat with users in natural language."
+            />
+          </div>
         </div>
       </div>
     </div>