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

feat: add vertical scrolling capability to starter examples (#2739)

Browse source 
* Fixed vertical size of newFlowModal

* Added vertical scroll options to newFlowModal and added wrapper to look nice
This commit is contained in:
Lucas Oliveira 2024-07-16 16:40:32 -03:00 • committed by GitHub
commit 424118be7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
View file

@ -40,7 +40,7 @@ export const switchCaseModalSize = (size: string) => {
break; break;
case "three-cards": case "three-cards":
minWidth = "min-w-[1066px]"; minWidth = "min-w-[1066px]";
height = "h-fit"; height = "max-h-[94vh]";
break; break;
case "large-thin": case "large-thin":
minWidth = "min-w-[65vw]"; minWidth = "min-w-[65vw]";

78
src/frontend/src/modals/newFlowModal/index.tsx
View file

@ -17,44 +17,48 @@ export default function NewFlowModal({
Get Started Get Started
</span> </span>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content overflowHidden>
<div className="mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll"> <div className="overflow-y-auto rounded-md border bg-muted p-4">
<NewFlowCardComponent /> <div className="grid w-full grid-cols-3 gap-4">
<NewFlowCardComponent />
{examples.find((e) => e.name == "Basic Prompting (Hello, World)") && ( {examples.find(
<UndrawCardComponent (e) => e.name == "Basic Prompting (Hello, World)",
key={0} ) && (
flow={ <UndrawCardComponent
examples.find( key={0}
(e) => e.name == "Basic Prompting (Hello, World)", flow={
)! examples.find(
} (e) => e.name == "Basic Prompting (Hello, World)",
/> )!
)} }
{examples.find((e) => e.name == "Memory Chatbot") && ( />
<UndrawCardComponent )}
key={1} {examples.find((e) => e.name == "Memory Chatbot") && (
flow={examples.find((e) => e.name == "Memory Chatbot")!} <UndrawCardComponent
/> key={1}
)} flow={examples.find((e) => e.name == "Memory Chatbot")!}
{examples.find((e) => e.name == "Document QA") && ( />
<UndrawCardComponent )}
key={2} {examples.find((e) => e.name == "Document QA") && (
flow={examples.find((e) => e.name == "Document QA")!} <UndrawCardComponent
/> key={2}
)} flow={examples.find((e) => e.name == "Document QA")!}
{examples.find((e) => e.name == "Blog Writer") && ( />
<UndrawCardComponent )}
key={3} {examples.find((e) => e.name == "Blog Writer") && (
flow={examples.find((e) => e.name == "Blog Writer")!} <UndrawCardComponent
/> key={3}
)} flow={examples.find((e) => e.name == "Blog Writer")!}
{examples.find((e) => e.name == "Vector Store RAG") && ( />
<UndrawCardComponent )}
key={4} {examples.find((e) => e.name == "Vector Store RAG") && (
flow={examples.find((e) => e.name == "Vector Store RAG")!} <UndrawCardComponent
/> key={4}
)} flow={examples.find((e) => e.name == "Vector Store RAG")!}
/>
)}
</div>
</div> </div>
</BaseModal.Content> </BaseModal.Content>
</BaseModal> </BaseModal>