Fix the frontend for the HistoryList API

Azure-Samples · Jan 29, 2025 · d83b149 · d83b149
1 parent e46dc9f
commit d83b149
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 265 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -15,7 +15,7 @@ repos:
     hooks:
     -   id: black
 -   repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
+    rev: v3.1.0
     hooks:
     - id: prettier
       types_or: [css, javascript, ts, tsx, html]
diff --git a/app/frontend/src/api/api.ts b/app/frontend/src/api/api.ts
@@ -1,227 +1,191 @@
 const BACKEND_URI = "";
 
-import {
-  ChatAppResponse,
-  ChatAppResponseOrError,
-  ChatAppRequest,
-  Config,
-  SimpleAPIResponse,
-  HistoryListApiResponse,
-  HistoryApiResponse,
-} from "./models";
+import { ChatAppResponse, ChatAppResponseOrError, ChatAppRequest, Config, SimpleAPIResponse, HistoryListApiResponse, HistoryApiResponse } from "./models";
 import { useLogin, getToken, isUsingAppServicesLogin } from "../authConfig";
 
-export async function getHeaders(
-  idToken: string | undefined,
-): Promise<Record<string, string>> {
-  // If using login and not using app services, add the id token of the logged in account as the authorization
-  if (useLogin && !isUsingAppServicesLogin) {
-    if (idToken) {
-      return { Authorization: `Bearer ${idToken}` };
+export async function getHeaders(idToken: string | undefined): Promise<Record<string, string>> {
+    // If using login and not using app services, add the id token of the logged in account as the authorization
+    if (useLogin && !isUsingAppServicesLogin) {
+        if (idToken) {
+            return { Authorization: `Bearer ${idToken}` };
+        }
     }
-  }
 
-  return {};
+    return {};
 }
 
 export async function configApi(): Promise<Config> {
-  const response = await fetch(`${BACKEND_URI}/config`, {
-    method: "GET",
-  });
+    const response = await fetch(`${BACKEND_URI}/config`, {
+        method: "GET"
+    });
 
-  return (await response.json()) as Config;
+    return (await response.json()) as Config;
 }
 
-export async function askApi(
-  request: ChatAppRequest,
-  idToken: string | undefined,
-): Promise<ChatAppResponse> {
-  const headers = await getHeaders(idToken);
-  const response = await fetch(`${BACKEND_URI}/ask`, {
-    method: "POST",
-    headers: { ...headers, "Content-Type": "application/json" },
-    body: JSON.stringify(request),
-  });
-
-  if (response.status > 299 || !response.ok) {
-    throw Error(`Request failed with status ${response.status}`);
-  }
-  const parsedResponse: ChatAppResponseOrError = await response.json();
-  if (parsedResponse.error) {
-    throw Error(parsedResponse.error);
-  }
-
-  return parsedResponse as ChatAppResponse;
+export async function askApi(request: ChatAppRequest, idToken: string | undefined): Promise<ChatAppResponse> {
+    const headers = await getHeaders(idToken);
+    const response = await fetch(`${BACKEND_URI}/ask`, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify(request)
+    });
+
+    if (response.status > 299 || !response.ok) {
+        throw Error(`Request failed with status ${response.status}`);
+    }
+    const parsedResponse: ChatAppResponseOrError = await response.json();
+    if (parsedResponse.error) {
+        throw Error(parsedResponse.error);
+    }
+
+    return parsedResponse as ChatAppResponse;
 }
 
-export async function chatApi(
-  request: ChatAppRequest,
-  shouldStream: boolean,
-  idToken: string | undefined,
-): Promise<Response> {
-  let url = `${BACKEND_URI}/chat`;
-  if (shouldStream) {
-    url += "/stream";
-  }
-  const headers = await getHeaders(idToken);
-  return await fetch(url, {
-    method: "POST",
-    headers: { ...headers, "Content-Type": "application/json" },
-    body: JSON.stringify(request),
-  });
+export async function chatApi(request: ChatAppRequest, shouldStream: boolean, idToken: string | undefined): Promise<Response> {
+    let url = `${BACKEND_URI}/chat`;
+    if (shouldStream) {
+        url += "/stream";
+    }
+    const headers = await getHeaders(idToken);
+    return await fetch(url, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify(request)
+    });
 }
 
 export async function getSpeechApi(text: string): Promise<string | null> {
-  return await fetch("/speech", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      text: text,
-    }),
-  })
-    .then((response) => {
-      if (response.status == 200) {
-        return response.blob();
-      } else if (response.status == 400) {
-        console.log("Speech synthesis is not enabled.");
-        return null;
-      } else {
-        console.error("Unable to get speech synthesis.");
-        return null;
-      }
+    return await fetch("/speech", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+            text: text
+        })
     })
-    .then((blob) => (blob ? URL.createObjectURL(blob) : null));
+        .then(response => {
+            if (response.status == 200) {
+                return response.blob();
+            } else if (response.status == 400) {
+                console.log("Speech synthesis is not enabled.");
+                return null;
+            } else {
+                console.error("Unable to get speech synthesis.");
+                return null;
+            }
+        })
+        .then(blob => (blob ? URL.createObjectURL(blob) : null));
 }
 
 export function getCitationFilePath(citation: string): string {
-  return `${BACKEND_URI}/content/${citation}`;
+    return `${BACKEND_URI}/content/${citation}`;
 }
 
-export async function uploadFileApi(
-  request: FormData,
-  idToken: string,
-): Promise<SimpleAPIResponse> {
-  const response = await fetch("/upload", {
-    method: "POST",
-    headers: await getHeaders(idToken),
-    body: request,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Uploading files failed: ${response.statusText}`);
-  }
-
-  const dataResponse: SimpleAPIResponse = await response.json();
-  return dataResponse;
+export async function uploadFileApi(request: FormData, idToken: string): Promise<SimpleAPIResponse> {
+    const response = await fetch("/upload", {
+        method: "POST",
+        headers: await getHeaders(idToken),
+        body: request
+    });
+
+    if (!response.ok) {
+        throw new Error(`Uploading files failed: ${response.statusText}`);
+    }
+
+    const dataResponse: SimpleAPIResponse = await response.json();
+    return dataResponse;
 }
 
-export async function deleteUploadedFileApi(
-  filename: string,
-  idToken: string,
-): Promise<SimpleAPIResponse> {
-  const headers = await getHeaders(idToken);
-  const response = await fetch("/delete_uploaded", {
-    method: "POST",
-    headers: { ...headers, "Content-Type": "application/json" },
-    body: JSON.stringify({ filename }),
-  });
-
-  if (!response.ok) {
-    throw new Error(`Deleting file failed: ${response.statusText}`);
-  }
-
-  const dataResponse: SimpleAPIResponse = await response.json();
-  return dataResponse;
+export async function deleteUploadedFileApi(filename: string, idToken: string): Promise<SimpleAPIResponse> {
+    const headers = await getHeaders(idToken);
+    const response = await fetch("/delete_uploaded", {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({ filename })
+    });
+
+    if (!response.ok) {
+        throw new Error(`Deleting file failed: ${response.statusText}`);
+    }
+
+    const dataResponse: SimpleAPIResponse = await response.json();
+    return dataResponse;
 }
 
 export async function listUploadedFilesApi(idToken: string): Promise<string[]> {
-  const response = await fetch(`/list_uploaded`, {
-    method: "GET",
-    headers: await getHeaders(idToken),
-  });
+    const response = await fetch(`/list_uploaded`, {
+        method: "GET",
+        headers: await getHeaders(idToken)
+    });
 
-  if (!response.ok) {
-    throw new Error(`Listing files failed: ${response.statusText}`);
-  }
+    if (!response.ok) {
+        throw new Error(`Listing files failed: ${response.statusText}`);
+    }
 
-  const dataResponse: string[] = await response.json();
-  return dataResponse;
+    const dataResponse: string[] = await response.json();
+    return dataResponse;
 }
 
-export async function postChatHistoryApi(
-  item: any,
-  idToken: string,
-): Promise<any> {
-  const headers = await getHeaders(idToken);
-  const response = await fetch("/chat_history", {
-    method: "POST",
-    headers: { ...headers, "Content-Type": "application/json" },
-    body: JSON.stringify(item),
-  });
-
-  if (!response.ok) {
-    throw new Error(`Posting chat history failed: ${response.statusText}`);
-  }
-
-  const dataResponse: any = await response.json();
-  return dataResponse;
+export async function postChatHistoryApi(item: any, idToken: string): Promise<any> {
+    const headers = await getHeaders(idToken);
+    const response = await fetch("/chat_history", {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify(item)
+    });
+
+    if (!response.ok) {
+        throw new Error(`Posting chat history failed: ${response.statusText}`);
+    }
+
+    const dataResponse: any = await response.json();
+    return dataResponse;
 }
 
-export async function getChatHistoryListApi(
-  count: number,
-  continuationToken: string | undefined,
-  idToken: string,
-): Promise<HistoryListApiResponse> {
-  const headers = await getHeaders(idToken);
-  let url = `${BACKEND_URI}/chat_history/sessions?count=${count}`;
-  if (continuationToken) {
-    url += `&continuationToken=${continuationToken}`;
-  }
-
-  const response = await fetch(url.toString(), {
-    method: "GET",
-    headers: { ...headers, "Content-Type": "application/json" },
-  });
-
-  if (!response.ok) {
-    throw new Error(`Getting chat histories failed: ${response.statusText}`);
-  }
-
-  const dataResponse: HistoryListApiResponse = await response.json();
-  return dataResponse;
+export async function getChatHistoryListApi(count: number, continuationToken: string | undefined, idToken: string): Promise<HistoryListApiResponse> {
+    const headers = await getHeaders(idToken);
+    let url = `${BACKEND_URI}/chat_history/sessions?count=${count}`;
+    if (continuationToken) {
+        url += `&continuationToken=${continuationToken}`;
+    }
+
+    const response = await fetch(url.toString(), {
+        method: "GET",
+        headers: { ...headers, "Content-Type": "application/json" }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Getting chat histories failed: ${response.statusText}`);
+    }
+
+    const dataResponse: HistoryListApiResponse = await response.json();
+    return dataResponse;
 }
 
-export async function getChatHistoryApi(
-  id: string,
-  idToken: string,
-): Promise<HistoryApiResponse> {
-  const headers = await getHeaders(idToken);
-  const response = await fetch(`/chat_history/sessions/${id}`, {
-    method: "GET",
-    headers: { ...headers, "Content-Type": "application/json" },
-  });
-
-  if (!response.ok) {
-    throw new Error(`Getting chat history failed: ${response.statusText}`);
-  }
-
-  const dataResponse: HistoryApiResponse = await response.json();
-  return dataResponse;
+export async function getChatHistoryApi(id: string, idToken: string): Promise<HistoryApiResponse> {
+    const headers = await getHeaders(idToken);
+    const response = await fetch(`/chat_history/sessions/${id}`, {
+        method: "GET",
+        headers: { ...headers, "Content-Type": "application/json" }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Getting chat history failed: ${response.statusText}`);
+    }
+
+    const dataResponse: HistoryApiResponse = await response.json();
+    return dataResponse;
 }
 
-export async function deleteChatHistoryApi(
-  id: string,
-  idToken: string,
-): Promise<any> {
-  const headers = await getHeaders(idToken);
-  const response = await fetch(`/chat_history/sessions/${id}`, {
-    method: "DELETE",
-    headers: { ...headers, "Content-Type": "application/json" },
-  });
-
-  if (!response.ok) {
-    throw new Error(`Deleting chat history failed: ${response.statusText}`);
-  }
+export async function deleteChatHistoryApi(id: string, idToken: string): Promise<any> {
+    const headers = await getHeaders(idToken);
+    const response = await fetch(`/chat_history/sessions/${id}`, {
+        method: "DELETE",
+        headers: { ...headers, "Content-Type": "application/json" }
+    });
+
+    if (!response.ok) {
+        throw new Error(`Deleting chat history failed: ${response.statusText}`);
+    }
 }