mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 23:01:09 +03:00
Filter by feedback type in view messages dialog (#2869)
* Update get chat messages and stats filter to work with feedback type filter * Add feedback type filter to view messages dialog * Fix issues with feedback type filter
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { Request, Response, NextFunction } from 'express'
|
||||
import { chatType, IReactFlowObject } from '../../Interface'
|
||||
import { ChatMessageRatingType, chatType, IReactFlowObject } from '../../Interface'
|
||||
import chatflowsService from '../../services/chatflows'
|
||||
import chatMessagesService from '../../services/chat-messages'
|
||||
import { clearSessionMemory } from '../../utils'
|
||||
@@ -49,6 +49,26 @@ const getAllChatMessages = async (req: Request, res: Response, next: NextFunctio
|
||||
const startDate = req.query?.startDate as string | undefined
|
||||
const endDate = req.query?.endDate as string | undefined
|
||||
const feedback = req.query?.feedback as boolean | undefined
|
||||
let feedbackTypeFilters = req.query?.feedbackType as ChatMessageRatingType[] | undefined
|
||||
if (feedbackTypeFilters) {
|
||||
try {
|
||||
const feedbackTypeFilterArray = JSON.parse(JSON.stringify(feedbackTypeFilters))
|
||||
if (
|
||||
feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_UP) &&
|
||||
feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_DOWN)
|
||||
) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_UP, ChatMessageRatingType.THUMBS_DOWN]
|
||||
} else if (feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_UP)) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_UP]
|
||||
} else if (feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_DOWN)) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_DOWN]
|
||||
} else {
|
||||
feedbackTypeFilters = undefined
|
||||
}
|
||||
} catch (e) {
|
||||
return res.status(500).send(e)
|
||||
}
|
||||
}
|
||||
if (typeof req.params === 'undefined' || !req.params.id) {
|
||||
throw new InternalFlowiseError(
|
||||
StatusCodes.PRECONDITION_FAILED,
|
||||
@@ -65,7 +85,8 @@ const getAllChatMessages = async (req: Request, res: Response, next: NextFunctio
|
||||
startDate,
|
||||
endDate,
|
||||
messageId,
|
||||
feedback
|
||||
feedback,
|
||||
feedbackTypeFilters
|
||||
)
|
||||
return res.json(apiResponse)
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { StatusCodes } from 'http-status-codes'
|
||||
import { Request, Response, NextFunction } from 'express'
|
||||
import statsService from '../../services/stats'
|
||||
import { chatType } from '../../Interface'
|
||||
import { ChatMessageRatingType, chatType } from '../../Interface'
|
||||
import { InternalFlowiseError } from '../../errors/internalFlowiseError'
|
||||
import { getErrorMessage } from '../../errors/utils'
|
||||
|
||||
@@ -14,6 +14,7 @@ const getChatflowStats = async (req: Request, res: Response, next: NextFunction)
|
||||
let chatTypeFilter = req.query?.chatType as chatType | undefined
|
||||
const startDate = req.query?.startDate as string | undefined
|
||||
const endDate = req.query?.endDate as string | undefined
|
||||
let feedbackTypeFilters = req.query?.feedbackType as ChatMessageRatingType[] | undefined
|
||||
if (chatTypeFilter) {
|
||||
try {
|
||||
const chatTypeFilterArray = JSON.parse(chatTypeFilter)
|
||||
@@ -31,7 +32,34 @@ const getChatflowStats = async (req: Request, res: Response, next: NextFunction)
|
||||
)
|
||||
}
|
||||
}
|
||||
const apiResponse = await statsService.getChatflowStats(chatflowid, chatTypeFilter, startDate, endDate, '', true)
|
||||
if (feedbackTypeFilters) {
|
||||
try {
|
||||
const feedbackTypeFilterArray = JSON.parse(JSON.stringify(feedbackTypeFilters))
|
||||
if (
|
||||
feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_UP) &&
|
||||
feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_DOWN)
|
||||
) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_UP, ChatMessageRatingType.THUMBS_DOWN]
|
||||
} else if (feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_UP)) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_UP]
|
||||
} else if (feedbackTypeFilterArray.includes(ChatMessageRatingType.THUMBS_DOWN)) {
|
||||
feedbackTypeFilters = [ChatMessageRatingType.THUMBS_DOWN]
|
||||
} else {
|
||||
feedbackTypeFilters = undefined
|
||||
}
|
||||
} catch (e) {
|
||||
return res.status(500).send(e)
|
||||
}
|
||||
}
|
||||
const apiResponse = await statsService.getChatflowStats(
|
||||
chatflowid,
|
||||
chatTypeFilter,
|
||||
startDate,
|
||||
endDate,
|
||||
'',
|
||||
true,
|
||||
feedbackTypeFilters
|
||||
)
|
||||
return res.json(apiResponse)
|
||||
} catch (error) {
|
||||
next(error)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { DeleteResult, FindOptionsWhere } from 'typeorm'
|
||||
import { StatusCodes } from 'http-status-codes'
|
||||
import { chatType, IChatMessage } from '../../Interface'
|
||||
import { ChatMessageRatingType, chatType, IChatMessage } from '../../Interface'
|
||||
import { utilGetChatMessage } from '../../utils/getChatMessage'
|
||||
import { utilAddChatMessage } from '../../utils/addChatMesage'
|
||||
import { getRunningExpressApp } from '../../utils/getRunningExpressApp'
|
||||
@@ -35,7 +35,8 @@ const getAllChatMessages = async (
|
||||
startDate?: string,
|
||||
endDate?: string,
|
||||
messageId?: string,
|
||||
feedback?: boolean
|
||||
feedback?: boolean,
|
||||
feedbackTypes?: ChatMessageRatingType[]
|
||||
): Promise<ChatMessage[]> => {
|
||||
try {
|
||||
const dbResponse = await utilGetChatMessage(
|
||||
@@ -48,7 +49,8 @@ const getAllChatMessages = async (
|
||||
startDate,
|
||||
endDate,
|
||||
messageId,
|
||||
feedback
|
||||
feedback,
|
||||
feedbackTypes
|
||||
)
|
||||
return dbResponse
|
||||
} catch (error) {
|
||||
@@ -70,7 +72,8 @@ const getAllInternalChatMessages = async (
|
||||
startDate?: string,
|
||||
endDate?: string,
|
||||
messageId?: string,
|
||||
feedback?: boolean
|
||||
feedback?: boolean,
|
||||
feedbackTypes?: ChatMessageRatingType[]
|
||||
): Promise<ChatMessage[]> => {
|
||||
try {
|
||||
const dbResponse = await utilGetChatMessage(
|
||||
@@ -83,7 +86,8 @@ const getAllInternalChatMessages = async (
|
||||
startDate,
|
||||
endDate,
|
||||
messageId,
|
||||
feedback
|
||||
feedback,
|
||||
feedbackTypes
|
||||
)
|
||||
return dbResponse
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { StatusCodes } from 'http-status-codes'
|
||||
import { chatType } from '../../Interface'
|
||||
import { ChatMessageRatingType, chatType } from '../../Interface'
|
||||
import { ChatMessage } from '../../database/entities/ChatMessage'
|
||||
import { utilGetChatMessage } from '../../utils/getChatMessage'
|
||||
import { ChatMessageFeedback } from '../../database/entities/ChatMessageFeedback'
|
||||
@@ -13,7 +13,8 @@ const getChatflowStats = async (
|
||||
startDate?: string,
|
||||
endDate?: string,
|
||||
messageId?: string,
|
||||
feedback?: boolean
|
||||
feedback?: boolean,
|
||||
feedbackTypes?: ChatMessageRatingType[]
|
||||
): Promise<any> => {
|
||||
try {
|
||||
const chatmessages = (await utilGetChatMessage(
|
||||
@@ -26,7 +27,8 @@ const getChatflowStats = async (
|
||||
startDate,
|
||||
endDate,
|
||||
messageId,
|
||||
feedback
|
||||
feedback,
|
||||
feedbackTypes
|
||||
)) as Array<ChatMessage & { feedback?: ChatMessageFeedback }>
|
||||
const totalMessages = chatmessages.length
|
||||
const totalFeedback = chatmessages.filter((message) => message?.feedback).length
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { MoreThanOrEqual, LessThanOrEqual } from 'typeorm'
|
||||
import { chatType } from '../Interface'
|
||||
import { ChatMessageRatingType, chatType } from '../Interface'
|
||||
import { ChatMessage } from '../database/entities/ChatMessage'
|
||||
import { ChatMessageFeedback } from '../database/entities/ChatMessageFeedback'
|
||||
import { getRunningExpressApp } from '../utils/getRunningExpressApp'
|
||||
|
||||
/**
|
||||
* Method that get chat messages.
|
||||
* @param {string} chatflowid
|
||||
@@ -14,6 +15,7 @@ import { getRunningExpressApp } from '../utils/getRunningExpressApp'
|
||||
* @param {string} startDate
|
||||
* @param {string} endDate
|
||||
* @param {boolean} feedback
|
||||
* @param {ChatMessageRatingType[]} feedbackTypes
|
||||
*/
|
||||
export const utilGetChatMessage = async (
|
||||
chatflowid: string,
|
||||
@@ -25,7 +27,8 @@ export const utilGetChatMessage = async (
|
||||
startDate?: string,
|
||||
endDate?: string,
|
||||
messageId?: string,
|
||||
feedback?: boolean
|
||||
feedback?: boolean,
|
||||
feedbackTypes?: ChatMessageRatingType[]
|
||||
): Promise<ChatMessage[]> => {
|
||||
const appServer = getRunningExpressApp()
|
||||
const setDateToStartOrEndOfDay = (dateTimeStr: string, setHours: 'start' | 'end') => {
|
||||
@@ -79,7 +82,23 @@ export const utilGetChatMessage = async (
|
||||
// sort
|
||||
query.orderBy('chat_message.createdDate', sortOrder === 'DESC' ? 'DESC' : 'ASC')
|
||||
|
||||
const messages = await query.getMany()
|
||||
const messages = (await query.getMany()) as Array<ChatMessage & { feedback: ChatMessageFeedback }>
|
||||
|
||||
if (feedbackTypes && feedbackTypes.length > 0) {
|
||||
// just applying a filter to the messages array will only return the messages that have feedback,
|
||||
// but we also want the message before the feedback message which is the user message.
|
||||
const indicesToKeep = new Set()
|
||||
|
||||
messages.forEach((message, index) => {
|
||||
if (message.role === 'apiMessage' && message.feedback && feedbackTypes.includes(message.feedback.rating)) {
|
||||
if (index > 0) indicesToKeep.add(index - 1)
|
||||
indicesToKeep.add(index)
|
||||
}
|
||||
})
|
||||
|
||||
return messages.filter((_, index) => indicesToKeep.has(index))
|
||||
}
|
||||
|
||||
return messages
|
||||
}
|
||||
|
||||
|
||||
@@ -103,6 +103,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
const [sourceDialogOpen, setSourceDialogOpen] = useState(false)
|
||||
const [sourceDialogProps, setSourceDialogProps] = useState({})
|
||||
const [chatTypeFilter, setChatTypeFilter] = useState([])
|
||||
const [feedbackTypeFilter, setFeedbackTypeFilter] = useState([])
|
||||
const [startDate, setStartDate] = useState(new Date().setMonth(new Date().getMonth() - 1))
|
||||
const [endDate, setEndDate] = useState(new Date())
|
||||
const [leadEmail, setLeadEmail] = useState('')
|
||||
@@ -155,6 +156,24 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
})
|
||||
}
|
||||
|
||||
const onFeedbackTypeSelected = (feedbackTypes) => {
|
||||
setFeedbackTypeFilter(feedbackTypes)
|
||||
|
||||
getChatmessageApi.request(dialogProps.chatflow.id, {
|
||||
chatType: chatTypeFilter.length ? chatTypeFilter : undefined,
|
||||
feedbackType: feedbackTypes.length ? feedbackTypes : undefined,
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
order: 'ASC'
|
||||
})
|
||||
getStatsApi.request(dialogProps.chatflow.id, {
|
||||
chatType: chatTypeFilter.length ? chatTypeFilter : undefined,
|
||||
feedbackType: feedbackTypes.length ? feedbackTypes : undefined,
|
||||
startDate: startDate,
|
||||
endDate: endDate
|
||||
})
|
||||
}
|
||||
|
||||
const exportMessages = async () => {
|
||||
if (!storagePath && getStoragePathFromServer.data) {
|
||||
storagePath = getStoragePathFromServer.data.storagePath
|
||||
@@ -382,8 +401,15 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
|
||||
const handleItemClick = (idx, chatmsg) => {
|
||||
setSelectedMessageIndex(idx)
|
||||
if (feedbackTypeFilter.length > 0) {
|
||||
getChatmessageFromPKApi.request(dialogProps.chatflow.id, {
|
||||
...transformChatPKToParams(getChatPK(chatmsg)),
|
||||
feedbackType: feedbackTypeFilter
|
||||
})
|
||||
} else {
|
||||
getChatmessageFromPKApi.request(dialogProps.chatflow.id, transformChatPKToParams(getChatPK(chatmsg)))
|
||||
}
|
||||
}
|
||||
|
||||
const onURLClick = (data) => {
|
||||
window.open(data, '_blank')
|
||||
@@ -436,7 +462,16 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
setAllChatLogs(getChatmessageApi.data)
|
||||
const chatPK = processChatLogs(getChatmessageApi.data)
|
||||
setSelectedMessageIndex(0)
|
||||
if (chatPK) getChatmessageFromPKApi.request(dialogProps.chatflow.id, transformChatPKToParams(chatPK))
|
||||
if (chatPK) {
|
||||
if (feedbackTypeFilter.length > 0) {
|
||||
getChatmessageFromPKApi.request(dialogProps.chatflow.id, {
|
||||
...transformChatPKToParams(chatPK),
|
||||
feedbackType: feedbackTypeFilter
|
||||
})
|
||||
} else {
|
||||
getChatmessageFromPKApi.request(dialogProps.chatflow.id, transformChatPKToParams(chatPK))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
@@ -459,6 +494,7 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
setAllChatLogs([])
|
||||
setChatMessages([])
|
||||
setChatTypeFilter([])
|
||||
setFeedbackTypeFilter([])
|
||||
setSelectedMessageIndex(0)
|
||||
setSelectedChatId('')
|
||||
setStartDate(new Date().setMonth(new Date().getMonth() - 1))
|
||||
@@ -476,6 +512,17 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
return () => dispatch({ type: HIDE_CANVAS_DIALOG })
|
||||
}, [show, dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
if (dialogProps.chatflow) {
|
||||
// when the filter is cleared fetch all messages
|
||||
if (feedbackTypeFilter.length === 0) {
|
||||
getChatmessageApi.request(dialogProps.chatflow.id)
|
||||
getStatsApi.request(dialogProps.chatflow.id)
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [feedbackTypeFilter])
|
||||
|
||||
const component = show ? (
|
||||
<Dialog
|
||||
onClose={onCancel}
|
||||
@@ -530,7 +577,15 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
customInput={<DatePickerCustomInput />}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', minWidth: '200px', marginRight: 10 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
minWidth: '200px',
|
||||
marginRight: 10
|
||||
}}
|
||||
>
|
||||
<b style={{ marginRight: 10 }}>Source</b>
|
||||
<MultiDropdown
|
||||
key={JSON.stringify(chatTypeFilter)}
|
||||
@@ -550,6 +605,34 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
|
||||
formControlSx={{ mt: 0 }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
minWidth: '200px',
|
||||
marginRight: 10
|
||||
}}
|
||||
>
|
||||
<b style={{ marginRight: 10 }}>Feedback</b>
|
||||
<MultiDropdown
|
||||
key={JSON.stringify(feedbackTypeFilter)}
|
||||
name='chatType'
|
||||
options={[
|
||||
{
|
||||
label: 'Positive',
|
||||
name: 'THUMBS_UP'
|
||||
},
|
||||
{
|
||||
label: 'Negative',
|
||||
name: 'THUMBS_DOWN'
|
||||
}
|
||||
]}
|
||||
onSelect={(newValue) => onFeedbackTypeSelected(newValue)}
|
||||
value={feedbackTypeFilter}
|
||||
formControlSx={{ mt: 0 }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}></div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user