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

Merge branch 'form_io' of https://github.com/logspace-ai/langflow into form_io

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-05 06:52:07 -03:00
commit 864fb2f8ef
4 changed files with 75 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -5,6 +5,8 @@ all: help
init: init:
@echo 'Installing pre-commit hooks' @echo 'Installing pre-commit hooks'
git config core.hooksPath .githooks git config core.hooksPath .githooks
@echo 'Making pre-commit hook executable'
chmod +x .githooks/pre-commit
@echo 'Installing backend dependencies' @echo 'Installing backend dependencies'
make install_backend make install_backend
@echo 'Installing frontend dependencies' @echo 'Installing frontend dependencies'

7
src/backend/langflow/api/v1/validate.py
View file

@ -71,9 +71,14 @@ def add_new_variables_to_template(input_variables, prompt_request):
field_type="str", field_type="str",
show=True, show=True,
advanced=False, advanced=False,
multiline=True,
input_types=["Document", "BaseOutputParser"], input_types=["Document", "BaseOutputParser"],
) )
if variable in prompt_request.frontend_node.template:
# Set the new field with the old value
template_field.value = prompt_request.frontend_node.template[variable][
"value"
]
prompt_request.frontend_node.template[variable] = template_field.to_dict() prompt_request.frontend_node.template[variable] = template_field.to_dict()
# Check if variable is not already in the list before appending # Check if variable is not already in the list before appending

40
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -93,7 +93,7 @@ export default function GenericNode({
color: nodeColors[types[data.type]] ?? nodeColors.unknown, color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}} }}
/> />
<div className="ml-2 truncate flex-1"> <div className="ml-2 flex-1 truncate">
<ShadTooltip <ShadTooltip
delayDuration={1500} delayDuration={1500}
content={data.node.display_name} content={data.node.display_name}
@ -133,25 +133,25 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-status-red opacity-100" ? "h-4 w-4 rounded-full bg-status-green opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200" "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "w-4 h-4 rounded-full bg-status-red opacity-100" ? "h-4 w-4 rounded-full bg-status-red opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200" "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
)} )}
></div> ></div>
<div <div
className={classNames( className={classNames(
!validationStatus || isBuilding !validationStatus || isBuilding
? "w-4 h-4 rounded-full bg-status-yellow opacity-100" ? "h-4 w-4 rounded-full bg-status-yellow opacity-100"
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin", : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200" "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
)} )}
></div> ></div>
</div> </div>
@ -207,9 +207,19 @@ export default function GenericNode({
} }
info={data.node.template[t].info} info={data.node.template[t].info}
name={t} name={t}
tooltipTitle={data.node.template[t].input_types?.join("\n") ?? data.node.template[t].type} tooltipTitle={
data.node.template[t].input_types?.join("\n") ??
data.node.template[t].type
}
required={data.node.template[t].required} required={data.node.template[t].required}
id={(data.node.template[t].input_types?.join(";") ?? data.node.template[t].type) + "|" + t + "|" + data.id} id={
(data.node.template[t].input_types?.join(";") ??
data.node.template[t].type) +
"|" +
t +
"|" +
data.id
}
left={true} left={true}
type={data.node.template[t].type} type={data.node.template[t].type}
optionalHandle={data.node.template[t].input_types} optionalHandle={data.node.template[t].input_types}
@ -233,7 +243,11 @@ export default function GenericNode({
<ParameterComponent <ParameterComponent
data={data} data={data}
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={data.node.output_types && data.node.output_types.length > 0 ? data.node.output_types.join("|") : data.type} title={
data.node.output_types && data.node.output_types.length > 0
? data.node.output_types.join("|")
: data.type
}
tooltipTitle={data.node.base_classes.join("\n")} tooltipTitle={data.node.base_classes.join("\n")}
id={[data.type, data.id, ...data.node.base_classes].join("|")} id={[data.type, data.id, ...data.node.base_classes].join("|")}
type={data.node.base_classes.join("|")} type={data.node.base_classes.join("|")}

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

@ -40,13 +40,27 @@ 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 +396,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 +427,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 +452,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 +484,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 +497,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 +513,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 +525,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 +546,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}