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

🐛 fix(formModal/index.tsx): handle case when tabsState or formKeysData is undefined to prevent errors

Browse source 
✨ feat(formModal/index.tsx): add support for displaying input keys and handling input changes in the form modal
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-08-07 20:28:41 -03:00
commit 2abc0d2fb4
1 changed files with 72 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

139
src/frontend/src/modals/formModal/index.tsx
View file

@ -67,14 +67,17 @@ export default function FormModal({
const id = useRef(flow.id); const id = useRef(flow.id);
const tabsStateFlowId = tabsState[flow.id]; const tabsStateFlowId = tabsState[flow.id];
const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData; const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
const [chatKey, setChatKey] = useState( const [chatKey, setChatKey] = useState(() => {
Object.keys(tabsState[flow.id].formKeysData.input_keys).find( if (tabsState[flow.id]?.formKeysData?.input_keys) {
(k) => return Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
!tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) && (k) =>
tabsState[flow.id].formKeysData.input_keys[k] === "" !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) &&
) tabsState[flow.id].formKeysData.input_keys[k] === ""
); );
}
// TODO: return a sensible default
return "";
});
useEffect(() => { useEffect(() => {
if (messagesRef.current) { if (messagesRef.current) {
messagesRef.current.scrollTop = messagesRef.current.scrollHeight; messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
@ -419,68 +422,70 @@ export default function FormModal({
</div> </div>
</div> </div>
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( {tabsState[id.current]?.formKeysData?.input_keys
(i, k) => ( ? Object.keys(
<div className="file-component-accordion-div" key={k}> tabsState[id.current].formKeysData.input_keys
<AccordionComponent ).map((i, k) => (
trigger={ <div className="file-component-accordion-div" key={k}>
<div className="file-component-badge-div"> <AccordionComponent
<Badge variant="gray" size="md"> trigger={
{i} <div className="file-component-badge-div">
</Badge> <Badge variant="gray" size="md">
{i}
</Badge>
<div <div
className="-mb-1" className="-mb-1"
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
}}
>
<ToggleShadComponent
enabled={chatKey === i}
setEnabled={(value) =>
handleOnCheckedChange(value, i)
}
size="small"
disabled={tabsState[
id.current
].formKeysData.handle_keys.some((t) => t === i)}
/>
</div>
</div>
}
key={k}
keyValue={i}
>
<div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some(
(t) => t === i
) && (
<div className="font-normal text-muted-foreground ">
Source: Component
</div>
)}
<Textarea
className="custom-scroll"
value={
tabsState[id.current].formKeysData.input_keys[i]
}
onChange={(e) => {
setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[
id.current
].formKeysData.input_keys[i] = e.target.value;
return newTabsState;
});
}} }}
> disabled={chatKey === i}
<ToggleShadComponent placeholder="Enter text..."
enabled={chatKey === i} ></Textarea>
setEnabled={(value) =>
handleOnCheckedChange(value, i)
}
size="small"
disabled={tabsState[
id.current
].formKeysData.handle_keys.some((t) => t === i)}
/>
</div>
</div> </div>
} </AccordionComponent>
key={k} </div>
keyValue={i} ))
> : null}
<div className="file-component-tab-column">
{tabsState[id.current].formKeysData.handle_keys.some(
(t) => t === i
) && (
<div className="font-normal text-muted-foreground ">
Source: Component
</div>
)}
<Textarea
className="custom-scroll"
value={
tabsState[id.current].formKeysData.input_keys[i]
}
onChange={(e) => {
setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[
i
] = e.target.value;
return newTabsState;
});
}}
disabled={chatKey === i}
placeholder="Enter text..."
></Textarea>
</div>
</AccordionComponent>
</div>
)
)}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
<div className="file-component-accordion-div" key={k}> <div className="file-component-accordion-div" key={k}>
<AccordionComponent <AccordionComponent