Vectors: Updated query response to use server-side-events

Allowing the vector query results and the LLM response to each come back
over the same HTTP request at two different times via a somewhat
standard.

Uses a package for JS SSE client, since native browser client does not
support over POST, which is probably important for this endpoint as we
don't want crawlers or other bots abusing this via accidentally.

Author: ssddanbrown

app/Search/Queries/QueryController.php

@@ -41,8 +41,13 @@ public function run(Request $request, VectorSearchRunner $searchRunner, LlmQuery
         // TODO - Validate if query system is active
         $query = $request->get('query', '');
 
-        $results = $query ? $searchRunner->run($query) : [];
-        $llmResult = $llmRunner->run($query, $results);
-        dd($results, $llmResult);
+        return response()->eventStream(function () use ($query, $searchRunner, $llmRunner) {
+            $results = $query ? $searchRunner->run($query) : [];
+
+            $count = count($results);
+            yield "Found {$count} results for query: {$query}!";
+            $llmResult = $llmRunner->run($query, $results);
+            yield "LLM result: {$llmResult}";
+        });
     }
 }

package-lock.json

@@ -55,6 +55,7 @@
     "@ssddanbrown/codemirror-lang-twig": "^1.0.0",
     "@types/jest": "^29.5.14",
     "codemirror": "^6.0.1",
+    "eventsource-client": "^1.1.4",
     "idb-keyval": "^6.2.1",
     "markdown-it": "^14.1.0",
     "markdown-it-task-lists": "^2.1.1",

package.json

@@ -1,4 +1,5 @@
 import {Component} from "./component";
+import {createEventSource} from "eventsource-client";
 
 export class QueryManager extends Component {
     protected input!: HTMLTextAreaElement;
@@ -21,5 +22,36 @@ export class QueryManager extends Component {
         // TODO - Update URL on query change
 
         // TODO - Handle query form submission
+        this.form.addEventListener('submit', event => {
+            event.preventDefault();
+            this.runQuery();
+        });
+    }
+
+    async runQuery() {
+        this.contentLoading.hidden = false;
+        this.generatedLoading.hidden = false;
+        this.contentDisplay.innerHTML = '';
+        this.generatedDisplay.innerHTML = '';
+
+        const query = this.input.value;
+        const es = window.$http.eventSource('/query', 'POST', {query});
+
+        let messageCount = 0;
+        for await (const {data, event, id} of es) {
+            messageCount++;
+            if (messageCount === 1) {
+                // Entity results
+                this.contentDisplay.innerText = data; // TODO - Update to HTML
+                this.contentLoading.hidden = true;
+            } else if (messageCount === 2) {
+                // LLM Output
+                this.generatedDisplay.innerText = data; // TODO - Update to HTML
+                this.generatedLoading.hidden = true;
+            } else {
+                es.close()
+                break;
+            }
+        }
     }
 }

resources/js/components/query-manager.ts

@@ -1,3 +1,5 @@
+import {createEventSource, EventSourceClient} from "eventsource-client";
+
 type ResponseData = Record<any, any>|string;
 
 type RequestOptions = {
@@ -59,7 +61,6 @@ export class HttpManager {
     }
 
     createXMLHttpRequest(method: string, url: string, events: Record<string, (e: Event) => void> = {}): XMLHttpRequest {
-        const csrfToken = document.querySelector('meta[name=token]')?.getAttribute('content');
         const req = new XMLHttpRequest();
 
         for (const [eventName, callback] of Object.entries(events)) {
@@ -68,7 +69,7 @@ export class HttpManager {
 
         req.open(method, url);
         req.withCredentials = true;
-        req.setRequestHeader('X-CSRF-TOKEN', csrfToken || '');
+        req.setRequestHeader('X-CSRF-TOKEN', this.getCSRFToken());
 
         return req;
     }
@@ -95,12 +96,11 @@ export class HttpManager {
             requestUrl = urlObj.toString();
         }
 
-        const csrfToken = document.querySelector('meta[name=token]')?.getAttribute('content') || '';
         const requestOptions: RequestInit = {...options, credentials: 'same-origin'};
         requestOptions.headers = {
             ...requestOptions.headers || {},
             baseURL: window.baseUrl(''),
-            'X-CSRF-TOKEN': csrfToken,
+            'X-CSRF-TOKEN': this.getCSRFToken(),
         };
 
         const response = await fetch(requestUrl, requestOptions);
@@ -191,6 +191,27 @@ export class HttpManager {
         return this.dataRequest('DELETE', url, data);
     }
 
+    eventSource(url: string, method: string = 'GET', body: object = {}): EventSourceClient {
+        if (!url.startsWith('http')) {
+            url = window.baseUrl(url);
+        }
+
+        return createEventSource({
+            url,
+            method,
+            body: JSON.stringify(body),
+            credentials: 'same-origin',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': this.getCSRFToken(),
+            }
+        });
+    }
+
+    protected getCSRFToken(): string {
+        return document.querySelector('meta[name=token]')?.getAttribute('content') || '';
+    }
+
     /**
      * Parse the response text for an error response to a user
      * presentable string. Handles a range of errors responses including