Sidebar chat foundation

export type Message = {
	id: string;
	role: 'user' | 'assistant';
	text: string;
	status: 'complete' | 'streaming' | 'stopped' | 'error';
};
export type Conversation = { id: string; title: string; draft: string; messages: Message[] };
export type ChatState = {
	conversations: Conversation[];
	activeId: string;
	busyId: string | null;
	error: string | null;
	storageError: string | null;
};
export type Transport = (
	messages: ReadonlyArray<Pick<Message, 'role' | 'text'>>,
	signal: AbortSignal
) => AsyncIterable<string>;
export type StorageAdapter = Pick<Storage, 'getItem' | 'setItem'>;
const key = 'anchor.sidebar-chat.v1';

export function createChat(transport: Transport, storage?: StorageAdapter) {
	const fresh = (): Conversation => ({
		id: crypto.randomUUID(),
		title: 'New conversation',
		draft: '',
		messages: []
	});
	let first = fresh();
	const state: ChatState = {
		conversations: [first],
		activeId: first.id,
		busyId: null,
		error: null,
		storageError: null
	};
	let controller: AbortController | null = null;
	const listeners = new Set<(state: ChatState) => void>();
	try {
		const raw = storage?.getItem(key);
		if (raw) {
			const saved = JSON.parse(raw);
			const ids = new Set<string>();
			if (
				saved.version !== 1 ||
				!Array.isArray(saved.conversations) ||
				!saved.conversations.length ||
				saved.conversations.length > 100
			)
				throw new Error('Invalid history');
			for (const c of saved.conversations) {
				if (
					typeof c.id !== 'string' ||
					ids.has(c.id) ||
					typeof c.title !== 'string' ||
					typeof c.draft !== 'string' ||
					!Array.isArray(c.messages)
				)
					throw new Error('Invalid conversation');
				ids.add(c.id);
				for (const m of c.messages) {
					if (
						typeof m.id !== 'string' ||
						!['user', 'assistant'].includes(m.role) ||
						typeof m.text !== 'string' ||
						!['complete', 'streaming', 'stopped', 'error'].includes(m.status)
					)
						throw new Error('Invalid message');
					if (m.status === 'streaming') m.status = 'stopped';
				}
			}
			state.conversations = saved.conversations;
			state.activeId = ids.has(saved.activeId) ? saved.activeId : saved.conversations[0].id;
		}
	} catch {
		state.storageError = 'Saved history could not be read. Starting a new conversation.';
	}
	const snapshot = () => structuredClone(state);
	function publish() {
		try {
			storage?.setItem(
				key,
				JSON.stringify({ version: 1, conversations: state.conversations, activeId: state.activeId })
			);
		} catch {
			state.storageError = 'History could not be saved on this device. This session still works.';
		}
		for (const listener of listeners) listener(snapshot());
	}
	function stop() {
		if (!controller) return;
		controller.abort();
		controller = null;
		for (const c of state.conversations)
			for (const m of c.messages) if (m.status === 'streaming') m.status = 'stopped';
		state.busyId = null;
		publish();
	}
	return {
		snapshot,
		subscribe(listener: (state: ChatState) => void) {
			listeners.add(listener);
			listener(snapshot());
			return () => {
				listeners.delete(listener);
			};
		},
		select(id: string) {
			if (state.conversations.some((c) => c.id === id)) {
				state.activeId = id;
				state.error = null;
				publish();
			}
		},
		newConversation() {
			if (state.conversations.length >= 100) {
				state.error = 'Delete a conversation before adding another.';
				publish();
				return;
			}
			first = fresh();
			state.conversations.unshift(first);
			state.activeId = first.id;
			state.error = null;
			publish();
		},
		setDraft(text: string) {
			state.conversations.find((c) => c.id === state.activeId)!.draft = text;
			publish();
		},
		remove(id: string) {
			if (state.busyId === id) stop();
			state.conversations = state.conversations.filter((c) => c.id !== id);
			if (!state.conversations.length) state.conversations.push(fresh());
			if (!state.conversations.some((c) => c.id === state.activeId))
				state.activeId = state.conversations[0].id;
			publish();
		},
		stop,
		async send() {
			const conversation = state.conversations.find((c) => c.id === state.activeId)!;
			const text = conversation.draft.trim();
			if (!text || state.busyId) return;
			const request = new AbortController();
			controller = request;
			if (!conversation.messages.length) conversation.title = text.slice(0, 48);
			conversation.draft = '';
			conversation.messages.push({
				id: crypto.randomUUID(),
				role: 'user',
				text,
				status: 'complete'
			});
			const history = conversation.messages
				.filter((m) => m.status === 'complete')
				.map(({ role, text }) => ({ role, text }));
			const reply: Message = {
				id: crypto.randomUUID(),
				role: 'assistant',
				text: '',
				status: 'streaming'
			};
			conversation.messages.push(reply);
			state.busyId = conversation.id;
			state.error = null;
			publish();
			try {
				for await (const chunk of transport(history, request.signal)) {
					if (request.signal.aborted) break;
					reply.text += chunk;
					publish();
				}
				if (!request.signal.aborted) reply.status = 'complete';
			} catch {
				if (!request.signal.aborted) {
					reply.status = 'error';
					state.error = 'Response failed. Your messages are kept; try sending again.';
				}
			} finally {
				if (controller === request) {
					controller = null;
					state.busyId = null;
					publish();
				}
			}
		},
		dispose() {
			stop();
			listeners.clear();
		}
	};
}

// Demonstration only: replace this adapter with a server-backed stream.
export const demoTransport: Transport = async function* (messages, signal) {
	const prompt = messages.at(-1)?.text ?? '';
	const response = `This is a simulated streaming reply to “${prompt}”. The conversation list, drafts, history, and Stop button are working locally. Connect your own server transport to generate real responses.`;
	for (const word of response.split(' ')) {
		if (signal.aborted) return;
		await new Promise((resolve) => setTimeout(resolve, 35));
		if (signal.aborted) return;
		yield word + ' ';
	}
};