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

🐛 fix(formModal/index.tsx): add missing setTabsState function to TabsContext to fix error

Browse source 
🐛 fix(formModal/index.tsx): update formKeysData.input_keys value when chatValue changes to reflect user input
This commit is contained in:
Lucas Oliveira 2023-06-28 17:31:10 -03:00
commit 18acd7e257
1 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,7 @@ export default function FormModal({
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 } = useContext(TabsContext); 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);
@ -327,12 +327,14 @@ export default function FormModal({
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 // 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 key = Object.keys(tabsState[id.current].formKeysData.input_keys)[chatKey];
let values = keysValue.map((k, i) => (i == chatKey ? chatValue : k)); // array of values setTabsState((old) => {
let inputs = keys.reduce((object, key, index) => { let newTabsState = _.cloneDeep(old);
object[key] = values[index]; newTabsState[id.current].formKeysData.input_keys[key] = chatValue;
return object; return newTabsState;
}, {}); })
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);
@ -372,7 +374,9 @@ export default function FormModal({
} }
} }
console.log(tabsState[id.current])
return ( return (
(tabsState[id.current].formKeysData?.input_keys && tabsState[id.current].formKeysData?.memory_keys) &&
<Dialog open={open} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger className="hidden"></DialogTrigger>
{tabsState[flow.id].formKeysData && ( {tabsState[flow.id].formKeysData && (
@ -397,7 +401,7 @@ export default function FormModal({
</span> </span>
</div> </div>
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
{tabsState[id.current].formKeysData.input_keys.map((i, k) => ( {Object.keys(tabsState[id.current].formKeysData.input_keys).map((i, k) => (
<AccordionItem key={k} value={i}> <AccordionItem key={k} value={i}>
<AccordionTrigger><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger> <AccordionTrigger><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
<AccordionContent> <AccordionContent>
@ -414,9 +418,13 @@ export default function FormModal({
/> />
</div> </div>
<Textarea <Textarea
value={keysValue[k]} value={tabsState[id.current].formKeysData.input_keys[i]}
onChange={(e) => onChange={(e) =>
setKeysValue((old) => [...old.slice(0, k), e.target.value, ...old.slice(k + 1)]) setTabsState((old) => {
let newTabsState = _.cloneDeep(old);
newTabsState[id.current].formKeysData.input_keys[i] = e.target.value;
return newTabsState;
})
} }
disabled={chatKey === k} disabled={chatKey === k}
placeholder="Enter text..." placeholder="Enter text..."