Feat/add bot token usage

client/app/admin/page.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import React from 'react';
+import dayjs from 'dayjs';
+import { Column } from '@ant-design/charts';
+import { Card, Progress } from '@nextui-org/react';
+import { BotUsage, useAnalyze, useTopBots, useTopUsers } from '../hooks/useAnalyze';
+import { maxBy, sortBy } from 'lodash';
+
+export default function AdminPage() {
+  const { data = [], isLoading } = useAnalyze();
+  const { data: topBots = [] } = useTopBots();
+  const { data: topUsers = [] } = useTopUsers();
+
+  const chartProps = {
+    xField: (d: BotUsage) => new Date(d.usage_date),
+    colorField: 'bot_name',
+    height: 400,
+    stack: true,
+    legend: false,
+    sort: { by: 'x' },
+    scale: { color: { palette: 'tableau10' }},
+    axis: {
+      x: {
+        labelFormatter: (x: string) => dayjs(x).format('MM-DD'),
+      }
+    },
+  }
+
+  return (
+      <div className="min-h-screen p-8">
+        {/* Header */}
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-2xl font-bold">Usage: Tokens</h1>
+        </div>
+
+        {/* Charts Section */}
+        <div className="grid grid-cols-3 gap-8 mb-8">
+          <div className="col-span-2 grid grid-rows-2 gap-8">
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Input Tokens</h2>
+              <div className="text-gray-400">
+                <Column
+                  {...chartProps}
+                  data={sortBy(data, ['usage_date', 'input_tokens'])}
+                  yField={'input_tokens'}
+                />
+              </div>
+            </Card>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Output Tokens</h2>
+              <div className="text-gray-400">
+                <Column
+                  {...chartProps}
+                  data={sortBy(data, ['usage_date', 'output_tokens'])}
+                  yField={'output_tokens'}
+                />
+              </div>
+            </Card>
+          </div>
+          <div>
+            <Card className="p-6 mb-8">
+              <h2 className="text-lg font-semibold mb-4">Top Bots</h2>
+              <div className="text-gray-400">
+                {topBots.map(record => {
+                  return <Progress
+                    key={record.bot_name}
+                    className="max-w-md"
+                    color="primary"
+                    formatOptions={{ style: "decimal"}}
+                    label={record.bot_name}
+                    maxValue={maxBy(topBots, 'total_tokens')?.total_tokens}
+                    value={record.total_tokens}
+                    showValueLabel={true}
+                    size="sm"
+                  />
+                })}
+              </div>
+            </Card>
+
+            <Card className="p-6">
+              <h2 className="text-lg font-semibold mb-4">Top Users</h2>
+              <div className="text-gray-400">
+                {topUsers.map(record => {
+                  return <Progress
+                    key={record.user_name}
+                    className="max-w-md"
+                    color="primary"
+                    formatOptions={{ style: "decimal"}}
+                    label={record.user_name}
+                    maxValue={maxBy(topBots, 'total_tokens')?.total_tokens}
+                    value={record.total_tokens}
+                    showValueLabel={true}
+                    size="sm"
+                  />
+                })}
+              </div>
+            </Card>
+          </div>
+        </div>
+
+      </div>
+    );
+}

client/app/factory/edit/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import I18N from '@/app/utils/I18N';
-import React, { useCallback, useEffect, useMemo, useState, Key } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Tabs,
   Tab,
@@ -20,7 +20,6 @@ import Image from 'next/image';
 import BotCreateFrom from '@/app/factory/edit/components/BotCreateForm';
 import { toast, ToastContainer } from 'react-toastify';
 import BackIcon from '@/public/icons/BackIcon';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useRouter } from 'next/navigation';
 import {
   useBotConfigGenerator,
@@ -328,25 +327,32 @@ export default function Edit() {
     </div>
   );
 
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(botProfile.id)
+      .then(() => {
+        toast.success(I18N.edit.page.tOKEN);
+      })
+      .catch((err) => {
+        console.error(err);
+        toast.error('something went wrong, please try again');
+      });
+  };
+
   const manualConfigContent = (
     <div className="h-full px-10 py-10 overflow-x-hidden overflow-y-scroll">
-      <div className="flex justify-between">
+      <div className="flex justify-between" key="copy">
         <span>{I18N.edit.page.gITHU}</span>
         {botProfile.id && (
-          <CopyToClipboard
-            text={botProfile.id}
-            onCopy={() => {
-              toast.success(I18N.edit.page.tOKEN);
-            }}
+          <span
+            className="text-xs text-gray-500 cursor-pointer"
+            onClick={handleCopy}
           >
-            {/* @ts-ignore */}
-            <span className="text-xs text-gray-500 cursor-pointer">
-              {I18N.edit.page.fuZhiTOK}
-            </span>
-          </CopyToClipboard>
+            {I18N.edit.page.fuZhiTOK}
+          </span>
         )}
       </div>
-      <div>
+      <div key="input">
         {!isEdit ? (
           <Autocomplete
             name="repo_name"

client/app/hooks/useAnalyze.ts

@@ -0,0 +1,32 @@
+import { useQuery } from '@tanstack/react-query';
+import { analyzeTokenUsage, analyzeTopBots, analyzeTopUsers } from '../services/TokensController';
+
+export interface BotUsage {
+  bot_name: string;
+  total_tokens: number;
+  usage_date: Date;
+}
+
+export function useAnalyze() {
+  return useQuery({
+    queryKey: [`usage.analyze`],
+    queryFn: async () => analyzeTokenUsage(),
+    retry: false,
+  });
+}
+
+export function useTopBots() {
+  return useQuery<BotUsage[]>({
+    queryKey: [`usage.top.bots`],
+    queryFn: async () => analyzeTopBots(),
+    retry: false,
+  });
+}
+
+export function useTopUsers() {
+  return useQuery<{ user_name: string; total_tokens: number;}[]>({
+    queryKey: [`usage.top.users`],
+    queryFn: async () => analyzeTopUsers(),
+    retry: false,
+  });
+}

client/app/services/TokensController.ts

@@ -16,4 +16,20 @@ export async function deleteToken(id: string) {
 export async function createToken(data: LLMTokenInsert) {
   const response = await axios.post(`${apiDomain}/api/user/llm_token`, data);
   return response.data;
-}
+}
+
+export async function analyzeTokenUsage() {
+  const response = await axios.get(`${apiDomain}/api/user/llm_token_usages/analyzer`);
+  return response.data;
+}
+
+export async function analyzeTopBots() {
+  const response = await axios.get(`${apiDomain}/api/user/llm_token_usages/top_bots`);
+  return response.data;
+}
+
+export async function analyzeTopUsers() {
+  const response = await axios.get(`${apiDomain}/api/user/llm_token_usages/top_users`);
+  return response.data;
+}
+

client/components/User.tsx

@@ -39,10 +39,10 @@ export default function Profile() {
         />
       </DropdownTrigger>
       <DropdownMenu>
-        <DropdownItem>
+        <DropdownItem key="token">
           <Link href="/user/tokens">{I18N.components.User.tOKEN}</Link>
         </DropdownItem>
-        <DropdownItem onClick={actions.doLogout}>
+        <DropdownItem key="logout" onPress={actions.doLogout}>
           {I18N.components.User.dengChu}
         </DropdownItem>
       </DropdownMenu>

client/package.json

@@ -17,6 +17,8 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@ant-design/charts": "^2.2.6",
+    "@antv/g2": "^5.2.10",
     "@auth0/nextjs-auth0": "^3.3.0",
     "@fingerprintjs/fingerprintjs": "^4.3.0",
     "@fullpage/react-fullpage": "^0.1.42",