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
@@ -882,6 +882,46 @@ export async function sanitizeOpenClawConfig(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
// ── plugins section ──────────────────────────────────────────────
|
||||
// Remove absolute paths in plugins that no longer exist or are bundled (preventing hardlink validation errors)
|
||||
const plugins = config.plugins;
|
||||
if (plugins) {
|
||||
if (Array.isArray(plugins)) {
|
||||
const validPlugins: unknown[] = [];
|
||||
for (const p of plugins) {
|
||||
if (typeof p === 'string' && p.startsWith('/')) {
|
||||
if (p.includes('node_modules/openclaw/extensions') || !(await fileExists(p))) {
|
||||
console.log(`[sanitize] Removing stale/bundled plugin path "${p}" from openclaw.json`);
|
||||
modified = true;
|
||||
} else {
|
||||
validPlugins.push(p);
|
||||
}
|
||||
} else {
|
||||
validPlugins.push(p);
|
||||
}
|
||||
}
|
||||
if (modified) config.plugins = validPlugins;
|
||||
} else if (typeof plugins === 'object') {
|
||||
const pluginsObj = plugins as Record<string, unknown>;
|
||||
if (Array.isArray(pluginsObj.load)) {
|
||||
const validLoad: unknown[] = [];
|
||||
for (const p of pluginsObj.load) {
|
||||
if (typeof p === 'string' && p.startsWith('/')) {
|
||||
if (p.includes('node_modules/openclaw/extensions') || !(await fileExists(p))) {
|
||||
console.log(`[sanitize] Removing stale/bundled plugin path "${p}" from openclaw.json`);
|
||||
modified = true;
|
||||
} else {
|
||||
validLoad.push(p);
|
||||
}
|
||||
} else {
|
||||
validLoad.push(p);
|
||||
}
|
||||
}
|
||||
if (modified) pluginsObj.load = validLoad;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── commands section ───────────────────────────────────────────
|
||||
// Required for SIGUSR1 in-process reload authorization.
|
||||
const commands = (
|
||||
|
||||
@@ -106,5 +106,5 @@
|
||||
"zustand": "^5.0.11",
|
||||
"zx": "^8.8.5"
|
||||
},
|
||||
"packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8"
|
||||
}
|
||||
"packageManager": "pnpm@10.31.0+sha512.e3927388bfaa8078ceb79b748ffc1e8274e84d75163e67bc22e06c0d3aed43dd153151cbf11d7f8301ff4acb98c68bdc5cadf6989532801ffafe3b3e4a63c268"
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import i18n from './i18n';
|
||||
import { MainLayout } from './components/layout/MainLayout';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { Dashboard } from './pages/Dashboard';
|
||||
import { Models } from './pages/Models';
|
||||
import { Chat } from './pages/Chat';
|
||||
import { Channels } from './pages/Channels';
|
||||
import { Skills } from './pages/Skills';
|
||||
@@ -164,6 +165,7 @@ function App() {
|
||||
{/* Main application routes */}
|
||||
<Route element={<MainLayout />}>
|
||||
<Route path="/" element={<Chat />} />
|
||||
<Route path="/models" element={<Models />} />
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/channels" element={<Channels />} />
|
||||
<Route path="/skills" element={<Skills />} />
|
||||
|
||||
4
src/assets/channels/dingtalk.svg
Normal file
4
src/assets/channels/dingtalk.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 12a9 9 0 1 1 -18 0a9 9 0 0 1 18 0" />
|
||||
<path d="M8 7.5l7.02 2.632a1 1 0 0 1 .567 1.33l-1.087 2.538h1.5l-5 4l1 -4c-3.1 .03 -3.114 -3.139 -4 -6.5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
3
src/assets/channels/discord.svg
Normal file
3
src/assets/channels/discord.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
6
src/assets/channels/feishu.svg
Normal file
6
src/assets/channels/feishu.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.062 10.395L6.685 1.09l-3.325.045c-1.127.014-2.02.936-1.996 2.063l.115 5.512c.023 1.107.925 2 2.032 2.016l4.24.062 4.311-.393z"/>
|
||||
<path d="M12.062 10.395l-4.311.393-4.24-.062c-1.107-.016-1.986.877-1.961 1.984l.116 5.343c.025 1.127.947 2.028 2.074 2l3.418-.083 4.904-9.575z" fillOpacity=".8"/>
|
||||
<path d="M12.062 10.395l4.904 9.575 3.51-.086c1.127-.028 2.028-.949 2-2.076l-.116-5.342c-.024-1.107-.936-1.985-2.043-1.96l-4.14.098-4.115.391z" fillOpacity=".6"/>
|
||||
<path d="M12.062 10.395l4.115-.391 4.14-.098c1.107-.025 2.02-.926 1.997-2.033l-.116-5.511c-.024-1.127-.946-2.035-2.073-2.008l-3.325.081-4.738 9.96z" fillOpacity=".4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 731 B |
3
src/assets/channels/telegram.svg
Normal file
3
src/assets/channels/telegram.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 732 B |
3
src/assets/channels/whatsapp.svg
Normal file
3
src/assets/channels/whatsapp.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -6,17 +6,18 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Home,
|
||||
MessageSquare,
|
||||
Radio,
|
||||
Network,
|
||||
Puzzle,
|
||||
Clock,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Settings as SettingsIcon,
|
||||
PanelLeftClose,
|
||||
PanelLeft,
|
||||
Plus,
|
||||
Terminal,
|
||||
ExternalLink,
|
||||
Trash2,
|
||||
Cpu,
|
||||
LayoutDashboard,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
@@ -26,6 +27,7 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
|
||||
import { hostApiFetch } from '@/lib/host-api';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import logoSvg from '@/assets/logo.svg';
|
||||
|
||||
type SessionBucketKey =
|
||||
| 'today'
|
||||
@@ -51,23 +53,29 @@ function NavItem({ to, icon, label, badge, collapsed, onClick }: NavItemProps) {
|
||||
onClick={onClick}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
|
||||
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground',
|
||||
collapsed && 'justify-center px-2'
|
||||
? 'bg-black/5 dark:bg-white/10 text-foreground'
|
||||
: '',
|
||||
collapsed && 'justify-center px-0'
|
||||
)
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
{!collapsed && (
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<span className="flex-1">{label}</span>
|
||||
{badge && (
|
||||
<Badge variant="secondary" className="ml-auto">
|
||||
{badge}
|
||||
</Badge>
|
||||
<div className={cn("flex shrink-0 items-center justify-center", isActive ? "text-foreground" : "text-muted-foreground")}>
|
||||
{icon}
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<>
|
||||
<span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{label}</span>
|
||||
{badge && (
|
||||
<Badge variant="secondary" className="ml-auto shrink-0">
|
||||
{badge}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -161,23 +169,46 @@ export function Sidebar() {
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ to: '/cron', icon: <Clock className="h-5 w-5" />, label: t('sidebar.cronTasks') },
|
||||
{ to: '/skills', icon: <Puzzle className="h-5 w-5" />, label: t('sidebar.skills') },
|
||||
{ to: '/channels', icon: <Radio className="h-5 w-5" />, label: t('sidebar.channels') },
|
||||
{ to: '/dashboard', icon: <Home className="h-5 w-5" />, label: t('sidebar.dashboard') },
|
||||
{ to: '/settings', icon: <Settings className="h-5 w-5" />, label: t('sidebar.settings') },
|
||||
{ to: '/models', icon: <Cpu className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.models', 'Models') },
|
||||
{ to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels') },
|
||||
{ to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills') },
|
||||
{ to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks') },
|
||||
{ to: '/dashboard', icon: <LayoutDashboard className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.dashboard') },
|
||||
];
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
'flex shrink-0 flex-col border-r bg-background transition-all duration-300',
|
||||
'flex shrink-0 flex-col border-r bg-[#eae8e1]/60 dark:bg-background transition-all duration-300',
|
||||
sidebarCollapsed ? 'w-16' : 'w-64'
|
||||
)}
|
||||
>
|
||||
{/* Top Header Toggle */}
|
||||
<div className={cn("flex items-center p-2 h-12", sidebarCollapsed ? "justify-center" : "justify-between")}>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2 px-2 overflow-hidden">
|
||||
<img src={logoSvg} alt="ClawX" className="h-5 w-auto shrink-0" />
|
||||
<span className="text-sm font-semibold truncate whitespace-nowrap text-foreground/90">
|
||||
ClawX
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-black/5 dark:hover:bg-white/10"
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
>
|
||||
{sidebarCollapsed ? (
|
||||
<PanelLeft className="h-[18px] w-[18px]" />
|
||||
) : (
|
||||
<PanelLeftClose className="h-[18px] w-[18px]" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-hidden flex flex-col p-2 gap-1">
|
||||
{/* Chat nav item: acts as "New Chat" button, never highlighted as active */}
|
||||
<nav className="flex flex-col px-2 gap-0.5">
|
||||
<button
|
||||
onClick={() => {
|
||||
const { messages } = useChatStore.getState();
|
||||
@@ -185,13 +216,15 @@ export function Sidebar() {
|
||||
navigate('/');
|
||||
}}
|
||||
className={cn(
|
||||
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
||||
'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
|
||||
sidebarCollapsed && 'justify-center px-2',
|
||||
'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors mb-2',
|
||||
'bg-white dark:bg-accent shadow-sm border border-black/5 dark:border-white/10 text-foreground',
|
||||
sidebarCollapsed && 'justify-center px-0',
|
||||
)}
|
||||
>
|
||||
<MessageSquare className="h-5 w-5 shrink-0" />
|
||||
{!sidebarCollapsed && <span className="flex-1 text-left">{t('sidebar.newChat')}</span>}
|
||||
<div className="flex shrink-0 items-center justify-center text-foreground/80">
|
||||
<Plus className="h-[18px] w-[18px]" strokeWidth={2} />
|
||||
</div>
|
||||
{!sidebarCollapsed && <span className="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.newChat')}</span>}
|
||||
</button>
|
||||
|
||||
{navItems.map((item) => (
|
||||
@@ -201,83 +234,93 @@ export function Sidebar() {
|
||||
collapsed={sidebarCollapsed}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Session list — below Settings, only when expanded */}
|
||||
{!sidebarCollapsed && sessions.length > 0 && (
|
||||
<div className="mt-1 overflow-y-auto max-h-72 space-y-0.5">
|
||||
{sessionBuckets.map((bucket) => (
|
||||
bucket.sessions.length > 0 ? (
|
||||
<div key={bucket.key} className="pt-1">
|
||||
<div className="px-3 py-1 text-[11px] font-medium text-muted-foreground/80">
|
||||
{bucket.label}
|
||||
</div>
|
||||
{bucket.sessions.map((s) => (
|
||||
<div key={s.key} className="group relative flex items-center">
|
||||
<button
|
||||
onClick={() => { switchSession(s.key); navigate('/'); }}
|
||||
className={cn(
|
||||
'w-full text-left rounded-md px-3 py-1.5 text-sm truncate transition-colors pr-7',
|
||||
'hover:bg-accent hover:text-accent-foreground',
|
||||
isOnChat && currentSessionKey === s.key
|
||||
? 'bg-accent/60 text-accent-foreground font-medium'
|
||||
: 'text-muted-foreground',
|
||||
)}
|
||||
>
|
||||
{getSessionLabel(s.key, s.displayName, s.label)}
|
||||
</button>
|
||||
<button
|
||||
aria-label="Delete session"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSessionToDelete({
|
||||
key: s.key,
|
||||
label: getSessionLabel(s.key, s.displayName, s.label),
|
||||
});
|
||||
}}
|
||||
className={cn(
|
||||
'absolute right-1 flex items-center justify-center rounded p-0.5 transition-opacity',
|
||||
'opacity-0 group-hover:opacity-100',
|
||||
'text-muted-foreground hover:text-destructive hover:bg-destructive/10',
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Session list — below Settings, only when expanded */}
|
||||
{!sidebarCollapsed && sessions.length > 0 && (
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden px-2 mt-4 space-y-0.5 pb-2">
|
||||
{sessionBuckets.map((bucket) => (
|
||||
bucket.sessions.length > 0 ? (
|
||||
<div key={bucket.key} className="pt-2">
|
||||
<div className="px-2.5 pb-1 text-[11px] font-medium text-muted-foreground/60 tracking-tight">
|
||||
{bucket.label}
|
||||
</div>
|
||||
{bucket.sessions.map((s) => (
|
||||
<div key={s.key} className="group relative flex items-center">
|
||||
<button
|
||||
onClick={() => { switchSession(s.key); navigate('/'); }}
|
||||
className={cn(
|
||||
'w-full text-left rounded-lg px-2.5 py-1.5 text-[13px] truncate transition-colors pr-7',
|
||||
'hover:bg-black/5 dark:hover:bg-white/5',
|
||||
isOnChat && currentSessionKey === s.key
|
||||
? 'bg-black/5 dark:bg-white/10 text-foreground font-medium'
|
||||
: 'text-foreground/75',
|
||||
)}
|
||||
>
|
||||
{getSessionLabel(s.key, s.displayName, s.label)}
|
||||
</button>
|
||||
<button
|
||||
aria-label="Delete session"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSessionToDelete({
|
||||
key: s.key,
|
||||
label: getSessionLabel(s.key, s.displayName, s.label),
|
||||
});
|
||||
}}
|
||||
className={cn(
|
||||
'absolute right-1 flex items-center justify-center rounded p-0.5 transition-opacity',
|
||||
'opacity-0 group-hover:opacity-100',
|
||||
'text-muted-foreground hover:text-destructive hover:bg-destructive/10',
|
||||
)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-2 space-y-2">
|
||||
<div className="p-2 mt-auto">
|
||||
{devModeUnlocked && !sidebarCollapsed && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full justify-start"
|
||||
className="w-full justify-start mb-1 hover:bg-black/5 dark:hover:bg-white/5"
|
||||
onClick={openDevConsole}
|
||||
>
|
||||
<Terminal className="h-4 w-4 mr-2" />
|
||||
{t('sidebar.devConsole')}
|
||||
<ExternalLink className="h-3 w-3 ml-auto" />
|
||||
<div className="flex shrink-0 items-center justify-center text-muted-foreground">
|
||||
<Terminal className="h-[18px] w-[18px] mr-2.5" strokeWidth={2} />
|
||||
</div>
|
||||
<span className="font-medium text-[14px] flex-1 text-left text-foreground/80 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.devConsole')}</span>
|
||||
<ExternalLink className="h-3 w-3 shrink-0 ml-auto opacity-50 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="w-full"
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
>
|
||||
{sidebarCollapsed ? (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
|
||||
'hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80',
|
||||
isActive && 'bg-black/5 dark:bg-white/10 text-foreground',
|
||||
sidebarCollapsed ? 'justify-center px-0' : ''
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<div className={cn("flex shrink-0 items-center justify-center", isActive ? "text-foreground" : "text-muted-foreground")}>
|
||||
<SettingsIcon className="h-[18px] w-[18px]" strokeWidth={2} />
|
||||
</div>
|
||||
{!sidebarCollapsed && <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{t('sidebar.settings')}</span>}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
136
src/components/ui/sheet.tsx
Normal file
136
src/components/ui/sheet.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/30 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@@ -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
@@ -4,7 +4,8 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
/* #f1ede1 */
|
||||
--background: 45 36.4% 91.4%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
@@ -53,6 +54,7 @@
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
@@ -151,10 +153,14 @@
|
||||
|
||||
/* Typing indicator animation */
|
||||
@keyframes bounce {
|
||||
0%, 60%, 100% {
|
||||
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user