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:
@@ -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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user