+ {value === index && {children} }
+
+ )
+}
+
+TabPanel.propTypes = {
+ children: PropTypes.node,
+ index: PropTypes.number.isRequired,
+ value: PropTypes.number.isRequired
+}
+
// ==============================|| Marketplace ||============================== //
const Marketplace = () => {
@@ -29,29 +53,66 @@ const Marketplace = () => {
const theme = useTheme()
const customization = useSelector((state) => state.customization)
- const [isLoading, setLoading] = useState(true)
+ const [isChatflowsLoading, setChatflowsLoading] = useState(true)
+ const [isToolsLoading, setToolsLoading] = useState(true)
const [images, setImages] = useState({})
+ const tabItems = ['Chatflows', 'Tools']
+ const [value, setValue] = useState(0)
+ const [showToolDialog, setShowToolDialog] = useState(false)
+ const [toolDialogProps, setToolDialogProps] = useState({})
+
+ const getAllChatflowsMarketplacesApi = useApi(marketplacesApi.getAllChatflowsMarketplaces)
+ const getAllToolsMarketplacesApi = useApi(marketplacesApi.getAllToolsMarketplaces)
+
+ const onUseTemplate = (selectedTool) => {
+ const dialogProp = {
+ title: 'Add New Tool',
+ type: 'IMPORT',
+ cancelButtonName: 'Cancel',
+ confirmButtonName: 'Add',
+ data: selectedTool
+ }
+ setToolDialogProps(dialogProp)
+ setShowToolDialog(true)
+ }
- const getAllMarketplacesApi = useApi(marketplacesApi.getAllMarketplaces)
+ const goToTool = (selectedTool) => {
+ const dialogProp = {
+ title: selectedTool.templateName,
+ type: 'TEMPLATE',
+ data: selectedTool
+ }
+ setToolDialogProps(dialogProp)
+ setShowToolDialog(true)
+ }
const goToCanvas = (selectedChatflow) => {
navigate(`/marketplace/${selectedChatflow.id}`, { state: selectedChatflow })
}
+ const handleChange = (event, newValue) => {
+ setValue(newValue)
+ }
+
useEffect(() => {
- getAllMarketplacesApi.request()
+ getAllChatflowsMarketplacesApi.request()
+ getAllToolsMarketplacesApi.request()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => {
- setLoading(getAllMarketplacesApi.loading)
- }, [getAllMarketplacesApi.loading])
+ setChatflowsLoading(getAllChatflowsMarketplacesApi.loading)
+ }, [getAllChatflowsMarketplacesApi.loading])
useEffect(() => {
- if (getAllMarketplacesApi.data) {
+ setToolsLoading(getAllToolsMarketplacesApi.loading)
+ }, [getAllToolsMarketplacesApi.loading])
+
+ useEffect(() => {
+ if (getAllChatflowsMarketplacesApi.data) {
try {
- const chatflows = getAllMarketplacesApi.data
+ const chatflows = getAllChatflowsMarketplacesApi.data
const images = {}
for (let i = 0; i < chatflows.length; i += 1) {
const flowDataStr = chatflows[i].flowData
@@ -70,31 +131,83 @@ const Marketplace = () => {
console.error(e)
}
}
- }, [getAllMarketplacesApi.data])
+ }, [getAllChatflowsMarketplacesApi.data])
return (
- Marketplace
-No Marketplace Yet
+ <>
+ Marketplace
No Marketplace Yet
+ No Marketplace Yet
+
+ {dialogProps.title}
+
+ {dialogProps.type === 'EDIT' && (
+
+ )}
+