-
Notifications
You must be signed in to change notification settings - Fork 44.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into swiftyos/open-1601-paginated-listing-of-st…
…ore-agents
- Loading branch information
Showing
16 changed files
with
649 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
83 changes: 83 additions & 0 deletions
83
rnd/autogpt_builder/src/components/edit/control/BlocksControl.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import React, { useState } from "react"; | ||
| import { Card, CardContent, CardHeader } from "@/components/ui/card"; | ||
| import { Label } from "@/components/ui/label"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { ToyBrick } from "lucide-react"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { ScrollArea } from "@/components/ui/scroll-area"; | ||
| import { beautifyString } from "@/lib/utils"; | ||
| import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; | ||
| import { Block } from '@/lib/autogpt-server-api'; | ||
| import { PlusIcon } from "@radix-ui/react-icons"; | ||
|
|
||
| interface BlocksControlProps { | ||
| blocks: Block[]; | ||
| addBlock: (id: string, name: string) => void; | ||
| } | ||
|
|
||
| /** | ||
| * A React functional component that displays a control for managing blocks. | ||
| * | ||
| * @component | ||
| * @param {Object} BlocksControlProps - The properties for the BlocksControl component. | ||
| * @param {Block[]} BlocksControlProps.blocks - An array of blocks to be displayed and filtered. | ||
| * @param {(id: string, name: string) => void} BlocksControlProps.addBlock - A function to call when a block is added. | ||
| * @returns The rendered BlocksControl component. | ||
| */ | ||
| export const BlocksControl: React.FC<BlocksControlProps> = ({ blocks, addBlock }) => { | ||
| const [searchQuery, setSearchQuery] = useState(''); | ||
|
|
||
| const filteredBlocks = blocks.filter((block: Block) => | ||
| block.name.toLowerCase().includes(searchQuery.toLowerCase()) | ||
| ); | ||
|
|
||
| return ( | ||
| <Popover> | ||
| <PopoverTrigger className="hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:text-white"> | ||
| <ToyBrick className="size-4"/> | ||
| </PopoverTrigger> | ||
| <PopoverContent side="right" sideOffset={15} align="start" className="w-80 p-0"> | ||
| <Card className="border-none shadow-none"> | ||
| <CardHeader className="p-4"> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <Label htmlFor="search-blocks">Blocks</Label> | ||
| </div> | ||
| <Input | ||
| id="search-blocks" | ||
| type="text" | ||
| placeholder="Search blocks..." | ||
| value={searchQuery} | ||
| onChange={(e) => setSearchQuery(e.target.value)} | ||
| /> | ||
| </CardHeader> | ||
| <CardContent className="p-1"> | ||
| <ScrollArea className="h-[60vh]"> | ||
| {filteredBlocks.map((block) => ( | ||
| <Card | ||
| key={block.id} | ||
| className="m-2" | ||
| > | ||
| <div className="flex items-center justify-between m-3"> | ||
| <div className="flex-1 min-w-0 mr-2"> | ||
| <span className="font-medium truncate block">{beautifyString(block.name)}</span> | ||
| </div> | ||
| <div className="flex items-center gap-1 flex-shrink-0"> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| onClick={() => addBlock(block.id, block.name)} | ||
| aria-label="Add block" | ||
| > | ||
| <PlusIcon /> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| ))} | ||
| </ScrollArea> | ||
| </CardContent> | ||
| </Card> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ); | ||
| }; |
Oops, something went wrong.