@manta-eu/react 0.11.0 → 0.13.0

package/src/routes/memories/components/FieldLabel.tsx

@@ -0,0 +1,49 @@
+import { HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#components/tooltip/index";
+
+export type InfoTipProps = {
+  label: string;
+  hint: string;
+};
+
+export function InfoTip(props: InfoTipProps) {
+  const { label, hint } = props;
+
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex shrink-0 text-default-foreground rounded-sm my-auto"
+            aria-label={`${label} description`}
+          >
+            <HelpCircle className="size-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs text-left typography-small">
+          {hint}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export type FieldLabelProps = {
+  label: string;
+  hint: string;
+  htmlFor?: string;
+};
+
+export function FieldLabel(props: FieldLabelProps) {
+  const { label, hint, htmlFor } = props;
+
+  return (
+    <div className="flex items-end gap-1">
+      <label htmlFor={htmlFor} className="typography-small">
+        {label}
+      </label>
+      <InfoTip label={label} hint={hint} />
+    </div>
+  );
+}

package/src/routes/memories/components/ImportanceSlider.tsx

@@ -9,7 +9,7 @@ type ImportanceConfig = {
   label: string;
 };
 
-const importanceSteps = [1, 2, 3, 4, 5] as const;
+export const importanceSteps = [1, 2, 3, 4, 5] as const;
 
 const importanceConfig: Record<number, ImportanceConfig> = {
   1: { icon: Minus, className: "text-muted-foreground/50", label: "Disabled" },
@@ -19,6 +19,10 @@ const importanceConfig: Record<number, ImportanceConfig> = {
   5: { icon: ChevronsUp, className: "text-error-foreground", label: "Critical" },
 };
 
+export function importanceLabel(step: number): string {
+  return importanceConfig[step]?.label ?? String(step);
+}
+
 export type ImportanceSliderProps = {
   value: number;
   onChange: (v: number) => void;

package/src/routes/memories/components/MemoriesFilters.tsx

@@ -1,4 +1,4 @@
-import { GQLMemoryKind, type GQLMemorySchema } from "@manta-eu/client";
+import { GQLMemoryKind, type GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
 import { isPresent } from "@manta-eu/lib/present";
 import type { Table } from "@tanstack/react-table";
 import { ChevronDown, X } from "lucide-react";
@@ -83,7 +83,7 @@ type MemoriesFiltersProps<TData> = {
   table: Table<TData>;
   columnLabels?: Record<string, string>;
   columnDefaultOrder?: string[];
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   schemaFilter?: SchemaFilter;
   onSchemaFilterChange?: (iri: SchemaFilter) => void;
   statusFilters?: Record<StatusFilterKey, boolean>;

package/src/routes/memories/components/MemoriesPanel.tsx

@@ -17,7 +17,7 @@ import { liveContextQueryKey } from "../hooks/useLiveContext";
 import { buildCreateMemoryInput, buildUpdateMemoryInput } from "../memory-mutation-input";
 import { KindBadge, ScopeBadge } from "./badges";
 import type { MemoryFormState } from "./MemoryFields";
-import { MemoryFormDialog } from "./MemoryFormDialog";
+import { MemoryFormDialog, type MemorySaveResult } from "./MemoryFormDialog";
 import { Banner } from "#components/banner/index";
 import { Button } from "#components/button/index";
 import { Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
@@ -54,7 +54,7 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
   }, [queryClient]);
 
   const handleCreate = useCallback(
-    async (form: MemoryFormState, supersedesMemoryIris?: string[]) => {
+    async (form: MemoryFormState, supersedesMemoryIris?: string[]): Promise<MemorySaveResult> => {
       if (!addDialog) return;
       if (!canManageSharedMemories && addDialog.scope !== GQLMemoryScope.User) return;
       try {
@@ -62,6 +62,8 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
           input: buildCreateMemoryInput(form, addDialog.scope, supersedesMemoryIris),
         });
 
+        if (isPresent(result.createMemory.propertyErrors))
+          return { propertyErrors: result.createMemory.propertyErrors };
         if (result.createMemory.error) throw new Error(result.createMemory.error);
 
         toast.success("Memory added");
@@ -76,7 +78,7 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
   );
 
   const handleUpdate = useCallback(
-    async (form: MemoryFormState, supersedesMemoryIris?: string[]) => {
+    async (form: MemoryFormState, supersedesMemoryIris?: string[]): Promise<MemorySaveResult> => {
       if (!editingMemory) return;
       if (!canManageSharedMemories && editingMemory.scope !== GQLMemoryScope.User) return;
       try {
@@ -84,6 +86,8 @@ export function MemoriesPanel(props: MemoriesPanelProps) {
           input: buildUpdateMemoryInput(editingMemory.iri, form, editingMemory.scope, supersedesMemoryIris),
         });
 
+        if (isPresent(result.updateMemory.propertyErrors))
+          return { propertyErrors: result.updateMemory.propertyErrors };
         if (result.updateMemory.error) throw new Error(result.updateMemory.error);
 
         toast.success("Memory updated");

package/src/routes/memories/components/MemoriesTabPanel.tsx

@@ -1,4 +1,4 @@
-import type { GQLMemory, GQLMemorySchema } from "@manta-eu/client";
+import type { GQLMemory, GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
 import { isPresent } from "@manta-eu/lib/present";
 import type { Row, Table } from "@tanstack/react-table";
 import type { ReactNode } from "react";
@@ -25,7 +25,7 @@ export type MemoriesTabPanelProps = {
   emptyState?: ReactNode;
   columnLabels?: Record<string, string>;
   columnDefaultOrder?: string[];
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   schemaFilter?: SchemaFilter;
   onSchemaFilterChange?: (iri: SchemaFilter) => void;
   onRowClick?: (memory: GQLMemory) => void;

package/src/routes/memories/components/MemoryActions.tsx

@@ -1,7 +1,7 @@
 import { GQLMemoryScope, type GQLMemory } from "@manta-eu/client";
 import { needsTrustReview } from "@manta-eu/client/shared/memory-preload-gate";
 import { isPresent } from "@manta-eu/lib/present";
-import { BadgeCheck, EllipsisIcon, MoveRight, Pencil, Trash2, Undo2 } from "lucide-react";
+import { BadgeCheck, EllipsisIcon, FileCode2, MoveRight, Pencil, Trash2, Undo2, Unlink } from "lucide-react";
 import { useState } from "react";
 import {
   AlertDialog,
@@ -24,10 +24,22 @@ export type MemoryActionsProps = {
   onMove?: (memory: GQLMemory) => void;
   onRestore?: (iri: string) => void;
   onReconfirm?: (iri: string) => void;
+  onUndoSchemaAssignment?: (iri: string) => void;
+  onWriteRule?: (memory: GQLMemory) => void;
 };
 
 export function MemoryActions(props: MemoryActionsProps) {
-  const { memory, canManageSharedMemories, onEdit, onDelete, onMove, onRestore, onReconfirm } = props;
+  const {
+    memory,
+    canManageSharedMemories,
+    onEdit,
+    onDelete,
+    onMove,
+    onRestore,
+    onReconfirm,
+    onUndoSchemaAssignment,
+    onWriteRule,
+  } = props;
   const [confirmOpen, setConfirmOpen] = useState(false);
   const isRealm = memory.scope === GQLMemoryScope.Company;
 
@@ -64,6 +76,18 @@ export function MemoryActions(props: MemoryActionsProps) {
                     Reconfirm
                   </DropdownItem>
                 )}
+                {onUndoSchemaAssignment && isPresent(memory.schemaAssignment) && (
+                  <DropdownItem onSelect={() => onUndoSchemaAssignment(memory.iri)}>
+                    <Unlink size={16} />
+                    Remove auto schema
+                  </DropdownItem>
+                )}
+                {onWriteRule && isRealm && isPresent(memory.memorySubclass) && (
+                  <DropdownItem onSelect={() => onWriteRule(memory)}>
+                    <FileCode2 size={16} />
+                    Write rule
+                  </DropdownItem>
+                )}
                 {onMove && canManageSharedMemories && (
                   <DropdownItem onSelect={() => onMove(memory)}>
                     <MoveRight size={16} />

package/src/routes/memories/components/MemoryFields.tsx

@@ -1,8 +1,10 @@
-import { GQLMemoryKind, type GQLMemorySchema } from "@manta-eu/client";
+import { GQLMemoryKind, GQLMemorySchemaStatus, type GQLMemorySchemaFieldsFragment } from "@manta-eu/client";
 import { formatEntityName } from "@manta-eu/client/shared/rdf-namespaces";
 import { isPresent } from "@manta-eu/lib/present";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import type { ReactNode } from "react";
+import { propertyDefaults, type MemoryPropertyValues } from "../memory-property-values";
+import { FieldLabel } from "./FieldLabel";
 import { ImportanceSlider } from "./ImportanceSlider";
 import { TeamPicker } from "./TeamPicker";
 import { Button } from "#components/button/index";
@@ -33,7 +35,7 @@ export type MemoryFormState = {
   description: string | null;
   kind: GQLMemoryKind;
   memorySubclass: string | null;
-  customProperties: Record<string, string>;
+  customProperties: MemoryPropertyValues;
   memoryValidUntil: string | null;
   memoryTrustedUntil: string | null;
   teams: string[];
@@ -57,17 +59,42 @@ export type MemoryFieldsProps = {
   errors: FormErrors;
   isTeam: boolean;
   canManageSharedMemories?: boolean;
-  schemas?: GQLMemorySchema[];
+  schemas?: GQLMemorySchemaFieldsFragment[];
   onChange: (next: Partial<MemoryFormState>) => void;
   descriptionPlaceholder?: string;
   labelPlaceholder?: string;
   autoFocus?: boolean;
   onEditProperties?: () => void;
+  prefillSchemaDefaults?: boolean;
+  storedSchemaValues?: StoredSchemaValues;
   filledPropertyCount?: number;
   totalPropertyCount?: number;
+  hasPropertyErrors?: boolean;
   children?: ReactNode;
 };
 
+export type StoredSchemaValues = { schemaIri: string | null; values: MemoryPropertyValues };
+
+// Selecting a schema on a new memory takes its defaults; an edit keeps what the memory already has, and going back
+// to the memory's own schema brings its stored values back rather than leaving them blank but still saved.
+export function schemaSelection(
+  current: Pick<MemoryFormState, "memorySubclass">,
+  schema: GQLMemorySchemaFieldsFragment | null,
+  options: { prefillDefaults: boolean; stored?: StoredSchemaValues },
+): Partial<MemoryFormState> {
+  const { prefillDefaults, stored } = options;
+  if ((schema?.iri ?? null) === (current.memorySubclass ?? null)) return {};
+  if (schema === null) return { memorySubclass: null, customProperties: {} };
+  const values =
+    stored?.schemaIri === schema.iri ? { ...stored.values } : prefillDefaults ? propertyDefaults(schema) : {};
+  return {
+    memorySubclass: schema.iri,
+    customProperties: values,
+    ...(prefillDefaults && schema.defaultMemoryKind ? { kind: schema.defaultMemoryKind } : {}),
+    ...(prefillDefaults && schema.defaultImportance != null ? { importance: schema.defaultImportance } : {}),
+  };
+}
+
 export function MemoryFields(props: MemoryFieldsProps) {
   const {
     form,
@@ -80,19 +107,31 @@ export function MemoryFields(props: MemoryFieldsProps) {
     labelPlaceholder,
     autoFocus = false,
     onEditProperties,
+    prefillSchemaDefaults = false,
+    storedSchemaValues,
     filledPropertyCount = 0,
     totalPropertyCount = 0,
+    hasPropertyErrors = false,
     children,
   } = props;
+  const pickable = (schemas ?? []).filter(
+    (schema) => schema.status === GQLMemorySchemaStatus.Active || schema.iri === form.memorySubclass,
+  );
 
   return (
     <>
       <div className="flex flex-col gap-1.5">
-        <label className="typography-small">Importance</label>
+        <FieldLabel
+          label="Importance"
+          hint="How much weight the agent gives this memory. High and Critical are for hard constraints and explicit goals. Disabled keeps it out of conversations but doesn't delete it."
+        />
         <ImportanceSlider value={form.importance} onChange={(v) => onChange({ importance: v })} />
       </div>
       <div className="flex flex-col gap-1.5">
-        <label className="typography-small">Kind</label>
+        <FieldLabel
+          label="Kind"
+          hint="What sort of memory this is. The agent groups memories by kind when it loads them into a conversation, so pick the one that fits best."
+        />
         <Select value={form.kind} onValueChange={(v) => onChange({ kind: v as GQLMemoryKind })}>
           <SelectTrigger label="Kind" id="memory-kind" hiddenLabel>
             <SelectValue />
@@ -105,7 +144,7 @@ export function MemoryFields(props: MemoryFieldsProps) {
           </SelectContent>
         </Select>
       </div>
-      {isPresent(schemas) && (
+      {isPresent(pickable) && (
         <div className="flex flex-col gap-1.5">
           <label className="typography-small">Schema</label>
           <div className="flex items-center gap-2">
@@ -119,7 +158,7 @@ export function MemoryFields(props: MemoryFieldsProps) {
                     )}
                   >
                     {form.memorySubclass
-                      ? (schemas.find((s) => s.iri === form.memorySubclass)?.label ??
+                      ? (pickable.find((s) => s.iri === form.memorySubclass)?.label ??
                         formatEntityName(form.memorySubclass))
                       : "Default"}
                   </span>
@@ -133,16 +172,30 @@ export function MemoryFields(props: MemoryFieldsProps) {
                   <ComboboxItem
                     value="none"
                     selected={form.memorySubclass === null}
-                    onSelect={() => onChange({ memorySubclass: null, customProperties: {} })}
+                    onSelect={() =>
+                      onChange(
+                        schemaSelection(form, null, {
+                          prefillDefaults: prefillSchemaDefaults,
+                          stored: storedSchemaValues,
+                        }),
+                      )
+                    }
                   >
                     Default
                   </ComboboxItem>
-                  {schemas.map((schema) => (
+                  {pickable.map((schema) => (
                     <ComboboxItem
                       key={schema.iri}
                       value={schema.label}
                       selected={form.memorySubclass === schema.iri}
-                      onSelect={() => onChange({ memorySubclass: schema.iri, customProperties: {} })}
+                      onSelect={() =>
+                        onChange(
+                          schemaSelection(form, schema, {
+                            prefillDefaults: prefillSchemaDefaults,
+                            stored: storedSchemaValues,
+                          }),
+                        )
+                      }
                     >
                       {schema.label}
                     </ComboboxItem>
@@ -151,8 +204,18 @@ export function MemoryFields(props: MemoryFieldsProps) {
               </ComboboxContent>
             </Combobox>
             {onEditProperties && totalPropertyCount > 0 && (
-              <Button type="button" variant="tertiary" size="base" onClick={onEditProperties} className="shrink-0">
-                {filledPropertyCount > 0 ? `${filledPropertyCount}/${totalPropertyCount} filled` : "Edit properties"}
+              <Button
+                type="button"
+                variant="tertiary"
+                size="base"
+                onClick={onEditProperties}
+                className={cn("shrink-0", hasPropertyErrors && "text-error-foreground")}
+              >
+                {hasPropertyErrors
+                  ? "Fix properties"
+                  : filledPropertyCount > 0
+                    ? `${filledPropertyCount}/${totalPropertyCount} filled`
+                    : "Edit properties"}
                 <ChevronRight className="size-3.5" />
               </Button>
             )}