github/AutoGPT
1
1
Fork 0
mirror of https://github.com/Significant-Gravitas/AutoGPT.git synced 2026-04-08 03:00:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

clean(builder): learned we should be using this to keep our tailwind classes sorted (#7836)

Browse Source
This commit is contained in:
Nicholas Tindle
2024-08-21 03:14:21 -07:00
committed by GitHub
parent a1cbc101a5
commit f6d8e597e1
35 changed files with 131 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
rnd/autogpt_builder/.prettierrc Normal file
View File

@@ -0,0 +1,3 @@
{
"plugins": ["prettier-plugin-tailwindcss"]
}

1
rnd/autogpt_builder/package.json
View File

@@ -59,6 +59,7 @@
"eslint-config-next": "14.2.4",
"postcss": "^8",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}

4
rnd/autogpt_builder/src/app/layout.tsx
View File

@@ -30,9 +30,9 @@ export default function RootLayout({
// enableSystem
disableTransitionOnChange
>
<div className="flex flex-col min-h-screen ">
<div className="flex min-h-screen flex-col">
<NavBar />
<main className="flex-1 p-4 overflow-hidden">{children}</main>
<main className="flex-1 overflow-hidden p-4">{children}</main>
<TallyPopupSimple />
</div>
</Providers>

16
rnd/autogpt_builder/src/app/login/page.tsx
View File

@@ -54,7 +54,7 @@ export default function LoginPage() {
if (isUserLoading || isSupabaseLoading || user) {
return (
<div className="flex justify-center items-center h-[80vh]">
<div className="flex h-[80vh] items-center justify-center">
<FaSpinner className="mr-2 h-16 w-16 animate-spin" />
</div>
);
@@ -112,8 +112,8 @@ export default function LoginPage() {
};
return (
<div className="flex items-center justify-center h-[80vh]">
<div className="w-full max-w-md p-8 rounded-lg shadow-md space-y-6">
<div className="flex h-[80vh] items-center justify-center">
<div className="w-full max-w-md space-y-6 rounded-lg p-8 shadow-md">
<div className="mb-6 space-y-2">
<Button
className="w-full"
@@ -181,7 +181,7 @@ export default function LoginPage() {
control={form.control}
name="agreeToTerms"
render={({ field }) => (
<FormItem className="flex flex-row items-start space-x-3 space-y-0 mt-4">
<FormItem className="mt-4 flex flex-row items-start space-x-3 space-y-0">
<FormControl>
<Checkbox
checked={field.value}
@@ -207,16 +207,16 @@ export default function LoginPage() {
</FormItem>
)}
/>
<div className="flex w-full space-x-4 mt-6 mb-6">
<div className="mb-6 mt-6 flex w-full space-x-4">
<Button
className="w-1/2 flex justify-center"
className="flex w-1/2 justify-center"
type="submit"
disabled={isLoading}
>
Log in
</Button>
<Button
className="w-1/2 flex justify-center"
className="flex w-1/2 justify-center"
variant="outline"
type="button"
onClick={form.handleSubmit(onSignup)}
@@ -226,7 +226,7 @@ export default function LoginPage() {
</Button>
</div>
</form>
<p className="text-red-500 text-sm">{feedback}</p>
<p className="text-sm text-red-500">{feedback}</p>
</Form>
</div>
</div>

44
rnd/autogpt_builder/src/app/marketplace/page.tsx
View File

@@ -53,18 +53,18 @@ const HeroSection: React.FC = () => {
aria-hidden="true"
></div>
</div>
<div className="relative max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
<div>
<h1 className="text-2xl font-extrabold tracking-tight text-white sm:text-3xl lg:text-4xl">
AutoGPT Marketplace
</h1>
<p className="mt-2 max-w-3xl text-sm sm:text-base text-indigo-100">
<p className="mt-2 max-w-3xl text-sm text-indigo-100 sm:text-base">
Discover and share proven AI Agents to supercharge your business.
</p>
</div>
<Button
onClick={() => router.push("/marketplace/submit")}
className="bg-white text-indigo-600 hover:bg-indigo-50 flex items-center"
className="flex items-center bg-white text-indigo-600 hover:bg-indigo-50"
>
<PlusCircle className="mr-2 h-4 w-4" />
Submit Agent
@@ -78,16 +78,16 @@ const SearchInput: React.FC<{
value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}> = ({ value, onChange }) => (
<div className="mb-8 relative">
<div className="relative mb-8">
<Input
placeholder="Search agents..."
type="text"
className="w-full pl-10 pr-4 py-2 rounded-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
className="w-full rounded-full border-gray-300 py-2 pl-10 pr-4 focus:border-indigo-500 focus:ring-indigo-500"
value={value}
onChange={onChange}
/>
<Search
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
className="absolute left-3 top-1/2 -translate-y-1/2 transform text-gray-400"
size={20}
/>
</div>
@@ -105,24 +105,24 @@ const AgentCard: React.FC<{ agent: Agent; featured?: boolean }> = ({
return (
<div
className={`flex flex-col justify-between p-6 cursor-pointer hover:bg-gray-50 transition-colors duration-200 rounded-lg border ${featured ? "border-indigo-500 shadow-md" : "border-gray-200"}`}
className={`flex cursor-pointer flex-col justify-between rounded-lg border p-6 transition-colors duration-200 hover:bg-gray-50 ${featured ? "border-indigo-500 shadow-md" : "border-gray-200"}`}
onClick={handleClick}
>
<div>
<div className="flex items-center justify-between mb-2">
<h3 className="text-lg font-semibold text-gray-900 truncate">
<div className="mb-2 flex items-center justify-between">
<h3 className="truncate text-lg font-semibold text-gray-900">
{agent.name}
</h3>
{featured && <Star className="text-indigo-500" size={20} />}
</div>
<p className="text-sm text-gray-500 line-clamp-2 mb-4">
<p className="mb-4 line-clamp-2 text-sm text-gray-500">
{agent.description}
</p>
<div className="text-xs text-gray-400 mb-2">
<div className="mb-2 text-xs text-gray-400">
Categories: {agent.categories.join(", ")}
</div>
</div>
<div className="flex justify-between items-end">
<div className="flex items-end justify-between">
<div className="text-xs text-gray-400">
Updated {new Date(agent.updatedAt).toLocaleDateString()}
</div>
@@ -143,8 +143,8 @@ const AgentGrid: React.FC<{
featured?: boolean;
}> = ({ agents, title, featured = false }) => (
<div className="mb-12">
<h2 className="text-2xl font-bold text-gray-900 mb-4">{title}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<h2 className="mb-4 text-2xl font-bold text-gray-900">{title}</h2>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
{agents.map((agent) => (
<AgentCard agent={agent} key={agent.id} featured={featured} />
))}
@@ -158,11 +158,11 @@ const Pagination: React.FC<{
onPrevPage: () => void;
onNextPage: () => void;
}> = ({ page, totalPages, onPrevPage, onNextPage }) => (
<div className="flex justify-between items-center mt-8">
<div className="mt-8 flex items-center justify-between">
<Button
onClick={onPrevPage}
disabled={page === 1}
className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
className="flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
>
<ChevronLeft size={16} />
<span>Previous</span>
@@ -173,7 +173,7 @@ const Pagination: React.FC<{
<Button
onClick={onNextPage}
disabled={page === totalPages}
className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
className="flex items-center space-x-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
>
<span>Next</span>
<ChevronRight size={16} />
@@ -272,20 +272,20 @@ const Marketplace: React.FC = () => {
};
return (
<div className="bg-gray-50 min-h-screen">
<div className="min-h-screen bg-gray-50">
<HeroSection />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
<SearchInput value={searchValue} onChange={handleInputChange} />
{isLoading ? (
<div className="text-center py-12">
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
<div className="py-12 text-center">
<div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
<p className="mt-2 text-gray-600">Loading agents...</p>
</div>
) : searchValue ? (
searchResults.length > 0 ? (
<AgentGrid agents={searchResults} title="Search Results" />
) : (
<div className="text-center py-12">
<div className="py-12 text-center">
<p className="text-gray-600">
No agents found matching your search criteria.
</p>

2
rnd/autogpt_builder/src/app/marketplace/submit/page.tsx
View File

@@ -136,7 +136,7 @@ const SubmitPage: React.FC = () => {
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-6">Submit Your Agent</h1>
<h1 className="mb-6 text-3xl font-bold">Submit Your Agent</h1>
<Card className="p-6">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">

2
rnd/autogpt_builder/src/app/page.tsx
View File

@@ -76,7 +76,7 @@ const Monitor = () => {
const column3 = "col-span-full xl:col-span-4 xxl:col-span-5";
return (
<div className="grid grid-cols-1 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-5 lg:grid-cols-4 xl:grid-cols-10">
<AgentFlowList
className={column1}
flows={flows}

2
rnd/autogpt_builder/src/app/profile/page.tsx
View File

@@ -13,7 +13,7 @@ export default function PrivatePage() {
if (isLoading) {
return (
<div className="flex justify-center items-center h-[80vh]">
<div className="flex h-[80vh] items-center justify-center">
<FaSpinner className="mr-2 h-16 w-16 animate-spin" />
</div>
);

22
rnd/autogpt_builder/src/components/AgentDetailContent.tsx
View File

@@ -115,8 +115,8 @@ function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
const edgeTypes: EdgeTypes = useMemo(() => ({ custom: CustomEdge }), []);
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex justify-between items-center mb-4">
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
<div className="mb-4 flex items-center justify-between">
<Link
href="/marketplace"
className="inline-flex items-center text-indigo-600 hover:text-indigo-500"
@@ -126,13 +126,13 @@ function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
</Link>
<Button
onClick={() => installGraph(agent.id)}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<Download className="mr-2" size={16} />
Download Agent
</Button>
</div>
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h1 className="text-3xl font-bold text-gray-900">{agent.name}</h1>
<p className="mt-1 max-w-2xl text-sm text-gray-500">
@@ -141,21 +141,21 @@ function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
</div>
<div className="border-t border-gray-200 px-4 py-5 sm:p-0">
<dl className="sm:divide-y sm:divide-gray-200">
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 flex items-center">
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<dt className="flex items-center text-sm font-medium text-gray-500">
<Calendar className="mr-2" size={16} />
Last Updated
</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{new Date(agent.updatedAt).toLocaleDateString()}
</dd>
</div>
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 flex items-center">
<div className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<dt className="flex items-center text-sm font-medium text-gray-500">
<Tag className="mr-2" size={16} />
Categories
</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
{agent.categories.join(", ")}
</dd>
</div>
@@ -163,7 +163,7 @@ function AgentDetailContent({ agent }: { agent: AgentDetailResponse }) {
</div>
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
<button
className="flex items-center justify-between w-full text-left text-sm font-medium text-indigo-600 hover:text-indigo-500"
className="flex w-full items-center justify-between text-left text-sm font-medium text-indigo-600 hover:text-indigo-500"
onClick={() => setIsGraphExpanded(!isGraphExpanded)}
>
<span>Agent Graph</span>

12
rnd/autogpt_builder/src/components/CustomNode.tsx
View File

@@ -282,7 +282,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
return (
<div
className={`custom-node dark-theme border rounded-xl shadow-md bg-white/[.9] ${data.status?.toLowerCase() ?? ""}`}
className={`custom-node dark-theme rounded-xl border bg-white/[.9] shadow-md ${data.status?.toLowerCase() ?? ""}`}
onMouseEnter={handleHovered}
onMouseLeave={handleMouseLeave}
>
@@ -290,14 +290,14 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
className={`mb-2 p-3 ${getPrimaryCategoryColor(data.categories)} rounded-t-xl`}
>
<div className="flex items-center justify-between">
<div className="p-3 text-lg font-semibold font-roboto">
<div className="font-roboto p-3 text-lg font-semibold">
{beautifyString(
data.blockType?.replace(/Block$/, "") || data.title,
)}
</div>
<SchemaTooltip description={data.description} />
</div>
<div className="flex gap-[5px] ">
<div className="flex gap-[5px]">
{isHovered && (
<>
<Button
@@ -320,7 +320,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
)}
</div>
</div>
<div className="p-3 flex justify-between items-start gap-2">
<div className="flex items-start justify-between gap-2 p-3">
<div>
{data.inputSchema &&
Object.entries(data.inputSchema.properties).map(
@@ -339,7 +339,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
/>
{!isConnected && (
<NodeGenericInputField
className="mt-1 mb-2"
className="mb-2 mt-1"
propKey={propKey}
propSchema={propSchema}
currentValue={getValue(propKey)}
@@ -386,7 +386,7 @@ const CustomNode: FC<NodeProps<CustomNodeData>> = ({ data, id }) => {
</p>
</div>
)}
<div className="flex items-center pl-4 pb-4 mt-2.5">
<div className="mt-2.5 flex items-center pb-4 pl-4">
<Switch onCheckedChange={toggleOutput} />
<span className="m-1 mr-4">Output</span>
{hasOptionalFields && (

8
rnd/autogpt_builder/src/components/InputModalComponent.tsx
View File

@@ -37,18 +37,18 @@ const InputModalComponent: FC<ModalProps> = ({
}
return (
<div className="nodrag fixed inset-0 bg-white bg-opacity-60 flex justify-center items-center">
<div className="bg-white p-5 rounded-lg w-[500px] max-w-[90%]">
<div className="nodrag fixed inset-0 flex items-center justify-center bg-white bg-opacity-60">
<div className="w-[500px] max-w-[90%] rounded-lg bg-white p-5">
<center>
<h1>Enter input text</h1>
</center>
<Textarea
ref={textAreaRef}
className="w-full h-[200px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
className="h-[200px] w-full rounded border border-[#dfdfdf] bg-[#dfdfdf] p-2.5 text-black"
value={tempValue}
onChange={(e) => setTempValue(e.target.value)}
/>
<div className="flex justify-end gap-2.5 mt-2.5">
<div className="mt-2.5 flex justify-end gap-2.5">
<Button onClick={onClose}>Cancel</Button>
<Button onClick={handleSave}>Save</Button>
</div>

22
rnd/autogpt_builder/src/components/NavBar.tsx
View File

@@ -21,8 +21,8 @@ export async function NavBar() {
const { user } = await getServerUser();
return (
<header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6 z-50">
<div className="flex items-center gap-4 flex-1">
<header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
<div className="flex flex-1 items-center gap-4">
<Sheet>
<SheetTrigger asChild>
<Button
@@ -38,19 +38,19 @@ export async function NavBar() {
<nav className="grid gap-6 text-lg font-medium">
<Link
href="/"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2 "
className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
>
<IconSquareActivity /> Monitor
</Link>
<Link
href="/build"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2"
className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
>
<IconWorkFlow /> Build
</Link>
<Link
href="/marketplace"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2"
className="flex flex-row gap-2 text-muted-foreground hover:text-foreground"
>
<IconPackage2 /> Marketplace
</Link>
@@ -60,25 +60,25 @@ export async function NavBar() {
<nav className="hidden md:flex md:flex-row md:items-center md:gap-5 lg:gap-6">
<Link
href="/"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<IconSquareActivity /> Monitor
</Link>
<Link
href="/build"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<IconWorkFlow /> Build
</Link>
<Link
href="/marketplace"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
<IconPackage2 /> Marketplace
</Link>
</nav>
</div>
<div className="flex-1 flex justify-center relative">
<div className="relative flex flex-1 justify-center">
<a
className="pointer-events-auto flex place-items-center gap-2"
href="https://news.agpt.co/"
@@ -95,11 +95,11 @@ export async function NavBar() {
/>
</a>
</div>
<div className="flex items-center gap-4 flex-1 justify-end">
<div className="flex flex-1 items-center justify-end gap-4">
{isAvailable && !user && (
<Link
href="/login"
className="text-muted-foreground hover:text-foreground flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-muted-foreground hover:text-foreground"
>
Log In
<IconCircleUser />

8
rnd/autogpt_builder/src/components/NodeHandle.tsx
View File

@@ -31,8 +31,8 @@ const NodeHandle: FC<HandleProps> = ({
const typeClass = `text-sm ${getTypeTextColor(schema.type || "any")} ${side === "left" ? "text-left" : "text-right"}`;
const label = (
<div className="flex flex-col flex-grow">
<span className="text-m text-gray-900 -mb-1 green">
<div className="flex flex-grow flex-col">
<span className="text-m green -mb-1 text-gray-900">
{schema.title || beautifyString(keyName)}
{isRequired ? "*" : ""}
</span>
@@ -42,7 +42,7 @@ const NodeHandle: FC<HandleProps> = ({
const dot = (
<div
className={`w-4 h-4 m-1 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
className={`m-1 h-4 w-4 border-2 bg-white ${isConnected ? getTypeBgColor(schema.type || "any") : "border-gray-300"} rounded-full transition-colors duration-100 group-hover:bg-gray-300`}
/>
);
@@ -53,7 +53,7 @@ const NodeHandle: FC<HandleProps> = ({
type="target"
position={Position.Left}
id={keyName}
className="group -ml-[26px] background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: -7px; left: 20%;"
className="background-color: white; border: 2px solid black; width: 15px; height: 15px; border-radius: 50%; bottom: -7px; left: 20%; group -ml-[26px]"
>
<div className="pointer-events-none flex items-center">
{dot}

8
rnd/autogpt_builder/src/components/OutputModalComponent.tsx
View File

@@ -27,17 +27,17 @@ const OutputModalComponent: FC<OutputModalProps> = ({
}
return createPortal(
<div className="fixed inset-0 bg-white bg-opacity-60 flex justify-center items-center z-50">
<div className="bg-white p-5 rounded-lg w-[1000px] max-w-[100%]">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white bg-opacity-60">
<div className="w-[1000px] max-w-[100%] rounded-lg bg-white p-5">
<center>
<h1 style={{ color: "black" }}>Full Output</h1>
</center>
<Textarea
className="w-full h-[400px] p-2.5 rounded border border-[#dfdfdf] text-black bg-[#dfdfdf]"
className="h-[400px] w-full rounded border border-[#dfdfdf] bg-[#dfdfdf] p-2.5 text-black"
value={tempValue}
readOnly
/>
<div className="flex justify-end gap-2.5 mt-2.5">
<div className="mt-2.5 flex justify-end gap-2.5">
<Button onClick={onClose}>Close</Button>
</div>
</div>

6
rnd/autogpt_builder/src/components/PasswordInput.tsx
View File

@@ -22,14 +22,14 @@ const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
type="button"
variant="ghost"
size="sm"
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
onClick={() => setShowPassword((prev) => !prev)}
disabled={disabled}
>
{showPassword && !disabled ? (
<EyeIcon className="w-4 h-4" aria-hidden="true" />
<EyeIcon className="h-4 w-4" aria-hidden="true" />
) : (
<EyeOffIcon className="w-4 h-4" aria-hidden="true" />
<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
)}
<span className="sr-only">
{showPassword ? "Hide password" : "Show password"}

4
rnd/autogpt_builder/src/components/SchemaTooltip.tsx
View File

@@ -14,9 +14,9 @@ const SchemaTooltip: React.FC<{ description?: string }> = ({ description }) => {
<TooltipProvider delayDuration={400}>
<Tooltip>
<TooltipTrigger asChild>
<Info className="p-1 rounded-full hover:bg-gray-300" size={24} />
<Info className="rounded-full p-1 hover:bg-gray-300" size={24} />
</TooltipTrigger>
<TooltipContent className="max-w-xs tooltip-content">
<TooltipContent className="tooltip-content max-w-xs">
<ReactMarkdown
components={{
a: ({ node, ...props }) => (

2
rnd/autogpt_builder/src/components/TallyPopup.tsx
View File

@@ -42,7 +42,7 @@ const TallyPopupSimple = () => {
}
return (
<div className="fixed bottom-6 right-6 p-3 transition-all duration-300 ease-in-out z-50">
<div className="fixed bottom-6 right-6 z-50 p-3 transition-all duration-300 ease-in-out">
<Button
variant="default"
data-tally-open="3yx2L0"

2
rnd/autogpt_builder/src/components/agent-import-form.tsx
View File

@@ -165,7 +165,7 @@ export const AgentImportForm: React.FC<
<FormItem>
<FormLabel>Import as</FormLabel>
<FormControl>
<div className="flex space-x-2 items-center">
<div className="flex items-center space-x-2">
<span
className={
field.value ? "text-gray-400 dark:text-gray-600" : ""

14
rnd/autogpt_builder/src/components/edit/control/BlocksControl.tsx
View File

@@ -54,11 +54,11 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
className="w-96 p-0"
>
<Card className="border-none shadow-md">
<CardHeader className="flex px-2 flex-col p-3 gap-x-8 gap-y-2">
<div className="justify-between items-center ">
<CardHeader className="flex flex-col gap-x-8 gap-y-2 p-3 px-2">
<div className="items-center justify-between">
<Label
htmlFor="search-blocks"
className="text-base 2xl:text-xl font-semibold whitespace-nowrap text-black border-b-2 border-violet-500"
className="whitespace-nowrap border-b-2 border-violet-500 text-base font-semibold text-black 2xl:text-xl"
>
Blocks
</Label>
@@ -78,14 +78,14 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
key={block.id}
className={`m-2 ${getPrimaryCategoryColor(block.categories)}`}
>
<div className="flex items-center justify-between m-3">
<div className="flex-1 min-w-0 mr-2">
<span className="font-medium truncate block">
<div className="m-3 flex items-center justify-between">
<div className="mr-2 min-w-0 flex-1">
<span className="block truncate font-medium">
{beautifyString(block.name)}
</span>
</div>
<SchemaTooltip description={block.description} />
<div className="flex items-center gap-1 flex-shrink-0">
<div className="flex flex-shrink-0 items-center gap-1">
<Button
variant="ghost"
size="icon"

2
rnd/autogpt_builder/src/components/edit/control/ControlPanel.tsx
View File

@@ -44,7 +44,7 @@ export const ControlPanel = ({
return (
<Card className={cn("w-14", className)}>
<CardContent className="p-0">
<div className="flex flex-col items-center gap-8 px-2 sm:py-5 rounded-radius">
<div className="rounded-radius flex flex-col items-center gap-8 px-2 sm:py-5">
{children}
<Separator />
{controls.map((control, index) => (

2
rnd/autogpt_builder/src/components/edit/control/SaveControl.tsx
View File

@@ -78,7 +78,7 @@ export const SaveControl = ({
/>
</div>
</CardContent>
<CardFooter className="flex flex-col items-stretch gap-2 ">
<CardFooter className="flex flex-col items-stretch gap-2">
<Button className="w-full" onClick={handleSave}>
Save {getType()}
</Button>

2
rnd/autogpt_builder/src/components/monitor/AgentFlowList.tsx
View File

@@ -51,7 +51,7 @@ export const AgentFlowList = ({
return (
<Card className={className}>
<CardHeader className="flex-row justify-between items-center space-x-3 space-y-0">
<CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
<CardTitle>Agents</CardTitle>
<div className="flex items-center">

2
rnd/autogpt_builder/src/components/monitor/FlowInfo.tsx
View File

@@ -45,7 +45,7 @@ export const FlowInfo: React.FC<
return (
<Card {...props}>
<CardHeader className="flex-row justify-between space-y-0 space-x-3">
<CardHeader className="flex-row justify-between space-x-3 space-y-0">
<div>
<CardTitle>
{flow.name} <span className="font-light">v{flow.version}</span>

2
rnd/autogpt_builder/src/components/monitor/FlowRunInfo.tsx
View File

@@ -22,7 +22,7 @@ export const FlowRunInfo: React.FC<
return (
<Card {...props}>
<CardHeader className="flex-row items-center justify-between space-y-0 space-x-3">
<CardHeader className="flex-row items-center justify-between space-x-3 space-y-0">
<div>
<CardTitle>
{flow.name} <span className="font-light">v{flow.version}</span>

4
rnd/autogpt_builder/src/components/monitor/FlowRunsTimeline.tsx
View File

@@ -143,7 +143,7 @@ const ScrollableLegend: React.FC<
return (
<div
className={cn(
"whitespace-nowrap px-4 text-sm overflow-x-auto space-x-3",
"space-x-3 overflow-x-auto whitespace-nowrap px-4 text-sm",
className,
)}
style={{ scrollbarWidth: "none" }}
@@ -153,7 +153,7 @@ const ScrollableLegend: React.FC<
return (
<span key={`item-${index}`} className="inline-flex items-center">
<span
className="size-2.5 inline-block mr-1 rounded-full"
className="mr-1 inline-block size-2.5 rounded-full"
style={{ backgroundColor: entry.color }}
/>
<span>{entry.value}</span>

12
rnd/autogpt_builder/src/components/node-input-components.tsx
View File

@@ -45,7 +45,7 @@ const NodeObjectInputTree: FC<NodeObjectInputTreeProps> = ({
}) => {
object ??= ("default" in schema ? schema.default : null) ?? {};
return (
<div className={cn(className, "flex-col w-full")}>
<div className={cn(className, "w-full flex-col")}>
{displayName && <strong>{displayName}</strong>}
{Object.entries(schema.properties).map(([propKey, propSchema]) => {
const childKey = selfKey ? `${selfKey}.${propKey}` : propKey;
@@ -53,7 +53,7 @@ const NodeObjectInputTree: FC<NodeObjectInputTreeProps> = ({
return (
<div
key={propKey}
className="flex flex-row justify-between space-y-2 w-full"
className="flex w-full flex-row justify-between space-y-2"
>
<span className="mr-2 mt-3">
{propSchema.title || beautifyString(propKey)}
@@ -303,7 +303,7 @@ const NodeKeyValueInput: FC<{
<div>
{keyValuePairs.map(({ key, value }, index) => (
<div key={index}>
<div className="flex items-center space-x-2 mb-2 nodrag">
<div className="nodrag mb-2 flex items-center space-x-2">
<Input
type="text"
placeholder="Key"
@@ -393,7 +393,7 @@ const NodeArrayInput: FC<{
const entryKey = `${selfKey}[${index}]`;
return (
<div key={entryKey}>
<div className="flex items-center space-x-2 mb-2">
<div className="mb-2 flex items-center space-x-2">
{schema.items ? (
<NodeGenericInputField
propKey={entryKey}
@@ -532,7 +532,7 @@ const NodeNumberInput: FC<{
displayName ??= schema.title || beautifyString(selfKey);
return (
<div className={className}>
<div className="flex items-center justify-between space-x-3 nodrag">
<div className="nodrag flex items-center justify-between space-x-3">
<Input
type="number"
id={selfKey}
@@ -570,7 +570,7 @@ const NodeBooleanInput: FC<{
value ??= schema.default ?? false;
return (
<div className={className}>
<div className="flex items-center nodrag">
<div className="nodrag flex items-center">
<Switch
checked={value}
onCheckedChange={(v) => handleInputChange(selfKey, v)}

2
rnd/autogpt_builder/src/components/ui/checkbox.tsx
View File

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 border-neutral-900 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-800 dark:border-neutral-50 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
"peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 border-neutral-900 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-50 dark:border-neutral-800 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
className,
)}
{...props}

4
rnd/autogpt_builder/src/components/ui/command.tsx
View File

@@ -29,7 +29,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-neutral-400">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-neutral-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400",
"overflow-hidden p-1 text-neutral-950 dark:text-neutral-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:[&_[cmdk-group-heading]]:text-neutral-400",
className,
)}
{...props}

4
rnd/autogpt_builder/src/components/ui/dialog.tsx
View File

@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-neutral-800 dark:bg-neutral-950",
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-neutral-800 dark:bg-neutral-950 sm:rounded-lg",
className,
)}
{...props}

2
rnd/autogpt_builder/src/components/ui/input.tsx
View File

@@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
type == "file" ? "pt-1.5 pb-0.5" : "", // fix alignment
type == "file" ? "pb-0.5 pt-1.5" : "", // fix alignment
className,
)}
ref={ref}

18
rnd/autogpt_builder/src/components/ui/multiselect.tsx
View File

@@ -144,7 +144,7 @@ const MultiSelector = forwardRef<HTMLDivElement, MultiSelectorProps>(
ref={ref}
onKeyDown={handleKeyDown}
className={cn(
"overflow-visible bg-transparent flex flex-col space-y-2",
"flex flex-col space-y-2 overflow-visible bg-transparent",
className,
)}
dir={dir}
@@ -174,7 +174,7 @@ const MultiSelectorTrigger = forwardRef<
<div
ref={ref}
className={cn(
"flex flex-wrap gap-1 p-1 py-2 border border-muted rounded-lg bg-background",
"flex flex-wrap gap-1 rounded-lg border border-muted bg-background p-1 py-2",
className,
)}
{...props}
@@ -183,8 +183,8 @@ const MultiSelectorTrigger = forwardRef<
<Badge
key={item}
className={cn(
"px-1 rounded-xl flex items-center gap-1",
activeIndex === index && "ring-2 ring-muted-foreground ",
"flex items-center gap-1 rounded-xl px-1",
activeIndex === index && "ring-2 ring-muted-foreground",
)}
variant={"secondary"}
>
@@ -224,7 +224,7 @@ const MultiSelectorInput = forwardRef<
onFocus={() => setOpen(true)}
onClick={() => setActiveIndex(-1)}
className={cn(
"ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1",
"ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
className,
activeIndex !== -1 && "caret-transparent",
)}
@@ -256,7 +256,7 @@ const MultiSelectorList = forwardRef<
<CommandList
ref={ref}
className={cn(
"p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",
"scrollbar-thin scrollbar-track-transparent scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg absolute top-0 z-10 flex w-full flex-col gap-2 rounded-md border border-muted bg-background p-2 shadow-md transition-colors",
className,
)}
>
@@ -293,10 +293,10 @@ const MultiSelectorItem = forwardRef<
setInputValue("");
}}
className={cn(
"rounded-md cursor-pointer px-2 py-1 transition-colors flex justify-between ",
"flex cursor-pointer justify-between rounded-md px-2 py-1 transition-colors",
className,
isIncluded && "opacity-50 cursor-default",
props.disabled && "opacity-50 cursor-not-allowed",
isIncluded && "cursor-default opacity-50",
props.disabled && "cursor-not-allowed opacity-50",
)}
onMouseDown={mousePreventDefault}
>

2
rnd/autogpt_builder/src/components/ui/select.tsx
View File

@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300",
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-300 [&>span]:line-clamp-1",
className,
)}
{...props}

2
rnd/autogpt_builder/src/components/ui/sheet.tsx
View File

@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}

4
rnd/autogpt_builder/src/components/ui/table.tsx
View File

@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
"border-t bg-neutral-100/50 font-medium [&>tr]:last:border-b-0 dark:bg-neutral-800/50",
"border-t bg-neutral-100/50 font-medium dark:bg-neutral-800/50 [&>tr]:last:border-b-0",
className,
)}
{...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"h-10 px-2 text-left align-middle font-medium text-neutral-500 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] dark:text-neutral-400",
"h-10 px-2 text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
className,
)}
{...props}

6
rnd/autogpt_builder/yarn.lock
View File

@@ -3781,6 +3781,11 @@ prelude-ls@^1.2.1:
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prettier-plugin-tailwindcss@^0.6.6:
version "0.6.6"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz#93e524d3c30f3fb45dc9e99de985b2a584ff063f"
integrity sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==
prettier@^3.3.3:
version "3.3.3"
resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
@@ -4195,6 +4200,7 @@ streamsearch@^1.1.0:
integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
name string-width-cjs
version "4.2.3"
resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==