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

fix: add verification for formKeysData

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-07-04 23:58:54 -03:00
commit 834429cd37
1 changed files with 39 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,13 +40,26 @@ export default function FormModal({
flow: FlowType; flow: FlowType;
}) { }) {
const { tabsState, setTabsState } = useContext(TabsContext); const { tabsState, setTabsState } = useContext(TabsContext);
const [chatValue, setChatValue] = useState( const [chatValue, setChatValue] = useState(() => {
tabsState[flow.id].formKeysData.input_keys[ try {
Object.keys(tabsState[flow.id].formKeysData.input_keys).find( const { formKeysData } = tabsState[flow.id];
(k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) if (!formKeysData) throw new Error("formKeysData is undefined");
)
] const inputKeys = formKeysData.input_keys;
); const handleKeys = formKeysData.handle_keys;
const keyToUse = Object.keys(inputKeys).find(
(k) => !handleKeys.some((j) => j === k)
);
return inputKeys[keyToUse];
} catch (error) {
console.error(error);
// return a sensible default or `undefined` if no default is possible
return undefined;
}
});
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);
@ -382,26 +395,26 @@ export default function FormModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Chat</span> <span className="pr-2">Chat</span>
<TerminalSquare <TerminalSquare
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-[80vh] w-full mt-2 "> <div className="mt-2 flex h-[80vh] w-full ">
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6"> <div className="mr-6 flex h-full w-2/5 flex-col justify-start overflow-auto scrollbar-hide">
<div className="flex py-2 items-center"> <div className="flex items-center py-2">
<Variable className=" -ml-px w-4 h-4 mr-1 text-primary"></Variable> <Variable className=" -ml-px mr-1 h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-md font-semibold text-primary">
Input Variables Input Variables
</span> </span>
</div> </div>
<div className="flex justify-between pt-2 items-center"> <div className="flex items-center justify-between pt-2">
<div className="flex mr-2.5 items-center"> <div className="mr-2.5 flex items-center">
<span className="text-sm font-medium text-primary">Name</span> <span className="text-sm font-medium text-primary">Name</span>
</div> </div>
<div className="flex mr-2.5 items-center"> <div className="mr-2.5 flex items-center">
<span className="text-sm font-medium text-primary"> <span className="text-sm font-medium text-primary">
Chat Input Chat Input
</span> </span>
@ -413,7 +426,7 @@ export default function FormModal({
<div className="flex items-start gap-3" key={k}> <div className="flex items-start gap-3" key={k}>
<AccordionItem className="w-full" key={k} value={i}> <AccordionItem className="w-full" key={k} value={i}>
<AccordionTrigger className="flex gap-2"> <AccordionTrigger className="flex gap-2">
<div className="flex items-center w-full justify-between"> <div className="flex w-full items-center justify-between">
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{i} {i}
</Badge> </Badge>
@ -438,7 +451,7 @@ export default function FormModal({
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="p-1 flex flex-col gap-2"> <div className="flex flex-col gap-2 p-1">
{tabsState[ {tabsState[
id.current id.current
].formKeysData.handle_keys.some((t) => t === i) && ( ].formKeysData.handle_keys.some((t) => t === i) && (
@ -470,7 +483,7 @@ export default function FormModal({
)} )}
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => ( {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
<AccordionItem key={k} value={i}> <AccordionItem key={k} value={i}>
<div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm"> <div className="group flex flex-1 items-center justify-between py-4 text-sm font-normal text-muted-foreground transition-all">
<div className="group-hover:underline"> <div className="group-hover:underline">
<Badge size="md" variant="gray"> <Badge size="md" variant="gray">
{i} {i}
@ -483,14 +496,14 @@ export default function FormModal({
</Accordion> </Accordion>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex flex-col rounded-md border bg-muted w-full h-full relative"> <div className="relative flex h-full w-full flex-col rounded-md border bg-muted">
<div className="absolute right-3 top-3 z-50"> <div className="absolute right-3 top-3 z-50">
<button disabled={lockChat} onClick={() => clearChat()}> <button disabled={lockChat} onClick={() => clearChat()}>
<Eraser <Eraser
className={classNames( className={classNames(
"h-5 w-5", "h-5 w-5",
lockChat lockChat
? "text-primary animate-pulse" ? "animate-pulse text-primary"
: "text-primary hover:text-gray-600" : "text-primary hover:text-gray-600"
)} )}
aria-hidden="true" aria-hidden="true"
@ -499,7 +512,7 @@ export default function FormModal({
</div> </div>
<div <div
ref={messagesRef} ref={messagesRef}
className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide" className="flex h-full w-full flex-col items-center overflow-scroll scrollbar-hide"
> >
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
@ -511,19 +524,19 @@ export default function FormModal({
/> />
)) ))
) : ( ) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle"> <div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
<span> <span>
👋{" "} 👋{" "}
<span className="text-gray-600 dark:text-gray-300 text-lg"> <span className="text-lg text-gray-600 dark:text-gray-300">
LangFlow Chat LangFlow Chat
</span> </span>
</span> </span>
<br /> <br />
<div className="bg-muted dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700"> <div className="w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 dark:border-gray-700 dark:bg-gray-900">
<span className="text-base text-gray-500"> <span className="text-base text-gray-500">
Start a conversation and click the agent's thoughts{" "} Start a conversation and click the agent's thoughts{" "}
<span> <span>
<MessageSquare className="w-5 h-5 inline animate-bounce mx-1 " /> <MessageSquare className="mx-1 inline h-5 w-5 animate-bounce " />
</span>{" "} </span>{" "}
to inspect the chaining process. to inspect the chaining process.
</span> </span>
@ -532,7 +545,7 @@ export default function FormModal({
)} )}
<div ref={ref}></div> <div ref={ref}></div>
</div> </div>
<div className="w-full px-8 pb-6 flex-col flex items-center justify-between"> <div className="flex w-full flex-col items-center justify-between px-8 pb-6">
<div className="relative w-full rounded-md shadow-sm"> <div className="relative w-full rounded-md shadow-sm">
<ChatInput <ChatInput
chatValue={chatValue} chatValue={chatValue}