create-wirejs-app 2.0.135 → 2.0.136-llm

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.135",
+	"version": "2.0.136-llm",
 	"description": "Initializes a wirejs package.",
 	"author": "Jon Wire",
 	"license": "MIT",

package/templates/default/api/apps/llm.ts

@@ -0,0 +1,57 @@
+import {
+	AuthenticationApi,
+	BackgroundJob,
+	RealtimeService,
+	User,
+	LLM as LLMResource,
+	LLMMessage,
+	withContext
+} from "wirejs-resources";
+
+export type Message = '**start**' | '**end**' | LLMMessage;
+
+const llm = new LLMResource('app', 'llm', { 
+	models: ['claude-haiku', 'llama3.2', 'llama3:8b', 'llama2']
+});
+const llmRealtimeService = new RealtimeService<Message>('app', 'llm');
+
+const chatRunner = new BackgroundJob('app', 'chatRunner', {
+	handler: async (room: string, history: LLMMessage[]) => {
+		await llmRealtimeService.publish(room, [`**start**`]);
+		await llm.continueConversation([
+			{ role: 'system', content: 'You are a helpful (but generally concise) assistant.'},
+			...history
+		], chunk => {
+			llmRealtimeService.publish(room, [chunk.message]);
+		})
+		await llmRealtimeService.publish(room, [`**end**`]);
+	}
+});
+
+
+const assertIsAuthorized = (user: User, room: string) => {
+	if (!room.startsWith(`${user.id}/`)) {
+		throw new Error("Not authorized");
+	}
+}
+
+export const LLM = (auth: AuthenticationApi) => withContext(context => ({
+	async send(room: string, history: LLMMessage[]) {
+		const user = await auth.requireCurrentUser(context);
+		assertIsAuthorized(user, room);
+		if (!room || !history || !history.length) {
+			throw new Error('Room and history are required');
+		}
+		chatRunner.start(room, history);
+	},
+	async getRoom(room: string) {
+		const user = await auth.requireCurrentUser(context);
+		assertIsAuthorized(user, room);
+		return llmRealtimeService.getStream(context, room);
+	},
+	async createRoom() {
+		const user = await auth.requireCurrentUser(context);
+		const id = crypto.randomUUID();
+		return `${user.id}/${id}`;
+	}
+}));

package/templates/default/api/index.ts

@@ -4,10 +4,12 @@ import { Todos } from './apps/todos.js';
 import { Wiki } from './apps/wiki.js';
 import { Store } from './apps/store.js';
 import { Admin } from './apps/admin.js';
+import { LLM } from './apps/llm.js';
 
 export type * from './apps/todos.js';
 export type * from './apps/store.js';
 export type * from './apps/admin.js';
+export type * from './apps/llm.js';
 
 const authService = new AuthenticationService('app', 'core-users');
 
@@ -17,6 +19,7 @@ export const todos = Todos(auth);
 export const wiki = Wiki(auth);
 export const store = Store(auth);
 export const admin = Admin(auth);
+export const llm = LLM(auth);
 
 new Endpoint('app', 'sample-endpoint', {
 	description: "Sample endpoint to show dynamic endpoint creation.",

package/templates/default/package.json

@@ -12,13 +12,13 @@
 		"dompurify": "^3.2.3",
 		"marked": "^15.0.6",
 		"wirejs-dom": "^1.0.42",
-		"wirejs-resources": "^0.1.130",
-		"wirejs-components": "^0.1.73",
-		"wirejs-module-payments-stripe": "^0.1.24",
-		"wirejs-web-worker": "^1.0.27"
+		"wirejs-resources": "^0.1.131-llm",
+		"wirejs-components": "^0.1.74-llm",
+		"wirejs-module-payments-stripe": "^0.1.25-llm",
+		"wirejs-web-worker": "^1.0.28-llm"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.128",
+		"wirejs-scripts": "^3.0.129-llm",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {

package/templates/default/src/ssg/chatbot.ts

@@ -0,0 +1,218 @@
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
+import { html, id, css, attribute, hydrate, list, text, node } from 'wirejs-dom/v2';
+import { AuthenticatedContent } from 'wirejs-components';
+import { Main } from '../layouts/main.js';
+import { llm, Message } from 'internal-api';
+
+const sheet = css`
+	.messages {
+		height: calc(100vh - 30rem);
+		overflow: scroll;
+	}
+	.flex-row {
+		display: flex;
+		flex-direction: row;
+	}
+	.flex-row > textarea {
+		margin-right: 10px;
+	}
+`;
+
+function formatMessage(message: string): string {
+	return DOMPurify.sanitize(marked.parse(message) as string);
+}
+
+async function Chat() {
+	const self = html`<div id='chat'>
+		${sheet}
+		<!-- All messages. Markdown formatted. Sanitized. -->
+		<div ${id('messageContainer', HTMLDivElement)} class='messages'>
+			${list('messages', (m: Exclude<Message, string>) =>
+				html`<div>
+					<b>${m.role}</b><br />
+					${formatMessage(m.content)}
+				</div>`
+			)}
+			${node('pendingMessage', (md) => md ? html`<div style='color: #333;'>
+				<b>assistant</b><br />
+				${formatMessage(md || '')}
+			</div>` : html`<div></div>`)}
+		</div>
+
+		<!-- New message form -->
+		<form ${id('messageForm', HTMLFormElement)}
+			onsubmit=${async (event: Event) => {
+				event.preventDefault();
+				if (!self.activeRoom) {
+					self.data.pendingMessage = "<b>Not connected!</b>";
+					return;
+				}
+				self.data.messages.push({
+					role: 'user',
+					content: self.data.message.value.trim()
+				});
+				self.data.message.value = '';
+				self.data.message.disabled = true;
+				self.data.submitButton.disabled = true;
+				self.data.message.style.height = 'auto';
+				self.data.pendingMessage = '<i>Thinking ...</i>';
+				self.autoscroll();
+				llm.send(null, self.activeRoom, self.data.messages).catch(error => {
+					console.error(error);
+					self.data.pendingMessage = '<b>Error. Try again.</b>';
+					self.data.message.disabled = false;
+					self.data.submitButton.disabled = false;
+				});
+			}}
+		><div class='flex-row'>
+			<textarea
+				${id('message', HTMLTextAreaElement)}
+				autocomplete="on"
+				autocorrect="on"
+				autocapitalize="on"
+				type='text'
+				style="
+					width: calc(100% - 5rem);
+					height: auto;
+					tab-size: 4;
+				"
+				oninput=${() => {
+					// reset height to auto to calculate scrollHeight correctly
+					self.data.message.style.height = 'auto';
+					// only then set it to scrollHeight, which will not be based on the raw
+					// height of the content, excluding padding, etc.
+					self.data.message.style.height = self.data.message.scrollHeight + 'px';
+				}}
+				onkeydown=${(event: KeyboardEvent) => {
+					if (event.key === 'Enter' && !event.shiftKey) {
+						event.preventDefault();
+						self.data.messageForm.dispatchEvent(new Event('submit'));
+					}
+					if (event.key === 'Tab') {
+						event.preventDefault();
+						const textarea = self.data.message;
+						const start = textarea.selectionStart;
+						const end = textarea.selectionEnd;
+						if (start === end) {
+							// If no selection, insert a tab at the cursor position
+							textarea.value = textarea.value.substring(0, start)
+								+ '\t' + textarea.value.substring(end);
+							textarea.selectionStart = textarea.selectionEnd = start + 1;
+							return;
+						}
+						let lines = textarea.value.split('\n');
+						const selectedLines = lines.slice(
+							textarea.value.substring(0, start).split('\n').length - 1,
+							textarea.value.substring(0, end).split('\n').length
+						);
+						let updatedLines = [];
+						let selectionStartOffset = 0;
+						if (event.shiftKey) {
+							updatedLines = selectedLines.map(line => line.startsWith('\t') ? line.substring(1) : line);
+							selectionStartOffset = -1;
+						} else {
+							updatedLines = selectedLines.map(line => '\t' + line);
+							selectionStartOffset = 1;
+						}
+						lines.splice(
+							start === end ? start : textarea.value.substring(0, start).split('\n').length - 1,
+							selectedLines.length,
+							...updatedLines
+						);
+						textarea.value = lines.join('\n');
+						textarea.selectionStart = start + selectionStartOffset;
+						textarea.selectionEnd = end + updatedLines.length;
+					}
+				}}
+			></textarea>
+			<input ${id('submitButton', HTMLInputElement)}
+				type='submit' value='&gt;' style='width: 2em; height: 2em;' />
+		</div></form>
+
+		<!-- Connection status -->
+		<span style='color: var(--color-muted)'>${text('status', 'Connecting ...')}</span>
+
+	</div>`.extend(() => ({
+		activeRoom: undefined as string | undefined,
+		isScrolledDownWithinMargin(margin: number) {
+			const container = self.data.messageContainer;
+			const scrollTop = container.scrollTop;
+			const scrollHeight = container.scrollHeight;
+			const clientHeight = container.clientHeight;
+			return (scrollHeight - (scrollTop + clientHeight)) <= margin;
+		},
+		autoscroll() {
+			const container = self.data.messageContainer;
+			container.scrollTop = container.scrollHeight - container.clientHeight;
+		},
+		disconnect() {
+			// no implementation until connected
+		},
+		async connect() {
+			self.activeRoom = await llm.createRoom(null);
+			const roomStream = await llm.getRoom(null, self.activeRoom);
+			let isThinking = false;
+			self.disconnect = roomStream.subscribe({
+				onopen() {
+					self.data.status = `Connected.`;
+				},
+				onmessage(message) {
+					const startedAtBottom = self.isScrolledDownWithinMargin(50);
+					if (message === '**start**') {
+						isThinking = true;
+						self.data.pendingMessage = '<i>Thinking ...</i>';
+						self.data.message.disabled = true;
+						self.data.submitButton.disabled = true;
+					} else if (message === '**end**') {
+						isThinking = false;
+						self.data.messages.push({
+							role: 'assistant',
+							content: self.data.pendingMessage
+						});
+						self.data.pendingMessage = '';
+						self.data.submitButton.disabled = false;
+						self.data.message.disabled = false;
+						self.data.message.focus();
+					} else {
+						if (isThinking) {
+							self.data.pendingMessage = message.content;
+						} else {
+							self.data.pendingMessage += message.content;
+						}
+						isThinking = false;
+					}
+					if (startedAtBottom) self.autoscroll();
+				},
+				onclose(reason) {
+					if (reason !== 'unsubscribed') {
+						self.data.status = 'Disconnected. (Refresh to try reconnecting.)';
+					}
+				}
+			});
+		}
+	}))
+	.onadd(async () => {
+		self.connect();
+		self.data.message.value = '';
+	});
+	return self;
+}
+
+async function App() {
+	return html`<div id='app'>
+		${await AuthenticatedContent({
+			authenticated: Chat,
+			unauthenticated: () => html`<p>Sign in for the LLM demo.</p>`
+		})}
+	</div>`;
+}
+
+export async function generate() {
+	return Main({
+		pageTitle: 'LLM Demo',
+		content: await App()
+	})
+}
+
+hydrate('app', App as any);

package/templates/default/src/ssg/index.ts

@@ -13,6 +13,7 @@ export async function generate() {
 				<li><a href='/realtime-test.html'>Realtime Test</a></li>
 				<li><a href='/web-worker-test.html'>Web Worker Test</a></li>
 				<li><a href='/storefront.html'>Storefront</a></li>
+				<li><a href='/chatbot.html'>Chatbot</a></li>
 				<li><a href='/admin.html'>Admin</a></li>
 			</ul>
 		</div>`

package/templates/default/src/ssg/realtime-test.ts

@@ -104,7 +104,6 @@ async function Chat() {
 
 async function App() {
 	return html`<div id='app'>
-		<h4>Realtime Demo</h4>
 		${await AuthenticatedContent({
 			authenticated: Chat,
 			unauthenticated: () => html`<p>Sign in for the realtime demo.</p>`
@@ -114,7 +113,7 @@ async function App() {
 
 export async function generate() {
 	return Main({
-		pageTitle: 'Welcome!',
+		pageTitle: 'Realtime Demo',
 		content: await App()
 	})
 }

package/templates/default/src/ssg/web-worker-test.ts

@@ -4,7 +4,6 @@ import { worker } from 'web-worker';
 
 async function App() {
 	return html`<div id='app'>
-		<h4>Web Worker Demo</h4>
 		<div>${text('status', '...')}</div>
 		<div>Web Worker output: ${text('output', '...')}</div>
 	</div>`.onadd(async self => {
@@ -17,7 +16,7 @@ async function App() {
 
 export async function generate() {
 	return Main({
-		pageTitle: 'Welcome!',
+		pageTitle: 'Web Worker Demo',
 		content: await App()
 	})
 }