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

🐛 fix(AccordionComponent): remove extra whitespace in AccordionTrigger className for consistent styling

Browse source 
✨ feat(tabsContext): add setTweak and getTweak functions to TabsContext to manage tweak state

🐛 fix(ApiModal): remove unused imports and console.log statements

✨ feat(ApiModal): add functionality to get and set tweak state in TabsContext

🐛 fix(ApiModal): fix key prop warning in map function

🐛 fix(ApiModal): fix unused variable warning

✨ feat(ApiModal): add getValue function to get the value from tweak state or default value

🐛 fix(ApiModal): remove unused onChange functions

🐛 fix(ApiModal): fix key prop warning in map function

🐛 fix(ApiModal): fix unused variable warning

✨ feat(ApiModal): add functionality to get and set tweak state in TabsContext

🐛 fix(ApiModal): remove unused imports and console.log statements

✨ feat(tabsContext): add setTweak and getTweak functions to TabsContext to manage tweak state
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-27 23:35:27 -03:00
commit 4ac1326f3a
4 changed files with 67 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ export default function AccordionComponent({
children, children,
}: AccordionComponentType) { }: AccordionComponentType) {
return <> return <>
<Accordion type="single" collapsible> <Accordion type="single" collapsible>
<AccordionItem value="item-1" className="border-none"> <AccordionItem value="item-1" className="border-none">

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

@ -53,6 +53,8 @@ const TabsContextInitialValue: TabsContextType = {
tabsState: {}, tabsState: {},
setTabsState: (state: TabsState) => {}, setTabsState: (state: TabsState) => {},
getNodeId: (nodeType: string) => "", getNodeId: (nodeType: string) => "",
setTweak: (tweak: any) => {},
getTweak: {},
paste: ( paste: (
selection: { nodes: any; edges: any }, selection: { nodes: any; edges: any },
position: { x: number; y: number; paneX?: number; paneY?: number } position: { x: number; y: number; paneX?: number; paneY?: number }
@ -73,6 +75,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const { templates, reactFlowInstance } = useContext(typesContext); const { templates, reactFlowInstance } = useContext(typesContext);
const [lastCopiedSelection, setLastCopiedSelection] = useState(null); const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
const [tabsState, setTabsState] = useState<TabsState>({}); const [tabsState, setTabsState] = useState<TabsState>({});
const [getTweak, setTweak] = useState({});
const newNodeId = useRef(uid()); const newNodeId = useRef(uid());
function incrementNodeId() { function incrementNodeId() {
@ -634,6 +637,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
tabsState, tabsState,
setTabsState, setTabsState,
paste, paste,
getTweak,
setTweak
}} }}
> >
{children} {children}

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

@ -48,6 +48,8 @@ import PromptAreaComponent from "../../components/promptComponent";
import TextAreaComponent from "../../components/textAreaComponent"; import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
import { cloneDeep } from "lodash";
import { TabsContext } from "../../contexts/tabsContext";
export default function ApiModal({ flow }: { flow: FlowType }) { export default function ApiModal({ flow }: { flow: FlowType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -57,7 +59,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const [enabled, setEnabled] = useState(null); const [enabled, setEnabled] = useState(null);
const tweak = useRef([]); const tweak = useRef([]);
const { setTweak, getTweak } = useContext(TabsContext);
const copyToClipboard = () => { const copyToClipboard = () => {
if (!navigator.clipboard || !navigator.clipboard.writeText) { if (!navigator.clipboard || !navigator.clipboard.writeText) {
return; return;
@ -78,7 +80,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
} }
} }
const pythonApiCode = getPythonApiCode(flow, tweak.current); const pythonApiCode = getPythonApiCode(flow, tweak.current);
const curl_code = getCurlCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current);
const pythonCode = getPythonCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current);
@ -172,7 +173,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
tabs[1].code = pythonApiCode; tabs[1].code = pythonApiCode;
tabs[2].code = pythonCode; tabs[2].code = pythonCode;
console.log(tweak.current); setTweak(tweak.current);
} }
function buildContent(value) { function buildContent(value) {
@ -184,6 +185,33 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
return htmlContent; return htmlContent;
} }
function getValue(value, node, template){
let returnValue = value ?? "";
if(getTweak.length > 0){
for (const obj of getTweak) {
// Obtém a chave do objeto interno
const key = Object.keys(obj)[0];
// Obtém o valor do objeto interno
const value = obj[key];
if(key == node['id']){
Object.keys(value).forEach((key) => {
if(key == template['name']){
returnValue = value[key];
}
})
}
}
}
else{
return value ?? "";
}
return returnValue;
}
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
@ -251,7 +279,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
)} )}
> >
{flow["data"]["nodes"].map((t: any, index) => ( {flow["data"]["nodes"].map((t: any, index) => (
<div className="px-3"> <div className="px-3" key={index}>
<AccordionComponent trigger={t["data"]["id"]}> <AccordionComponent trigger={t["data"]["id"]}>
<div className="flex flex-col gap-5 h-fit"> <div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
@ -318,7 +346,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
: t.data.node : t.data.node
.template[n].value .template[n].value
} }
onChange={(k) => {}} onChange={(k) => {
}}
onAddInput={(k) => { onAddInput={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
@ -348,7 +378,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
.template[n] .template[n]
.value ?? "" .value ?? ""
} }
onChange={(k) => {}} onChange={(k) => {
}}
/> />
</ShadTooltip> </ShadTooltip>
</div> </div>
@ -361,8 +392,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
.password ?? false .password ?? false
} }
value={ value={
t.data.node.template[n]
.value ?? "" getValue(t.data.node.template[n]
.value, t.data, t.data.node.template[n])
} }
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
@ -420,7 +453,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
.value ?? "" .value ?? ""
} }
onChange={(k: any) => { onChange={(k: any) => {
}} }}
fileTypes={ fileTypes={
t.data.node.template[n] t.data.node.template[n]
@ -444,8 +476,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
t.data.node.template[n] getValue(t.data.node.template[n]
.value ?? "" .value, t.data, t.data.node.template[n])
} }
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
@ -468,17 +500,21 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.options .options
} }
onSelect={(k) => onSelect={(k) =>{
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
) )
} }
}
value={ value={
t.data.node.template[n] getValue(t.data.node.template[n]
.value ?? .value, t.data, t.data.node.template[n])
"Choose an option"
} }
></Dropdown> ></Dropdown>
</div> </div>
@ -489,8 +525,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={
t.data.node.template[n] getValue(t.data.node.template[n]
.value ?? "" .value, t.data, t.data.node.template[n])
} }
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
@ -518,7 +554,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value ?? "" .value ?? ""
} }
onChange={(k) => {}} onChange={(k) => {
}}
/> />
</div> </div>
</ShadTooltip> </ShadTooltip>
@ -539,7 +576,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.value ?? "" .value ?? ""
} }
onChange={(k) => {}} onChange={(k) => {
}}
/> />
</div> </div>
</ShadTooltip> </ShadTooltip>

2
src/frontend/src/types/tabs/index.ts
View file

@ -28,6 +28,8 @@ export type TabsContextType = {
) => void; ) => void;
lastCopiedSelection: { nodes: any; edges: any }; lastCopiedSelection: { nodes: any; edges: any };
setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void; setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
setTweak: (tweak: any) => void;
getTweak: any;
}; };
export type TabsState = { export type TabsState = {