@extrachill/chat 0.3.1 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [0.5.1] - 2026-03-24
+
+### Changed
+- add metadata prop to Chat component for client context injection
+
+## [0.5.0] - 2026-03-24
+
+### Added
+- v0.4.0 — metadata, onToolCalls, processingSessionId, request dedup
+- media support — attachments in messages, image/video rendering, file input
+- swap to react-markdown for proper rich content rendering
+- built-in markdown rendering for chat messages
+- remove adapter pattern, speak chat REST API natively
+- implement adapter contract, message model, and component library
+
+### Changed
+- Initial commit
+
+### Fixed
+- scroll within chat container instead of hijacking page scroll
+- extract readable error message from @wordpress/api-fetch error objects
+- use npm run build in prepublishOnly (pnpm not available on server)
+
+## 0.4.0
+
+### Added
+- `onToolCalls` callback on `useChat` — fires after each turn when tool calls are present, enabling consumers to react to tool executions (apply diffs, invalidate caches, update external state)
+- `metadata` option on `useChat` — arbitrary key-value pairs forwarded to the backend with each message for context scoping (e.g. `{ post_id, context: 'editor' }` or `{ selected_pipeline_id }`)
+- `sessionContext` option on `useChat` — filters session listing to only show sessions created in a specific context
+- `processingSessionId` in `UseChatReturn` — tracks which session initiated the current request, preventing stale loading indicators when switching sessions mid-request
+- `context` parameter on `listSessions` API function — optional context filter for session listing
+- `metadata` parameter on `sendMessage` API function — forwarded to backend alongside the message
+- `X-Request-ID` header on send requests — automatic request deduplication via `crypto.randomUUID()` with fallback
+- `headers` field on `FetchOptions` — allows passing custom HTTP headers through the fetch function
+- Session creation guard — prevents concurrent session creation with `isCreatingRef`
+
 ## 0.2.0
 
 - **BREAKING:** Remove `ChatAdapter` interface and adapter pattern

package/css/chat.css

@@ -249,12 +249,17 @@
    ============================================ */
 
 .ec-chat-input {
+	display: flex;
+	flex-direction: column;
+	border-top: 1px solid var(--ec-chat-border);
+	background: var(--ec-chat-input-bg);
+}
+
+.ec-chat-input__row {
 	display: flex;
 	align-items: flex-end;
 	gap: 8px;
 	padding: var(--ec-chat-padding);
-	border-top: 1px solid var(--ec-chat-border);
-	background: var(--ec-chat-input-bg);
 }
 
 .ec-chat-input__textarea {
@@ -633,3 +638,185 @@
 	background: var(--ec-chat-error-bg);
 	color: var(--ec-chat-error-text);
 }
+
+/* ============================================
+   Message Attachments
+   ============================================ */
+
+.ec-chat-message__attachments {
+	margin-top: 8px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.ec-chat-message__images {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.ec-chat-message__image-link {
+	display: block;
+	border-radius: 8px;
+	overflow: hidden;
+	line-height: 0;
+}
+
+.ec-chat-message__image {
+	max-width: 280px;
+	max-height: 280px;
+	border-radius: 8px;
+	object-fit: cover;
+	cursor: pointer;
+	transition: opacity 0.15s;
+}
+
+.ec-chat-message__image:hover {
+	opacity: 0.9;
+}
+
+.ec-chat-message__video {
+	max-width: 100%;
+	border-radius: 8px;
+}
+
+.ec-chat-message__file {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 8px 12px;
+	border: 1px solid var(--ec-chat-border);
+	border-radius: 8px;
+	text-decoration: none;
+	color: var(--ec-chat-text);
+	font-size: 13px;
+	transition: background 0.15s;
+}
+
+.ec-chat-message__file:hover {
+	background: var(--ec-chat-assistant-bg);
+}
+
+.ec-chat-message__file-icon {
+	flex-shrink: 0;
+	color: var(--ec-chat-text-muted);
+}
+
+.ec-chat-message__file-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 200px;
+}
+
+.ec-chat-message__file-size {
+	color: var(--ec-chat-text-muted);
+	white-space: nowrap;
+}
+
+/* ============================================
+   Input Attachments & Drag-Drop
+   ============================================ */
+
+.ec-chat-input--dragging {
+	outline: 2px dashed var(--ec-chat-input-focus-border);
+	outline-offset: -2px;
+	border-radius: var(--ec-chat-border-radius);
+}
+
+.ec-chat-input__attachments {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	padding: 8px var(--ec-chat-padding) 0;
+}
+
+.ec-chat-input__row {
+	display: flex;
+	align-items: flex-end;
+	gap: 4px;
+	padding: 0 var(--ec-chat-padding) var(--ec-chat-padding);
+}
+
+.ec-chat-input__file-input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
+
+.ec-chat-input__attach {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	flex-shrink: 0;
+	border: none;
+	background: none;
+	color: var(--ec-chat-text-muted);
+	cursor: pointer;
+	border-radius: 8px;
+	transition: color 0.15s, background 0.15s;
+}
+
+.ec-chat-input__attach:hover {
+	color: var(--ec-chat-text);
+	background: var(--ec-chat-assistant-bg);
+}
+
+.ec-chat-input__attach:disabled {
+	opacity: var(--ec-chat-send-disabled-opacity);
+	cursor: not-allowed;
+}
+
+.ec-chat-input__attach-icon {
+	display: block;
+}
+
+.ec-chat-input__preview {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 4px 8px;
+	background: var(--ec-chat-assistant-bg);
+	border-radius: 6px;
+	font-size: 12px;
+	color: var(--ec-chat-text);
+}
+
+.ec-chat-input__preview-image {
+	width: 48px;
+	height: 48px;
+	border-radius: 4px;
+	object-fit: cover;
+}
+
+.ec-chat-input__preview-name {
+	max-width: 120px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ec-chat-input__preview-remove {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	border: none;
+	background: var(--ec-chat-text-muted);
+	color: #fff;
+	border-radius: 50%;
+	font-size: 12px;
+	line-height: 1;
+	cursor: pointer;
+	position: absolute;
+	top: -4px;
+	right: -4px;
+}

package/dist/Chat.d.ts

@@ -45,6 +45,15 @@ export interface ChatProps {
     showSessions?: boolean;
     /** Label shown during multi-turn processing. */
     processingLabel?: (turnCount: number) => string;
+    /** Whether to show the attachment button in the input. Defaults to true. */
+    allowAttachments?: boolean;
+    /** Accepted file types for attachments. Defaults to 'image/*,video/*'. */
+    acceptFileTypes?: string;
+    /**
+     * Arbitrary metadata forwarded to the backend with each message.
+     * Use for client-side context injection (e.g. `{ client_context: { tab: 'compose', postId: 123 } }`).
+     */
+    metadata?: Record<string, unknown>;
 }
 /**
  * Ready-to-use chat component.
@@ -69,5 +78,5 @@ export interface ChatProps {
  * }
  * ```
  */
-export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, processingLabel, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ basePath, fetchFn, agentId, contentFormat, renderContent, showTools, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions, processingLabel, allowAttachments, acceptFileTypes, metadata, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Chat.d.ts.map

package/dist/Chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../src/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAQlE,MAAM,WAAW,SAAS;IACzB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,SAAS,EACT,YAAmB,EACnB,eAAe,GACf,EAAE,SAAS,2CA2DX"}
+{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../src/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAW,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAQlE,MAAM,WAAW,SAAS;IACzB;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,eAAe,EAAE,CAAC;IACpC,0BAA0B;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EACpB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,SAAS,EACT,SAAS,EACT,YAAmB,EACnB,eAAe,EACf,gBAAuB,EACvB,eAAe,EACf,QAAQ,GACR,EAAE,SAAS,2CA8DX"}

package/dist/Chat.js

@@ -29,7 +29,7 @@ import { SessionSwitcher } from "./components/SessionSwitcher.js";
  * }
  * ```
  */
-export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', renderContent, showTools = true, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions = true, processingLabel, }) {
+export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', renderContent, showTools = true, toolNames, placeholder, emptyState, initialMessages, initialSessionId, maxContinueTurns, onError, onMessage, className, showSessions = true, processingLabel, allowAttachments = true, acceptFileTypes, metadata, }) {
     const chat = useChat({
         basePath,
         fetchFn,
@@ -39,6 +39,7 @@ export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', r
         maxContinueTurns,
         onError,
         onMessage,
+        metadata,
     });
     const baseClass = 'ec-chat';
     const classes = [baseClass, className].filter(Boolean).join(' ');
@@ -46,5 +47,5 @@ export function Chat({ basePath, fetchFn, agentId, contentFormat = 'markdown', r
                             ? (processingLabel
                                 ? processingLabel(chat.turnCount)
                                 : `Processing turn ${chat.turnCount}...`)
-                            : undefined }), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder })] }) }) }));
+                            : undefined }), _jsx(ChatInput, { onSend: chat.sendMessage, disabled: chat.isLoading, placeholder: placeholder, allowAttachments: allowAttachments, accept: acceptFileTypes })] }) }) }));
 }

package/dist/api.d.ts

@@ -21,7 +21,12 @@ import type { ChatSession } from './types/session.ts';
 export interface FetchOptions {
     path: string;
     method?: string;
+    /** JSON body (mutually exclusive with formData). */
     data?: Record<string, unknown>;
+    /** FormData body for file uploads (mutually exclusive with data). */
+    formData?: FormData;
+    /** Additional HTTP headers. */
+    headers?: Record<string, string>;
 }
 export type FetchFn = (options: FetchOptions) => Promise<unknown>;
 export interface ChatApiConfig {
@@ -45,18 +50,39 @@ export interface ContinueResult {
     turnNumber: number;
     maxTurnsReached: boolean;
 }
+/**
+ * Attachment metadata to send with a message.
+ */
+export interface SendAttachment {
+    url?: string;
+    media_id?: number;
+    mime_type?: string;
+    filename?: string;
+}
 /**
  * Send a user message (create or continue a session).
+ *
+ * When attachments are provided, they are included in the JSON body
+ * as structured metadata (not as file uploads — files should already
+ * be in the WordPress media library or accessible by URL).
+ *
+ * @param metadata - Arbitrary key-value pairs forwarded to the backend
+ *   alongside the message (e.g. `{ selected_pipeline_id: 42 }` or
+ *   `{ post_id: 100, context: 'editor' }`). The backend can use these
+ *   to scope the AI's behavior. Not persisted as message content.
  */
-export declare function sendMessage(config: ChatApiConfig, content: string, sessionId?: string): Promise<SendResult>;
+export declare function sendMessage(config: ChatApiConfig, content: string, sessionId?: string, attachments?: SendAttachment[], metadata?: Record<string, unknown>): Promise<SendResult>;
 /**
  * Continue a multi-turn response.
  */
 export declare function continueResponse(config: ChatApiConfig, sessionId: string): Promise<ContinueResult>;
 /**
  * List sessions for the current user.
+ *
+ * @param context - Optional context filter (e.g. 'chat', 'editor', 'pipeline').
+ *   Only sessions created in the matching context are returned.
  */
-export declare function listSessions(config: ChatApiConfig, limit?: number): Promise<ChatSession[]>;
+export declare function listSessions(config: ChatApiConfig, limit?: number, context?: string): Promise<ChatSession[]>;
 /**
  * Load a single session's conversation.
  */

package/dist/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAUtD;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAElE,MAAM,WAAW,aAAa;IAC7B,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAAC,UAAU,CAAC,CAsBrB;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CACrC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,cAAc,CAAC,CAiBzB;AAED;;GAEG;AACH,wBAAsB,YAAY,CACjC,MAAM,EAAE,aAAa,EACrB,KAAK,SAAK,GACR,OAAO,CAAC,WAAW,EAAE,CAAC,CAaxB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,WAAW,EAAE,CAAC,CAUxB;AAED;;GAEG;AACH,wBAAsB,aAAa,CAClC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC,CASf"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAUtD;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAElE,MAAM,WAAW,aAAa;IAC7B,sEAAsE;IACtE,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;GAWG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,OAAO,EAAE,MAAM,EACf,SAAS,CAAC,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE,cAAc,EAAE,EAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAChC,OAAO,CAAC,UAAU,CAAC,CA8BrB;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CACrC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,cAAc,CAAC,CAiBzB;AAED;;;;;GAKG;AACH,wBAAsB,YAAY,CACjC,MAAM,EAAE,aAAa,EACrB,KAAK,SAAK,EACV,OAAO,CAAC,EAAE,MAAM,GACd,OAAO,CAAC,WAAW,EAAE,CAAC,CAcxB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAChC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,WAAW,EAAE,CAAC,CAUxB;AAED;;GAEG;AACH,wBAAsB,aAAa,CAClC,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC,CASf"}

package/dist/api.js

@@ -10,17 +10,35 @@
 import { normalizeConversation, normalizeMessage, normalizeSession } from "./normalizer.js";
 /**
  * Send a user message (create or continue a session).
+ *
+ * When attachments are provided, they are included in the JSON body
+ * as structured metadata (not as file uploads — files should already
+ * be in the WordPress media library or accessible by URL).
+ *
+ * @param metadata - Arbitrary key-value pairs forwarded to the backend
+ *   alongside the message (e.g. `{ selected_pipeline_id: 42 }` or
+ *   `{ post_id: 100, context: 'editor' }`). The backend can use these
+ *   to scope the AI's behavior. Not persisted as message content.
  */
-export async function sendMessage(config, content, sessionId) {
+export async function sendMessage(config, content, sessionId, attachments, metadata) {
     const body = { message: content };
     if (sessionId)
         body.session_id = sessionId;
     if (config.agentId)
         body.agent_id = config.agentId;
+    if (attachments?.length)
+        body.attachments = attachments;
+    if (metadata)
+        Object.assign(body, metadata);
+    // Generate a unique request ID for idempotent request handling.
+    const requestId = typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : `req_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
     const raw = await config.fetchFn({
         path: config.basePath,
         method: 'POST',
         data: body,
+        headers: { 'X-Request-ID': requestId },
     });
     if (!raw.success) {
         throw new Error(raw.message ?? 'Failed to send message');
@@ -54,11 +72,16 @@ export async function continueResponse(config, sessionId) {
 }
 /**
  * List sessions for the current user.
+ *
+ * @param context - Optional context filter (e.g. 'chat', 'editor', 'pipeline').
+ *   Only sessions created in the matching context are returned.
  */
-export async function listSessions(config, limit = 20) {
+export async function listSessions(config, limit = 20, context) {
     const params = new URLSearchParams({ limit: String(limit) });
     if (config.agentId)
         params.set('agent_id', String(config.agentId));
+    if (context)
+        params.set('context', context);
     const raw = await config.fetchFn({
         path: `${config.basePath}/sessions?${params.toString()}`,
     });

package/dist/components/ChatInput.d.ts

@@ -1,21 +1,28 @@
 export interface ChatInputProps {
-    /** Called when the user submits a message. */
-    onSend: (content: string) => void;
+    /** Called when the user submits a message (with optional file attachments). */
+    onSend: (content: string, files?: File[]) => void;
     /** Whether input is disabled (e.g. while waiting for response). */
     disabled?: boolean;
     /** Placeholder text. Defaults to 'Type a message...'. */
     placeholder?: string;
     /** Maximum number of rows the textarea auto-grows to. Defaults to 6. */
     maxRows?: number;
+    /** Accepted file types for the file picker. Defaults to 'image/*,video/*'. */
+    accept?: string;
+    /** Maximum number of files per message. Defaults to 5. */
+    maxFiles?: number;
+    /** Whether to show the attachment button. Defaults to true. */
+    allowAttachments?: boolean;
     /** Additional CSS class name. */
     className?: string;
 }
 /**
- * Chat input with auto-growing textarea and keyboard shortcuts.
+ * Chat input with auto-growing textarea, keyboard shortcuts, and file attachments.
  *
  * - Enter sends the message
  * - Shift+Enter adds a newline
  * - Textarea auto-grows up to `maxRows`
+ * - File attachment via button, drag-and-drop, or clipboard paste
  */
-export declare function ChatInput({ onSend, disabled, placeholder, maxRows, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatInput({ onSend, disabled, placeholder, maxRows, accept, maxFiles, allowAttachments, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatInput.d.ts.map

package/dist/components/ChatInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC9B,8CAA8C;IAC9C,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAgB,EAChB,WAAiC,EACjC,OAAW,EACX,SAAS,GACT,EAAE,cAAc,2CAkEhB"}
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC9B,+EAA+E;IAC/E,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClD,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,QAAgB,EAChB,WAAiC,EACjC,OAAW,EACX,MAA0B,EAC1B,QAAY,EACZ,gBAAuB,EACvB,SAAS,GACT,EAAE,cAAc,2CA4JhB"}

package/dist/components/ChatInput.js

@@ -1,15 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from 'react';
 /**
- * Chat input with auto-growing textarea and keyboard shortcuts.
+ * Chat input with auto-growing textarea, keyboard shortcuts, and file attachments.
  *
  * - Enter sends the message
  * - Shift+Enter adds a newline
  * - Textarea auto-grows up to `maxRows`
+ * - File attachment via button, drag-and-drop, or clipboard paste
  */
-export function ChatInput({ onSend, disabled = false, placeholder = 'Type a message...', maxRows = 6, className, }) {
+export function ChatInput({ onSend, disabled = false, placeholder = 'Type a message...', maxRows = 6, accept = 'image/*,video/*', maxFiles = 5, allowAttachments = true, className, }) {
     const [value, setValue] = useState('');
+    const [files, setFiles] = useState([]);
+    const [isDragging, setIsDragging] = useState(false);
     const textareaRef = useRef(null);
+    const fileInputRef = useRef(null);
     const cooldownRef = useRef(false);
     const resize = useCallback(() => {
         const el = textareaRef.current;
@@ -20,33 +24,87 @@ export function ChatInput({ onSend, disabled = false, placeholder = 'Type a mess
         const maxHeight = lineHeight * maxRows;
         el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
     }, [maxRows]);
+    const addFiles = useCallback((newFiles) => {
+        const fileArray = Array.from(newFiles);
+        setFiles((prev) => {
+            const combined = [...prev, ...fileArray];
+            return combined.slice(0, maxFiles);
+        });
+    }, [maxFiles]);
+    const removeFile = useCallback((index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    }, []);
     const handleSubmit = useCallback((e) => {
         e?.preventDefault();
         const trimmed = value.trim();
-        if (!trimmed || disabled || cooldownRef.current)
+        if ((!trimmed && files.length === 0) || disabled || cooldownRef.current)
             return;
-        // Debounce to prevent double-submit
         cooldownRef.current = true;
         setTimeout(() => { cooldownRef.current = false; }, 300);
-        onSend(trimmed);
+        onSend(trimmed, files.length > 0 ? files : undefined);
         setValue('');
-        // Reset textarea height after clearing
+        setFiles([]);
         requestAnimationFrame(() => {
             const el = textareaRef.current;
             if (el)
                 el.style.height = 'auto';
         });
-    }, [value, disabled, onSend]);
+    }, [value, files, disabled, onSend]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             handleSubmit();
         }
     }, [handleSubmit]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        if (allowAttachments)
+            setIsDragging(true);
+    }, [allowAttachments]);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (!allowAttachments || !e.dataTransfer.files.length)
+            return;
+        addFiles(e.dataTransfer.files);
+    }, [allowAttachments, addFiles]);
+    const handlePaste = useCallback((e) => {
+        if (!allowAttachments)
+            return;
+        const pastedFiles = Array.from(e.clipboardData.items)
+            .filter((item) => item.kind === 'file')
+            .map((item) => item.getAsFile())
+            .filter((f) => f !== null);
+        if (pastedFiles.length > 0) {
+            addFiles(pastedFiles);
+        }
+    }, [allowAttachments, addFiles]);
     const baseClass = 'ec-chat-input';
-    const classes = [baseClass, className].filter(Boolean).join(' ');
-    return (_jsxs("form", { className: classes, onSubmit: handleSubmit, children: [_jsx("textarea", { ref: textareaRef, className: `${baseClass}__textarea`, value: value, onChange: (e) => { setValue(e.target.value); resize(); }, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": placeholder }), _jsx("button", { className: `${baseClass}__send`, type: "submit", disabled: disabled || !value.trim(), "aria-label": "Send message", children: _jsx(SendIcon, {}) })] }));
+    const classes = [
+        baseClass,
+        isDragging ? `${baseClass}--dragging` : '',
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsxs("form", { className: classes, onSubmit: handleSubmit, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [files.length > 0 && (_jsx("div", { className: `${baseClass}__attachments`, children: files.map((file, i) => (_jsx(FilePreview, { file: file, onRemove: () => removeFile(i) }, `${file.name}-${i}`))) })), _jsxs("div", { className: `${baseClass}__row`, children: [allowAttachments && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: true, className: `${baseClass}__file-input`, onChange: (e) => {
+                                    if (e.target.files)
+                                        addFiles(e.target.files);
+                                    e.target.value = '';
+                                }, tabIndex: -1, "aria-hidden": "true" }), _jsx("button", { type: "button", className: `${baseClass}__attach`, onClick: () => fileInputRef.current?.click(), disabled: disabled, "aria-label": "Attach file", title: "Attach file", children: _jsx(AttachIcon, {}) })] })), _jsx("textarea", { ref: textareaRef, className: `${baseClass}__textarea`, value: value, onChange: (e) => { setValue(e.target.value); resize(); }, onKeyDown: handleKeyDown, onPaste: handlePaste, placeholder: placeholder, disabled: disabled, rows: 1, "aria-label": placeholder }), _jsx("button", { className: `${baseClass}__send`, type: "submit", disabled: disabled || (!value.trim() && files.length === 0), "aria-label": "Send message", children: _jsx(SendIcon, {}) })] })] }));
+}
+/* ---- File Preview ---- */
+function FilePreview({ file, onRemove }) {
+    const isImage = file.type.startsWith('image/');
+    const preview = isImage ? URL.createObjectURL(file) : null;
+    return (_jsxs("div", { className: "ec-chat-input__preview", children: [preview ? (_jsx("img", { src: preview, alt: file.name, className: "ec-chat-input__preview-image" })) : (_jsx("span", { className: "ec-chat-input__preview-name", children: file.name })), _jsx("button", { type: "button", className: "ec-chat-input__preview-remove", onClick: onRemove, "aria-label": `Remove ${file.name}`, children: "\u00D7" })] }));
 }
+/* ---- Icons ---- */
 function SendIcon() {
     return (_jsxs("svg", { className: "ec-chat-input__send-icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }));
 }
+function AttachIcon() {
+    return (_jsx("svg", { className: "ec-chat-input__attach-icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) }));
+}

package/dist/components/ChatMessage.d.ts

@@ -17,6 +17,7 @@ export interface ChatMessageProps {
  *
  * User messages align right, assistant messages align left.
  * Markdown content is rendered via react-markdown (lazy-loaded).
+ * Media attachments render inline below the text content.
  */
 export declare function ChatMessage({ message, contentFormat, renderContent, className, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatMessage.d.ts.map

package/dist/components/ChatMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAKvF,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAyBlB"}
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AAKxG,MAAM,WAAW,gBAAgB;IAChC,6BAA6B;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IAC9E,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC3B,OAAO,EACP,aAA0B,EAC1B,aAAa,EACb,SAAS,GACT,EAAE,gBAAgB,2CAgClB"}

package/dist/components/ChatMessage.js

@@ -7,15 +7,18 @@ const ReactMarkdown = lazy(() => import('react-markdown'));
  *
  * User messages align right, assistant messages align left.
  * Markdown content is rendered via react-markdown (lazy-loaded).
+ * Media attachments render inline below the text content.
  */
 export function ChatMessage({ message, contentFormat = 'markdown', renderContent, className, }) {
     const isUser = message.role === 'user';
     const baseClass = 'ec-chat-message';
     const roleClass = isUser ? `${baseClass}--user` : `${baseClass}--assistant`;
     const classes = [baseClass, roleClass, className].filter(Boolean).join(' ');
-    return (_jsxs("div", { className: classes, "data-message-id": message.id, children: [_jsx("div", { className: `${baseClass}__bubble`, children: renderContent
-                    ? renderContent(message.content, message.role)
-                    : _jsx(DefaultContent, { content: message.content, format: contentFormat }) }), message.timestamp && (_jsx("time", { className: `${baseClass}__timestamp`, dateTime: message.timestamp, title: new Date(message.timestamp).toLocaleString(), children: formatTime(message.timestamp) }))] }));
+    const hasText = message.content.trim().length > 0;
+    const hasAttachments = message.attachments && message.attachments.length > 0;
+    return (_jsxs("div", { className: classes, "data-message-id": message.id, children: [_jsxs("div", { className: `${baseClass}__bubble`, children: [hasText && (renderContent
+                        ? renderContent(message.content, message.role)
+                        : _jsx(DefaultContent, { content: message.content, format: contentFormat })), hasAttachments && (_jsx(MessageAttachments, { attachments: message.attachments }))] }), message.timestamp && (_jsx("time", { className: `${baseClass}__timestamp`, dateTime: message.timestamp, title: new Date(message.timestamp).toLocaleString(), children: formatTime(message.timestamp) }))] }));
 }
 /**
  * Markdown rendered via lazy-loaded react-markdown.
@@ -43,3 +46,20 @@ function formatTime(iso) {
         return '';
     }
 }
+/* ---- Media Attachments ---- */
+function MessageAttachments({ attachments }) {
+    const images = attachments.filter((a) => a.type === 'image');
+    const videos = attachments.filter((a) => a.type === 'video');
+    const files = attachments.filter((a) => a.type === 'file');
+    return (_jsxs("div", { className: "ec-chat-message__attachments", children: [images.length > 0 && (_jsx("div", { className: "ec-chat-message__images", children: images.map((img, i) => (_jsx("a", { href: img.url, target: "_blank", rel: "noopener noreferrer", className: "ec-chat-message__image-link", children: _jsx("img", { src: img.thumbnailUrl ?? img.url, alt: img.alt ?? img.filename ?? 'Image attachment', className: "ec-chat-message__image", loading: "lazy" }) }, i))) })), videos.map((vid, i) => (_jsx("video", { src: vid.url, controls: true, className: "ec-chat-message__video", preload: "metadata", children: _jsx("track", { kind: "captions" }) }, i))), files.map((file, i) => (_jsxs("a", { href: file.url, download: file.filename, className: "ec-chat-message__file", target: "_blank", rel: "noopener noreferrer", children: [_jsx(FileIcon, {}), _jsx("span", { className: "ec-chat-message__file-name", children: file.filename ?? 'Download file' }), file.size != null && (_jsx("span", { className: "ec-chat-message__file-size", children: formatFileSize(file.size) }))] }, i)))] }));
+}
+function FileIcon() {
+    return (_jsxs("svg", { className: "ec-chat-message__file-icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" })] }));
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}