Merge branch 'main' into ui/sessions-can-review-the-response

Author: faltawy

dashboard/app/(copilot)/copilot/[copilot_id]/analytics/page.tsx

@@ -0,0 +1,82 @@
+import { HeaderShell } from '@/components/domain/HeaderShell'
+import { SimpleCard } from '@/components/domain/simple-card'
+import { Stack } from '@/components/ui/Stack'
+import React from 'react'
+import { EChart } from '@kbox-labs/react-echarts'
+
+type Props = {
+    params: {
+        copilot_id: string
+    }
+}
+export default async function AnalyticsPage(props: Props) {
+    return (
+        <Stack direction='column' fluid className='h-full'>
+            <HeaderShell>
+                <h1 className="text-lg font-bold text-secondary-foreground">
+                    Analytics
+                </h1>
+            </HeaderShell>
+            <main className='flex-1 overflow-auto p-4 w-full flex flex-col gap-4'>
+                <div className='grid grid-cols-3 gap-4'>
+                    <SimpleCard title="Knowledgebase Calls" description="number of knowledgebase calls">
+                        20
+                    </SimpleCard>
+                    <SimpleCard title="Api Calls" description="number of api calls">
+                        20
+                    </SimpleCard>
+                </div>
+                <div className='flex-1 w-full rounded-md grid grid-cols-2 overflow-hidden gap-5'>
+                    <SimpleCard title="Messages Per session">
+                        <EChart
+                            renderer='svg'
+                            className='size-full'
+                            xAxis={{
+                                type: "value",
+                            }}
+                            yAxis={{
+                                type: "value",
+                            }}
+                            series={[{
+                                type: "scatter",
+                                symbolSize: 20,
+                                data: [
+                                    [10.0, 8.04],
+                                    [8.0, 6.95],
+                                    [13.0, 7.58],
+                                    [9.0, 8.81],
+                                    [11.0, 8.33],
+                                    [14.0, 9.96],
+                                    [6.0, 7.24],
+                                    [4.0, 4.26],
+                                    [12.0, 10.84],
+                                    [7.0, 4.82],
+                                    [5.0, 5.68],
+                                ],
+                            }]}
+                        />
+                    </SimpleCard>
+                    <SimpleCard title="Action Calls">
+                        <EChart
+                            renderer='svg'
+                            className='size-full'
+                            xAxis={{
+                                type: 'category'
+                            }}
+                            yAxis={{
+                                type: 'value',
+                                boundaryGap: [0, '30%']
+                            }}
+                            series={[
+                                {
+                                    type: "line",
+                                    data: [120, 200, 150, 80, 70, 110, 130],
+                                }
+                            ]}
+                        />
+                    </SimpleCard>
+                </div>
+            </main>
+        </Stack>
+    )
+}

dashboard/app/(copilot)/copilot/[copilot_id]/layout.tsx

@@ -11,7 +11,7 @@ import {
   MessagesSquare,
   Settings,
   Workflow,
-  SquareCode, Codesandbox, Route, Zap
+  SquareCode, Codesandbox, Route, Zap, PieChart
 } from "lucide-react";
 import React from "react";
 import { CopilotLayoutNavLink } from "../../_parts/CopilotNavLink";
@@ -52,7 +52,7 @@ export default function CopilotLayout({ children, params }: Props) {
           </div>
           <Separator className="my-2" />
           <div className="flex flex-col items-center gap-4">
-          <CopilotLayoutNavLink
+            <CopilotLayoutNavLink
               href={copilotBase + "/actions"}
               IconComponent={Zap}
               label="Actions"
@@ -79,6 +79,11 @@ export default function CopilotLayout({ children, params }: Props) {
               IconComponent={Settings}
               label="Settings"
             />
+            <CopilotLayoutNavLink
+              href={copilotBase + "/analytics"}
+              IconComponent={PieChart}
+              label="Analytics"
+            />
           </div>
         </div>
         <div className="mx-auto pb-5 flex flex-col items-center gap-2">

dashboard/components/domain/simple-card.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../ui/card";
+
+export function SimpleCard({ children, title, description }: {
+    children: React.ReactNode
+    title: React.ReactNode
+    description?: React.ReactNode
+}) {
+    return <Card className="flex flex-col">
+        <CardHeader className="w-full">
+            <CardTitle>
+                {title}
+            </CardTitle>
+            {description && <CardDescription>
+                {description}
+            </CardDescription>}
+        </CardHeader>
+        <CardContent className="flex-1 w-full">
+            {children}
+        </CardContent>
+    </Card>
+}

dashboard/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-accent-foreground shadow-sm transition-colors hover:border-primary",
       className
     )}
     {...props}
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-5", className)}
     {...props}
   />
 ))
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "text-xl font-semibold leading-none tracking-tight",
       className
     )}
     {...props}
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-5 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -70,7 +70,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-5 pt-0", className)}
     {...props}
   />
 ))

dashboard/data/copilot.ts

@@ -76,3 +76,12 @@ export async function createVariable(id: string, variables: VariableType[]) {
 export async function deleteVariableByKey(id: string, name: string) {
   return await instance.delete<{ message: string }>(`/${id}/variable/${name}`)
 }
+
+// analytics data 
+export async function getAnalyticsData(id: string) {
+  return (await instance.get<{
+    api_called_count: number;
+    knowledgebase_called_count:number;
+    other_count: number;
+  }[]>(`/${id}/analytics`)).data
+}

dashboard/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@openchatai/copilot-widget": "^2.3.0",
+    "@kbox-labs/react-echarts": "^1.0.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -40,6 +41,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "echarts": "^5.4.3",
     "framer-motion": "^10.16.16",
     "immer": "^10.0.3",
     "jotai": "^2.4.3",

dashboard/pnpm-lock.yaml

@@ -23,10 +23,17 @@
 
 # Add two new boolean columns
 def upgrade():
-    op.add_column("chat_history", Column("api_called", Boolean, default=False))
-    op.add_column(
-        "chat_history", Column("knowledgebase_called", Boolean, default=False)
-    )
+    if not op.get_bind().execute(
+        sa.text("SHOW COLUMNS FROM chat_history LIKE 'api_called'")
+    ).fetchone():
+        op.add_column("chat_history", Column("api_called", Boolean, default=False))
+    
+    if not op.get_bind().execute(
+        sa.text("SHOW COLUMNS FROM chat_history LIKE 'knowledgebase_called'")
+    ).fetchone():
+        op.add_column(
+            "chat_history", Column("knowledgebase_called", Boolean, default=False)
+        )
 
 
 # Remove the two boolean columns

llm-server/models/migrations/versions/b9828e70d171_add_api_call_made_and_knowledgebase_.py

@@ -279,37 +279,41 @@ def create_chat_histories(
     return chat_histories
 
 
-async def get_analytics(email: str):
+async def get_analytics(chatbot_id: str):
     with Session() as session:
         chat_histories = []
 
-        # Step 1: Get chatbot_ids associated with the given email
-        chatbot_ids = session.query(Chatbot.id).filter(Chatbot.email == email).all()
-
-        if chatbot_ids:
-            chatbot_ids = [chatbot_id[0] for chatbot_id in chatbot_ids]
-
-            # Step 2: Get analytics data in a single query
-            analytics_data = (
-                session.query(
-                    func.sum(func.cast(ChatHistory.api_called, Integer)).label("api_called_count"),
-                    func.sum(func.cast(ChatHistory.knowledgebase_called, Integer)).label("knowledgebase_called_count"),
-                    func.count().label("total"),
-                    func.sum(func.cast(
-                        ~ChatHistory.api_called & ~ChatHistory.knowledgebase_called, Integer)).label("other_count")
-                )
-                .filter(ChatHistory.chatbot_id.in_(chatbot_ids))
-                .one()
+        # Step 2: Get analytics data in a single query
+        analytics_data = (
+            session.query(
+                func.sum(func.cast(ChatHistory.api_called, Integer)).label(
+                    "api_called_count"
+                ),
+                func.sum(func.cast(ChatHistory.knowledgebase_called, Integer)).label(
+                    "knowledgebase_called_count"
+                ),
+                func.count().label("total"),
+                func.sum(
+                    func.cast(
+                        ~ChatHistory.api_called & ~ChatHistory.knowledgebase_called,
+                        Integer,
+                    )
+                ).label("other_count"),
             )
+            .filter(ChatHistory.chatbot_id == chatbot_id)
+            .one()
+        )
 
-            # Append the results to chat_histories
-            chat_histories.append(
-                {
-                    "api_called_count": analytics_data.api_called_count or 0,
-                    "knowledgebase_called_count": analytics_data.knowledgebase_called_count or 0,
-                    "total": analytics_data.total or 0,
-                    "other_count": analytics_data.other_count or 0,
-                }
-            )
+        # Append the results to chat_histories
+        chat_histories.append(
+            {
+                "api_called_count": int(analytics_data.api_called_count or 0),
+                "knowledgebase_called_count": int(
+                    analytics_data.knowledgebase_called_count or 0
+                ),
+                "total": int(analytics_data.total or 0),
+                "other_count": int(analytics_data.other_count or 0),
+            }
+        )
 
     return chat_histories