Merge branch 'form_io' of https://github.com/logspace-ai/langflow into form_io
This commit is contained in:
Cristhian Zanforlin Lousa
commit
864fb2f8ef
4 changed files with 75 additions and 40 deletions
2
Makefile
2
Makefile
|
|
@ -5,6 +5,8 @@ all: help
|
|||
init:
|
||||
@echo 'Installing pre-commit hooks'
|
||||
git config core.hooksPath .githooks
|
||||
@echo 'Making pre-commit hook executable'
|
||||
chmod +x .githooks/pre-commit
|
||||
@echo 'Installing backend dependencies'
|
||||
make install_backend
|
||||
@echo 'Installing frontend dependencies'
|
||||
|
|
|
|||
|
|
@ -71,9 +71,14 @@ def add_new_variables_to_template(input_variables, prompt_request):
|
|||
field_type="str",
|
||||
show=True,
|
||||
advanced=False,
|
||||
multiline=True,
|
||||
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()
|
||||
|
||||
# Check if variable is not already in the list before appending
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default function GenericNode({
|
|||
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
|
||||
}}
|
||||
/>
|
||||
<div className="ml-2 truncate flex-1">
|
||||
<div className="ml-2 flex-1 truncate">
|
||||
<ShadTooltip
|
||||
delayDuration={1500}
|
||||
content={data.node.display_name}
|
||||
|
|
@ -133,25 +133,25 @@ export default function GenericNode({
|
|||
<div
|
||||
className={classNames(
|
||||
validationStatus && validationStatus.valid
|
||||
? "w-4 h-4 rounded-full bg-status-red opacity-100"
|
||||
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
|
||||
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
|
||||
? "h-4 w-4 rounded-full bg-status-green opacity-100"
|
||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
||||
)}
|
||||
></div>
|
||||
<div
|
||||
className={classNames(
|
||||
validationStatus && !validationStatus.valid
|
||||
? "w-4 h-4 rounded-full bg-status-red opacity-100"
|
||||
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
|
||||
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
|
||||
? "h-4 w-4 rounded-full bg-status-red opacity-100"
|
||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
||||
)}
|
||||
></div>
|
||||
<div
|
||||
className={classNames(
|
||||
!validationStatus || isBuilding
|
||||
? "w-4 h-4 rounded-full bg-status-yellow opacity-100"
|
||||
: "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
|
||||
"absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
|
||||
? "h-4 w-4 rounded-full bg-status-yellow opacity-100"
|
||||
: "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
|
||||
"absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
|
||||
)}
|
||||
></div>
|
||||
</div>
|
||||
|
|
@ -207,9 +207,19 @@ export default function GenericNode({
|
|||
}
|
||||
info={data.node.template[t].info}
|
||||
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}
|
||||
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}
|
||||
type={data.node.template[t].type}
|
||||
optionalHandle={data.node.template[t].input_types}
|
||||
|
|
@ -233,7 +243,11 @@ export default function GenericNode({
|
|||
<ParameterComponent
|
||||
data={data}
|
||||
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")}
|
||||
id={[data.type, data.id, ...data.node.base_classes].join("|")}
|
||||
type={data.node.base_classes.join("|")}
|
||||
|
|
|
|||
|
|
@ -40,13 +40,27 @@ export default function FormModal({
|
|||
flow: FlowType;
|
||||
}) {
|
||||
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 [chatValue, setChatValue] = useState(() => {
|
||||
try {
|
||||
const { formKeysData } = tabsState[flow.id];
|
||||
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 { reactFlowInstance } = useContext(typesContext);
|
||||
const { setErrorData, setNoticeData } = useContext(alertContext);
|
||||
|
|
@ -382,26 +396,26 @@ export default function FormModal({
|
|||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Chat</span>
|
||||
<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"
|
||||
/>
|
||||
</DialogTitle>
|
||||
<DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex h-[80vh] w-full mt-2 ">
|
||||
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
|
||||
<div className="flex py-2 items-center">
|
||||
<Variable className=" -ml-px w-4 h-4 mr-1 text-primary"></Variable>
|
||||
<div className="mt-2 flex h-[80vh] w-full ">
|
||||
<div className="mr-6 flex h-full w-2/5 flex-col justify-start overflow-auto scrollbar-hide">
|
||||
<div className="flex items-center py-2">
|
||||
<Variable className=" -ml-px mr-1 h-4 w-4 text-primary"></Variable>
|
||||
<span className="text-md font-semibold text-primary">
|
||||
Input Variables
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2 items-center">
|
||||
<div className="flex mr-2.5 items-center">
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="mr-2.5 flex items-center">
|
||||
<span className="text-sm font-medium text-primary">Name</span>
|
||||
</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">
|
||||
Chat Input
|
||||
</span>
|
||||
|
|
@ -413,7 +427,7 @@ export default function FormModal({
|
|||
<div className="flex items-start gap-3" key={k}>
|
||||
<AccordionItem className="w-full" key={k} value={i}>
|
||||
<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">
|
||||
{i}
|
||||
</Badge>
|
||||
|
|
@ -438,7 +452,7 @@ export default function FormModal({
|
|||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="p-1 flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-2 p-1">
|
||||
{tabsState[
|
||||
id.current
|
||||
].formKeysData.handle_keys.some((t) => t === i) && (
|
||||
|
|
@ -470,7 +484,7 @@ export default function FormModal({
|
|||
)}
|
||||
{tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
|
||||
<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">
|
||||
<Badge size="md" variant="gray">
|
||||
{i}
|
||||
|
|
@ -483,14 +497,14 @@ export default function FormModal({
|
|||
</Accordion>
|
||||
</div>
|
||||
<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">
|
||||
<button disabled={lockChat} onClick={() => clearChat()}>
|
||||
<Eraser
|
||||
className={classNames(
|
||||
"h-5 w-5",
|
||||
lockChat
|
||||
? "text-primary animate-pulse"
|
||||
? "animate-pulse text-primary"
|
||||
: "text-primary hover:text-gray-600"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
|
|
@ -499,7 +513,7 @@ export default function FormModal({
|
|||
</div>
|
||||
<div
|
||||
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.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 className="text-gray-600 dark:text-gray-300 text-lg">
|
||||
<span className="text-lg text-gray-600 dark:text-gray-300">
|
||||
LangFlow Chat
|
||||
</span>
|
||||
</span>
|
||||
<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">
|
||||
Start a conversation and click the agent's thoughts{" "}
|
||||
<span>
|
||||
<MessageSquare className="w-5 h-5 inline animate-bounce mx-1 " />
|
||||
<MessageSquare className="mx-1 inline h-5 w-5 animate-bounce " />
|
||||
</span>{" "}
|
||||
to inspect the chaining process.
|
||||
</span>
|
||||
|
|
@ -532,7 +546,7 @@ export default function FormModal({
|
|||
)}
|
||||
<div ref={ref}></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">
|
||||
<ChatInput
|
||||
chatValue={chatValue}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue