@m6d/cortex-react 0.6.1 → 0.8.0

package/README.md

@@ -24,6 +24,30 @@ export function Chat() {
 
 `CortexReactConfig` is the shared `CortexConfig` plus a React-only `toolComponents` slot (`Record<string, ComponentType<CortexToolComponentInputs>>`). Every other property, the client tools flow, and the media blocks are documented in [`packages/cortex-angular/README.md`](../cortex-angular/README.md); only the `toolComponents` and `injector` rows are Angular-specific.
 
+## Custom header
+
+`renderHeader` replaces the header on both screens, the chat and the history,
+and receives the same context the Angular `cortexHeader` template does (fields
+listed in the Angular README):
+
+```tsx
+<CortexChatWidget
+  config={config}
+  renderHeader={(chat) => (
+    <div className="cortex-widget__chat-header">
+      <div className="cortex-widget__chat-title-wrap">
+        <p className="cortex-widget__chat-title">{chat.title ?? chat.agentName}</p>
+      </div>
+      <button className="cortex-widget__header-btn" onClick={chat.newChat}>
+        +
+      </button>
+    </div>
+  )}
+/>
+```
+
+The theming tokens and the table actions are the same as Angular's.
+
 ## Requirements
 
 - React 18 or later

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 // Generated by dts-bundle-generator v9.5.1
 
 import { ToolCallPart, UIMessage } from '@tanstack/ai';
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 declare const LOCALES: readonly [
 	"en",
@@ -45,6 +45,31 @@ export type MediaRenderers = Partial<Record<string, MediaRenderer>>;
 export type Localized<T> = T | Partial<Record<Locale, T>>;
 export type CortexViewMode = "helper" | "full";
 export type CortexTheme = "light" | "dark" | "system";
+/**
+ * What a host's own header receives in place of 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;
+	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;
+};
 export type CortexToolCallContext = {
 	threadId: string;
 };
@@ -112,11 +137,17 @@ export type CortexConfig = {
 export type CortexReactConfig = CortexConfig & {
 	toolComponents?: Record<string, ComponentType<CortexToolComponentInputs>>;
 };
+export type HeaderRenderer = (chat: CortexHeaderContext) => ReactNode;
 /** The chat widget: the thread list, the open conversation and its composer, for the agent `config` points at. */
-export declare function CortexChatWidget({ config, className, }: {
+export declare function CortexChatWidget({ config, className, renderHeader, }: {
 	config: CortexReactConfig;
 	/** Sizing classes for the host. */
 	className?: string;
+	/**
+	 * The host's own header. When given it replaces the default on both the
+	 * chat and the history screen, and receives the widget's state and actions.
+	 */
+	renderHeader?: HeaderRenderer;
 }): import("react").JSX.Element;
 
 export {};