WIP(2): Merge branch 'main' into multiLang

Author: nb-a153

app/frontend/package-lock.json

@@ -1,5 +1,5 @@
 import { Stack, Pivot, PivotItem } from "@fluentui/react";
-
+import { useTranslation } from "react-i18next";
 import styles from "./AnalysisPanel.module.css";
 
 import { SupportingContent } from "../SupportingContent";
@@ -29,7 +29,9 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
     const isDisabledCitationTab: boolean = !activeCitation;
     const [citation, setCitation] = useState("");
 
-    const client = useLogin ? useMsal().instance : undefined;
+    const client = useLogin ? useMsal().instance : undefined
+    const { t } = useTranslation();
+
 
     const fetchCitation = async () => {
         const token = client ? await getToken(client) : undefined;
@@ -78,21 +80,21 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
         >
             <PivotItem
                 itemKey={AnalysisPanelTabs.ThoughtProcessTab}
-                headerText="Thought process"
+                headerText={t("headerTexts.thoughtProcess")}
                 headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
             >
                 <ThoughtProcess thoughts={answer.context.thoughts || []} />
             </PivotItem>
             <PivotItem
                 itemKey={AnalysisPanelTabs.SupportingContentTab}
-                headerText="Supporting content"
+                headerText={t("headerTexts.supportingContent")}
                 headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
             >
                 <SupportingContent supportingContent={answer.context.data_points} />
             </PivotItem>
             <PivotItem
                 itemKey={AnalysisPanelTabs.CitationTab}
-                headerText="Citation"
+                headerText={t("headerTexts.citation")}
                 headerButtonProps={isDisabledCitationTab ? pivotItemDisabledStyle : undefined}
             >
                 {renderFileViewer()}

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

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { Stack, IconButton } from "@fluentui/react";
+import { useTranslation } from "react-i18next";
 import DOMPurify from "dompurify";
 
 import styles from "./Answer.module.css";
@@ -39,7 +40,7 @@ export const Answer = ({
     const followupQuestions = answer.context?.followup_questions;
     const messageContent = answer.message.content;
     const parsedAnswer = useMemo(() => parseAnswerToHtml(messageContent, isStreaming, onCitationClicked), [answer]);
-
+    const { t } = useTranslation();
     const sanitizedAnswerHtml = DOMPurify.sanitize(parsedAnswer.answerHtml);
 
     return (
@@ -51,15 +52,15 @@ export const Answer = ({
                         <IconButton
                             style={{ color: "black" }}
                             iconProps={{ iconName: "Lightbulb" }}
-                            title="Show thought process"
+                            title={t("tooltips.showThoughtProcess")}
                             ariaLabel="Show thought process"
                             onClick={() => onThoughtProcessClicked()}
                             disabled={!answer.context.thoughts?.length}
                         />
                         <IconButton
                             style={{ color: "black" }}
                             iconProps={{ iconName: "ClipboardList" }}
-                            title="Show supporting content"
+                            title={t("tooltips.showSupportingContent")}
                             ariaLabel="Show supporting content"
                             onClick={() => onSupportingContentClicked()}
                             disabled={!answer.context.data_points}

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-
+import { useTranslation } from "react-i18next";
 import { IconButton } from "@fluentui/react";
 
 interface Props {
@@ -10,6 +10,7 @@ let audio = new Audio();
 
 export const SpeechOutputAzure = ({ url }: Props) => {
     const [isPlaying, setIsPlaying] = useState(false);
+    const { t } = useTranslation();
 
     const startOrStopAudio = async () => {
         if (isPlaying) {
@@ -35,7 +36,7 @@ export const SpeechOutputAzure = ({ url }: Props) => {
         <IconButton
             style={{ color: color }}
             iconProps={{ iconName: "Volume3" }}
-            title="Speak answer"
+            title={t("tooltips.speakAnswer")}
             ariaLabel="Speak answer"
             onClick={() => startOrStopAudio()}
             disabled={!url}

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

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { IconButton } from "@fluentui/react";
+import { useTranslation } from "react-i18next";
 
 interface Props {
     answer: string;
@@ -28,6 +29,7 @@ const getUtterance = function (text: string) {
 };
 
 export const SpeechOutputBrowser = ({ answer }: Props) => {
+    const { t } = useTranslation();
     const [isPlaying, setIsPlaying] = useState<boolean>(false);
 
     const startOrStopSpeech = (answer: string) => {
@@ -63,7 +65,7 @@ export const SpeechOutputBrowser = ({ answer }: Props) => {
             style={{ color: color }}
             iconProps={{ iconName: "Volume3" }}
             title="Speak answer"
-            ariaLabel="Speak answer"
+            ariaLabel={t("tooltips.speakAnswer")}
             onClick={() => startOrStopSpeech(answer)}
             disabled={!synth}
         />

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

@@ -46,31 +46,31 @@ export const GPT4VSettings = ({ updateGPT4VInputs, updateUseGPT4V, isUseGPT4V, g
             <Checkbox
                 id={useGPT4VFieldId}
                 checked={useGPT4V}
-                label={t("settingsLabels.useGPT4V")}
+                label={t("labels.useGPT4V")}
                 onChange={onuseGPT4V}
                 aria-labelledby={useGPT4VId}
                 onRenderLabel={(props: ICheckboxProps | undefined) => (
-                    <HelpCallout labelId={useGPT4VId} fieldId={useGPT4VFieldId} helpText={t("toolTipText.useGPT4Vision")} label={props?.label} />
+                    <HelpCallout labelId={useGPT4VId} fieldId={useGPT4VFieldId} helpText={t("helpTexts.useGPT4Vision")} label={props?.label} />
                 )}
             />
             {useGPT4V && (
                 <Dropdown
                     id={gpt4VInputFieldId}
                     selectedKey={vectorFieldOption}
-                    label={t("settingsLabels.gpt4VInput.label")}
+                    label={t("labels.gpt4VInput.label")}
                     options={[
                         {
                             key: GPT4VInput.TextAndImages,
-                            text: t("settingsLabels.gpt4VInput.options.textAndImages")
+                            text: t("labels.gpt4VInput.options.textAndImages")
                         },
-                        { text: t("settingsLabels.gpt4VInput.options.images"), key: GPT4VInput.Images },
-                        { text: t("settingsLabels.gpt4VInput.options.texts"), key: GPT4VInput.Texts }
+                        { text: t("labels.gpt4VInput.options.images"), key: GPT4VInput.Images },
+                        { text: t("labels.gpt4VInput.options.texts"), key: GPT4VInput.Texts }
                     ]}
                     required
                     onChange={onSetGPT4VInput}
                     aria-labelledby={gpt4VInputId}
                     onRenderLabel={(props: IDropdownProps | undefined) => (
-                        <HelpCallout labelId={gpt4VInputId} fieldId={gpt4VInputFieldId} helpText={t("toolTipText.gpt4VisionInputs")} label={props?.label} />
+                        <HelpCallout labelId={gpt4VInputId} fieldId={gpt4VInputFieldId} helpText={t("helpTexts.gpt4VisionInputs")} label={props?.label} />
                     )}
                 />
             )}

app/frontend/src/components/GPT4VSettings/GPT4VSettings.tsx

@@ -30,13 +30,13 @@ export const HelpCallout = (props: IHelpCalloutProps): JSX.Element => {
                 <label id={props.labelId} htmlFor={props.fieldId}>
                     {props.label}
                 </label>
-                <IconButton id={iconButtonId} iconProps={iconProps} title="Info" ariaLabel="Info" onClick={toggleIsCalloutVisible} styles={iconButtonStyles} />
+                <IconButton id={iconButtonId} iconProps={iconProps} title={t("tooltips.info")} ariaLabel="Info" onClick={toggleIsCalloutVisible} styles={iconButtonStyles} />
             </Stack>
             {isCalloutVisible && (
                 <Callout target={"#" + iconButtonId} setInitialFocus onDismiss={toggleIsCalloutVisible} ariaDescribedBy={descriptionId} role="alertdialog">
                     <Stack tokens={stackTokens} horizontalAlign="start" styles={labelCalloutStackStyles}>
                         <span id={descriptionId}>{props.helpText}</span>
-                        <DefaultButton onClick={toggleIsCalloutVisible}>{t("settingsLabels.closeButton")}</DefaultButton>
+                        <DefaultButton onClick={toggleIsCalloutVisible}>{t("labels.closeButton")}</DefaultButton>
                     </Stack>
                 </Callout>
             )}

app/frontend/src/components/HelpCallout/HelpCallout.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { marked } from "marked";
 import styles from "./MarkdownViewer.module.css";
 import { Spinner, SpinnerSize, MessageBar, MessageBarType, Link, IconButton } from "@fluentui/react";
@@ -11,6 +12,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ src }) => {
     const [content, setContent] = useState<string>("");
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
+    const { t } = useTranslation();
 
     /**
      * Anchor links are not handled well by 'marked' and result in HTTP 404 errors as the URL they point to does not exist.
@@ -66,7 +68,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({ src }) => {
                         style={{ color: "black" }}
                         iconProps={{ iconName: "Save" }}
                         title="Save"
-                        ariaLabel="Save"
+                        ariaLabel={t("tooltips.save")} 
                         href={src}
                         download
                     />

app/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useContext } from "react";
 import { Stack, TextField } from "@fluentui/react";
 import { Button, Tooltip } from "@fluentui/react-components";
 import { Send28Filled } from "@fluentui/react-icons";
+import { useTranslation } from "react-i18next";
 import { useMsal } from "@azure/msal-react";
 
 import styles from "./QuestionInput.module.css";
@@ -21,7 +22,8 @@ interface Props {
 export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, initQuestion, showSpeechInput }: Props) => {
     const [question, setQuestion] = useState<string>("");
     const { loggedIn } = useContext(LoginContext);
-
+    const { t } = useTranslation();
+    
     useEffect(() => {
         initQuestion && setQuestion(initQuestion);
     }, [initQuestion]);
@@ -74,7 +76,7 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, init
                 onKeyDown={onEnterPress}
             />
             <div className={styles.questionInputButtonsContainer}>
-                <Tooltip content="Submit question" relationship="label">
+                <Tooltip content={t("tooltips.submitQuestion")} relationship="label">
                     <Button size="large" icon={<Send28Filled primaryFill="rgba(115, 118, 225, 1)" />} disabled={sendQuestionDisabled} onClick={sendQuestion} />
                 </Tooltip>
             </div>

app/frontend/src/components/QuestionInput/QuestionInput.tsx

@@ -1,6 +1,7 @@
 import { SetStateAction, useState } from "react";
 import { Button, Tooltip } from "@fluentui/react-components";
 import { Mic28Filled } from "@fluentui/react-icons";
+import { useTranslation } from "react-i18next";
 import styles from "./QuestionInput.module.css";
 
 interface Props {
@@ -31,8 +32,8 @@ try {
 }
 
 export const SpeechInput = ({ updateQuestion }: Props) => {
+    const { t } = useTranslation();
     const [isRecording, setIsRecording] = useState<boolean>(false);
-
     const startRecording = () => {
         if (speechRecognition == null) {
             console.error("SpeechRecognition not supported");
@@ -85,14 +86,14 @@ export const SpeechInput = ({ updateQuestion }: Props) => {
         <>
             {!isRecording && (
                 <div className={styles.questionInputButtonsContainer}>
-                    <Tooltip content="Ask question with voice" relationship="label">
+                    <Tooltip content={t("tooltips.askWithVoice")} relationship="label">
                         <Button size="large" icon={<Mic28Filled primaryFill="rgba(115, 118, 225, 1)" />} onClick={startRecording} />
                     </Tooltip>
                 </div>
             )}
             {isRecording && (
                 <div className={styles.questionInputButtonsContainer}>
-                    <Tooltip content="Stop recording question" relationship="label">
+                    <Tooltip content={t("tooltips.stopRecording")} relationship="label">
                         <Button size="large" icon={<Mic28Filled primaryFill="rgba(250, 0, 0, 0.7)" />} disabled={!isRecording} onClick={stopRecording} />
                     </Tooltip>
                 </div>