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

.

Browse Source
This commit is contained in:
k
2026-09-21 21:54:03 +02:00
parent aa33828215
commit e69654430a
5 changed files with 55 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Chat.tsx
+25 -5
View File
@@ -1,9 +1,10 @@
import { useEffect, useRef, useState } from "react";
import { Archive, ArchiveRestore, BookOpen, Bot, Check, Copy, Cpu, FileText, Flag, Menu, PanelLeftOpen, Paperclip, ScanText, Search, SendHorizontal, Share2, User as UserIcon, X } from "lucide-react";
import type { Attachment, ChatMessage, Conversation, DriverModel, User } from "../lib/types.ts";
import { api, type ReportReason } from "../lib/api.ts";
import { api, ApiError, type ReportReason } from "../lib/api.ts";
import { AssistantAvatar, Avatar, Button, Field, FlowerMark, IconButton, Modal, Picker, type PickerGroup, Spinner } from "./ui.tsx";
import { Markdown } from "./Markdown.tsx";
import { UserMessageContent } from "./MessageContent.tsx";
import { cn } from "../lib/cn.ts";
import { useFeatures } from "../lib/features.ts";
import { useT, type StringKey } from "../lib/i18n.ts";
@@ -34,8 +35,8 @@ function MessageBubble({ msg, index, authorAvatar, authorName, onReport }: { msg
{isUser ? t("chat.you") : "KisAssistant"}
</div>
{isUser ? (
<div className="whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-accent-600 px-4 py-2.5 text-[15px] text-white dark:bg-accent-500 dark:text-zinc-950">
{msg.content}
<div className="break-words whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-accent-600 px-4 py-2.5 text-[15px] text-white dark:bg-accent-500 dark:text-zinc-950">
<UserMessageContent content={msg.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">
@@ -60,12 +61,13 @@ function MessageBubble({ msg, index, authorAvatar, authorName, onReport }: { msg
);
}
function ReportDialog({ open, onClose, conversationId, messageIndex, content, model }: {
function ReportDialog({ open, onClose, conversationId, messageIndex, content, prompt, model }: {
open: boolean;
onClose: () => void;
conversationId: string | null;
messageIndex: number;
content: string;
prompt: string;
model: string;
}) {
const { t } = useT();
@@ -74,6 +76,7 @@ function ReportDialog({ open, onClose, conversationId, messageIndex, content, mo
const [busy, setBusy] = useState(false);
const [error, setError] = useState("");
const [sent, setSent] = useState(false);
const [duplicate, setDuplicate] = useState(false);
useEffect(() => {
if (open) {
@@ -81,6 +84,7 @@ function ReportDialog({ open, onClose, conversationId, messageIndex, content, mo
setDetails("");
setError("");
setSent(false);
setDuplicate(false);
}
}, [open, messageIndex]);
@@ -96,11 +100,16 @@ function ReportDialog({ open, onClose, conversationId, messageIndex, content, mo
reason: reason as ReportReason,
details: details.trim(),
content,
prompt,
model,
});
setSent(true);
} catch (err) {
if (err instanceof ApiError && err.status === 409) {
setDuplicate(true);
} else {
setError(err instanceof Error ? err.message : t("report.failed"));
}
} finally {
setBusy(false);
}
@@ -108,7 +117,16 @@ function ReportDialog({ open, onClose, conversationId, messageIndex, content, mo
return (
<Modal open={open} onClose={onClose} title={t("report.title")} icon={Flag}>
{sent ? (
{sent || duplicate ? (
<div className="space-y-4">
<p className="flex items-center gap-2 rounded-2xl bg-emerald-600/10 px-4 py-3 text-sm text-emerald-700 dark:text-emerald-400">
<Check size={16} /> {duplicate ? t("report.alreadyReported") : t("report.sent")}
</p>
<div className="flex justify-end">
<Button variant="secondary" onClick={onClose}>{t("common.close")}</Button>
</div>
</div>
) : (
<div className="space-y-4">
<p className="flex items-center gap-2 rounded-2xl bg-emerald-600/10 px-4 py-3 text-sm text-emerald-700 dark:text-emerald-400">
<Check size={16} /> {t("report.sent")}
@@ -429,6 +447,7 @@ export function Chat({
{(() => {
const shown = messages.filter((m) => m.role !== "system");
const target = reportIndex !== null ? shown[reportIndex] : undefined;
const prev = reportIndex !== null && reportIndex > 0 ? shown[reportIndex - 1] : undefined;
return (
<ReportDialog
open={reportIndex !== null}
@@ -436,6 +455,7 @@ export function Chat({
conversationId={conv?.id ?? null}
messageIndex={reportIndex ?? 0}
content={target?.content ?? ""}
prompt={prev && prev.role === "user" ? prev.content : ""}
model={conv?.model || model}
/>
);
frontend/src/components/MessageContent.tsx
+15 -5
View File
@@ -16,11 +16,16 @@ import { cn } from "../lib/cn.ts";
*/
const ATTACH_RE = /^(\[.*?\])\n```text\n([\s\S]*?)\n```/gm;
function AttachmentBlock({ header, body }: { header: string; body: string }) {
function AttachmentBlock({ header, body, tone }: { header: string; body: string; tone: "accent" | "plain" }) {
const [open, setOpen] = useState(false);
const label = header.startsWith("[") && header.endsWith("]") ? header.slice(1, -1) : header;
return (
<span className="mt-2 block overflow-hidden rounded-2xl bg-black/25 text-left dark:bg-black/30">
<span
className={cn(
"mt-2 block overflow-hidden rounded-2xl text-left",
tone === "accent" ? "bg-black/25 dark:bg-black/30" : "bg-stone-200/70 dark:bg-zinc-800",
)}
>
<button
type="button"
onClick={() => setOpen((v) => !v)}
@@ -35,7 +40,12 @@ function AttachmentBlock({ header, body }: { header: string; body: string }) {
/>
</button>
{open && (
<pre className="max-h-72 overflow-auto whitespace-pre-wrap break-words border-t border-white/10 px-3 py-2 font-mono text-[12.5px] leading-relaxed">
<pre
className={cn(
"max-h-72 overflow-auto whitespace-pre-wrap break-words border-t px-3 py-2 font-mono text-[12.5px] leading-relaxed",
tone === "accent" ? "border-white/10" : "border-stone-300/70 dark:border-zinc-700",
)}
>
{body}
</pre>
)}
@@ -43,7 +53,7 @@ function AttachmentBlock({ header, body }: { header: string; body: string }) {
);
}
export function UserMessageContent({ content }: { content: string }) {
export function UserMessageContent({ content, tone = "accent" }: { content: string; tone?: "accent" | "plain" }) {
const parts: React.ReactNode[] = [];
let last = 0;
let key = 0;
@@ -51,7 +61,7 @@ export function UserMessageContent({ content }: { content: string }) {
let m: RegExpExecArray | null;
while ((m = ATTACH_RE.exec(content)) !== null) {
if (m.index > last) parts.push(<span key={key++}>{content.slice(last, m.index)}</span>);
parts.push(<AttachmentBlock key={key++} header={m[1]!} body={m[2] ?? ""} />);
parts.push(<AttachmentBlock key={key++} header={m[1]!} body={m[2] ?? ""} tone={tone} />);
last = m.index + m[0].length;
}
if (last < content.length) parts.push(<span key={key++}>{content.slice(last)}</span>);
frontend/src/components/ReportsPanel.tsx
+7 -2
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef, useState } from "react";
import { CheckCircle2, Clock, Flag, Inbox, Search, Undo2, XCircle } from "lucide-react";
import { CheckCircle2, Clock, Eye, EyeOff, Flag, Inbox, Search, Undo2, XCircle } from "lucide-react";
import { api, type Report, type ReportStatus } from "../lib/api.ts";
import { Button, Field, Input, Spinner } from "./ui.tsx";
import { Button, ConfirmDialog, Field, Input, Spinner } from "./ui.tsx";
import { useT, type StringKey } from "../lib/i18n.ts";
import { cn } from "../lib/cn.ts";
@@ -118,6 +118,11 @@ export function ReportsPanel() {
<span className={cn("shrink-0 rounded-full px-2.5 py-1 text-xs font-medium", STATUS_STYLE[r.status].cls)}>
{t(`reports.status.${r.status}` as StringKey)}
</span>
{r.reporter_shadowbanned === 1 && (
<span className="shrink-0 rounded-full bg-stone-500/10 px-2.5 py-1 text-xs font-medium opacity-70">
{t("reports.unreliable")}
</span>
)}
</button>
{selectedId === r.id && <ReportDetail report={r} onChanged={() => refresh(r.id)} />}
</li>
frontend/src/components/SharePage.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { api } from "../lib/api.ts";
import type { SharedChat } from "../lib/types.ts";
import { AssistantAvatar, Avatar, FlowerMark } from "./ui.tsx";
import { Markdown } from "./Markdown.tsx";
import { UserMessageContent } from "./MessageContent.tsx";
import { useT } from "../lib/i18n.ts";
export function SharePage({ publicId }: { publicId: string }) {
@@ -80,7 +81,7 @@ export function SharePage({ publicId }: { publicId: string }) {
{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="break-words 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"><UserMessageContent content={m.content} tone="plain" /></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} />
frontend/src/lib/api.ts
+5
View File
@@ -135,6 +135,11 @@ export const api = {
req<{ user: User; key: string }>("/api/admin/users", { method: "POST", body: JSON.stringify(u) }),
adminDelete: (id: string) => req<{ ok: boolean }>(`/api/admin/users/${id}`, { method: "DELETE" }),
adminRegenerate: (id: string) => req<{ key: string }>(`/api/admin/users/${id}/regenerate`, { method: "POST" }),
adminShadowban: (id: string, shadowbanned: boolean) =>
req<{ shadowbanned: boolean }>(`/api/admin/users/${id}/shadowban`, {
method: "POST",
body: JSON.stringify({ shadowbanned }),
}),
adminPatch: (id: string, patch: { displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
req<{ user: User }>(`/api/admin/users/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),