updates
This commit is contained in:
@@ -43,8 +43,8 @@ from the **Accounts** panel (each gets a one-time access key to hand over).
|
||||
- Admin creates users (`username`, display name, avatar URL, theme) — the API
|
||||
returns a `ka_…` access key **once**; keys are stored hashed (sha256).
|
||||
- Users log in with `{ username, key }`. Regenerating a key revokes old sessions.
|
||||
- Per-account: display name, avatar URL (host images e.g. on `catbox.moe` and
|
||||
paste the link; empty = initials avatar), theme (`auto`/`light`/`dark`).
|
||||
- Per-account: display name, avatar (uploaded to the built-in CDN from profile
|
||||
settings), theme (`auto`/`light`/`dark`), accent color, feature flags.
|
||||
|
||||
## API
|
||||
|
||||
@@ -60,6 +60,9 @@ from the **Accounts** panel (each gets a one-time access key to hand over).
|
||||
| POST | `/api/admin/users/:id/regenerate` | admin | new key, old sessions revoked |
|
||||
| GET/PATCH | `/api/admin/settings` | admin | feature flags: registrationEnabled, ocrEnabled |
|
||||
| GET/POST | `/api/conversations` | Bearer | server-persisted chats (title, topic, model) |
|
||||
| GET | `/api/conversations/search?q=` | Bearer | search titles, topics + old prompts (with snippet) |
|
||||
| POST | `/api/admin/ollama/pull` | admin | pull a model from the Ollama library (NDJSON progress) |
|
||||
| DELETE | `/api/admin/ollama/models/:name` | admin | remove a local Ollama model |
|
||||
| GET/PATCH/DELETE | `/api/conversations/:id` | owner | incl. messages on GET |
|
||||
| POST/GET/DELETE | `/api/conversations/:id/share` | owner | public link `/share/:publicId` |
|
||||
| GET | `/api/share/:publicId` | **public** | read-only shared chat JSON |
|
||||
|
||||
@@ -27,3 +27,15 @@ Can refusing with a reason / accepting with reason / reviewing :
|
||||
each new message in the conversations makes a new mail forwarded by (like real ticket)
|
||||
precise that theses mail arent the official way and need to be responded into the official site (chat.kisakay.com/review)
|
||||
makes beautiful simple easy - by design HTML for each type of mail
|
||||
|
||||
--- UX bugs / improvements:
|
||||
class="flex w-full items-center gap-2.5 rounded-xl p-1.5 text-left transition hover:bg-stone-100 dark:hover:bg-zinc-800"
|
||||
the actual on:hover makes the two buttons together, seprared it goodly
|
||||
|
||||
Use the new flower svgs built-in for the ai logo. Only one declaration of the logo, not copy-paste everywhere needing it. One constant and imported anywhere
|
||||
Make the loading screen smoother
|
||||
|
||||
|
||||
--- SETTINGS REWAMPING:
|
||||
Make a paginations system for users into the Admin Center.
|
||||
Filtering, by account timetamp, alphabetily filtered, unverified/etc...
|
||||
|
||||
+2
-2
@@ -47,8 +47,8 @@ unshare. See `AGENTS.md`.
|
||||
1. Log in as `admin` with the `APP_PASSWORD` key.
|
||||
2. Open **Accounts** → *New account* → username (+ display name).
|
||||
3. Copy the one-time `ka_…` key and hand it to the owner (chat, QR code, …).
|
||||
4. Users set their display name, avatar (upload box in profile settings, or a
|
||||
remote URL e.g. from `catbox.moe`) and theme in the profile settings.
|
||||
4. Users set their display name, avatar (upload a picture in the profile settings —
|
||||
hosted on the built-in CDN), theme, accent color and feature flags in the settings.
|
||||
5. Rotate a compromised key with the regenerate button (old sessions die);
|
||||
delete removes the account with all its chats and shares.
|
||||
|
||||
|
||||
+33
-4
@@ -2,11 +2,40 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>KisAssistant</title>
|
||||
<meta name="description" content="KisAssistant — minimal private chat assistant" />
|
||||
<link rel="icon" type="image/jpeg" href="/logo.jpg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<title>KisAssistant — private AI chat</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="KisAssistant — a private, self-hosted AI chat assistant. Talk to local Ollama models and cloud LLMs (Mistral, DeepSeek, Anthropic, OpenAI) with server-side chats, public shares and No-KYC accounts."
|
||||
/>
|
||||
<meta name="keywords" content="KisAssistant, private AI chat, self-hosted chatbot, Ollama web UI, Mistral, DeepSeek, Anthropic, OpenAI, local LLM" />
|
||||
<meta name="author" content="kisakay" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="theme-color" content="#059669" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="KisAssistant" />
|
||||
<meta property="og:title" content="KisAssistant — private AI chat" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="A private, self-hosted AI chat assistant: local Ollama models + cloud LLMs, server-side chats, public shares, No-KYC accounts."
|
||||
/>
|
||||
<meta property="og:image" content="/logo.jpg" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="KisAssistant — private AI chat" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="A private, self-hosted AI chat assistant: local Ollama models + cloud LLMs, server-side chats and public shares."
|
||||
/>
|
||||
<meta name="twitter:image" content="/logo.jpg" />
|
||||
|
||||
<link rel="icon" type="image/jpeg" href="/logo.jpg" />
|
||||
<link rel="apple-touch-icon" href="/logo.jpg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
# KisAssistant — crawlers, LLM agents and scrapers are welcome on public pages.
|
||||
# Authenticated app routes (/api/* except /api/share/:id) require a Bearer key.
|
||||
User-agent: *
|
||||
Allow: /
|
||||
@@ -9,7 +9,7 @@ import { ConvEditDialog, FilePreviewModal, SettingsModal, ShareModal } from "./c
|
||||
import { AdminCenter } from "./components/AdminCenter.tsx";
|
||||
import { SharePage } from "./components/SharePage.tsx";
|
||||
import { ResetPage } from "./components/ResetPage.tsx";
|
||||
import { ConfirmDialog } from "./components/ui.tsx";
|
||||
import { ConfirmDialog, LoadingScreen } from "./components/ui.tsx";
|
||||
|
||||
function shareIdFromPath(): string | null {
|
||||
const m = window.location.pathname.match(/^\/share\/([A-Za-z0-9_-]{6,64})\/?$/);
|
||||
@@ -256,7 +256,7 @@ export function App() {
|
||||
}
|
||||
|
||||
if (checking) {
|
||||
return <div className="grid min-h-full place-items-center text-sm opacity-60">Loading…</div>;
|
||||
return <LoadingScreen />;
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
|
||||
import { ArrowLeft, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
|
||||
import { api } from "../lib/api.ts";
|
||||
import { AdminPanel } from "./AdminPanel.tsx";
|
||||
import { Logo, Spinner, Switch } from "./ui.tsx";
|
||||
import { LoadingScreen, Logo, Spinner, Switch } from "./ui.tsx";
|
||||
import { cn } from "../lib/cn.ts";
|
||||
|
||||
type Tab = "accounts" | "features" | "mail";
|
||||
@@ -57,7 +57,7 @@ export function AdminCenter() {
|
||||
}
|
||||
|
||||
if (allowed === null) {
|
||||
return <div className="grid min-h-full place-items-center text-sm opacity-60"><Spinner /> Checking admin access…</div>;
|
||||
return <LoadingScreen />;
|
||||
}
|
||||
|
||||
if (!allowed) {
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
Share2,
|
||||
Tag,
|
||||
Trash2,
|
||||
Users,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import type { Conversation, User } from "../lib/types.ts";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Settings2, Sparkles, Tag, Unplug, UserPlus } from "lucide-react";
|
||||
import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, Sparkles, Tag, Unplug, User as UserIcon, UserPlus, X } from "lucide-react";
|
||||
import { api } from "../lib/api.ts";
|
||||
import { cn } from "../lib/cn.ts";
|
||||
import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
|
||||
@@ -354,8 +354,17 @@ export function SettingsModal({
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [uploadError, setUploadError] = useState("");
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Section search: each section lists keywords; a section shows when the
|
||||
// query is empty or matches its title/keywords.
|
||||
function show(...keywords: string[]): boolean {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
return keywords.some((k) => k.toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
setDisplayName(user.displayName);
|
||||
@@ -364,6 +373,7 @@ export function SettingsModal({
|
||||
setTheme(user.theme);
|
||||
setError("");
|
||||
setUploadError("");
|
||||
setSearch("");
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
@@ -409,83 +419,122 @@ export function SettingsModal({
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal open={user !== null} onClose={onClose} title="Profile & appearance" icon={Settings2}>
|
||||
<Modal open={user !== null} onClose={onClose} title="Settings" icon={Settings2} wide>
|
||||
<form onSubmit={save} className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{displayName || "…"}</p>
|
||||
<p className="truncate text-xs opacity-60">@{user?.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Upload avatar"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
const f = e.dataTransfer.files?.[0];
|
||||
if (f) uploadFile(f);
|
||||
}}
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
|
||||
dragOver
|
||||
? "border-accent-500 bg-accent-500/10"
|
||||
: "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
|
||||
)}
|
||||
>
|
||||
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
|
||||
{uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 text-sm">
|
||||
<span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
|
||||
<span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-50" />
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) uploadFile(f);
|
||||
e.target.value = "";
|
||||
}}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search settings…"
|
||||
aria-label="Search settings"
|
||||
className="w-full rounded-2xl border border-stone-200/70 bg-stone-100 py-2 pl-9 pr-8 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 focus:bg-white dark:border-zinc-800 dark:bg-zinc-800/60 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-900"
|
||||
/>
|
||||
{uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
|
||||
{search && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Clear settings search"
|
||||
onClick={() => setSearch("")}
|
||||
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 opacity-60 transition hover:opacity-100"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<Field label="Display name">
|
||||
<Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
|
||||
</Field>
|
||||
<Field label="Avatar URL" hint="Host an image on catbox.moe (or anywhere) and paste the direct link here. Empty = initials.">
|
||||
<Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" inputMode="url" />
|
||||
</Field>
|
||||
<Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
|
||||
<Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
|
||||
</Field>
|
||||
<Field label="Theme">
|
||||
<Picker
|
||||
ariaLabel="Theme"
|
||||
value={theme}
|
||||
onChange={setTheme}
|
||||
align="left"
|
||||
options={[
|
||||
{ value: "auto", label: "Auto (follows system)" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<AccentSection />
|
||||
<FeaturesSection />
|
||||
|
||||
{show("profile", "avatar", "picture", "photo", "name", "display", "email", "account") && (
|
||||
<SettingSection icon={UserIcon} title="Profile">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium">{displayName || "…"}</p>
|
||||
<p className="truncate text-xs opacity-60">@{user?.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label="Upload avatar"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault();
|
||||
setDragOver(false);
|
||||
const f = e.dataTransfer.files?.[0];
|
||||
if (f) uploadFile(f);
|
||||
}}
|
||||
className={cn(
|
||||
"flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
|
||||
dragOver
|
||||
? "border-accent-500 bg-accent-500/10"
|
||||
: "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
|
||||
)}
|
||||
>
|
||||
<span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
|
||||
{uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 text-sm">
|
||||
<span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
|
||||
<span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/webp"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const f = e.target.files?.[0];
|
||||
if (f) uploadFile(f);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
{uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
|
||||
</div>
|
||||
<Field label="Display name">
|
||||
<Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
|
||||
</Field>
|
||||
<Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
|
||||
<Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
|
||||
</Field>
|
||||
</SettingSection>
|
||||
)}
|
||||
|
||||
{show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette") && (
|
||||
<SettingSection icon={Palette} title="Appearance">
|
||||
<Field label="Theme">
|
||||
<Picker
|
||||
ariaLabel="Theme"
|
||||
value={theme}
|
||||
onChange={setTheme}
|
||||
align="left"
|
||||
options={[
|
||||
{ value: "auto", label: "Auto (follows system)" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
]}
|
||||
/>
|
||||
</Field>
|
||||
<AccentSection />
|
||||
</SettingSection>
|
||||
)}
|
||||
|
||||
{show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
|
||||
<SettingSection icon={Sparkles} title="Features" hint="Turn composer capabilities on or off. Applied instantly, saved on this device.">
|
||||
<FeaturesSection />
|
||||
</SettingSection>
|
||||
)}
|
||||
|
||||
{search.trim() && !show("profile", "avatar", "picture", "photo", "name", "display", "email", "account")
|
||||
&& !show("appearance", "theme", "dark", "light", "color", "colour", "accent", "palette")
|
||||
&& !show("features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable") && (
|
||||
<p className="px-2 py-4 text-center text-sm opacity-50">No settings match “{search.trim()}”.</p>
|
||||
)}
|
||||
|
||||
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
|
||||
@@ -496,6 +545,31 @@ export function SettingsModal({
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Settings sections ---------- */
|
||||
|
||||
function SettingSection({
|
||||
icon: Icon,
|
||||
title,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
icon: typeof Settings2;
|
||||
title: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="rounded-3xl border border-stone-200/70 p-4 dark:border-zinc-800">
|
||||
<h3 className="mb-1 flex items-center gap-2 text-sm font-semibold">
|
||||
<Icon size={15} className="opacity-60" />
|
||||
{title}
|
||||
</h3>
|
||||
{hint && <p className="mb-3 text-xs opacity-60">{hint}</p>}
|
||||
<div className="mt-3 space-y-4">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Accent color (settings) ---------- */
|
||||
|
||||
function AccentSection() {
|
||||
@@ -515,10 +589,6 @@ function AccentSection() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
|
||||
<Palette size={14} />
|
||||
Accent color
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{ACCENT_PRESETS.map((p) => (
|
||||
<button
|
||||
@@ -557,7 +627,6 @@ function AccentSection() {
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -568,10 +637,6 @@ function FeaturesSection() {
|
||||
const flags = useFeatures();
|
||||
return (
|
||||
<div>
|
||||
<span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
|
||||
<Sparkles size={14} />
|
||||
Features
|
||||
</span>
|
||||
<div className="space-y-1">
|
||||
{FEATURES.map((f) => (
|
||||
<label
|
||||
@@ -597,7 +662,6 @@ function FeaturesSection() {
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -475,26 +475,7 @@ export function Logo({ size = 36, className }: { size?: number; className?: stri
|
||||
/* ---------- Switch (feature toggle) ---------- */
|
||||
|
||||
export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
aria-label={label}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={cn(
|
||||
"relative h-6 w-11 shrink-0 rounded-full transition",
|
||||
checked ? "bg-emerald-600 dark:bg-emerald-500" : "bg-stone-300 dark:bg-zinc-700",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
|
||||
checked ? "left-[1.375rem]" : "left-0.5",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
return <Toggle checked={checked} onChange={onChange} label={label} />;
|
||||
}
|
||||
|
||||
/* ---------- Misc ---------- */
|
||||
@@ -503,7 +484,8 @@ export function Spinner({ size = 18 }: { size?: number }) {
|
||||
return <Loader2 size={size} className="animate-spin" />;
|
||||
}
|
||||
|
||||
/** Accessible on/off switch (emerald→accent colored when on). */
|
||||
/** Accessible on/off switch (accent colored when on). Flex-based so the knob
|
||||
* is always perfectly centered — no border/padding math to break. */
|
||||
export function Toggle({
|
||||
checked,
|
||||
onChange,
|
||||
@@ -524,16 +506,14 @@ export function Toggle({
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(!checked)}
|
||||
className={cn(
|
||||
"relative h-6 w-11 shrink-0 rounded-full border transition disabled:opacity-40",
|
||||
checked
|
||||
? "border-transparent bg-accent-600 dark:bg-accent-500"
|
||||
: "border-stone-300 bg-stone-200 dark:border-zinc-600 dark:bg-zinc-700",
|
||||
"flex h-6 w-11 shrink-0 items-center rounded-full px-0.5 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-500/50 disabled:cursor-not-allowed disabled:opacity-40",
|
||||
checked ? "bg-accent-600 dark:bg-accent-500" : "bg-stone-300 dark:bg-zinc-700",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all dark:bg-zinc-100",
|
||||
checked ? "left-[1.4rem]" : "left-0.5",
|
||||
"h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 dark:bg-zinc-100",
|
||||
checked ? "translate-x-5" : "translate-x-0",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
@@ -557,3 +537,26 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Loading screen ---------- */
|
||||
|
||||
/** Animated blooming flower shown while the app boots (themed, mobile-safe). */
|
||||
export function LoadingScreen() {
|
||||
const petals = [0, 60, 120, 180, 240, 300];
|
||||
return (
|
||||
<div className="grid min-h-full place-items-center" role="status" aria-label="Loading KisAssistant">
|
||||
<div className="flex flex-col items-center gap-4 px-6 text-center">
|
||||
<svg width="72" height="72" viewBox="0 0 100 100" className="h-16 w-16 sm:h-20 sm:w-20" aria-hidden="true">
|
||||
{petals.map((r, i) => (
|
||||
<g key={r} transform={`rotate(${r} 50 50)`}>
|
||||
<ellipse cx="50" cy="25" rx="13" ry="21" className="flower-petal fill-accent-500" style={{ animationDelay: `${i * 0.22}s` }} />
|
||||
</g>
|
||||
))}
|
||||
<circle cx="50" cy="50" r="10" className="flower-core fill-accent-700 dark:fill-accent-400" />
|
||||
</svg>
|
||||
<p className="font-serif text-2xl font-bold tracking-tight">KisAssistant</p>
|
||||
<p className="loading-dots text-sm opacity-60">Preparing your chats</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -90,6 +90,36 @@ body {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Loading flower: petals bloom one after another, core breathes. */
|
||||
.flower-petal {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: bloom 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes bloom {
|
||||
0%, 100% { transform: scale(0.55); opacity: 0.3; }
|
||||
50% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
.flower-core {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
animation: core-breathe 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes core-breathe {
|
||||
0%, 100% { transform: scale(0.85); }
|
||||
50% { transform: scale(1.15); }
|
||||
}
|
||||
.loading-dots::after {
|
||||
content: "";
|
||||
animation: dots 1.4s steps(4) infinite;
|
||||
}
|
||||
@keyframes dots {
|
||||
0% { content: ""; }
|
||||
25% { content: "."; }
|
||||
50% { content: ".."; }
|
||||
75% { content: "..."; }
|
||||
}
|
||||
|
||||
/* Kill Chrome's yellow autofill background (login / password fields) */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
|
||||
Reference in New Issue
Block a user