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

Fix merge conflict and update how feedback is saved/retrieved

Browse Source
This commit is contained in:
Ilango
2024-02-20 14:38:36 +05:30
parent f9f26204be
commit 3bb2b39896
12 changed files with 289 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/api/chatmessage.js
+3 -2
View File
@@ -1,8 +1,9 @@
import client from './client'
const getInternalChatmessageFromChatflow = (id) => client.get(`/internal-chatmessage/${id}`)
const getAllChatmessageFromChatflow = (id, params = {}) => client.get(`/chatmessage/${id}`, { params: { order: 'DESC', ...params } })
const getChatmessageFromPK = (id, params = {}) => client.get(`/chatmessage/${id}`, { params: { order: 'ASC', ...params } })
const getAllChatmessageFromChatflow = (id, params = {}) =>
client.get(`/chatmessage/${id}`, { params: { order: 'DESC', feedback: true, ...params } })
const getChatmessageFromPK = (id, params = {}) => client.get(`/chatmessage/${id}`, { params: { order: 'ASC', feedback: true, ...params } })
const deleteChatmessage = (id, params = {}) => client.delete(`/chatmessage/${id}`, { params: { ...params } })
export default {
packages/ui/src/api/feedback.js
+7
View File
@@ -0,0 +1,7 @@
import client from './client'
const getStatsFromChatflow = (id) => client.get(`/stats/${id}`)
export default {
getStatsFromChatflow
}
packages/ui/src/ui-component/cards/StatsCard.js
+29
View File
@@ -0,0 +1,29 @@
import PropTypes from 'prop-types'
import { useSelector } from 'react-redux'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
const StatsCard = ({ title, stat }) => {
const customization = useSelector((state) => state.customization)
return (
<Card sx={{ border: '1px solid #e0e0e0', borderRadius: `${customization.borderRadius}px` }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color='text.secondary' gutterBottom>
{title}
</Typography>
<Typography sx={{ fontSize: 30, fontWeight: 500 }} color='text.secondary'>
{stat}
</Typography>
</CardContent>
</Card>
)
}
StatsCard.propTypes = {
title: PropTypes.string,
stat: PropTypes.string
}
export default StatsCard
packages/ui/src/ui-component/dialog/ViewMessagesDialog.js
+45 -1
View File
@@ -37,12 +37,15 @@ import { CodeBlock } from 'ui-component/markdown/CodeBlock'
import SourceDocDialog from 'ui-component/dialog/SourceDocDialog'
import { MultiDropdown } from 'ui-component/dropdown/MultiDropdown'
import { StyledButton } from 'ui-component/button/StyledButton'
import StatsCard from 'ui-component/cards/StatsCard'
import Feedback from 'ui-component/extended/Feedback'
// store
import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
// API
import chatmessageApi from 'api/chatmessage'
import feedbackApi from 'api/feedback'
import useApi from 'hooks/useApi'
import useConfirm from 'hooks/useConfirm'
@@ -83,6 +86,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
const [chatlogs, setChatLogs] = useState([])
const [allChatlogs, setAllChatLogs] = useState([])
const [chatMessages, setChatMessages] = useState([])
const [stats, setStats] = useState([])
const [selectedMessageIndex, setSelectedMessageIndex] = useState(0)
const [sourceDialogOpen, setSourceDialogOpen] = useState(false)
const [sourceDialogProps, setSourceDialogProps] = useState({})
@@ -92,6 +96,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
const getChatmessageApi = useApi(chatmessageApi.getAllChatmessageFromChatflow)
const getChatmessageFromPKApi = useApi(chatmessageApi.getChatmessageFromPK)
const getStatsApi = useApi(feedbackApi.getStatsFromChatflow)
const onStartDateSelected = (date) => {
setStartDate(date)
@@ -366,9 +371,16 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getChatmessageApi.data])
useEffect(() => {
if (getStatsApi.data) {
setStats(getStatsApi.data)
}
}, [getStatsApi.data])
useEffect(() => {
if (dialogProps.chatflow) {
getChatmessageApi.request(dialogProps.chatflow.id)
getStatsApi.request(dialogProps.chatflow.id)
}
return () => {
@@ -410,7 +422,33 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
</DialogTitle>
<DialogContent>
<>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', marginBottom: 10 }}>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
gap: 10,
marginBottom: 16,
marginLeft: 8,
marginRight: 8
}}
>
<StatsCard title='Total Messages (External)' stat={`${stats.totalMessages}`} />
<StatsCard title='Total Feedback Received' stat={`${stats.totalFeedback}`} />
<StatsCard
title='Positive Feedback'
stat={`${((stats.positiveFeedback / stats.totalFeedback) * 100 || 0).toFixed(2)}%`}
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: 16,
marginLeft: 8,
marginRight: 8
}}
>
<div style={{ marginRight: 10 }}>
<b style={{ marginRight: 10 }}>From Date</b>
<DatePicker
@@ -728,6 +766,12 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
})}
</div>
)}
{message.type === 'apiMessage' && message.feedback ? (
<Feedback
content={message.feedback?.content || ''}
rating={message.feedback?.rating}
/>
) : null}
</div>
</Box>
)
packages/ui/src/ui-component/extended/Feedback.js
+71
View File
@@ -0,0 +1,71 @@
import { Alert, IconButton } from '@mui/material'
import { useTheme } from '@mui/material/styles'
import PropTypes from 'prop-types'
const ThumbsUpIcon = () => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
>
<path d='M7 10v12' />
<path d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z' />
</svg>
)
}
const ThumbsDownIcon = () => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='20'
height='20'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
>
<path d='M17 14V2' />
<path d='M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z' />
</svg>
)
}
const Feedback = ({ content, rating }) => {
const theme = useTheme()
return (
<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'start' }}>
{content ? (
<Alert
icon={rating === 'THUMBS_UP' ? <ThumbsUpIcon /> : <ThumbsDownIcon />}
severity={rating === 'THUMBS_UP' ? 'success' : 'error'}
style={{ marginBottom: 14 }}
variant='outlined'
>
{content ? <span style={{ color: theme.palette.text.primary }}>{content}</span> : null}
</Alert>
) : (
<IconButton color={rating === 'THUMBS_UP' ? 'success' : 'error'} style={{ marginBottom: 14 }}>
{rating === 'THUMBS_UP' ? <ThumbsUpIcon /> : <ThumbsDownIcon />}
</IconButton>
)}
</div>
)
}
Feedback.propTypes = {
rating: PropTypes.oneOf(['THUMBS_UP', 'THUMBS_DOWN']),
content: PropTypes.string
}
export default Feedback