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

🐛 fix(AccordionComponent): fix formatting and add missing semicolons to improve code readability and maintainability

Browse source 
🐛 fix(codeAreaComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(dropdownComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(floatComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(inputFileComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(inputListComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(intComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(promptComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(textAreaComponent): fix formatting and add missing semicolons to improve code readability and maintainability
🐛 fix(ui/accordion.tsx): fix formatting and add missing semicolons to improve code readability and maintainability

The changes were made to fix formatting issues and add missing semicolons in the code. This improves code readability and maintainability, making it easier for developers to understand and work with the code.

🐛 fix(constants.tsx): fix formatting and indentation issues in the buildTweakObject function
🐛 fix(popUpContext.tsx): remove unnecessary empty line
🐛 fix(tabsContext.tsx): remove unnecessary empty line
🐛 fix(ApiModal/index.tsx): fix formatting and indentation issues
🐛 fix(codeAreaModal/index.tsx): fix formatting and indentation issues
🐛 fix(types/components/index.ts): remove unnecessary empty line
The changes in constants.tsx fix formatting and indentation issues in the buildTweakObject function to improve code readability. The changes in popUpContext.tsx, tabsContext.tsx, ApiModal/index.tsx, codeAreaModal/index.tsx, and types/components/index.ts fix formatting and indentation issues to ensure consistent code style.
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-06-29 19:36:22 -03:00
commit 60032d6146
16 changed files with 76 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -17,15 +17,17 @@ export default function AccordionComponent({
children,
open = [],
}: AccordionComponentType) {
const [value, setValue] = useState(open.length == 0 ? "" : getOpenAccordion());
const [value, setValue] = useState(
open.length == 0 ? "" : getOpenAccordion()
);
function getOpenAccordion(){
function getOpenAccordion() {
let value = "";
open.forEach(el => {
if(el == trigger){
open.forEach((el) => {
if (el == trigger) {
value = trigger;
}
})
}
});
return value;
}

7
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -12,7 +12,9 @@ export default function CodeAreaComponent({
disabled,
editNode = false,
}: TextAreaComponentType) {
const [myValue, setMyValue] = useState(typeof value == "string" ? value : JSON.stringify(value));
const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value)
);
const { openPopUp } = useContext(PopUpContext);
useEffect(() => {
if (disabled) {
@ -47,7 +49,8 @@ export default function CodeAreaComponent({
className={
editNode
? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200" : "")

12
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -13,7 +13,7 @@ export default function Dropdown({
onSelect,
editNode = false,
numberOfOptions = 0,
apiModal = false
apiModal = false,
}: DropDownComponentType) {
const { closePopUp } = useContext(PopUpContext);
@ -67,14 +67,12 @@ export default function Dropdown({
leaveTo="opacity-0"
>
<Listbox.Options
className={
classNames(
editNode
className={classNames(
editNode
? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
: "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
apiModal ? 'w-[250px] mb-2' : 'absolute'
)
}
apiModal ? "w-[250px] mb-2" : "absolute"
)}
>
{options.map((option, id) => (
<Listbox.Option

3
src/frontend/src/components/floatComponent/index.tsx
View file

@ -59,7 +59,8 @@ export default function FloatComponent({
className={
editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")

3
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -104,7 +104,8 @@ export default function InputFileComponent({
className={
editNode
? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")

7
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -11,8 +11,8 @@ export default function InputListComponent({
value,
onChange,
disabled,
editNode = false,
onAddInput
editNode = false,
onAddInput,
}: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]);
const { closePopUp } = useContext(PopUpContext);
@ -43,7 +43,8 @@ export default function InputListComponent({
className={
editNode
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") +
"focus:placeholder-transparent"

3
src/frontend/src/components/intComponent/index.tsx
View file

@ -73,7 +73,8 @@ export default function IntComponent({
className={
editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
INPUT_STYLE +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")

3
src/frontend/src/components/promptComponent/index.tsx
View file

@ -50,7 +50,8 @@ export default function PromptAreaComponent({
className={
editNode
? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}

3
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -53,7 +53,8 @@ export default function TextAreaComponent({
className={
editNode
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
INPUT_STYLE + (disabled ? " bg-gray-200 " : "")
INPUT_STYLE +
(disabled ? " bg-gray-200 " : "")
: "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}

27
src/frontend/src/components/ui/accordion.tsx
View file

@ -1,12 +1,11 @@
"use client"
"use client";
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "@radix-ui/react-icons"
import { cn } from "../../utils"
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { cn } from "../../utils";
const Accordion = AccordionPrimitive.Root
const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
@ -17,8 +16,8 @@ const AccordionItem = React.forwardRef<
className={cn("border-b", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"
));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
@ -37,8 +36,8 @@ const AccordionTrigger = React.forwardRef<
<ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
@ -54,7 +53,7 @@ const AccordionContent = React.forwardRef<
>
<div className="pb-4 pt-0">{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

27
src/frontend/src/constants.tsx
View file

@ -71,7 +71,9 @@ FLOW_ID = "${flowId}"
# You can tweak the flow by adding a tweaks dictionary
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
TWEAKS = ${
tweak && tweak.length > 0 ? buildTweakObject(tweak): JSON.stringify(tweaks, null, 2)
tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}
def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
@ -111,7 +113,9 @@ export const getCurlCode = (flow: FlowType, tweak?): string => {
}/api/v1/process/${flowId} \\
-H 'Content-Type: application/json' \\
-d '{"inputs": {"input": message}, "tweaks": ${
tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}}'`;
};
/**
@ -124,25 +128,26 @@ export const getPythonCode = (flow: FlowType, tweak?): string => {
const tweaks = buildTweaks(flow);
return `from langflow import load_flow_from_json
TWEAKS = ${
tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
tweak && tweak.length > 0
? buildTweakObject(tweak)
: JSON.stringify(tweaks, null, 2)
}
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
# Now you can use it like any chain
flow("Hey, have you heard of LangFlow?")`;
};
function buildTweakObject(tweak){
tweak.forEach(el => {
Object.keys(el).forEach(key => {
function buildTweakObject(tweak) {
tweak.forEach((el) => {
Object.keys(el).forEach((key) => {
for (let kp in el[key]) {
try{
try {
el[key][kp] = JSON.parse(el[key][kp]);
}
catch{}
} catch {}
}
})
});
});
const tweakString = JSON.stringify(tweak, null, 2);
return tweakString;
}

6
src/frontend/src/contexts/popUpContext.tsx
View file

@ -13,7 +13,6 @@ interface PopUpProviderProps {
children: React.ReactNode;
}
const PopUpProvider = ({ children }: PopUpProviderProps) => {
const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
@ -27,9 +26,10 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
const [closeEdit, setCloseEdit] = useState("");
return (
<PopUpContext.Provider value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}>
<PopUpContext.Provider
value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
>
{children}
{popUpElements[0]}
</PopUpContext.Provider>

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -648,7 +648,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
setTabsState,
paste,
getTweak,
setTweak
setTweak,
}}
>
{children}

19
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
useEffect(() => {
if (closeEdit !== "") {
tweak.current = getTweak;
if(tweak.current.length > 0){
if (tweak.current.length > 0) {
setActiveTab("3");
openAccordions();
}
else{
} else {
startTweaks();
}
} else {
@ -250,14 +249,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function openAccordions() {
let accordionsToOpen = [];
tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen);
}
});
tweak.current.forEach((el) => {
Object.keys(el).forEach((key) => {
if (Object.keys(el[key]).length > 0) {
accordionsToOpen.push(key);
setOpenAccordion(accordionsToOpen);
}
});
});
}
return (

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -34,7 +34,7 @@ export default function CodeAreaModal({
const [code, setCode] = useState(value);
const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp,setCloseEdit } = useContext(PopUpContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef();
function setModalOpen(x: boolean) {
setOpen(x);

3
src/frontend/src/types/components/index.ts
View file

@ -44,7 +44,6 @@ export type InputListComponentType = {
disabled: boolean;
editNode?: boolean;
onAddInput?: (value?: string[]) => void;
};
export type TextAreaComponentType = {
@ -114,7 +113,7 @@ export type RadialProgressType = {
color?: string;
};
export type AccordionComponentType = {
export type AccordionComponentType = {
children?: ReactElement;
open?: string[];
trigger?: string;