@m6d/cortex-angular 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m6d/cortex-angular",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Reusable AI agent chat UI library for Angular",
   "license": "MIT",
   "sideEffects": false,

package/theme.css

@@ -63,6 +63,15 @@
   );
   --cortex-font-size: 0.8125rem;
 
+  /* These read --cortex-font-size (or the color named) when unset, so they ship
+   * unset: declaring one here gives that part its own value.
+   *
+   * --cortex-font-size-message: 0.875rem;      message bubbles and the composer
+   * --cortex-font-size-header: 0.875rem;       the chat and history titles
+   * --cortex-color-send-empty: transparent;    the send button with nothing to send
+   * --cortex-color-send-empty-text: var(--cortex-color-text-muted);
+   */
+
   /* 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:
    *

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

@@ -1,7 +1,7 @@
 // Generated by dts-bundle-generator v9.5.1
 
 import * as i0 from '@angular/core';
-import { Injector, OnInit, Signal, Type } from '@angular/core';
+import { Injector, OnInit, Signal, TemplateRef, Type } from '@angular/core';
 import { ToolCallPart, UIMessage } from '@tanstack/ai';
 import { Observable } from 'rxjs';
 
@@ -84,7 +84,9 @@ export type MediaRenderContext = {
  * Draws a closed media fence's `source` into `host`, resolves once drawn, and
  * returns the teardown. A consumer's `mediaRenderers` config entry has this
  * shape too: one per fence language, replacing the built-in of the same name
- * or adding a language of its own.
+ * or adding a language of its own. The same source can be drawn twice at once,
+ * inline and in its expanded view, so a renderer keeps no state that two
+ * drawings would share.
  */
 export type MediaRenderer = (host: HTMLElement, source: string, context: MediaRenderContext) => Promise<() => void>;
 export type MediaRenderers = Partial<Record<string, MediaRenderer>>;
@@ -115,7 +117,7 @@ export type CortexToolComponentInputs = {
 };
 /**
  * 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
+ * with its own `toolComponents` field, which is the one field whose type is
  * inherently framework-bound.
  */
 export type CortexConfig = {
@@ -156,6 +158,71 @@ export type CortexConfig = {
 	trustSameOriginEmbeds?: boolean;
 	hooks?: CortexHooks;
 };
+/**
+ * What the header receives, the host's own or the widget's: where the widget
+ * is, what to show, and the actions the default header offers. One header
+ * serves both screens; `screen` says which is showing.
+ */
+export type CortexHeaderContext = {
+	screen: "chat" | "threads";
+	viewMode: CortexViewMode;
+	/** The open thread's title; null on a new chat. */
+	title: string | null;
+	/** `agentName` in the widget's locale. */
+	agentName: string | undefined;
+	/** How many conversations the history lists; 0 while it loads. */
+	threadCount: number;
+	isWorking: boolean;
+	/** Whether the host enabled the debug switch, and whether it is on. */
+	debug: {
+		shown: boolean;
+		on: boolean;
+	};
+	newChat: () => void;
+	/** Shows the history: the history screen, or in full mode the sidebar where it is hidden. */
+	openHistory: () => void;
+	/** Returns to the open chat from wherever `openHistory` went. */
+	closeHistory: () => void;
+	toggleDebug: () => void;
+};
+/**
+ * What the blank-chat landing receives, the host's own or the widget's. The
+ * composer arrives ready to place as the SDK's own view type (`View`), so a
+ * custom landing keeps the widget's attachments and send rules. Each SDK
+ * exports it as `CortexLandingContext` with its view type filled in.
+ */
+export type LandingContext<View> = {
+	/** The agent's greeting in the widget's locale, or the built-in one. */
+	greeting: string;
+	/** Empty until the handshake answers, and for an agent that takes no messages. */
+	suggestions: Suggestion[];
+	/** Newest first; undefined while the first load is out. */
+	threads: ThreadSummary[] | undefined;
+	/** The composer, or the notice an agent that takes no messages shows instead; empty until the handshake answers. */
+	composer: View;
+	/**
+	 * Sends a first message, which opens a thread and swaps the landing for it.
+	 * Does nothing until the handshake answers, or for an agent that takes no messages.
+	 */
+	send: (prompt: string) => void;
+	openThread: (thread: ThreadSummary) => void;
+};
+/** What the history's list receives, the host's own or the widget's. Its header is the header slot. */
+export type CortexThreadListContext = {
+	/** Newest first; undefined while the first load is out. */
+	threads: ThreadSummary[] | undefined;
+	/** The open thread's id; undefined on a new chat. */
+	selectedThreadId: string | undefined;
+	openThread: (thread: ThreadSummary) => void;
+	deleteThread: (threadId: string) => void;
+	newChat: () => void;
+};
+/** Each part of the widget a host can draw itself, with the context it receives. */
+export type CortexSlotContexts<View> = {
+	header: CortexHeaderContext;
+	landing: LandingContext<View>;
+	threadList: CortexThreadListContext;
+};
 export type QueuedAttachment = {
 	localId: string;
 	filename: string;
@@ -189,6 +256,10 @@ export type CortexAngularConfig = CortexConfig & {
 	toolComponents?: Record<string, Type<CortexToolComponentInputs>>;
 	injector?: Injector;
 };
+/** The landing's context, its composer a template to place with `ngTemplateOutlet`. */
+export type CortexLandingContext = LandingContext<TemplateRef<unknown>>;
+/** Each part of the widget a host can draw itself, with the context it receives. */
+export type CortexAngularSlotContexts = CortexSlotContexts<TemplateRef<unknown>>;
 declare class AttachmentQueueService {
 	readonly items: import("@angular/core").WritableSignal<QueuedAttachment[]>;
 	private readonly flags;
@@ -319,24 +390,78 @@ declare class CortexChatService {
 export declare class CortexChatWidgetComponent implements OnInit {
 	readonly config: import("@angular/core").InputSignal<CortexAngularConfig>;
 	protected readonly debugMode: import("@angular/core").WritableSignal<boolean>;
-	protected readonly screen: import("@angular/core").WritableSignal<"threads" | "chat">;
+	protected readonly screen: import("@angular/core").WritableSignal<"chat" | "threads">;
 	protected readonly sidebarOpen: import("@angular/core").WritableSignal<boolean>;
 	protected readonly viewMode: import("@angular/core").Signal<CortexViewMode>;
 	private readonly composer;
+	private readonly landingComposer;
+	/** The host's own parts by slot; each replaces the widget's default and gets the same context. */
+	private readonly slotDirectives;
+	protected readonly slots: import("@angular/core").Signal<Map<keyof CortexAngularSlotContexts, TemplateRef<{
+		$implicit: CortexHeaderContext | CortexThreadListContext | LandingContext<TemplateRef<unknown>>;
+	}>>>;
+	protected readonly chatHeader: import("@angular/core").Signal<{
+		screen: "chat" | "threads";
+		viewMode: CortexViewMode;
+		title: string | null;
+		agentName: string | undefined;
+		threadCount: number;
+		isWorking: boolean;
+		debug: {
+			shown: boolean;
+			on: boolean;
+		};
+		newChat: () => void;
+		openHistory: () => void;
+		closeHistory: () => void;
+		toggleDebug: () => void;
+	}>;
+	protected readonly threadsHeader: import("@angular/core").Signal<{
+		screen: "chat" | "threads";
+		viewMode: CortexViewMode;
+		title: string | null;
+		agentName: string | undefined;
+		threadCount: number;
+		isWorking: boolean;
+		debug: {
+			shown: boolean;
+			on: boolean;
+		};
+		newChat: () => void;
+		openHistory: () => void;
+		closeHistory: () => void;
+		toggleDebug: () => void;
+	}>;
+	protected readonly landing: import("@angular/core").Signal<{
+		threads: ThreadSummary[] | undefined;
+		composer: TemplateRef<unknown>;
+		openThread: (thread: ThreadSummary) => void;
+		greeting: string;
+		suggestions: Suggestion[];
+		send: (prompt: string) => void;
+	}>;
+	protected readonly threadList: import("@angular/core").Signal<{
+		threads: ThreadSummary[] | undefined;
+		selectedThreadId: string | undefined;
+		openThread: (thread: ThreadSummary) => void;
+		deleteThread: (threadId: string) => import("rxjs").Subscription;
+		newChat: () => void;
+	}>;
 	protected chatService: CortexChatService;
 	protected queue: AttachmentQueueService;
+	private threadService;
 	private readonly injector;
 	private readonly destroyRef;
 	ngOnInit(): void;
-	protected toggleSidebar(): void;
+	private headerContext;
 	protected closeSidebar(): void;
-	protected toggleDebugMode(): void;
-	protected selectThread(thread: ThreadSummary): void;
-	protected openHistory(): void;
-	protected closeHistory(): void;
+	private toggleDebugMode;
+	private selectThread;
+	private openHistory;
+	private closeHistory;
 	protected onWidgetDragOver(event: DragEvent): void;
 	protected onWidgetDrop(event: DragEvent): void;
-	protected newChat(): void;
+	private newChat;
 	static ɵfac: i0.ɵɵFactoryDeclaration<CortexChatWidgetComponent, never>;
 	static ɵcmp: i0.ɵɵComponentDeclaration<CortexChatWidgetComponent, "cortex-chat-widget", never, {
 		"config": {
@@ -344,6 +469,42 @@ export declare class CortexChatWidgetComponent implements OnInit {
 			"required": true;
 			"isSignal": true;
 		};
+	}, {}, [
+		"slotDirectives"
+	], never, true, never>;
+}
+export type SlotName = keyof CortexAngularSlotContexts;
+export type SlotTemplateContext<Slot extends SlotName> = {
+	$implicit: CortexAngularSlotContexts[Slot];
+};
+/**
+ * Marks the host's own part of `<cortex-chat-widget>`, named by `cortexSlot`:
+ * `header`, `landing` or `threadList`. It replaces the widget's default and
+ * receives the context the default is drawn from; `header` serves both the
+ * chat and the history screen.
+ *
+ *   <cortex-chat-widget [config]="config">
+ *     <ng-template cortexSlot="header" let-chat>
+ *       <div class="cortex-widget__chat-header">{{ chat.title ?? chat.agentName }}</div>
+ *     </ng-template>
+ *   </cortex-chat-widget>
+ */
+export declare class CortexSlotDirective<Slot extends SlotName> {
+	readonly slot: import("@angular/core").InputSignal<Slot>;
+	private readonly template;
+	/** The slot this template fills, paired with the template, for the widget's lookup by slot name. */
+	entry(): readonly [
+		Slot,
+		TemplateRef<SlotTemplateContext<Slot>>
+	];
+	static ngTemplateContextGuard<Slot extends SlotName>(_directive: CortexSlotDirective<Slot>, _context: unknown): _context is SlotTemplateContext<Slot>;
+	static ɵfac: i0.ɵɵFactoryDeclaration<CortexSlotDirective<any>, never>;
+	static ɵdir: i0.ɵɵDirectiveDeclaration<CortexSlotDirective<any>, "ng-template[cortexSlot]", never, {
+		"slot": {
+			"alias": "cortexSlot";
+			"required": true;
+			"isSignal": true;
+		};
 	}, {}, never, never, true, never>;
 }