feat: sending messages

src/lib/blah/connection/chatServer.ts

@@ -52,13 +52,11 @@ export class BlahChatServerConnection {
 		});
 	}
 
-	private async apiCall<P, R>(path: `/${string}`, payload?: P): Promise<R> {
+	private async apiCall<P, R>(method: 'POST' | 'GET', path: `/${string}`, payload?: P): Promise<R> {
 		if (payload && !this.keypair) throw new Error('Must make authorized API call with a keypair');
 
 		let response: Response;
-		if (payload) {
-			response = await this.fetchWithSignedPayload(`${this.endpoint}${path}`, payload);
-		} else {
+		if (method === 'GET') {
 			if (this.keypair) {
 				response = await this.fetchWithAuthHeader(`${this.endpoint}${path}`);
 			} else {
@@ -66,9 +64,11 @@ export class BlahChatServerConnection {
 					headers: BlahChatServerConnection.commonHeaders
 				});
 			}
+		} else {
+			response = await this.fetchWithSignedPayload(`${this.endpoint}${path}`, payload, { method });
 		}
 
-		if (!response.ok) throw BlahError.fromResponse(response);
+		if (!response.ok) throw await BlahError.fromResponse(response);
 		return await response.json();
 	}
 
@@ -82,20 +82,20 @@ export class BlahChatServerConnection {
 			user: this.keypair.id
 		};
 
-		await this.apiCall(`/room/${id}/join`, payload);
+		await this.apiCall('POST', `/room/${id}/admin`, payload);
 	}
 
 	async sendMessage(room: string, message: BlahRichText): Promise<void> {
 		if (!this.keypair) throw new Error('Must send message with a keypair');
 		const payload: BlahMessage = { room, rich_text: message, typ: 'chat' };
-		await this.fetchWithSignedPayload(`/room/${room}/item`, payload);
+		await this.apiCall('POST', `/room/${room}/item`, payload);
 	}
 
 	async fetchRoom(
 		roomId: string
 	): Promise<{ room: BlahRoomInfo; messages: BlahSignedPayload<BlahMessage>[] }> {
 		const [room, messages]: [BlahRoomInfo, [number, BlahSignedPayload<BlahMessage>][]] =
-			await this.apiCall(`/room/${roomId}/item`);
+			await this.apiCall('GET', `/room/${roomId}/item`);
 		return { room, messages: messages.toSorted(([a], [b]) => a - b).map(([, message]) => message) };
 	}
 

src/lib/blah/connection/error.ts

@@ -1,14 +1,16 @@
 export class BlahError extends Error {
+	statusCode: number;
 	raw: Record<string, unknown>;
 
-	constructor(errRespJson: { message: string } & Record<string, unknown>) {
+	constructor(statusCode: number, errRespJson: { message: string } & Record<string, unknown>) {
 		super(errRespJson.message);
+		this.statusCode = statusCode;
 		this.raw = errRespJson;
 		this.name = 'BlahError';
 	}
 
 	static async fromResponse(response: Response): Promise<BlahError> {
 		const errRespJson = await response.json();
-		return new BlahError(errRespJson);
+		return new BlahError(response.status, errRespJson);
 	}
 }

src/lib/components/RichTextInput.svelte

@@ -5,6 +5,7 @@
 	import { tw } from '$lib/tw';
 
 	export let delta: Delta | null = null;
+	export let plainText: string | undefined = undefined;
 	export let placeholder: string = '';
 
 	let className = '';
@@ -23,7 +24,7 @@
 			<p>{placeholder}</p>
 		</div>
 	{:then Input}
-		<svelte:component this={Input} bind:delta {placeholder}>
+		<svelte:component this={Input} bind:delta bind:plainText {placeholder} on:keydown>
 			<slot />
 		</svelte:component>
 	{/await}

src/lib/components/RichTextInput/ClientInput.svelte

@@ -2,6 +2,7 @@
 	import { Delta, Editor, asRoot, h } from 'typewriter-editor';
 
 	export let delta: Delta = new Delta();
+	export let plainText: string | undefined = undefined;
 	export let placeholder: string = '';
 
 	const editor = new Editor();
@@ -23,12 +24,13 @@
 		render: (attributes, children) => h('s', null, children)
 	});
 
-	delta = editor.getDelta();
 	editor.on('change', () => {
 		delta = editor.getDelta();
+		if (typeof plainText === 'string') plainText = editor.getText();
 	});
 
-	$: editor.setDelta(delta);
+	$: editor.setDelta(delta ?? new Delta());
+	$: if (typeof plainText === 'string' && plainText !== editor.getText()) editor.setText(plainText);
 </script>
 
 <div
@@ -38,6 +40,9 @@
 		? 'true'
 		: undefined}
 	data-weblah-placeholder={placeholder}
+	on:keydown
+	role="textbox"
+	tabindex="0"
 >
 	<slot />
 </div>

src/lib/keystore.ts

@@ -1,5 +1,10 @@
 import { persisted } from 'svelte-persisted-store';
 import type { EncodedBlahKeyPair } from './blah/crypto';
+import { derived } from 'svelte/store';
 
 export const keyStore = persisted<EncodedBlahKeyPair[]>('weblah-keypairs', []);
 export const currentKeyIndex = persisted<number>('weblah-current-key-index', 0);
+export const currentKeyPair = derived(
+	[keyStore, currentKeyIndex],
+	([keyStore, currentKeyIndex]) => keyStore[currentKeyIndex]
+);