k/chat
1
Fork 0
Code Issues Pull Requests Wiki Activity

updates

Browse Source
This commit is contained in:
k
2026-09-21 14:38:00 +02:00
parent 5f5f72268a
commit c18397880a
11 changed files with 268 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5 -2
View File
@@ -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 - Admin creates users (`username`, display name, avatar URL, theme) — the API
returns a `ka_…` access key **once**; keys are stored hashed (sha256). returns a `ka_…` access key **once**; keys are stored hashed (sha256).
- Users log in with `{ username, key }`. Regenerating a key revokes old sessions. - 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 - Per-account: display name, avatar (uploaded to the built-in CDN from profile
paste the link; empty = initials avatar), theme (`auto`/`light`/`dark`). settings), theme (`auto`/`light`/`dark`), accent color, feature flags.
## API ## 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 | | POST | `/api/admin/users/:id/regenerate` | admin | new key, old sessions revoked |
| GET/PATCH | `/api/admin/settings` | admin | feature flags: registrationEnabled, ocrEnabled | | GET/PATCH | `/api/admin/settings` | admin | feature flags: registrationEnabled, ocrEnabled |
| GET/POST | `/api/conversations` | Bearer | server-persisted chats (title, topic, model) | | 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 | | GET/PATCH/DELETE | `/api/conversations/:id` | owner | incl. messages on GET |
| POST/GET/DELETE | `/api/conversations/:id/share` | owner | public link `/share/:publicId` | | POST/GET/DELETE | `/api/conversations/:id/share` | owner | public link `/share/:publicId` |
| GET | `/api/share/:publicId` | **public** | read-only shared chat JSON | | GET | `/api/share/:publicId` | **public** | read-only shared chat JSON |
anoying_promt
+12
View File
@@ -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) 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) 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 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...
docs/OPERATIONS.md
+2 -2
View File
@@ -47,8 +47,8 @@ unshare. See `AGENTS.md`.
1. Log in as `admin` with the `APP_PASSWORD` key. 1. Log in as `admin` with the `APP_PASSWORD` key.
2. Open **Accounts** → *New account* → username (+ display name). 2. Open **Accounts** → *New account* → username (+ display name).
3. Copy the one-time `ka_…` key and hand it to the owner (chat, QR code, …). 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 4. Users set their display name, avatar (upload a picture in the profile settings —
remote URL e.g. from `catbox.moe`) and theme 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); 5. Rotate a compromised key with the regenerate button (old sessions die);
delete removes the account with all its chats and shares. delete removes the account with all its chats and shares.
frontend/index.html
+33 -4
View File
@@ -2,11 +2,40 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>KisAssistant</title> <title>KisAssistant — private AI chat</title>
<meta name="description" content="KisAssistant — minimal private chat assistant" /> <meta
<link rel="icon" type="image/jpeg" href="/logo.jpg" /> 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="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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/public/robots.txt
+4
View File
@@ -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: /
frontend/src/App.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { ConvEditDialog, FilePreviewModal, SettingsModal, ShareModal } from "./c
import { AdminCenter } from "./components/AdminCenter.tsx"; import { AdminCenter } from "./components/AdminCenter.tsx";
import { SharePage } from "./components/SharePage.tsx"; import { SharePage } from "./components/SharePage.tsx";
import { ResetPage } from "./components/ResetPage.tsx"; import { ResetPage } from "./components/ResetPage.tsx";
import { ConfirmDialog } from "./components/ui.tsx"; import { ConfirmDialog, LoadingScreen } from "./components/ui.tsx";
function shareIdFromPath(): string | null { function shareIdFromPath(): string | null {
const m = window.location.pathname.match(/^\/share\/([A-Za-z0-9_-]{6,64})\/?$/); const m = window.location.pathname.match(/^\/share\/([A-Za-z0-9_-]{6,64})\/?$/);
@@ -256,7 +256,7 @@ export function App() {
} }
if (checking) { if (checking) {
return <div className="grid min-h-full place-items-center text-sm opacity-60">Loading…</div>; return <LoadingScreen />;
} }
if (!user) { if (!user) {
frontend/src/components/AdminCenter.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import { ArrowLeft, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react"; import { ArrowLeft, LayoutDashboard, Mail, ShieldAlert, SlidersHorizontal, Users } from "lucide-react";
import { api } from "../lib/api.ts"; import { api } from "../lib/api.ts";
import { AdminPanel } from "./AdminPanel.tsx"; 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"; import { cn } from "../lib/cn.ts";
type Tab = "accounts" | "features" | "mail"; type Tab = "accounts" | "features" | "mail";
@@ -57,7 +57,7 @@ export function AdminCenter() {
} }
if (allowed === null) { 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) { if (!allowed) {
frontend/src/components/Sidebar.tsx
-1
View File
@@ -11,7 +11,6 @@ import {
Share2, Share2,
Tag, Tag,
Trash2, Trash2,
Users,
X, X,
} from "lucide-react"; } from "lucide-react";
import type { Conversation, User } from "../lib/types.ts"; import type { Conversation, User } from "../lib/types.ts";
frontend/src/components/dialogs.tsx
+148 -84
View File
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react"; 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 { api } from "../lib/api.ts";
import { cn } from "../lib/cn.ts"; import { cn } from "../lib/cn.ts";
import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.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 [uploading, setUploading] = useState(false);
const [uploadError, setUploadError] = useState(""); const [uploadError, setUploadError] = useState("");
const [dragOver, setDragOver] = useState(false); const [dragOver, setDragOver] = useState(false);
const [search, setSearch] = useState("");
const fileRef = useRef<HTMLInputElement>(null); 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(() => { useEffect(() => {
if (user) { if (user) {
setDisplayName(user.displayName); setDisplayName(user.displayName);
@@ -364,6 +373,7 @@ export function SettingsModal({
setTheme(user.theme); setTheme(user.theme);
setError(""); setError("");
setUploadError(""); setUploadError("");
setSearch("");
} }
}, [user]); }, [user]);
@@ -409,83 +419,122 @@ export function SettingsModal({
} }
return ( 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"> <form onSubmit={save} className="space-y-4">
<div className="flex items-center gap-3"> <div className="relative">
<Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} /> <Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-50" />
<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 <input
ref={fileRef} value={search}
type="file" onChange={(e) => setSearch(e.target.value)}
accept="image/jpeg,image/png,image/webp" placeholder="Search settings…"
className="hidden" aria-label="Search settings"
onChange={(e) => { 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"
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>} {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> </div>
<Field label="Display name">
<Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required /> {show("profile", "avatar", "picture", "photo", "name", "display", "email", "account") && (
</Field> <SettingSection icon={UserIcon} title="Profile">
<Field label="Avatar URL" hint="Host an image on catbox.moe (or anywhere) and paste the direct link here. Empty = initials."> <div className="flex items-center gap-3">
<Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" inputMode="url" /> <Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
</Field> <div className="min-w-0 flex-1">
<Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it."> <p className="truncate text-sm font-medium">{displayName || "…"}</p>
<Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /> <p className="truncate text-xs opacity-60">@{user?.username}</p>
</Field> </div>
<Field label="Theme"> </div>
<Picker <div>
ariaLabel="Theme" <span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
value={theme} <div
onChange={setTheme} role="button"
align="left" tabIndex={0}
options={[ aria-label="Upload avatar"
{ value: "auto", label: "Auto (follows system)" }, onClick={() => fileRef.current?.click()}
{ value: "light", label: "Light" }, onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
{ value: "dark", label: "Dark" }, onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
]} onDragLeave={() => setDragOver(false)}
/> onDrop={(e) => {
</Field> e.preventDefault();
<AccentSection /> setDragOver(false);
<FeaturesSection /> 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>} {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button> <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) ---------- */ /* ---------- Accent color (settings) ---------- */
function AccentSection() { function AccentSection() {
@@ -515,10 +589,6 @@ function AccentSection() {
return ( return (
<div> <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"> <div className="flex flex-wrap items-center gap-2">
{ACCENT_PRESETS.map((p) => ( {ACCENT_PRESETS.map((p) => (
<button <button
@@ -557,7 +627,6 @@ function AccentSection() {
/> />
</label> </label>
</div> </div>
<p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
</div> </div>
); );
} }
@@ -568,10 +637,6 @@ function FeaturesSection() {
const flags = useFeatures(); const flags = useFeatures();
return ( return (
<div> <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"> <div className="space-y-1">
{FEATURES.map((f) => ( {FEATURES.map((f) => (
<label <label
@@ -597,7 +662,6 @@ function FeaturesSection() {
</label> </label>
))} ))}
</div> </div>
<p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
</div> </div>
); );
} }
frontend/src/components/ui.tsx
+30 -27
View File
@@ -475,26 +475,7 @@ export function Logo({ size = 36, className }: { size?: number; className?: stri
/* ---------- Switch (feature toggle) ---------- */ /* ---------- Switch (feature toggle) ---------- */
export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) { export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
return ( return <Toggle checked={checked} onChange={onChange} label={label} />;
<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>
);
} }
/* ---------- Misc ---------- */ /* ---------- Misc ---------- */
@@ -503,7 +484,8 @@ export function Spinner({ size = 18 }: { size?: number }) {
return <Loader2 size={size} className="animate-spin" />; 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({ export function Toggle({
checked, checked,
onChange, onChange,
@@ -524,16 +506,14 @@ export function Toggle({
disabled={disabled} disabled={disabled}
onClick={() => onChange(!checked)} onClick={() => onChange(!checked)}
className={cn( className={cn(
"relative h-6 w-11 shrink-0 rounded-full border transition disabled:opacity-40", "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 checked ? "bg-accent-600 dark:bg-accent-500" : "bg-stone-300 dark:bg-zinc-700",
? "border-transparent bg-accent-600 dark:bg-accent-500"
: "border-stone-300 bg-stone-200 dark:border-zinc-600 dark:bg-zinc-700",
)} )}
> >
<span <span
className={cn( className={cn(
"absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all dark:bg-zinc-100", "h-5 w-5 rounded-full bg-white shadow transition-transform duration-200 dark:bg-zinc-100",
checked ? "left-[1.4rem]" : "left-0.5", checked ? "translate-x-5" : "translate-x-0",
)} )}
/> />
</button> </button>
@@ -557,3 +537,26 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
</button> </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>
);
}
frontend/src/index.css
+30
View File
@@ -90,6 +90,36 @@ body {
50% { opacity: 0; } 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) */ /* Kill Chrome's yellow autofill background (login / password fields) */
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,