|
1 | | -import { useMemo } from "react"; |
| 1 | +import { useMemo,useState } from "react"; |
2 | 2 | import { Stack, IconButton } from "@fluentui/react"; |
3 | 3 | import DOMPurify from "dompurify"; |
4 | 4 |
|
@@ -29,6 +29,7 @@ export const Answer = ({ |
29 | 29 | onFollowupQuestionClicked, |
30 | 30 | showFollowupQuestions |
31 | 31 | }: Props) => { |
| 32 | + const [isReferencesCollapsed, setIsReferencesCollapsed] = useState(true); |
32 | 33 | const followupQuestions = answer.context.followup_questions; |
33 | 34 | const messageContent = answer.message.content; |
34 | 35 | const parsedAnswer = useMemo(() => parseAnswerToHtml(messageContent, isStreaming, onCitationClicked), [answer]); |
@@ -60,22 +61,32 @@ export const Answer = ({ |
60 | 61 | {!!parsedAnswer.citations.length && ( |
61 | 62 | <Stack.Item> |
62 | 63 | <Stack horizontal wrap tokens={{ childrenGap: 5 }}> |
63 | | - <span className={styles.citationLearnMore}>References:</span> |
| 64 | + <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }}> |
| 65 | + <IconButton |
| 66 | + iconProps={{ iconName: isReferencesCollapsed ? "ChevronDown" : "ChevronUp" }} |
| 67 | + title={isReferencesCollapsed ? "Expand references" : "Collapse references"} |
| 68 | + ariaLabel={isReferencesCollapsed ? "Expand references" : "Collapse references"} |
| 69 | + onClick={() => setIsReferencesCollapsed(!isReferencesCollapsed)} |
| 70 | + /> |
| 71 | + <span className={styles.citationLearnMore}>References:</span> |
| 72 | + </Stack> |
| 73 | + </Stack> |
| 74 | + {!isReferencesCollapsed && ( |
64 | 75 | <ol> |
65 | | - {parsedAnswer.citations.map((rowId, ind) => { |
66 | | - const citation = answer.context.data_points[rowId]; |
67 | | - if (!citation) return null; |
68 | | - return ( |
69 | | - <li key={rowId}> |
70 | | - <h4>{citation.name}</h4> |
71 | | - <p className={styles.referenceMetadata}>Brand: {citation.brand}</p> |
72 | | - <p className={styles.referenceMetadata}>Price: {citation.price}</p> |
73 | | - <p>{citation.description}</p> |
74 | | - </li> |
75 | | - ); |
76 | | - })} |
| 76 | + {parsedAnswer.citations.map((rowId, ind) => { |
| 77 | + const citation = answer.context.data_points[rowId]; |
| 78 | + if (!citation) return null; |
| 79 | + return ( |
| 80 | + <li key={rowId}> |
| 81 | + <h4>{citation.name}</h4> |
| 82 | + <p className={styles.referenceMetadata}>Brand: {citation.brand}</p> |
| 83 | + <p className={styles.referenceMetadata}>Price: {citation.price}</p> |
| 84 | + <p>{citation.description}</p> |
| 85 | + </li> |
| 86 | + ); |
| 87 | + })} |
77 | 88 | </ol> |
78 | | - </Stack> |
| 89 | + )} |
79 | 90 | </Stack.Item> |
80 | 91 | )} |
81 | 92 |
|
|
0 commit comments