479 lines
20 KiB
TypeScript
479 lines
20 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { Archive, ArchiveRestore, BookOpen, Bot, Check, Copy, Cpu, FileText, Flag, Menu, PanelLeftOpen, Paperclip, RotateCcw, ScanText, Search, SendHorizontal, Share2, User as UserIcon, X } from "lucide-react";
|
|
import type { Attachment, ChatMessage, Conversation, DriverModel, User } from "../lib/types.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";
|
|
|
|
const REPORT_REASONS: ReportReason[] = ["copyright", "gore", "falseinfo", "bug"];
|
|
|
|
function MessageBubble({ msg, index, authorAvatar, authorName, onReport, isFailed, retryCount, maxRetries, retryDisabled, onRetry }: { msg: ChatMessage; index: number; authorAvatar?: string; authorName: string; onReport?: (index: number) => void; isFailed?: boolean; retryCount?: number; maxRetries?: number; retryDisabled?: boolean; onRetry?: () => void }) {
|
|
const { t } = useT();
|
|
const isUser = msg.role === "user";
|
|
const [copied, setCopied] = useState(false);
|
|
function copy() {
|
|
navigator.clipboard.writeText(msg.content).then(() => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
}).catch(() => {});
|
|
}
|
|
function searchWeb() {
|
|
window.open(`https://duckduckgo.com/?q=${encodeURIComponent(msg.content.slice(0, 400))}`, "_blank", "noopener,noreferrer");
|
|
}
|
|
return (
|
|
<div className={cn("flex gap-3", isUser && "flex-row-reverse")}>
|
|
{isUser
|
|
? <Avatar name={authorName} url={authorAvatar} size={32} />
|
|
: <AssistantAvatar size={32} />}
|
|
<div className={cn("min-w-0 max-w-[85%]", isUser && "flex flex-col items-end")}>
|
|
<div className="mb-1 flex items-center gap-1.5 text-xs opacity-60">
|
|
{isUser ? <UserIcon size={12} /> : <Bot size={12} />}
|
|
{isUser ? t("chat.you") : "KisAssistant"}
|
|
</div>
|
|
{isUser ? (
|
|
<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">
|
|
<Markdown text={msg.content} />
|
|
</div>
|
|
)}
|
|
{!isUser && (onReport || (isFailed && onRetry)) && (
|
|
<div className="mt-1.5 flex items-center gap-0.5 opacity-70 transition hover:opacity-100">
|
|
{onReport && (
|
|
<>
|
|
<IconButton title={copied ? t("common.copied") : t("msg.copy")} onClick={copy}>
|
|
{copied ? <Check size={14} className="text-accent-500" /> : <Copy size={14} />}
|
|
</IconButton>
|
|
<IconButton title={t("msg.search")} onClick={searchWeb}>
|
|
<Search size={14} />
|
|
</IconButton>
|
|
<IconButton title={t("msg.report")} onClick={() => onReport(index)}>
|
|
<Flag size={14} />
|
|
</IconButton>
|
|
</>
|
|
)}
|
|
{isFailed && onRetry && (
|
|
<IconButton
|
|
title={`${t("msg.retry")} (${Math.min(retryCount ?? 0, maxRetries ?? 0)}/${maxRetries ?? 0})`}
|
|
onClick={onRetry}
|
|
disabled={retryDisabled}
|
|
>
|
|
<RotateCcw size={14} />
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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();
|
|
const [reason, setReason] = useState("");
|
|
const [details, setDetails] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [sent, setSent] = useState(false);
|
|
const [duplicate, setDuplicate] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setReason("");
|
|
setDetails("");
|
|
setError("");
|
|
setSent(false);
|
|
setDuplicate(false);
|
|
}
|
|
}, [open, messageIndex]);
|
|
|
|
async function submit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!reason || busy) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.createReport({
|
|
conversationId: conversationId ?? undefined,
|
|
messageIndex,
|
|
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);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title={t("report.title")} icon={Flag}>
|
|
{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>
|
|
) : (
|
|
<form onSubmit={submit} className="space-y-4">
|
|
<Field label={t("report.reason")}>
|
|
<Picker
|
|
value={reason}
|
|
onChange={setReason}
|
|
options={REPORT_REASONS.map((r) => ({ value: r, label: t(`report.reason.${r}` as StringKey) }))}
|
|
placeholder={t("report.reasonPh")}
|
|
ariaLabel={t("report.reason")}
|
|
align="left"
|
|
/>
|
|
</Field>
|
|
<Field label={t("report.details")}>
|
|
<textarea
|
|
rows={3}
|
|
value={details}
|
|
onChange={(e) => setDetails(e.target.value)}
|
|
placeholder={t("report.detailsPh")}
|
|
aria-label={t("report.details")}
|
|
maxLength={2000}
|
|
className="max-h-40 w-full resize-none rounded-2xl border border-stone-200 bg-white px-3.5 py-2.5 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 dark:border-zinc-700 dark:bg-zinc-900 dark:placeholder:text-zinc-500"
|
|
/>
|
|
</Field>
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
|
|
<div className="flex justify-end gap-2">
|
|
<Button type="button" variant="secondary" onClick={onClose}>{t("common.cancel")}</Button>
|
|
<Button type="submit" disabled={!reason || busy}>
|
|
{busy ? <Spinner size={14} /> : <Flag size={14} />} {t("report.submit")}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
export function Chat({
|
|
user,
|
|
conv,
|
|
messages,
|
|
streaming,
|
|
sending,
|
|
models,
|
|
model,
|
|
onModelChange,
|
|
onSend,
|
|
onShare,
|
|
onUnarchive,
|
|
readOnly,
|
|
sidebarCollapsed,
|
|
onExpandSidebar,
|
|
onOpenNav,
|
|
attachments,
|
|
attachError,
|
|
ocrAvailable,
|
|
onRemoveAttachment,
|
|
onPickFile,
|
|
failedIndex,
|
|
retryCount,
|
|
maxRetries,
|
|
onRetry,
|
|
}: {
|
|
user: User;
|
|
conv: Conversation | null;
|
|
messages: ChatMessage[];
|
|
streaming: string;
|
|
sending: boolean;
|
|
models: DriverModel[];
|
|
model: string;
|
|
onModelChange: (m: string) => void;
|
|
onSend: (text: string) => void;
|
|
onShare: () => void;
|
|
/** Archived chats render read-only; the banner offers to unarchive. */
|
|
readOnly?: boolean;
|
|
onUnarchive?: () => void;
|
|
sidebarCollapsed: boolean;
|
|
onExpandSidebar: () => void;
|
|
onOpenNav: () => void;
|
|
attachments: Attachment[];
|
|
attachError: string | null;
|
|
ocrAvailable: boolean;
|
|
onRemoveAttachment: (id: string) => void;
|
|
onPickFile: (kind: "ocr" | "text", file: File) => void;
|
|
/** Trailing model-error bubble index (retry arrow), if any. */
|
|
failedIndex: number | null;
|
|
retryCount: number;
|
|
maxRetries: number;
|
|
onRetry?: () => void;
|
|
}) {
|
|
const [draft, setDraft] = useState("");
|
|
const [attachOpen, setAttachOpen] = useState(false);
|
|
const [reportIndex, setReportIndex] = useState<number | null>(null);
|
|
const { t } = useT();
|
|
const features = useFeatures();
|
|
const boxRef = useRef<HTMLDivElement>(null);
|
|
const taRef = useRef<HTMLTextAreaElement>(null);
|
|
const imgRef = useRef<HTMLInputElement>(null);
|
|
const txtRef = useRef<HTMLInputElement>(null);
|
|
|
|
const modelGroups: PickerGroup[] = (() => {
|
|
const byDriver = new Map<string, { value: string; label: string; hint: string }[]>();
|
|
for (const m of models) {
|
|
const group = m.group ?? m.driver;
|
|
const list = byDriver.get(group) ?? [];
|
|
list.push({ value: m.id, label: m.label, hint: m.id });
|
|
byDriver.set(group, list);
|
|
}
|
|
return [...byDriver.entries()].map(([group, options]) => ({ group, options }));
|
|
})();
|
|
|
|
useEffect(() => {
|
|
const el = boxRef.current;
|
|
if (el) el.scrollTop = el.scrollHeight;
|
|
}, [messages, streaming]);
|
|
|
|
function autoGrow() {
|
|
const ta = taRef.current;
|
|
if (ta) {
|
|
ta.style.height = "auto";
|
|
ta.style.height = Math.min(ta.scrollHeight, 200) + "px";
|
|
}
|
|
}
|
|
|
|
function submit(e?: React.FormEvent) {
|
|
e?.preventDefault();
|
|
if (readOnly) return;
|
|
const text = draft.trim();
|
|
if (!text || sending) return;
|
|
setDraft("");
|
|
requestAnimationFrame(autoGrow);
|
|
onSend(text);
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full min-w-0 flex-1 flex-col">
|
|
<header className="flex items-center gap-2 border-b border-stone-200/70 px-4 py-2.5 backdrop-blur dark:border-zinc-800">
|
|
<IconButton title={t("chat.openNav")} onClick={onOpenNav} className="md:hidden">
|
|
<Menu size={18} />
|
|
</IconButton>
|
|
{sidebarCollapsed && (
|
|
<span className="hidden md:inline">
|
|
<IconButton title={t("chat.expand")} onClick={onExpandSidebar}>
|
|
<PanelLeftOpen size={18} />
|
|
</IconButton>
|
|
</span>
|
|
)}
|
|
<span className="hidden items-center gap-2 font-semibold sm:flex">
|
|
<FlowerMark size={24} dynamic={false} />
|
|
{conv?.title || t("sidebar.newChat")}
|
|
</span>
|
|
{conv?.topic && (
|
|
<span className="hidden rounded-full bg-stone-200/70 px-2.5 py-0.5 text-xs opacity-80 md:inline dark:bg-zinc-800">{conv.topic}</span>
|
|
)}
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<Picker
|
|
ariaLabel={t("chat.modelAria")}
|
|
icon={Cpu}
|
|
value={model}
|
|
onChange={onModelChange}
|
|
groups={modelGroups}
|
|
placeholder={models.length === 0 ? t("chat.noModels") : t("chat.selectModel")}
|
|
disabled={models.length === 0}
|
|
/>
|
|
{conv && !readOnly && (
|
|
<IconButton title={t("sidebar.share")} onClick={onShare}>
|
|
<Share2 size={17} />
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<div ref={boxRef} className="flex-1 space-y-5 overflow-y-auto px-4 py-6 sm:px-8">
|
|
<div className="mx-auto w-full max-w-3xl space-y-5">
|
|
{messages.length === 0 && !streaming && (
|
|
<div className="py-16 text-center">
|
|
<FlowerMark size={56} dynamic={false} className="mx-auto mb-4" />
|
|
<h2 className="text-2xl font-bold tracking-tight">{t("chat.greet", { name: user.displayName.split(" ")[0]! })}</h2>
|
|
<p className="mt-1 text-sm opacity-60">{t("chat.greetSub")}</p>
|
|
</div>
|
|
)}
|
|
{messages.filter((m) => m.role !== "system").map((m, i) => (
|
|
<MessageBubble key={i} msg={m} index={i} authorAvatar={user.avatarUrl} authorName={user.displayName} onReport={readOnly ? undefined : setReportIndex} isFailed={failedIndex === i} retryCount={retryCount} maxRetries={maxRetries} retryDisabled={sending} onRetry={failedIndex === i && retryCount < maxRetries ? onRetry : undefined} />
|
|
))}
|
|
{streaming !== "" && (
|
|
<div className="flex gap-3">
|
|
<AssistantAvatar size={32} />
|
|
<div className="min-w-0 max-w-[85%]">
|
|
<div className="mb-1 text-xs opacity-60">KisAssistant</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">
|
|
<div className="typing-cursor"><Markdown text={streaming} /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{sending && streaming === "" && (
|
|
<div className="flex items-center gap-2 opacity-60"><Spinner size={15} /><span className="text-sm">{t("chat.thinking")}</span></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-4 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-8">
|
|
<div className="mx-auto w-full max-w-3xl">
|
|
{attachError && (
|
|
<p className="mb-2 rounded-2xl bg-red-500/10 px-4 py-2 text-sm text-red-600 dark:text-red-400" role="alert">{attachError}</p>
|
|
)}
|
|
{attachments.length > 0 && (
|
|
<div className="mb-2 flex flex-wrap gap-2">
|
|
{attachments.map((a) => (
|
|
<span key={a.id} className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-accent-600/30 bg-accent-600/10 py-1 pl-3 pr-1.5 text-xs font-medium dark:border-accent-500/30 dark:bg-accent-500/10">
|
|
{a.kind === "ocr" ? <ScanText size={13} /> : <FileText size={13} />}
|
|
<span className="max-w-40 truncate">{a.name}</span>
|
|
<button onClick={() => onRemoveAttachment(a.id)} aria-label={t("chat.removeAttach", { name: a.name })} className="rounded-full p-1 transition hover:bg-black/10 dark:hover:bg-white/10">
|
|
<X size={13} />
|
|
</button>
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="relative mx-auto w-full max-w-3xl">
|
|
{attachOpen && (
|
|
<>
|
|
<div className="fixed inset-0 z-40" onClick={() => setAttachOpen(false)} />
|
|
<div className="absolute bottom-full left-0 z-50 mb-2 w-80 max-w-[calc(100vw-2rem)] rounded-3xl border border-stone-200 bg-white p-2 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900">
|
|
<button
|
|
onClick={() => { setAttachOpen(false); imgRef.current?.click(); }}
|
|
disabled={!ocrAvailable}
|
|
className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 disabled:opacity-50 dark:hover:bg-zinc-800"
|
|
>
|
|
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
|
|
<ScanText size={16} />
|
|
</span>
|
|
<span>
|
|
<span className="block text-sm font-medium">{t("chat.ocrOpt")} {ocrAvailable ? "" : t("chat.unavailable")}</span>
|
|
<span className="block text-xs opacity-60">{t("chat.ocrHint")}</span>
|
|
</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { setAttachOpen(false); txtRef.current?.click(); }}
|
|
className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 dark:hover:bg-zinc-800"
|
|
>
|
|
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
|
|
<FileText size={16} />
|
|
</span>
|
|
<span>
|
|
<span className="block text-sm font-medium">{t("chat.textOpt")}</span>
|
|
<span className="block text-xs opacity-60">{t("chat.textHint")}</span>
|
|
</span>
|
|
</button>
|
|
<p className="px-3 pb-1.5 pt-2 text-xs opacity-60">
|
|
{t("chat.attachNote")}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
{readOnly ? (
|
|
<div className="mx-auto flex w-full max-w-3xl items-center gap-3 rounded-[1.75rem] border border-stone-200 bg-stone-100 p-2 pl-4 shadow-lg dark:border-zinc-700 dark: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">
|
|
<Archive size={17} />
|
|
</span>
|
|
<p className="min-w-0 flex-1 text-sm opacity-70">{t("archived.readonly")}</p>
|
|
<button
|
|
type="button"
|
|
onClick={onUnarchive}
|
|
className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-accent-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-accent-500 dark:bg-accent-500 dark:text-zinc-950 dark:hover:bg-accent-400"
|
|
>
|
|
<ArchiveRestore size={15} />
|
|
{t("archived.unarchive")}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={submit} className={`mx-auto flex w-full max-w-3xl items-end gap-2 rounded-[1.75rem] border border-stone-200 bg-white p-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 ${features.attachments ? "pl-2" : "pl-5"}`}>
|
|
{features.attachments && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAttachOpen((o) => !o)}
|
|
aria-label={t("chat.attachTip")}
|
|
title={t("chat.attachTip")}
|
|
className="grid h-10 w-10 shrink-0 -translate-y-[2px] place-items-center rounded-full transition hover:bg-stone-100 active:scale-95 dark:hover:bg-zinc-800"
|
|
>
|
|
<Paperclip size={17} className="opacity-70" />
|
|
</button>
|
|
)}
|
|
<input ref={imgRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("ocr", f); e.target.value = ""; }} />
|
|
<input ref={txtRef} type="file" accept=".txt,.md,text/plain,text/markdown" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("text", f); e.target.value = ""; }} />
|
|
<textarea
|
|
ref={taRef}
|
|
rows={1}
|
|
value={draft}
|
|
onChange={(e) => { setDraft(e.target.value); autoGrow(); }}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
submit();
|
|
}
|
|
}}
|
|
placeholder={t("chat.placeholder")}
|
|
className="max-h-50 flex-1 resize-none bg-transparent py-2.5 text-[15px] outline-none placeholder:text-stone-400 dark:placeholder:text-zinc-500"
|
|
style={{ maxHeight: 200 }}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={(!draft.trim() && attachments.length === 0) || sending}
|
|
aria-label={t("chat.send")}
|
|
className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600 text-white shadow transition hover:bg-accent-500 active:scale-95 disabled:opacity-40 dark:bg-accent-500 dark:text-zinc-950 dark:hover:bg-accent-400"
|
|
>
|
|
<SendHorizontal size={17} />
|
|
</button>
|
|
</form>
|
|
)}
|
|
<p className="py-2 text-center text-xs opacity-50">
|
|
<a href="/wiki" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 underline-offset-2 hover:underline">
|
|
<BookOpen size={12} />
|
|
{t("chat.wiki")}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
{(() => {
|
|
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}
|
|
onClose={() => setReportIndex(null)}
|
|
conversationId={conv?.id ?? null}
|
|
messageIndex={reportIndex ?? 0}
|
|
content={target?.content ?? ""}
|
|
prompt={prev && prev.role === "user" ? prev.content : ""}
|
|
model={conv?.model || model}
|
|
/>
|
|
);
|
|
})()}
|
|
</div>
|
|
);
|
|
}
|