jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Design tweaks canvas actions and templates based on uplift feedback (#4418)

Browse source 
* uplift sweep for canvas actions and templates

* [autofix.ci] apply automated fixes

* test fix

* test fix 2

* one more fix

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
This commit is contained in:
Mike Fortman 2024-11-06 09:52:21 -06:00 • committed by GitHub
commit 16924958da
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/components/canvasControlsComponent/index.tsx
View file

@ -108,7 +108,9 @@ const CanvasControls = ({ children }) => {
tooltipText={isInteractive ? "Lock" : "Unlock"}
onClick={onToggleInteractivity}
backgroundClasses={isInteractive ? "" : "bg-destructive"}
iconClasses={isInteractive ? "" : "text-primary-foreground"}
iconClasses={
isInteractive ? "" : "text-primary-foreground dark:text-primary"
}
testId="lock_unlock"
/>
{children}

6
src/frontend/src/components/flowToolbarComponent/index.tsx
View file

@ -76,10 +76,10 @@ export default function FlowToolbar(): JSX.Element {
<button
disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames(
"relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out hover:bg-accent",
"relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-semibold text-foreground transition-all duration-150 ease-in-out",
!hasApiKey || !validApiKey || !hasStore
? "text-muted-foreground"
: "",
? "cursor-not-allowed text-muted-foreground"
: "hover:bg-accent",
)}
data-testid="shared-button-flow"
onClick={() => {

10
src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx
View file

@ -12,21 +12,21 @@ export default function GetStartedComponent() {
// Define the card data
const cardData: CardData[] = [
{
bg: "linear-gradient(145deg, #7CC0FF 0%, #96B9FF 50%, #CAA5FF 100%)",
bg: "radial-gradient(ellipse at top left, #A3E8EF, #ADF6FD, #9676fd)",
spiralImage: memoryChatbotSpiral,
icon: "MessagesSquare",
category: "Chatbot",
category: "Prompting",
flow: examples.find((example) => example.name === "Memory Chatbot"),
},
{
bg: "linear-gradient(145deg, #388295 0%, #52B0C4 50%, #7CAB64 100%)",
bg: "radial-gradient(ellipse at top right, #f599fe, #de8afa, #9a5af7)",
spiralImage: vectorRagSpiral,
icon: "Database",
category: "Vector RAG",
category: "RAG",
flow: examples.find((example) => example.name === "Vector Store RAG"),
},
{
bg: "linear-gradient(145deg, #DB52C2 0%, #DC4F88 50%, #FFA395 100%)",
bg: "radial-gradient(ellipse at top left, #ed93f5, #e0bae9, #a5f0af)",
spiralImage: multiAgentSpiral,
icon: "Bot",
category: "Agents",

6
src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
View file

@ -20,7 +20,7 @@ export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
const isMobile = useIsMobile();
return (
<Sidebar collapsible={isMobile ? "icon" : "none"}>
<Sidebar collapsible={isMobile ? "icon" : "none"} className="max-w-[230px]">
<SidebarContent className="gap-0 p-2">
<div
className={cn("relative flex items-center gap-2 px-2 py-3 md:px-4")}
@ -33,11 +33,11 @@ export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
/>
<div
className={cn(
"flex h-8 shrink-0 items-center rounded-md text-lg font-semibold leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
"text-base-semibold flex h-8 shrink-0 items-center rounded-md leading-none tracking-tight text-primary outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
)}
>
Categories
Templates
</div>
</div>

4
src/frontend/src/modals/templatesModal/index.tsx
View file

@ -32,9 +32,9 @@ export default function TemplatesModal({
],
},
{
title: "Usecase",
title: "Methodology",
items: [
{ title: "Chatbots", icon: "MessagesSquare", id: "chatbots" },
{ title: "Prompting", icon: "MessagesSquare", id: "chatbots" },
{ title: "RAG", icon: "Database", id: "rag" },
{ title: "Agents", icon: "Bot", id: "agents" },
],

6
src/frontend/tests/extended/features/starter-projects.spec.ts
View file

@ -21,7 +21,7 @@ test("user must be able to interact with starter projects", async ({
modalCount = await page.getByTestId("modal-title")?.count();
}
expect(page.getByText("Start from scratch")).toBeVisible();
expect(page.getByText("Start from scratch", { exact: true })).toBeVisible();
expect(page.getByRole("button", { name: "Blank Flow" })).toBeVisible();
await page.getByTestId("side_nav_options_all-templates").click();
@ -48,9 +48,9 @@ test("user must be able to interact with starter projects", async ({
await page.waitForTimeout(500);
await page.getByTestId(`side_nav_options_chatbots`).click();
await page.getByTestId(`side_nav_options_prompting`).click();
await page.waitForTimeout(500);
expect(page.getByTestId(`category_title_chatbots`)).toBeVisible();
expect(page.getByTestId(`category_title_prompting`)).toBeVisible();
await page.getByTestId(`side_nav_options_rag`).click();
await page.waitForTimeout(500);

2
src/frontend/tests/extended/features/twoEdges.spec.ts
View file

@ -29,7 +29,7 @@ test("user should be able to see multiple edges and interact with them", async (
}
await page.waitForTimeout(1000);
await page.getByText("Vector RAG", { exact: true }).last().click();
await page.getByText("Vector Store RAG", { exact: true }).last().click();
await page.waitForTimeout(3000);
await page.getByText("Retriever", { exact: true }).first().isVisible();
await page.getByText("Search Results", { exact: true }).first().isVisible();