Track Slack questions Autoresolved (#86)

web/src/app/ee/admin/performance/lib.ts

@@ -2,6 +2,7 @@ import { errorHandlingFetcher } from "@/lib/fetcher";
 import useSWR, { mutate } from "swr";
 import {
   ChatSessionSnapshot,
+  DanswerBotAnalytics,
   QueryAnalytics,
   UserAnalytics,
 } from "./usage/types";
@@ -50,6 +51,19 @@ export const useUserAnalytics = (timeRange: DateRangePickerValue) => {
   };
 };
 
+export const useDanswerBotAnalytics = (timeRange: DateRangePickerValue) => {
+  const url = buildApiPath("/api/analytics/admin/danswerbot", {
+    start: convertDateToStartOfDay(timeRange.from)?.toISOString(),
+    end: convertDateToEndOfDay(timeRange.to)?.toISOString(),
+  });
+  const swrResponse = useSWR<DanswerBotAnalytics[]>(url, errorHandlingFetcher); // TODO
+
+  return {
+    ...swrResponse,
+    refreshDanswerBotAnalytics: () => mutate(url),
+  };
+};
+
 export const useQueryHistory = () => {
   const [selectedFeedbackType, setSelectedFeedbackType] =
     useState<Feedback | null>(null);

web/src/app/ee/admin/performance/usage/DanswerBotChart.tsx

@@ -0,0 +1,78 @@
+import { ThreeDotsLoader } from "@/components/Loading";
+import { getDatesList, useDanswerBotAnalytics } from "../lib";
+import {
+  AreaChart,
+  Card,
+  Title,
+  Text,
+  DateRangePickerValue,
+} from "@tremor/react";
+
+export function DanswerBotChart({
+  timeRange,
+}: {
+  timeRange: DateRangePickerValue;
+}) {
+  const {
+    data: danswerBotAnalyticsData,
+    isLoading: isDanswerBotAnalyticsLoading,
+    error: danswerBotAnalyticsError,
+  } = useDanswerBotAnalytics(timeRange);
+
+  let chart;
+  if (isDanswerBotAnalyticsLoading) {
+    chart = (
+      <div className="h-80 flex flex-col">
+        <ThreeDotsLoader />
+      </div>
+    );
+  } else if (!danswerBotAnalyticsData || danswerBotAnalyticsError) {
+    chart = (
+      <div className="h-80 text-red-600 text-bold flex flex-col">
+        <p className="m-auto">Failed to fetch feedback data...</p>
+      </div>
+    );
+  } else {
+    const initialDate =
+      timeRange.from || new Date(danswerBotAnalyticsData[0].date);
+    const dateRange = getDatesList(initialDate);
+
+    const dateToDanswerBotAnalytics = new Map(
+      danswerBotAnalyticsData.map((danswerBotAnalyticsEntry) => [
+        danswerBotAnalyticsEntry.date,
+        danswerBotAnalyticsEntry,
+      ])
+    );
+
+    chart = (
+      <AreaChart
+        className="mt-4 h-80"
+        data={dateRange.map((dateStr) => {
+          const danswerBotAnalyticsForDate =
+            dateToDanswerBotAnalytics.get(dateStr);
+          return {
+            Day: dateStr,
+            "Total Queries": danswerBotAnalyticsForDate?.total_queries || 0,
+            "Automatically Resolved":
+              danswerBotAnalyticsForDate?.auto_resolved || 0,
+          };
+        })}
+        categories={["Total Queries", "Automatically Resolved"]}
+        index="Day"
+        colors={["indigo", "fuchsia"]}
+        valueFormatter={(number: number) =>
+          `${Intl.NumberFormat("us").format(number).toString()}`
+        }
+        yAxisWidth={60}
+      />
+    );
+  }
+
+  return (
+    <Card className="mt-8">
+      <Title>Slack Bot</Title>
+      <Text>Total Queries vs Auto Resolved</Text>
+      {chart}
+    </Card>
+  );
+}

web/src/app/ee/admin/performance/usage/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { DateRangeSelector } from "../DateRangeSelector";
+import { DanswerBotChart } from "./DanswerBotChart";
 import { FeedbackChart } from "./FeedbackChart";
 import { QueryPerformanceChart } from "./QueryPerformanceChart";
 import { BarChartIcon } from "@/components/icons/icons";
@@ -23,6 +24,7 @@ export default function AnalyticsPage() {
 
       <QueryPerformanceChart timeRange={timeRange} />
       <FeedbackChart timeRange={timeRange} />
+      <DanswerBotChart timeRange={timeRange} />
     </main>
   );
 }

web/src/app/ee/admin/performance/usage/types.ts

@@ -12,6 +12,12 @@ export interface UserAnalytics {
   date: string;
 }
 
+export interface DanswerBotAnalytics {
+  total_queries: number;
+  auto_resolved: number;
+  date: string;
+}
+
 export interface AbridgedSearchDoc {
   document_id: string;
   semantic_identifier: string;