-
Notifications
You must be signed in to change notification settings - Fork 3.8k
/
AnalysisPanel.tsx
102 lines (92 loc) · 3.98 KB
/
AnalysisPanel.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { Stack, Pivot, PivotItem } from "@fluentui/react";
import styles from "./AnalysisPanel.module.css";
import { SupportingContent } from "../SupportingContent";
import { ChatAppResponse } from "../../api";
import { AnalysisPanelTabs } from "./AnalysisPanelTabs";
import { ThoughtProcess } from "./ThoughtProcess";
import { MarkdownViewer } from "../MarkdownViewer";
import { useMsal } from "@azure/msal-react";
import { getHeaders } from "../../api";
import { useLogin, getToken } from "../../authConfig";
import { useState, useEffect } from "react";
interface Props {
className: string;
activeTab: AnalysisPanelTabs;
onActiveTabChanged: (tab: AnalysisPanelTabs) => void;
activeCitation: string | undefined;
citationHeight: string;
answer: ChatAppResponse;
}
const pivotItemDisabledStyle = { disabled: true, style: { color: "grey" } };
export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeight, className, onActiveTabChanged }: Props) => {
const isDisabledThoughtProcessTab: boolean = !answer.context.thoughts;
const isDisabledSupportingContentTab: boolean = !answer.context.data_points;
const isDisabledCitationTab: boolean = !activeCitation;
const [citation, setCitation] = useState("");
const client = useLogin ? useMsal().instance : undefined;
const fetchCitation = async () => {
const token = client ? await getToken(client) : undefined;
if (activeCitation) {
// Get hash from the URL as it may contain #page=N
// which helps browser PDF renderer jump to correct page N
const originalHash = activeCitation.indexOf("#") ? activeCitation.split("#")[1] : "";
const response = await fetch(activeCitation, {
method: "GET",
headers: await getHeaders(token)
});
const citationContent = await response.blob();
let citationObjectUrl = URL.createObjectURL(citationContent);
// Add hash back to the new blob URL
if (originalHash) {
citationObjectUrl += "#" + originalHash;
}
setCitation(citationObjectUrl);
}
};
useEffect(() => {
fetchCitation();
}, []);
const renderFileViewer = () => {
if (!activeCitation) {
return null;
}
const fileExtension = activeCitation.split(".").pop()?.toLowerCase();
switch (fileExtension) {
case "png":
return <img src={citation} className={styles.citationImg} alt="Citation Image" />;
case "md":
return <MarkdownViewer src={activeCitation} />;
default:
return <iframe title="Citation" src={citation} width="100%" height={citationHeight} />;
}
};
return (
<Pivot
className={className}
selectedKey={activeTab}
onLinkClick={pivotItem => pivotItem && onActiveTabChanged(pivotItem.props.itemKey! as AnalysisPanelTabs)}
>
<PivotItem
itemKey={AnalysisPanelTabs.ThoughtProcessTab}
headerText="Thought process"
headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
>
<ThoughtProcess thoughts={answer.context.thoughts || []} />
</PivotItem>
<PivotItem
itemKey={AnalysisPanelTabs.SupportingContentTab}
headerText="Supporting content"
headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
>
<SupportingContent supportingContent={answer.context.data_points} />
</PivotItem>
<PivotItem
itemKey={AnalysisPanelTabs.CitationTab}
headerText="Citation"
headerButtonProps={isDisabledCitationTab ? pivotItemDisabledStyle : undefined}
>
{renderFileViewer()}
</PivotItem>
</Pivot>
);
};