Get PDFs to jump to their pages again (Azure-Samples#1283)

* Clarify that gpt-4-v cant be used with integrated vectorization

* Fix page jumping, React error, Python logging error

* Another missing key

app/backend/app.py

@@ -94,10 +94,11 @@ async def content_file(path: str):
     This is also slow and memory hungry.
     """
     # Remove page number from path, filename-1.txt -> filename.txt
+    # This shouldn't typically be necessary as browsers don't send hash fragments to servers
     if path.find("#page=") > 0:
         path_parts = path.rsplit("#page=", 1)
         path = path_parts[0]
-    logging.info("Opening file %s at page %s", path)
+    logging.info("Opening file %s", path)
     blob_container_client = current_app.config[CONFIG_BLOB_CONTAINER_CLIENT]
     try:
         blob = await blob_container_client.get_blob_client(path).download_blob()

app/backend/approaches/chatapproach.py

@@ -37,7 +37,7 @@ class ChatApproach(Approach, ABC):
     Make sure the last question ends with ">>".
     """
 
-    query_prompt_template = """Below is a history of the conversation so far, and a new question asked by the user that needs to be answered by searching in a knowledge.
+    query_prompt_template = """Below is a history of the conversation so far, and a new question asked by the user that needs to be answered by searching in a knowledge base.
     You have access to Azure AI Search index with 100's of documents.
     Generate a search query based on the conversation and the new question.
     Do not include cited source filenames and document names e.g info.txt or doc.pdf in the search query terms.

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

@@ -34,12 +34,19 @@ export const AnalysisPanel = ({ answer, activeTab, activeCitation, citationHeigh
     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: getHeaders(token)
             });
             const citationContent = await response.blob();
-            const citationObjectUrl = URL.createObjectURL(citationContent);
+            let citationObjectUrl = URL.createObjectURL(citationContent);
+            // Add hash back to the new blob URL
+            if (originalHash) {
+                citationObjectUrl += "#" + originalHash;
+            }
             setCitation(citationObjectUrl);
         }
     };

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

@@ -12,9 +12,9 @@ interface Props {
 export const ThoughtProcess = ({ thoughts }: Props) => {
     return (
         <ul className={styles.tList}>
-            {thoughts.map(t => {
+            {thoughts.map((t, ind) => {
                 return (
-                    <li className={styles.tListItem}>
+                    <li className={styles.tListItem} key={ind}>
                         <div className={styles.tStep}>{t.title}</div>
                         {Array.isArray(t.description) ? (
                             <SyntaxHighlighter language="json" wrapLongLines className={styles.tCodeBlock}>

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

@@ -6,32 +6,23 @@ interface Props {
     supportingContent: string[] | { text: string[]; images?: { url: string }[] };
 }
 
-interface SupportingItemProps {
-    title: string;
-    content: string;
-}
-
 export const SupportingContent = ({ supportingContent }: Props) => {
     const textItems = Array.isArray(supportingContent) ? supportingContent : supportingContent.text;
     const imageItems = !Array.isArray(supportingContent) ? supportingContent?.images : [];
     return (
         <ul className={styles.supportingContentNavList}>
-            {textItems.map(c => {
+            {textItems.map((c, ind) => {
                 const parsed = parseSupportingContentItem(c);
-                return <TextSupportingContent {...parsed} />;
+                return (
+                    <li className={styles.supportingContentItem} key={ind}>
+                        <h4 className={styles.supportingContentItemHeader}>{parsed.title}</h4>
+                        <p className={styles.supportingContentItemText} dangerouslySetInnerHTML={{ __html: parsed.content }} />
+                    </li>
+                );
             })}
-            {imageItems?.map(i => {
-                return <img className={styles.supportingContentItemImage} src={i.url} />;
+            {imageItems?.map((img, ind) => {
+                return <img className={styles.supportingContentItemImage} src={img.url} key={ind} />;
             })}
         </ul>
     );
 };
-
-export const TextSupportingContent = ({ title, content }: SupportingItemProps) => {
-    return (
-        <li className={styles.supportingContentItem}>
-            <h4 className={styles.supportingContentItemHeader}>{title}</h4>
-            <p className={styles.supportingContentItemText} dangerouslySetInnerHTML={{ __html: content }} />
-        </li>
-    );
-};