add hsitory tab section to playground
This commit is contained in:
anovazzi1
parent
be919f1bca
commit
b32c02671d
1 changed files with 173 additions and 164 deletions
|
|
@ -19,7 +19,7 @@ import { InputOutput } from "../../constants/enums";
|
||||||
import useFlowStore from "../../stores/flowStore";
|
import useFlowStore from "../../stores/flowStore";
|
||||||
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
import useFlowsManagerStore from "../../stores/flowsManagerStore";
|
||||||
import { IOModalPropsType } from "../../types/components";
|
import { IOModalPropsType } from "../../types/components";
|
||||||
import { NodeType } from "../../types/flow";
|
import { NodeDataType, NodeType } from "../../types/flow";
|
||||||
import { updateVerticesOrder } from "../../utils/buildUtils";
|
import { updateVerticesOrder } from "../../utils/buildUtils";
|
||||||
import { cn } from "../../utils/utils";
|
import { cn } from "../../utils/utils";
|
||||||
import BaseModal from "../baseModal";
|
import BaseModal from "../baseModal";
|
||||||
|
|
@ -113,13 +113,17 @@ export default function IOModal({
|
||||||
setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
|
setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
|
||||||
}, [allNodes.length]);
|
}, [allNodes.length]);
|
||||||
|
|
||||||
|
const flow_sessions = allNodes
|
||||||
|
.map((node) => (node.data as NodeDataType).node?.template["session_id"])
|
||||||
|
.filter((session) => session !== undefined);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSelectedViewField(startView());
|
setSelectedViewField(startView());
|
||||||
// if (haveChat) {
|
if (haveChat) {
|
||||||
// getSessions().then((sessions) => {
|
getSessions().then((sessions) => {
|
||||||
// setSessions(sessions);
|
setSessions(sessions);
|
||||||
// });
|
});
|
||||||
// }
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -144,175 +148,180 @@ export default function IOModal({
|
||||||
<BaseModal.Content>
|
<BaseModal.Content>
|
||||||
<div className="flex h-full flex-col ">
|
<div className="flex h-full flex-col ">
|
||||||
<div className="flex-max-width h-full">
|
<div className="flex-max-width h-full">
|
||||||
{selectedTab !== 0 && (
|
<div
|
||||||
<div
|
className={cn(
|
||||||
className={cn(
|
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
|
||||||
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300",
|
)}
|
||||||
)}
|
>
|
||||||
|
<Tabs
|
||||||
|
value={selectedTab.toString()}
|
||||||
|
className={
|
||||||
|
"flex h-full flex-col overflow-y-auto rounded-md border bg-muted text-center custom-scroll"
|
||||||
|
}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedTab(Number(value));
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Tabs
|
<div className="api-modal-tablist-div">
|
||||||
value={selectedTab.toString()}
|
<TabsList>
|
||||||
className={
|
{inputs.length > 0 && (
|
||||||
"flex h-full flex-col overflow-y-auto rounded-md border bg-muted text-center custom-scroll"
|
<TabsTrigger value={"1"}>Inputs</TabsTrigger>
|
||||||
}
|
)}
|
||||||
onValueChange={(value) => {
|
{outputs.length > 0 && (
|
||||||
setSelectedTab(Number(value));
|
<TabsTrigger value={"2"}>Outputs</TabsTrigger>
|
||||||
}}
|
)}
|
||||||
>
|
{haveChat && <TabsTrigger value={"0"}>History</TabsTrigger>}
|
||||||
<div className="api-modal-tablist-div">
|
</TabsList>
|
||||||
<TabsList>
|
</div>
|
||||||
{inputs.length > 0 && (
|
|
||||||
<TabsTrigger value={"1"}>Inputs</TabsTrigger>
|
|
||||||
)}
|
|
||||||
{outputs.length > 0 && (
|
|
||||||
<TabsTrigger value={"2"}>Outputs</TabsTrigger>
|
|
||||||
)}
|
|
||||||
{/* {haveChat && (
|
|
||||||
<TabsTrigger value={"3"}>History</TabsTrigger>
|
|
||||||
)} */}
|
|
||||||
</TabsList>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TabsContent
|
<TabsContent value={"1"} className="api-modal-tabs-content">
|
||||||
value={"1"}
|
{nodes
|
||||||
className="api-modal-tabs-content mt-4"
|
.filter((node) =>
|
||||||
>
|
inputs.some((input) => input.id === node.id),
|
||||||
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
|
)
|
||||||
<IconComponent className="h-4 w-4" name={"Type"} />
|
.map((node, index) => {
|
||||||
{TEXT_INPUT_MODAL_TITLE}
|
const input = inputs.find(
|
||||||
</div>
|
(input) => input.id === node.id,
|
||||||
{nodes
|
)!;
|
||||||
.filter((node) =>
|
return (
|
||||||
inputs.some((input) => input.id === node.id),
|
<div
|
||||||
)
|
className="file-component-accordion-div"
|
||||||
.map((node, index) => {
|
key={index}
|
||||||
const input = inputs.find(
|
>
|
||||||
(input) => input.id === node.id,
|
<AccordionComponent
|
||||||
)!;
|
trigger={
|
||||||
return (
|
<div className="file-component-badge-div">
|
||||||
<div
|
<ShadTooltip
|
||||||
className="file-component-accordion-div"
|
content={input.id}
|
||||||
key={index}
|
styleClasses="z-50"
|
||||||
>
|
>
|
||||||
<AccordionComponent
|
<div>
|
||||||
trigger={
|
<Badge variant="gray" size="md">
|
||||||
<div className="file-component-badge-div">
|
{node.data.node.display_name}
|
||||||
<ShadTooltip
|
</Badge>
|
||||||
content={input.id}
|
|
||||||
styleClasses="z-50"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Badge variant="gray" size="md">
|
|
||||||
{node.data.node.display_name}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</ShadTooltip>
|
|
||||||
<div
|
|
||||||
className="-mb-1 pr-4"
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
setSelectedViewField(input);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconComponent
|
|
||||||
className="h-4 w-4"
|
|
||||||
name="ExternalLink"
|
|
||||||
></IconComponent>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ShadTooltip>
|
||||||
}
|
<div
|
||||||
key={index}
|
className="-mb-1 pr-4"
|
||||||
keyValue={input.id}
|
onClick={(event) => {
|
||||||
>
|
event.stopPropagation();
|
||||||
<div className="file-component-tab-column">
|
setSelectedViewField(input);
|
||||||
<div className="">
|
}}
|
||||||
{input && (
|
>
|
||||||
<IOFieldView
|
<IconComponent
|
||||||
type={InputOutput.INPUT}
|
className="h-4 w-4"
|
||||||
left={true}
|
name="ExternalLink"
|
||||||
fieldType={input.type}
|
></IconComponent>
|
||||||
fieldId={input.id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AccordionComponent>
|
}
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</TabsContent>
|
|
||||||
<TabsContent
|
|
||||||
value={"2"}
|
|
||||||
className="api-modal-tabs-content mt-4"
|
|
||||||
>
|
|
||||||
<div className="mx-2 mb-2 flex items-center gap-2 text-sm font-bold">
|
|
||||||
<IconComponent className="h-4 w-4" name={"Type"} />
|
|
||||||
{OUTPUTS_MODAL_TITLE}
|
|
||||||
</div>
|
|
||||||
{nodes
|
|
||||||
.filter((node) =>
|
|
||||||
outputs.some((output) => output.id === node.id),
|
|
||||||
)
|
|
||||||
.map((node, index) => {
|
|
||||||
const output = outputs.find(
|
|
||||||
(output) => output.id === node.id,
|
|
||||||
)!;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="file-component-accordion-div"
|
|
||||||
key={index}
|
key={index}
|
||||||
|
keyValue={input.id}
|
||||||
>
|
>
|
||||||
<AccordionComponent
|
<div className="file-component-tab-column">
|
||||||
trigger={
|
<div className="">
|
||||||
<div className="file-component-badge-div">
|
{input && (
|
||||||
<ShadTooltip
|
<IOFieldView
|
||||||
content={output.id}
|
type={InputOutput.INPUT}
|
||||||
styleClasses="z-50"
|
left={true}
|
||||||
>
|
fieldType={input.type}
|
||||||
<div>
|
fieldId={input.id}
|
||||||
<Badge variant="gray" size="md">
|
/>
|
||||||
{node.data.node.display_name}
|
)}
|
||||||
</Badge>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ShadTooltip>
|
</AccordionComponent>
|
||||||
<div
|
</div>
|
||||||
className="-mb-1 pr-4"
|
);
|
||||||
onClick={(event) => {
|
})}
|
||||||
event.stopPropagation();
|
</TabsContent>
|
||||||
setSelectedViewField(output);
|
<TabsContent value={"2"} className="api-modal-tabs-content">
|
||||||
}}
|
{nodes
|
||||||
>
|
.filter((node) =>
|
||||||
<IconComponent
|
outputs.some((output) => output.id === node.id),
|
||||||
className="h-4 w-4"
|
)
|
||||||
name="ExternalLink"
|
.map((node, index) => {
|
||||||
></IconComponent>
|
const output = outputs.find(
|
||||||
|
(output) => output.id === node.id,
|
||||||
|
)!;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="file-component-accordion-div"
|
||||||
|
key={index}
|
||||||
|
>
|
||||||
|
<AccordionComponent
|
||||||
|
trigger={
|
||||||
|
<div className="file-component-badge-div">
|
||||||
|
<ShadTooltip
|
||||||
|
content={output.id}
|
||||||
|
styleClasses="z-50"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Badge variant="gray" size="md">
|
||||||
|
{node.data.node.display_name}
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ShadTooltip>
|
||||||
}
|
<div
|
||||||
key={index}
|
className="-mb-1 pr-4"
|
||||||
keyValue={output.id}
|
onClick={(event) => {
|
||||||
>
|
event.stopPropagation();
|
||||||
<div className="file-component-tab-column">
|
setSelectedViewField(output);
|
||||||
<div className="">
|
}}
|
||||||
{output && (
|
>
|
||||||
<IOFieldView
|
<IconComponent
|
||||||
type={InputOutput.OUTPUT}
|
className="h-4 w-4"
|
||||||
left={true}
|
name="ExternalLink"
|
||||||
fieldType={output.type}
|
></IconComponent>
|
||||||
fieldId={output.id}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</AccordionComponent>
|
}
|
||||||
|
key={index}
|
||||||
|
keyValue={output.id}
|
||||||
|
>
|
||||||
|
<div className="file-component-tab-column">
|
||||||
|
<div className="">
|
||||||
|
{output && (
|
||||||
|
<IOFieldView
|
||||||
|
type={InputOutput.OUTPUT}
|
||||||
|
left={true}
|
||||||
|
fieldType={output.type}
|
||||||
|
fieldId={output.id}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AccordionComponent>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value={"0"} className="api-modal-tabs-content">
|
||||||
|
{sessions.map((session, index) => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between border-b px-2 align-middle">
|
||||||
|
{session}
|
||||||
|
<div className="flex items-center justify-center gap-2 align-middle">
|
||||||
|
<Button variant="ghost" onClick={() => {}}>
|
||||||
|
<ShadTooltip content={"delete"}>
|
||||||
|
<IconComponent
|
||||||
|
name="Trash2"
|
||||||
|
className="h-4 w-4"
|
||||||
|
></IconComponent>
|
||||||
|
</ShadTooltip>
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<ShadTooltip content>
|
||||||
|
<div className="h-2 w-2 rounded-full bg-red-500"></div>
|
||||||
|
</ShadTooltip>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})}
|
</div>
|
||||||
</TabsContent>
|
);
|
||||||
</Tabs>
|
})}
|
||||||
</div>
|
</TabsContent>
|
||||||
)}
|
</Tabs>
|
||||||
|
</div>
|
||||||
<div className="flex h-full min-w-96 flex-grow">
|
<div className="flex h-full min-w-96 flex-grow">
|
||||||
{selectedViewField && (
|
{selectedViewField && (
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue