@agent-native/toolkit 0.6.0 → 0.7.0

package/dist/chat-history.css

@@ -0,0 +1,314 @@
+/*
+ * Shared chat history list — used by Core's `HistoryPopover`
+ * (MultiTabAssistantChat.tsx) and by Agent-Native Code's run rail
+ * (code-agents-ui CodeAgentsApp.tsx). Stable, prefixed class names (not
+ * Tailwind utilities) so the same visual language works in both a Tailwind
+ * host (core/templates) and a plain-CSS host (code-agents-ui), matching the
+ * approach used by agent-conversation.css. All colors resolve through the
+ * shared `hsl(var(--token))` variables so light/dark both work in either
+ * host's theme.
+ *
+ * Two density variants:
+ *   .an-chat-history           default — compact popover list (core)
+ *   .an-chat-history--rail     denser rail list with solid active state
+ */
+
+.an-chat-history {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.an-chat-history__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-icon {
+  flex-shrink: 0;
+}
+
+.an-chat-history__search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  font-size: 12px;
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history__search-input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__list {
+  overflow-y: auto;
+  padding: 4px 0;
+  max-height: 16rem;
+}
+
+.an-chat-history--rail .an-chat-history__list {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+
+.an-chat-history__state {
+  padding: 16px 12px;
+  text-align: center;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history__state--error {
+  /* Matches the amber-500 warning tone historically used for the
+     HistoryPopover load-error state (Tailwind's `text-amber-500`). */
+  color: hsl(38 92% 50%);
+}
+
+.an-chat-history__section-label {
+  padding: 6px 12px 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+.an-chat-history--rail .an-chat-history__section {
+  display: grid;
+  gap: 1px;
+}
+
+/* ── Row ──────────────────────────────────────────────────────────────── */
+
+.an-chat-history-row {
+  position: relative;
+}
+
+.an-chat-history--rail .an-chat-history-row {
+  border-radius: calc(var(--radius) - 2px);
+  margin: 0 4px;
+}
+
+.an-chat-history-row__button {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row--disabled .an-chat-history-row__button {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.5);
+}
+
+.an-chat-history-row--active .an-chat-history-row__button {
+  background: hsl(var(--accent) / 0.3);
+}
+
+.an-chat-history--rail .an-chat-history-row__button {
+  min-height: 32px;
+  padding-block: 6px;
+  padding-inline: 10px 36px;
+  border-radius: inherit;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__button {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__topline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.an-chat-history-row__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row--active .an-chat-history-row__title {
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__title {
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--pinned:not(.an-chat-history-row--active)
+  .an-chat-history-row__title {
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row__timestamp {
+  flex-shrink: 0;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history--rail .an-chat-history-row__timestamp {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground) / 0.62);
+}
+
+.an-chat-history--rail
+  .an-chat-history-row--active
+  .an-chat-history-row__timestamp {
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__subtitle {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+.an-chat-history-row__detail {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* ── Inline rename ────────────────────────────────────────────────────── */
+
+.an-chat-history-row__rename {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+}
+
+.an-chat-history-row__rename-input {
+  width: 100%;
+  min-width: 0;
+  padding: 2px 6px;
+  border: 1px solid hsl(var(--ring));
+  border-radius: calc(var(--radius) - 3px);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
+}
+
+.an-chat-history-row__rename-input:focus {
+  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.35);
+}
+
+/* ── Row action menu ──────────────────────────────────────────────────── */
+
+.an-chat-history-row__menu {
+  position: absolute;
+  top: 4px;
+  inset-inline-end: 4px;
+}
+
+.an-chat-history-row__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: calc(var(--radius) - 3px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  opacity: 0;
+  cursor: pointer;
+  transition:
+    background 100ms ease,
+    color 100ms ease,
+    opacity 100ms ease;
+}
+
+.an-chat-history-row:hover .an-chat-history-row__menu-trigger,
+.an-chat-history-row:focus-within .an-chat-history-row__menu-trigger,
+.an-chat-history-row__menu-trigger[aria-expanded="true"],
+.an-chat-history-row__menu-trigger--pinned {
+  opacity: 1;
+}
+
+.an-chat-history-row__menu-trigger:hover,
+.an-chat-history-row__menu-trigger[aria-expanded="true"] {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+
+.an-chat-history-row__menu-content {
+  position: absolute;
+  top: calc(100% + 4px);
+  inset-inline-end: 0;
+  z-index: 30;
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: 0 10px 30px hsl(var(--background) / 0.28);
+}
+
+.an-chat-history-row__menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: calc(var(--radius) - 4px);
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  text-align: start;
+  cursor: pointer;
+}
+
+.an-chat-history-row__menu-item:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-row__menu-item--danger {
+  color: hsl(var(--destructive));
+}
+
+.an-chat-history-row__menu-item--danger:hover {
+  background: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -14,6 +14,7 @@
   },
   "files": [
     "dist",
+    "src",
     "migration-manifest.json",
     "README.md"
   ],
@@ -59,6 +60,20 @@
       "import": "./dist/collab-ui/*.js",
       "default": "./dist/collab-ui/*.js"
     },
+    "./chat-history": {
+      "types": "./dist/chat-history/index.d.ts",
+      "browser": "./dist/chat-history/index.js",
+      "development": "./dist/chat-history/index.js",
+      "import": "./dist/chat-history/index.js",
+      "default": "./dist/chat-history/index.js"
+    },
+    "./chat-history/*": {
+      "types": "./dist/chat-history/*.d.ts",
+      "browser": "./dist/chat-history/*.js",
+      "development": "./dist/chat-history/*.js",
+      "import": "./dist/chat-history/*.js",
+      "default": "./dist/chat-history/*.js"
+    },
     "./composer": {
       "types": "./dist/composer/index.d.ts",
       "browser": "./dist/composer/index.js",
@@ -173,6 +188,7 @@
     },
     "./migration-manifest.json": "./migration-manifest.json",
     "./styles.css": "./dist/styles.css",
+    "./chat-history.css": "./dist/chat-history.css",
     "./editor.css": "./dist/editor.css"
   },
   "publishConfig": {

package/src/app-shell/header-actions.tsx

@@ -0,0 +1,84 @@
+import {
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+  type FC,
+} from "react";
+
+/**
+ * External store for the page's header title + actions. We use an external
+ * store (not React context) so that pages can inject ReactNode without
+ * subscribing to the header state themselves — subscribing would trigger a
+ * re-render on every update, which in turn creates new JSX, which updates
+ * the store again, which re-renders… an infinite loop.
+ *
+ * Only <Header /> reads the store via useSyncExternalStore; pages only write.
+ */
+
+type Listener = () => void;
+
+let currentTitle: ReactNode = null;
+let currentActions: ReactNode = null;
+const listeners = new Set<Listener>();
+
+function notify() {
+  for (const l of listeners) l();
+}
+
+function subscribe(l: Listener): () => void {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+}
+
+/** Consumed only by <Header /> — returns the current title. */
+export function useHeaderTitle(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentTitle,
+    () => currentTitle,
+  );
+}
+
+/** Consumed only by <Header /> — returns the current actions slot. */
+export function useHeaderActions(): ReactNode {
+  return useSyncExternalStore(
+    subscribe,
+    () => currentActions,
+    () => currentActions,
+  );
+}
+
+/**
+ * Provider is now a no-op wrapper for backwards compatibility — the state
+ * lives in the module-level store above. Kept as a component so callers of
+ * <HeaderActionsProvider> don't need to change.
+ */
+export const HeaderActionsProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+/** Mount a custom title into the app header. Cleans up on unmount. */
+export function useSetPageTitle(node: ReactNode) {
+  useEffect(() => {
+    currentTitle = node;
+    notify();
+    return () => {
+      currentTitle = null;
+      notify();
+    };
+  });
+}
+
+/** Mount ReactNode into the header's actions slot. Cleans up on unmount. */
+export function useSetHeaderActions(node: ReactNode) {
+  useEffect(() => {
+    currentActions = node;
+    notify();
+    return () => {
+      currentActions = null;
+      notify();
+    };
+  });
+}

package/src/app-shell/index.ts

@@ -0,0 +1 @@
+export * from "./header-actions.js";