@extrachill/chat 0.3.1 → 0.5.1

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,5 +1,5 @@
 import { type ReactNode, lazy, Suspense } from 'react';
-import type { ChatMessage as ChatMessageType, ContentFormat } from '../types/index.ts';
+import type { ChatMessage as ChatMessageType, ContentFormat, MediaAttachment } from '../types/index.ts';
 import { markdownToHtml } from '../markdown.ts';
 
 const ReactMarkdown = lazy(() => import('react-markdown'));
@@ -22,6 +22,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 function ChatMessage({
 	message,
@@ -34,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
@@ -103,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`;
+}

package/src/hooks/useChat.ts

@@ -1,8 +1,9 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
-import type { ChatMessage } from '../types/message.ts';
+import type { ChatMessage, ToolCall } from '../types/message.ts';
 import type { ChatSession } from '../types/session.ts';
 import type { ChatAvailability } from '../types/session.ts';
-import type { FetchFn, ChatApiConfig } from '../api.ts';
+import type { MediaAttachment } from '../types/message.ts';
+import type { FetchFn, ChatApiConfig, SendAttachment } from '../api.ts';
 import {
 	sendMessage as apiSendMessage,
 	continueResponse as apiContinueResponse,
@@ -50,6 +51,23 @@ export interface UseChatOptions {
 	 * Called when an error occurs.
 	 */
 	onError?: (error: Error) => void;
+	/**
+	 * Called after each turn when tool calls are present in the response.
+	 * Use this to react to tool executions (e.g. invalidate caches,
+	 * apply diffs to the editor, update external state).
+	 */
+	onToolCalls?: (toolCalls: ToolCall[]) => void;
+	/**
+	 * Arbitrary metadata forwarded to the backend with each message.
+	 * Use for context scoping (e.g. `{ selected_pipeline_id: 42 }`,
+	 * `{ post_id: 100, context: 'editor' }`).
+	 */
+	metadata?: Record<string, unknown>;
+	/**
+	 * Optional context filter for session listing.
+	 * Only sessions created in the matching context are shown.
+	 */
+	sessionContext?: string;
 }
 
 /**
@@ -66,12 +84,19 @@ export interface UseChatReturn {
 	availability: ChatAvailability;
 	/** Active session ID. */
 	sessionId: string | null;
+	/**
+	 * The session ID that initiated the current request.
+	 * Use to avoid stale loading indicators when the user switches
+	 * sessions while a request is in flight.
+	 * Null when idle.
+	 */
+	processingSessionId: string | null;
 	/** List of sessions. */
 	sessions: ChatSession[];
 	/** Whether sessions are loading. */
 	sessionsLoading: boolean;
-	/** Send a user message. */
-	sendMessage: (content: string) => void;
+	/** Send a user message (with optional file attachments). */
+	sendMessage: (content: string, files?: File[]) => void;
 	/** Switch to a different session. */
 	switchSession: (sessionId: string) => void;
 	/** Create a new session. */
@@ -141,12 +166,16 @@ export function useChat({
 	maxContinueTurns = 20,
 	onMessage,
 	onError,
+	onToolCalls,
+	metadata,
+	sessionContext,
 }: UseChatOptions): UseChatReturn {
 	const [messages, setMessages] = useState<ChatMessage[]>(initialMessages ?? []);
 	const [isLoading, setIsLoading] = useState(false);
 	const [turnCount, setTurnCount] = useState(0);
 	const [availability, setAvailability] = useState<ChatAvailability>({ status: 'ready' });
 	const [sessionId, setSessionId] = useState<string | null>(initialSessionId ?? null);
+	const [processingSessionId, setProcessingSessionId] = useState<string | null>(null);
 	const [sessions, setSessions] = useState<ChatSession[]>([]);
 	const [sessionsLoading, setSessionsLoading] = useState(false);
 
@@ -157,12 +186,26 @@ export function useChat({
 	const sessionIdRef = useRef(sessionId);
 	sessionIdRef.current = sessionId;
 
+	// Refs for latest callback/metadata values (avoid stale closures).
+	const onToolCallsRef = useRef(onToolCalls);
+	onToolCallsRef.current = onToolCalls;
+	const metadataRef = useRef(metadata);
+	metadataRef.current = metadata;
+	const sessionContextRef = useRef(sessionContext);
+	sessionContextRef.current = sessionContext;
+	// Guard against concurrent session creation.
+	const isCreatingRef = useRef(false);
+
 	// Load sessions on mount
 	useEffect(() => {
 		const loadSessions = async () => {
 			setSessionsLoading(true);
 			try {
-				const list = await apiListSessions(configRef.current);
+				const list = await apiListSessions(
+					configRef.current,
+					20,
+					sessionContextRef.current,
+				);
 				setSessions(list);
 			} catch (err) {
 				// Sessions not available — degrade gracefully
@@ -176,8 +219,47 @@ export function useChat({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const sendMessage = useCallback(async (content: string) => {
-		if (isLoading) return;
+	/**
+	 * Collect tool calls from a list of messages and fire the onToolCalls callback.
+	 */
+	const fireToolCalls = useCallback((msgs: ChatMessage[]) => {
+		const cb = onToolCallsRef.current;
+		if (!cb) return;
+
+		const allToolCalls: ToolCall[] = [];
+		for (const msg of msgs) {
+			if (msg.toolCalls?.length) {
+				allToolCalls.push(...msg.toolCalls);
+			}
+		}
+		if (allToolCalls.length > 0) {
+			cb(allToolCalls);
+		}
+	}, []);
+
+	const sendMessage = useCallback(async (content: string, files?: File[]) => {
+		if (isLoading || isCreatingRef.current) return;
+
+		// Build optimistic attachment previews from local files.
+		let optimisticAttachments: MediaAttachment[] | undefined;
+		let sendAttachments: SendAttachment[] | undefined;
+
+		if (files?.length) {
+			optimisticAttachments = files.map((file) => ({
+				type: file.type.startsWith('image/') ? 'image' as const
+					: file.type.startsWith('video/') ? 'video' as const
+					: 'file' as const,
+				url: URL.createObjectURL(file),
+				filename: file.name,
+				mimeType: file.type,
+				size: file.size,
+			}));
+
+			sendAttachments = files.map((file) => ({
+				filename: file.name,
+				mime_type: file.type,
+			}));
+		}
 
 		// Optimistically add user message
 		const userMessage: ChatMessage = {
@@ -185,27 +267,45 @@ export function useChat({
 			role: 'user',
 			content,
 			timestamp: new Date().toISOString(),
+			attachments: optimisticAttachments,
 		};
 
+		// Guard against concurrent session creation.
+		if (!sessionIdRef.current) {
+			isCreatingRef.current = true;
+		}
+
 		setMessages((prev) => [...prev, userMessage]);
 		onMessage?.(userMessage);
 		setIsLoading(true);
 		setTurnCount(0);
 
+		// Track which session initiated the request.
+		const initiatingSessionId = sessionIdRef.current;
+		setProcessingSessionId(initiatingSessionId);
+
 		try {
 			const result = await apiSendMessage(
 				configRef.current,
 				content,
 				sessionIdRef.current ?? undefined,
+				sendAttachments,
+				metadataRef.current,
 			);
 
+			isCreatingRef.current = false;
+
 			// Update session ID (may be newly created)
 			setSessionId(result.sessionId);
 			sessionIdRef.current = result.sessionId;
+			setProcessingSessionId(result.sessionId);
 
 			// Replace all messages with the full normalized conversation
 			setMessages(result.messages);
 
+			// Fire tool call callback for the initial response.
+			fireToolCalls(result.messages);
+
 			// Handle multi-turn continuation
 			if (!result.completed && !result.maxTurnsReached) {
 				let completed = false;
@@ -225,16 +325,20 @@ export function useChat({
 						onMessage?.(msg);
 					}
 
+					// Fire tool call callback for each continuation turn.
+					fireToolCalls(continuation.messages);
+
 					completed = continuation.completed || continuation.maxTurnsReached;
 				}
 			}
 
 			// Refresh sessions list after a message
-			apiListSessions(configRef.current)
+			apiListSessions(configRef.current, 20, sessionContextRef.current)
 				.then(setSessions)
 				.catch(() => { /* ignore */ });
 
 		} catch (err) {
+			isCreatingRef.current = false;
 			const error = toError(err);
 			onError?.(error);
 
@@ -254,8 +358,9 @@ export function useChat({
 		} finally {
 			setIsLoading(false);
 			setTurnCount(0);
+			setProcessingSessionId(null);
 		}
-	}, [isLoading, maxContinueTurns, onMessage, onError]);
+	}, [isLoading, maxContinueTurns, onMessage, onError, fireToolCalls]);
 
 	const switchSession = useCallback(async (newSessionId: string) => {
 		setSessionId(newSessionId);
@@ -301,7 +406,11 @@ export function useChat({
 	const refreshSessions = useCallback(async () => {
 		setSessionsLoading(true);
 		try {
-			const list = await apiListSessions(configRef.current);
+			const list = await apiListSessions(
+				configRef.current,
+				20,
+				sessionContextRef.current,
+			);
 			setSessions(list);
 		} catch (err) {
 			onError?.(toError(err));
@@ -316,6 +425,7 @@ export function useChat({
 		turnCount,
 		availability,
 		sessionId,
+		processingSessionId,
 		sessions,
 		sessionsLoading,
 		sendMessage,

package/src/index.ts

@@ -3,18 +3,20 @@ export type {
 	MessageRole,
 	ToolCall,
 	ToolResultMeta,
+	MediaAttachment,
 	ChatMessage,
 	ContentFormat,
 	ChatSession,
 	ChatAvailability,
 	ChatInitialState,
+	RawAttachment,
 	RawMessage,
 	RawSession,
 	SessionMetadata,
 } from './types/index.ts';
 
 // API
-export type { FetchFn, FetchOptions, ChatApiConfig, SendResult, ContinueResult } from './api.ts';
+export type { FetchFn, FetchOptions, ChatApiConfig, SendResult, ContinueResult, SendAttachment } from './api.ts';
 export {
 	sendMessage,
 	continueResponse,