@extrachill/chat 0.3.0 → 0.5.0

package/src/api.ts

@@ -31,7 +31,12 @@ import { normalizeConversation, normalizeMessage, normalizeSession } from './nor
 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>;
@@ -60,22 +65,51 @@ export interface ContinueResult {
 	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 async function sendMessage(
 	config: ChatApiConfig,
 	content: string,
 	sessionId?: string,
+	attachments?: SendAttachment[],
+	metadata?: Record<string, unknown>,
 ): Promise<SendResult> {
 	const body: Record<string, unknown> = { 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 },
 	}) as SendResponse;
 
 	if (!raw.success) {
@@ -118,13 +152,18 @@ export async function continueResponse(
 
 /**
  * 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: ChatApiConfig,
 	limit = 20,
+	context?: string,
 ): Promise<ChatSession[]> {
 	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/src/components/ChatInput.tsx

@@ -1,34 +1,47 @@
-import { useState, useRef, useCallback, type KeyboardEvent, type FormEvent } from 'react';
+import { useState, useRef, useCallback, type KeyboardEvent, type FormEvent, type DragEvent, type ClipboardEvent } from 'react';
 
 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 function ChatInput({
 	onSend,
 	disabled = false,
 	placeholder = 'Type a message...',
 	maxRows = 6,
+	accept = 'image/*,video/*',
+	maxFiles = 5,
+	allowAttachments = true,
 	className,
 }: ChatInputProps) {
 	const [value, setValue] = useState('');
+	const [files, setFiles] = useState<File[]>([]);
+	const [isDragging, setIsDragging] = useState(false);
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const fileInputRef = useRef<HTMLInputElement>(null);
 	const cooldownRef = useRef(false);
 
 	const resize = useCallback(() => {
@@ -40,24 +53,35 @@ export function ChatInput({
 		el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
 	}, [maxRows]);
 
+	const addFiles = useCallback((newFiles: FileList | File[]) => {
+		const fileArray = Array.from(newFiles);
+		setFiles((prev) => {
+			const combined = [...prev, ...fileArray];
+			return combined.slice(0, maxFiles);
+		});
+	}, [maxFiles]);
+
+	const removeFile = useCallback((index: number) => {
+		setFiles((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+
 	const handleSubmit = useCallback((e?: FormEvent) => {
 		e?.preventDefault();
 		const trimmed = value.trim();
-		if (!trimmed || disabled || cooldownRef.current) return;
+		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('');
+		setFiles([]);
 
-		// Reset textarea height after clearing
 		requestAnimationFrame(() => {
 			const el = textareaRef.current;
 			if (el) el.style.height = 'auto';
 		});
-	}, [value, disabled, onSend]);
+	}, [value, files, disabled, onSend]);
 
 	const handleKeyDown = useCallback((e: KeyboardEvent<HTMLTextAreaElement>) => {
 		if (e.key === 'Enter' && !e.shiftKey) {
@@ -66,34 +90,137 @@ export function ChatInput({
 		}
 	}, [handleSubmit]);
 
+	const handleDragOver = useCallback((e: DragEvent) => {
+		e.preventDefault();
+		if (allowAttachments) setIsDragging(true);
+	}, [allowAttachments]);
+
+	const handleDragLeave = useCallback((e: DragEvent) => {
+		e.preventDefault();
+		setIsDragging(false);
+	}, []);
+
+	const handleDrop = useCallback((e: DragEvent) => {
+		e.preventDefault();
+		setIsDragging(false);
+		if (!allowAttachments || !e.dataTransfer.files.length) return;
+		addFiles(e.dataTransfer.files);
+	}, [allowAttachments, addFiles]);
+
+	const handlePaste = useCallback((e: ClipboardEvent) => {
+		if (!allowAttachments) return;
+		const pastedFiles = Array.from(e.clipboardData.items)
+			.filter((item) => item.kind === 'file')
+			.map((item) => item.getAsFile())
+			.filter((f): f is File => f !== null);
+
+		if (pastedFiles.length > 0) {
+			addFiles(pastedFiles);
+		}
+	}, [allowAttachments, addFiles]);
+
 	const baseClass = 'ec-chat-input';
-	const classes = [baseClass, className].filter(Boolean).join(' ');
+	const classes = [
+		baseClass,
+		isDragging ? `${baseClass}--dragging` : '',
+		className,
+	].filter(Boolean).join(' ');
+
+	return (
+		<form
+			className={classes}
+			onSubmit={handleSubmit}
+			onDragOver={handleDragOver}
+			onDragLeave={handleDragLeave}
+			onDrop={handleDrop}
+		>
+			{files.length > 0 && (
+				<div className={`${baseClass}__attachments`}>
+					{files.map((file, i) => (
+						<FilePreview key={`${file.name}-${i}`} file={file} onRemove={() => removeFile(i)} />
+					))}
+				</div>
+			)}
+			<div className={`${baseClass}__row`}>
+				{allowAttachments && (
+					<>
+						<input
+							ref={fileInputRef}
+							type="file"
+							accept={accept}
+							multiple
+							className={`${baseClass}__file-input`}
+							onChange={(e) => {
+								if (e.target.files) addFiles(e.target.files);
+								e.target.value = '';
+							}}
+							tabIndex={-1}
+							aria-hidden="true"
+						/>
+						<button
+							type="button"
+							className={`${baseClass}__attach`}
+							onClick={() => fileInputRef.current?.click()}
+							disabled={disabled}
+							aria-label="Attach file"
+							title="Attach file"
+						>
+							<AttachIcon />
+						</button>
+					</>
+				)}
+				<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}
+				/>
+				<button
+					className={`${baseClass}__send`}
+					type="submit"
+					disabled={disabled || (!value.trim() && files.length === 0)}
+					aria-label="Send message"
+				>
+					<SendIcon />
+				</button>
+			</div>
+		</form>
+	);
+}
+
+/* ---- File Preview ---- */
+
+function FilePreview({ file, onRemove }: { file: File; onRemove: () => void }) {
+	const isImage = file.type.startsWith('image/');
+	const preview = isImage ? URL.createObjectURL(file) : null;
 
 	return (
-		<form className={classes} onSubmit={handleSubmit}>
-			<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}
-			/>
+		<div className="ec-chat-input__preview">
+			{preview ? (
+				<img src={preview} alt={file.name} className="ec-chat-input__preview-image" />
+			) : (
+				<span className="ec-chat-input__preview-name">{file.name}</span>
+			)}
 			<button
-				className={`${baseClass}__send`}
-				type="submit"
-				disabled={disabled || !value.trim()}
-				aria-label="Send message"
+				type="button"
+				className="ec-chat-input__preview-remove"
+				onClick={onRemove}
+				aria-label={`Remove ${file.name}`}
 			>
-				<SendIcon />
+				&times;
 			</button>
-		</form>
+		</div>
 	);
 }
 
+/* ---- Icons ---- */
+
 function SendIcon() {
 	return (
 		<svg
@@ -112,3 +239,21 @@ function SendIcon() {
 		</svg>
 	);
 }
+
+function AttachIcon() {
+	return (
+		<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"
+		>
+			<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" />
+		</svg>
+	);
+}

package/src/components/ChatMessage.tsx

@@ -1,7 +1,9 @@
-import { type ReactNode, useMemo } from 'react';
-import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+import { type ReactNode, lazy, Suspense } from 'react';
+import type { ChatMessage as ChatMessageType, ContentFormat, MediaAttachment } from '../types/index.ts';
 import { markdownToHtml } from '../markdown.ts';
 
+const ReactMarkdown = lazy(() => import('react-markdown'));
+
 export interface ChatMessageProps {
 	/** The message to render. */
 	message: ChatMessageType;
@@ -9,7 +11,6 @@ export interface ChatMessageProps {
 	contentFormat?: ContentFormat;
 	/**
 	 * Custom content renderer. When provided, overrides contentFormat.
-	 * Use this to plug in your own markdown renderer (react-markdown, etc.).
 	 */
 	renderContent?: (content: string, role: ChatMessageType['role']) => ReactNode;
 	/** Additional CSS class name on the outer wrapper. */
@@ -20,7 +21,8 @@ export interface ChatMessageProps {
  * Renders a single chat message bubble.
  *
  * User messages align right, assistant messages align left.
- * Content rendering is pluggable via `renderContent` or `contentFormat`.
+ * Markdown content is rendered via react-markdown (lazy-loaded).
+ * Media attachments render inline below the text content.
  */
 export function ChatMessage({
 	message,
@@ -33,13 +35,20 @@ export function ChatMessage({
 	const roleClass = isUser ? `${baseClass}--user` : `${baseClass}--assistant`;
 	const classes = [baseClass, roleClass, className].filter(Boolean).join(' ');
 
+	const hasText = message.content.trim().length > 0;
+	const hasAttachments = message.attachments && message.attachments.length > 0;
+
 	return (
 		<div className={classes} data-message-id={message.id}>
 			<div className={`${baseClass}__bubble`}>
-				{renderContent
-					? renderContent(message.content, message.role)
-					: <DefaultContent content={message.content} format={contentFormat} />
-				}
+				{hasText && (
+					renderContent
+						? renderContent(message.content, message.role)
+						: <DefaultContent content={message.content} format={contentFormat} />
+				)}
+				{hasAttachments && (
+					<MessageAttachments attachments={message.attachments!} />
+				)}
 			</div>
 			{message.timestamp && (
 				<time
@@ -59,15 +68,29 @@ interface DefaultContentProps {
 	format: ContentFormat;
 }
 
+/**
+ * Markdown rendered via lazy-loaded react-markdown.
+ * Falls back to the built-in lightweight parser while loading.
+ */
+function MarkdownContent({ content }: { content: string }) {
+	return (
+		<Suspense
+			fallback={
+				<div dangerouslySetInnerHTML={{ __html: markdownToHtml(content) }} />
+			}
+		>
+			<ReactMarkdown>{content}</ReactMarkdown>
+		</Suspense>
+	);
+}
+
 function DefaultContent({ content, format }: DefaultContentProps) {
-	const html = useMemo(() => {
-		if (format === 'html') return content;
-		if (format === 'markdown') return markdownToHtml(content);
-		return null;
-	}, [content, format]);
-
-	if (html !== null) {
-		return <div dangerouslySetInnerHTML={{ __html: html }} />;
+	if (format === 'html') {
+		return <div dangerouslySetInnerHTML={{ __html: content }} />;
+	}
+
+	if (format === 'markdown') {
+		return <MarkdownContent content={content} />;
 	}
 
 	// Plain text — split on double newlines for paragraphs.
@@ -88,3 +111,92 @@ function formatTime(iso: string): string {
 		return '';
 	}
 }
+
+/* ---- Media Attachments ---- */
+
+function MessageAttachments({ attachments }: { attachments: MediaAttachment[] }) {
+	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 (
+		<div className="ec-chat-message__attachments">
+			{images.length > 0 && (
+				<div className="ec-chat-message__images">
+					{images.map((img, i) => (
+						<a
+							key={i}
+							href={img.url}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="ec-chat-message__image-link"
+						>
+							<img
+								src={img.thumbnailUrl ?? img.url}
+								alt={img.alt ?? img.filename ?? 'Image attachment'}
+								className="ec-chat-message__image"
+								loading="lazy"
+							/>
+						</a>
+					))}
+				</div>
+			)}
+			{videos.map((vid, i) => (
+				<video
+					key={i}
+					src={vid.url}
+					controls
+					className="ec-chat-message__video"
+					preload="metadata"
+				>
+					<track kind="captions" />
+				</video>
+			))}
+			{files.map((file, i) => (
+				<a
+					key={i}
+					href={file.url}
+					download={file.filename}
+					className="ec-chat-message__file"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<FileIcon />
+					<span className="ec-chat-message__file-name">
+						{file.filename ?? 'Download file'}
+					</span>
+					{file.size != null && (
+						<span className="ec-chat-message__file-size">
+							{formatFileSize(file.size)}
+						</span>
+					)}
+				</a>
+			))}
+		</div>
+	);
+}
+
+function FileIcon() {
+	return (
+		<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"
+		>
+			<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+			<polyline points="14 2 14 8 20 8" />
+		</svg>
+	);
+}
+
+function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}