build: Add community-ui React app with persona grid, OTP login, and detail pages
New React app at apps/community-ui (port 3002) using shared packages. - OTP-only login flow via @persona-community-5/auth - Responsive persona card grid with generating state overlays - Create persona panel (Sheet sliding from right) with description, gender, name - Detail page with banner header, avatar, image gallery with lightbox, video players - Real-time updates via useEventChannel subscribed to channel:personas Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rdev-worker
parent
66ceb7e55f
commit
b4eded185f
18
apps/community-ui/.eslintrc.cjs
Normal file
18
apps/community-ui/.eslintrc.cjs
Normal file
@ -0,0 +1,18 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
};
|
||||
34
apps/community-ui/Dockerfile
Normal file
34
apps/community-ui/Dockerfile
Normal file
@ -0,0 +1,34 @@
|
||||
# Build stage - using pnpm for workspace dependency resolution
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
# Install pnpm
|
||||
RUN npm install -g pnpm
|
||||
|
||||
WORKDIR /workspace
|
||||
|
||||
# Copy workspace configuration files
|
||||
COPY pnpm-workspace.yaml package.json pnpm-lock.yaml* ./
|
||||
|
||||
# Copy shared packages (required for workspace:* dependencies)
|
||||
COPY packages/ ./packages/
|
||||
|
||||
# Copy the app component
|
||||
COPY apps/community-ui/ ./apps/community-ui/
|
||||
|
||||
# Install dependencies using pnpm (resolves workspace:* correctly)
|
||||
RUN pnpm install --frozen-lockfile || pnpm install
|
||||
|
||||
# Build the app
|
||||
WORKDIR /workspace/apps/community-ui
|
||||
RUN pnpm build
|
||||
|
||||
# Production stage
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copy built assets
|
||||
COPY --from=build /workspace/apps/community-ui/dist /usr/share/nginx/html
|
||||
COPY apps/community-ui/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 3002
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
6
apps/community-ui/component.yaml
Normal file
6
apps/community-ui/component.yaml
Normal file
@ -0,0 +1,6 @@
|
||||
name: community-ui
|
||||
type: app
|
||||
port: 3002
|
||||
path: apps/community-ui
|
||||
stack: react
|
||||
dependencies: []
|
||||
13
apps/community-ui/index.html
Normal file
13
apps/community-ui/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>community-ui | persona-community-5</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
26
apps/community-ui/nginx.conf
Normal file
26
apps/community-ui/nginx.conf
Normal file
@ -0,0 +1,26 @@
|
||||
server {
|
||||
listen 3002;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
gzip on;
|
||||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
|
||||
|
||||
# Cache static assets
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# SPA fallback
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
40
apps/community-ui/package.json
Normal file
40
apps/community-ui/package.json
Normal file
@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "community-ui",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 3002",
|
||||
"build": "tsc && vite build",
|
||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview --port 3002",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@persona-community-5/api-client": "workspace:*",
|
||||
"@persona-community-5/auth": "workspace:*",
|
||||
"@persona-community-5/layout": "workspace:*",
|
||||
"@persona-community-5/logger": "workspace:*",
|
||||
"@persona-community-5/realtime": "workspace:*",
|
||||
"@persona-community-5/ui": "workspace:*",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.23.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.13.1",
|
||||
"@typescript-eslint/parser": "^7.13.1",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.7",
|
||||
"postcss": "^8.4.38",
|
||||
"prettier": "^3.3.2",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.1"
|
||||
}
|
||||
}
|
||||
6
apps/community-ui/postcss.config.cjs
Normal file
6
apps/community-ui/postcss.config.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
1
apps/community-ui/public/vite.svg
Normal file
1
apps/community-ui/public/vite.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFBD4F"></stop><stop offset="100%" stop-color="#FF980E"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
111
apps/community-ui/src/App.tsx
Normal file
111
apps/community-ui/src/App.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import { useLocation, useNavigate, Routes, Route } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth, ProtectedRoute } from '@persona-community-5/auth';
|
||||
import { DashboardShell, Sidebar, Header, type NavItem } from '@persona-community-5/layout';
|
||||
import {
|
||||
Home,
|
||||
Loader2,
|
||||
} from '@persona-community-5/ui';
|
||||
import { LoginPage } from './pages/LoginPage';
|
||||
import { CommunityPage } from './pages/CommunityPage';
|
||||
import { PersonaDetailPage } from './pages/PersonaDetailPage';
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ label: 'Community', href: '/', icon: Home },
|
||||
];
|
||||
|
||||
function LoadingScreen() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[var(--surface-100)]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[var(--accent)]" />
|
||||
<p className="text-sm text-[var(--text-muted)]">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppLayout() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const itemsWithActive = navItems.map((item) => ({
|
||||
...item,
|
||||
active: location.pathname === item.href,
|
||||
}));
|
||||
|
||||
const pageTitle = location.pathname.startsWith('/personas/') ? 'Persona' : 'Community';
|
||||
|
||||
return (
|
||||
<DashboardShell
|
||||
sidebar={
|
||||
<Sidebar
|
||||
logo={
|
||||
<span className="font-semibold text-lg">Persona Community</span>
|
||||
}
|
||||
items={itemsWithActive}
|
||||
onNavigate={(href) => navigate(href)}
|
||||
footer={
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm text-[var(--text-muted)] truncate">
|
||||
{user?.email || ''}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => { await logout(); navigate('/login'); }}
|
||||
className="text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] text-left"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
}
|
||||
header={
|
||||
<Header title={pageTitle} />
|
||||
}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<CommunityPage />} />
|
||||
<Route path="/personas/:id" element={<PersonaDetailPage />} />
|
||||
</Routes>
|
||||
</DashboardShell>
|
||||
);
|
||||
}
|
||||
|
||||
function AppRoutes() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route
|
||||
path="/*"
|
||||
element={
|
||||
<ProtectedRoute
|
||||
redirectTo="/login"
|
||||
onRedirect={(path) => {
|
||||
navigate(path, { state: { from: location.pathname }, replace: true });
|
||||
}}
|
||||
fallback={<LoadingScreen />}
|
||||
>
|
||||
<AppLayout />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const apiBaseUrl = import.meta.env.VITE_API_URL || '';
|
||||
|
||||
return (
|
||||
<AuthProvider authBaseUrl={`${apiBaseUrl}/api/persona-api`}>
|
||||
<AppRoutes />
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
6
apps/community-ui/src/index.css
Normal file
6
apps/community-ui/src/index.css
Normal file
@ -0,0 +1,6 @@
|
||||
/* Import design system tokens */
|
||||
@import '@persona-community-5/ui/styles';
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
8
apps/community-ui/src/lib/logger.ts
Normal file
8
apps/community-ui/src/lib/logger.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { createLogger, installGlobalHandlers } from '@persona-community-5/logger';
|
||||
|
||||
export const logger = createLogger({
|
||||
level: import.meta.env.DEV ? 'debug' : 'info',
|
||||
service: 'community-ui',
|
||||
});
|
||||
|
||||
installGlobalHandlers(logger);
|
||||
19
apps/community-ui/src/main.tsx
Normal file
19
apps/community-ui/src/main.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
import './lib/logger';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter
|
||||
future={{
|
||||
v7_startTransition: true,
|
||||
v7_relativeSplatPath: true,
|
||||
}}
|
||||
>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
368
apps/community-ui/src/pages/CommunityPage.tsx
Normal file
368
apps/community-ui/src/pages/CommunityPage.tsx
Normal file
@ -0,0 +1,368 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@persona-community-5/auth';
|
||||
import { useEventChannel, type ChannelEvent } from '@persona-community-5/realtime';
|
||||
import {
|
||||
Button,
|
||||
Badge,
|
||||
Textarea,
|
||||
Input,
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
Plus,
|
||||
ImageIcon,
|
||||
Video,
|
||||
Loader2,
|
||||
} from '@persona-community-5/ui';
|
||||
|
||||
interface Persona {
|
||||
id: string;
|
||||
name: string;
|
||||
handle: string;
|
||||
gender: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
anchor_url?: string;
|
||||
avatar_url?: string;
|
||||
banner_url?: string;
|
||||
image_urls: string[];
|
||||
video_urls: string[];
|
||||
status: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const STAGE_LABELS: Record<string, string> = {
|
||||
spec: 'Crafting identity...',
|
||||
anchor: 'Generating anchor...',
|
||||
avatar: 'Creating avatar...',
|
||||
banner: 'Designing banner...',
|
||||
gallery_batch: 'Generating gallery...',
|
||||
video: 'Producing videos...',
|
||||
};
|
||||
|
||||
type Gender = 'woman' | 'man' | 'non_binary';
|
||||
|
||||
const GENDER_OPTIONS: { value: Gender; label: string }[] = [
|
||||
{ value: 'woman', label: 'Female' },
|
||||
{ value: 'man', label: 'Male' },
|
||||
{ value: 'non_binary', label: 'Non-binary' },
|
||||
];
|
||||
|
||||
function PersonaCard({
|
||||
persona,
|
||||
stage,
|
||||
onClick,
|
||||
}: {
|
||||
persona: Persona;
|
||||
stage?: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const isGenerating = persona.status === 'pending' || persona.status === 'generating';
|
||||
const tags = persona.tags?.slice(0, 4) ?? [];
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className="group relative rounded-xl overflow-hidden border border-[var(--border-muted)] bg-[var(--surface-100)] text-left transition-all hover:border-[var(--border-hover)] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
|
||||
>
|
||||
{/* Banner */}
|
||||
<div className="relative h-40 bg-[var(--surface-200)]">
|
||||
{persona.banner_url && (
|
||||
<img
|
||||
src={persona.banner_url}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Generating overlay */}
|
||||
{isGenerating && (
|
||||
<div className="absolute inset-0 bg-black/50 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="h-6 w-6 rounded-full border-2 border-[var(--accent)] border-t-transparent animate-spin" />
|
||||
<span className="text-xs text-white/80">
|
||||
{stage ? STAGE_LABELS[stage] || stage : 'Generating...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Avatar overlay */}
|
||||
<div className="absolute -bottom-5 left-4">
|
||||
<div className="h-12 w-12 rounded-full border-2 border-[var(--background)] bg-[var(--surface-300)] overflow-hidden">
|
||||
{persona.avatar_url ? (
|
||||
<img
|
||||
src={persona.avatar_url}
|
||||
alt={persona.name}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full flex items-center justify-center text-[var(--text-muted)] text-sm font-medium">
|
||||
{persona.name?.charAt(0)?.toUpperCase() || '?'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 pt-7">
|
||||
<h3 className="text-sm font-semibold text-[var(--text-primary)] truncate">
|
||||
{persona.name}
|
||||
</h3>
|
||||
<p className="text-xs text-[var(--text-muted)] truncate">@{persona.handle}</p>
|
||||
|
||||
{/* Tags */}
|
||||
{tags.length > 0 && (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-[10px] px-1.5 py-0">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Media badges */}
|
||||
<div className="mt-3 flex items-center gap-3 text-xs text-[var(--text-muted)]">
|
||||
{persona.image_urls?.length > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<ImageIcon className="h-3 w-3" />
|
||||
{persona.image_urls.length}
|
||||
</span>
|
||||
)}
|
||||
{persona.video_urls?.length > 0 && (
|
||||
<span className="flex items-center gap-1">
|
||||
<Video className="h-3 w-3" />
|
||||
{persona.video_urls.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function CommunityPage() {
|
||||
const navigate = useNavigate();
|
||||
const { getToken } = useAuth();
|
||||
const [personas, setPersonas] = useState<Persona[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [description, setDescription] = useState('');
|
||||
const [gender, setGender] = useState<Gender>('woman');
|
||||
const [customName, setCustomName] = useState('');
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [stages, setStages] = useState<Record<string, string>>({});
|
||||
|
||||
const apiBaseUrl = import.meta.env.VITE_API_URL || '';
|
||||
|
||||
const fetchPersonas = useCallback(async () => {
|
||||
try {
|
||||
const token = await getToken();
|
||||
const res = await fetch(`${apiBaseUrl}/api/persona-api/personas?limit=100`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to load personas');
|
||||
const json = await res.json();
|
||||
setPersonas(json.data ?? []);
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [apiBaseUrl, getToken]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPersonas();
|
||||
}, [fetchPersonas]);
|
||||
|
||||
// Realtime: subscribe to channel:personas
|
||||
const handleEvent = useCallback(
|
||||
(event: ChannelEvent) => {
|
||||
if (event.type === 'persona_updated') {
|
||||
const updated = event.persona as Persona | undefined;
|
||||
if (updated) {
|
||||
setPersonas((prev) => {
|
||||
const idx = prev.findIndex((p) => p.id === updated.id);
|
||||
if (idx >= 0) {
|
||||
const next = [...prev];
|
||||
next[idx] = updated;
|
||||
return next;
|
||||
}
|
||||
return [updated, ...prev];
|
||||
});
|
||||
} else {
|
||||
// Refetch if we don't have inline data
|
||||
fetchPersonas();
|
||||
}
|
||||
}
|
||||
if (event.type === 'job_update') {
|
||||
const personaId = event.persona_id as string | undefined;
|
||||
const stage = event.stage as string | undefined;
|
||||
if (personaId && stage) {
|
||||
setStages((prev) => ({ ...prev, [personaId]: stage }));
|
||||
}
|
||||
}
|
||||
},
|
||||
[fetchPersonas]
|
||||
);
|
||||
|
||||
useEventChannel({
|
||||
endpoint: `${apiBaseUrl}/api/persona-api/events`,
|
||||
channel: 'channel:personas',
|
||||
onEvent: handleEvent,
|
||||
});
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setCreateError(null);
|
||||
setCreating(true);
|
||||
|
||||
try {
|
||||
const token = await getToken();
|
||||
const res = await fetch(`${apiBaseUrl}/api/persona-api/personas`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
description,
|
||||
gender,
|
||||
custom_name: customName || undefined,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const json = await res.json().catch(() => null);
|
||||
throw new Error(json?.error?.message || 'Failed to create persona');
|
||||
}
|
||||
|
||||
const json = await res.json();
|
||||
const newPersona = json.data as Persona;
|
||||
|
||||
// Add immediately with generating state
|
||||
setPersonas((prev) => [newPersona, ...prev]);
|
||||
setCreateOpen(false);
|
||||
setDescription('');
|
||||
setCustomName('');
|
||||
setGender('woman');
|
||||
} catch (err) {
|
||||
setCreateError(err instanceof Error ? err.message : 'Failed to create persona');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold text-[var(--text-primary)]">Personas</h2>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Create Persona
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[var(--accent)]" />
|
||||
</div>
|
||||
) : personas.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-[var(--text-muted)]">
|
||||
<p className="text-sm">No personas yet. Create your first one!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{personas.map((persona) => (
|
||||
<PersonaCard
|
||||
key={persona.id}
|
||||
persona={persona}
|
||||
stage={stages[persona.id]}
|
||||
onClick={() => navigate(`/personas/${persona.id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Panel (Sheet sliding from right) */}
|
||||
<Sheet open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<SheetContent side="right" className="overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Create Persona</SheetTitle>
|
||||
<SheetDescription>Describe a new AI persona to generate.</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<form onSubmit={handleCreate} className="mt-6 space-y-5">
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
placeholder="Describe your persona..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
required
|
||||
rows={4}
|
||||
className="resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gender pills */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Gender
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
{GENDER_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
onClick={() => setGender(opt.value)}
|
||||
className={`px-3 py-1.5 text-sm rounded-full border transition-colors ${
|
||||
gender === opt.value
|
||||
? 'bg-[var(--accent)] text-[var(--accent-foreground)] border-[var(--accent)]'
|
||||
: 'bg-[var(--surface-100)] text-[var(--text-secondary)] border-[var(--border)] hover:border-[var(--border-hover)]'
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Optional Name */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-[var(--text-primary)]">
|
||||
Name <span className="text-[var(--text-muted)] font-normal">(optional)</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="Auto-generated if empty"
|
||||
value={customName}
|
||||
onChange={(e) => setCustomName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{createError && (
|
||||
<p className="text-sm text-[var(--error)]">{createError}</p>
|
||||
)}
|
||||
|
||||
<Button type="submit" className="w-full" disabled={creating || !description.trim()}>
|
||||
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Create
|
||||
</Button>
|
||||
</form>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
122
apps/community-ui/src/pages/LoginPage.tsx
Normal file
122
apps/community-ui/src/pages/LoginPage.tsx
Normal file
@ -0,0 +1,122 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@persona-community-5/auth';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
FormField,
|
||||
Alert,
|
||||
AlertDescription,
|
||||
Loader2,
|
||||
} from '@persona-community-5/ui';
|
||||
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { sendOTP, loginWithOTP, isLoading } = useAuth();
|
||||
const [generalError, setGeneralError] = useState<string | null>(null);
|
||||
const [otpSent, setOtpSent] = useState(false);
|
||||
const [otpEmail, setOtpEmail] = useState('');
|
||||
|
||||
const from = (location.state as { from?: string })?.from || '/';
|
||||
|
||||
const handleSendOTP = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setGeneralError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const email = formData.get('email') as string;
|
||||
|
||||
try {
|
||||
await sendOTP(email);
|
||||
setOtpEmail(email);
|
||||
setOtpSent(true);
|
||||
} catch (error) {
|
||||
setGeneralError(error instanceof Error ? error.message : 'Failed to send code');
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyOTP = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setGeneralError(null);
|
||||
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const code = formData.get('code') as string;
|
||||
|
||||
try {
|
||||
await loginWithOTP({ email: otpEmail, code });
|
||||
navigate(from, { replace: true });
|
||||
} catch (error) {
|
||||
setGeneralError(error instanceof Error ? error.message : 'Invalid code');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[var(--surface-100)] p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">Welcome</CardTitle>
|
||||
<CardDescription>Sign in to the Persona Community</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
{generalError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>{generalError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{!otpSent && (
|
||||
<form onSubmit={handleSendOTP} className="space-y-4">
|
||||
<FormField
|
||||
label="Email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
required
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Send Code
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{otpSent && (
|
||||
<form onSubmit={handleVerifyOTP} className="space-y-4">
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
A 6-digit code was sent to <strong>{otpEmail}</strong>
|
||||
</p>
|
||||
<FormField
|
||||
label="Code"
|
||||
name="code"
|
||||
type="text"
|
||||
placeholder="000000"
|
||||
required
|
||||
autoComplete="one-time-code"
|
||||
autoFocus
|
||||
/>
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Verify
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full text-sm text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
|
||||
onClick={() => { setOtpSent(false); setGeneralError(null); }}
|
||||
>
|
||||
Use a different email
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
267
apps/community-ui/src/pages/PersonaDetailPage.tsx
Normal file
267
apps/community-ui/src/pages/PersonaDetailPage.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '@persona-community-5/auth';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
ArrowLeft,
|
||||
Loader2,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
X,
|
||||
} from '@persona-community-5/ui';
|
||||
|
||||
interface Persona {
|
||||
id: string;
|
||||
name: string;
|
||||
handle: string;
|
||||
gender: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
anchor_url?: string;
|
||||
avatar_url?: string;
|
||||
banner_url?: string;
|
||||
image_urls: string[];
|
||||
video_urls: string[];
|
||||
status: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const VIDEO_LABELS = [
|
||||
'Smile Reveal',
|
||||
'Personality Moment',
|
||||
'Lifestyle',
|
||||
'Invitation',
|
||||
];
|
||||
|
||||
function ImageLightbox({
|
||||
images,
|
||||
initialIndex,
|
||||
onClose,
|
||||
}: {
|
||||
images: string[];
|
||||
initialIndex: number;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [index, setIndex] = useState(initialIndex);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
if (e.key === 'ArrowLeft') setIndex((i) => (i > 0 ? i - 1 : images.length - 1));
|
||||
if (e.key === 'ArrowRight') setIndex((i) => (i < images.length - 1 ? i + 1 : 0));
|
||||
};
|
||||
window.addEventListener('keydown', handleKey);
|
||||
return () => window.removeEventListener('keydown', handleKey);
|
||||
}, [images.length, onClose]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<X className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIndex((i) => (i > 0 ? i - 1 : images.length - 1))}
|
||||
className="absolute left-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<ChevronLeft className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIndex((i) => (i < images.length - 1 ? i + 1 : 0))}
|
||||
className="absolute right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
|
||||
>
|
||||
<ChevronRight className="h-6 w-6 text-white" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<img
|
||||
src={images[index]}
|
||||
alt={`Image ${index + 1}`}
|
||||
className="max-h-[90vh] max-w-[90vw] object-contain rounded-lg"
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-4 text-sm text-white/60">
|
||||
{index + 1} / {images.length}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PersonaDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { getToken } = useAuth();
|
||||
const [persona, setPersona] = useState<Persona | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
|
||||
|
||||
const apiBaseUrl = import.meta.env.VITE_API_URL || '';
|
||||
|
||||
const fetchPersona = useCallback(async () => {
|
||||
try {
|
||||
const token = await getToken();
|
||||
const res = await fetch(`${apiBaseUrl}/api/persona-api/personas/${id}`, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
||||
});
|
||||
if (!res.ok) {
|
||||
if (res.status === 404) throw new Error('Persona not found');
|
||||
throw new Error('Failed to load persona');
|
||||
}
|
||||
const json = await res.json();
|
||||
setPersona(json.data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load persona');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [apiBaseUrl, getToken, id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPersona();
|
||||
}, [fetchPersona]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[var(--accent)]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !persona) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 gap-4">
|
||||
<p className="text-sm text-[var(--error)]">{error || 'Persona not found'}</p>
|
||||
<Button variant="outline" onClick={() => navigate('/')}>
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Back button */}
|
||||
<Button variant="ghost" onClick={() => navigate('/')} className="mb-2">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
{/* Banner header */}
|
||||
<div className="relative rounded-xl overflow-hidden">
|
||||
<div className="h-48 md:h-64 bg-[var(--surface-200)]">
|
||||
{persona.banner_url && (
|
||||
<img
|
||||
src={persona.banner_url}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Avatar centered */}
|
||||
<div className="flex justify-center -mt-16">
|
||||
<div className="relative h-32 w-32 rounded-full border-4 border-[var(--background)] bg-[var(--surface-300)] overflow-hidden">
|
||||
{persona.avatar_url ? (
|
||||
<img
|
||||
src={persona.avatar_url}
|
||||
alt={persona.name}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full flex items-center justify-center text-[var(--text-muted)] text-3xl font-bold">
|
||||
{persona.name?.charAt(0)?.toUpperCase() || '?'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name + handle + tags */}
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-2xl font-bold text-[var(--text-primary)]">{persona.name}</h1>
|
||||
<p className="text-sm text-[var(--text-muted)]">@{persona.handle}</p>
|
||||
{persona.tags?.length > 0 && (
|
||||
<div className="flex flex-wrap justify-center gap-2 mt-3">
|
||||
{persona.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-[var(--text-secondary)] max-w-xl mx-auto mt-4">
|
||||
{persona.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Image gallery */}
|
||||
{persona.image_urls?.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-[var(--text-primary)]">Gallery</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{persona.image_urls.map((url, i) => (
|
||||
<button
|
||||
key={url}
|
||||
type="button"
|
||||
onClick={() => setLightboxIndex(i)}
|
||||
className="aspect-square rounded-lg overflow-hidden bg-[var(--surface-200)] hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-[var(--accent)]"
|
||||
>
|
||||
<img
|
||||
src={url}
|
||||
alt={`${persona.name} image ${i + 1}`}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Videos section */}
|
||||
{persona.video_urls?.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold text-[var(--text-primary)]">Videos</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{persona.video_urls.map((url, i) => (
|
||||
<div key={url} className="space-y-2">
|
||||
<p className="text-sm font-medium text-[var(--text-secondary)]">
|
||||
{VIDEO_LABELS[i] || `Video ${i + 1}`}
|
||||
</p>
|
||||
<div className="rounded-lg overflow-hidden bg-[var(--surface-200)]">
|
||||
<video
|
||||
src={url}
|
||||
controls
|
||||
className="w-full"
|
||||
preload="metadata"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lightbox */}
|
||||
{lightboxIndex !== null && (
|
||||
<ImageLightbox
|
||||
images={persona.image_urls}
|
||||
initialIndex={lightboxIndex}
|
||||
onClose={() => setLightboxIndex(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
apps/community-ui/src/vite-env.d.ts
vendored
Normal file
1
apps/community-ui/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
16
apps/community-ui/tailwind.config.ts
Normal file
16
apps/community-ui/tailwind.config.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.{js,ts,jsx,tsx}',
|
||||
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
|
||||
'../../packages/layout/src/**/*.{js,ts,jsx,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
25
apps/community-ui/tsconfig.json
Normal file
25
apps/community-ui/tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
11
apps/community-ui/tsconfig.node.json
Normal file
11
apps/community-ui/tsconfig.node.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
30
apps/community-ui/vite.config.ts
Normal file
30
apps/community-ui/vite.config.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3002,
|
||||
proxy: {
|
||||
'/api/persona-api/events': {
|
||||
target: 'http://localhost:8001',
|
||||
changeOrigin: true,
|
||||
configure: (proxy) => {
|
||||
proxy.on('proxyRes', (proxyRes) => {
|
||||
if (proxyRes.headers['content-type']?.includes('text/event-stream')) {
|
||||
proxyRes.headers['cache-control'] = 'no-cache';
|
||||
proxyRes.headers['x-accel-buffering'] = 'no';
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
'/api': {
|
||||
target: 'http://localhost:8001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
port: 3002,
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user