Compare commits
4 Commits
efbf4b2e61
...
feat/kb-me
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2c921a911c | ||
|
|
03443590a2 | ||
|
|
c3dc237aa4 | ||
|
|
66221afedc |
@@ -117,7 +117,16 @@ const SENSITIVITY: Record<Sensitivity, { label: string; tone: string; icon: Reac
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const SensitivityBadge: FC<{ level: Sensitivity; className?: string }> = ({ level, className }) => {
|
export const SensitivityBadge: FC<{ level: Sensitivity; className?: string }> = ({ level, className }) => {
|
||||||
const s = SENSITIVITY[level];
|
// A row can arrive without a sensitivity (e.g. a claim/note, or older data);
|
||||||
|
// fall back to a neutral badge rather than crash — and never default an
|
||||||
|
// unknown value to "Open", which would misstate its exposure.
|
||||||
|
const s =
|
||||||
|
SENSITIVITY[level] ?? {
|
||||||
|
label: level ?? "—",
|
||||||
|
tone: "bg-muted text-muted-foreground",
|
||||||
|
icon: null,
|
||||||
|
title: "Sensitivity not set.",
|
||||||
|
};
|
||||||
return (
|
return (
|
||||||
<Badge tone={s.tone} icon={s.icon} className={className} title={s.title}>
|
<Badge tone={s.tone} icon={s.icon} className={className} title={s.title}>
|
||||||
{s.label}
|
{s.label}
|
||||||
|
|||||||
@@ -200,9 +200,12 @@ export const ClaimsReviewQueue: FC<ClaimsReviewQueueProps> = ({
|
|||||||
const inConflict = new Set(conflictGroups.flat().map((c) => c.claim_id));
|
const inConflict = new Set(conflictGroups.flat().map((c) => c.claim_id));
|
||||||
|
|
||||||
const proposed = claims.filter((c) => c.status === "proposed" && !inConflict.has(c.claim_id));
|
const proposed = claims.filter((c) => c.status === "proposed" && !inConflict.has(c.claim_id));
|
||||||
const unreviewed = claims.filter(
|
// Everything the queue returned that isn't a "proposed" card or a rendered
|
||||||
(c) => c.status === "active" && c.review_state === "unreviewed" && !inConflict.has(c.claim_id),
|
// conflict pair belongs in "Awaiting review". Filtering narrowly (active +
|
||||||
);
|
// unreviewed only) silently dropped anything else the endpoint surfaced —
|
||||||
|
// e.g. a claim flagged open-conflict whose counterpart isn't in this payload
|
||||||
|
// (a singleton group, not rendered as a pair) rendered nowhere at all.
|
||||||
|
const rest = claims.filter((c) => c.status !== "proposed" && !inConflict.has(c.claim_id));
|
||||||
|
|
||||||
if (claims.length === 0) {
|
if (claims.length === 0) {
|
||||||
return <>{emptyState ?? <Empty />}</>;
|
return <>{emptyState ?? <Empty />}</>;
|
||||||
@@ -230,8 +233,8 @@ export const ClaimsReviewQueue: FC<ClaimsReviewQueueProps> = ({
|
|||||||
))}
|
))}
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section title="Awaiting review" count={unreviewed.length} hint="Visible already, labelled by tier — review at your pace.">
|
<Section title="Awaiting review" count={rest.length} hint="Visible already, labelled by tier — review at your pace.">
|
||||||
{unreviewed.map((c) => (
|
{rest.map((c) => (
|
||||||
<ClaimCard key={c.claim_id} claim={c} busy={busyId === c.claim_id} onConfirm={onConfirm} onReject={onReject} onReopen={onReopen} onOpenSource={onOpenSource} />
|
<ClaimCard key={c.claim_id} claim={c} busy={busyId === c.claim_id} onConfirm={onConfirm} onReject={onReject} onReopen={onReopen} onOpenSource={onOpenSource} />
|
||||||
))}
|
))}
|
||||||
</Section>
|
</Section>
|
||||||
|
|||||||
@@ -70,6 +70,10 @@ export interface CollectionListProps {
|
|||||||
onCreate?: (ownerType: "account" | "tenant") => void;
|
onCreate?: (ownerType: "account" | "tenant") => void;
|
||||||
canManageTenant?: boolean;
|
canManageTenant?: boolean;
|
||||||
onOpen?: (collection: Collection) => void;
|
onOpen?: (collection: Collection) => void;
|
||||||
|
/** When set, renders a "Load more" affordance (the list is paginated). */
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
hasMore?: boolean;
|
||||||
|
loadingMore?: boolean;
|
||||||
emptyState?: ReactNode;
|
emptyState?: ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
@@ -81,6 +85,9 @@ export const CollectionList: FC<CollectionListProps> = ({
|
|||||||
onCreate,
|
onCreate,
|
||||||
canManageTenant = false,
|
canManageTenant = false,
|
||||||
onOpen,
|
onOpen,
|
||||||
|
onLoadMore,
|
||||||
|
hasMore,
|
||||||
|
loadingMore,
|
||||||
emptyState,
|
emptyState,
|
||||||
className,
|
className,
|
||||||
}) => {
|
}) => {
|
||||||
@@ -112,6 +119,18 @@ export const CollectionList: FC<CollectionListProps> = ({
|
|||||||
emptyHint={org.length === 0 ? "No shared corpuses yet." : undefined}
|
emptyHint={org.length === 0 ? "No shared corpuses yet." : undefined}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{hasMore && onLoadMore && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action="knowledge-load-more-collections"
|
||||||
|
onClick={onLoadMore}
|
||||||
|
disabled={loadingMore}
|
||||||
|
className="inline-flex items-center justify-center gap-1.5 self-center rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loadingMore && <Loader2 className="size-3.5 animate-spin" />}
|
||||||
|
{loadingMore ? "Loading…" : "Load more"}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
243
src/components-memory.tsx
Normal file
243
src/components-memory.tsx
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
// PURPOSE: Memory review queue — the curation surface for a per-person, gated
|
||||||
|
// `memory` collection of FREE-TEXT notes (kind: note), distinct from the
|
||||||
|
// claim triples of ClaimsReviewQueue. The owner reviews what the agent
|
||||||
|
// and its delegated specialists remembered: confirms a specialist's
|
||||||
|
// `proposed` note (trust-is-human) or forgets anything wrong. Collection-
|
||||||
|
// agnostic — props in, callbacks out; the same base powers the KB
|
||||||
|
// `memory` collection and a consumer's /memory page.
|
||||||
|
// ===========================================================================
|
||||||
|
import { type FC, type ReactNode } from "react";
|
||||||
|
import { BrainCircuit, Check, Sparkles, Trash2, User } from "lucide-react";
|
||||||
|
import { Badge, cn, formatRelative } from "./_internal";
|
||||||
|
|
||||||
|
export type MemoryStatus = "active" | "proposed";
|
||||||
|
|
||||||
|
export interface MemoryItem {
|
||||||
|
id: string;
|
||||||
|
/** The remembered statement (free text). */
|
||||||
|
content: string;
|
||||||
|
/** Short head shown above the content; optional. */
|
||||||
|
subject?: string | null;
|
||||||
|
/** fact | preference | event | note — a free label, surfaced as a tag. */
|
||||||
|
kind?: string | null;
|
||||||
|
tags?: string[];
|
||||||
|
status: MemoryStatus;
|
||||||
|
/** "user" | "assistant" | "app:<slug>" — attribution, rendered via `sourceLabel`. */
|
||||||
|
source?: string | null;
|
||||||
|
updated_at?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MemoryActions {
|
||||||
|
/** Confirm a proposed memory (→ active). */
|
||||||
|
onConfirm?: (id: string) => void;
|
||||||
|
/** Forget a memory (archive / soft-delete). */
|
||||||
|
onForget?: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Default attribution copy; override via `MemoryReviewQueueProps.sourceLabel`. */
|
||||||
|
export function defaultSourceLabel(source?: string | null): string {
|
||||||
|
if (source === "user") return "You added this";
|
||||||
|
if (source === "assistant") return "Your assistant noted this";
|
||||||
|
if (source && source.startsWith("app:")) {
|
||||||
|
const slug = source.slice(4);
|
||||||
|
return `Suggested by ${slug.charAt(0).toUpperCase()}${slug.slice(1)}`;
|
||||||
|
}
|
||||||
|
return "Remembered";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MemoryCardProps extends MemoryActions {
|
||||||
|
item: MemoryItem;
|
||||||
|
busy?: boolean;
|
||||||
|
sourceLabel?: (source?: string | null) => string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MemoryCard: FC<MemoryCardProps> = ({
|
||||||
|
item,
|
||||||
|
busy,
|
||||||
|
sourceLabel = defaultSourceLabel,
|
||||||
|
className,
|
||||||
|
onConfirm,
|
||||||
|
onForget,
|
||||||
|
}) => {
|
||||||
|
const proposed = item.status === "proposed";
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border bg-card p-4",
|
||||||
|
proposed ? "border-primary/40" : "border-border",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
{item.subject && (
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">{item.subject}</p>
|
||||||
|
)}
|
||||||
|
<p className="mt-0.5 text-sm text-foreground">{item.content}</p>
|
||||||
|
</div>
|
||||||
|
{proposed && (
|
||||||
|
<Badge tone="bg-primary/10 text-primary" icon={<Sparkles className="size-3" />}>
|
||||||
|
Proposed
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 flex flex-wrap items-center gap-1.5">
|
||||||
|
<Badge tone="bg-muted text-muted-foreground" icon={sourceIcon(item.source)}>
|
||||||
|
{sourceLabel(item.source)}
|
||||||
|
</Badge>
|
||||||
|
{item.kind && item.kind !== "note" && (
|
||||||
|
<span className="text-xs text-muted-foreground">{item.kind}</span>
|
||||||
|
)}
|
||||||
|
{(item.tags ?? []).map((t) => (
|
||||||
|
<span key={t} className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||||
|
{t}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{item.updated_at && (
|
||||||
|
<span className="text-xs text-muted-foreground">{formatRelative(item.updated_at)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||||
|
{proposed && onConfirm && (
|
||||||
|
<ActionBtn
|
||||||
|
action="memory-confirm"
|
||||||
|
primary
|
||||||
|
onClick={() => onConfirm(item.id)}
|
||||||
|
busy={busy}
|
||||||
|
icon={<Check className="size-3.5" />}
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</ActionBtn>
|
||||||
|
)}
|
||||||
|
{onForget && (
|
||||||
|
<ActionBtn
|
||||||
|
action="memory-forget"
|
||||||
|
onClick={() => onForget(item.id)}
|
||||||
|
busy={busy}
|
||||||
|
icon={<Trash2 className="size-3.5" />}
|
||||||
|
>
|
||||||
|
Forget
|
||||||
|
</ActionBtn>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface MemoryReviewQueueProps extends MemoryActions {
|
||||||
|
items: MemoryItem[];
|
||||||
|
busyId?: string;
|
||||||
|
sourceLabel?: (source?: string | null) => string;
|
||||||
|
emptyState?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Groups: Proposed (awaiting confirmation) → Remembered (active). */
|
||||||
|
export const MemoryReviewQueue: FC<MemoryReviewQueueProps> = ({
|
||||||
|
items,
|
||||||
|
busyId,
|
||||||
|
sourceLabel,
|
||||||
|
emptyState,
|
||||||
|
className,
|
||||||
|
onConfirm,
|
||||||
|
onForget,
|
||||||
|
}) => {
|
||||||
|
if (items.length === 0) return <>{emptyState ?? <Empty />}</>;
|
||||||
|
|
||||||
|
const proposed = items.filter((m) => m.status === "proposed");
|
||||||
|
const active = items.filter((m) => m.status !== "proposed");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("flex flex-col gap-6", className)}>
|
||||||
|
<Section title="Proposed" count={proposed.length} hint="A specialist noted these — confirm or forget.">
|
||||||
|
{proposed.map((m) => (
|
||||||
|
<MemoryCard
|
||||||
|
key={m.id}
|
||||||
|
item={m}
|
||||||
|
busy={busyId === m.id}
|
||||||
|
sourceLabel={sourceLabel}
|
||||||
|
onConfirm={onConfirm}
|
||||||
|
onForget={onForget}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section title="Remembered" count={active.length} hint="What your assistant knows about you.">
|
||||||
|
{active.map((m) => (
|
||||||
|
<MemoryCard
|
||||||
|
key={m.id}
|
||||||
|
item={m}
|
||||||
|
busy={busyId === m.id}
|
||||||
|
sourceLabel={sourceLabel}
|
||||||
|
onForget={onForget}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---- local helpers --------------------------------------------------------
|
||||||
|
|
||||||
|
function sourceIcon(source?: string | null): ReactNode {
|
||||||
|
if (source === "user") return <User className="size-3" />;
|
||||||
|
if (source && source.startsWith("app:")) return <Sparkles className="size-3" />;
|
||||||
|
return <BrainCircuit className="size-3" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Section: FC<{ title: string; count: number; hint: string; children: ReactNode }> = ({
|
||||||
|
title,
|
||||||
|
count,
|
||||||
|
hint,
|
||||||
|
children,
|
||||||
|
}) => {
|
||||||
|
if (count === 0) return null;
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
<div className="mb-2 flex items-baseline gap-2">
|
||||||
|
<h2 className="text-sm font-semibold text-foreground">{title}</h2>
|
||||||
|
<span className="text-xs text-muted-foreground">({count})</span>
|
||||||
|
<span className="text-xs text-muted-foreground">— {hint}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-3">{children}</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Empty: FC = () => (
|
||||||
|
<div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border py-12 text-center">
|
||||||
|
<BrainCircuit className="size-6 text-muted-foreground" />
|
||||||
|
<p className="text-sm font-medium text-foreground">Nothing remembered yet</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Things your assistant learns about you will show up here.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ActionBtn: FC<{
|
||||||
|
action: string;
|
||||||
|
onClick: () => void;
|
||||||
|
icon: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
primary?: boolean;
|
||||||
|
busy?: boolean;
|
||||||
|
}> = ({ action, onClick, icon, children, primary, busy }) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action={action}
|
||||||
|
disabled={busy}
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition disabled:opacity-50",
|
||||||
|
primary
|
||||||
|
? "bg-primary text-primary-foreground hover:opacity-90"
|
||||||
|
: "border border-border text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
@@ -32,14 +32,19 @@ import {
|
|||||||
export interface ObjectListProps {
|
export interface ObjectListProps {
|
||||||
objects: ObjectSummary[];
|
objects: ObjectSummary[];
|
||||||
onOpen?: (object: ObjectSummary) => void;
|
onOpen?: (object: ObjectSummary) => void;
|
||||||
|
/** When set, renders a "Load more" affordance (the list is paginated). */
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
hasMore?: boolean;
|
||||||
|
loadingMore?: boolean;
|
||||||
emptyState?: ReactNode;
|
emptyState?: ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, emptyState, className }) => {
|
export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, onLoadMore, hasMore, loadingMore, emptyState, className }) => {
|
||||||
if (objects.length === 0 && emptyState) return <>{emptyState}</>;
|
if (objects.length === 0 && emptyState) return <>{emptyState}</>;
|
||||||
return (
|
return (
|
||||||
<ul className={cn("flex flex-col divide-y divide-border rounded-xl border border-border bg-card", className)}>
|
<div className={cn("flex flex-col gap-3", className)}>
|
||||||
|
<ul className="flex flex-col divide-y divide-border rounded-xl border border-border bg-card">
|
||||||
{objects.map((o) => (
|
{objects.map((o) => (
|
||||||
<li key={o.object_id}>
|
<li key={o.object_id}>
|
||||||
<button
|
<button
|
||||||
@@ -60,6 +65,19 @@ export const ObjectList: FC<ObjectListProps> = ({ objects, onOpen, emptyState, c
|
|||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
{hasMore && onLoadMore && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action="knowledge-load-more-objects"
|
||||||
|
onClick={onLoadMore}
|
||||||
|
disabled={loadingMore}
|
||||||
|
className="inline-flex items-center justify-center gap-1.5 self-center rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{loadingMore && <Loader2 className="size-3.5 animate-spin" />}
|
||||||
|
{loadingMore ? "Loading…" : "Load more"}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -237,28 +255,41 @@ export interface TextReaderProps {
|
|||||||
export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight, activeSection, className }) => {
|
export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight, activeSection, className }) => {
|
||||||
const [slice, setSlice] = useState<TextSlice | null>(null);
|
const [slice, setSlice] = useState<TextSlice | null>(null);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [loadingMore, setLoadingMore] = useState(false);
|
||||||
const markRef = useRef<HTMLSpanElement | null>(null);
|
const markRef = useRef<HTMLSpanElement | null>(null);
|
||||||
|
// Monotonic request id: rapid section/citation nav fires overlapping reads;
|
||||||
|
// only the newest may commit, so a slow earlier response can't clobber it.
|
||||||
|
const reqRef = useRef(0);
|
||||||
|
|
||||||
const load = useCallback(
|
const load = useCallback(
|
||||||
async (sel?: { section?: string; start?: number; end?: number }) => {
|
async (sel?: { section?: string; start?: number; end?: number }) => {
|
||||||
|
const req = ++reqRef.current;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
try {
|
try {
|
||||||
setSlice(await readText(sel));
|
const next = await readText(sel);
|
||||||
|
if (reqRef.current === req) setSlice(next);
|
||||||
|
} catch {
|
||||||
|
// A failed read must surface, not blank the panel (and never leak as an
|
||||||
|
// unhandled rejection).
|
||||||
|
if (reqRef.current === req) setError("Couldn't load this text. Try again.");
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
if (reqRef.current === req) setLoading(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[readText],
|
[readText],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Initial + reactive loads: prefer an explicit highlight span, then an active
|
// Initial + reactive loads: an explicit outline selection wins (so clicking a
|
||||||
// section, else the head of the document.
|
// section works even on a citation-opened view), then the highlight span,
|
||||||
|
// else the head of the document.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (highlight) {
|
if (activeSection) {
|
||||||
|
void load({ section: activeSection });
|
||||||
|
} else if (highlight) {
|
||||||
const sec = outline.outline.find((s) => highlight.start >= s.start && highlight.end <= s.end);
|
const sec = outline.outline.find((s) => highlight.start >= s.start && highlight.end <= s.end);
|
||||||
void load(sec ? { section: sec.id } : { start: Math.max(0, highlight.start - 200), end: highlight.end + 200 });
|
void load(sec ? { section: sec.id } : { start: Math.max(0, highlight.start - 200), end: highlight.end + 200 });
|
||||||
} else if (activeSection) {
|
|
||||||
void load({ section: activeSection });
|
|
||||||
} else {
|
} else {
|
||||||
void load();
|
void load();
|
||||||
}
|
}
|
||||||
@@ -270,13 +301,20 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
|
|||||||
}, [slice]);
|
}, [slice]);
|
||||||
|
|
||||||
async function loadMore() {
|
async function loadMore() {
|
||||||
if (!slice?.range) return;
|
if (loadingMore || !slice?.range) return;
|
||||||
|
setLoadingMore(true);
|
||||||
|
try {
|
||||||
const next = await readText({ start: slice.range.end });
|
const next = await readText({ start: slice.range.end });
|
||||||
setSlice((prev) =>
|
setSlice((prev) =>
|
||||||
prev && prev.range && next.range
|
prev && prev.range && next.range
|
||||||
? { ...next, text: (prev.text ?? "") + (next.text ?? ""), range: { start: prev.range.start, end: next.range.end } }
|
? { ...next, text: (prev.text ?? "") + (next.text ?? ""), range: { start: prev.range.start, end: next.range.end } }
|
||||||
: next,
|
: next,
|
||||||
);
|
);
|
||||||
|
} catch {
|
||||||
|
setError("Couldn't load more text. Try again.");
|
||||||
|
} finally {
|
||||||
|
setLoadingMore(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (loading && !slice) {
|
if (loading && !slice) {
|
||||||
@@ -286,6 +324,21 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
if (error && !slice) {
|
||||||
|
return (
|
||||||
|
<div className={cn("py-8 text-sm", className)}>
|
||||||
|
<p className="text-destructive">{error}</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action="knowledge-text-retry"
|
||||||
|
onClick={() => void load(activeSection ? { section: activeSection } : undefined)}
|
||||||
|
className="mt-2 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
if (!slice) return null;
|
if (!slice) return null;
|
||||||
|
|
||||||
const canReadMore = outline.extracted_chars != null && slice.range != null && slice.range.end < outline.extracted_chars;
|
const canReadMore = outline.extracted_chars != null && slice.range != null && slice.range.end < outline.extracted_chars;
|
||||||
@@ -295,14 +348,17 @@ export const TextReader: FC<TextReaderProps> = ({ outline, readText, highlight,
|
|||||||
<article className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">
|
<article className="whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground">
|
||||||
{renderWithHighlight(slice, highlight, markRef)}
|
{renderWithHighlight(slice, highlight, markRef)}
|
||||||
</article>
|
</article>
|
||||||
|
{error && <p className="mt-2 text-xs text-destructive">{error}</p>}
|
||||||
{canReadMore && (
|
{canReadMore && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
data-action="knowledge-read-more"
|
data-action="knowledge-read-more"
|
||||||
onClick={() => void loadMore()}
|
onClick={() => void loadMore()}
|
||||||
className="mt-3 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted"
|
disabled={loadingMore}
|
||||||
|
className="mt-3 inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground transition hover:bg-muted disabled:opacity-50"
|
||||||
>
|
>
|
||||||
Read more
|
{loadingMore && <Loader2 className="size-3.5 animate-spin" />}
|
||||||
|
{loadingMore ? "Loading…" : "Read more"}
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -396,11 +452,23 @@ export const ObjectViewer: FC<ObjectViewerProps> = ({
|
|||||||
!!actions &&
|
!!actions &&
|
||||||
(actions.onEditMeta || actions.onVerify || actions.onDownload || actions.onArchive || actions.onSupersede || actions.onExtractClaims);
|
(actions.onEditMeta || actions.onVerify || actions.onDownload || actions.onArchive || actions.onSupersede || actions.onExtractClaims);
|
||||||
|
|
||||||
|
// Navigating object→object (citation click) reuses this component: clear the
|
||||||
|
// per-object view state so a stale section selection or the previous image
|
||||||
|
// can't bleed into the new object.
|
||||||
|
useEffect(() => {
|
||||||
|
setActiveSection(undefined);
|
||||||
|
}, [outline.object_id]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let live = true;
|
let live = true;
|
||||||
|
setBlob(null);
|
||||||
if (isImage && outline.has_blob && resolveBlobUrl) {
|
if (isImage && outline.has_blob && resolveBlobUrl) {
|
||||||
void resolveBlobUrl().then((u) => {
|
void resolveBlobUrl()
|
||||||
|
.then((u) => {
|
||||||
if (live) setBlob(u);
|
if (live) setBlob(u);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
/* leave the placeholder frame; the download action still works */
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
|
|||||||
151
src/components-search.tsx
Normal file
151
src/components-search.tsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
// PURPOSE: Corpus search (spec §5) — the input + results panel, lifted out of
|
||||||
|
// the app so every consumer (embedded + standalone) renders search the
|
||||||
|
// same way instead of hand-rolling hit rendering. Owns query state,
|
||||||
|
// paginated results, loading/error/clear; shows the caller's `browse`
|
||||||
|
// content when there is no active search. Pure: the actual search runs
|
||||||
|
// through an injected `onSearch` callback.
|
||||||
|
// ===========================================================================
|
||||||
|
import { useState, type FC, type FormEvent, type ReactNode } from "react";
|
||||||
|
import { Loader2, Search, X } from "lucide-react";
|
||||||
|
import type { ObjectSummary, SearchHit, SearchPage } from "./types";
|
||||||
|
import { ObjectList } from "./components-object";
|
||||||
|
|
||||||
|
function hitToSummary(h: SearchHit): ObjectSummary {
|
||||||
|
return {
|
||||||
|
object_id: h.object_id,
|
||||||
|
kind: h.kind,
|
||||||
|
title: h.title,
|
||||||
|
status: "active",
|
||||||
|
updated_at: h.updated_at ?? "",
|
||||||
|
effective_at: h.effective_at ?? null,
|
||||||
|
sensitivity: h.sensitivity,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KnowledgeSearchProps {
|
||||||
|
/** Run a search and return a page; `cursor` drives "Load more". */
|
||||||
|
onSearch: (query: string, cursor?: string) => Promise<SearchPage>;
|
||||||
|
onOpen?: (objectId: string) => void;
|
||||||
|
placeholder?: string;
|
||||||
|
/** Shown below the input while there is no active search (the browse list). */
|
||||||
|
browse?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const KnowledgeSearch: FC<KnowledgeSearchProps> = ({
|
||||||
|
onSearch,
|
||||||
|
onOpen,
|
||||||
|
placeholder,
|
||||||
|
browse,
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const [hits, setHits] = useState<SearchHit[] | null>(null);
|
||||||
|
const [cursor, setCursor] = useState<string | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [loadingMore, setLoadingMore] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
function clear() {
|
||||||
|
setHits(null);
|
||||||
|
setCursor(null);
|
||||||
|
setQuery("");
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run(e?: FormEvent) {
|
||||||
|
e?.preventDefault();
|
||||||
|
const q = query.trim();
|
||||||
|
if (!q) {
|
||||||
|
clear();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const page = await onSearch(q);
|
||||||
|
setHits(page.hits);
|
||||||
|
setCursor(page.next_cursor ?? null);
|
||||||
|
} catch {
|
||||||
|
setError("Search failed. Try again.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadMore() {
|
||||||
|
if (!cursor || loadingMore) return;
|
||||||
|
setLoadingMore(true);
|
||||||
|
try {
|
||||||
|
const page = await onSearch(query.trim(), cursor);
|
||||||
|
setHits((prev) => [...(prev ?? []), ...page.hits]);
|
||||||
|
setCursor(page.next_cursor ?? null);
|
||||||
|
} catch {
|
||||||
|
setError("Couldn't load more results. Try again.");
|
||||||
|
} finally {
|
||||||
|
setLoadingMore(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<form onSubmit={run} className="mb-4 flex items-center gap-2">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
|
<input
|
||||||
|
data-action="knowledge-search"
|
||||||
|
className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-9 text-sm outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/30"
|
||||||
|
placeholder={placeholder ?? "Search…"}
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => setQuery(e.target.value)}
|
||||||
|
/>
|
||||||
|
{query && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={clear}
|
||||||
|
aria-label="Clear search"
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
|
||||||
|
>
|
||||||
|
<X className="size-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<p className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
|
||||||
|
<Loader2 className="size-4 animate-spin" /> Searching…
|
||||||
|
</p>
|
||||||
|
) : error ? (
|
||||||
|
<p className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
) : hits ? (
|
||||||
|
<div>
|
||||||
|
<div className="mb-2 flex items-center justify-between text-xs text-muted-foreground">
|
||||||
|
<span>
|
||||||
|
{hits.length} result{hits.length === 1 ? "" : "s"}
|
||||||
|
</span>
|
||||||
|
<button type="button" className="transition-colors hover:text-foreground" onClick={clear}>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ObjectList
|
||||||
|
objects={hits.map(hitToSummary)}
|
||||||
|
onOpen={(o) => onOpen?.(o.object_id)}
|
||||||
|
onLoadMore={loadMore}
|
||||||
|
hasMore={!!cursor}
|
||||||
|
loadingMore={loadingMore}
|
||||||
|
emptyState={
|
||||||
|
<div className="rounded-xl border border-dashed border-border py-12 text-center text-sm text-muted-foreground">
|
||||||
|
No matches.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
(browse ?? null)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -34,4 +34,6 @@ export {
|
|||||||
export * from "./components-collections";
|
export * from "./components-collections";
|
||||||
export * from "./components-object";
|
export * from "./components-object";
|
||||||
export * from "./components-claims";
|
export * from "./components-claims";
|
||||||
|
export * from "./components-memory";
|
||||||
export * from "./components-export";
|
export * from "./components-export";
|
||||||
|
export * from "./components-search";
|
||||||
|
|||||||
Reference in New Issue
Block a user