feat(builder): Addition ControlPanel and Separator components (#7680)

rnd/autogpt_builder/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",

rnd/autogpt_builder/src/components/edit/ControlPanel.tsx

@@ -0,0 +1,61 @@
+import {Card, CardContent} from "@/components/ui/card";
+import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
+import {Button} from "@/components/ui/button";
+import {Separator} from "@/components/ui/separator";
+import React from "react";
+
+/**
+ * Represents a control element for the ControlPanel Component.
+ * @type {Object} Control
+ * @property {React.ReactNode} icon - The icon of the control from lucide-react https://lucide.dev/icons/
+ * @property {string} label - The label of the control, to be leveraged by ToolTip.
+ * @property {onclick} onClick - The function to be executed when the control is clicked.
+ */
+export type Control = {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
+
+interface ControlPanelProps {
+    controls: Control[];
+    children?: React.ReactNode;
+}
+
+/**
+ * ControlPanel component displays a panel with controls as icons with the ability to take in children.
+ * @param {Object} ControlPanelProps - The properties of the control panel component.
+ * @param {Array} ControlPanelProps.controls - An array of control objects representing actions to be preformed.
+ * @param {Array} ControlPanelProps.children - The child components of the control panel.
+ * @returns The rendered control panel component.
+ */
+export const ControlPanel= ( {controls, children}: ControlPanelProps) => {
+    return (
+        <aside className="hidden w-14 flex-col sm:flex">
+            <Card>
+                <CardContent className="p-0">
+                    <div className="flex flex-col items-center gap-4 px-2 sm:py-5 rounded-radius">
+                        {controls.map((control, index) => (
+                            <Tooltip key={index} delayDuration={500}>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => control.onClick()}
+                                    >
+                                        {control.icon}
+                                        <span className="sr-only">{control.label}</span>
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent side="right">{control.label}</TooltipContent>
+                            </Tooltip>
+                        ))}
+                        <Separator />
+                        {children}
+                    </div>
+                </CardContent>
+            </Card>
+        </aside>
+    );
+}
+export default ControlPanel;

rnd/autogpt_builder/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-neutral-200 dark:bg-neutral-800",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

rnd/autogpt_builder/yarn.lock

@@ -447,6 +447,13 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-separator@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e"
+  integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"