initial
This commit is contained in:
35
apps/web/src/pages/Home.tsx
Normal file
35
apps/web/src/pages/Home.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { AddProjectModal } from '@/components/AddProjectModal';
|
||||
import { useProjects } from '@/hooks/useProjects';
|
||||
|
||||
export function Home() {
|
||||
const { projects, refresh } = useProjects();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const empty = projects && projects.length === 0;
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex items-center justify-center px-6">
|
||||
<div className="max-w-md text-center space-y-4">
|
||||
{empty ? (
|
||||
<>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">No projects yet</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Add a project from /opt to start chatting about its code.
|
||||
</p>
|
||||
<Button onClick={() => setOpen(true)}>Add project</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">BooCode</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Pick a project from the sidebar.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<AddProjectModal open={open} onOpenChange={setOpen} onAdded={refresh} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
apps/web/src/pages/Project.tsx
Normal file
87
apps/web/src/pages/Project.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Plus, MessageSquare, Trash2 } from 'lucide-react';
|
||||
import { api } from '@/api/client';
|
||||
import type { Project as ProjectType } from '@/api/types';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useSessions } from '@/hooks/useSessions';
|
||||
|
||||
export function Project() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { sessions, create, remove } = useSessions(id);
|
||||
const [project, setProject] = useState<ProjectType | null>(null);
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
api.projects
|
||||
.list()
|
||||
.then((list) => setProject(list.find((p) => p.id === id) ?? null))
|
||||
.catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
async function handleNew() {
|
||||
if (!id || creating) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const s = await create({});
|
||||
navigate(`/session/${s.id}`);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col">
|
||||
<header className="border-b px-6 py-3 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold tracking-tight">
|
||||
{project?.name ?? '…'}
|
||||
</h1>
|
||||
<div className="text-xs text-muted-foreground font-mono">
|
||||
{project?.path}
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleNew} disabled={creating}>
|
||||
<Plus />
|
||||
New session
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4">
|
||||
{sessions === null && (
|
||||
<div className="text-sm text-muted-foreground">Loading…</div>
|
||||
)}
|
||||
{sessions && sessions.length === 0 && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
No sessions yet. Click <span className="font-medium">New session</span> to start.
|
||||
</div>
|
||||
)}
|
||||
{sessions && sessions.length > 0 && (
|
||||
<ul className="divide-y rounded-md border">
|
||||
{sessions.map((s) => (
|
||||
<li key={s.id} className="flex items-center justify-between px-3 py-2 hover:bg-muted/50">
|
||||
<Link to={`/session/${s.id}`} className="flex-1 flex items-center gap-2 min-w-0">
|
||||
<MessageSquare className="size-3.5 opacity-70 shrink-0" />
|
||||
<span className="truncate text-sm">{s.name}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono ml-2 shrink-0">
|
||||
{s.model}
|
||||
</span>
|
||||
</Link>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label="Delete session"
|
||||
onClick={() => void remove(s.id)}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
apps/web/src/pages/Session.tsx
Normal file
119
apps/web/src/pages/Session.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { Session as SessionType } from '@/api/types';
|
||||
import { useSessionStream } from '@/hooks/useSessionStream';
|
||||
import { MessageList } from '@/components/MessageList';
|
||||
import { ChatInput } from '@/components/ChatInput';
|
||||
import { ModelPicker } from '@/components/ModelPicker';
|
||||
|
||||
export function Session() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const stream = useSessionStream(id);
|
||||
const [session, setSession] = useState<SessionType | null>(null);
|
||||
const [name, setName] = useState('');
|
||||
const [editingName, setEditingName] = useState(false);
|
||||
const lastErrorRef = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (stream.error && stream.error !== lastErrorRef.current) {
|
||||
lastErrorRef.current = stream.error;
|
||||
toast.error(stream.error);
|
||||
}
|
||||
if (!stream.error) {
|
||||
lastErrorRef.current = null;
|
||||
}
|
||||
}, [stream.error]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setSession(null);
|
||||
api.sessions
|
||||
.get(id)
|
||||
.then((s) => {
|
||||
setSession(s);
|
||||
setName(s.name);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [id]);
|
||||
|
||||
async function saveName() {
|
||||
if (!id || !session) return;
|
||||
const trimmed = name.trim();
|
||||
if (!trimmed || trimmed === session.name) {
|
||||
setName(session.name);
|
||||
setEditingName(false);
|
||||
return;
|
||||
}
|
||||
const updated = await api.sessions.update(id, { name: trimmed });
|
||||
setSession(updated);
|
||||
setEditingName(false);
|
||||
}
|
||||
|
||||
async function handleSend(content: string) {
|
||||
if (!id) return;
|
||||
await api.messages.send(id, content);
|
||||
}
|
||||
|
||||
const streaming = stream.messages.some((m) => m.status === 'streaming');
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col min-h-0">
|
||||
<header className="border-b px-4 py-2 flex items-center gap-2 shrink-0">
|
||||
{session && (
|
||||
<Link
|
||||
to={`/project/${session.project_id}`}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
aria-label="Back to project"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</Link>
|
||||
)}
|
||||
{editingName ? (
|
||||
<input
|
||||
autoFocus
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
onBlur={() => void saveName()}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') void saveName();
|
||||
if (e.key === 'Escape') {
|
||||
setName(session?.name ?? '');
|
||||
setEditingName(false);
|
||||
}
|
||||
}}
|
||||
className="bg-transparent border-b border-border px-1 py-0.5 text-sm font-medium outline-none focus:border-ring"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-medium hover:underline"
|
||||
onClick={() => setEditingName(true)}
|
||||
>
|
||||
{session?.name ?? '…'}
|
||||
</button>
|
||||
)}
|
||||
<div className="ml-auto">
|
||||
{session && (
|
||||
<ModelPicker
|
||||
value={session.model}
|
||||
onChange={async (model) => {
|
||||
const updated = await api.sessions.update(session.id, { model });
|
||||
setSession(updated);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!stream.connected && (
|
||||
<span className="text-xs text-muted-foreground">reconnecting…</span>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<MessageList messages={stream.messages} />
|
||||
|
||||
<ChatInput disabled={streaming} onSend={handleSend} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user