Azure-Samples · john0isaac · Jun 8, 2024 · Jun 8, 2024
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Cosmic Food RAG App</title>
+        <title>Cosmic Food RAG App | Sample</title>
     </head>
     <body>
         <div id="root"></div>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,7 +19,6 @@
         "@fluentui/react-icons": "^2.0.221",
         "@react-spring/web": "^9.7.3",
         "dompurify": "^3.0.6",
-        "marked": "^9.1.6",
         "ndjson-readablestream": "^1.0.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

diff --git a/frontend/src/api/models.ts b/frontend/src/api/models.ts
@@ -39,20 +39,19 @@ export type ResponseContext = {
     thoughts: Thoughts[];
 };
 
-export type ResponseChoice = {
-    index: number;
+export type ChatAppResponseOrError = {
     message: ResponseMessage;
+    delta: ResponseMessage;
     context: ResponseContext;
     session_state: string;
-};
-
-export type ChatAppResponseOrError = {
-    choices?: ResponseChoice[];
     error?: string;
 };
 
 export type ChatAppResponse = {
-    choices: ResponseChoice[];
+    message: ResponseMessage;
+    delta: ResponseMessage;
+    context: ResponseContext;
+    session_state: string | null;
 };
 
 export type ChatAppRequestContext = {

diff --git a/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx b/frontend/src/components/AnalysisPanel/AnalysisPanel.tsx
@@ -17,8 +17,8 @@ interface Props {
 const pivotItemDisabledStyle = { disabled: true, style: { color: "grey" } };
 
 export const AnalysisPanel = ({ answer, activeTab, className, onActiveTabChanged }: Props) => {
-    const isDisabledThoughtProcessTab: boolean = !answer.choices[0].context.thoughts;
-    const isDisabledSupportingContentTab: boolean = !answer.choices[0].context.data_points;
+    const isDisabledThoughtProcessTab: boolean = !answer.context.thoughts;
+    const isDisabledSupportingContentTab: boolean = !answer.context.data_points;
 
     return (
         <Pivot
@@ -31,14 +31,14 @@ export const AnalysisPanel = ({ answer, activeTab, className, onActiveTabChanged
                 headerText="Thought process"
                 headerButtonProps={isDisabledThoughtProcessTab ? pivotItemDisabledStyle : undefined}
             >
-                <ThoughtProcess thoughts={answer.choices[0].context.thoughts || []} />
+                <ThoughtProcess thoughts={answer.context.thoughts || []} />
             </PivotItem>
             <PivotItem
                 itemKey={AnalysisPanelTabs.SupportingContentTab}
                 headerText="Supporting content"
                 headerButtonProps={isDisabledSupportingContentTab ? pivotItemDisabledStyle : undefined}
             >
-                <SupportingContent supportingContent={answer.choices[0].context.data_points} />
+                <SupportingContent supportingContent={answer.context.data_points} />
             </PivotItem>
         </Pivot>
     );

diff --git a/frontend/src/components/Answer/Answer.tsx b/frontend/src/components/Answer/Answer.tsx
@@ -12,13 +12,14 @@ import { SpeechOutput } from "./SpeechOutput";
 interface Props {
     answer: ChatAppResponse;
     isSelected?: boolean;
+    isStreaming: boolean;
     onThoughtProcessClicked: () => void;
     onSupportingContentClicked: () => void;
 }
 
-export const Answer = ({ answer, isSelected, onThoughtProcessClicked, onSupportingContentClicked }: Props) => {
-    const messageContent = answer.choices[0].message.content;
-    const parsedAnswer = useMemo(() => parseAnswerToHtml(messageContent), [answer]);
+export const Answer = ({ answer, isSelected, isStreaming, onThoughtProcessClicked, onSupportingContentClicked }: Props) => {
+    const messageContent = answer.message.content;
+    const parsedAnswer = useMemo(() => parseAnswerToHtml(messageContent, isStreaming), [answer]);
 
     const sanitizedAnswerHtml = DOMPurify.sanitize(parsedAnswer.answerHtml);
 
@@ -34,15 +35,15 @@ export const Answer = ({ answer, isSelected, onThoughtProcessClicked, onSupporti
                             title="Show thought process"
                             ariaLabel="Show thought process"
                             onClick={() => onThoughtProcessClicked()}
-                            disabled={!answer.choices[0].context.thoughts?.length}
+                            disabled={!answer.context.thoughts?.length}
                         />
                         <IconButton
                             style={{ color: "black" }}
                             iconProps={{ iconName: "ClipboardList" }}
                             title="Show supporting content"
                             ariaLabel="Show supporting content"
                             onClick={() => onSupportingContentClicked()}
-                            disabled={!answer.choices[0].context.data_points}
+                            disabled={!answer.context.data_points}
                         />
                         <SpeechOutput answer={sanitizedAnswerHtml} />
                     </div>

diff --git a/frontend/src/components/Answer/AnswerParser.tsx b/frontend/src/components/Answer/AnswerParser.tsx
@@ -2,10 +2,25 @@ type HtmlParsedAnswer = {
     answerHtml: string;
 };
 
-export function parseAnswerToHtml(answer: string): HtmlParsedAnswer {
+export function parseAnswerToHtml(answer: string, isStreaming: boolean): HtmlParsedAnswer {
     // trim any whitespace from the end of the answer after removing follow-up questions
     let parsedAnswer = answer.trim();
 
+    // Omit a citation that is still being typed during streaming
+    if (isStreaming) {
+        let lastIndex = parsedAnswer.length;
+        for (let i = parsedAnswer.length - 1; i >= 0; i--) {
+            if (parsedAnswer[i] === "]") {
+                break;
+            } else if (parsedAnswer[i] === "[") {
+                lastIndex = i;
+                break;
+            }
+        }
+        const truncatedAnswer = parsedAnswer.substring(0, lastIndex);
+        parsedAnswer = truncatedAnswer;
+    }
+
     const parts = parsedAnswer.split(/\[([^\]]+)\]/g);
 
     const fragments: string[] = parts.map((part, index) => {

diff --git a/frontend/src/components/HelpCallout/HelpCallout.tsx b/frontend/src/components/HelpCallout/HelpCallout.tsx
@@ -0,0 +1,43 @@
+import { DefaultButton, IconButton, IButtonStyles, Callout, IStackTokens, Stack, IStackStyles } from "@fluentui/react";
+import { useBoolean, useId } from "@fluentui/react-hooks";
+
+const stackTokens: IStackTokens = {
+    childrenGap: 4,
+    maxWidth: 300
+};
+
+const labelCalloutStackStyles: Partial<IStackStyles> = { root: { padding: 20 } };
+const iconButtonStyles: Partial<IButtonStyles> = { root: { marginBottom: -3 } };
+const iconProps = { iconName: "Info" };
+
+interface IHelpCalloutProps {
+    label: string | undefined;
+    labelId: string;
+    fieldId: string | undefined;
+    helpText: string;
+}
+
+export const HelpCallout = (props: IHelpCalloutProps): JSX.Element => {
+    const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
+    const descriptionId: string = useId("description");
+    const iconButtonId: string = useId("iconButton");
+
+    return (
+        <>
+            <Stack horizontal verticalAlign="center" tokens={stackTokens}>
+                <label id={props.labelId} htmlFor={props.fieldId}>
+                    {props.label}
+                </label>
+                <IconButton id={iconButtonId} iconProps={iconProps} title="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}>Close</DefaultButton>
+                    </Stack>
+                </Callout>
+            )}
+        </>
+    );
+};
diff --git a/frontend/src/components/HelpCallout/index.ts b/frontend/src/components/HelpCallout/index.ts
@@ -0,0 +1 @@
+export * from "./HelpCallout";
diff --git a/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css b/frontend/src/components/MarkdownViewer/MarkdownViewer.module.css
diff --git a/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx b/frontend/src/components/MarkdownViewer/MarkdownViewer.tsx
diff --git a/frontend/src/components/MarkdownViewer/index.tsx b/frontend/src/components/MarkdownViewer/index.tsx
diff --git a/frontend/src/components/QuestionInput/QuestionInput.tsx b/frontend/src/components/QuestionInput/QuestionInput.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { Stack, TextField } from "@fluentui/react";
 import { Button, Tooltip } from "@fluentui/react-components";
 import { Send28Filled } from "@fluentui/react-icons";
 
-import { SpeechInput } from "./SpeechInput";
 import styles from "./QuestionInput.module.css";
+import { SpeechInput } from "./SpeechInput";
 
 interface Props {
     onSend: (question: string) => void;
@@ -63,7 +63,7 @@ export const QuestionInput = ({ onSend, disabled, placeholder, clearOnSend, init
                 onKeyDown={onEnterPress}
             />
             <div className={styles.questionInputButtonsContainer}>
-                <Tooltip content="Ask question button" relationship="label">
+                <Tooltip content="Submit question" relationship="label">
                     <Button size="large" icon={<Send28Filled primaryFill="rgba(115, 118, 225, 1)" />} disabled={sendQuestionDisabled} onClick={sendQuestion} />
                 </Tooltip>
             </div>