@m6d/cortex-angular 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@m6d/cortex-angular",
+  "version": "1.0.0",
+  "description": "Reusable AI agent chat UI library for Angular",
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    "./styles.css": "./styles.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/m6d-cortex-angular.d.ts",
+      "default": "./fesm2022/m6d-cortex-angular.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@ngx-translate/core": "^17.0.0",
+    "@tanstack/ai": ">=0.43.0 <1.0.0",
+    "@tanstack/ai-angular": ">=0.4.0 <1.0.0",
+    "@tanstack/ai-client": ">=0.23.0 <1.0.0",
+    "dompurify": "^3.0.0",
+    "highlight.js": "^11.0.0",
+    "marked": "^17.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "packageManager": "bun@1.3.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/m6d-cortex-angular.mjs",
+  "typings": "types/m6d-cortex-angular.d.ts"
+}

package/styles.css

@@ -0,0 +1,69 @@
+/* fallow-ignore-file code-duplication -- deliberately restates styles/_theme.scss: the whole point of this file is the full token set in one place */
+/*
+ * Theming surface.
+ *
+ * Every value below is the widget's own default, restated here so the full set is
+ * discoverable in one place — the same declarations already ship inside cortex.css,
+ * so importing this file changes nothing until you edit it. Override any token on
+ * :root, or on any ancestor of the widget, to retheme it.
+ *
+ * Each color is a light-dark() pair. Which side applies follows the widget root's
+ * color-scheme, set by the `theme` config option ('light' | 'dark' | 'system').
+ * The radius and font tokens below the colors are plain values — neither depends
+ * on the scheme.
+ */
+:root {
+  --cortex-color-surface: light-dark(#ffffff, #0a0a0a);
+  --cortex-color-surface-subtle: light-dark(#f8fafc, #141414);
+  --cortex-color-surface-muted: light-dark(#f1f5f9, #1f1f1f);
+
+  --cortex-color-border: light-dark(#e2e8f0, #2e2e2e);
+  --cortex-color-border-strong: light-dark(#cbd5e1, #444444);
+
+  --cortex-color-text-heading: light-dark(#1e293b, #fafafa);
+  --cortex-color-text-strong: light-dark(#334155, #e5e5e5);
+  --cortex-color-text: light-dark(#475569, #d4d4d4);
+  --cortex-color-text-secondary: light-dark(#64748b, #a3a3a3);
+  --cortex-color-text-muted: light-dark(#94a3b8, #737373);
+
+  --cortex-color-primary: light-dark(#1e293b, #fafafa);
+  --cortex-color-primary-foreground: light-dark(#ffffff, #0a0a0a);
+  --cortex-color-accent: light-dark(#4f46e5, #818cf8);
+  --cortex-color-accent-surface: light-dark(#e0e7ff, #312e81);
+  --cortex-color-link: light-dark(#2563eb, #60a5fa);
+  --cortex-color-hover: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
+
+  /* User messages default to the same subtle surface every other quiet panel
+   * uses, split out so a consumer can give their own side of the chat a color
+   * without touching anything else. */
+  --cortex-color-user-surface: var(--cortex-color-surface-subtle);
+  --cortex-color-user-border: var(--cortex-color-border);
+
+  --cortex-color-success: light-dark(#059669, #34d399);
+  --cortex-color-success-surface: light-dark(#ecfdf5, #064e3b);
+  --cortex-color-success-border: light-dark(#d1fae5, #065f46);
+  --cortex-color-danger: light-dark(#dc2626, #f87171);
+  --cortex-color-danger-surface: light-dark(#fef2f2, #450a0a);
+  --cortex-color-danger-border: light-dark(#fecaca, #7f1d1d);
+
+  /* The corner scale every rounded surface derives from: the widget multiplies
+   * this by 0.5/0.75/1.5/2, so overriding it rescales all of them together. */
+  --cortex-radius: 0.5rem;
+
+  --cortex-font-mono: var(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace
+  );
+  --cortex-font-size: 0.8125rem;
+
+  /* The widget's headings read --cortex-font-display and fall back to `inherit`,
+   * so it ships unset on purpose — declaring it here is how you opt in:
+   *
+   * --cortex-font-display: 'Your Display Face', sans-serif;
+   */
+}

package/types/m6d-cortex-angular.d.ts

@@ -0,0 +1,294 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import * as _angular_core from '@angular/core';
+import { Injector, OnInit, Type } from '@angular/core';
+import * as _tanstack_ai from '@tanstack/ai';
+import * as _tanstack_ai_angular from '@tanstack/ai-angular';
+import { Observable } from 'rxjs';
+
+declare const ATTACHMENT_STATUSES: readonly [
+	"pending",
+	"described",
+	"failed",
+	"skipped"
+];
+export type AttachmentStatus = (typeof ATTACHMENT_STATUSES)[number];
+export type AttachmentSummary = {
+	id: string;
+	filename: string;
+	contentType: string;
+	sizeBytes: number;
+	status: AttachmentStatus;
+	description?: string;
+};
+export type ThreadSummary = {
+	id: string;
+	title?: string;
+	createdAt: string;
+	updatedAt: string;
+	isRunning: boolean;
+};
+export type TokenUsage = {
+	input: {
+		noCache: number;
+		cacheRead: number;
+		cacheWrite: number;
+		total: number;
+	};
+	output: {
+		reasoning: number;
+		text: number;
+		total: number;
+	};
+	total: number;
+};
+export type MessageMetadata = {
+	modelId?: string;
+	providerMetadata?: unknown;
+	isAborted?: boolean;
+	tokenUsage?: TokenUsage;
+	attachments?: AttachmentSummary[];
+};
+export type CortexHeaders = Record<string, string>;
+/**
+ * How the widget reaches its cortex server. `baseUrl` may be a thunk so a host
+ * with a reactive origin (an Angular Signal is itself a `() => string`) is read
+ * at the moment of each request rather than captured once.
+ */
+export type CortexTransport = {
+	baseUrl: string | (() => string);
+	getHeaders: () => CortexHeaders | Promise<CortexHeaders>;
+};
+export type LlmRequest = {
+	id: string;
+	prompt: string;
+	output: string | null;
+	tokenUsage: TokenUsage | null;
+};
+export type CortexViewMode = "helper" | "full";
+export type CortexTheme = "light" | "dark" | "system";
+export type CortexToolCallContext = {
+	threadId: string;
+};
+/** A tool the server left for the client to answer. */
+export type CortexToolCall = {
+	toolCallId: string;
+	toolName: string;
+	input: unknown;
+};
+export type CortexHooks = {
+	onToolCall?: (toolCall: CortexToolCall, context: CortexToolCallContext) => unknown;
+	onThreadSelected?: (thread: ThreadSummary) => Promise<void> | void;
+	onThreadDeselected?: (thread: ThreadSummary) => Promise<void> | void;
+};
+/**
+ * The framework-neutral part of the widget's configuration. Each SDK extends it
+ * with its own `toolComponents` slot, which is the one field whose type is
+ * inherently framework-bound.
+ */
+export type CortexConfig = {
+	/** `'en' | 'ar'`, defaults to `'en'`. */
+	locale?: string;
+	transport: CortexTransport;
+	wsUrl?: string;
+	viewMode?: CortexViewMode;
+	/** Color scheme; `'system'` follows the OS preference. Defaults to `'light'`. */
+	theme?: CortexTheme;
+	showDebugButton?: boolean;
+	hooks?: CortexHooks;
+};
+export type QueuedAttachment = {
+	localId: string;
+	filename: string;
+	status: "uploading" | "ready" | "deleting" | "error";
+	threadId?: string;
+	attachmentId?: string;
+	summary?: AttachmentSummary;
+};
+export type CortexClientConfig = CortexConfig & {
+	toolComponents?: Record<string, Type<unknown>>;
+	injector?: Injector;
+};
+declare const ATTACHMENT_STATUSES$1: readonly [
+	"pending",
+	"described",
+	"failed",
+	"skipped"
+];
+type AttachmentStatus$1 = (typeof ATTACHMENT_STATUSES$1)[number];
+type AttachmentSummary$1 = {
+	id: string;
+	filename: string;
+	contentType: string;
+	sizeBytes: number;
+	status: AttachmentStatus$1;
+	description?: string;
+};
+declare class AttachmentQueueService {
+	readonly items: _angular_core.WritableSignal<QueuedAttachment[]>;
+	private readonly flags;
+	readonly uploading: _angular_core.Signal<boolean>;
+	readonly busy: _angular_core.Signal<boolean>;
+	readonly hasReady: _angular_core.Signal<boolean>;
+	private readonly chatService;
+	private readonly queue;
+	constructor();
+	accept(files: File[]): void;
+	remove(localId: string): void;
+	clear(threadId: string | undefined): void;
+	consumeReady(): {
+		status: "ready";
+		summary: AttachmentSummary$1;
+		localId: string;
+		filename: string;
+		threadId?: string;
+		attachmentId?: string;
+	}[];
+	restoreConsumed(threadId: string | undefined): void;
+	discardConsumed(): void;
+	static ɵfac: _angular_core.ɵɵFactoryDeclaration<AttachmentQueueService, never>;
+	static ɵprov: _angular_core.ɵɵInjectableDeclaration<AttachmentQueueService>;
+}
+declare class CortexChatService {
+	/**
+	 * Selection is the Thread handed to `selectThread`, resolved against the live
+	 * list: the row there receives the title and isRunning updates the server
+	 * pushes, so the selection follows them without hand-syncing. The snapshot
+	 * only answers for a thread the list has not caught up with yet.
+	 */
+	readonly selectedThread: _angular_core.Signal<ThreadSummary | undefined>;
+	readonly chat: _angular_core.WritableSignal<_tanstack_ai_angular.InjectChatResult<readonly _tanstack_ai.AnyClientTool[], _tanstack_ai.SchemaInput | undefined> | undefined>;
+	readonly isLoadingMessages: _angular_core.WritableSignal<boolean>;
+	readonly hasPendingToolCalls: _angular_core.WritableSignal<boolean>;
+	readonly isAgentWorking: _angular_core.Signal<boolean>;
+	/**
+	 * The per-message facts the SDK's `UIMessage` has no room for — usage, model
+	 * id, the aborted flag, attachments. They are cortex's own envelope around the
+	 * stored parts, so they arrive with the persisted transcript rather than over
+	 * the stream, and are merged back in by message id at render time.
+	 */
+	readonly messageMetadata: _angular_core.WritableSignal<ReadonlyMap<string, MessageMetadata>>;
+	private readonly events;
+	private readonly selectedThreadSnapshot;
+	private readonly config;
+	private readonly api;
+	private readonly threadService;
+	private readonly wsService;
+	private readonly destroyRef;
+	private readonly environmentInjector;
+	/** Owns the current thread's chat client; destroying it stops and disposes it. */
+	private chatInjector;
+	private readonly dispatchedToolCalls;
+	/**
+	 * Whether this widget is driving the run it is showing or watching one another
+	 * tab started. A watcher owes nothing: the tool calls it sees belong to the tab
+	 * that sent the message, and how the turn ended is the server's to tell it.
+	 */
+	private ownsRun;
+	/**
+	 * Whether the server has answered the turn in flight. Until it does, a failure
+	 * means the message never got out and the composer takes back the files it was
+	 * carrying; after it, those files are on the message the server stored.
+	 */
+	private serverAnswered;
+	private wasAborted;
+	private pendingThreadCreation;
+	private refreshing;
+	constructor();
+	/**
+	 * Kicked off by the widget once its `config` input is bound. This cannot happen in
+	 * the constructor: the widget builds its children during its creation pass, which
+	 * Angular runs before it binds inputs, so the transport is not knowable yet.
+	 */
+	start(): void;
+	get events$(): Observable<"onFinish" | "onError" | "onThreadSelected" | "onSend">;
+	selectThread(thread: ThreadSummary, options?: {
+		skipLoadingMessages?: boolean;
+	}): Observable<ThreadSummary>;
+	deselectThread(): void;
+	/**
+	 * The id of the thread the next message belongs to, creating it when the widget is
+	 * still on a blank chat. `prompt` only seeds the generated title.
+	 */
+	ensureThread(prompt?: string): Observable<string>;
+	send(prompt: string, attachments?: AttachmentSummary[]): Observable<void>;
+	/** Answers a tool call on behalf of a consumer-supplied tool component. */
+	addToolResult(toolCallId: string, toolName: string, output: unknown): void;
+	fetchLlmRequests(messageId: string): Promise<LlmRequest[]>;
+	abort(): Promise<void>;
+	deleteThread(threadId: string): Observable<void>;
+	/**
+	 * Points the widget at a thread with a chat client of its own. The client is
+	 * server-authoritative: on mount it asks cortex for the transcript and for
+	 * whatever run is still generating, so selecting a thread, reloading the page
+	 * and a second tab all re-attach through one path.
+	 */
+	private mountChat;
+	/**
+	 * Re-mounts the current thread's chat so its hydration re-reads the transcript
+	 * and re-attaches to whatever run is live now. This is how a run another tab
+	 * started, and a websocket that dropped and came back, land in this widget.
+	 * A caller passes the thread when it holds fresher state than the list.
+	 */
+	private reattach;
+	private createConnection;
+	/**
+	 * A finished stream leaves the SDK holding only what came over the wire, while
+	 * usage, model id and attachments live in cortex's envelope — so a settled turn
+	 * is read back from the database. The one turn that is not read back is one
+	 * this widget is still in the middle of: a tool call it owes an answer to.
+	 */
+	private settleTurn;
+	private refreshMessages;
+	private readBackMessages;
+	private setMetadata;
+	/**
+	 * Hands the calls the run left open to the consumer's hook — cortex's tools all
+	 * run on the server, so anything still unanswered when the stream ends is one
+	 * the client was asked to resolve. Reports whether any are still waiting.
+	 */
+	private dispatchPendingToolCalls;
+	private resolveToolCall;
+	private syncPendingToolCalls;
+	private subscribeToWsEvents;
+	/**
+	 * Only what these events mean for the open conversation — their list-shaped
+	 * side is CortexThreadService's, which absorbs them on its own subscription.
+	 */
+	private onWsEvent;
+	private subscribeToWsConnections;
+	static ɵfac: _angular_core.ɵɵFactoryDeclaration<CortexChatService, never>;
+	static ɵprov: _angular_core.ɵɵInjectableDeclaration<CortexChatService>;
+}
+export declare class CortexChatWidgetComponent implements OnInit {
+	readonly config: _angular_core.InputSignal<CortexClientConfig>;
+	protected readonly debugMode: _angular_core.WritableSignal<boolean>;
+	protected readonly screen: _angular_core.WritableSignal<"threads" | "chat">;
+	protected readonly sidebarOpen: _angular_core.WritableSignal<boolean>;
+	protected readonly viewMode: _angular_core.Signal<CortexViewMode>;
+	private readonly composer;
+	protected chatService: CortexChatService;
+	protected queue: AttachmentQueueService;
+	private readonly injector;
+	private readonly translateService;
+	private readonly destroyRef;
+	ngOnInit(): void;
+	protected toggleSidebar(): void;
+	protected closeSidebar(): void;
+	protected toggleDebugMode(): void;
+	protected selectThread(thread: ThreadSummary): void;
+	protected goBack(): void;
+	protected onWidgetDragOver(event: DragEvent): void;
+	protected onWidgetDrop(event: DragEvent): void;
+	protected newChat(): void;
+	static ɵfac: _angular_core.ɵɵFactoryDeclaration<CortexChatWidgetComponent, never>;
+	static ɵcmp: _angular_core.ɵɵComponentDeclaration<CortexChatWidgetComponent, "cortex-chat-widget", never, {
+		"config": {
+			"alias": "config";
+			"required": true;
+			"isSignal": true;
+		};
+	}, {}, never, never, true, never>;
+}
+
+export {};