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

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

@ -14,10 +14,11 @@ export default function AccordionComponent({
children,
}: AccordionComponentType) {
return <>
<Accordion type="single" collapsible>
<AccordionItem value="item-1" className="border-none">
<AccordionTrigger className="ml-3">{trigger}</AccordionTrigger>
<AccordionTrigger className="ml-3">{trigger}</AccordionTrigger>
<AccordionContent>
{children}
</AccordionContent>

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

@ -53,6 +53,8 @@ const TabsContextInitialValue: TabsContextType = {
tabsState: {},
setTabsState: (state: TabsState) => {},
getNodeId: (nodeType: string) => "",
setTweak: (tweak: any) => {},
getTweak: {},
paste: (
selection: { nodes: any; edges: any },
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 [lastCopiedSelection, setLastCopiedSelection] = useState(null);
const [tabsState, setTabsState] = useState<TabsState>({});
const [getTweak, setTweak] = useState({});
const newNodeId = useRef(uid());
function incrementNodeId() {
@ -634,6 +637,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
tabsState,
setTabsState,
paste,
getTweak,
setTweak
}}
>
{children}

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

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

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

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