add fixex to IO modal

This commit is contained in:
anovazzi1 2024-06-07 10:51:17 -03:00
commit a38a0d7eeb

View file

@ -29,6 +29,7 @@ import { useMessagesStore } from "../../stores/messagesStore";
import SessionView from "./components/SessionView"; import SessionView from "./components/SessionView";
import useRemoveSession from "./components/SessionView/hooks"; import useRemoveSession from "./components/SessionView/hooks";
import useAlertStore from "../../stores/alertStore"; import useAlertStore from "../../stores/alertStore";
import { Button } from "../../components/ui/button";
export default function IOModal({ export default function IOModal({
children, children,
@ -39,25 +40,25 @@ export default function IOModal({
const allNodes = useFlowStore((state) => state.nodes); const allNodes = useFlowStore((state) => state.nodes);
const setMessages = useMessagesStore((state) => state.setMessages); const setMessages = useMessagesStore((state) => state.setMessages);
const inputs = useFlowStore((state) => state.inputs).filter( const inputs = useFlowStore((state) => state.inputs).filter(
(input) => input.type !== "ChatInput" (input) => input.type !== "ChatInput",
); );
const chatInput = useFlowStore((state) => state.inputs).find( const chatInput = useFlowStore((state) => state.inputs).find(
(input) => input.type === "ChatInput" (input) => input.type === "ChatInput",
); );
const outputs = useFlowStore((state) => state.outputs).filter( const outputs = useFlowStore((state) => state.outputs).filter(
(output) => output.type !== "ChatOutput" (output) => output.type !== "ChatOutput",
); );
const chatOutput = useFlowStore((state) => state.outputs).find( const chatOutput = useFlowStore((state) => state.outputs).find(
(output) => output.type === "ChatOutput" (output) => output.type === "ChatOutput",
); );
const nodes = useFlowStore((state) => state.nodes).filter( const nodes = useFlowStore((state) => state.nodes).filter(
(node) => (node) =>
inputs.some((input) => input.id === node.id) || inputs.some((input) => input.id === node.id) ||
outputs.some((output) => output.id === node.id) outputs.some((output) => output.id === node.id),
); );
const haveChat = chatInput || chatOutput; const haveChat = chatInput || chatOutput;
const [selectedTab, setSelectedTab] = useState( const [selectedTab, setSelectedTab] = useState(
inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0 inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
); );
const setErrorData = useAlertStore((state) => state.setErrorData); const setErrorData = useAlertStore((state) => state.setErrorData);
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -170,7 +171,7 @@ export default function IOModal({
return ( return (
<BaseModal <BaseModal
size={selectedTab === 0 ? "sm-thin" : "md-thin"} size={"md-thin"}
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
disable={disable} disable={disable}
@ -232,6 +233,10 @@ export default function IOModal({
key={index} key={index}
> >
<AccordionComponent <AccordionComponent
disabled={
node.data.node!.template["input_value"]?.value ===
""
}
trigger={ trigger={
<div className="file-component-badge-div"> <div className="file-component-badge-div">
<ShadTooltip <ShadTooltip
@ -417,7 +422,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4", "flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : "" !selectedViewField ? "hidden" : "",
)} )}
> >
<div className="font-xl flex items-center justify-center gap-3 font-semibold"> <div className="font-xl flex items-center justify-center gap-3 font-semibold">
@ -471,7 +476,7 @@ export default function IOModal({
<div <div
className={cn( className={cn(
"flex h-full w-full", "flex h-full w-full",
selectedViewField ? "hidden" : "" selectedViewField ? "hidden" : "",
)} )}
> >
{haveChat ? ( {haveChat ? (
@ -503,7 +508,7 @@ export default function IOModal({
"h-4 w-4", "h-4 w-4",
isBuilding isBuilding
? "animate-spin" ? "animate-spin"
: "fill-current text-medium-indigo" : "fill-current text-medium-indigo",
)} )}
/> />
), ),