KisAssistant 0.2.0: React UI, SQLite accounts, shares, drivers, NixOS module

2026-09-21 11:00:32 +02:00
commit 739c14324a
47 changed files with 8263 additions and 0 deletions
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { Bot, Globe, Sparkles, User as UserIcon } from "lucide-react";
+import { api } from "../lib/api.ts";
+import type { SharedChat } from "../lib/types.ts";
+import { Avatar } from "./ui.tsx";
+import { Markdown } from "./Markdown.tsx";
+
+export function SharePage({ publicId }: { publicId: string }) {
+  const [chat, setChat] = useState<SharedChat | null>(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    api.publicShare(publicId)
+      .then(setChat)
+      .catch((err) => setError(err instanceof Error ? err.message : "Not found"));
+  }, [publicId]);
+
+  return (
+    <div className="min-h-full">
+      <header className="border-b border-stone-200/70 bg-white/70 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
+        <div className="mx-auto flex w-full max-w-3xl items-center gap-2.5 px-4 py-3">
+          <span className="grid h-9 w-9 place-items-center rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white">
+            <Sparkles size={17} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-semibold">{chat?.title ?? "Shared chat"}</p>
+            {chat && (
+              <p className="flex items-center gap-1.5 text-xs opacity-60">
+                <Globe size={11} /> by {chat.authorName} · {new Date(chat.sharedAt).toLocaleDateString()}
+                {chat.model && <> · {chat.model.split(":").pop()}</>}
+              </p>
+            )}
+          </div>
+          <a href="/" className="rounded-full bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-emerald-500 dark:bg-emerald-500 dark:text-zinc-950">
+            Open KisAssistant
+          </a>
+        </div>
+      </header>
+      <main className="mx-auto w-full max-w-3xl space-y-5 px-4 py-6">
+        {error && <p className="rounded-2xl bg-red-50 px-4 py-3 text-sm text-red-600 dark:bg-red-950/40 dark:text-red-400">{error}</p>}
+        {!chat && !error && <p className="py-16 text-center text-sm opacity-60">Loading shared chat…</p>}
+        {chat?.messages.map((m, i) => (
+          <div key={i} className="flex gap-3">
+            <Avatar name={m.role === "user" ? chat.authorName : "KisAssistant"} size={32} />
+            <div className="min-w-0 max-w-[90%] flex-1">
+              <div className="mb-1 flex items-center gap-1.5 text-xs opacity-60">
+                {m.role === "user" ? <UserIcon size={12} /> : <Bot size={12} />}
+                {m.role === "user" ? chat.authorName : "KisAssistant"}
+              </div>
+              {m.role === "user" ? (
+                <div className="whitespace-pre-wrap rounded-3xl rounded-tl-lg border border-stone-200/70 bg-white px-5 py-3 text-[15px] dark:border-zinc-800 dark:bg-zinc-900">{m.content}</div>
+              ) : (
+                <div className="rounded-3xl rounded-tl-lg border border-stone-200/70 bg-white px-5 py-3.5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+                  <Markdown text={m.content} />
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </main>
+    </div>
+  );
+}