1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-10-20 20:12:39 +03:00

Vectors: Finished core fetch & display functionality

This commit is contained in:
Dan Brown
2025-08-22 12:59:32 +01:00
parent 8eef5a1ee7
commit bb08f62327
4 changed files with 77 additions and 51 deletions

View File

@@ -1,5 +1,4 @@
import {Component} from "./component";
import {createEventSource} from "eventsource-client";
export class QueryManager extends Component {
protected input!: HTMLTextAreaElement;
@@ -8,33 +7,52 @@ export class QueryManager extends Component {
protected contentLoading!: HTMLElement;
protected contentDisplay!: HTMLElement;
protected form!: HTMLFormElement;
protected fieldset!: HTMLFieldSetElement;
setup() {
this.input = this.$refs.input as HTMLTextAreaElement;
this.form = this.$refs.form as HTMLFormElement;
this.fieldset = this.$refs.fieldset as HTMLFieldSetElement;
this.generatedLoading = this.$refs.generatedLoading;
this.generatedDisplay = this.$refs.generatedDisplay;
this.contentLoading = this.$refs.contentLoading;
this.contentDisplay = this.$refs.contentDisplay;
// TODO - Start lookup if query set
this.setupListeners();
// TODO - Update URL on query change
// Start lookup if a query is set
if (this.input.value.trim() !== '') {
this.runQuery();
}
}
// TODO - Handle query form submission
protected setupListeners(): void {
// Handle form submission
this.form.addEventListener('submit', event => {
event.preventDefault();
this.runQuery();
});
// Allow Ctrl+Enter to run a query
this.input.addEventListener('keydown', event => {
if (event.key === 'Enter' && event.ctrlKey && this.input.value.trim() !== '') {
this.runQuery();
}
});
}
async runQuery() {
protected async runQuery(): Promise<void> {
this.contentLoading.hidden = false;
this.generatedLoading.hidden = false;
this.contentDisplay.innerHTML = '';
this.generatedDisplay.innerHTML = '';
this.fieldset.disabled = true;
const query = this.input.value.trim();
const url = new URL(window.location.href);
url.searchParams.set('ask', query);
window.history.pushState({}, '', url.toString());
const query = this.input.value;
const es = window.$http.eventSource('/query', 'POST', {query});
let messageCount = 0;
@@ -42,16 +60,18 @@ export class QueryManager extends Component {
messageCount++;
if (messageCount === 1) {
// Entity results
this.contentDisplay.innerText = data; // TODO - Update to HTML
this.contentDisplay.innerHTML = JSON.parse(data).view;
this.contentLoading.hidden = true;
} else if (messageCount === 2) {
// LLM Output
this.generatedDisplay.innerText = data; // TODO - Update to HTML
this.generatedDisplay.innerText = JSON.parse(data).result;
this.generatedLoading.hidden = true;
} else {
es.close()
es.close();
break;
}
}
this.fieldset.disabled = false;
}
}