@solidxai/core-ui 0.1.20-beta.0 → 0.1.20-beta.1

package/dist/routes/pages/admin/core/AgentPersonaHistory.tsx

@@ -0,0 +1,234 @@
+import React from "react";
+import { ArrowLeftRight, ChevronDown, History, RefreshCw } from "lucide-react";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
+import { useLazyGetchatterMessageQuery } from "../../../../redux/api/solidChatterMessageApi";
+import {
+  SolidDialog, SolidDialogBody, SolidDropdownMenu, SolidDropdownMenuContent,
+  SolidDropdownMenuItem, SolidDropdownMenuTrigger,
+} from "../../../../components/shad-cn-ui";
+import "./AgentPersonaHistory.css";
+
+type AuditDetail = { fieldName?: string; oldValue?: string | null; newValue?: string | null };
+type AuditMessage = {
+  id: number;
+  messageType?: string;
+  messageSubType?: string;
+  createdAt?: string;
+  user?: { fullName?: string } | null;
+  chatterMessageDetails?: AuditDetail[];
+};
+type PersonaVersion = {
+  id: string;
+  prompt: string;
+  createdAt?: string;
+  author: string;
+  kind: "current" | "update" | "initial";
+};
+
+const PAGE_SIZE = 100;
+const dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+const relativeFormatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+
+function relativeTime(value?: string): string {
+  if (!value) return "Date unknown";
+  const time = new Date(value).getTime();
+  if (!Number.isFinite(time)) return "Date unknown";
+  const minutes = Math.round((time - Date.now()) / 60000);
+  if (Math.abs(minutes) < 1) return "Just now";
+  if (Math.abs(minutes) < 60) return relativeFormatter.format(minutes, "minute");
+  const hours = Math.round(minutes / 60);
+  if (Math.abs(hours) < 24) return relativeFormatter.format(hours, "hour");
+  const days = Math.round(hours / 24);
+  if (Math.abs(days) < 30) return relativeFormatter.format(days, "day");
+  const months = Math.round(days / 30);
+  if (Math.abs(months) < 12) return relativeFormatter.format(months, "month");
+  return relativeFormatter.format(Math.round(days / 365), "year");
+}
+
+function absoluteTime(value?: string): string {
+  if (!value) return "Date unknown";
+  const date = new Date(value);
+  return Number.isFinite(date.getTime()) ? dateFormatter.format(date) : "Date unknown";
+}
+
+function versionsFrom(messages: AuditMessage[]): PersonaVersion[] {
+  const ordered = [...messages].sort((a, b) => {
+    const byDate = new Date(b.createdAt ?? 0).getTime() - new Date(a.createdAt ?? 0).getTime();
+    return byDate || b.id - a.id;
+  });
+  const versions: PersonaVersion[] = [];
+  for (const message of ordered) {
+    if (message.messageType !== "audit") continue;
+    const detail = message.chatterMessageDetails?.find((item) => item.fieldName === "systemPrompt");
+    if (!detail || typeof detail.newValue !== "string") continue;
+    if (message.messageSubType !== "audit_update" && message.messageSubType !== "audit_insert") continue;
+    versions.push({
+      id: `audit-${message.id}`,
+      prompt: detail.newValue,
+      createdAt: message.createdAt,
+      author: message.user?.fullName || "System",
+      kind: message.messageSubType === "audit_insert" ? "initial" : "update",
+    });
+  }
+  // Older agents can predate their first recorded insert audit. The first update's
+  // before value still gives us the previous prompt without inventing a timestamp.
+  if (!versions.some((version) => version.kind === "initial")) {
+    const oldestUpdate = [...ordered].reverse().find((message) => message.messageType === "audit" &&
+      message.messageSubType === "audit_update" &&
+      message.chatterMessageDetails?.some((detail) => detail.fieldName === "systemPrompt" && typeof detail.oldValue === "string"));
+    const oldPrompt = oldestUpdate?.chatterMessageDetails?.find((detail) => detail.fieldName === "systemPrompt")?.oldValue;
+    if (typeof oldPrompt === "string") versions.push({
+      id: `before-${oldestUpdate!.id}`,
+      prompt: oldPrompt,
+      author: "Earlier version",
+      kind: "initial",
+    });
+  }
+  return versions;
+}
+
+function versionLabel(version: PersonaVersion): string {
+  if (version.kind === "current") return "Current saved prompt";
+  if (version.id.startsWith("before-")) return "Before first recorded change";
+  return version.kind === "initial" ? "Original prompt" : "Prompt change";
+}
+
+function VersionItem({ version, selected }: { version: PersonaVersion; selected?: boolean }) {
+  return <span className="persona-history__item">
+    <span className="persona-history__item-main"><strong>{versionLabel(version)}</strong></span>
+    <span className="persona-history__item-meta">
+      {version.createdAt ? <time dateTime={version.createdAt} title={absoluteTime(version.createdAt)}>{relativeTime(version.createdAt)}</time> : "Date unknown"}
+      <span aria-hidden="true">·</span><span>{version.author}</span>
+      {selected && <span className="persona-history__selected">Selected</span>}
+    </span>
+  </span>;
+}
+
+function VersionPicker({ versions, value, onChange, side }: {
+  versions: PersonaVersion[];
+  value: string;
+  onChange: (id: string) => void;
+  side: "left" | "right";
+}) {
+  const selected = versions.find((version) => version.id === value) ?? versions[0];
+  return <SolidDropdownMenu>
+    <SolidDropdownMenuTrigger className="persona-history__selector" aria-label={`Choose ${side} prompt version`}>
+      <span className="persona-history__selector-copy">
+        <span className="persona-history__selector-meta"><small>{side === "left" ? "LEFT VERSION" : "RIGHT VERSION"}</small>
+          <time dateTime={selected.createdAt} title={selected.createdAt ? absoluteTime(selected.createdAt) : undefined}>
+            {selected.createdAt ? absoluteTime(selected.createdAt) : selected.author}
+          </time>
+        </span>
+        <strong>{versionLabel(selected)}</strong>
+      </span><ChevronDown size={17} aria-hidden="true" />
+    </SolidDropdownMenuTrigger>
+    <SolidDropdownMenuContent className="persona-history__menu" align="start" sideOffset={8}>
+      <div className="persona-history__menu-heading">Choose {side} version</div>
+      <div className="persona-history__menu-list">
+        {versions.map((version) => <SolidDropdownMenuItem key={version.id} className="persona-history__menu-option"
+          onSelect={() => onChange(version.id)}><VersionItem version={version} selected={version.id === value} /></SolidDropdownMenuItem>)}
+      </div>
+    </SolidDropdownMenuContent>
+  </SolidDropdownMenu>;
+}
+
+export function AgentPersonaHistory({ agentId, savedPrompt, refreshVersion }: {
+  agentId: number;
+  savedPrompt: string;
+  refreshVersion: number;
+}) {
+  const [getMessages] = useLazyGetchatterMessageQuery();
+  const [versions, setVersions] = React.useState<PersonaVersion[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(false);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [leftId, setLeftId] = React.useState("current");
+  const [rightId, setRightId] = React.useState("");
+  const requestId = React.useRef(0);
+
+  const current: PersonaVersion = { id: "current", prompt: savedPrompt, author: "Saved agent", kind: "current" };
+  const choices = [current, ...versions];
+  const left = choices.find((version) => version.id === leftId) ?? current;
+  const right = choices.find((version) => version.id === rightId) ?? versions[0] ?? current;
+
+  const loadVersions = React.useCallback(async () => {
+    const request = ++requestId.current;
+    setLoading(true);
+    setError(false);
+    try {
+      const all: AuditMessage[] = [];
+      let offset = 0;
+      while (true) {
+        const qs = `limit=${PAGE_SIZE}&offset=${offset}&populate[0]=user`;
+        const response = await getMessages({ entityId: agentId, entityName: "agentRegistry", qs }, false).unwrap();
+        const records = (response?.data?.records ?? []) as AuditMessage[];
+        all.push(...records);
+        const total = Number(response?.data?.meta?.totalRecords ?? all.length);
+        if (!records.length || all.length >= total) break;
+        offset += records.length;
+      }
+      if (request === requestId.current) setVersions(versionsFrom(all));
+    } catch {
+      if (request === requestId.current) setError(true);
+    } finally {
+      if (request === requestId.current) setLoading(false);
+    }
+  }, [agentId, getMessages]);
+
+  React.useEffect(() => {
+    setVersions([]);
+    setLeftId("current");
+    setRightId("");
+    setDialogOpen(false);
+    setMenuOpen(false);
+    return () => { requestId.current += 1; };
+  }, [agentId]);
+
+  React.useEffect(() => {
+    if (menuOpen || dialogOpen) void loadVersions();
+  }, [menuOpen, refreshVersion]);
+
+  const compare = (version: PersonaVersion) => {
+    setLeftId("current");
+    setRightId(version.id);
+    setMenuOpen(false);
+    setDialogOpen(true);
+  };
+
+  return <>
+    <SolidDropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <SolidDropdownMenuTrigger className="persona-history__trigger" aria-label="Persona history" title="Persona history">
+        <History size={17} aria-hidden="true" />
+      </SolidDropdownMenuTrigger>
+      <SolidDropdownMenuContent className="persona-history__menu" align="end" sideOffset={8}>
+        <div className="persona-history__menu-header"><span><strong>Persona history</strong><small>Saved changes to the system prompt</small></span>
+          <button type="button" className="persona-history__refresh" aria-label="Refresh persona history" title="Refresh history"
+            onClick={(event) => { event.preventDefault(); event.stopPropagation(); void loadVersions(); }}><RefreshCw size={15} /></button>
+        </div>
+        <div className="persona-history__menu-list">
+          {loading && <div className="persona-history__status">Loading prompt history…</div>}
+          {!loading && error && <div className="persona-history__status persona-history__status--error">Could not load history. Try refreshing.</div>}
+          {!loading && !error && !versions.length && <div className="persona-history__status">No saved prompt changes yet.</div>}
+          {!loading && !error && versions.map((version) => <SolidDropdownMenuItem key={version.id} className="persona-history__menu-option"
+            onSelect={() => compare(version)}><VersionItem version={version} /></SolidDropdownMenuItem>)}
+        </div>
+      </SolidDropdownMenuContent>
+    </SolidDropdownMenu>
+
+    <SolidDialog open={dialogOpen} onOpenChange={setDialogOpen} ariaLabel="Compare persona versions"
+      className="persona-history__dialog" header={<span className="persona-history__dialog-title"><History size={18} /> Compare persona versions</span>}>
+      <SolidDialogBody className="persona-history__dialog-body">
+        <div className="persona-history__compare-controls">
+          <VersionPicker versions={choices} value={left.id} onChange={setLeftId} side="left" />
+          <span className="persona-history__compare-icon" aria-hidden="true"><ArrowLeftRight size={17} /></span>
+          <VersionPicker versions={choices} value={right.id} onChange={setRightId} side="right" />
+        </div>
+        <div className="persona-history__diff" key={`${left.id}:${right.id}`}>
+          <ReactDiffViewer oldValue={left.prompt} newValue={right.prompt} splitView compareMethod={DiffMethod.LINES}
+            leftTitle={versionLabel(left)} rightTitle={versionLabel(right)} showDiffOnly={false} />
+        </div>
+      </SolidDialogBody>
+    </SolidDialog>
+  </>;
+}

package/dist/routes/pages/admin/core/AgentRegistryEditorPage.css

@@ -20,6 +20,7 @@
 .agent-editor__field select,.agent-editor__field input[type=number],.agent-editor__input-row select { min-height:2.5rem; padding:.5rem .7rem; border:1px solid var(--surface-border,var(--border)); border-radius:.5rem; background:var(--surface-ground,var(--background)); color:inherit; font:inherit; }
 .agent-editor__section { display:flex; flex-direction:column; gap:.9rem; padding:1rem; border:1px solid var(--surface-border,var(--border)); border-radius:.75rem; }
 .agent-editor__section h2 { margin:0; font-size:1rem; }
+.agent-editor__linked-count { color:var(--text-color-secondary,var(--muted-foreground)); font-size:.82rem; font-weight:600; }
 .agent-editor__workflow { gap:1.15rem; }
 .agent-editor__workflow-stages { display:flex; align-items:stretch; gap:.55rem; }
 .agent-editor__workflow-connector { width:clamp(1rem,4vw,3.5rem); align-self:center; height:2px; flex:0 0 auto; background:var(--surface-border,var(--border)); }
@@ -40,23 +41,14 @@
 .agent-editor__empty { padding:2rem 1rem; border:1px dashed var(--surface-border,var(--border)); border-radius:.65rem; text-align:center; color:var(--text-color-secondary,var(--muted-foreground)); }
 .agent-editor__empty button,.agent-editor__new-link { display:inline-flex; align-items:center; gap:.35rem; margin-left:.3rem; border:0; background:none; color:var(--primary-color,var(--primary)); cursor:pointer; text-decoration:none; font:inherit; font-weight:600; }
 .agent-editor__inputs { display:flex; flex-direction:column; gap:.55rem; }
-.agent-editor__input-row { display:grid; grid-template-columns:1fr 1.5fr 10rem 2.5rem; gap:.5rem; align-items:center; }
+.agent-editor__input-row { display:grid; grid-template-columns:1fr 1.5fr 1fr 8rem 7rem 2.5rem; gap:.5rem; align-items:center; padding:.75rem; border:1px solid var(--surface-border,var(--border)); border-radius:.6rem; }
+.agent-editor__input-optional { display:flex; align-items:center; gap:.35rem; font-size:.8rem; white-space:nowrap; }
 .agent-editor__input-row>button,.agent-editor__linked-card>button { display:grid; place-items:center; min-height:2.5rem; border:0; border-radius:.4rem; background:transparent; color:var(--text-color-secondary,var(--muted-foreground)); cursor:pointer; }
 .agent-editor__input-row>button:hover,.agent-editor__linked-card>button:hover { color:#dc2626; }
 .agent-editor__error { color:#dc2626!important; }
 .agent-editor__hint { color:var(--text-color-secondary,var(--muted-foreground)); }
-.agent-editor__model-picker { position:relative; width:100%; min-width:0; font-weight:400; }
-.agent-editor__model-control { display:flex; align-items:center; min-height:2.5rem; border:1px solid var(--surface-border,var(--border)); border-radius:.5rem; background:var(--surface-ground,var(--background)); }
-.agent-editor__model-control:focus-within { outline:2px solid color-mix(in srgb,var(--primary-color,var(--primary)) 35%,transparent); outline-offset:1px; }
-.agent-editor__model-control input { width:100%; min-width:0; padding:.55rem .7rem; border:0; outline:0; background:transparent; color:inherit; font:inherit; }
-.agent-editor__model-control input::placeholder { color:var(--text-color,var(--foreground)); opacity:1; }
-.agent-editor__model-control>button { display:grid; place-items:center; width:2.5rem; height:2.4rem; flex:0 0 auto; border:0; background:transparent; color:var(--text-color-secondary,var(--muted-foreground)); cursor:pointer; }
-.agent-editor__model-menu { z-index:1000; overflow:auto; padding:.35rem; border:1px solid var(--surface-border,var(--border)); border-radius:.6rem; background:var(--surface-card,var(--card)); box-shadow:0 10px 26px #0002; }
-.agent-editor__model-group h3 { position:sticky; top:-.35rem; z-index:1; margin:0; padding:.45rem .6rem; border-bottom:1px solid var(--surface-border,var(--border)); background:var(--surface-card,var(--card)); color:var(--text-color-secondary,var(--muted-foreground)); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
-.agent-editor__model-option { display:flex; flex-direction:column; align-items:flex-start; width:calc(100% - .55rem); margin-left:.55rem; padding:.48rem .6rem; border:0; border-radius:.35rem; background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; }
-.agent-editor__model-option:hover,.agent-editor__model-option.is-active { background:var(--surface-hover,#f2f3f4); }
-.agent-editor__model-option small { margin-top:.1rem; color:var(--text-color-secondary,var(--muted-foreground)); font-size:.72rem; }
-.agent-editor__model-empty { padding:.8rem; color:var(--text-color-secondary,var(--muted-foreground)); font-size:.85rem; }
+.agent-editor__models .solid-autocomplete,.agent-editor__models .solid-input { font-weight:400; }
+.agent-editor__models .agent-editor__field>.solid-input { margin-top:.25rem; }
 .agent-editor__test-dialog-overlay { z-index:1200!important; }
 .agent-editor__test-dialog { z-index:1201!important; gap:0; }
 .agent-editor__test-dialog-body { flex:1 1 auto; min-height:0; overflow:hidden; }
@@ -110,7 +102,7 @@
 .agent-process-view__empty { display:grid; place-items:center; padding:1rem; color:var(--text-color-secondary,var(--muted-foreground)); font-size:.8rem; text-align:center; }
 @media(max-width:1100px) { .agent-process-view { grid-template-columns:minmax(11rem,22%) minmax(0,1fr); } .agent-process-view .agent-tool-editor__sessions { grid-template-columns:minmax(11rem,34%) minmax(0,1fr); } }
 @media(max-width:900px) { .agent-process-view { height:auto; min-height:0; grid-template-columns:minmax(0,1fr); } .agent-process-view__processes { max-height:18rem; border-right:0; border-bottom:1px solid var(--surface-border,var(--border)); } .agent-process-view .agent-tool-editor__sessions { min-height:38rem; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(24rem,1fr); } }
-@media(max-width:750px) { .agent-editor__grid { grid-template-columns:1fr; } .agent-editor__input-row { grid-template-columns:1fr 1fr 2.5rem; } .agent-editor__input-row select { grid-column:1 / 3; grid-row:2; } .agent-editor__input-row>button { grid-column:3; grid-row:1 / 3; } .agent-editor__workflow-stages { flex-direction:column; } .agent-editor__workflow-connector { width:2px; height:1rem; margin-left:1.65rem; } }
+@media(max-width:750px) { .agent-editor__grid { grid-template-columns:1fr; } .agent-editor__input-row { grid-template-columns:1fr 1fr; } .agent-editor__input-row select { grid-column:auto; grid-row:auto; } .agent-editor__input-row>button { grid-column:2; grid-row:auto; } .agent-editor__workflow-stages { flex-direction:column; } .agent-editor__workflow-connector { width:2px; height:1rem; margin-left:1.65rem; } }
 @media(max-width:600px) { .agent-editor { padding:1rem; } .agent-editor__header { align-items:flex-start; flex-direction:column; } .agent-editor__actions { width:100%; } }
 
 .agent-editor__workflow-meta { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }

package/dist/routes/pages/admin/core/AgentRegistryEditorPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentRegistryEditorPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/AgentRegistryEditorPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,+BAA+B,CAAC;AAwRvC,wBAAgB,uBAAuB,4CAkXtC"}
+{"version":3,"file":"AgentRegistryEditorPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/AgentRegistryEditorPage.tsx"],"names":[],"mappings":"AAqBA,OAAO,+BAA+B,CAAC;AAuTvC,wBAAgB,uBAAuB,4CAuYtC"}