Skip to content

Feat : Implemented Prompt A/B Testing Metrics Chart #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
She-ge wants to merge 5 commits into
base: build
Choose a base branch
from
Open

Feat : Implemented Prompt A/B Testing Metrics Chart #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d38667a
Prompt A/B Testing Metrics Chart
She-ge Mar 29, 2026
1e96294
Resolved Conflicts
She-ge Mar 29, 2026
8b93259
Updated Code
She-ge Mar 29, 2026
1d3b95c
Updated Code
She-ge Mar 29, 2026
1674a07
Merge branch 'build' into feat/30-Promt-A-B-Testing
She-ge Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added final_tsc_output.txt
View file
Open in desktop
Binary file not shown.
740 changes: 301 additions & 439 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"react-hot-toast": "^2.6.0",
"react-markdown": "^10.1.0",
"react-redux": "^9.2.0",
"recharts": "^3.8.1",
"remark-gfm": "^4.0.1",
"socket.io-client": "^4.8.3",
"tailwind-merge": "^3.3.1",
Expand Down
296 changes: 288 additions & 8 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

117 changes: 53 additions & 64 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,8 +376,30 @@ export default function DashboardPage() {
<div className="flex items-center justify-between">
<h3 className="text-lg font-medium text-white">
Recent Chat Messages
{/* Stellar Network */}
<div className="mb-8">
</h3>
</div>
</div>
) : (
<div className="text-center py-12">
<h3 className="text-lg font-medium text-white mb-2">
No recent activity
</h3>
<p className="text-gray-300 mb-4">
Your recent interactions will appear here.
</p>
<Button
onClick={() => router.push('/chat')}
>
Start with AI Agent
</Button>
</div>
)}
</Card>
</div>

{/* Stellar Network */}
<div className="mb-8">

<h2 className="text-2xl font-bold text-white mb-6">
Stellar Network
</h2>
Expand Down Expand Up @@ -473,71 +495,38 @@ export default function DashboardPage() {
</div>
</div>

{/* Quick Actions */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-white mb-6">
Quick Actions
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{quickActions.map((action, index) => (
<Card key={index} className="cursor-pointer hover:shadow-lg transition-shadow">
<div className="flex items-start space-x-4">
<div className="flex-1">
<h3 className="text-lg font-semibold text-white mb-1">
{action.title}
</h3>
<Button
variant="ghost"
size="sm"
onClick={() => router.push('/chat')}
>
View All
</Button>
</div>
<div className="space-y-3">
{messages.slice(-5).reverse().map((message, index) => (
<div key={index} className="flex items-start space-x-2 p-2 bg-gray-800/50 rounded-lg">
<div className={`w-2 h-2 rounded-full mt-2 ${message.type === 'user' ? 'bg-blue-500' : 'bg-green-500'
}`} />
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-2 mb-1">
<span className="text-sm font-medium text-white">
{message.type === 'user' ? 'You' : 'AI Agent'}
</span>
</div>
<p className="text-sm text-gray-300 truncate">
{(() => {
const content = typeof message.content === 'string'
? message.content
: (message.content as any)?.message || 'Structured data message';
return content.length > 100
? content.substring(0, 100) + '...'
: content;
})()}
</p>
</div>
</div>
))}
{/* Quick Actions */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-white mb-6">
Quick Actions
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{quickActions.map((action, index) => (
<Card key={index} className="cursor-pointer hover:shadow-lg transition-shadow">
<div className="flex items-start space-x-4">
<div className="flex-1">
<h3 className="text-lg font-semibold text-white mb-1">
{action.title}
</h3>
<p className="text-gray-300 mb-4">
{action.description}
</p>
<Button
variant="ghost"
size="sm"
onClick={action.action}
>
Get Started
<ExternalLink className="h-4 w-4 ml-1" />
</Button>
</div>
</div>
</div>
) : (
<div className="text-center py-12">
<h3 className="text-lg font-medium text-white mb-2">
No recent activity
</h3>
<p className="text-gray-300 mb-4">
Your recent transactions and interactions will appear here.
</p>
<Button
onClick={() => router.push('/chat')}
>
Start with AI Agent
</Button>
</div>
)}
</Card>
</Card>
))}
</div>
</div>


{/* Transaction History */}
<div className="mb-8">
<h2 className="text-2xl font-bold text-white mb-6">
Expand Down
5 changes: 1 addition & 4 deletions src/app/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,11 @@
import React, { useEffect } from 'react';
import { useAppDispatch, useAppSelector } from '@/store';
import { fetchProfile } from '@/store/slices/authSlice';
import React, { useState } from 'react';
import axios from 'axios';
import { useAppSelector } from '@/store';
import { ChatLayout } from '@/components/layout/ChatLayout';
import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { Input } from '@/components/ui/Input';
import apiService from '@/services/api';


export default function SettingsPage() {
const dispatch = useAppDispatch();
Expand Down
201 changes: 201 additions & 0 deletions src/components/Analytics/ABTestChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
'use client';

import React, { useState } from 'react';
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
Cell,
Legend
} from 'recharts';
import { PromptComparisonData } from '@/types';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Activity, CircleDollarSign, Target, BarChart3 } from 'lucide-react';

interface ABTestChartProps {
prompt1: PromptComparisonData;
prompt2: PromptComparisonData;
isLoading?: boolean;
}

type MetricType = 'latency' | 'cost' | 'accuracy';

const ABTestChart: React.FC<ABTestChartProps> = ({ prompt1, prompt2, isLoading }) => {
const [selectedMetric, setSelectedMetric] = useState<MetricType>('latency');

if (isLoading) {
return (
<Card className="w-full h-[400px] flex flex-col items-center justify-center space-y-4 bg-gray-900 shadow-xl border-gray-800">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
<p className="text-gray-400 font-medium">Fetching Comparison Data...</p>
</Card>
);
}

const metricsInfo = {
latency: {
label: 'Latency (ms)',
icon: <Activity className="w-4 h-4" />,
description: 'Response time in milliseconds. Lower is better.',
format: (val: number) => `${val.toLocaleString()} ms`,
color1: '#3B82F6', // Blue-500
color2: '#06B6D4', // Cyan-500
},
cost: {
label: 'Cost (USD)',
icon: <CircleDollarSign className="w-4 h-4" />,
description: 'Estimated cost per execution. Lower is better.',
format: (val: number) => `$${val.toFixed(4)}`,
color1: '#F59E0B', // Amber-500
color2: '#F97316', // Orange-500
},
accuracy: {
label: 'Accuracy (%)',
icon: <Target className="w-4 h-4" />,
description: 'Success rate or quality score. Higher is better.',
format: (val: number) => `${(val * 100).toFixed(1)}%`,
color1: '#10B981', // Emerald-500
color2: '#84CC16', // Lime-500
}
};

const chartData = [
{
name: prompt1.name,
value: prompt1.metrics[selectedMetric],
fill: metricsInfo[selectedMetric].color1,
},
{
name: prompt2.name,
value: prompt2.metrics[selectedMetric],
fill: metricsInfo[selectedMetric].color2,
}
];

const currentInfo = metricsInfo[selectedMetric];

return (
<Card className="w-full bg-gray-900 border-gray-800 shadow-2xl p-6 overflow-hidden">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
<div>
<div className="flex items-center space-x-2 mb-1">
<BarChart3 className="w-5 h-5 text-blue-400" />
<h3 className="text-xl font-bold text-white tracking-tight">Performance Comparison</h3>
</div>
<p className="text-sm text-gray-400 max-w-md">{currentInfo.description}</p>
</div>

<div className="flex p-1.5 bg-gray-800/80 rounded-xl border border-gray-700 backdrop-blur-sm self-start">
{(Object.keys(metricsInfo) as MetricType[]).map((metric) => (
<Button
key={metric}
variant="ghost"
size="sm"
onClick={() => setSelectedMetric(metric)}
className={`px-4 py-2 transition-all duration-300 rounded-lg flex items-center space-x-2 group ${
selectedMetric === metric
? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
: 'text-gray-400 hover:text-white hover:bg-gray-700/50'
}`}
>
{metricsInfo[metric].icon}
<span className="capitalize font-semibold">{metric}</span>
</Button>
))}
</div>
</div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
{/* Metric Summary Cards */}
<div className="lg:col-span-1 space-y-4">
<div className="p-5 bg-gray-800/30 border border-gray-700/50 rounded-2xl hover:border-gray-600 transition-all duration-300 group">
<div className="flex items-center justify-between mb-3">
<span className="text-xs font-bold text-gray-500 uppercase tracking-widest">{prompt1.name}</span>
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: currentInfo.color1 }} />
</div>
<p className="text-3xl font-black text-white group-hover:text-blue-400 transition-colors">
{currentInfo.format(prompt1.metrics[selectedMetric])}
</p>
</div>

<div className="p-5 bg-gray-800/30 border border-gray-700/50 rounded-2xl hover:border-gray-600 transition-all duration-300 group">
<div className="flex items-center justify-between mb-3">
<span className="text-xs font-bold text-gray-500 uppercase tracking-widest">{prompt2.name}</span>
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: currentInfo.color2 }} />
</div>
<p className="text-3xl font-black text-white group-hover:text-cyan-400 transition-colors">
{currentInfo.format(prompt2.metrics[selectedMetric])}
</p>
</div>
</div>

{/* Chart Visualization */}
<div className="lg:col-span-2 h-[320px] bg-gray-950/50 rounded-3xl p-6 border border-gray-800/80 relative group">
<div className="absolute top-4 right-6 flex items-center space-x-1.5 px-3 py-1 bg-gray-900/80 rounded-full border border-gray-800 text-[10px] font-bold text-gray-500 tracking-tighter uppercase opacity-0 group-hover:opacity-100 transition-opacity">
<Activity className="w-3 h-3" />
<span>Interactive Data</span>
</div>

<ResponsiveContainer width="100%" height="100%">
<BarChart
data={chartData}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#1f2937" opacity={0.4} />
<XAxis
dataKey="name"
stroke="#4b5563"
fontSize={11}
className="font-bold tracking-tighter"
tickLine={false}
axisLine={false}
/>
<YAxis
stroke="#4b5563"
fontSize={10}
className="font-medium"
tickLine={false}
axisLine={false}
tickFormatter={(val) => selectedMetric === 'cost' ? `$${val}` : val}
/>
<Tooltip
cursor={{ fill: '#374151', opacity: 0.1 }}
contentStyle={{
backgroundColor: '#030712',
border: '1px solid #1f2937',
borderRadius: '16px',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)'
}}
itemStyle={{ color: '#fff', fontSize: '12px', fontWeight: '800' }}
labelStyle={{ color: '#9ca3af', fontSize: '10px', textTransform: 'uppercase', marginBottom: '4px' }}
formatter={(val: number) => [currentInfo.format(val), currentInfo.label]}
/>
<Bar
dataKey="value"
radius={[12, 12, 0, 0]}
barSize={70}
animationDuration={1500}
animationEasing="ease-out"
>
{chartData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.fill}
className="hover:opacity-80 transition-opacity cursor-pointer"
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</Card>
);
};

export default ABTestChart;
Loading
Loading