farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-22 11:01:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

Marketplace: Adding filters and a collapsible panel show/hide

Browse Source
This commit is contained in:
vinodkiran
2024-02-05 18:09:46 -05:00
parent 8990b78e10
commit 842d70bf0d
55 changed files with 199 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/server/marketplaces/chatflows/API Agent OpenAI.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use OpenAI Function Agent and Chain to automatically decide which API to call, generating url and body request from conversation",
"categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,OpenAI Function Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/API Agent.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Given API docs, agent automatically decide which API to call, generating url and body request from conversation",
"categories": "Buffer Memory,ChainTool,API Chain,ChatOpenAI,Conversational Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Antonym.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Output antonym of given user input using few-shot prompt template built with examples",
"categories": "Few Shot Prompt,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/AutoGPT.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use AutoGPT - Autonomous agent with chain of thoughts for self-guided task completion",
"categories": "AutoGPT,SERP Tool,File Read/Write,ChatOpenAI,Pinecone,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/BabyAGI.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use BabyAGI to create tasks and reprioritize for a given objective",
"categories": "BabyAGI,ChatOpenAI,Pinecone,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/CSV Agent.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Analyse and summarize CSV data",
"categories": "CSV Agent,ChatOpenAI,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Chat with a Podcast.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Engage with data sources such as YouTube Transcripts, Google, and more through intelligent Q&A interactions",
"categories": "Memory Vector Store,SearchAPI,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/ChatGPTPlugin.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use ChatGPT Plugins within LangChain abstractions with GET and POST Tools",
"categories": "ChatGPT Plugin,HTTP GET/POST,ChatOpenAI,MRKL Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Claude LLM.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use Anthropic Claude with 200k context window to ingest whole document for QnA",
"categories": "Buffer Memory,Prompt Template,Conversation Chain,ChatAnthropic,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Context Chat Engine.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Answer question based on retrieved documents (context) with built-in memory to remember conversation using LlamaIndex",
"categories": "Text File,Prompt Template,ChatOpenAI,Conversation Chain,Pinecone,LlamaIndex,Redis",
"framework": "LlamaIndex",
"badge": "NEW",
"nodes": [
{
packages/server/marketplaces/chatflows/Conversational Agent.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "A conversational agent for a chat model which utilize chat specific prompts",
"categories": "Calculator Tool,Buffer Memory,SerpAPI,ChatOpenAI,Conversational Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Conversational Retrieval Agent.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Agent optimized for vector retrieval during conversation and answering questions based on previous dialogue.",
"categories": "Retriever Tool,Buffer Memory,ChatOpenAI,Conversational Retrieval Agent, Pinecone,Langchain",
"badge": "POPULAR",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Conversational Retrieval QA Chain.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Text file QnA using conversational retrieval QA chain",
"categories": "TextFile,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
"badge": "POPULAR",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Flowise Docs QnA.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Flowise Docs Github QnA using conversational retrieval QA chain",
"categories": "Memory Vector Store,Github Loader,ChatOpenAI,Conversational Retrieval QA Chain,Langchain",
"badge": "POPULAR",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/HuggingFace LLM Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Simple LLM Chain using HuggingFace Inference API on falcon-7b-instruct model",
"categories": "HuggingFace,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/IfElse.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Split flows based on if else condition",
"categories": "IfElse Function,ChatOpenAI,OpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"badge": "new",
"nodes": [
{
packages/server/marketplaces/chatflows/Image Generation.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Generate image using Replicate Stability text-to-image generative AI model",
"badge": "NEW",
"categories": "Replicate,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Input Moderation.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Detect text that could generate harmful output and prevent it from being sent to the language model",
"badge": "NEW",
"categories": "Moderation,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/List Output Parser.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Return response as a list (array) instead of a string/text",
"badge": "NEW",
"categories": "CSV Output Parser,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Local QnA.json
+1
View File
@@ -2,6 +2,7 @@
"description": "QnA chain using Ollama local LLM, LocalAI embedding model, and Faiss local vector store",
"badge": "POPULAR",
"categories": "Text File,ChatOllama,Conversational Retrieval QA Chain,Faiss,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Long Term Memory.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use long term memory like Zep to differentiate conversations between users with sessionId",
"categories": "ChatOpenAI,Conversational Retrieval QA Chain,Zep Memory,Qdrant,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Metadata Filter.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Upsert multiple files with metadata and filter by it using conversational retrieval QA chain",
"categories": "Text File,PDF File,ChatOpenAI,Conversational Retrieval QA Chain,Pinecone,Langchain",
"badge": "POPULAR",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Multi Prompt Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "A chain that automatically picks an appropriate prompt from multiple prompts",
"categories": "ChatOpenAI,Multi Prompt Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Multi Retrieval QA Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "A chain that automatically picks an appropriate retriever from multiple different vector databases",
"categories": "ChatOpenAI,Multi Retrieval QA Chain,Pinecone,Chroma,Supabase,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Multiple VectorDB.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use the agent to choose between multiple different vector databases, with the ability to use other tools",
"categories": "Buffer Memory,ChatOpenAI,Chain Tool,Retrieval QA Chain,Redis,Faiss,Conversational Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/OpenAI Agent.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "An agent that uses OpenAI's Function Calling functionality to pick the tool and args to call",
"categories": "Buffer Memory,Custom Tool, SerpAPI,OpenAI Function,Calculator Tool,ChatOpenAI,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/OpenAI Assistant.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "OpenAI Assistant that has instructions and can leverage models, tools, and knowledge to respond to user queries",
"categories": "Custom Tool, SerpAPI,OpenAI Assistant,Calculator Tool,Langchain",
"framework": "Langchain",
"badge": "NEW",
"nodes": [
{
packages/server/marketplaces/chatflows/Prompt Chaining with VectorStore.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Use chat history to rephrase user question, and answer the rephrased question using retrieved docs from vector store",
"categories": "ChatOpenAI,LLM Chain,SingleStore,Langchain",
"badge": "POPULAR",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Prompt Chaining.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use output from a chain as prompt for another chain",
"categories": "Custom Tool,OpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Query Engine.json
+1
View File
@@ -2,6 +2,7 @@
"description": "Stateless query engine designed to answer question over your data using LlamaIndex",
"categories": "ChatAnthropic,Compact and Refine,Pinecone,LlamaIndex",
"badge": "NEW",
"framework": "LlamaIndex",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/ReAct Agent.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "An agent that uses ReAct logic to decide what action to take",
"categories": "Calculator Tool,SerpAPI,ChatOpenAI,MRKL Agent,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Replicate LLM.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Use Replicate API that runs Llama 13b v2 model with LLMChain",
"categories": "Replicate,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/SQL DB Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Answer questions over a SQL database",
"categories": "ChatOpenAI,Sql Database Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/SQL Prompt.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Manually construct prompts to query a SQL database",
"categories": "IfElse Function,Variable Set/Get,Custom JS Function,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"badge": "new",
"nodes": [
{
packages/server/marketplaces/chatflows/Simple Chat Engine.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Simple chat engine to handle back and forth conversations using LlamaIndex",
"categories": "BufferMemory,AzureChatOpenAI,LlamaIndex",
"framework": "LlamaIndex",
"badge": "NEW",
"nodes": [
{
packages/server/marketplaces/chatflows/Simple Conversation Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Basic example of Conversation Chain with built-in memory - works exactly like ChatGPT",
"categories": "Buffer Memory,ChatOpenAI,Conversation Chain,Langchain",
"framework": "Langchain",
"badge": "POPULAR",
"nodes": [
{
packages/server/marketplaces/chatflows/Simple LLM Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Basic example of stateless (no memory) LLM Chain with a Prompt Template and LLM Model",
"categories": "OpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Structured Output Parser.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Return response as a specified JSON structure instead of a string/text",
"categories": "Structured Output Parser,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"badge": "NEW",
"nodes": [
{
packages/server/marketplaces/chatflows/SubQuestion Query Engine.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Breaks down query into sub questions for each relevant data source, then combine into final response",
"categories": "Sub Question Query Engine,Sticky Note,QueryEngine Tool,Compact and Refine,ChatOpenAI,Pinecone,LlamaIndex",
"framework": "LlamaIndex",
"badge": "NEW",
"nodes": [
{
packages/server/marketplaces/chatflows/Translator.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Language translation using LLM Chain with a Chat Prompt Template and Chat Model",
"categories": "Chat Prompt Template,ChatOpenAI,LLM Chain,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/Vectara RAG Chain.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "QA chain for Vectara",
"categories": "Vectara QA Chain,Vectara,Langchain",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/WebBrowser.json
+2 -1
View File
@@ -1,6 +1,7 @@
{
"description": "Conversational Agent with ability to visit a website and extract information",
"categories": "Buffer Memory,Web Browser,ChatOpenAI,Conversational Agent,Langchain",
"categories": "Buffer Memory,Web Browser,ChatOpenAI,Conversational Agent",
"framework": "Langchain",
"nodes": [
{
"width": 300,
packages/server/marketplaces/chatflows/WebPage QnA.json
+1
View File
@@ -1,6 +1,7 @@
{
"description": "Scrape web pages for QnA with long term memory Motorhead and return source documents",
"categories": "HtmlToMarkdown,Cheerio Web Scraper,ChatOpenAI,Redis,Pinecone,Langchain",
"framework": "Langchain",
"badge": "POPULAR",
"nodes": [
{
packages/server/marketplaces/tools/Add Hubspot Contact.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "add_contact_hubspot",
"framework": "Langchain",
"description": "Add new contact to Hubspot",
"color": "linear-gradient(rgb(85,198,123), rgb(0,230,99))",
"iconSrc": "https://cdn.worldvectorlogo.com/logos/hubspot-1.svg",
packages/server/marketplaces/tools/Create Airtable Record.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "add_airtable",
"framework": "Langchain",
"description": "Add column1, column2 to Airtable",
"color": "linear-gradient(rgb(125,71,222), rgb(128,102,23))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/airtable.svg",
packages/server/marketplaces/tools/Get Current DateTime.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "todays_date_time",
"framework": "Langchain",
"description": "Useful to get todays day, date and time.",
"color": "linear-gradient(rgb(117,118,129), rgb(230,10,250))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/javascript.svg",
packages/server/marketplaces/tools/Get Stock Mover.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "get_stock_movers",
"framework": "Langchain",
"description": "Get the stocks that has biggest price/volume moves, e.g. actives, gainers, losers, etc.",
"iconSrc": "https://rapidapi.com/cdn/images?url=https://rapidapi-prod-apis.s3.amazonaws.com/9c/e743343bdd41edad39a3fdffd5b974/016c33699f51603ae6fe4420c439124b.png",
"color": "linear-gradient(rgb(191,202,167), rgb(143,202,246))",
packages/server/marketplaces/tools/Make Webhook.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "make_webhook",
"framework": "Langchain",
"description": "Useful when you need to send message to Discord",
"color": "linear-gradient(rgb(19,94,2), rgb(19,124,59))",
"iconSrc": "https://github.com/FlowiseAI/Flowise/assets/26460777/517fdab2-8a6e-4781-b3c8-fb92cc78aa0b",
packages/server/marketplaces/tools/Send Discord Message.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "send_message_to_discord_channel",
"framework": "Langchain",
"description": "Send message to Discord channel",
"color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/discord-icon.svg",
packages/server/marketplaces/tools/Send Slack Message.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "send_message_to_slack_channel",
"framework": "Langchain",
"description": "Send message to Slack channel",
"color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/slack-icon.svg",
packages/server/marketplaces/tools/Send Teams Message.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "send_message_to_teams_channel",
"framework": "Langchain",
"description": "Send message to Teams channel",
"color": "linear-gradient(rgb(155,190,84), rgb(176,69,245))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/microsoft-teams.svg",
packages/server/marketplaces/tools/SendGrid Email.json
+1
View File
@@ -1,5 +1,6 @@
{
"name": "sendgrid_email",
"framework": "Langchain",
"description": "Send email using SendGrid",
"color": "linear-gradient(rgb(230,108,70), rgb(222,4,98))",
"iconSrc": "https://raw.githubusercontent.com/gilbarbara/logos/main/logos/sendgrid-icon.svg",
packages/server/src/index.ts
+3
View File
@@ -1237,6 +1237,7 @@ export class App {
templateName: file.split('.json')[0],
flowData: fileData.toString(),
badge: fileDataObj?.badge,
framework: fileDataObj?.framework,
categories: fileDataObj?.categories,
type: 'Chatflow',
description: fileDataObj?.description || ''
@@ -1254,6 +1255,8 @@ export class App {
...fileDataObj,
id: index,
type: 'Tool',
framework: fileDataObj?.framework,
badge: fileDataObj?.badge,
categories: '',
templateName: file.split('.json')[0]
}
packages/ui/src/ui-component/table/MarketplaceTable.js
+24 -8
View File
@@ -10,6 +10,8 @@ import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Chip from '@mui/material/Chip'
import { Button, Typography } from '@mui/material'
import langchainPNG from 'assets/images/langchain.png'
import llamaIndexPNG from 'assets/images/llamaindex.png'
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@@ -31,7 +33,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
}
}))
export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge, filterByType }) => {
export const MarketplaceTable = ({ data, filterFunction, filterByBadge, filterByType, filterByFramework }) => {
const navigate = useNavigate()
const openTemplate = (selectedTemplate) => {
if (selectedTemplate.flowData) {
@@ -61,10 +63,13 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
<Table sx={{ minWidth: 650 }} size='small' aria-label='a dense table'>
<TableHead>
<TableRow sx={{ marginTop: '10', backgroundColor: 'primary' }}>
<StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='0'>
{''}
</StyledTableCell>
<StyledTableCell component='th' scope='row' style={{ width: '15%' }} key='0'>
Name
</StyledTableCell>
<StyledTableCell component='th' scope='row' style={{ width: '10%' }} key='1'>
<StyledTableCell component='th' scope='row' style={{ width: '5%' }} key='1'>
Type
</StyledTableCell>
<StyledTableCell style={{ width: '35%' }} key='2'>
@@ -83,9 +88,20 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
.filter(filterByBadge)
.filter(filterByType)
.filter(filterFunction)
.filter(filterByFramework)
.map((row, index) => (
<StyledTableRow key={index}>
<TableCell key='0'>
<Typography>
{row.framework === 'Langchain' && (
<img src={langchainPNG} alt='langchain' style={{ width: 30, height: 30 }} />
)}
{row.framework === 'LlamaIndex' && (
<img src={llamaIndexPNG} alt='llamaIndex' style={{ width: 30, height: 30 }} />
)}
</Typography>
</TableCell>
<TableCell key='1'>
<Typography
sx={{ fontSize: '1.2rem', fontWeight: 500, overflowWrap: 'break-word', whiteSpace: 'pre-line' }}
>
@@ -94,15 +110,15 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
</Button>
</Typography>
</TableCell>
<TableCell key='1'>
<TableCell key='2'>
<Typography>{row.type}</Typography>
</TableCell>
<TableCell key='1'>
<TableCell key='3'>
<Typography sx={{ overflowWrap: 'break-word', whiteSpace: 'pre-line' }}>
{row.description || ''}
</Typography>
</TableCell>
<TableCell key='2'>
<TableCell key='4'>
<div
style={{
display: 'flex',
@@ -125,7 +141,7 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
))}
</div>
</TableCell>
<TableCell key='3'>
<TableCell key='5'>
<Typography>
{row.badge &&
row.badge
@@ -152,8 +168,8 @@ export const MarketplaceTable = ({ data, images, filterFunction, filterByBadge,
MarketplaceTable.propTypes = {
data: PropTypes.array,
images: PropTypes.object,
filterFunction: PropTypes.func,
filterByBadge: PropTypes.func,
filterByType: PropTypes.func
filterByType: PropTypes.func,
filterByFramework: PropTypes.func
}
packages/ui/src/views/marketplaces/index.js
+119 -51
View File
@@ -19,10 +19,11 @@ import {
Select,
OutlinedInput,
Checkbox,
ListItemText
ListItemText,
Button
} from '@mui/material'
import { useTheme } from '@mui/material/styles'
import { IconLayoutGrid, IconList, IconSearch } from '@tabler/icons'
import { IconChevronsDown, IconChevronsUp, IconLayoutGrid, IconList, IconSearch } from '@tabler/icons'
// project imports
import MainCard from 'ui-component/cards/MainCard'
@@ -69,6 +70,7 @@ const ITEM_HEIGHT = 48
const ITEM_PADDING_TOP = 8
const badges = ['POPULAR', 'NEW']
const types = ['Chatflow', 'Tool']
const framework = ['Langchain', 'LlamaIndex']
const MenuProps = {
PaperProps: {
style: {
@@ -98,7 +100,8 @@ const Marketplace = () => {
const [badgeFilter, setBadgeFilter] = useState([])
const [typeFilter, setTypeFilter] = useState([])
const [frameworkFilter, setFrameworkFilter] = useState([])
const [open, setOpen] = useState(false)
const handleBadgeFilterChange = (event) => {
const {
target: { value }
@@ -117,6 +120,15 @@ const Marketplace = () => {
typeof value === 'string' ? value.split(',') : value
)
}
const handleFrameworkFilterChange = (event) => {
const {
target: { value }
} = event
setFrameworkFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value
)
}
const handleViewChange = (event, nextView) => {
localStorage.setItem('mpDisplayStyle', nextView)
@@ -143,6 +155,10 @@ const Marketplace = () => {
return typeFilter.length > 0 ? typeFilter.includes(data.type) : true
}
function filterByFramework(data) {
return frameworkFilter.length > 0 ? frameworkFilter.includes(data.framework) : true
}
const onUseTemplate = (selectedTool) => {
const dialogProp = {
title: 'Add New Tool',
@@ -224,9 +240,11 @@ const Marketplace = () => {
<h1>Marketplace</h1>
<TextField
size='small'
id='search-filter-textbox'
sx={{ display: { xs: 'none', sm: 'block' }, ml: 3 }}
variant='outlined'
placeholder='Search name or description'
fullWidth='true'
placeholder='Search name or description or node name'
onChange={onSearchChange}
InputProps={{
startAdornment: (
@@ -236,52 +254,14 @@ const Marketplace = () => {
)
}}
/>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel size='small' id='type-badge'>
Type
</InputLabel>
<Select
size='small'
labelId='type-badge-checkbox-label'
id='type-badge-checkbox'
multiple
value={typeFilter}
onChange={handleTypeFilterChange}
input={<OutlinedInput label='Badge' />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{types.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={typeFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel size='small' id='filter-badge'>
Tag
</InputLabel>
<Select
labelId='filter-badge-label'
id='filter-badge-checkbox'
size='small'
multiple
value={badgeFilter}
onChange={handleBadgeFilterChange}
input={<OutlinedInput label='Badge' />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{badges.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={badgeFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<Button
sx={{ width: '220px', ml: 3, mr: 5 }}
variant='outlined'
onClick={() => setOpen(!open)}
startIcon={open ? <IconChevronsUp /> : <IconChevronsDown />}
>
{open ? 'Hide Filters' : 'Show Filters'}
</Button>
<Box sx={{ flexGrow: 1 }} />
<ButtonGroup sx={{ maxHeight: 40 }} disableElevation variant='contained' aria-label='outlined primary button group'>
<ButtonGroup disableElevation variant='contained' aria-label='outlined primary button group'>
@@ -313,6 +293,93 @@ const Marketplace = () => {
</ButtonGroup>
</Toolbar>
</Box>
{open && (
<Box sx={{ flexGrow: 1, mb: 2 }}>
<Toolbar
disableGutters={true}
style={{
margin: 1,
padding: 1,
paddingBottom: 10,
display: 'flex',
justifyContent: 'flex-start',
width: '100%',
borderBottom: '1px solid'
}}
>
<FormControl sx={{ m: 1, width: 250 }}>
<InputLabel size='small' id='filter-badge-label'>
Tag
</InputLabel>
<Select
labelId='filter-badge-label'
id='filter-badge-checkbox'
size='small'
multiple
value={badgeFilter}
onChange={handleBadgeFilterChange}
input={<OutlinedInput label='Badge' />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{badges.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={badgeFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<FormControl sx={{ m: 1, width: 250 }}>
<InputLabel size='small' id='type-badge-label'>
Type
</InputLabel>
<Select
size='small'
labelId='type-badge-label'
id='type-badge-checkbox'
multiple
value={typeFilter}
onChange={handleTypeFilterChange}
input={<OutlinedInput label='Badge' />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{types.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={typeFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<FormControl sx={{ m: 1, width: 250 }}>
<InputLabel size='small' id='type-fw-label'>
Framework
</InputLabel>
<Select
size='small'
labelId='type-fw-label'
id='type-fw-checkbox'
multiple
value={frameworkFilter}
onChange={handleFrameworkFilterChange}
input={<OutlinedInput label='Badge' />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
{framework.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={frameworkFilter.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
</Toolbar>
</Box>
)}
{!isLoading && (!view || view === 'card') && getAllTemplatesMarketplacesApi.data && (
<>
<Grid container spacing={gridSpacing}>
@@ -320,6 +387,7 @@ const Marketplace = () => {
.filter(filterByBadge)
.filter(filterByType)
.filter(filterFlows)
.filter(filterByFramework)
.map((data, index) => (
<Grid key={index} item lg={3} md={4} sm={6} xs={12}>
{data.badge && (
@@ -351,10 +419,10 @@ const Marketplace = () => {
<MarketplaceTable
sx={{ mt: 20 }}
data={getAllTemplatesMarketplacesApi.data}
images={images}
filterFunction={filterFlows}
filterByType={filterByType}
filterByBadge={filterByBadge}
filterByFramework={filterByFramework}
/>
)}