mirror of
https://github.com/Nezumi-2711/9router.git
synced 2026-09-22 13:38:31 +00:00
Enhance provider models and chat handling with new thinking configurations
This commit is contained in:
decolua
@@ -1,253 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const S = {
|
||||
CHECKING: "checking",
|
||||
NOT_INSTALLED: "not_installed",
|
||||
NOT_RUNNING: "not_running",
|
||||
INSTALLING: "installing",
|
||||
STARTING: "starting",
|
||||
RUNNING: "running",
|
||||
ERROR: "error",
|
||||
};
|
||||
|
||||
const POLL_INTERVAL_MS = 2000;
|
||||
const POLL_TIMEOUT_MS = 60000;
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: "terminal", label: "Terminal", desc: "Full shell access" },
|
||||
{ icon: "cast", label: "Desktop", desc: "Screen sharing" },
|
||||
{ icon: "folder_open", label: "Files", desc: "Browse & edit files" },
|
||||
];
|
||||
|
||||
const BULLETS = [
|
||||
{ icon: "qr_code_scanner", text: "Scan QR to connect instantly" },
|
||||
{ icon: "wifi_off", text: "No port forwarding needed" },
|
||||
{ icon: "devices", text: "Works on any device" },
|
||||
];
|
||||
|
||||
export default function NineRemoteModal({ isOpen, onClose, onInstalled }) {
|
||||
const [state, setState] = useState(S.CHECKING);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const pollRef = useRef(null);
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollRef.current) { clearTimeout(pollRef.current); pollRef.current = null; }
|
||||
};
|
||||
|
||||
const pollUntilRunning = useCallback(() => {
|
||||
stopPolling();
|
||||
const startedAt = Date.now();
|
||||
const poll = async () => {
|
||||
if (Date.now() - startedAt > POLL_TIMEOUT_MS) {
|
||||
setState(S.ERROR);
|
||||
setErrorMsg("9Remote is taking too long to start. Try running `9remote ui` manually.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch("/api/9remote/status");
|
||||
const data = await res.json();
|
||||
if (data.running) { setState(S.RUNNING); return; }
|
||||
} catch {}
|
||||
pollRef.current = setTimeout(poll, POLL_INTERVAL_MS);
|
||||
};
|
||||
poll();
|
||||
}, []);
|
||||
|
||||
const checkAndInit = useCallback(async () => {
|
||||
setState(S.CHECKING);
|
||||
setErrorMsg("");
|
||||
try {
|
||||
const res = await fetch("/api/9remote/status");
|
||||
const data = await res.json();
|
||||
if (data.running) { setState(S.RUNNING); return; }
|
||||
if (!data.installed) { setState(S.NOT_INSTALLED); return; }
|
||||
setState(S.NOT_RUNNING);
|
||||
} catch (err) { setState(S.ERROR); setErrorMsg(err.message); }
|
||||
}, []);
|
||||
|
||||
const handleStart = useCallback(async () => {
|
||||
setState(S.STARTING);
|
||||
try {
|
||||
const res = await fetch("/api/9remote/start", { method: "POST" });
|
||||
if (!res.ok) throw new Error("Failed to start 9Remote");
|
||||
pollUntilRunning();
|
||||
} catch (err) { setState(S.ERROR); setErrorMsg(err.message); }
|
||||
}, [pollUntilRunning]);
|
||||
|
||||
const handleInstall = async () => {
|
||||
setState(S.INSTALLING);
|
||||
setErrorMsg("");
|
||||
try {
|
||||
const res = await fetch("/api/9remote/install", { method: "POST" });
|
||||
if (!res.ok) { const d = await res.json(); throw new Error(d.error || "Install failed"); }
|
||||
onInstalled?.();
|
||||
await handleStart();
|
||||
} catch (err) { setState(S.ERROR); setErrorMsg(err.message); }
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) checkAndInit();
|
||||
else stopPolling();
|
||||
return stopPolling;
|
||||
}, [isOpen, checkAndInit]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
document.body.style.overflow = "hidden";
|
||||
const onEsc = (e) => { if (e.key === "Escape") onClose(); };
|
||||
document.addEventListener("keydown", onEsc);
|
||||
return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", onEsc); };
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const btnCfg = {
|
||||
[S.NOT_INSTALLED]: { label: "Install 9Remote", icon: "download", onClick: handleInstall, loading: false },
|
||||
[S.INSTALLING]: { label: "Installing...", icon: "hourglass_top", onClick: null, loading: true },
|
||||
[S.NOT_RUNNING]: { label: "Start 9Remote", icon: "play_arrow", onClick: handleStart, loading: false },
|
||||
[S.STARTING]: { label: "Starting...", icon: "hourglass_top", onClick: null, loading: true },
|
||||
[S.CHECKING]: { label: "Checking...", icon: "hourglass_top", onClick: null, loading: true },
|
||||
}[state];
|
||||
|
||||
// Running — iframe only
|
||||
if (state === S.RUNNING) {
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative rounded-xl overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200" style={{ width: 480, height: "90vh" }}>
|
||||
<iframe
|
||||
src="http://localhost:2208"
|
||||
className="border-0 block w-full h-full"
|
||||
title="9Remote UI"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (state === S.ERROR) {
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
<div className="relative w-full max-w-sm rounded-xl overflow-hidden shadow-2xl bg-surface border border-black/10 dark:border-white/10 animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-black/5 dark:border-white/5">
|
||||
<span className="text-sm font-semibold text-text-main">9Remote</span>
|
||||
<button onClick={onClose} className="w-7 h-7 flex items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-text-muted hover:text-text-main transition-colors">
|
||||
<span className="material-symbols-outlined text-base">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-5 py-12 px-6 text-center">
|
||||
<div className="w-14 h-14 rounded-full bg-red-500/10 flex items-center justify-center">
|
||||
<span className="material-symbols-outlined text-red-400 text-[28px]">error</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="font-semibold text-text-main">Something went wrong</p>
|
||||
<p className="text-xs text-text-muted font-mono break-all">{errorMsg}</p>
|
||||
</div>
|
||||
<button onClick={checkAndInit} className="flex items-center gap-2 px-4 py-2 rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-sm text-text-main hover:bg-black/10 dark:hover:bg-white/10 transition-colors">
|
||||
<span className="material-symbols-outlined text-base">refresh</span>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
// Main card — layout cố định, chỉ đổi button
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
|
||||
|
||||
<div className="relative w-full max-w-sm rounded-xl overflow-hidden shadow-2xl animate-in fade-in zoom-in-95 duration-200 flex flex-col bg-surface border border-black/10 dark:border-white/10"
|
||||
style={{ minHeight: "90vh" }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-black/5 dark:border-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "#FF570A" }}>
|
||||
<span className="material-symbols-outlined text-white text-base">terminal</span>
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-wider" style={{ fontFamily: "monospace", color: "#FF570A" }}>9Remote</span>
|
||||
</div>
|
||||
<button onClick={onClose} className="w-7 h-7 flex items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 text-text-muted hover:text-text-main transition-colors">
|
||||
<span className="material-symbols-outlined text-base">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="px-7 py-7 pb-9 flex flex-col flex-1 justify-between">
|
||||
{/* Hero */}
|
||||
<div className="flex flex-col items-center gap-2 text-center mt-2">
|
||||
<div
|
||||
className="w-14 h-14 rounded-2xl flex items-center justify-center mb-1"
|
||||
style={{ background: "#FF570A", boxShadow: "rgba(255,87,10,0.35) 0px 8px 32px" }}
|
||||
>
|
||||
<span className="material-symbols-outlined text-white" style={{ fontSize: 30 }}>terminal</span>
|
||||
</div>
|
||||
<h1 className="text-lg font-bold text-text-main tracking-tight">9Remote</h1>
|
||||
<p className="text-xs text-text-muted leading-5 max-w-[220px]">
|
||||
Access your terminal, desktop & files from anywhere
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Feature cards */}
|
||||
<div className="flex gap-2 w-full mt-6">
|
||||
{FEATURES.map(({ icon, label, desc }) => (
|
||||
<div key={label} className="flex-1 flex flex-col items-center gap-1.5 py-4 px-1 rounded-xl border border-black/10 dark:border-white/10 bg-bg-alt">
|
||||
<span className="material-symbols-outlined" style={{ fontSize: 22, color: "#ff6e33" }}>{icon}</span>
|
||||
<p className="text-xs font-semibold text-text-main">{label}</p>
|
||||
<p className="text-[10px] text-text-muted text-center leading-4">{desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bullets */}
|
||||
<div className="flex flex-col gap-3 w-full mt-5">
|
||||
{BULLETS.map(({ icon, text }) => (
|
||||
<div key={icon} className="flex items-center gap-2.5">
|
||||
<span className="material-symbols-outlined flex-shrink-0" style={{ fontSize: 16, color: "#ff6e33" }}>{icon}</span>
|
||||
<span className="text-xs text-text-muted">{text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA button */}
|
||||
{btnCfg && (
|
||||
<button
|
||||
onClick={btnCfg.onClick ?? undefined}
|
||||
disabled={btnCfg.loading}
|
||||
className={`mt-7 w-full py-3.5 flex items-center justify-center gap-2 text-sm font-semibold text-white rounded-xl transition-all ${
|
||||
btnCfg.loading
|
||||
? "opacity-60 cursor-not-allowed"
|
||||
: "hover:opacity-90 active:scale-[0.98]"
|
||||
}`}
|
||||
style={{
|
||||
background: "#FF570A",
|
||||
boxShadow: btnCfg.loading ? "none" : "0 4px 16px rgba(255,87,10,0.35)",
|
||||
}}
|
||||
>
|
||||
{btnCfg.loading ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-bounce" style={{ animationDelay: "0ms" }} />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-bounce" style={{ animationDelay: "150ms" }} />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-bounce" style={{ animationDelay: "300ms" }} />
|
||||
</span>
|
||||
) : (
|
||||
<span className="material-symbols-outlined text-base">{btnCfg.icon}</span>
|
||||
)}
|
||||
{btnCfg.label}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
@@ -19,7 +19,6 @@ export { default as ManualConfigModal } from "./ManualConfigModal";
|
||||
export { default as UsageStats } from "./UsageStats";
|
||||
export { default as LanguageSwitcher } from "./LanguageSwitcher";
|
||||
export { default as NineRemoteButton } from "./NineRemoteButton";
|
||||
export { default as NineRemoteModal } from "./NineRemoteModal";
|
||||
export { default as RequestLogger } from "./RequestLogger";
|
||||
export { default as KiroAuthModal } from "./KiroAuthModal";
|
||||
export { default as KiroOAuthWrapper } from "./KiroOAuthWrapper";
|
||||
|
||||
Reference in New Issue
Block a user