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

Merge branch 'main' into chore/Upgrade-LC-version

Browse Source 
# Conflicts:
#	packages/components/package.json
This commit is contained in:
Henry
2024-02-07 02:01:32 +08:00
parent 02fe500f21 188e2c748c
commit 73112ad122
54 changed files with 5331 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/assets/images/llamaindex.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

packages/ui/src/ui-component/dialog/NodeInfoDialog.js
+29
View File
@@ -132,6 +132,35 @@ const NodeInfoDialog = ({ show, dialogProps, onCancel }) => {
</span>
</div>
)}
{dialogProps.data.tags &&
dialogProps.data.tags.length &&
dialogProps.data.tags.map((tag, index) => (
<div
style={{
display: 'flex',
flexDirection: 'row',
width: 'max-content',
borderRadius: 15,
background: '#cae9ff',
padding: 5,
paddingLeft: 10,
paddingRight: 10,
marginTop: 5,
marginLeft: 10,
marginBottom: 5
}}
key={index}
>
<span
style={{
color: '#023e7d',
fontSize: '0.825rem'
}}
>
{tag.toLowerCase()}
</span>
</div>
))}
</div>
</div>
</div>
packages/ui/src/utils/genericHelper.js
+1
View File
@@ -277,6 +277,7 @@ export const generateExportFlowData = (flowData) => {
name: node.data.name,
type: node.data.type,
baseClasses: node.data.baseClasses,
tags: node.data.tags,
category: node.data.category,
description: node.data.description,
inputParams: node.data.inputParams,
packages/ui/src/views/canvas/AddNodes.js
+92 -8
View File
@@ -22,7 +22,9 @@ import {
Popper,
Stack,
Typography,
Chip
Chip,
Tab,
Tabs
} from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
@@ -36,12 +38,20 @@ import { StyledFab } from 'ui-component/button/StyledFab'
// icons
import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
import LlamaindexPNG from 'assets/images/llamaindex.png'
import LangChainPNG from 'assets/images/langchain.png'
// const
import { baseURL } from 'store/constant'
import { SET_COMPONENT_NODES } from 'store/actions'
// ==============================|| ADD NODES||============================== //
function a11yProps(index) {
return {
id: `attachment-tab-${index}`,
'aria-controls': `attachment-tabpanel-${index}`
}
}
const AddNodes = ({ nodesData, node }) => {
const theme = useTheme()
@@ -52,6 +62,7 @@ const AddNodes = ({ nodesData, node }) => {
const [nodes, setNodes] = useState({})
const [open, setOpen] = useState(false)
const [categoryExpanded, setCategoryExpanded] = useState({})
const [tabValue, setTabValue] = useState(0)
const anchorRef = useRef(null)
const prevOpen = useRef(open)
@@ -86,6 +97,11 @@ const AddNodes = ({ nodesData, node }) => {
}
}
const handleTabChange = (event, newValue) => {
setTabValue(newValue)
filterSearch(searchValue, newValue)
}
const getSearchedNodes = (value) => {
const passed = nodesData.filter((nd) => {
const passesQuery = nd.name.toLowerCase().includes(value.toLowerCase())
@@ -95,23 +111,34 @@ const AddNodes = ({ nodesData, node }) => {
return passed
}
const filterSearch = (value) => {
const filterSearch = (value, newTabValue) => {
setSearchValue(value)
setTimeout(() => {
if (value) {
const returnData = getSearchedNodes(value)
groupByCategory(returnData, true)
groupByCategory(returnData, newTabValue ?? tabValue, true)
scrollTop()
} else if (value === '') {
groupByCategory(nodesData)
groupByCategory(nodesData, newTabValue ?? tabValue)
scrollTop()
}
}, 500)
}
const groupByCategory = (nodes, isFilter) => {
const groupByTags = (nodes, newTabValue = 0) => {
const langchainNodes = nodes.filter((nd) => !nd.tags)
const llmaindexNodes = nodes.filter((nd) => nd.tags && nd.tags.includes('LlamaIndex'))
if (newTabValue === 0) {
return langchainNodes
} else {
return llmaindexNodes
}
}
const groupByCategory = (nodes, newTabValue, isFilter) => {
const taggedNodes = groupByTags(nodes, newTabValue)
const accordianCategories = {}
const result = nodes.reduce(function (r, a) {
const result = taggedNodes.reduce(function (r, a) {
r[a.category] = r[a.category] || []
r[a.category].push(a)
accordianCategories[a.category] = isFilter ? true : false
@@ -244,15 +271,72 @@ const AddNodes = ({ nodesData, node }) => {
'aria-label': 'weight'
}}
/>
<Tabs
sx={{ position: 'relative', minHeight: '50px', height: '50px' }}
variant='fullWidth'
value={tabValue}
onChange={handleTabChange}
aria-label='tabs'
>
{['LangChain', 'LlamaIndex'].map((item, index) => (
<Tab
icon={
<div
style={{
borderRadius: '50%'
}}
>
<img
style={{
width: '25px',
height: '25px',
borderRadius: '50%',
objectFit: 'contain'
}}
src={index === 0 ? LangChainPNG : LlamaindexPNG}
alt={item}
/>
</div>
}
iconPosition='start'
sx={{ minHeight: '50px', height: '50px' }}
key={index}
label={item}
{...a11yProps(index)}
></Tab>
))}
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
borderRadius: 10,
background: 'rgb(254,252,191)',
paddingLeft: 6,
paddingRight: 6,
paddingTop: 1,
paddingBottom: 1,
width: 'max-content',
position: 'absolute',
top: 0,
right: 0,
fontSize: '0.65rem',
fontWeight: 700
}}
>
<span style={{ color: 'rgb(116,66,16)' }}>BETA</span>
</div>
</Tabs>
<Divider />
</Box>
<PerfectScrollbar
containerRef={(el) => {
ps.current = el
}}
style={{ height: '100%', maxHeight: 'calc(100vh - 320px)', overflowX: 'hidden' }}
style={{ height: '100%', maxHeight: 'calc(100vh - 380px)', overflowX: 'hidden' }}
>
<Box sx={{ p: 2 }}>
<Box sx={{ p: 2, pt: 0 }}>
<List
sx={{
width: '100%',
packages/ui/src/views/canvas/CanvasNode.js
+18 -1
View File
@@ -19,6 +19,7 @@ import NodeInfoDialog from 'ui-component/dialog/NodeInfoDialog'
import { baseURL } from 'store/constant'
import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
import { flowContext } from 'store/context/ReactFlowContext'
import LlamaindexPNG from 'assets/images/llamaindex.png'
// ===========================|| CANVAS NODE ||=========================== //
@@ -158,9 +159,25 @@ const CanvasNode = ({ data }) => {
{data.label}
</Typography>
</Box>
<div style={{ flexGrow: 1 }}></div>
{data.tags && data.tags.includes('LlamaIndex') && (
<>
<div
style={{
borderRadius: '50%',
padding: 15
}}
>
<img
style={{ width: '25px', height: '25px', borderRadius: '50%', objectFit: 'contain' }}
src={LlamaindexPNG}
alt='LlamaIndex'
/>
</div>
</>
)}
{warningMessage && (
<>
<div style={{ flexGrow: 1 }}></div>
<Tooltip title={<span style={{ whiteSpace: 'pre-line' }}>{warningMessage}</span>} placement='top'>
<IconButton sx={{ height: 35, width: 35 }}>
<IconAlertTriangle size={35} color='orange' />
packages/ui/src/views/marketplaces/MarketplaceCanvasNode.js
+18
View File
@@ -13,6 +13,7 @@ import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
// const
import { baseURL } from 'store/constant'
import LlamaindexPNG from 'assets/images/llamaindex.png'
const CardWrapper = styled(MainCard)(({ theme }) => ({
background: theme.palette.card.main,
@@ -87,6 +88,23 @@ const MarketplaceCanvasNode = ({ data }) => {
{data.label}
</Typography>
</Box>
<div style={{ flexGrow: 1 }}></div>
{data.tags && data.tags.includes('LlamaIndex') && (
<>
<div
style={{
borderRadius: '50%',
padding: 15
}}
>
<img
style={{ width: '25px', height: '25px', borderRadius: '50%', objectFit: 'contain' }}
src={LlamaindexPNG}
alt='LlamaIndex'
/>
</div>
</>
)}
</div>
{(data.inputAnchors.length > 0 || data.inputParams.length > 0) && (
<>