render web citations

Author: tonybaloney

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

@@ -8,10 +8,11 @@ import rehypeRaw from "rehype-raw";
 
 import styles from "./Answer.module.css";
 import { ChatAppResponse, getCitationFilePath, SpeechConfig } from "../../api";
-import { parseAnswerToHtml } from "./AnswerParser";
+import { citationIdToCitation, parseAnswerToHtml } from "./AnswerParser";
 import { AnswerIcon } from "./AnswerIcon";
 import { SpeechOutputBrowser } from "./SpeechOutputBrowser";
 import { SpeechOutputAzure } from "./SpeechOutputAzure";
+import { WebPage } from "../SupportingContent";
 
 interface Props {
     answer: ChatAppResponse;
@@ -110,11 +111,23 @@ export const Answer = ({
                         <span className={styles.citationLearnMore}>{t("citationWithColon")}</span>
                         {parsedAnswer.citations.map((x, i) => {
                             const path = getCitationFilePath(x);
-                            return (
-                                <a key={i} className={styles.citation} title={x} onClick={() => onCitationClicked(path)}>
-                                    {`${++i}. ${x}`}
-                                </a>
-                            );
+                            const citation = citationIdToCitation(x, answer.context.data_points);
+
+                            if (citation.type === "document")
+                                return (
+                                    <a key={i} className={styles.citation} title={x} onClick={() => onCitationClicked(path)}>
+                                        {`${++i}. ${x}`}
+                                    </a>
+                                );
+                            else if (citation.type === "web") {
+                                const webPage = citation.citation as WebPage;
+                                const label = webPage.siteName ? webPage.siteName : webPage.url;
+                                return (
+                                    <a key={i} className={styles.citation} title={label} href={webPage.url} target="_blank" rel="noreferrer">
+                                        {`${++i}. ${label}`}
+                                    </a>
+                                );
+                            }
                         })}
                     </Stack>
                 </Stack.Item>

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

@@ -1,11 +1,40 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { ChatAppResponse, getCitationFilePath } from "../../api";
+import { WebPage } from "../SupportingContent";
 
 type HtmlParsedAnswer = {
     answerHtml: string;
     citations: string[];
 };
 
+type Citation = {
+    id: string;
+    type: "document" | "web";
+    citation: string | WebPage;
+};
+
+export function citationIdToCitation(citationId: string, contextDataPoints: any): Citation {
+    // See if this is a web page citation
+    const webSearch = contextDataPoints.web_search;
+    if (Array.isArray(webSearch)) {
+        const webPage = webSearch.find((page: WebPage) => page.id === citationId);
+        if (webPage) {
+            return {
+                id: citationId,
+                type: "web",
+                citation: webPage
+            };
+        }
+    }
+
+    // Otherwise, assume it's a document citation
+    return {
+        id: citationId,
+        type: "document",
+        citation: citationId
+    };
+}
+
 // Function to validate citation format and check if dataPoint starts with possible citation
 function isCitationValid(contextDataPoints: any, citationCandidate: string): boolean {
     const regex = /.+\.\w{1,}(?:#\S*)?$/;
@@ -22,6 +51,14 @@ function isCitationValid(contextDataPoints: any, citationCandidate: string): boo
     } else {
         return false;
     }
+    // If there are web_sources, add those to the list of identifiers
+    if (Array.isArray(contextDataPoints.web_search)) {
+        contextDataPoints.web_search.forEach((source: any) => {
+            if (source.id) {
+                dataPointsArray.push(source.id);
+            }
+        });
+    }
 
     const isValidCitation = dataPointsArray.some(dataPoint => {
         return dataPoint.startsWith(citationCandidate);

app/frontend/src/components/SupportingContent/SupportingContent.tsx

@@ -2,7 +2,7 @@ import { parseSupportingContentItem } from "./SupportingContentParser";
 
 import styles from "./SupportingContent.module.css";
 
-interface WebPage {
+export interface WebPage {
     id: string;
     name: string;
     url: string;