feat(ui): refactor style ui & add Models page with provider settings (#379)
This commit is contained in:
DigHuang
committed by
GitHub
Unverified
GitHub
parent
3d664c017a
commit
905ce02b0b
@@ -4,12 +4,8 @@
|
||||
*/
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import {
|
||||
Plus,
|
||||
Radio,
|
||||
RefreshCw,
|
||||
Trash2,
|
||||
Power,
|
||||
PowerOff,
|
||||
QrCode,
|
||||
Loader2,
|
||||
X,
|
||||
@@ -31,11 +27,11 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import { useChannelsStore } from '@/stores/channels';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { StatusBadge, type Status } from '@/components/common/StatusBadge';
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||||
import { hostApiFetch } from '@/lib/host-api';
|
||||
import { subscribeHostEvent } from '@/lib/host-events';
|
||||
import { invokeIpc } from '@/lib/api-client';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
CHANNEL_ICONS,
|
||||
CHANNEL_NAMES,
|
||||
@@ -49,6 +45,12 @@ import {
|
||||
import { toast } from 'sonner';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import telegramIcon from '@/assets/channels/telegram.svg';
|
||||
import discordIcon from '@/assets/channels/discord.svg';
|
||||
import whatsappIcon from '@/assets/channels/whatsapp.svg';
|
||||
import dingtalkIcon from '@/assets/channels/dingtalk.svg';
|
||||
import feishuIcon from '@/assets/channels/feishu.svg';
|
||||
|
||||
export function Channels() {
|
||||
const { t } = useTranslation('channels');
|
||||
const { channels, loading, error, fetchChannels, deleteChannel } = useChannelsStore();
|
||||
@@ -99,171 +101,131 @@ export function Channels() {
|
||||
// Get channel types to display
|
||||
const displayedChannelTypes = getPrimaryChannels();
|
||||
|
||||
// Connected/disconnected channel counts
|
||||
const connectedCount = channels.filter((c) => c.status === 'connected').length;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="flex flex-col -m-6 dark:bg-background min-h-[calc(100vh-2.5rem)] items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{t('title')}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
|
||||
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
|
||||
<div>
|
||||
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
{t('title', 'Messaging Channels')}
|
||||
</h1>
|
||||
<p className="text-[17px] text-foreground/80 font-medium">
|
||||
{t('subtitle', 'Manage your messaging channels and connections')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3 md:mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchChannels}
|
||||
className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5 mr-2" />
|
||||
{t('refresh')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={fetchChannels}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
{t('refresh')}
|
||||
</Button>
|
||||
<Button onClick={() => setShowAddDialog(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t('addChannel')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-primary/10 p-3">
|
||||
<Radio className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{channels.length}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.total')}</p>
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
|
||||
|
||||
{/* Gateway Warning */}
|
||||
{gatewayStatus.state !== 'running' && (
|
||||
<div className="mb-8 p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
|
||||
<span className="text-yellow-700 dark:text-yellow-400 text-sm font-medium">
|
||||
{t('gatewayWarning')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mb-8 p-4 rounded-xl border border-destructive/50 bg-destructive/10 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-destructive" />
|
||||
<span className="text-destructive text-sm font-medium">
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Available Channels (Configured) */}
|
||||
{channels.length > 0 && (
|
||||
<div className="mb-12">
|
||||
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
Available Channels
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
{channels.map((channel) => (
|
||||
<ChannelCard
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
onDelete={() => setChannelToDelete({ id: channel.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
|
||||
<Power className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{connectedCount}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.connected')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-slate-100 p-3 dark:bg-slate-800">
|
||||
<PowerOff className="h-6 w-6 text-slate-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{channels.length - connectedCount}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.disconnected')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Gateway Warning */}
|
||||
{gatewayStatus.state !== 'running' && (
|
||||
<Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10">
|
||||
<CardContent className="py-4 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-500" />
|
||||
<span className="text-yellow-700 dark:text-yellow-400">
|
||||
{t('gatewayWarning')}
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<Card className="border-destructive">
|
||||
<CardContent className="py-4 text-destructive">
|
||||
{error}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Configured Channels */}
|
||||
{channels.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('configured')}</CardTitle>
|
||||
<CardDescription>{t('configuredDesc')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{channels.map((channel) => (
|
||||
<ChannelCard
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
onDelete={() => setChannelToDelete({ id: channel.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Available Channels */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>{t('available')}</CardTitle>
|
||||
<CardDescription>
|
||||
{t('availableDesc')}
|
||||
</CardDescription>
|
||||
{/* Supported Channels (Not yet configured) */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
Supported Channels
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
{displayedChannelTypes.map((type) => {
|
||||
const meta = CHANNEL_META[type];
|
||||
const isConfigured = channels.some(c => c.type === type) || configuredTypes.includes(type);
|
||||
|
||||
// Hide already configured channels from "Supported Channels" section
|
||||
if (isConfigured) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => {
|
||||
setSelectedChannelType(type);
|
||||
setShowAddDialog(true);
|
||||
}}
|
||||
className={cn(
|
||||
"group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
|
||||
<ChannelLogo type={type} />
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-[16px] font-semibold text-foreground truncate">{meta.name}</h3>
|
||||
{meta.isPlugin && (
|
||||
<Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
|
||||
{t('pluginBadge', 'Plugin')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
|
||||
{t(meta.description.replace('channels:', ''))}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
{displayedChannelTypes.map((type) => {
|
||||
const meta = CHANNEL_META[type];
|
||||
const isConfigured = configuredTypes.includes(type);
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
className={`p-4 rounded-lg border hover:bg-accent transition-colors text-left relative ${isConfigured ? 'border-green-500/50 bg-green-500/5' : ''}`}
|
||||
onClick={() => {
|
||||
setSelectedChannelType(type);
|
||||
setShowAddDialog(true);
|
||||
}}
|
||||
>
|
||||
<span className="text-3xl">{meta.icon}</span>
|
||||
<p className="font-medium mt-2">{meta.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
|
||||
{meta.description}
|
||||
</p>
|
||||
{isConfigured && (
|
||||
<Badge className="absolute top-2 right-2 text-xs bg-green-600 hover:bg-green-600">
|
||||
{t('configuredBadge')}
|
||||
</Badge>
|
||||
)}
|
||||
{!isConfigured && meta.isPlugin && (
|
||||
<Badge variant="secondary" className="absolute top-2 right-2 text-xs">
|
||||
{t('pluginBadge')}
|
||||
</Badge>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add Channel Dialog */}
|
||||
{showAddDialog && (
|
||||
@@ -293,6 +255,9 @@ export function Channels() {
|
||||
onConfirm={async () => {
|
||||
if (channelToDelete) {
|
||||
await deleteChannel(channelToDelete.id);
|
||||
// Immediately update configuredTypes state so it disappears from available and appears in supported
|
||||
const channelType = channelToDelete.id.split('-')[0];
|
||||
setConfiguredTypes((prev) => prev.filter((type) => type !== channelType));
|
||||
setChannelToDelete(null);
|
||||
}
|
||||
}}
|
||||
@@ -302,6 +267,24 @@ export function Channels() {
|
||||
);
|
||||
}
|
||||
|
||||
// ==================== Channel Logo Component ====================
|
||||
function ChannelLogo({ type }: { type: ChannelType }) {
|
||||
switch (type) {
|
||||
case 'telegram':
|
||||
return <img src={telegramIcon} alt="Telegram" className="w-[22px] h-[22px] dark:invert" />;
|
||||
case 'discord':
|
||||
return <img src={discordIcon} alt="Discord" className="w-[22px] h-[22px] dark:invert" />;
|
||||
case 'whatsapp':
|
||||
return <img src={whatsappIcon} alt="WhatsApp" className="w-[22px] h-[22px] dark:invert" />;
|
||||
case 'dingtalk':
|
||||
return <img src={dingtalkIcon} alt="DingTalk" className="w-[22px] h-[22px] dark:invert" />;
|
||||
case 'feishu':
|
||||
return <img src={feishuIcon} alt="Feishu" className="w-[22px] h-[22px] dark:invert" />;
|
||||
default:
|
||||
return <span className="text-[22px]">{CHANNEL_ICONS[type] || '💬'}</span>;
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== Channel Card Component ====================
|
||||
|
||||
interface ChannelCardProps {
|
||||
@@ -310,40 +293,59 @@ interface ChannelCardProps {
|
||||
}
|
||||
|
||||
function ChannelCard({ channel, onDelete }: ChannelCardProps) {
|
||||
const { t } = useTranslation('channels');
|
||||
const meta = CHANNEL_META[channel.type];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">
|
||||
{CHANNEL_ICONS[channel.type]}
|
||||
</span>
|
||||
<div>
|
||||
<CardTitle className="text-base">{channel.name}</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
{CHANNEL_NAMES[channel.type]}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5">
|
||||
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
|
||||
<ChannelLogo type={channel.type} />
|
||||
</div>
|
||||
<div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<h3 className="text-[16px] font-semibold text-foreground truncate">{channel.name}</h3>
|
||||
{meta?.isPlugin && (
|
||||
<Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
|
||||
{t('pluginBadge', 'Plugin')}
|
||||
</Badge>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full shrink-0",
|
||||
channel.status === 'connected' ? "bg-green-500" :
|
||||
channel.status === 'connecting' ? "bg-yellow-500 animate-pulse" :
|
||||
channel.status === 'error' ? "bg-destructive" :
|
||||
"bg-muted-foreground"
|
||||
)}
|
||||
title={channel.status}
|
||||
/>
|
||||
</div>
|
||||
<StatusBadge status={channel.status as Status} />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
{channel.error && (
|
||||
<p className="text-xs text-destructive mb-3">{channel.error}</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={onDelete}
|
||||
size="icon"
|
||||
className="opacity-0 group-hover:opacity-100 h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all shrink-0 -mr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{channel.error ? (
|
||||
<p className="text-[13.5px] text-destructive line-clamp-2 leading-[1.5]">
|
||||
{channel.error}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
|
||||
{meta ? t(meta.description.replace('channels:', '')) : CHANNEL_NAMES[channel.type]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -638,7 +640,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
|
||||
const openDocs = () => {
|
||||
if (meta?.docsUrl) {
|
||||
const url = t(meta.docsUrl);
|
||||
const url = t(meta.docsUrl.replace('channels:', ''));
|
||||
try {
|
||||
if (window.electron?.openExternal) {
|
||||
window.electron.openExternal(url);
|
||||
@@ -674,27 +676,27 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
||||
<CardHeader className="flex flex-row items-start justify-between">
|
||||
<Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
|
||||
<CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
|
||||
<div>
|
||||
<CardTitle>
|
||||
<CardTitle className="text-2xl font-serif font-normal">
|
||||
{selectedType
|
||||
? isExistingConfig
|
||||
? t('dialog.updateTitle', { name: CHANNEL_NAMES[selectedType] })
|
||||
: t('dialog.configureTitle', { name: CHANNEL_NAMES[selectedType] })
|
||||
: t('dialog.addTitle')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
<CardDescription className="text-[15px] mt-1 text-foreground/70">
|
||||
{selectedType && isExistingConfig
|
||||
? t('dialog.existingDesc')
|
||||
: meta ? t(meta.description) : t('dialog.selectDesc')}
|
||||
: meta ? t(meta.description.replace('channels:', '')) : t('dialog.selectDesc')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="space-y-6 pt-4 overflow-y-auto flex-1 p-6">
|
||||
{!selectedType ? (
|
||||
// Channel type selection
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
@@ -704,11 +706,13 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => onSelectType(type)}
|
||||
className="p-4 rounded-lg border hover:bg-accent transition-colors text-left"
|
||||
className="p-4 rounded-2xl border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-all text-left group"
|
||||
>
|
||||
<span className="text-3xl">{channelMeta.icon}</span>
|
||||
<p className="font-medium mt-2">{channelMeta.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3 group-hover:scale-105 transition-transform">
|
||||
<ChannelLogo type={type} />
|
||||
</div>
|
||||
<p className="font-semibold text-[15px]">{channelMeta.name}</p>
|
||||
<p className="text-[13px] text-muted-foreground mt-0.5">
|
||||
{channelMeta.connectionType === 'qr' ? t('dialog.qrCode') : t('dialog.token')}
|
||||
</p>
|
||||
</button>
|
||||
@@ -717,75 +721,76 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
</div>
|
||||
) : qrCode ? (
|
||||
// QR Code display
|
||||
<div className="text-center space-y-4">
|
||||
<div className="bg-white p-4 rounded-lg inline-block shadow-sm border">
|
||||
<div className="text-center space-y-5 py-4">
|
||||
<div className="bg-white p-5 rounded-3xl inline-block shadow-sm border border-black/5">
|
||||
{qrCode.startsWith('data:image') ? (
|
||||
<img src={qrCode} alt="Scan QR Code" className="w-64 h-64 object-contain" />
|
||||
) : (
|
||||
<div className="w-64 h-64 bg-gray-100 flex items-center justify-center">
|
||||
<QrCode className="h-32 w-32 text-gray-400" />
|
||||
<div className="w-64 h-64 bg-gray-50 rounded-2xl flex items-center justify-center">
|
||||
<QrCode className="h-24 w-24 text-gray-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-[14px] text-muted-foreground font-medium">
|
||||
{t('dialog.scanQR', { name: meta?.name })}
|
||||
</p>
|
||||
<div className="flex justify-center gap-2">
|
||||
<div className="flex justify-center gap-2 pt-2">
|
||||
<Button variant="outline" onClick={() => {
|
||||
setQrCode(null);
|
||||
handleConnect(); // Retry
|
||||
}}>
|
||||
}} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
|
||||
{t('dialog.refreshCode')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : loadingConfig ? (
|
||||
// Loading saved config
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-sm text-muted-foreground">{t('dialog.loadingConfig')}</span>
|
||||
<div className="flex flex-col items-center justify-center py-12 space-y-4">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground/50" />
|
||||
<span className="text-[14px] font-medium text-muted-foreground">{t('dialog.loadingConfig')}</span>
|
||||
</div>
|
||||
) : (
|
||||
// Connection form
|
||||
<div className="space-y-4">
|
||||
{/* Existing config hint */}
|
||||
{isExistingConfig && (
|
||||
<div className="bg-blue-500/10 text-blue-600 dark:text-blue-400 p-3 rounded-lg text-sm flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 shrink-0" />
|
||||
<div className="bg-[#eeece3] dark:bg-[#151514] text-foreground/80 font-medium p-4 rounded-2xl text-[13.5px] flex items-center gap-2.5 shadow-sm border border-black/5 dark:border-white/5">
|
||||
<CheckCircle className="h-4 w-4 shrink-0 text-blue-500" />
|
||||
<span>{t('dialog.existingHint')}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="bg-muted p-4 rounded-lg space-y-3">
|
||||
<div className="bg-[#eeece3] dark:bg-[#151514] p-5 rounded-2xl space-y-3 shadow-sm border border-black/5 dark:border-white/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium text-sm">{t('dialog.howToConnect')}</p>
|
||||
<p className="font-semibold text-[14px] text-foreground/80">{t('dialog.howToConnect')}</p>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto text-sm"
|
||||
className="p-0 h-auto text-[13px] text-muted-foreground hover:text-foreground"
|
||||
onClick={openDocs}
|
||||
>
|
||||
<BookOpen className="h-3 w-3 mr-1" />
|
||||
<BookOpen className="h-3.5 w-3.5 mr-1.5" />
|
||||
{t('dialog.viewDocs')}
|
||||
<ExternalLink className="h-3 w-3 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
<ol className="list-decimal list-inside text-sm text-muted-foreground space-y-1">
|
||||
<ol className="list-decimal list-inside text-[13.5px] text-muted-foreground space-y-1.5 leading-relaxed">
|
||||
{meta?.instructions.map((instruction, i) => (
|
||||
<li key={i}>{t(instruction)}</li>
|
||||
<li key={i}>{t(instruction.replace('channels:', ''))}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Channel name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{t('dialog.channelName')}</Label>
|
||||
<div className="space-y-2.5">
|
||||
<Label htmlFor="name" className="text-[14px] text-foreground/80 font-bold">{t('dialog.channelName')}</Label>
|
||||
<Input
|
||||
ref={firstInputRef}
|
||||
id="name"
|
||||
placeholder={t('dialog.channelNamePlaceholder', { name: meta?.name })}
|
||||
value={channelName}
|
||||
onChange={(e) => setChannelName(e.target.value)}
|
||||
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -803,35 +808,35 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
|
||||
{/* Validation Results */}
|
||||
{validationResult && (
|
||||
<div className={`p-4 rounded-lg text-sm ${validationResult.valid ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-destructive/10 text-destructive'
|
||||
<div className={`p-4 rounded-2xl text-[13.5px] shadow-sm border border-black/5 dark:border-white/5 ${validationResult.valid ? 'bg-[#eeece3] dark:bg-[#151514] text-foreground/80' : 'bg-destructive/10 text-destructive'
|
||||
}`}>
|
||||
<div className="flex items-start gap-2">
|
||||
<div className="flex items-start gap-2.5">
|
||||
{validationResult.valid ? (
|
||||
<CheckCircle className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
<CheckCircle className="h-4 w-4 mt-0.5 shrink-0 text-green-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<h4 className="font-medium mb-1">
|
||||
<h4 className="font-bold mb-1">
|
||||
{validationResult.valid ? t('dialog.credentialsVerified') : t('dialog.validationFailed')}
|
||||
</h4>
|
||||
{validationResult.errors.length > 0 && (
|
||||
<ul className="list-disc list-inside space-y-0.5">
|
||||
<ul className="list-disc list-inside space-y-0.5 font-medium">
|
||||
{validationResult.errors.map((err, i) => (
|
||||
<li key={i}>{err}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{validationResult.valid && validationResult.warnings.length > 0 && (
|
||||
<div className="mt-1 text-green-600 dark:text-green-400 space-y-0.5">
|
||||
<div className="mt-1 text-green-600 dark:text-green-500 space-y-0.5 font-medium">
|
||||
{validationResult.warnings.map((info, i) => (
|
||||
<p key={i} className="text-xs">{info}</p>
|
||||
<p key={i} className="text-[13px]">{info}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!validationResult.valid && validationResult.warnings.length > 0 && (
|
||||
<div className="mt-2 text-yellow-600 dark:text-yellow-500">
|
||||
<p className="font-medium text-xs uppercase mb-1">{t('dialog.warnings')}</p>
|
||||
<div className="mt-2 text-yellow-600 dark:text-yellow-500 font-medium">
|
||||
<p className="font-bold text-[12px] uppercase mb-1">{t('dialog.warnings')}</p>
|
||||
<ul className="list-disc list-inside space-y-0.5">
|
||||
{validationResult.warnings.map((warn, i) => (
|
||||
<li key={i}>{warn}</li>
|
||||
@@ -844,19 +849,17 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
<Separator className="bg-black/10 dark:bg-white/10" />
|
||||
|
||||
<div className="flex justify-between">
|
||||
<Button variant="outline" onClick={() => onSelectType(null)}>
|
||||
{t('dialog.back')}
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex justify-end pt-4">
|
||||
<div className="flex gap-3">
|
||||
{/* Validation Button - Only for token-based channels for now */}
|
||||
{meta?.connectionType === 'token' && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleValidate}
|
||||
disabled={validating}
|
||||
className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-foreground shadow-sm"
|
||||
>
|
||||
{validating ? (
|
||||
<>
|
||||
@@ -874,6 +877,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
|
||||
<Button
|
||||
onClick={handleConnect}
|
||||
disabled={connecting || !isFormValid()}
|
||||
className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all"
|
||||
>
|
||||
{connecting ? (
|
||||
<>
|
||||
@@ -914,19 +918,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
|
||||
const isPassword = field.type === 'password';
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.key}>
|
||||
{t(field.label)}
|
||||
<div className="space-y-2.5">
|
||||
<Label htmlFor={field.key} className="text-[14px] text-foreground/80 font-bold">
|
||||
{t(field.label.replace('channels:', ''))}
|
||||
{field.required && <span className="text-destructive ml-1">*</span>}
|
||||
</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id={field.key}
|
||||
type={isPassword && !showSecret ? 'password' : 'text'}
|
||||
placeholder={field.placeholder ? t(field.placeholder) : undefined}
|
||||
placeholder={field.placeholder ? t(field.placeholder.replace('channels:', '')) : undefined}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="font-mono text-sm"
|
||||
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
|
||||
/>
|
||||
{isPassword && (
|
||||
<Button
|
||||
@@ -934,18 +938,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={onToggleSecret}
|
||||
className="h-[44px] w-[44px] rounded-xl bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 text-muted-foreground hover:text-foreground shrink-0 shadow-sm"
|
||||
>
|
||||
{showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{field.description && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t(field.description)}
|
||||
<p className="text-[13px] text-muted-foreground leading-relaxed">
|
||||
{t(field.description.replace('channels:', ''))}
|
||||
</p>
|
||||
)}
|
||||
{field.envVar && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p className="text-[12px] text-muted-foreground/70 font-mono">
|
||||
{t('dialog.envVar', { var: field.envVar })}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@@ -7,11 +7,12 @@
|
||||
* are sent with the message (no base64 over WebSocket).
|
||||
*/
|
||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { Send, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
|
||||
import { SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { hostApiFetch } from '@/lib/host-api';
|
||||
import { invokeIpc } from '@/lib/api-client';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ── Types ────────────────────────────────────────────────────────
|
||||
|
||||
@@ -31,6 +32,7 @@ interface ChatInputProps {
|
||||
onStop?: () => void;
|
||||
disabled?: boolean;
|
||||
sending?: boolean;
|
||||
isEmpty?: boolean;
|
||||
}
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────────────
|
||||
@@ -77,7 +79,7 @@ function readFileAsBase64(file: globalThis.File): Promise<string> {
|
||||
|
||||
// ── Component ────────────────────────────────────────────────────
|
||||
|
||||
export function ChatInput({ onSend, onStop, disabled = false, sending = false }: ChatInputProps) {
|
||||
export function ChatInput({ onSend, onStop, disabled = false, sending = false, isEmpty = false }: ChatInputProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const [attachments, setAttachments] = useState<FileAttachment[]>([]);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
@@ -326,15 +328,18 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-background p-4"
|
||||
className={cn(
|
||||
"p-4 pb-6 w-full mx-auto transition-all duration-300",
|
||||
isEmpty ? "max-w-3xl" : "max-w-4xl"
|
||||
)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="w-full">
|
||||
{/* Attachment Previews */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex gap-2 mb-2 flex-wrap">
|
||||
<div className="flex gap-2 mb-3 flex-wrap">
|
||||
{attachments.map((att) => (
|
||||
<AttachmentPreview
|
||||
key={att.id}
|
||||
@@ -346,13 +351,13 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
)}
|
||||
|
||||
{/* Input Row */}
|
||||
<div className={`flex items-end gap-2 ${dragOver ? 'ring-2 ring-primary rounded-lg' : ''}`}>
|
||||
<div className={`flex items-end gap-1.5 bg-white dark:bg-accent/50 rounded-[28px] shadow-sm border border-black/5 dark:border-white/10 p-1.5 transition-shadow ${dragOver ? 'ring-2 ring-primary' : 'focus-within:ring-1 focus-within:ring-black/5 dark:focus-within:ring-white/10'}`}>
|
||||
|
||||
{/* Attach Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 h-[44px] w-[44px]"
|
||||
className="shrink-0 h-10 w-10 rounded-full text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10 hover:text-foreground transition-colors"
|
||||
onClick={pickFiles}
|
||||
disabled={disabled || sending}
|
||||
title="Attach files"
|
||||
@@ -374,9 +379,9 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
isComposingRef.current = false;
|
||||
}}
|
||||
onPaste={handlePaste}
|
||||
placeholder={disabled ? 'Gateway not connected...' : 'Message (Enter to send, Shift+Enter for new line)'}
|
||||
placeholder={disabled ? 'Gateway not connected...' : ''}
|
||||
disabled={disabled}
|
||||
className="min-h-[44px] max-h-[200px] resize-none pr-4"
|
||||
className="min-h-[40px] max-h-[200px] resize-none border-0 focus-visible:ring-0 shadow-none bg-transparent py-2.5 px-2 text-[15px] placeholder:text-muted-foreground/60 leading-relaxed"
|
||||
rows={1}
|
||||
/>
|
||||
</div>
|
||||
@@ -386,24 +391,28 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
onClick={sending ? handleStop : handleSend}
|
||||
disabled={sending ? !canStop : !canSend}
|
||||
size="icon"
|
||||
className="shrink-0 h-[44px] w-[44px]"
|
||||
variant={sending ? 'destructive' : 'default'}
|
||||
className={`shrink-0 h-10 w-10 rounded-full transition-colors ${
|
||||
(sending || canSend)
|
||||
? 'bg-black/5 dark:bg-white/10 text-foreground hover:bg-black/10 dark:hover:bg-white/20'
|
||||
: 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
|
||||
}`}
|
||||
variant="ghost"
|
||||
title={sending ? 'Stop' : 'Send'}
|
||||
>
|
||||
{sending ? (
|
||||
<Square className="h-4 w-4" />
|
||||
<Square className="h-4 w-4" fill="currentColor" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
<SendHorizontal className="h-[18px] w-[18px]" strokeWidth={2} />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-1 flex items-center justify-between gap-2 text-xs text-muted-foreground">
|
||||
<div className="mt-2.5 flex items-center justify-between gap-2 text-[11px] text-muted-foreground/60 px-4">
|
||||
<span>Tip: switch sessions from the sidebar to keep context clean.</span>
|
||||
{hasFailedAttachments && (
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="h-auto p-0 text-xs"
|
||||
className="h-auto p-0 text-[11px]"
|
||||
onClick={() => {
|
||||
setAttachments((prev) => prev.filter((att) => att.status !== 'error'));
|
||||
void pickFiles();
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
* are in the toolbar; messages render with markdown + streaming.
|
||||
*/
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { AlertCircle, Bot, Loader2, MessageSquare, Sparkles } from 'lucide-react';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { AlertCircle, Loader2, Sparkles } from 'lucide-react';
|
||||
import { useChatStore, type RawMessage } from '@/stores/chat';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
|
||||
@@ -15,6 +14,7 @@ import { ChatInput } from './ChatInput';
|
||||
import { ChatToolbar } from './ChatToolbar';
|
||||
import { extractImages, extractText, extractThinking, extractToolUse } from './message-utils';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export function Chat() {
|
||||
const { t } = useTranslation('chat');
|
||||
@@ -105,8 +105,10 @@ export function Chat() {
|
||||
const shouldRenderStreaming = sending && (hasStreamText || hasStreamThinking || hasStreamTools || hasStreamImages || hasStreamToolStatus);
|
||||
const hasAnyStreamContent = hasStreamText || hasStreamThinking || hasStreamTools || hasStreamImages || hasStreamToolStatus;
|
||||
|
||||
const isEmpty = messages.length === 0 && !loading && !sending;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col -m-6" style={{ height: 'calc(100vh - 2.5rem)' }}>
|
||||
<div className={cn("flex flex-col -m-6 transition-colors duration-500 dark:bg-background")} style={{ height: 'calc(100vh - 2.5rem)' }}>
|
||||
{/* Toolbar */}
|
||||
<div className="flex shrink-0 items-center justify-end px-4 py-2">
|
||||
<ChatToolbar />
|
||||
@@ -116,10 +118,10 @@ export function Chat() {
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
<div className="max-w-4xl mx-auto space-y-4">
|
||||
{loading && !sending ? (
|
||||
<div className="flex h-full items-center justify-center py-20">
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
) : messages.length === 0 && !sending ? (
|
||||
) : isEmpty ? (
|
||||
<WelcomeScreen />
|
||||
) : (
|
||||
<>
|
||||
@@ -193,6 +195,7 @@ export function Chat() {
|
||||
onStop={abortRun}
|
||||
disabled={!isGatewayRunning}
|
||||
sending={sending}
|
||||
isEmpty={isEmpty}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -201,29 +204,23 @@ export function Chat() {
|
||||
// ── Welcome Screen ──────────────────────────────────────────────
|
||||
|
||||
function WelcomeScreen() {
|
||||
const { t } = useTranslation('chat');
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center py-20">
|
||||
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-6">
|
||||
<Bot className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold mb-2">{t('welcome.title')}</h2>
|
||||
<p className="text-muted-foreground mb-8 max-w-md">
|
||||
{t('welcome.subtitle')}
|
||||
<div className="flex flex-col items-center justify-center text-center h-[60vh]">
|
||||
<h1 className="text-6xl md:text-7xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
Welcome
|
||||
</h1>
|
||||
<p className="text-[17px] text-foreground/80 mb-8 font-medium">
|
||||
Your AI assistant is ready. Start a conversation below.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 max-w-lg w-full">
|
||||
{[
|
||||
{ icon: MessageSquare, title: t('welcome.askQuestions'), desc: t('welcome.askQuestionsDesc') },
|
||||
{ icon: Sparkles, title: t('welcome.creativeTasks'), desc: t('welcome.creativeTasksDesc') },
|
||||
].map((item, i) => (
|
||||
<Card key={i} className="text-left">
|
||||
<CardContent className="p-4">
|
||||
<item.icon className="h-6 w-6 text-primary mb-2" />
|
||||
<h3 className="font-medium">{item.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{item.desc}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex flex-wrap items-center justify-center gap-2.5 max-w-lg w-full">
|
||||
{['Ask Questions', 'Creative Tasks', 'Brainstorming'].map((label, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="px-4 py-1.5 rounded-full border border-black/10 dark:border-white/10 text-[13px] font-medium text-foreground/70 hover:bg-black/5 dark:hover:bg-white/5 transition-colors bg-black/[0.02]"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,7 @@ import {
|
||||
Plus,
|
||||
Clock,
|
||||
Play,
|
||||
Pause,
|
||||
Trash2,
|
||||
Edit,
|
||||
RefreshCw,
|
||||
X,
|
||||
Calendar,
|
||||
@@ -20,10 +18,10 @@ import {
|
||||
Loader2,
|
||||
Timer,
|
||||
History,
|
||||
Pause,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -236,43 +234,45 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={onClose}>
|
||||
<Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
|
||||
<CardHeader className="flex flex-row items-start justify-between">
|
||||
<Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden" onClick={(e) => e.stopPropagation()}>
|
||||
<CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
|
||||
<div>
|
||||
<CardTitle>{job ? t('dialog.editTitle') : t('dialog.createTitle')}</CardTitle>
|
||||
<CardDescription>{t('dialog.description')}</CardDescription>
|
||||
<CardTitle className="text-2xl font-serif font-normal">{job ? t('dialog.editTitle') : t('dialog.createTitle')}</CardTitle>
|
||||
<CardDescription className="text-[15px] mt-1 text-foreground/70">{t('dialog.description')}</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="space-y-6 pt-4 overflow-y-auto flex-1 p-6">
|
||||
{/* Name */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{t('dialog.taskName')}</Label>
|
||||
<div className="space-y-2.5">
|
||||
<Label htmlFor="name" className="text-[14px] text-foreground/80 font-bold">{t('dialog.taskName')}</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder={t('dialog.taskNamePlaceholder')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message">{t('dialog.message')}</Label>
|
||||
<div className="space-y-2.5">
|
||||
<Label htmlFor="message" className="text-[14px] text-foreground/80 font-bold">{t('dialog.message')}</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder={t('dialog.messagePlaceholder')}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
rows={3}
|
||||
className="rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Schedule */}
|
||||
<div className="space-y-2">
|
||||
<Label>{t('dialog.schedule')}</Label>
|
||||
<div className="space-y-2.5">
|
||||
<Label className="text-[14px] text-foreground/80 font-bold">{t('dialog.schedule')}</Label>
|
||||
{!useCustom ? (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{schedulePresets.map((preset) => (
|
||||
@@ -282,9 +282,14 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
|
||||
variant={schedule === preset.value ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setSchedule(preset.value)}
|
||||
className="justify-start"
|
||||
className={cn(
|
||||
"justify-start h-10 rounded-xl font-medium text-[13px] transition-all",
|
||||
schedule === preset.value
|
||||
? "bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border-transparent"
|
||||
: "bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<Timer className="h-4 w-4 mr-2" />
|
||||
<Timer className="h-4 w-4 mr-2 opacity-70" />
|
||||
{t(`presets.${preset.key}` as const)}
|
||||
</Button>
|
||||
))}
|
||||
@@ -294,27 +299,30 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
|
||||
placeholder={t('dialog.cronPlaceholder')}
|
||||
value={customSchedule}
|
||||
onChange={(e) => setCustomSchedule(e.target.value)}
|
||||
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setUseCustom(!useCustom)}
|
||||
className="text-xs"
|
||||
>
|
||||
{useCustom ? t('dialog.usePresets') : t('dialog.useCustomCron')}
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{schedulePreview ? `${t('card.next')}: ${schedulePreview}` : t('dialog.cronPlaceholder')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
<p className="text-[12px] text-muted-foreground/80 font-medium">
|
||||
{schedulePreview ? `${t('card.next')}: ${schedulePreview}` : t('dialog.cronPlaceholder')}
|
||||
</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setUseCustom(!useCustom)}
|
||||
className="text-[12px] h-7 px-2 text-foreground/60 hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 rounded-lg"
|
||||
>
|
||||
{useCustom ? t('dialog.usePresets') : t('dialog.useCustomCron')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enabled */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between bg-[#eeece3] dark:bg-[#151514] p-4 rounded-2xl shadow-sm border border-black/5 dark:border-white/5">
|
||||
<div>
|
||||
<Label>{t('dialog.enableImmediately')}</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Label className="text-[14px] text-foreground/80 font-bold">{t('dialog.enableImmediately')}</Label>
|
||||
<p className="text-[13px] text-muted-foreground mt-0.5">
|
||||
{t('dialog.enableImmediatelyDesc')}
|
||||
</p>
|
||||
</div>
|
||||
@@ -322,11 +330,11 @@ function TaskDialog({ job, onClose, onSave }: TaskDialogProps) {
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-2 pt-4 border-t">
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
<div className="flex justify-end gap-3 pt-4">
|
||||
<Button variant="outline" onClick={onClose} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
|
||||
{t('common:actions.cancel', 'Cancel')}
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={saving}>
|
||||
<Button onClick={handleSubmit} disabled={saving} className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all">
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
@@ -359,7 +367,8 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
|
||||
const { t } = useTranslation('cron');
|
||||
const [triggering, setTriggering] = useState(false);
|
||||
|
||||
const handleTrigger = async () => {
|
||||
const handleTrigger = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setTriggering(true);
|
||||
try {
|
||||
await onTrigger();
|
||||
@@ -372,81 +381,79 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
const handleDelete = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className={cn(
|
||||
'transition-colors',
|
||||
job.enabled && 'border-primary/30'
|
||||
)}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={cn(
|
||||
'rounded-full p-2',
|
||||
job.enabled
|
||||
? 'bg-green-100 dark:bg-green-900/30'
|
||||
: 'bg-muted'
|
||||
)}>
|
||||
<Clock className={cn(
|
||||
'h-5 w-5',
|
||||
job.enabled ? 'text-green-600' : 'text-muted-foreground'
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">{job.name}</CardTitle>
|
||||
<CardDescription className="flex items-center gap-2">
|
||||
<Timer className="h-3 w-3" />
|
||||
{parseCronSchedule(job.schedule, t)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div
|
||||
className="group flex flex-col p-5 rounded-2xl bg-transparent border border-transparent hover:bg-black/5 dark:hover:bg-white/5 transition-all relative overflow-hidden cursor-pointer"
|
||||
onClick={onEdit}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm group-hover:scale-105 transition-transform">
|
||||
<Clock className={cn("h-5 w-5", job.enabled ? "text-foreground" : "text-muted-foreground")} />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={job.enabled ? 'success' : 'secondary'}>
|
||||
{job.enabled ? t('stats.active') : t('stats.paused')}
|
||||
</Badge>
|
||||
<Switch
|
||||
checked={job.enabled}
|
||||
onCheckedChange={onToggle}
|
||||
/>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-[16px] font-semibold text-foreground truncate">{job.name}</h3>
|
||||
<div
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full shrink-0",
|
||||
job.enabled ? "bg-green-500" : "bg-muted-foreground"
|
||||
)}
|
||||
title={job.enabled ? t('stats.active') : t('stats.paused')}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[13px] text-muted-foreground flex items-center gap-1.5">
|
||||
<Timer className="h-3.5 w-3.5" />
|
||||
{parseCronSchedule(job.schedule, t)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Message Preview */}
|
||||
<div className="flex items-start gap-2 p-3 rounded-lg bg-muted/50">
|
||||
<MessageSquare className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
|
||||
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
||||
<Switch
|
||||
checked={job.enabled}
|
||||
onCheckedChange={onToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col justify-end mt-2 pl-[62px]">
|
||||
<div className="flex items-start gap-2 mb-3">
|
||||
<MessageSquare className="h-3.5 w-3.5 mt-0.5 text-muted-foreground shrink-0" />
|
||||
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
|
||||
{job.message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-muted-foreground">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[12px] text-muted-foreground/80 font-medium mb-3">
|
||||
{job.target && (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="flex items-center gap-1.5">
|
||||
{CHANNEL_ICONS[job.target.channelType as ChannelType]}
|
||||
{job.target.channelName}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{job.lastRun && (
|
||||
<span className="flex items-center gap-1">
|
||||
<History className="h-4 w-4" />
|
||||
<span className="flex items-center gap-1.5">
|
||||
<History className="h-3.5 w-3.5" />
|
||||
{t('card.last')}: {formatRelativeTime(job.lastRun.time)}
|
||||
{job.lastRun.success ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
<CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
|
||||
) : (
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
<XCircle className="h-3.5 w-3.5 text-red-500" />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{job.nextRun && job.enabled && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="h-3.5 w-3.5" />
|
||||
{t('card.next')}: {new Date(job.nextRun).toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
@@ -454,38 +461,40 @@ function CronJobCard({ job, onToggle, onEdit, onDelete, onTrigger }: CronJobCard
|
||||
|
||||
{/* Last Run Error */}
|
||||
{job.lastRun && !job.lastRun.success && job.lastRun.error && (
|
||||
<div className="flex items-start gap-2 p-2 rounded-lg bg-red-50 dark:bg-red-900/20 text-sm text-red-600 dark:text-red-400">
|
||||
<div className="flex items-start gap-2 p-2.5 mb-3 rounded-xl bg-destructive/10 border border-destructive/20 text-[13px] text-destructive">
|
||||
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
|
||||
<span>{job.lastRun.error}</span>
|
||||
<span className="line-clamp-2">{job.lastRun.error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex justify-end gap-1 pt-2 border-t">
|
||||
<div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity mt-auto">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleTrigger}
|
||||
disabled={triggering}
|
||||
className="h-8 px-3 text-foreground/70 hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-[13px] font-medium transition-colors"
|
||||
>
|
||||
{triggering ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin mr-1.5" />
|
||||
) : (
|
||||
<Play className="h-4 w-4" />
|
||||
<Play className="h-3.5 w-3.5 mr-1.5" />
|
||||
)}
|
||||
<span className="ml-1">{t('card.runNow')}</span>
|
||||
{t('card.runNow')}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={onEdit}>
|
||||
<Edit className="h-4 w-4" />
|
||||
<span className="ml-1">{t('common:actions.edit', 'Edit')}</span>
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={handleDelete}>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
<span className="ml-1 text-destructive">{t('common:actions.delete', 'Delete')}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
className="h-8 px-3 text-destructive/70 hover:text-destructive hover:bg-destructive/10 rounded-lg text-[13px] font-medium transition-colors"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 mr-1.5" />
|
||||
{t('common:actions.delete', 'Delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -532,156 +541,162 @@ export function Cron() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-96 items-center justify-center">
|
||||
<div className="flex flex-col -m-6 dark:bg-background min-h-[calc(100vh-2.5rem)] items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">{t('title')}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={fetchJobs} disabled={!isGatewayRunning}>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
{t('refresh')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditingJob(undefined);
|
||||
setShowDialog(true);
|
||||
}}
|
||||
disabled={!isGatewayRunning}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t('newTask')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gateway Warning */}
|
||||
{!isGatewayRunning && (
|
||||
<Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10">
|
||||
<CardContent className="py-4 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600" />
|
||||
<span className="text-yellow-700 dark:text-yellow-400">
|
||||
{t('gatewayWarning')}
|
||||
</span>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-primary/10 p-3">
|
||||
<Clock className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{jobs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.total')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-green-100 p-3 dark:bg-green-900/30">
|
||||
<Play className="h-6 w-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{activeJobs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.active')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-yellow-100 p-3 dark:bg-yellow-900/30">
|
||||
<Pause className="h-6 w-6 text-yellow-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{pausedJobs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.paused')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="rounded-full bg-red-100 p-3 dark:bg-red-900/30">
|
||||
<XCircle className="h-6 w-6 text-red-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold">{failedJobs.length}</p>
|
||||
<p className="text-sm text-muted-foreground">{t('stats.failed')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<Card className="border-destructive">
|
||||
<CardContent className="py-4 text-destructive flex items-center gap-2">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
{error}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Jobs List */}
|
||||
{jobs.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<Clock className="h-12 w-12 text-muted-foreground mb-4" />
|
||||
<h3 className="text-lg font-medium mb-2">{t('empty.title')}</h3>
|
||||
<p className="text-muted-foreground text-center mb-4 max-w-md">
|
||||
{t('empty.description')}
|
||||
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
|
||||
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
|
||||
<div>
|
||||
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
{t('title')}
|
||||
</h1>
|
||||
<p className="text-[17px] text-foreground/80 font-medium">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 md:mt-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={fetchJobs}
|
||||
disabled={!isGatewayRunning}
|
||||
className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5 mr-2" />
|
||||
{t('refresh')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditingJob(undefined);
|
||||
setShowDialog(true);
|
||||
}}
|
||||
disabled={!isGatewayRunning}
|
||||
className="h-9 text-[13px] font-medium rounded-full px-4 shadow-none"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t('empty.create')}
|
||||
<Plus className="h-3.5 w-3.5 mr-2" />
|
||||
{t('newTask')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{jobs.map((job) => (
|
||||
<CronJobCard
|
||||
key={job.id}
|
||||
job={job}
|
||||
onToggle={(enabled) => handleToggle(job.id, enabled)}
|
||||
onEdit={() => {
|
||||
setEditingJob(job);
|
||||
setShowDialog(true);
|
||||
}}
|
||||
onDelete={() => setJobToDelete({ id: job.id })}
|
||||
onTrigger={() => triggerJob(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
|
||||
{/* Gateway Warning */}
|
||||
{!isGatewayRunning && (
|
||||
<div className="mb-8 p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
|
||||
<span className="text-yellow-700 dark:text-yellow-400 text-sm font-medium">
|
||||
{t('gatewayWarning')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mb-8 p-4 rounded-xl border border-destructive/50 bg-destructive/10 flex items-center gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-destructive" />
|
||||
<span className="text-destructive text-sm font-medium">
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-11 w-11 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<Clock className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-baseline gap-3">
|
||||
<p className="text-[40px] leading-none font-serif text-foreground">{jobs.length}</p>
|
||||
<p className="text-[14px] font-medium text-muted-foreground">{t('stats.total')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-11 w-11 rounded-full bg-green-500/10 flex items-center justify-center">
|
||||
<Play className="h-5 w-5 text-green-600 dark:text-green-500 ml-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-baseline gap-3">
|
||||
<p className="text-[40px] leading-none font-serif text-foreground">{activeJobs.length}</p>
|
||||
<p className="text-[14px] font-medium text-muted-foreground">{t('stats.active')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-11 w-11 rounded-full bg-yellow-500/10 flex items-center justify-center">
|
||||
<Pause className="h-5 w-5 text-yellow-600 dark:text-yellow-500" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-baseline gap-3">
|
||||
<p className="text-[40px] leading-none font-serif text-foreground">{pausedJobs.length}</p>
|
||||
<p className="text-[14px] font-medium text-muted-foreground">{t('stats.paused')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-5 rounded-[24px] bg-black/5 dark:bg-white/5 border border-transparent flex flex-col justify-between min-h-[130px] relative overflow-hidden group hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="h-11 w-11 rounded-full bg-destructive/10 flex items-center justify-center">
|
||||
<XCircle className="h-5 w-5 text-destructive" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-baseline gap-3">
|
||||
<p className="text-[40px] leading-none font-serif text-foreground">{failedJobs.length}</p>
|
||||
<p className="text-[14px] font-medium text-muted-foreground">{t('stats.failed')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Jobs List */}
|
||||
{jobs.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
||||
<Clock className="h-10 w-10 mb-4 opacity-50" />
|
||||
<h3 className="text-lg font-medium mb-2 text-foreground">{t('empty.title')}</h3>
|
||||
<p className="text-[14px] text-center mb-6 max-w-md">
|
||||
{t('empty.description')}
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditingJob(undefined);
|
||||
setShowDialog(true);
|
||||
}}
|
||||
disabled={!isGatewayRunning}
|
||||
className="rounded-full px-6 h-10"
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
{t('empty.create')}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
{jobs.map((job) => (
|
||||
<CronJobCard
|
||||
key={job.id}
|
||||
job={job}
|
||||
onToggle={(enabled) => handleToggle(job.id, enabled)}
|
||||
onEdit={() => {
|
||||
setEditingJob(job);
|
||||
setShowDialog(true);
|
||||
}}
|
||||
onDelete={() => setJobToDelete({ id: job.id })}
|
||||
onTrigger={() => triggerJob(job.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create/Edit Dialog */}
|
||||
{showDialog && (
|
||||
|
||||
@@ -12,8 +12,6 @@ import {
|
||||
Settings,
|
||||
Plus,
|
||||
Terminal,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Wrench,
|
||||
} from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
@@ -30,23 +28,6 @@ import { hostApiFetch } from '@/lib/host-api';
|
||||
import { trackUiEvent } from '@/lib/telemetry';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type UsageHistoryEntry = {
|
||||
timestamp: string;
|
||||
sessionId: string;
|
||||
agentId: string;
|
||||
model?: string;
|
||||
provider?: string;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheReadTokens: number;
|
||||
cacheWriteTokens: number;
|
||||
totalTokens: number;
|
||||
costUsd?: number;
|
||||
};
|
||||
|
||||
type UsageWindow = '7d' | '30d' | 'all';
|
||||
type UsageGroupBy = 'model' | 'day';
|
||||
|
||||
export function Dashboard() {
|
||||
const { t } = useTranslation('dashboard');
|
||||
const gatewayStatus = useGatewayStore((state) => state.status);
|
||||
@@ -56,10 +37,6 @@ export function Dashboard() {
|
||||
|
||||
const isGatewayRunning = gatewayStatus.state === 'running';
|
||||
const [uptime, setUptime] = useState(0);
|
||||
const [usageHistory, setUsageHistory] = useState<UsageHistoryEntry[]>([]);
|
||||
const [usageGroupBy, setUsageGroupBy] = useState<UsageGroupBy>('model');
|
||||
const [usageWindow, setUsageWindow] = useState<UsageWindow>('7d');
|
||||
const [usagePage, setUsagePage] = useState(1);
|
||||
|
||||
// Track page view on mount only.
|
||||
useEffect(() => {
|
||||
@@ -71,28 +48,12 @@ export function Dashboard() {
|
||||
if (isGatewayRunning) {
|
||||
fetchChannels();
|
||||
fetchSkills();
|
||||
hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history')
|
||||
.then((entries) => {
|
||||
setUsageHistory(Array.isArray(entries) ? entries : []);
|
||||
setUsagePage(1);
|
||||
})
|
||||
.catch(() => {
|
||||
setUsageHistory([]);
|
||||
});
|
||||
}
|
||||
}, [fetchChannels, fetchSkills, isGatewayRunning]);
|
||||
|
||||
// Calculate statistics safely
|
||||
const connectedChannels = Array.isArray(channels) ? channels.filter((c) => c.status === 'connected').length : 0;
|
||||
const enabledSkills = Array.isArray(skills) ? skills.filter((s) => s.enabled).length : 0;
|
||||
const visibleUsageHistory = isGatewayRunning ? usageHistory : [];
|
||||
const filteredUsageHistory = filterUsageHistoryByWindow(visibleUsageHistory, usageWindow);
|
||||
const usageGroups = groupUsageHistory(filteredUsageHistory, usageGroupBy);
|
||||
const usagePageSize = 5;
|
||||
const usageTotalPages = Math.max(1, Math.ceil(filteredUsageHistory.length / usagePageSize));
|
||||
const safeUsagePage = Math.min(usagePage, usageTotalPages);
|
||||
const pagedUsageHistory = filteredUsageHistory.slice((safeUsagePage - 1) * usagePageSize, safeUsagePage * usagePageSize);
|
||||
const usageLoading = isGatewayRunning && visibleUsageHistory.length === 0;
|
||||
|
||||
// Update uptime periodically
|
||||
useEffect(() => {
|
||||
@@ -339,160 +300,6 @@ export function Dashboard() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{t('recentTokenHistory.title')}</CardTitle>
|
||||
<CardDescription>{t('recentTokenHistory.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{usageLoading ? (
|
||||
<FeedbackState state="loading" title={t('recentTokenHistory.loading')} />
|
||||
) : visibleUsageHistory.length === 0 ? (
|
||||
<FeedbackState state="empty" title={t('recentTokenHistory.empty')} />
|
||||
) : filteredUsageHistory.length === 0 ? (
|
||||
<FeedbackState state="empty" title={t('recentTokenHistory.emptyForWindow')} />
|
||||
) : (
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex rounded-lg border p-1">
|
||||
<Button
|
||||
variant={usageGroupBy === 'model' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageGroupBy('model');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
>
|
||||
{t('recentTokenHistory.groupByModel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageGroupBy === 'day' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageGroupBy('day');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
>
|
||||
{t('recentTokenHistory.groupByTime')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex rounded-lg border p-1">
|
||||
<Button
|
||||
variant={usageWindow === '7d' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('7d');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
>
|
||||
{t('recentTokenHistory.last7Days')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageWindow === '30d' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('30d');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
>
|
||||
{t('recentTokenHistory.last30Days')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageWindow === 'all' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('all');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
>
|
||||
{t('recentTokenHistory.allTime')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('recentTokenHistory.showingLast', { count: filteredUsageHistory.length })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UsageBarChart
|
||||
groups={usageGroups}
|
||||
emptyLabel={t('recentTokenHistory.empty')}
|
||||
totalLabel={t('recentTokenHistory.totalTokens')}
|
||||
inputLabel={t('recentTokenHistory.inputShort')}
|
||||
outputLabel={t('recentTokenHistory.outputShort')}
|
||||
cacheLabel={t('recentTokenHistory.cacheShort')}
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
{pagedUsageHistory.map((entry) => (
|
||||
<div
|
||||
key={`${entry.sessionId}-${entry.timestamp}`}
|
||||
className="rounded-lg border p-3"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium truncate">
|
||||
{entry.model || t('recentTokenHistory.unknownModel')}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{[entry.provider, entry.agentId, entry.sessionId].filter(Boolean).join(' • ')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<p className="font-semibold">{formatTokenCount(entry.totalTokens)}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatUsageTimestamp(entry.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
|
||||
<span>{t('recentTokenHistory.input', { value: formatTokenCount(entry.inputTokens) })}</span>
|
||||
<span>{t('recentTokenHistory.output', { value: formatTokenCount(entry.outputTokens) })}</span>
|
||||
{entry.cacheReadTokens > 0 && (
|
||||
<span>{t('recentTokenHistory.cacheRead', { value: formatTokenCount(entry.cacheReadTokens) })}</span>
|
||||
)}
|
||||
{entry.cacheWriteTokens > 0 && (
|
||||
<span>{t('recentTokenHistory.cacheWrite', { value: formatTokenCount(entry.cacheWriteTokens) })}</span>
|
||||
)}
|
||||
{typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd) && (
|
||||
<span>{t('recentTokenHistory.cost', { amount: entry.costUsd.toFixed(4) })}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 border-t pt-3">
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('recentTokenHistory.page', { current: safeUsagePage, total: usageTotalPages })}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUsagePage((page) => Math.max(1, page - 1))}
|
||||
disabled={safeUsagePage <= 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
{t('recentTokenHistory.prev')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUsagePage((page) => Math.min(usageTotalPages, page + 1))}
|
||||
disabled={safeUsagePage >= usageTotalPages}
|
||||
>
|
||||
{t('recentTokenHistory.next')}
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -514,183 +321,4 @@ function formatUptime(seconds: number): string {
|
||||
}
|
||||
}
|
||||
|
||||
function formatTokenCount(value: number): string {
|
||||
return Intl.NumberFormat().format(value);
|
||||
}
|
||||
|
||||
function formatUsageTimestamp(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return timestamp;
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function groupUsageHistory(
|
||||
entries: UsageHistoryEntry[],
|
||||
groupBy: UsageGroupBy,
|
||||
): Array<{
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
sortKey: number | string;
|
||||
}> {
|
||||
const grouped = new Map<string, {
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
sortKey: number | string;
|
||||
}>();
|
||||
|
||||
for (const entry of entries) {
|
||||
const label = groupBy === 'model'
|
||||
? (entry.model || 'Unknown')
|
||||
: formatUsageDay(entry.timestamp);
|
||||
const current = grouped.get(label) ?? {
|
||||
label,
|
||||
totalTokens: 0,
|
||||
inputTokens: 0,
|
||||
outputTokens: 0,
|
||||
cacheTokens: 0,
|
||||
sortKey: groupBy === 'day' ? getUsageDaySortKey(entry.timestamp) : label.toLowerCase(),
|
||||
};
|
||||
current.totalTokens += entry.totalTokens;
|
||||
current.inputTokens += entry.inputTokens;
|
||||
current.outputTokens += entry.outputTokens;
|
||||
current.cacheTokens += entry.cacheReadTokens + entry.cacheWriteTokens;
|
||||
grouped.set(label, current);
|
||||
}
|
||||
|
||||
return Array.from(grouped.values())
|
||||
.sort((a, b) => {
|
||||
if (groupBy === 'day') {
|
||||
return Number(a.sortKey) - Number(b.sortKey);
|
||||
}
|
||||
return b.totalTokens - a.totalTokens;
|
||||
})
|
||||
.slice(0, 8);
|
||||
}
|
||||
|
||||
function formatUsageDay(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return timestamp;
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function getUsageDaySortKey(timestamp: string): number {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return 0;
|
||||
date.setHours(0, 0, 0, 0);
|
||||
return date.getTime();
|
||||
}
|
||||
|
||||
function filterUsageHistoryByWindow(entries: UsageHistoryEntry[], window: UsageWindow): UsageHistoryEntry[] {
|
||||
if (window === 'all') return entries;
|
||||
|
||||
const now = Date.now();
|
||||
const days = window === '7d' ? 7 : 30;
|
||||
const cutoff = now - days * 24 * 60 * 60 * 1000;
|
||||
|
||||
return entries.filter((entry) => {
|
||||
const timestamp = Date.parse(entry.timestamp);
|
||||
return Number.isFinite(timestamp) && timestamp >= cutoff;
|
||||
});
|
||||
}
|
||||
|
||||
function UsageBarChart({
|
||||
groups,
|
||||
emptyLabel,
|
||||
totalLabel,
|
||||
inputLabel,
|
||||
outputLabel,
|
||||
cacheLabel,
|
||||
}: {
|
||||
groups: Array<{
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
}>;
|
||||
emptyLabel: string;
|
||||
totalLabel: string;
|
||||
inputLabel: string;
|
||||
outputLabel: string;
|
||||
cacheLabel: string;
|
||||
}) {
|
||||
if (groups.length === 0) {
|
||||
return (
|
||||
<div className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
{emptyLabel}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const maxTokens = Math.max(...groups.map((group) => group.totalTokens), 1);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-sky-500" />
|
||||
{inputLabel}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-violet-500" />
|
||||
{outputLabel}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
|
||||
{cacheLabel}
|
||||
</span>
|
||||
</div>
|
||||
{groups.map((group) => (
|
||||
<div key={group.label} className="space-y-1">
|
||||
<div className="flex items-center justify-between gap-3 text-sm">
|
||||
<span className="truncate font-medium">{group.label}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{totalLabel}: {formatTokenCount(group.totalTokens)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-3 overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
className="flex h-full overflow-hidden rounded-full"
|
||||
style={{ width: `${Math.max((group.totalTokens / maxTokens) * 100, 6)}%` }}
|
||||
>
|
||||
{group.inputTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-sky-500"
|
||||
style={{ width: `${(group.inputTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
{group.outputTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-violet-500"
|
||||
style={{ width: `${(group.outputTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
{group.cacheTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-amber-500"
|
||||
style={{ width: `${(group.cacheTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
441
src/pages/Models/index.tsx
Normal file
441
src/pages/Models/index.tsx
Normal file
@@ -0,0 +1,441 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { hostApiFetch } from '@/lib/host-api';
|
||||
import { trackUiEvent } from '@/lib/telemetry';
|
||||
import { ProvidersSettings } from '@/components/settings/ProvidersSettings';
|
||||
import { FeedbackState } from '@/components/common/FeedbackState';
|
||||
|
||||
type UsageHistoryEntry = {
|
||||
timestamp: string;
|
||||
sessionId: string;
|
||||
agentId: string;
|
||||
model?: string;
|
||||
provider?: string;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheReadTokens: number;
|
||||
cacheWriteTokens: number;
|
||||
totalTokens: number;
|
||||
costUsd?: number;
|
||||
};
|
||||
|
||||
type UsageWindow = '7d' | '30d' | 'all';
|
||||
type UsageGroupBy = 'model' | 'day';
|
||||
|
||||
export function Models() {
|
||||
const { t } = useTranslation(['dashboard', 'settings']);
|
||||
const gatewayStatus = useGatewayStore((state) => state.status);
|
||||
const isGatewayRunning = gatewayStatus.state === 'running';
|
||||
|
||||
const [usageHistory, setUsageHistory] = useState<UsageHistoryEntry[]>([]);
|
||||
const [usageGroupBy, setUsageGroupBy] = useState<UsageGroupBy>('model');
|
||||
const [usageWindow, setUsageWindow] = useState<UsageWindow>('7d');
|
||||
const [usagePage, setUsagePage] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
trackUiEvent('models.page_viewed');
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isGatewayRunning) {
|
||||
hostApiFetch<UsageHistoryEntry[]>('/api/usage/recent-token-history')
|
||||
.then((entries) => {
|
||||
setUsageHistory(Array.isArray(entries) ? entries : []);
|
||||
setUsagePage(1);
|
||||
})
|
||||
.catch(() => {
|
||||
setUsageHistory([]);
|
||||
});
|
||||
}
|
||||
}, [isGatewayRunning]);
|
||||
|
||||
const visibleUsageHistory = isGatewayRunning ? usageHistory : [];
|
||||
const filteredUsageHistory = filterUsageHistoryByWindow(visibleUsageHistory, usageWindow);
|
||||
const usageGroups = groupUsageHistory(filteredUsageHistory, usageGroupBy);
|
||||
const usagePageSize = 5;
|
||||
const usageTotalPages = Math.max(1, Math.ceil(filteredUsageHistory.length / usagePageSize));
|
||||
const safeUsagePage = Math.min(usagePage, usageTotalPages);
|
||||
const pagedUsageHistory = filteredUsageHistory.slice((safeUsagePage - 1) * usagePageSize, safeUsagePage * usagePageSize);
|
||||
const usageLoading = isGatewayRunning && visibleUsageHistory.length === 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
|
||||
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
|
||||
<div>
|
||||
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
Models
|
||||
</h1>
|
||||
<p className="text-[17px] text-foreground/80 font-medium">
|
||||
Manage your AI providers and monitor token usage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Area */}
|
||||
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2 space-y-12">
|
||||
|
||||
{/* AI Providers Section */}
|
||||
<ProvidersSettings />
|
||||
|
||||
{/* Token Usage History Section */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
|
||||
{t('dashboard:recentTokenHistory.title', 'Token Usage History')}
|
||||
</h2>
|
||||
<div>
|
||||
{usageLoading ? (
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
||||
<FeedbackState state="loading" title={t('dashboard:recentTokenHistory.loading')} />
|
||||
</div>
|
||||
) : visibleUsageHistory.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
||||
<FeedbackState state="empty" title={t('dashboard:recentTokenHistory.empty')} />
|
||||
</div>
|
||||
) : filteredUsageHistory.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-12 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
|
||||
<FeedbackState state="empty" title={t('dashboard:recentTokenHistory.emptyForWindow')} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<div className="flex rounded-xl bg-transparent p-1 border border-black/10 dark:border-white/10">
|
||||
<Button
|
||||
variant={usageGroupBy === 'model' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageGroupBy('model');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
className={usageGroupBy === 'model' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.groupByModel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageGroupBy === 'day' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageGroupBy('day');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
className={usageGroupBy === 'day' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.groupByTime')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex rounded-xl bg-transparent p-1 border border-black/10 dark:border-white/10">
|
||||
<Button
|
||||
variant={usageWindow === '7d' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('7d');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
className={usageWindow === '7d' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.last7Days')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageWindow === '30d' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('30d');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
className={usageWindow === '30d' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.last30Days')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={usageWindow === 'all' ? 'secondary' : 'ghost'}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setUsageWindow('all');
|
||||
setUsagePage(1);
|
||||
}}
|
||||
className={usageWindow === 'all' ? "rounded-lg bg-black/5 dark:bg-white/10 text-foreground" : "rounded-lg text-muted-foreground"}
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.allTime')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[13px] font-medium text-muted-foreground">
|
||||
{t('dashboard:recentTokenHistory.showingLast', { count: filteredUsageHistory.length })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UsageBarChart
|
||||
groups={usageGroups}
|
||||
emptyLabel={t('dashboard:recentTokenHistory.empty')}
|
||||
totalLabel={t('dashboard:recentTokenHistory.totalTokens')}
|
||||
inputLabel={t('dashboard:recentTokenHistory.inputShort')}
|
||||
outputLabel={t('dashboard:recentTokenHistory.outputShort')}
|
||||
cacheLabel={t('dashboard:recentTokenHistory.cacheShort')}
|
||||
/>
|
||||
|
||||
<div className="space-y-3 pt-2">
|
||||
{pagedUsageHistory.map((entry) => (
|
||||
<div
|
||||
key={`${entry.sessionId}-${entry.timestamp}`}
|
||||
className="rounded-2xl bg-transparent border border-black/10 dark:border-white/10 p-5 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-[15px] text-foreground truncate">
|
||||
{entry.model || t('dashboard:recentTokenHistory.unknownModel')}
|
||||
</p>
|
||||
<p className="text-[13px] text-muted-foreground truncate mt-0.5">
|
||||
{[entry.provider, entry.agentId, entry.sessionId].filter(Boolean).join(' • ')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0">
|
||||
<p className="font-bold text-[15px]">{formatTokenCount(entry.totalTokens)}</p>
|
||||
<p className="text-[12px] text-muted-foreground mt-0.5">
|
||||
{formatUsageTimestamp(entry.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-[12.5px] font-medium text-muted-foreground">
|
||||
<span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-sky-500"></div>{t('dashboard:recentTokenHistory.input', { value: formatTokenCount(entry.inputTokens) })}</span>
|
||||
<span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-violet-500"></div>{t('dashboard:recentTokenHistory.output', { value: formatTokenCount(entry.outputTokens) })}</span>
|
||||
{entry.cacheReadTokens > 0 && (
|
||||
<span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-amber-500"></div>{t('dashboard:recentTokenHistory.cacheRead', { value: formatTokenCount(entry.cacheReadTokens) })}</span>
|
||||
)}
|
||||
{entry.cacheWriteTokens > 0 && (
|
||||
<span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-amber-500"></div>{t('dashboard:recentTokenHistory.cacheWrite', { value: formatTokenCount(entry.cacheWriteTokens) })}</span>
|
||||
)}
|
||||
{typeof entry.costUsd === 'number' && Number.isFinite(entry.costUsd) && (
|
||||
<span className="flex items-center gap-1.5 ml-auto text-foreground/80 bg-black/5 dark:bg-white/5 px-2 py-0.5 rounded-md">{t('dashboard:recentTokenHistory.cost', { amount: entry.costUsd.toFixed(4) })}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-3 pt-2">
|
||||
<p className="text-[13px] font-medium text-muted-foreground">
|
||||
{t('dashboard:recentTokenHistory.page', { current: safeUsagePage, total: usageTotalPages })}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUsagePage((page) => Math.max(1, page - 1))}
|
||||
disabled={safeUsagePage <= 1}
|
||||
className="rounded-full px-4 h-9 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 mr-1" />
|
||||
{t('dashboard:recentTokenHistory.prev')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setUsagePage((page) => Math.min(usageTotalPages, page + 1))}
|
||||
disabled={safeUsagePage >= usageTotalPages}
|
||||
className="rounded-full px-4 h-9 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5"
|
||||
>
|
||||
{t('dashboard:recentTokenHistory.next')}
|
||||
<ChevronRight className="h-4 w-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTokenCount(value: number): string {
|
||||
return Intl.NumberFormat().format(value);
|
||||
}
|
||||
|
||||
function formatUsageTimestamp(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return timestamp;
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function groupUsageHistory(
|
||||
entries: UsageHistoryEntry[],
|
||||
groupBy: UsageGroupBy,
|
||||
): Array<{
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
sortKey: number | string;
|
||||
}> {
|
||||
const grouped = new Map<string, {
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
sortKey: number | string;
|
||||
}>();
|
||||
|
||||
for (const entry of entries) {
|
||||
const label = groupBy === 'model'
|
||||
? (entry.model || 'Unknown')
|
||||
: formatUsageDay(entry.timestamp);
|
||||
const current = grouped.get(label) ?? {
|
||||
label,
|
||||
totalTokens: 0,
|
||||
inputTokens: 0,
|
||||
outputTokens: 0,
|
||||
cacheTokens: 0,
|
||||
sortKey: groupBy === 'day' ? getUsageDaySortKey(entry.timestamp) : label.toLowerCase(),
|
||||
};
|
||||
current.totalTokens += entry.totalTokens;
|
||||
current.inputTokens += entry.inputTokens;
|
||||
current.outputTokens += entry.outputTokens;
|
||||
current.cacheTokens += entry.cacheReadTokens + entry.cacheWriteTokens;
|
||||
grouped.set(label, current);
|
||||
}
|
||||
|
||||
return Array.from(grouped.values())
|
||||
.sort((a, b) => {
|
||||
if (groupBy === 'day') {
|
||||
return Number(a.sortKey) - Number(b.sortKey);
|
||||
}
|
||||
return b.totalTokens - a.totalTokens;
|
||||
})
|
||||
.slice(0, 8);
|
||||
}
|
||||
|
||||
function formatUsageDay(timestamp: string): string {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return timestamp;
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function getUsageDaySortKey(timestamp: string): number {
|
||||
const date = new Date(timestamp);
|
||||
if (Number.isNaN(date.getTime())) return 0;
|
||||
date.setHours(0, 0, 0, 0);
|
||||
return date.getTime();
|
||||
}
|
||||
|
||||
function filterUsageHistoryByWindow(entries: UsageHistoryEntry[], window: UsageWindow): UsageHistoryEntry[] {
|
||||
if (window === 'all') return entries;
|
||||
|
||||
const now = Date.now();
|
||||
const days = window === '7d' ? 7 : 30;
|
||||
const cutoff = now - days * 24 * 60 * 60 * 1000;
|
||||
|
||||
return entries.filter((entry) => {
|
||||
const timestamp = Date.parse(entry.timestamp);
|
||||
return Number.isFinite(timestamp) && timestamp >= cutoff;
|
||||
});
|
||||
}
|
||||
|
||||
function UsageBarChart({
|
||||
groups,
|
||||
emptyLabel,
|
||||
totalLabel,
|
||||
inputLabel,
|
||||
outputLabel,
|
||||
cacheLabel,
|
||||
}: {
|
||||
groups: Array<{
|
||||
label: string;
|
||||
totalTokens: number;
|
||||
inputTokens: number;
|
||||
outputTokens: number;
|
||||
cacheTokens: number;
|
||||
}>;
|
||||
emptyLabel: string;
|
||||
totalLabel: string;
|
||||
inputLabel: string;
|
||||
outputLabel: string;
|
||||
cacheLabel: string;
|
||||
}) {
|
||||
if (groups.length === 0) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-dashed border-black/10 dark:border-white/10 p-8 text-center text-[14px] font-medium text-muted-foreground">
|
||||
{emptyLabel}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const maxTokens = Math.max(...groups.map((group) => group.totalTokens), 1);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 bg-transparent p-5 rounded-2xl border border-black/10 dark:border-white/10">
|
||||
<div className="flex flex-wrap gap-4 text-[13px] font-medium text-muted-foreground mb-2">
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-sky-500" />
|
||||
{inputLabel}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-violet-500" />
|
||||
{outputLabel}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-amber-500" />
|
||||
{cacheLabel}
|
||||
</span>
|
||||
</div>
|
||||
{groups.map((group) => (
|
||||
<div key={group.label} className="space-y-1.5">
|
||||
<div className="flex items-center justify-between gap-3 text-[13.5px]">
|
||||
<span className="truncate font-semibold text-foreground">{group.label}</span>
|
||||
<span className="text-muted-foreground font-medium">
|
||||
{totalLabel}: {formatTokenCount(group.totalTokens)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-3.5 overflow-hidden rounded-full bg-black/5 dark:bg-white/5">
|
||||
<div
|
||||
className="flex h-full overflow-hidden rounded-full"
|
||||
style={{ width: `${Math.max((group.totalTokens / maxTokens) * 100, 6)}%` }}
|
||||
>
|
||||
{group.inputTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-sky-500"
|
||||
style={{ width: `${(group.inputTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
{group.outputTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-violet-500"
|
||||
style={{ width: `${(group.outputTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
{group.cacheTokens > 0 && (
|
||||
<div
|
||||
className="h-full bg-amber-500"
|
||||
style={{ width: `${(group.cacheTokens / group.totalTokens) * 100}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Models;
|
||||
@@ -8,13 +8,12 @@ import {
|
||||
Moon,
|
||||
Monitor,
|
||||
RefreshCw,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Terminal,
|
||||
ExternalLink,
|
||||
Key,
|
||||
Download,
|
||||
Copy,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -28,7 +27,6 @@ import { toast } from 'sonner';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { useGatewayStore } from '@/stores/gateway';
|
||||
import { useUpdateStore } from '@/stores/update';
|
||||
import { ProvidersSettings } from '@/components/settings/ProvidersSettings';
|
||||
import { UpdateSettings } from '@/components/settings/UpdateSettings';
|
||||
import {
|
||||
getGatewayWsDiagnosticEnabled,
|
||||
@@ -454,20 +452,6 @@ export function Settings() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* AI Providers */}
|
||||
<Card className="order-2">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Key className="h-5 w-5" />
|
||||
{t('aiProviders.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('aiProviders.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ProvidersSettings />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Gateway */}
|
||||
<Card className="order-1">
|
||||
<CardHeader>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user