feat: add overview (#391)

### What problem does this PR solve?

feat: render stats charts
feat: create api token
feat: delete api token
feat: add ChatApiKeyModal
feat: add RagLineChart


Issue link: #345

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/chat/hooks.ts

@@ -2,22 +2,28 @@ import { MessageType } from '@/constants/chat';
 import { fileIconMap } from '@/constants/common';
 import {
   useCompleteConversation,
+  useCreateToken,
   useFetchConversation,
   useFetchConversationList,
   useFetchDialog,
   useFetchDialogList,
+  useFetchStats,
+  useListToken,
   useRemoveConversation,
   useRemoveDialog,
+  useRemoveToken,
   useSelectConversationList,
   useSelectDialogList,
+  useSelectTokenList,
   useSetDialog,
   useUpdateConversation,
 } from '@/hooks/chatHooks';
 import { useSetModalState, useShowDeleteConfirm } from '@/hooks/commonHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
-import { IConversation, IDialog } from '@/interfaces/database/chat';
+import { IConversation, IDialog, IStats } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { getFileExtension } from '@/utils';
+import dayjs, { Dayjs } from 'dayjs';
 import omit from 'lodash/omit';
 import {
   ChangeEventHandler,
@@ -704,3 +710,108 @@ export const useGetSendButtonDisabled = () => {
   return dialogId === '' && conversationId === '';
 };
 //#endregion
+
+//#region API provided for external calls
+
+type RangeValue = [Dayjs | null, Dayjs | null] | null;
+
+export const useFetchStatsOnMount = (visible: boolean) => {
+  const fetchStats = useFetchStats();
+  const [pickerValue, setPickerValue] = useState<RangeValue>([
+    dayjs(),
+    dayjs().subtract(7, 'day'),
+  ]);
+
+  useEffect(() => {
+    if (visible && Array.isArray(pickerValue) && pickerValue[0]) {
+      fetchStats({ fromDate: pickerValue[0], toDate: pickerValue[1] });
+    }
+  }, [fetchStats, pickerValue, visible]);
+
+  return {
+    pickerValue,
+    setPickerValue,
+  };
+};
+
+export const useOperateApiKey = (visible: boolean, dialogId: string) => {
+  const removeToken = useRemoveToken();
+  const createToken = useCreateToken(dialogId);
+  const listToken = useListToken();
+  const tokenList = useSelectTokenList();
+  const creatingLoading = useOneNamespaceEffectsLoading('chatModel', [
+    'createToken',
+  ]);
+  const listLoading = useOneNamespaceEffectsLoading('chatModel', ['list']);
+
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const onRemoveToken = (token: string, tenantId: string) => {
+    showDeleteConfirm({
+      onOk: () => removeToken({ dialogId, tokens: [token], tenantId }),
+    });
+  };
+
+  useEffect(() => {
+    if (visible && dialogId) {
+      listToken(dialogId);
+    }
+  }, [listToken, dialogId, visible]);
+
+  return {
+    removeToken: onRemoveToken,
+    createToken,
+    tokenList,
+    creatingLoading,
+    listLoading,
+  };
+};
+
+type ChartStatsType = {
+  [k in keyof IStats]: Array<{ xAxis: string; yAxis: number }>;
+};
+
+export const useSelectChartStatsList = (): ChartStatsType => {
+  // const stats: IStats = useSelectStats();
+  const stats = {
+    pv: [
+      ['2024-06-01', 1],
+      ['2024-07-24', 3],
+      ['2024-09-01', 10],
+    ],
+    uv: [
+      ['2024-02-01', 0],
+      ['2024-03-01', 99],
+      ['2024-05-01', 3],
+    ],
+    speed: [
+      ['2024-09-01', 2],
+      ['2024-09-01', 3],
+    ],
+    tokens: [
+      ['2024-09-01', 1],
+      ['2024-09-01', 3],
+    ],
+    round: [
+      ['2024-09-01', 0],
+      ['2024-09-01', 3],
+    ],
+    thumb_up: [
+      ['2024-09-01', 3],
+      ['2024-09-01', 9],
+    ],
+  };
+
+  return Object.keys(stats).reduce((pre, cur) => {
+    const item = stats[cur as keyof IStats];
+    if (item.length > 0) {
+      pre[cur as keyof IStats] = item.map((x) => ({
+        xAxis: x[0] as string,
+        yAxis: x[1] as number,
+      }));
+    }
+    return pre;
+  }, {} as ChartStatsType);
+};
+
+//#endregion