Compare commits
3 Commits
66221afedc
...
feat/kb-me
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2c921a911c | ||
|
|
03443590a2 | ||
|
|
c3dc237aa4 |
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
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