Skip to content

Commit

Permalink
Answer component updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@Roopan-Microsoft
Roopan-Microsoft committed Nov 21, 2024
1 parent 9a19fba commit 16c8e6e
Showing 1 changed file with 56 additions and 54 deletions.
110 changes: 56 additions & 54 deletions ClientAdvisor/App/frontend/src/components/Answer/Answer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { parseAnswer } from './AnswerParser'
import styles from './Answer.module.css'
import rehypeRaw from 'rehype-raw'


interface Props {
answer: AskResponse
onCitationClicked: (citedDocument: Citation) => void
Expand Down Expand Up @@ -79,72 +78,73 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
} else {
citationFilename = `${citation.filepath} - Part ${part_i}`
}
// } else if (citation.filepath && citation.reindex_id) {
// citationFilename = `${citation.filepath} - Part ${citation.reindex_id}`
} else {
citationFilename = `Citation ${index}`
}
return citationFilename
}

const onLikeResponseClicked = async () => {
if (answer.message_id == undefined) return
if (answer.message_id) {
let newFeedbackState = feedbackState
// Set or unset the thumbs up state
if (feedbackState == Feedback.Positive) {
newFeedbackState = Feedback.Neutral
} else {
newFeedbackState = Feedback.Positive
}
appStateContext?.dispatch({
type: 'SET_FEEDBACK_STATE',
payload: { answerId: answer.message_id, feedback: newFeedbackState }
})
setFeedbackState(newFeedbackState)

let newFeedbackState = feedbackState
// Set or unset the thumbs up state
if (feedbackState == Feedback.Positive) {
newFeedbackState = Feedback.Neutral
} else {
newFeedbackState = Feedback.Positive
// Update message feedback in db
await historyMessageFeedback(answer.message_id, newFeedbackState)
}
appStateContext?.dispatch({
type: 'SET_FEEDBACK_STATE',
payload: { answerId: answer.message_id, feedback: newFeedbackState }
})
setFeedbackState(newFeedbackState)

// Update message feedback in db
await historyMessageFeedback(answer.message_id, newFeedbackState)
}

const onDislikeResponseClicked = async () => {
if (answer.message_id == undefined) return

let newFeedbackState = feedbackState
if (feedbackState === undefined || feedbackState === Feedback.Neutral || feedbackState === Feedback.Positive) {
newFeedbackState = Feedback.Negative
setFeedbackState(newFeedbackState)
setIsFeedbackDialogOpen(true)
} else {
// Reset negative feedback to neutral
newFeedbackState = Feedback.Neutral
setFeedbackState(newFeedbackState)
await historyMessageFeedback(answer.message_id, Feedback.Neutral)
if (answer.message_id) {
let newFeedbackState = feedbackState
if (feedbackState === undefined || feedbackState === Feedback.Neutral || feedbackState === Feedback.Positive) {
newFeedbackState = Feedback.Negative
setFeedbackState(newFeedbackState)
setIsFeedbackDialogOpen(true)
} else {
// Reset negative feedback to neutral
newFeedbackState = Feedback.Neutral
setFeedbackState(newFeedbackState)
await historyMessageFeedback(answer.message_id, Feedback.Neutral)
}
appStateContext?.dispatch({
type: 'SET_FEEDBACK_STATE',
payload: { answerId: answer.message_id, feedback: newFeedbackState }
})
}
appStateContext?.dispatch({
type: 'SET_FEEDBACK_STATE',
payload: { answerId: answer.message_id, feedback: newFeedbackState }
})
}

const updateFeedbackList = (ev?: FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
if (answer.message_id == undefined) return
const selectedFeedback = (ev?.target as HTMLInputElement)?.id as Feedback
if (answer.message_id){
const selectedFeedback = (ev?.target as HTMLInputElement)?.id as Feedback

let feedbackList = negativeFeedbackList.slice()
if (checked) {
feedbackList.push(selectedFeedback)
} else {
feedbackList = feedbackList.filter(f => f !== selectedFeedback)
let feedbackList = negativeFeedbackList.slice()
if (checked) {
feedbackList.push(selectedFeedback)
} else {
feedbackList = feedbackList.filter(f => f !== selectedFeedback)
}

setNegativeFeedbackList(feedbackList)
}

setNegativeFeedbackList(feedbackList)

}

const onSubmitNegativeFeedback = async () => {
if (answer.message_id == undefined) return
await historyMessageFeedback(answer.message_id, negativeFeedbackList.join(','))
resetFeedbackDialog()
if (answer.message_id) {
await historyMessageFeedback(answer.message_id, negativeFeedbackList.join(','))
resetFeedbackDialog()
}
}

const resetFeedbackDialog = () => {
Expand Down Expand Up @@ -184,7 +184,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
defaultChecked={negativeFeedbackList.includes(Feedback.OtherUnhelpful)}
onChange={updateFeedbackList}></Checkbox>
</Stack>
<div onClick={() => setShowReportInappropriateFeedback(true)} style={{ color: '#115EA3', cursor: 'pointer' }}>
<div data-testid="InappropriateFeedback" onClick={() => setShowReportInappropriateFeedback(true)} style={{ color: '#115EA3', cursor: 'pointer' }}>
Report inappropriate content
</div>
</>
Expand All @@ -193,7 +193,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {

const ReportInappropriateFeedbackContent = () => {
return (
<>
<div data-testid="ReportInappropriateFeedbackContent">
<div>
The content is <span style={{ color: 'red' }}>*</span>
</div>
Expand Down Expand Up @@ -224,12 +224,12 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
defaultChecked={negativeFeedbackList.includes(Feedback.OtherHarmful)}
onChange={updateFeedbackList}></Checkbox>
</Stack>
</>
</div>
)
}

const components = {
code({ node, ...props }: { node: any; [key: string]: any }) {
code({ node, ...props }: { node: any;[key: string]: any }) {
let language
if (props.className) {
const match = props.className.match(/language-(\w+)/)
Expand All @@ -252,6 +252,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
<ReactMarkdown
linkTarget="_blank"
remarkPlugins={[remarkGfm, supersub]}
rehypePlugins={[rehypeRaw]}
children={
SANITIZE_ANSWER
? DOMPurify.sanitize(parsedAnswer.markdownFormatText, { ALLOWED_TAGS: XSSAllowTags })
Expand All @@ -270,7 +271,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
onClick={() => onLikeResponseClicked()}
style={
feedbackState === Feedback.Positive ||
appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
appStateContext?.state.feedbackState[answer.message_id] === Feedback.Positive
? { color: 'darkgreen', cursor: 'pointer' }
: { color: 'slategray', cursor: 'pointer' }
}
Expand All @@ -281,8 +282,8 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
onClick={() => onDislikeResponseClicked()}
style={
feedbackState !== Feedback.Positive &&
feedbackState !== Feedback.Neutral &&
feedbackState !== undefined
feedbackState !== Feedback.Neutral &&
feedbackState !== undefined
? { color: 'darkred', cursor: 'pointer' }
: { color: 'slategray', cursor: 'pointer' }
}
Expand All @@ -294,7 +295,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
</Stack.Item>
<Stack horizontal className={styles.answerFooter}>
{!!parsedAnswer.citations.length && (
<Stack.Item onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
<Stack.Item data-testid="stack-item" onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? toggleIsRefAccordionOpen() : null)}>
<Stack style={{ width: '100%' }}>
<Stack horizontal horizontalAlign="start" verticalAlign="center">
<Text
Expand All @@ -310,6 +311,7 @@ export const Answer = ({ answer, onCitationClicked }: Props) => {
</span>
</Text>
<FontIcon
data-testid="ChevronIcon"
className={styles.accordionIcon}
onClick={handleChevronClick}
iconName={chevronIsExpanded ? 'ChevronDown' : 'ChevronRight'}
Expand Down

0 comments on commit 16c8e6e

Please sign in to comment.