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

Add RefreshButton component to parameterComponent

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-04 09:55:48 -03:00
commit 40ee964859
2 changed files with 50 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -16,6 +16,7 @@ import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Button } from "../../../../components/ui/button";
import { RefreshButton } from "../../../../components/ui/refreshButton";
import {
INPUT_HANDLER_HOVER,
LANGFLOW_SUPPORTED_TYPES,
@ -68,6 +69,7 @@ export default function ParameterComponent({
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
const [isLoading, setIsLoading] = useState(false);
const flow = currentFlow?.data?.nodes ?? null;
@ -420,14 +422,11 @@ export default function ParameterComponent({
/>
</div>
{data.node?.template[name].refresh && (
<button
className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
onClick={() => {
handleUpdateValues(name, data);
}}
>
<IconComponent name="RefreshCcw" />
</button>
<RefreshButton
name={name}
data={data}
handleUpdateValues={handleUpdateValues}
/>
)}
</div>
)}
@ -466,14 +465,11 @@ export default function ParameterComponent({
/>
</div>
{data.node?.template[name].refresh && (
<button
className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
onClick={() => {
handleUpdateValues(name, data);
}}
>
<IconComponent name="RefreshCcw" />
</button>
<RefreshButton
name={name}
data={data}
handleUpdateValues={handleUpdateValues}
/>
)}
</div>
) : left === true && type === "code" ? (

38
src/frontend/src/components/ui/refreshButton.tsx Normal file
View file

@ -0,0 +1,38 @@
import { useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { NodeDataType } from "../../types/flow";
import { cn } from "../../utils/utils";
function RefreshButton({
name,
data,
handleUpdateValues,
}: {
name: string;
data: NodeDataType;
handleUpdateValues: (name: string, data: NodeDataType) => void;
}) {
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
setIsLoading(true);
console.log("refreshing");
handleUpdateValues(name, data);
setInterval(() => {
setIsLoading(false);
}, 500);
};
return (
<button
className="extra-side-bar-buttons ml-2 mt-1 w-1/6"
onClick={handleClick}
>
<IconComponent
name={isLoading ? "Loader2" : "RefreshCcw"}
className={cn("h-4 w-4", isLoading ? "animate-spin" : "animate-wiggle")}
/>
</button>
);
}
export { RefreshButton };