θΏ™ζ˜―indexlocζδΎ›ηš„ζœεŠ‘οΌŒδΈθ¦θΎ“ε…₯任何密码
Skip to content

Agent builder UI bug fixes #3522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 28, 2025
Merged

Agent builder UI bug fixes #3522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b756765
builder ui bug fixes
shatfield4 Mar 24, 2025
9b9bce6
fix save button text color
shatfield4 Mar 24, 2025
4bc7111
Merge branch 'master' into builder-ui-fixes
timothycarambat Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/pages/Admin/AgentBuilder/BlockList/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ export default function BlockList({
e.stopPropagation();
moveBlock(index, index - 1);
}}
className="p-1.5 rounded-lg bg-theme-bg-primary border border-white/5 text-white hover:bg-theme-action-menu-item-hover transition-colors duration-300"
className="w-7 h-7 flex items-center justify-center rounded-lg bg-theme-bg-primary border border-white/5 text-white hover:bg-theme-action-menu-item-hover transition-colors duration-300"
data-tooltip-id="block-action"
data-tooltip-content="Move block up"
>
Expand All @@ -238,7 +238,7 @@ export default function BlockList({
e.stopPropagation();
moveBlock(index, index + 1);
}}
className="p-1.5 rounded-lg bg-theme-bg-primary border border-white/5 text-white hover:bg-theme-action-menu-item-hover transition-colors duration-300"
className="w-7 h-7 flex items-center justify-center rounded-lg bg-theme-bg-primary border border-white/5 text-white hover:bg-theme-action-menu-item-hover transition-colors duration-300"
data-tooltip-id="block-action"
data-tooltip-content="Move block down"
>
Expand All @@ -250,7 +250,7 @@ export default function BlockList({
e.stopPropagation();
removeBlock(block.id);
}}
className="p-1.5 rounded-lg bg-theme-bg-primary border border-white/5 text-red-400 hover:bg-red-500/10 hover:border-red-500/20 transition-colors duration-300"
className="w-7 h-7 flex items-center justify-center rounded-lg bg-theme-bg-primary border border-white/5 text-red-400 hover:bg-red-500/10 hover:border-red-500/20 transition-colors duration-300"
data-tooltip-id="block-action"
data-tooltip-content="Delete block"
>
Expand Down
127 changes: 69 additions & 58 deletions frontend/src/pages/Admin/AgentBuilder/HeaderMenu/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { CaretDown, CaretUp, Plus } from "@phosphor-icons/react";
import { CaretDown, CaretUp, Plus, CaretLeft } from "@phosphor-icons/react";
import AnythingInfinityLogo from "@/media/logo/anything-llm-infinity.png";
import { useState, useRef, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
Expand Down Expand Up @@ -32,72 +32,83 @@ export default function HeaderMenu({
}, []);

return (
<div className="absolute top-4 left-4 right-4">
<div className="flex justify-between items-center max-w-[1700px] mx-auto">
<div
className="flex items-center bg-theme-settings-input-bg rounded-md border border-white/10 pointer-events-auto"
ref={dropdownRef}
>
<div className="absolute top-[calc(40px+16px)] left-4 right-4">
<div className="flex justify-between items-start max-w-[1700px] mx-auto">
<div className="flex items-center gap-x-2">
<button
onClick={() => navigate(paths.settings.agentSkills())}
className="border-y-none border-l-none flex items-center gap-x-2 px-4 py-2 border-r border-white/10 hover:bg-theme-action-menu-bg transition-colors duration-300"
className="w-8 h-8 flex items-center justify-center rounded-full bg-theme-settings-input-bg border border-white/10 hover:bg-theme-action-menu-bg transition-colors duration-300"
>
<img
src={AnythingInfinityLogo}
alt="logo"
className="w-[20px] light:invert"
<CaretLeft
weight="bold"
className="w-5 h-5 text-theme-text-primary"
/>
<span className="text-theme-text-primary text-sm uppercase tracking-widest">
Builder
</span>
</button>
<div className="relative">
<div
className="flex items-center bg-theme-settings-input-bg rounded-md border border-white/10 pointer-events-auto"
ref={dropdownRef}
>
<button
disabled={!hasOtherFlows}
className="border-none flex items-center justify-between gap-x-1 text-theme-text-primary text-sm px-4 py-2 enabled:hover:bg-theme-action-menu-bg transition-colors duration-300 min-w-[200px] max-w-[300px]"
onClick={() => {
if (!agentName && !hasOtherFlows) {
const agentNameInput = document.getElementById(
"agent-flow-name-input"
);
if (agentNameInput) agentNameInput.focus();
return;
}
setShowDropdown(!showDropdown);
}}
onClick={() => navigate(paths.settings.agentSkills())}
className="!border-t-transparent !border-l-transparent !border-b-transparent flex items-center gap-x-2 px-4 py-2 border-r border-white/10 hover:bg-theme-action-menu-bg transition-colors duration-300"
>
<span
className={`text-sm font-medium truncate ${!!agentName ? "text-theme-text-primary " : "text-theme-text-secondary"}`}
>
{agentName || "Untitled Flow"}
<img
src={AnythingInfinityLogo}
alt="logo"
className="w-[20px] light:invert"
/>
<span className="text-theme-text-primary text-sm uppercase tracking-widest">
Builder
</span>
{hasOtherFlows && (
<div className="flex flex-col ml-2 shrink-0">
<CaretUp size={10} />
<CaretDown size={10} />
</button>
<div className="relative">
<button
disabled={!hasOtherFlows}
className="border-none flex items-center justify-between gap-x-1 text-theme-text-primary text-sm px-4 py-2 enabled:hover:bg-theme-action-menu-bg transition-colors duration-300 min-w-[200px] max-w-[300px]"
onClick={() => {
if (!agentName && !hasOtherFlows) {
const agentNameInput = document.getElementById(
"agent-flow-name-input"
);
if (agentNameInput) agentNameInput.focus();
return;
}
setShowDropdown(!showDropdown);
}}
>
<span
className={`text-sm font-medium truncate ${!!agentName ? "text-theme-text-primary " : "text-theme-text-secondary"}`}
>
{agentName || "Untitled Flow"}
</span>
{hasOtherFlows && (
<div className="flex flex-col ml-2 shrink-0">
<CaretUp size={10} />
<CaretDown size={10} />
</div>
)}
</button>
{showDropdown && (
<div className="absolute top-full left-0 mt-1 w-full min-w-[200px] max-w-[350px] bg-theme-settings-input-bg border border-white/10 rounded-md shadow-lg z-50 animate-fadeUpIn">
{availableFlows
.filter((flow) => flow.uuid !== flowId)
.map((flow) => (
<button
key={flow?.uuid || Math.random()}
onClick={() => {
navigate(paths.agents.editAgent(flow.uuid));
setShowDropdown(false);
}}
className="border-none w-full text-left px-2 py-1 text-sm text-theme-text-primary hover:bg-theme-action-menu-bg transition-colors duration-300"
>
<span className="block truncate">
{flow?.name || "Untitled Flow"}
</span>
</button>
))}
</div>
)}
</button>
{showDropdown && (
<div className="absolute top-full left-0 mt-1 w-full min-w-[200px] max-w-[350px] bg-theme-settings-input-bg border border-white/10 rounded-md shadow-lg z-50 animate-fadeUpIn">
{availableFlows
.filter((flow) => flow.uuid !== flowId)
.map((flow) => (
<button
key={flow?.uuid || Math.random()}
onClick={() => {
navigate(paths.agents.editAgent(flow.uuid));
setShowDropdown(false);
}}
className="border-none w-full text-left px-2 py-1 text-sm text-theme-text-primary hover:bg-theme-action-menu-bg transition-colors duration-300"
>
<span className="block truncate">
{flow?.name || "Untitled Flow"}
</span>
</button>
))}
</div>
)}
</div>
</div>
</div>

Expand All @@ -112,7 +123,7 @@ export default function HeaderMenu({
</button>
<button
onClick={onSaveFlow}
className="border-none bg-primary-button hover:opacity-80 text-black px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 flex items-center justify-center gap-2"
className="border-none bg-primary-button hover:opacity-80 text-black light:text-white px-3 py-2 rounded-lg text-sm font-medium transition-all duration-300 flex items-center justify-center gap-2"
>
Save
</button>
Expand Down