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

🐛 fix(formModal/index.tsx): fix initial value of chatValue to correctly retrieve value from tabsState

Browse source 
🐛 fix(formModal/index.tsx): fix initial value of chatKey to correctly retrieve key from tabsState
🐛 fix(formModal/index.tsx): fix handleOnCheckedChange to correctly set chatKey and chatValue
🐛 fix(formModal/index.tsx): fix onChange of Textarea to correctly update tabsState input_keys
✨ feat(formModal/index.tsx): add support for clearing input value when form is submitted
✨ feat(formModal/index.tsx): add support for clearing input value when form is closed
This commit is contained in:
Lucas Oliveira 2023-06-29 23:13:29 -03:00
commit 4875098209
1 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,17 +40,17 @@ export default function FormModal({
setOpen: Function; setOpen: Function;
flow: FlowType; flow: FlowType;
}) { }) {
const [chatValue, setChatValue] = useState(""); const { tabsState, setTabsState } = useContext(TabsContext);
const [chatValue, setChatValue] = useState(tabsState[flow.id].formKeysData.input_keys[Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k))]);
const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]); const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const { setErrorData, setNoticeData } = useContext(alertContext); const { setErrorData, setNoticeData } = useContext(alertContext);
const { tabsState, setTabsState } = useContext(TabsContext);
const ws = useRef<WebSocket | null>(null); const ws = useRef<WebSocket | null>(null);
const [lockChat, setLockChat] = useState(false); const [lockChat, setLockChat] = useState(false);
const isOpen = useRef(open); const isOpen = useRef(open);
const messagesRef = useRef(null); const messagesRef = useRef(null);
const id = useRef(flow.id); const id = useRef(flow.id);
const [chatKey, setChatKey] = useState(0); const [chatKey, setChatKey] = useState(Object.keys(tabsState[flow.id].formKeysData.input_keys).find((k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)));
useEffect(() => { useEffect(() => {
if (messagesRef.current) { if (messagesRef.current) {
@ -319,15 +319,7 @@ export default function FormModal({
let nodeValidationErrors = validateNodes(reactFlowInstance); let nodeValidationErrors = validateNodes(reactFlowInstance);
if (nodeValidationErrors.length === 0) { if (nodeValidationErrors.length === 0) {
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
let key = Object.keys(tabsState[id.current].formKeysData.input_keys)[chatKey];
setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[key] = chatValue;
return newTabsState;
})
let inputs = tabsState[id.current].formKeysData.input_keys; let inputs = tabsState[id.current].formKeysData.input_keys;
inputs[key] = chatValue;
setChatValue(""); setChatValue("");
const message = formatMessage(inputs); const message = formatMessage(inputs);
addChatHistory(message, true); addChatHistory(message, true);
@ -338,6 +330,11 @@ export default function FormModal({
name: flow.name, name: flow.name,
description: flow.description, description: flow.description,
}); });
setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[chatKey] = "";
return newTabsState;
});
} else { } else {
setErrorData({ setErrorData({
title: "Oops! Looks like you missed some required information:", title: "Oops! Looks like you missed some required information:",
@ -361,9 +358,10 @@ export default function FormModal({
setOpen(x); setOpen(x);
} }
function handleOnCheckedChange(checked: boolean, index: number) { function handleOnCheckedChange(checked: boolean, i: string) {
if (checked === true) { if (checked === true) {
setChatKey(index); setChatKey(i);
setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);
} }
} }
return ( return (
@ -383,7 +381,7 @@ export default function FormModal({
</DialogHeader> </DialogHeader>
<div className="flex h-[80vh] w-full mt-2 "> <div className="flex h-[80vh] w-full mt-2 ">
<div className="w-1/4 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6"> <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<div className="flex py-2"> <div className="flex py-2">
<Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable> <Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
<span className="text-md font-semibold text-gray-800 dark:text-white"> <span className="text-md font-semibold text-gray-800 dark:text-white">
@ -400,9 +398,9 @@ export default function FormModal({
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label> <Label htmlFor="airplane-mode" className="-mt-1">From Chat</Label>
<ToggleShadComponent <ToggleShadComponent
enabled={chatKey === k || tabsState[id.current].formKeysData.handle_keys.some((t) => t === i) } enabled={chatKey === i}
setEnabled={(value) => setEnabled={(value) =>
handleOnCheckedChange(value, k) handleOnCheckedChange(value, i)
} }
size="small" size="small"
disabled={false} disabled={false}
@ -411,14 +409,16 @@ export default function FormModal({
} }
<Textarea <Textarea
value={tabsState[id.current].formKeysData.input_keys[i]} value={tabsState[id.current].formKeysData.input_keys[i]}
onChange={(e) => onChange={(e) => {
if(!tabsState[id.current].formKeysData.handle_keys.some((t) => t === i))
setTabsState((old) => { setTabsState((old) => {
let newTabsState = _.cloneDeep(old); let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[i] = e.target.value; newTabsState[id.current].formKeysData.input_keys[i] = e.target.value;
return newTabsState; return newTabsState;
}) })
} }
disabled={chatKey === k} }
disabled={chatKey === i}
placeholder="Enter text..." placeholder="Enter text..."
></Textarea> ></Textarea>
</div> </div>
@ -486,7 +486,11 @@ export default function FormModal({
chatValue={chatValue} chatValue={chatValue}
lockChat={lockChat} lockChat={lockChat}
sendMessage={sendMessage} sendMessage={sendMessage}
setChatValue={setChatValue} setChatValue={(value) => {setChatValue(value); setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[chatKey] = chatValue;
return newTabsState;
});}}
inputRef={ref} inputRef={ref}
/> />
</div> </div>