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:
Ilango
2024-07-26 20:17:58 +05:30
committed by GitHub
parent 1c730323e2
commit e5018d2743
6 changed files with 175 additions and 18 deletions
@@ -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,7 +401,14 @@ const ViewMessagesDialog = ({ show, dialogProps, onCancel }) => {
const handleItemClick = (idx, chatmsg) => {
setSelectedMessageIndex(idx)
getChatmessageFromPKApi.request(dialogProps.chatflow.id, transformChatPKToParams(getChatPK(chatmsg)))
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) => {
@@ -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