193 lines
7.3 KiB
TypeScript
193 lines
7.3 KiB
TypeScript
import { User, Brain, MessageSquare, Target, Sparkles, Activity, Clock } from 'lucide-react'
|
||
import { api, SecondMeProfile } from '@/lib/api'
|
||
import { formatRelativeTime } from '@/lib/utils'
|
||
|
||
// Force dynamic rendering - don't prerender at build time
|
||
export const dynamic = 'force-dynamic'
|
||
|
||
async function getProfile(): Promise<SecondMeProfile | null> {
|
||
try {
|
||
return await api.getSecondMeProfile()
|
||
} catch (error) {
|
||
console.error('Failed to fetch SecondMe profile:', error)
|
||
return null
|
||
}
|
||
}
|
||
|
||
export default async function SecondMePage() {
|
||
const profile = await getProfile()
|
||
|
||
return (
|
||
<div className="min-h-screen px-4 py-8">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
|
||
<User className="w-8 h-8 text-violet-400" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-white">Second Me</h1>
|
||
<p className="text-slate-400">Ваш персональний цифровий двійник</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Profile Card */}
|
||
<div className="glass-panel p-6 sm:p-8 mb-8 glow-accent">
|
||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
|
||
{/* Avatar */}
|
||
<div className="relative">
|
||
<div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
|
||
<Sparkles className="w-12 h-12 sm:w-16 sm:h-16 text-white" />
|
||
</div>
|
||
<div className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-emerald-500 border-4 border-slate-900 flex items-center justify-center">
|
||
<Activity className="w-4 h-4 text-white" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info */}
|
||
<div className="flex-1 text-center sm:text-left">
|
||
<h2 className="text-2xl font-bold text-white mb-2">
|
||
{profile?.user_id || 'Гість'}
|
||
</h2>
|
||
<p className="text-slate-400 mb-4">
|
||
Агент: <span className="text-violet-400 font-mono">{profile?.agent_id || 'N/A'}</span>
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-4 justify-center sm:justify-start">
|
||
<StatBadge
|
||
icon={MessageSquare}
|
||
label="Взаємодій"
|
||
value={profile?.total_interactions ?? 0}
|
||
/>
|
||
<StatBadge
|
||
icon={Clock}
|
||
label="Остання"
|
||
value={profile?.last_interaction ? formatRelativeTime(profile.last_interaction) : 'Ніколи'}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Feature Sections */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{/* Memory Section */}
|
||
<FeatureCard
|
||
icon={Brain}
|
||
title="Памʼять"
|
||
description="Ваш цифровий двійник запамʼятовує ваші вподобання, стиль спілкування та контекст розмов"
|
||
status="coming"
|
||
/>
|
||
|
||
{/* Tasks Section */}
|
||
<FeatureCard
|
||
icon={Target}
|
||
title="Задачі"
|
||
description="Second Me допомагає відстежувати ваші задачі та нагадує про важливі справи"
|
||
status="coming"
|
||
/>
|
||
|
||
{/* Agents Section */}
|
||
<FeatureCard
|
||
icon={Sparkles}
|
||
title="Агенти"
|
||
description="Координація з іншими AI-агентами системи для виконання складних завдань"
|
||
status="coming"
|
||
/>
|
||
</div>
|
||
|
||
{/* Chat with Second Me */}
|
||
<div className="mt-8">
|
||
<div className="glass-panel p-6">
|
||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||
<MessageSquare className="w-5 h-5 text-violet-400" />
|
||
Поговорити з Second Me
|
||
</h3>
|
||
|
||
<div className="bg-slate-800/30 rounded-xl p-6 text-center">
|
||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-violet-500/20 flex items-center justify-center">
|
||
<MessageSquare className="w-8 h-8 text-violet-400" />
|
||
</div>
|
||
<h4 className="text-white font-medium mb-2">
|
||
Чат скоро буде доступний
|
||
</h4>
|
||
<p className="text-sm text-slate-400 max-w-md mx-auto">
|
||
Функція спілкування з вашим цифровим двійником буде додана в наступному оновленні.
|
||
Second Me зможе відповідати на питання, допомагати з задачами та навчатися від вас.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Input placeholder */}
|
||
<div className="mt-4 flex gap-3">
|
||
<input
|
||
type="text"
|
||
placeholder="Напишіть повідомлення Second Me..."
|
||
disabled
|
||
className="flex-1 px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
|
||
/>
|
||
<button
|
||
disabled
|
||
className="px-6 py-3 bg-violet-500/20 text-violet-400 rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
Надіслати
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function StatBadge({
|
||
icon: Icon,
|
||
label,
|
||
value
|
||
}: {
|
||
icon: React.ComponentType<{ className?: string }>
|
||
label: string
|
||
value: number | string
|
||
}) {
|
||
return (
|
||
<div className="flex items-center gap-2 px-4 py-2 bg-slate-800/50 rounded-xl">
|
||
<Icon className="w-4 h-4 text-violet-400" />
|
||
<span className="text-sm text-slate-400">{label}:</span>
|
||
<span className="text-sm font-medium text-white">{value}</span>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function FeatureCard({
|
||
icon: Icon,
|
||
title,
|
||
description,
|
||
status,
|
||
}: {
|
||
icon: React.ComponentType<{ className?: string }>
|
||
title: string
|
||
description: string
|
||
status: 'active' | 'coming'
|
||
}) {
|
||
return (
|
||
<div className="glass-panel p-6 relative overflow-hidden">
|
||
{status === 'coming' && (
|
||
<div className="absolute top-3 right-3">
|
||
<span className="px-2 py-0.5 text-xs font-medium bg-amber-500/20 text-amber-400 rounded-full">
|
||
Скоро
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="mb-4 inline-flex p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
|
||
<Icon className="w-6 h-6 text-violet-400" />
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
|
||
<p className="text-sm text-slate-400 leading-relaxed">{description}</p>
|
||
</div>
|
||
)
|
||
}
|
||
|