feat: analytics dashboard with respective endpoints

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "i18next-browser-languagedetector": "^8.0.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-chartjs-2": "^5.2.0",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.3.1",
         "react-dropzone": "^14.2.3",
@@ -858,6 +859,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "peer": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2503,6 +2510,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "peer": true,
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -7253,6 +7272,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-copy-to-clipboard": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",

frontend/package.json

@@ -25,6 +25,7 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",

frontend/src/api/endpoints.ts

@@ -12,6 +12,9 @@ const endpoints = {
     SINGLE_PROMPT: (id: string) => `/api/get_single_prompt?id=${id}`,
     DELETE_PATH: (docPath: string) => `/api/delete_old?path=${docPath}`,
     TASK_STATUS: (task_id: string) => `/api/task_status?task_id=${task_id}`,
+    MESSAGE_ANALYTICS: '/api/get_message_analytics',
+    TOKEN_ANALYTICS: '/api/get_token_analytics',
+    FEEDBACK_ANALYTICS: '/api/get_feedback_analytics',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/api/services/userService.ts

@@ -23,6 +23,12 @@ const userService = {
     apiClient.get(endpoints.USER.DELETE_PATH(docPath)),
   getTaskStatus: (task_id: string): Promise<any> =>
     apiClient.get(endpoints.USER.TASK_STATUS(task_id)),
+  getMessageAnalytics: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.MESSAGE_ANALYTICS, data),
+  getTokenAnalytics: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.TOKEN_ANALYTICS, data),
+  getFeedbackAnalytics: (data: any): Promise<any> =>
+    apiClient.post(endpoints.USER.FEEDBACK_ANALYTICS, data),
 };
 
 export default userService;

frontend/src/components/Dropdown.tsx

@@ -16,6 +16,7 @@ function Dropdown({
   showDelete,
   onDelete,
   placeholder,
+  contentSize = 'text-base',
 }: {
   options:
     | string[]
@@ -41,6 +42,7 @@ function Dropdown({
   showDelete?: boolean;
   onDelete?: (value: string) => void;
   placeholder?: string;
+  contentSize?: string;
 }) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = React.useState(false);
@@ -84,9 +86,9 @@ function Dropdown({
           </span>
         ) : (
           <span
-            className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
+            className={`truncate overflow-hidden dark:text-bright-gray ${
               !selectedValue && 'text-silver dark:text-gray-400'
-            }`}
+            } ${contentSize}`}
           >
             {selectedValue && 'label' in selectedValue
               ? selectedValue.label
@@ -123,7 +125,7 @@ function Dropdown({
                   onSelect(option);
                   setIsOpen(false);
                 }}
-                className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
+                className={`ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray ${contentSize}`}
               >
                 {typeof option === 'string'
                   ? option

frontend/src/locale/en.json

@@ -62,6 +62,9 @@
       "key": "API Key",
       "sourceDoc": "Source Document",
       "createNew": "Create New"
+    },
+    "analytics": {
+      "label": "Analytics"
     }
   },
   "modals": {

frontend/src/locale/es.json

@@ -62,6 +62,9 @@
       "key": "Clave de API",
       "sourceDoc": "Documento Fuente",
       "createNew": "Crear Nuevo"
+    },
+    "analytics": {
+      "label": "Analítica"
     }
   },
   "modals": {

frontend/src/locale/jp.json

@@ -62,6 +62,9 @@
       "key": "APIキー",
       "sourceDoc": "ソースドキュメント",
       "createNew": "新規作成"
+    },
+    "analytics": {
+      "label": "分析"
     }
   },
   "modals": {

frontend/src/locale/zh.json

@@ -62,6 +62,9 @@
       "key": "API 密钥",
       "sourceDoc": "源文档",
       "createNew": "创建新的"
+    },
+    "analytics": {
+      "label": "分析"
     }
   },
   "modals": {

frontend/src/settings/APIKeys.tsx

@@ -5,15 +5,14 @@ import userService from '../api/services/userService';
 import Trash from '../assets/trash.svg';
 import CreateAPIKeyModal from '../modals/CreateAPIKeyModal';
 import SaveAPIKeyModal from '../modals/SaveAPIKeyModal';
+import { APIKeyData } from './types';
 
 export default function APIKeys() {
   const { t } = useTranslation();
   const [isCreateModalOpen, setCreateModal] = React.useState(false);
   const [isSaveKeyModalOpen, setSaveKeyModal] = React.useState(false);
   const [newKey, setNewKey] = React.useState('');
-  const [apiKeys, setApiKeys] = React.useState<
-    { name: string; key: string; source: string; id: string }[]
-  >([]);
+  const [apiKeys, setApiKeys] = React.useState<APIKeyData[]>([]);
 
   const handleFetchKeys = async () => {
     try {

frontend/src/settings/Analytics.tsx

@@ -0,0 +1,390 @@
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+
+import userService from '../api/services/userService';
+import Dropdown from '../components/Dropdown';
+import { htmlLegendPlugin } from '../utils/chartUtils';
+import { formatDate } from '../utils/dateTimeUtils';
+import { APIKeyData } from './types';
+
+import type { ChartData } from 'chart.js';
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+const filterOptions = [
+  { label: 'Hour', value: 'last_hour' },
+  { label: '24 Hours', value: 'last_24_hour' },
+  { label: '7 Days', value: 'last_7_days' },
+  { label: '15 Days', value: 'last_15_days' },
+  { label: '30 Days', value: 'last_30_days' },
+];
+
+export default function Analytics() {
+  const [messagesData, setMessagesData] = React.useState<Record<
+    string,
+    number
+  > | null>(null);
+  const [tokenUsageData, setTokenUsageData] = React.useState<Record<
+    string,
+    number
+  > | null>(null);
+  const [feedbackData, setFeedbackData] = React.useState<Record<
+    string,
+    {
+      positive: number;
+      negative: number;
+    }
+  > | null>(null);
+  const [chatbots, setChatbots] = React.useState<APIKeyData[]>([]);
+  const [selectedChatbot, setSelectedChatbot] =
+    React.useState<APIKeyData | null>();
+  const [messagesFilter, setMessagesFilter] = React.useState<{
+    label: string;
+    value: string;
+  }>({ label: '30 Days', value: 'last_30_days' });
+  const [tokenUsageFilter, setTokenUsageFilter] = React.useState<{
+    label: string;
+    value: string;
+  }>({ label: '30 Days', value: 'last_30_days' });
+  const [feedbackFilter, setFeedbackFilter] = React.useState<{
+    label: string;
+    value: string;
+  }>({ label: '30 Days', value: 'last_30_days' });
+
+  const fetchChatbots = async () => {
+    try {
+      const response = await userService.getAPIKeys();
+      if (!response.ok) {
+        throw new Error('Failed to fetch Chatbots');
+      }
+      const chatbots = await response.json();
+      setChatbots(chatbots);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const fetchMessagesData = async (chatbot_id?: string, filter?: string) => {
+    try {
+      const response = await userService.getMessageAnalytics({
+        api_key_id: chatbot_id,
+        filter_option: filter,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch analytics data');
+      }
+      const data = await response.json();
+      setMessagesData(data.messages);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const fetchTokenData = async (chatbot_id?: string, filter?: string) => {
+    try {
+      const response = await userService.getTokenAnalytics({
+        api_key_id: chatbot_id,
+        filter_option: filter,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch analytics data');
+      }
+      const data = await response.json();
+      setTokenUsageData(data.token_usage);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const fetchFeedbackData = async (chatbot_id?: string, filter?: string) => {
+    try {
+      const response = await userService.getFeedbackAnalytics({
+        api_key_id: chatbot_id,
+        filter_option: filter,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch analytics data');
+      }
+      const data = await response.json();
+      setFeedbackData(data.feedback);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  React.useEffect(() => {
+    fetchChatbots();
+  }, []);
+
+  React.useEffect(() => {
+    const id = selectedChatbot?.id;
+    const filter = messagesFilter;
+    fetchMessagesData(id, filter?.value);
+  }, [selectedChatbot, messagesFilter]);
+
+  React.useEffect(() => {
+    const id = selectedChatbot?.id;
+    const filter = tokenUsageFilter;
+    fetchTokenData(id, filter?.value);
+  }, [selectedChatbot, tokenUsageFilter]);
+
+  React.useEffect(() => {
+    const id = selectedChatbot?.id;
+    const filter = feedbackFilter;
+    fetchFeedbackData(id, filter?.value);
+  }, [selectedChatbot, feedbackFilter]);
+  return (
+    <div className="mt-12">
+      <div className="flex flex-col items-start">
+        <div className="flex flex-col gap-3">
+          <p className="font-bold text-jet dark:text-bright-gray">
+            Filter by chatbot
+          </p>
+          <Dropdown
+            size="w-[55vw] sm:w-[360px]"
+            options={[
+              ...chatbots.map((chatbot) => ({
+                label: chatbot.name,
+                value: chatbot.id,
+              })),
+              { label: 'None', value: '' },
+            ]}
+            placeholder="Select chatbot"
+            onSelect={(chatbot: { label: string; value: string }) => {
+              setSelectedChatbot(
+                chatbots.find((item) => item.id === chatbot.value),
+              );
+            }}
+            selectedValue={
+              (selectedChatbot && {
+                label: selectedChatbot.name,
+                value: selectedChatbot.id,
+              }) ||
+              null
+            }
+            rounded="3xl"
+            border="border"
+          />
+        </div>
+        <div className="mt-8 w-full flex flex-col sm:flex-row gap-3">
+          <div className="h-[345px] sm:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+            <div className="flex flex-row items-center justify-start gap-3">
+              <p className="font-bold text-jet dark:text-bright-gray">
+                Messages
+              </p>
+              <Dropdown
+                size="w-[125px]"
+                options={filterOptions}
+                placeholder="Filter"
+                onSelect={(selectedOption: {
+                  label: string;
+                  value: string;
+                }) => {
+                  setMessagesFilter(selectedOption);
+                }}
+                selectedValue={messagesFilter ?? null}
+                rounded="3xl"
+                border="border"
+                contentSize="text-sm"
+              />
+            </div>
+            <div className="mt-px relative h-[245px] w-full">
+              <div
+                id="legend-container-1"
+                className="flex flex-row items-center justify-end"
+              ></div>
+              <AnalyticsChart
+                data={{
+                  labels: Object.keys(messagesData || {}).map((item) =>
+                    formatDate(item),
+                  ),
+                  datasets: [
+                    {
+                      label: 'Messages',
+                      data: Object.values(messagesData || {}),
+                      backgroundColor: '#7D54D1',
+                    },
+                  ],
+                }}
+                legendID="legend-container-1"
+                maxTicksLimitInX={8}
+                isStacked={false}
+              />
+            </div>
+          </div>
+          <div className="h-[345px] sm:w-1/2 w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+            <div className="flex flex-row items-center justify-start gap-3">
+              <p className="font-bold text-jet dark:text-bright-gray">
+                Token Usage
+              </p>
+              <Dropdown
+                size="w-[125px]"
+                options={filterOptions}
+                placeholder="Filter"
+                onSelect={(selectedOption: {
+                  label: string;
+                  value: string;
+                }) => {
+                  setTokenUsageFilter(selectedOption);
+                }}
+                selectedValue={tokenUsageFilter ?? null}
+                rounded="3xl"
+                border="border"
+                contentSize="text-sm"
+              />
+            </div>
+            <div className="mt-px relative h-[245px] w-full">
+              <div
+                id="legend-container-2"
+                className="flex flex-row items-center justify-end"
+              ></div>
+              <AnalyticsChart
+                data={{
+                  labels: Object.keys(tokenUsageData || {}).map((item) =>
+                    formatDate(item),
+                  ),
+                  datasets: [
+                    {
+                      label: 'Tokens',
+                      data: Object.values(tokenUsageData || {}),
+                      backgroundColor: '#7D54D1',
+                    },
+                  ],
+                }}
+                legendID="legend-container-2"
+                maxTicksLimitInX={8}
+                isStacked={false}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="mt-8 w-full">
+          <div className="h-[345px] w-full px-6 py-5 border rounded-2xl border-silver dark:border-silver/40">
+            <div className="flex flex-row items-center justify-start gap-3">
+              <p className="font-bold text-jet dark:text-bright-gray">
+                User Feedback
+              </p>
+              <Dropdown
+                size="w-[125px]"
+                options={filterOptions}
+                placeholder="Filter"
+                onSelect={(selectedOption: {
+                  label: string;
+                  value: string;
+                }) => {
+                  setFeedbackFilter(selectedOption);
+                }}
+                selectedValue={feedbackFilter ?? null}
+                rounded="3xl"
+                border="border"
+                contentSize="text-sm"
+              />
+            </div>
+            <div className="mt-px relative h-[245px] w-full">
+              <div
+                id="legend-container-3"
+                className="flex flex-row items-center justify-end"
+              ></div>
+              <AnalyticsChart
+                data={{
+                  labels: Object.keys(feedbackData || {}).map((item) =>
+                    formatDate(item),
+                  ),
+                  datasets: [
+                    {
+                      label: 'Positive',
+                      data: Object.values(feedbackData || {}).map(
+                        (item) => item.positive,
+                      ),
+                      backgroundColor: '#8BD154',
+                    },
+                    {
+                      label: 'Negative',
+                      data: Object.values(feedbackData || {}).map(
+                        (item) => item.negative,
+                      ),
+                      backgroundColor: '#D15454',
+                    },
+                  ],
+                }}
+                legendID="legend-container-3"
+                maxTicksLimitInX={10}
+                isStacked={true}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AnalyticsChartProps = {
+  data: ChartData<'bar'>;
+  legendID: string;
+  maxTicksLimitInX: number;
+  isStacked: boolean;
+};
+
+function AnalyticsChart({
+  data,
+  legendID,
+  maxTicksLimitInX,
+  isStacked,
+}: AnalyticsChartProps) {
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      htmlLegend: {
+        containerID: legendID,
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          lineWidth: 0.2,
+          color: '#C4C4C4',
+        },
+        border: {
+          width: 0.2,
+          color: '#C4C4C4',
+        },
+        ticks: {
+          maxTicksLimit: maxTicksLimitInX,
+        },
+        stacked: isStacked,
+      },
+      y: {
+        grid: {
+          lineWidth: 0.2,
+          color: '#C4C4C4',
+        },
+        border: {
+          width: 0.2,
+          color: '#C4C4C4',
+        },
+        stacked: isStacked,
+      },
+    },
+  };
+  return <Bar options={options} plugins={[htmlLegendPlugin]} data={data} />;
+}

frontend/src/settings/General.tsx

@@ -89,7 +89,7 @@ export default function General() {
     changeLanguage(selectedLanguage?.value);
   }, [selectedLanguage, changeLanguage]);
   return (
-    <div className="mt-[59px]">
+    <div className="mt-12">
       <div className="mb-5">
         <p className="font-bold text-jet dark:text-bright-gray">
           {t('settings.general.selectTheme')}

frontend/src/settings/index.tsx

@@ -11,6 +11,7 @@ import {
   selectSourceDocs,
   setSourceDocs,
 } from '../preferences/preferenceSlice';
+import Analytics from './Analytics';
 import APIKeys from './APIKeys';
 import Documents from './Documents';
 import General from './General';
@@ -23,6 +24,7 @@ export default function Settings() {
     t('settings.general.label'),
     t('settings.documents.label'),
     t('settings.apiKeys.label'),
+    t('settings.analytics.label'),
   ];
   const [activeTab, setActiveTab] = React.useState(t('settings.general.label'));
   const [widgetScreenshot, setWidgetScreenshot] = React.useState<File | null>(
@@ -129,6 +131,8 @@ export default function Settings() {
         );
       case t('settings.apiKeys.label'):
         return <APIKeys />;
+      case t('settings.analytics.label'):
+        return <Analytics />;
       default:
         return null;
     }

frontend/src/settings/types/index.ts

@@ -0,0 +1,8 @@
+export type APIKeyData = {
+  id: string;
+  name: string;
+  key: string;
+  source: string;
+  prompt_id: string;
+  chunks: string;
+};

frontend/src/utils/chartUtils.ts

@@ -0,0 +1,77 @@
+import { Chart as ChartJS } from 'chart.js';
+
+const getOrCreateLegendList = (
+  chart: ChartJS,
+  id: string,
+): HTMLUListElement => {
+  const legendContainer = document.getElementById(id);
+  let listContainer = legendContainer?.querySelector('ul') as HTMLUListElement;
+
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = 'row';
+    listContainer.style.margin = '0';
+    listContainer.style.padding = '0';
+
+    legendContainer?.appendChild(listContainer);
+  }
+
+  return listContainer;
+};
+
+export const htmlLegendPlugin = {
+  id: 'htmlLegend',
+  afterUpdate(chart: ChartJS, args: any, options: { containerID: string }) {
+    const ul = getOrCreateLegendList(chart, options.containerID);
+
+    while (ul.firstChild) {
+      ul.firstChild.remove();
+    }
+
+    const items =
+      chart.options.plugins?.legend?.labels?.generateLabels?.(chart) || [];
+
+    items.forEach((item: any) => {
+      const li = document.createElement('li');
+      li.style.alignItems = 'center';
+      li.style.cursor = 'pointer';
+      li.style.display = 'flex';
+      li.style.flexDirection = 'row';
+      li.style.marginLeft = '10px';
+
+      li.onclick = () => {
+        chart.setDatasetVisibility(
+          item.datasetIndex,
+          !chart.isDatasetVisible(item.datasetIndex),
+        );
+        chart.update();
+      };
+
+      const boxSpan = document.createElement('span');
+      boxSpan.style.background = item.fillStyle;
+      boxSpan.style.borderColor = item.strokeStyle;
+      boxSpan.style.borderWidth = item.lineWidth + 'px';
+      boxSpan.style.display = 'inline-block';
+      boxSpan.style.flexShrink = '0';
+      boxSpan.style.height = '10px';
+      boxSpan.style.marginRight = '10px';
+      boxSpan.style.width = '10px';
+      boxSpan.style.borderRadius = '10px';
+
+      const textContainer = document.createElement('p');
+      textContainer.style.fontSize = '12px';
+      textContainer.style.color = item.fontColor;
+      textContainer.style.margin = '0';
+      textContainer.style.padding = '0';
+      textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
+      const text = document.createTextNode(item.text);
+      textContainer.appendChild(text);
+
+      li.appendChild(boxSpan);
+      li.appendChild(textContainer);
+      ul.appendChild(li);
+    });
+  },
+};

frontend/src/utils/dateTimeUtils.ts

@@ -0,0 +1,20 @@
+export function formatDate(dateString: string): string {
+  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
+    const dateTime = new Date(dateString);
+    return dateTime.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateString)) {
+    const dateTime = new Date(dateString);
+    return dateTime.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } else if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } else {
+    return dateString;
+  }
+}