Skip to content

Commit c1e20fb

Browse files
pavsingh7pavsingh7
authored
Merge pull request #2 from pavsingh7/ui-customisation
resolves ui customisation conflicts with main
2 parents 20f64fd + 8ca91e6 commit c1e20fb

File tree

84 files changed

+165
-340
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+165
-340
lines changed

‎app/frontend/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
5+
<link rel="icon" type="image/x-icon" href="public/48_simple.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Azure OpenAI + AI Search</title>
7+
<title>SLS ActuarialGPT</title>
88
</head>
99
<body>
1010
<div id="root"></div>
1111
<script type="module" src="/src/index.tsx"></script>
1212
</body>
13-
</html>
13+
</html>

‎app/frontend/public/256_blue.png‎

12.4 KB
Loading

‎app/frontend/public/256_classic.png‎

13.5 KB
Loading

‎app/frontend/public/48_simple.png‎

1.44 KB
Loading

‎app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
margin: auto;
1717
margin-left: 1.25em;
1818
min-height: 3.125em;
19-
border-left: 0.0625em solid #123bb6;
19+
border-left: 0.0625em solid #0075c9;
2020
padding: 0 0 1.875em 1.875em;
2121
position: relative;
2222
}
@@ -32,13 +32,13 @@
3232
content: " ";
3333
border: 8px solid #d1dbfa;
3434
border-radius: 500%;
35-
background: #123bb6;
35+
background: #0075c9;
3636
height: 20px;
3737
width: 20px;
3838
}
3939

4040
.tStep {
41-
color: #123bb6;
41+
color: #0075c9;
4242
position: relative;
4343
font-size: 0.875em;
4444
margin-bottom: 0.5em;

‎app/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,15 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
7979
>
8080
<PivotItem
8181
itemKey={AnalysisPanelTabs.ThoughtProcessTab}
82-
headerText={t("headerTexts.thoughtProcess")}
82+
headerText="Thought Process"
8383
headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
8484
>
8585
<ThoughtProcess thoughts={answer.context.thoughts || []} />
8686
</PivotItem>
8787
<PivotItem
8888
itemKey={AnalysisPanelTabs.SupportingContentTab}
89-
headerText={t("headerTexts.supportingContent")}
89+
headerText="Supporting Content"
90+
9091
headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
9192
>
9293
<SupportingContent supportingContent={answer.context.data_points} />

‎app/frontend/src/components/Answer/Answer.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
0em 0.125em 0.25em rgba(0, 0, 0, 0.14),
77
0em 0em 0.125em rgba(0, 0, 0, 0.12);
88
outline: transparent solid 0.0625em;
9+
max-width: 100%;
910
}
1011

1112
.answerLogo {
@@ -37,6 +38,39 @@ h2 {
3738
padding: 0.3125em;
3839
}
3940

41+
.copyButton {
42+
position: absolute;
43+
top: 10px;
44+
right: 10px;
45+
background: white;
46+
border: 1px solid gray;
47+
border-radius: 5px;
48+
padding: 5px;
49+
cursor: pointer;
50+
}
51+
52+
.copyButtonCopied {
53+
background: #0075c9;
54+
}
55+
.answerText code {
56+
font-family: Consolas, "Courier New", monospace;
57+
background-color: #282a36;
58+
color: #f1fa8c;
59+
padding: 0.2em 0.4em;
60+
margin: 0;
61+
font-size: 100%;
62+
border-radius: 3px;
63+
display: inline;
64+
white-space: pre-wrap; /* Wrap long lines */
65+
word-wrap: break-word; /* Break words if necessary */
66+
}
67+
68+
.answerText pre {
69+
white-space: pre-wrap; /* Allow line breaks */
70+
word-wrap: break-word; /* Handle long lines */
71+
overflow-x: auto; /* Enable horizontal scrolling for long lines */
72+
}
73+
4074
.selected {
4175
outline: 0.125em solid rgba(115, 118, 225, 1);
4276
}

‎app/frontend/src/components/Answer/Answer.tsx‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import DOMPurify from "dompurify";
55
import ReactMarkdown from "react-markdown";
66
import remarkGfm from "remark-gfm";
77
import rehypeRaw from "rehype-raw";
8+
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
9+
import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism";
10+
import { useState } from "react";
811

912
import styles from "./Answer.module.css";
1013
import { ChatAppResponse, getCitationFilePath, SpeechConfig } from "../../api";
@@ -80,7 +83,61 @@ export const Answer = ({
8083

8184
<Stack.Item grow>
8285
<div className={styles.answerText}>
83-
<ReactMarkdown children={sanitizedAnswerHtml} rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} />
86+
<ReactMarkdown
87+
rehypePlugins={[rehypeRaw]}
88+
remarkPlugins={[remarkGfm]}
89+
components={{
90+
code({ node, inline, className, children, ...props }: any) {
91+
const match = /language-(\w+)/.exec(className || "");
92+
const codeContent = String(children).replace(/\n$/, "");
93+
const [copied, setCopied] = useState(false);
94+
95+
const copyToClipboard = () => {
96+
navigator.clipboard.writeText(codeContent);
97+
setCopied(true);
98+
setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
99+
};
100+
101+
return !inline && match ? (
102+
<div style={{ position: "relative" }}>
103+
<SyntaxHighlighter
104+
style={dracula}
105+
language={match[1]}
106+
PreTag="div"
107+
{...props}
108+
customStyle={{
109+
whiteSpace: "pre-wrap",
110+
wordWrap: "break-word",
111+
overflowX: "auto"
112+
}}
113+
>
114+
{codeContent}
115+
</SyntaxHighlighter>
116+
<button
117+
onClick={copyToClipboard}
118+
style={{
119+
position: "absolute",
120+
top: "10px",
121+
right: "10px",
122+
background: copied ? "lightgreen" : "white",
123+
border: "1px solid gray",
124+
borderRadius: "5px",
125+
cursor: "pointer"
126+
}}
127+
>
128+
{copied ? "Copied!" : "Copy"}
129+
</button>
130+
</div>
131+
) : (
132+
<code style={{ whiteSpace: "pre-wrap", wordWrap: "break-word" }} className={className} {...props}>
133+
{children}
134+
</code>
135+
);
136+
}
137+
}}
138+
>
139+
{sanitizedAnswerHtml}
140+
</ReactMarkdown>
84141
</div>
85142
</Stack.Item>
86143

‎app/frontend/src/components/Answer/AnswerIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Sparkle28Filled } from "@fluentui/react-icons";
1+
import answerIcon from "/public/256_classic.png";
22

33
export const AnswerIcon = () => {
4-
return <Sparkle28Filled primaryFill={"rgba(115, 118, 225, 1)"} aria-hidden="true" aria-label="Answer logo" />;
4+
return <img src={answerIcon} alt="Answer logo" aria-hidden="true" width="36" height="36" aria-label="Answer logo" />;
55
};

‎app/frontend/src/components/ClearChatButton/ClearChatButton.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
gap: 0.375em;
55
cursor: pointer;
66
padding: 0.5rem;
7+
color: #f2f2f2;
78
}

0 commit comments

Comments
 (0)