@agent-native/toolkit 0.5.1 → 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/dist/composer/AgentComposerFrame.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { AgentComposerLayoutVariant } from "./types.js";
+export interface AgentComposerFrameProps {
+    children: React.ReactNode;
+    className?: string;
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    rootStyle?: React.CSSProperties;
+    layoutVariant?: AgentComposerLayoutVariant;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+/**
+ * The single visual shell for agent chat composition.
+ *
+ * AssistantChat, PromptComposer, and host surfaces such as Agent-Native Code
+ * all render this same frame so the composer does not drift across products.
+ */
+export declare function AgentComposerFrame({ children, className, rootClassName, style, rootStyle, layoutVariant, onClick, }: AgentComposerFrameProps): React.JSX.Element;
+//# sourceMappingURL=AgentComposerFrame.d.ts.map

package/dist/composer/AgentComposerFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposerFrame.d.ts","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,aAAa,EACb,KAAK,EACL,SAAS,EACT,aAAyB,EACzB,OAAO,GACR,EAAE,uBAAuB,qBA4BzB"}

package/dist/composer/AgentComposerFrame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComposerPrimitive } from "@assistant-ui/react";
+import { cn } from "../utils.js";
+/**
+ * The single visual shell for agent chat composition.
+ *
+ * AssistantChat, PromptComposer, and host surfaces such as Agent-Native Code
+ * all render this same frame so the composer does not drift across products.
+ */
+export function AgentComposerFrame({ children, className, rootClassName, style, rootStyle, layoutVariant = "default", onClick, }) {
+    return (_jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "area", className: cn("agent-composer-area shrink-0 px-3 py-2", layoutVariant !== "default" && `agent-composer-area--${layoutVariant}`, className), style: style, onClick: onClick, children: _jsx(ComposerPrimitive.Root, { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "root", className: cn("agent-composer-root flex flex-col rounded-lg border border-input bg-muted/45 transition-colors focus-within:border-ring", layoutVariant !== "default" &&
+                `agent-composer-root--${layoutVariant}`, rootClassName), style: rootStyle, children: children }) }));
+}
+//# sourceMappingURL=AgentComposerFrame.js.map

package/dist/composer/AgentComposerFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposerFrame.js","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAajC;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,aAAa,EACb,KAAK,EACL,SAAS,EACT,aAAa,GAAG,SAAS,EACzB,OAAO,GACiB;IACxB,OAAO,CACL,6CAC+B,aAAa,8BACjB,MAAM,EAC/B,SAAS,EAAE,EAAE,CACX,wCAAwC,EACxC,aAAa,KAAK,SAAS,IAAI,wBAAwB,aAAa,EAAE,EACtE,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,YAEhB,KAAC,iBAAiB,CAAC,IAAI,mCACQ,aAAa,8BACjB,MAAM,EAC/B,SAAS,EAAE,EAAE,CACX,yHAAyH,EACzH,aAAa,KAAK,SAAS;gBACzB,wBAAwB,aAAa,EAAE,EACzC,aAAa,CACd,EACD,KAAK,EAAE,SAAS,YAEf,QAAQ,GACc,GACrB,CACP,CAAC;AACJ,CAAC"}

package/dist/composer/ComposerPlusMenu.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ComposerMode } from "./types.js";
+interface ComposerPlusMenuProps {
+    onSelectMode?: (mode: ComposerMode) => void;
+    onAttachmentError?: (message: string) => void;
+    /**
+     * "full" (default): full + menu with Upload File, Create Skill, Schedule Task,
+     * Automation, Extension, MCP Server. "upload-only": clicking + opens the file
+     * picker directly — no popover, no other modes. Use for prompt popovers
+     * (create extension, create deck, create dashboard, etc.) where the only thing
+     * to attach is a file.
+     */
+    mode?: "full" | "upload-only";
+}
+export declare function ComposerPlusMenu({ onSelectMode, onAttachmentError, mode, }: ComposerPlusMenuProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ComposerPlusMenu.d.ts.map

package/dist/composer/ComposerPlusMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerPlusMenu.d.ts","sourceRoot":"","sources":["../../src/composer/ComposerPlusMenu.tsx"],"names":[],"mappings":"AAcA,OAAO,KAMN,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;CAC/B;AA2LD,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,iBAAiB,EACjB,IAAa,GACd,EAAE,qBAAqB,qBAUvB"}