mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-22 09:01:09 +03:00
Feature: add tooltip display on icon hover in chatflows and marketplace page (#4428)
* feat: add tooltip display on icon hover in chatflows and marketplace page * update list view, remove sticky note images --------- Co-authored-by: Henry <hzj94@hotmail.com>
This commit is contained in:
Anoop P
@@ -3,10 +3,11 @@ import { useSelector } from 'react-redux'
|
||||
|
||||
// material-ui
|
||||
import { styled } from '@mui/material/styles'
|
||||
import { Box, Grid, Typography, useTheme } from '@mui/material'
|
||||
import { Box, Grid, Tooltip, Typography, useTheme } from '@mui/material'
|
||||
|
||||
// project imports
|
||||
import MainCard from '@/ui-component/cards/MainCard'
|
||||
import MoreItemsTooltip from '../tooltip/MoreItemsTooltip'
|
||||
|
||||
const CardWrapper = styled(MainCard)(({ theme }) => ({
|
||||
background: theme.palette.card.main,
|
||||
@@ -116,48 +117,63 @@ const ItemCard = ({ data, images, icons, onClick }) => {
|
||||
}}
|
||||
>
|
||||
{[
|
||||
...(images || []).map((img) => ({ type: 'image', src: img })),
|
||||
...(icons || []).map((ic) => ({ type: 'icon', icon: ic.icon, color: ic.color }))
|
||||
...(images || []).map((img) => ({ type: 'image', src: img.imageSrc, label: img.label })),
|
||||
...(icons || []).map((ic) => ({ type: 'icon', icon: ic.icon, color: ic.color, label: ic.name }))
|
||||
]
|
||||
.slice(0, 3)
|
||||
.map((item, index) =>
|
||||
item.type === 'image' ? (
|
||||
<Box
|
||||
key={item.src}
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: customization.isDarkMode
|
||||
? theme.palette.common.white
|
||||
: theme.palette.grey[300] + 75
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
|
||||
alt=''
|
||||
src={item.src}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<item.icon size={25} color={item.color} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{images?.length + (icons?.length || 0) > 3 && (
|
||||
<Typography sx={{ alignItems: 'center', display: 'flex', fontSize: '.9rem', fontWeight: 200 }}>
|
||||
+ {images?.length + (icons?.length || 0) - 3} More
|
||||
</Typography>
|
||||
.map((item, index) => (
|
||||
<Tooltip key={item.src || index} title={item.label} placement='top'>
|
||||
{item.type === 'image' ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: customization.isDarkMode
|
||||
? theme.palette.common.white
|
||||
: theme.palette.grey[300] + 75
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{ width: '100%', height: '100%', padding: 5, objectFit: 'contain' }}
|
||||
alt=''
|
||||
src={item.src}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<item.icon size={25} color={item.color} />
|
||||
</div>
|
||||
)}
|
||||
</Tooltip>
|
||||
))}
|
||||
|
||||
{(images?.length || 0) + (icons?.length || 0) > 3 && (
|
||||
<MoreItemsTooltip
|
||||
images={[
|
||||
...(images?.slice(3) || []),
|
||||
...(icons?.slice(Math.max(0, 3 - (images?.length || 0))) || []).map((ic) => ({ label: ic.name }))
|
||||
]}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontSize: '.9rem',
|
||||
fontWeight: 200
|
||||
}}
|
||||
>
|
||||
+ {(images?.length || 0) + (icons?.length || 0) - 3} More
|
||||
</Typography>
|
||||
</MoreItemsTooltip>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -25,6 +25,8 @@ import FlowListMenu from '../button/FlowListMenu'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useAuth } from '@/hooks/useAuth'
|
||||
|
||||
import MoreItemsTooltip from '../tooltip/MoreItemsTooltip'
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
borderColor: theme.palette.grey[900] + 25,
|
||||
|
||||
@@ -234,64 +236,80 @@ export const FlowListTable = ({
|
||||
}}
|
||||
>
|
||||
{[
|
||||
...(images[row.id] || []).map((img) => ({ type: 'image', src: img })),
|
||||
...(images[row.id] || []).map((img) => ({
|
||||
type: 'image',
|
||||
src: img.imageSrc,
|
||||
label: img.label
|
||||
})),
|
||||
...(icons[row.id] || []).map((ic) => ({
|
||||
type: 'icon',
|
||||
icon: ic.icon,
|
||||
color: ic.color
|
||||
color: ic.color,
|
||||
title: ic.name
|
||||
}))
|
||||
]
|
||||
.slice(0, 5)
|
||||
.map((item, index) =>
|
||||
item.type === 'image' ? (
|
||||
<Box
|
||||
key={item.src}
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: customization.isDarkMode
|
||||
? theme.palette.common.white
|
||||
: theme.palette.grey[300] + 75
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: 5,
|
||||
objectFit: 'contain'
|
||||
.map((item, index) => (
|
||||
<Tooltip key={item.imageSrc || index} title={item.label} placement='top'>
|
||||
{item.type === 'image' ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: customization.isDarkMode
|
||||
? theme.palette.common.white
|
||||
: theme.palette.grey[300] + 75
|
||||
}}
|
||||
alt=''
|
||||
src={item.src}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<item.icon size={25} color={item.color} />
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: 5,
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
alt=''
|
||||
src={item.src}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<item.icon size={25} color={item.color} />
|
||||
</div>
|
||||
)}
|
||||
</Tooltip>
|
||||
))}
|
||||
|
||||
{(images[row.id]?.length || 0) + (icons[row.id]?.length || 0) > 5 && (
|
||||
<Typography
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontSize: '.9rem',
|
||||
fontWeight: 200
|
||||
}}
|
||||
<MoreItemsTooltip
|
||||
images={[
|
||||
...(images[row.id]?.slice(5) || []),
|
||||
...(
|
||||
icons[row.id]?.slice(Math.max(0, 5 - (images[row.id]?.length || 0))) ||
|
||||
[]
|
||||
).map((ic) => ({ label: ic.name }))
|
||||
]}
|
||||
>
|
||||
+ {(images[row.id]?.length || 0) + (icons[row.id]?.length || 0) - 5} More
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontSize: '.9rem',
|
||||
fontWeight: 200
|
||||
}}
|
||||
>
|
||||
+ {(images[row.id]?.length || 0) + (icons[row.id]?.length || 0) - 5} More
|
||||
</Typography>
|
||||
</MoreItemsTooltip>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Tooltip, Typography } from '@mui/material'
|
||||
import { styled } from '@mui/material/styles'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const StyledOl = styled('ol')(() => ({
|
||||
paddingLeft: 20,
|
||||
margin: 0
|
||||
}))
|
||||
|
||||
const StyledLi = styled('li')(() => ({
|
||||
paddingBottom: 4
|
||||
}))
|
||||
|
||||
const MoreItemsTooltip = ({ images, children }) => {
|
||||
if (!images || images.length === 0) return children
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
title={
|
||||
<StyledOl>
|
||||
{images.map((img) => (
|
||||
<StyledLi key={img.imageSrc || img.label}>
|
||||
<Typography>{img.label}</Typography>
|
||||
</StyledLi>
|
||||
))}
|
||||
</StyledOl>
|
||||
}
|
||||
placement='top'
|
||||
>
|
||||
{children}
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
export default MoreItemsTooltip
|
||||
|
||||
MoreItemsTooltip.propTypes = {
|
||||
images: PropTypes.array,
|
||||
children: PropTypes.node
|
||||
}
|
||||
@@ -117,13 +117,17 @@ const Agentflows = () => {
|
||||
images[agentflows[i].id] = []
|
||||
icons[agentflows[i].id] = []
|
||||
for (let j = 0; j < nodes.length; j += 1) {
|
||||
if (nodes[j].data.name === 'stickyNote' || nodes[j].data.name === 'stickyNoteAgentflow') continue
|
||||
const foundIcon = AGENTFLOW_ICONS.find((icon) => icon.name === nodes[j].data.name)
|
||||
if (foundIcon) {
|
||||
icons[agentflows[i].id].push(foundIcon)
|
||||
} else {
|
||||
const imageSrc = `${baseURL}/api/v1/node-icon/${nodes[j].data.name}`
|
||||
if (!images[agentflows[i].id].includes(imageSrc)) {
|
||||
images[agentflows[i].id].push(imageSrc)
|
||||
if (!images[agentflows[i].id].some((img) => img.imageSrc === imageSrc)) {
|
||||
images[agentflows[i].id].push({
|
||||
imageSrc,
|
||||
label: nodes[j].data.label
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,9 +89,13 @@ const Chatflows = () => {
|
||||
const nodes = flowData.nodes || []
|
||||
images[chatflows[i].id] = []
|
||||
for (let j = 0; j < nodes.length; j += 1) {
|
||||
if (nodes[j].data.name === 'stickyNote' || nodes[j].data.name === 'stickyNoteAgentflow') continue
|
||||
const imageSrc = `${baseURL}/api/v1/node-icon/${nodes[j].data.name}`
|
||||
if (!images[chatflows[i].id].includes(imageSrc)) {
|
||||
images[chatflows[i].id].push(imageSrc)
|
||||
if (!images[chatflows[i].id].some((img) => img.imageSrc === imageSrc)) {
|
||||
images[chatflows[i].id].push({
|
||||
imageSrc,
|
||||
label: nodes[j].data.label
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -375,13 +375,17 @@ const Marketplace = () => {
|
||||
images[flows[i].id] = []
|
||||
icons[flows[i].id] = []
|
||||
for (let j = 0; j < nodes.length; j += 1) {
|
||||
if (nodes[j].data.name === 'stickyNote' || nodes[j].data.name === 'stickyNoteAgentflow') continue
|
||||
const foundIcon = AGENTFLOW_ICONS.find((icon) => icon.name === nodes[j].data.name)
|
||||
if (foundIcon) {
|
||||
icons[flows[i].id].push(foundIcon)
|
||||
} else {
|
||||
const imageSrc = `${baseURL}/api/v1/node-icon/${nodes[j].data.name}`
|
||||
if (!images[flows[i].id].includes(imageSrc)) {
|
||||
images[flows[i].id].push(imageSrc)
|
||||
if (!images[flows[i].id].some((img) => img.imageSrc === imageSrc)) {
|
||||
images[flows[i].id].push({
|
||||
imageSrc,
|
||||
label: nodes[j].data.name
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user