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

🐛 fix(formModal): fix keysValue state initialization to prevent undefined error

Browse source 
✨ feat(formModal): add support for memory_keys in input variables accordion to display memory keys in chat form modal
This commit is contained in:
Lucas Oliveira 2023-06-27 20:58:01 -03:00
commit 8c721b0b8e
1 changed files with 123 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,16 @@ import { alertContext } from "../../contexts/alertContext";
import { validateNodes } from "../../utils"; import { validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { X, MessagesSquare, Eraser, TerminalSquare, MessageCircle, MessageSquareDashed, MessageSquare, Variable } from "lucide-react"; import {
X,
MessagesSquare,
Eraser,
TerminalSquare,
MessageCircle,
MessageSquareDashed,
MessageSquare,
Variable,
} from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
@ -74,8 +83,10 @@ export default function FormModal({
}, [open]); }, [open]);
useEffect(() => { useEffect(() => {
id.current = flow.id; id.current = flow.id;
setKeysValue(Array(tabsState[flow.id].formKeysData.input_keys.length).fill("")); setKeysValue(
}, [flow.id]); Array(tabsState[flow.id].formKeysData.input_keys.length).fill("")
);
}, [flow.id, tabsState[flow.id], tabsState[flow.id].formKeysData]);
var isStream = false; var isStream = false;
@ -316,7 +327,7 @@ export default function FormModal({
setLockChat(true); setLockChat(true);
// Message variable makes a object with the keys being the names from tabsState[flow.id].formKeysData.input_keys and the values being the keysValue of the correspondent index // Message variable makes a object with the keys being the names from tabsState[flow.id].formKeysData.input_keys and the values being the keysValue of the correspondent index
let keys = tabsState[flow.id].formKeysData.input_keys; // array of keys let keys = tabsState[flow.id].formKeysData.input_keys; // array of keys
let values = keysValue.map((k, i) => i == chatKey ? chatValue : k); // array of values let values = keysValue.map((k, i) => (i == chatKey ? chatValue : k)); // array of values
let message = keys.reduce((object, key, index) => { let message = keys.reduce((object, key, index) => {
object[key] = values[index]; object[key] = values[index];
return object; return object;
@ -354,13 +365,14 @@ export default function FormModal({
} }
function handleOnCheckedChange(checked: boolean, index: number) { function handleOnCheckedChange(checked: boolean, index: number) {
if(checked === true){ if (checked === true) {
setChatKey(index); setChatKey(index);
} }
} }
return ( return (
<Dialog open={open} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger className="hidden"></DialogTrigger>
{tabsState[flow.id].formKeysData && (
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw]">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
@ -390,13 +402,22 @@ export default function FormModal({
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Label htmlFor="airplane-mode">From Chat</Label> <Label htmlFor="airplane-mode">From Chat</Label>
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === k } enabled={chatKey === k}
setEnabled={(value) => handleOnCheckedChange(value, k)} setEnabled={(value) =>
handleOnCheckedChange(value, k)
}
size="small" size="small"
disabled={false} disabled={false}
/> />
</div> </div>
<Textarea value={keysValue[k]} onChange={(e) => setKeysValue({...keysValue, [k]: e.target.value})} disabled={chatKey === k} placeholder="Enter text..."></Textarea> <Textarea
value={keysValue[k]}
onChange={(e) =>
setKeysValue({ ...keysValue, [k]: e.target.value })
}
disabled={chatKey === k}
placeholder="Enter text..."
></Textarea>
</div> </div>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
@ -463,6 +484,7 @@ export default function FormModal({
</div> </div>
</div> </div>
</DialogContent> </DialogContent>
)}
</Dialog> </Dialog>
); );
} }