feat: City Rooms routing implementation
Backend:
- GET /api/v1/city/rooms - list all city rooms
- GET /api/v1/city/rooms/{slug} - get room by slug with host agents
Frontend:
- Updated /city/[slug] page with host agents section
- Added breadcrumb navigation
- Updated API client to fetch room by slug
- Added rewrite for /api/city/rooms/:slug
Task doc: TASK_PHASE_CITY_ROOMS_ROUTING_v1.md
This commit is contained in:
Apple
@@ -36,6 +36,11 @@ const nextConfig: NextConfig = {
|
||||
source: '/api/public/:path*',
|
||||
destination: `${internalApiUrl}/public/:path*`,
|
||||
},
|
||||
// City Rooms API (specific slug endpoint) -> /api/v1/city/rooms
|
||||
{
|
||||
source: '/api/city/rooms/:slug',
|
||||
destination: `${internalApiUrl}/api/v1/city/rooms/:slug`,
|
||||
},
|
||||
// City API -> /city
|
||||
{
|
||||
source: '/api/city/:path*',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from 'next/link'
|
||||
import { ArrowLeft, Users, FileText, Clock, MessageCircle } from 'lucide-react'
|
||||
import { ArrowLeft, Users, FileText, Clock, MessageCircle, Home, Bot } from 'lucide-react'
|
||||
import { api, CityRoom } from '@/lib/api'
|
||||
import { formatDate } from '@/lib/utils'
|
||||
import { notFound } from 'next/navigation'
|
||||
@@ -8,13 +8,28 @@ import { CityChatWidget } from '@/components/city/CityChatWidget'
|
||||
// Force dynamic rendering - don't prerender at build time
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
interface HostAgent {
|
||||
id: string
|
||||
display_name: string
|
||||
avatar_url?: string
|
||||
kind?: string
|
||||
role: string
|
||||
}
|
||||
|
||||
interface CityRoomDetail extends CityRoom {
|
||||
host_agents?: HostAgent[]
|
||||
chat_available?: boolean
|
||||
scope?: string
|
||||
room_role?: string
|
||||
}
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ slug: string }>
|
||||
}
|
||||
|
||||
async function getRoom(slug: string): Promise<CityRoom | null> {
|
||||
async function getRoom(slug: string): Promise<CityRoomDetail | null> {
|
||||
try {
|
||||
return await api.getCityRoom(slug)
|
||||
return await api.getCityRoom(slug) as CityRoomDetail
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch room:', error)
|
||||
return null
|
||||
@@ -34,13 +49,18 @@ export default async function RoomPage({ params }: PageProps) {
|
||||
{/* Header */}
|
||||
<div className="px-4 py-6 border-b border-white/5">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<Link
|
||||
href="/city"
|
||||
className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors mb-4"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Назад до кімнат
|
||||
</Link>
|
||||
{/* Breadcrumb */}
|
||||
<nav className="flex items-center gap-2 text-sm mb-4">
|
||||
<Link href="/" className="text-slate-400 hover:text-white transition-colors">
|
||||
<Home className="w-4 h-4" />
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<Link href="/city" className="text-slate-400 hover:text-white transition-colors">
|
||||
City
|
||||
</Link>
|
||||
<span className="text-slate-600">/</span>
|
||||
<span className="text-cyan-400">{room.name}</span>
|
||||
</nav>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
@@ -94,6 +114,51 @@ export default async function RoomPage({ params }: PageProps) {
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Host Agents */}
|
||||
{room.host_agents && room.host_agents.length > 0 && (
|
||||
<div className="glass-panel p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
<Bot className="w-5 h-5 text-violet-400" />
|
||||
Агенти кімнати
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3">
|
||||
{room.host_agents.map((agent) => (
|
||||
<Link
|
||||
key={agent.id}
|
||||
href={`/agents/${agent.id}`}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors group"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500/30 to-purple-600/30 flex items-center justify-center overflow-hidden">
|
||||
{agent.avatar_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={agent.avatar_url}
|
||||
alt={agent.display_name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Bot className="w-5 h-5 text-violet-400" />
|
||||
)}
|
||||
</div>
|
||||
{/* Presence indicator */}
|
||||
<span className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-gray-500 ring-2 ring-slate-900" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white truncate group-hover:text-violet-400 transition-colors">
|
||||
{agent.display_name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 capitalize">
|
||||
{agent.role} • {agent.kind || 'agent'}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Room Info */}
|
||||
<div className="glass-panel p-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||||
@@ -102,8 +167,9 @@ export default async function RoomPage({ params }: PageProps) {
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<InfoRow label="ID" value={room.id} />
|
||||
<InfoRow label="Тип" value={room.scope || 'city'} />
|
||||
<InfoRow label="Slug" value={room.slug} />
|
||||
{room.room_role && <InfoRow label="Роль" value={room.room_role} />}
|
||||
<InfoRow
|
||||
label="Створено"
|
||||
value={formatDate(room.created_at)}
|
||||
@@ -122,7 +188,7 @@ export default async function RoomPage({ params }: PageProps) {
|
||||
Учасники онлайн
|
||||
</h3>
|
||||
|
||||
{room.members_online > 0 ? (
|
||||
{room.members_online && room.members_online > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Array.from({ length: Math.min(room.members_online, 8) }).map((_, i) => (
|
||||
<div
|
||||
|
||||
@@ -145,8 +145,16 @@ class ApiClient {
|
||||
}
|
||||
|
||||
async getCityRoom(slug: string): Promise<CityRoom | null> {
|
||||
const rooms = await this.getCityRooms()
|
||||
return rooms.find(r => r.slug === slug) || null
|
||||
try {
|
||||
// Server-side: call backend directly, client-side: use proxy
|
||||
const endpoint = typeof window === 'undefined'
|
||||
? `/api/v1/city/rooms/${slug}`
|
||||
: `/api/city/rooms/${slug}`
|
||||
return await this.fetch<CityRoom>(endpoint)
|
||||
} catch (error) {
|
||||
console.error(`Failed to fetch city room ${slug}:`, error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Second Me
|
||||
|
||||
Reference in New Issue
Block a user