feat: store gets message from backend

packages/frontend/src/pages/ModelPlayground.svelte

@@ -4,9 +4,12 @@
   import Button from '../lib/button/Button.svelte';
   import { onMount } from 'svelte';
   import { studioClient } from '../utils/client';
+  import { playgroundQueries } from '../stores/playground-queries';
+  import type { QueryState } from '@shared/models/IPlaygroundQueryState';
   export let model: ModelInfo | undefined;
 
   let prompt = '';
+  let queryId: number;
   let result: ModelResponseChoice | undefined = undefined;
   let inProgress = false;
 
@@ -15,6 +18,17 @@
       return;
     }
     studioClient.startPlayground(model.id);
+
+    playgroundQueries.subscribe((queries: QueryState[]) => {
+      const myQuery = queries.find(q => q.id === queryId);
+      if (!myQuery) {
+        return;        
+      }
+      inProgress = false;
+      if (myQuery.response?.choices.length) {
+        result = myQuery.response?.choices[0];
+      }
+    });
   });
 
   async function askPlayground() {
@@ -23,12 +37,7 @@
     }
     inProgress = true;
     result = undefined;
-    const queryId = await studioClient.askPlayground(model.id, prompt);
-    console.log('==> queryId', queryId);
-//    inProgress = false;
-//    if (res.choices.length) {
-//      result = res.choices[0];
-//    }
+    queryId = await studioClient.askPlayground(model.id, prompt);
   }
 </script>
 

packages/frontend/src/stores/playground-queries.ts

@@ -1,6 +1,11 @@
 import type { Readable } from 'svelte/store';
 import { readable } from 'svelte/store';
 import type { QueryState } from '@shared/models/IPlaygroundQueryState';
+import { rpcBrowser } from '../utils/client';
+import { MSG_NEW_PLAYGROUND_QUERIES_STATE } from '@shared/Messages';
 
-export const playgroundQueries: Readable<QueryState[]> = readable<QueryState[]>([], (set) => {
+export const playgroundQueries: Readable<QueryState[]> = readable<QueryState[]>([], (set) => {  
+  rpcBrowser.subscribe(MSG_NEW_PLAYGROUND_QUERIES_STATE, (msg) => {
+    set(msg);
+  });
 });

packages/frontend/src/utils/client.ts

@@ -4,6 +4,6 @@ import type { ModelInfo } from '@shared/models/IModelInfo';
 
 export const RECENT_CATEGORY_ID = 'recent-category';
 const podmanDesktopApi = acquirePodmanDesktopApi();
-const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
+export const rpcBrowser: RpcBrowser = new RpcBrowser(window, podmanDesktopApi);
 
 export const studioClient: StudioAPI = rpcBrowser.getProxy<StudioAPI>();

packages/shared/MessageProxy.ts

@@ -17,6 +17,11 @@ export interface IMessageResponse extends IMessageRequest {
   body: any;
 }
 
+export interface ISubscribedMessage {
+  id: string;
+  body: any;
+}
+
 export function isMessageRequest(content: any): content is IMessageRequest {
   return content !== undefined && content !== null && 'id' in content && 'channel' in content;
 }
@@ -81,6 +86,7 @@ export class RpcExtension {
 export class RpcBrowser {
   counter: number = 0;
   promises: Map<number, {resolve: (value: unknown) => any, reject: (value: unknown) => void}> = new Map();
+  subscribers: Map<string, (msg: any) => void> = new Map();
 
   getUniqueId(): number {
     return ++this.counter;
@@ -93,24 +99,27 @@ export class RpcBrowser {
   init() {
     this.window.addEventListener('message', (event: MessageEvent) => {
       const message = event.data;
-      if(!isMessageResponse(message)) {
-        console.error("Received incompatible message.", message);
-        return;
-      }
-
-      if(!this.promises.has(message.id)) {
-        console.error('Unknown message id.');
-        return;
-      }
+      if (isMessageResponse(message)) {
+        if (!this.promises.has(message.id)) {
+          console.error('Unknown message id.');
+          return;
+        }
 
-      const { resolve, reject } = this.promises.get(message.id) || {};
+        const { resolve, reject } = this.promises.get(message.id) || {};
 
-      if(message.status === 'error') {
-        reject?.(message.error)
+        if(message.status === 'error') {
+          reject?.(message.error)
+        } else {
+          resolve?.(message.body);
+        }
+        this.promises.delete(message.id);
+      } else if (this.isSubscribedMessage(message)) {
+        const handler = this.subscribers.get(message.id);
+        handler?.(message.body);
       } else {
-        resolve?.(message.body);
+        console.error("Received incompatible message.", message);
+        return;
       }
-      this.promises.delete(message.id);
     })
   }
 
@@ -153,7 +162,17 @@ export class RpcBrowser {
 
     // Create a Promise
     return new Promise((resolve, reject) => {
-      this.promises.set(requestId, {resolve, reject});
+      this.promises.set(requestId, { resolve, reject });
     })
   }
+
+  // TODO(feloy) need to unsubscribe
+  // TODO(feloy) need to subscribe several times?
+  subscribe(msgId: string, f: (msg: any) => void) {
+    this.subscribers.set(msgId, f);
+  }
+
+  isSubscribedMessage(content: any): content is ISubscribedMessage {
+    return content !== undefined && content !== null && 'id' in content && 'body' in content && this.subscribers.has(content.id);
+  }
 }