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

add stop button on building

Browse source
This commit is contained in:
anovazzi1 2024-06-19 12:11:36 -03:00 • committed by Gabriel Luiz Freitas Almeida
commit 34333e1d50
2 changed files with 37 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -24,12 +24,15 @@ import IconComponent from "../../../genericIconComponent";
import ShadTooltip from "../../../shadTooltipComponent"; import ShadTooltip from "../../../shadTooltipComponent";
import { Button } from "../../../ui/button"; import { Button } from "../../../ui/button";
export const MenuBar = ({}: {}): JSX.Element => { export const MenuBar = ({ }: {}): JSX.Element => {
const shortcuts = useShortcutsStore((state) => state.shortcuts); const shortcuts = useShortcutsStore((state) => state.shortcuts);
const addFlow = useFlowsManagerStore((state) => state.addFlow); const addFlow = useFlowsManagerStore((state) => state.addFlow);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setLockChat = useFlowStore((state) => state.setLockChat);
const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
const revertBuiltStatusFromBuilding = useFlowStore((state) => state.revertBuiltStatusFromBuilding);
const undo = useFlowsManagerStore((state) => state.undo); const undo = useFlowsManagerStore((state) => state.undo);
const redo = useFlowsManagerStore((state) => state.redo); const redo = useFlowsManagerStore((state) => state.redo);
const saveLoading = useFlowsManagerStore((state) => state.saveLoading); const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
@ -202,15 +205,37 @@ export const MenuBar = ({}: {}): JSX.Element => {
side="bottom" side="bottom"
styleClasses="cursor-default" styleClasses="cursor-default"
> >
<div className="flex cursor-default items-center gap-1.5 text-sm text-muted-foreground"> <div className="flex group transition-all cursor-default items-center gap-1.5 text-sm text-muted-foreground">
<IconComponent <div className="absolute flex transition-all cursor-default items-center gap-1.5 text-sm text-muted-foreground">
name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"} <IconComponent
className={cn( name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
"h-4 w-4", className={cn(
isBuilding || saveLoading ? "animate-spin" : "animate-wiggle", "h-4 w-4",
)} isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
/> isBuilding ? "group-hover:opacity-0 transition-all" : ""
{printByBuildStatus()} )}
/>
<div className={isBuilding ? "group-hover:opacity-0 transition-all" : ""
}>
{printByBuildStatus()}
</div>
</div>
<button disabled={!isBuilding} onClick={_ => {
if (isBuilding) {
setIsBuilding(false);
revertBuiltStatusFromBuilding();
setLockChat(false);
}
}
} className={isBuilding ? "absolute opacity-0 group-hover:opacity-100 text-status-red flex gap-1.5 items-center transition-all " : "opacity-0"}>
<IconComponent
name="Square"
className="h-4 w-4"
/>
<span>
Stop
</span>
</button>
</div> </div>
</ShadTooltip> </ShadTooltip>
)} )}

3
src/frontend/src/modals/IOModal/index.tsx
View file

@ -77,7 +77,8 @@ export default function IOModal({
const buildFlow = useFlowStore((state) => state.buildFlow); const buildFlow = useFlowStore((state) => state.buildFlow);
const setIsBuilding = useFlowStore((state) => state.setIsBuilding); const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
const [lockChat, setLockChat] = useState(false); const lockChat = useFlowStore((state) => state.lockChat);
const setLockChat = useFlowStore((state) => state.setLockChat);
const [chatValue, setChatValue] = useState(""); const [chatValue, setChatValue] = useState("");
const isBuilding = useFlowStore((state) => state.isBuilding); const isBuilding = useFlowStore((state) => state.isBuilding);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const currentFlow = useFlowsManagerStore((state) => state.currentFlow);