@christianriedl/utils 1.0.140 → 1.0.142

package/dist/iOpenAI.d.ts

@@ -81,9 +81,13 @@ export interface IComparisonFilter {
     value: ItemType;
 }
 export interface ICompoundFilter {
-    filters: IComparisonFilter[] | unknown;
+    filters: IComparisonFilter[];
     type: 'and' | 'or';
 }
+export interface IOpenAIFilter {
+    fileFilter: ICompoundFilter;
+    vectorStoreFilter: Dictionary<string>;
+}
 export interface IOpenAIOptions {
     model: string;
     instructions?: string | null;
@@ -98,8 +102,8 @@ export interface IOpenAIService {
     log: ILogger;
     options: IOpenAIOptions;
     modelNames: string[];
-    initialize(): Promise<boolean>;
-    response(prompt: string | string[], tools?: string[], imageUrl?: string, json?: ISchema, fileSearchFilter?: ICompoundFilter | IComparisonFilter): Promise<IResponseResult>;
+    initializeModelNames(): Promise<boolean>;
+    response(prompt: string | string[], tools?: string[], imageUrl?: string, json?: ISchema, fileSearchFilter?: IOpenAIFilter): Promise<IResponseResult>;
     clearContext(): void;
     getModels(): Promise<string[]>;
 }
@@ -139,6 +143,7 @@ export interface IOpenAIServiceWithVectorStore extends IOpenAIServiceWithTools {
     vsMetadata: IDataItem[];
     fileAttributes: IDataItem[];
     initializeVectorStore(): Promise<boolean>;
+    initializeVectorStoreFiles(): Promise<boolean>;
     getVectorStore(vectorStoreId: string): IVectorStore | undefined;
     addVectorStore(vectorStoreName: string, metadata?: Dictionary<string>): Promise<boolean>;
     addFile(fileUrl: string | File, vectorStoreName: string, attributes?: Dictionary<ItemType>, wait?: boolean): Promise<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/utils",
-  "version": "1.0.140",
+  "version": "1.0.142",
   "description": "Interfaces, local storage, service worker, configuration, application state",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/OpenAI.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
     import { inject, ref, toRef, computed, onUnmounted } from 'vue';
     import { appStateSymbol, appConfigSymbol, ESize, EDevice } from '@christianriedl/utils';
-    import { getOpenAISymbol, IOpenAIService, IResponseResult } from '@christianriedl/utils';
+    import { getOpenAISymbol, IOpenAIServiceWithVectorStore, IResponseResult, IOpenAIFilter } from '@christianriedl/utils';
     import Microphone from '@christianriedl/utils/src/components/Microphone.vue';
     import Camera from '@christianriedl/utils/src/components/Camera.vue';
     import OpenAIConfig from '@christianriedl/utils/src/components/OpenAIConfig.vue';
+    import OpenAIFilter from '@christianriedl/utils/src/components/OpenAIFilter.vue';
 
     const props = defineProps<{ prompt: string, onlymicrophone?: boolean, tools?: string[] }>();
     const emits = defineEmits<{
@@ -13,7 +14,7 @@
     }>();
 
     const getOpenAI = inject(getOpenAISymbol)!;
-    const openAI = getOpenAI();
+    const openAI = getOpenAI() as IOpenAIServiceWithVectorStore;
     const appState = inject(appStateSymbol)!;
     const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const appConfig = inject(appConfigSymbol)!;
@@ -23,11 +24,13 @@
     const isCamera = ref(false);
     const isUpload = ref(false);
     const showConfig = ref(false);
+    const showFilter = ref(false);
     const files = ref<File[]>([]);
     const imageUrl = ref("");
     const camera = ref<InstanceType<typeof Camera>>();
     const htmlText = ref('');
     const tools = ref(props.tools);
+    const filter = ref<IOpenAIFilter | undefined>(undefined);
 
     onUnmounted(() => {
 	openAI.clearContext();
@@ -52,10 +55,10 @@
 	}
 	else {
 	    if (tools.value !== undefined) {
-		answer = await openAI.response(question.value, tools.value);
+		answer = await openAI.response(question.value, tools.value, undefined, undefined, filter.value);
 	    }
 	    else {
-		answer = await openAI.response(question.value);
+		answer = await openAI.response(question.value, undefined, undefined, undefined, filter.value);
 	    }
 	}
 	if (answer && answer.text) {
@@ -150,6 +153,14 @@
 	    return '';
 	}
     }
+    function setFilter(newFilter: IOpenAIFilter) {
+	filter.value = newFilter;
+	showFilter.value = false;
+    }
+    async function showConfigDialog() {
+	if (await openAI.initializeModelNames())
+	    showConfig.value = true;
+    }
 </script>
 
 <template>
@@ -157,7 +168,7 @@
     <v-container v-else fluid class="bg-office">
 	<v-row dense align="center" class="font-weight-bold">
 	    <v-col :cols="qcols">
-		<v-text-field name="subject" type="text" v-model="question" density="compact" hide-details></v-text-field>
+		<v-text-field name="subject" type="text" v-model="question" density="compact" hide-details append-inner-icon="$search" @click:appendInner="showFilter=true"></v-text-field>
 	    </v-col>
 	    <v-col :cols="12 - qcols">
 		<v-btn class="aibutton" @click="onComplete">AI</v-btn>
@@ -168,7 +179,7 @@
 		<v-btn variant="tonal" class="bg-office aibutton" @click="isUpload=true;replyLines=[]">
 		    <v-icon size="large" icon="$image" color="primary"></v-icon>
 		</v-btn>
-		<v-btn variant="tonal" class="bg-office aibutton" @click="showConfig=true">
+		<v-btn variant="tonal" class="bg-office aibutton" @click="showConfigDialog">
 		    <v-icon size="large" icon="$settings" color="primary"></v-icon>
 		</v-btn>
 	    </v-col>
@@ -192,7 +203,7 @@
 		<img width="100%" :src="imageUrl">
 	    </v-col>
 	</v-row>
-	<v-row v-if="htmlText" dense >
+	<v-row v-if="htmlText" dense>
 	    <v-col cols="12">
 		<div v-html="htmlText"></div>
 	    </v-col>
@@ -203,6 +214,9 @@
 	<v-dialog v-model="showConfig" :fullscreen="isMobile">
 	    <OpenAIConfig :tools="tools" :ismobile="isMobile" @use="onUse" @back="showConfig=false"></OpenAIConfig>
 	</v-dialog>
+	<v-dialog v-model="showFilter" :fullscreen="isMobile">
+	    <OpenAIFilter :vsmetadata="openAI.vsMetadata" :fileattributes="openAI.fileAttributes" :filter="filter" @back="setFilter"></OpenAIFilter>
+	</v-dialog>
     </v-container>
 </template>
 

package/src/components/OpenAIConfig.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
     import { inject, ref, reactive } from 'vue';
-    import { appConfigSymbol, AppConfig, Dictionary } from '@christianriedl/utils';
+    import { appConfigSymbol, AppConfig, Dictionary, IDataItem, ItemType, IVectorFile } from '@christianriedl/utils';
     import { getOpenAISymbol, IOpenAIServiceWithVectorStore, IOpenAIAppConfig, IOpenAIOptions, ITool, IMcpTool, IFileSearchTool } from '@christianriedl/utils';
     import OpenAIMetaData from '@christianriedl/utils/src/components/OpenAIMetaData.vue';
 
@@ -32,8 +32,8 @@
     const selectedVectorStoreFile = ref('');
     const showFunctions = ref(false);
     const showMetaData = ref(false);
-    const editVectorStore = ref(false);
-    const metadata = ref<Dictionary<ItemType>>({});
+    const editVectorStoreMetaData = ref(false);
+    const metadata = ref<IDataItem[]>([]);
     const toolName = ref('');
     const toolFunctions = reactive<IFunction[]>([]);
     let fileHandle: FileSystemFileHandle | null = null;
@@ -147,12 +147,17 @@
 	    fileSearch[name] = [];
 	}
     }
-    function vectorStoreSelected() {
-	selectedVectorStoreFile.value = '';
+    async function vectorStoreSelected() {
+
+	selectedVectorStoreFile.value = 'Get vectorestore files ...';
+	if (!await openAI.initializeVectorStoreFiles())
+	    return;
 	const vs = openAI.vectorStore![selectedVectorStoreName.value];
 	vectorStoreFiles.value.splice(0, vectorStoreFiles.value.length);
 	if (vs) {
-	    vectorStoreFiles.value.splice(0, 0, ...Object.values(vs.files) as string[]);
+	    for (const key in vs.files) {
+		vectorStoreFiles.value.splice(0, 0, vs.files[key].filename);
+	    }
 	    if (vectorStoreFiles.value.length > 0) {
 		selectedVectorStoreFile.value = vectorStoreFiles.value[0];
 	    }
@@ -163,7 +168,12 @@
 	    alert('Vector Store already exists, add a new name !');
 	    return;
 	}
-	if (!openAI.addVectorStore(selectedVectorStoreName.value)) {
+	const metadata: Dictionary<string> = {};
+	for (const md of openAI.vsMetadata) {
+	    metadata[md.name] = md.default.toString();
+	}
+	showMetaData.value = true;
+	if (!openAI.addVectorStore(selectedVectorStoreName.value, metadata)) {
 	    alert('Vector Store not added, error ! ');
 	    return;
 	}
@@ -179,8 +189,14 @@
     async function editVectorStore() {
 	const vs = openAI.vectorStore![selectedVectorStoreName.value];
 	if (vs) {
-	    editVectorStore.value = true;
-	    metadata.value = vs.metadata ? vs.metadata : openAI.vsMetadata;
+	    editVectorStoreMetaData.value = true;
+	    metadata.value = [];
+	    for (const md of openAI.vsMetadata) {
+		const mdCopy = Object.assign({}, md);
+		if (vs.metadata && vs.metadata[md.name])
+		    mdCopy.value = vs.metadata[md.name];
+		metadata.value.push(mdCopy);
+	    }
 	    showMetaData.value = true;
 	}
     }
@@ -189,15 +205,27 @@
 	    alert('File already exists, add a new file path or url !');
 	    return;
 	}
+	const attributes: Dictionary<ItemType> = {};
+	for (const att of openAI.fileAttributes) {
+	    attributes[att.name] = att.default;
+	}
+	const vs = openAI.vectorStore![selectedVectorStoreName.value];
+	if (vs && vs.metadata) {
+	    for (const key in vs.metadata) {
+		attributes[key] = vs.metadata[key];
+	    }
+	}
 	if (fileHandle) {
 	    const file = await fileHandle.getFile();
 	    fileHandle = null;
-	    if (!await openAI.addFile(file, selectedVectorStoreName.value)) {
+	    if (!await openAI.addFile(file, selectedVectorStoreName.value, attributes)) {
 		alert('File not added, error ! ');
 	    }
 	}
-	if (!await openAI.addFile(selectedVectorStoreFile.value, selectedVectorStoreName.value)) {
-	    alert('File not added, error ! ');
+	else {
+	    if (!await openAI.addFile(selectedVectorStoreFile.value, selectedVectorStoreName.value, attributes)) {
+		alert('File not added, error ! ');
+	    }
 	}
     }
     async function deleteFile() {
@@ -216,29 +244,63 @@
     async function editFile() {
 	const file = openAI.getFile(selectedVectorStoreFile.value);
 	if (file) {
-	    editVectorStore.value = false;
-	    metadata.value = file.attributes ? file.attributes : openAI.fileAttributes;
+	    editVectorStoreMetaData.value = false;
+	    metadata.value = [];
+	    const vs = openAI.vectorStore![selectedVectorStoreName.value];
+	    for (const md of openAI.fileAttributes) {
+		const mdCopy = Object.assign({}, md);
+		if (file.attributes && file.attributes[md.name])
+		    mdCopy.value = file.attributes[md.name];
+		else if (vs && vs.metadata && vs.metadata[md.name])
+		    mdCopy.value = vs.metadata[md.name];
+		metadata.value.push(mdCopy);
+	    }
 	    showMetaData.value = true;
 	}
     }
-    async function saveMetaData(items?: Dictionary<ItemType>) {
+    async function saveMetaData(items?: IDataItem[]) {
 	showMetaData.value = false;
 	if (items) {
-	    if (editVectorStore.value) {
-		if (await openAI.setAttributes(selectedVectorStoreName.value, null, items as Dictionary<string>)) {
-		    vs.metadata = items;
+	    if (editVectorStoreMetaData.value) {
+		const vs = openAI.vectorStore![selectedVectorStoreName.value];
+		if (vs) {
+		    const md: Dictionary<string> = {};
+		    for (const it of items) {
+			md[it.name] = it.value.toString();
+		    }
+		    if (await openAI.setAttributes(selectedVectorStoreName.value, null, md)) {
+			vs.metadata = md;
+		    }
 		}
 	    }
 	    else {
 		const file = openAI.getFile(selectedVectorStoreFile.value);
 		if (file) {
-		    if (await openAI.setAttributes(selectedVectorStoreName.value, file.id, items)) {
-			file.attributes = items;
+		    const att: Dictionary<ItemType> = {};
+		    for (const it of items) {
+			att[it.name] = it.value;
+		    }
+		    if (await openAI.setAttributes(selectedVectorStoreName.value, file.id, att)) {
+			file.attributes = att;
 		    }
 		}
 	    }
 	}
     }
+    async function searchFile() {
+	let files: FileSystemFileHandle[] = [];
+	try {
+	    files = await (window as any).showOpenFilePicker();
+	    if (files.length > 0) {
+		fileHandle = files[0];
+		selectedVectorStoreFile.value = fileHandle.name;
+	    }
+	}
+	catch (e) {
+	    console.error('Error opening file picker:', e);
+	    return;
+	}
+    }
 </script>
 
 <template>
@@ -375,9 +437,9 @@
 		    <v-combobox v-model="selectedVectorStoreName" :items="vectorStoreNames" hide-details density="compact" @update:modelValue="vectorStoreSelected()"></v-combobox>
 		</v-col>
 		<v-col cols="2">
-		    <v-btn disabled="!selectedVectorStoreName" variant="text" prepend-icon="$delete" @click="deleteVectorStore">VS</v-btn>
-		    <v-btn disabled="!selectedVectorStoreName" variant="text" prepend-icon="$plus" @click="addVectorStore">VS</v-btn>
-		    <v-btn disabled="!selectedVectorStoreName" variant="text" prepend-icon="$pencil" @click="editVectorStore">VS</v-btn>
+		    <v-btn :disabled="!selectedVectorStoreName" variant="text" prepend-icon="$delete" @click="deleteVectorStore">VS</v-btn>
+		    <v-btn :disabled="!selectedVectorStoreName" variant="text" prepend-icon="$plus" @click="addVectorStore">VS</v-btn>
+		    <v-btn :disabled="!selectedVectorStoreName" variant="text" prepend-icon="$pencil" @click="editVectorStore">VS</v-btn>
 		</v-col>
 		<v-col cols="5">
 		    <v-combobox v-model="selectedVectorStoreFile" :items="vectorStoreFiles" hide-details density="compact"></v-combobox>
@@ -385,15 +447,15 @@
 		<v-col cols="1">
 		    <v-btn variant="text" prepend-icon="$search" @click="searchFile">FILE</v-btn>
 		</v-col>
-		<v-col cols="1">
-		    <v-btn disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$delete" @click="deleteFile">FILE</v-btn>
-		    <v-btn disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$plus" @click="addFile">FILE</v-btn>
-		    <v-btn disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$pencil" @click="editFile">VS</v-btn>
+		<v-col cols="2">
+		    <v-btn :disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$delete" @click="deleteFile">FILE</v-btn>
+		    <v-btn :disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$plus" @click="addFile">FILE</v-btn>
+		    <v-btn :disabled="!selectedVectorStoreFile" variant="text" prepend-icon="$pencil" @click="editFile">FILE</v-btn>
 		</v-col>
 	    </v-row>
 	</template>
 	<v-dialog v-model="showMetaData">
-	    <OpenAIMetaData :items="metadata" :vectorstore="editVectorStore" @back="saveMetaData"></OpenAIMetaData>
+	    <OpenAIMetaData :items="metadata" :vectorstore="editVectorStoreMetaData" @back="saveMetaData"></OpenAIMetaData>
 	</v-dialog>
 	<v-dialog v-model="showFunctions">
 	    <v-container fluid class="bg-office overflow-y-auto">

package/src/components/OpenAIFilter.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+    import { inject, computed, ref, StyleValue } from 'vue';
+    import { IDataItem, Dictionary, IComparisonFilter, ICompoundFilter, IOpenAIFilter } from '@christianriedl/utils'
+    import SettingsLine from '../components/SettingsLine.vue';
+
+    const props = defineProps<{ vsmetadata: IDataItem[], fileattributes: IDataItem[], filter?: IOpenAIFilter }>();
+    const emits = defineEmits<{ (e: 'back', filter: IOpenAIFilter): void }>();
+    const items: IDataItem[] = [];
+    const opsvs = ['', 'eq'];
+    const opsfile = ['', 'eq', 'ne', 'gt', 'gte', 'lt', 'lte'];
+    const operators: Dictionary<string> = {};;
+    const numvs = props.vsmetadata.length;
+
+    for (const it of props.vsmetadata) {
+	items.push(Object.assign({}, it));
+	operators[it.name] = '';
+    }
+    for (const it of props.fileattributes) {
+	items.push(Object.assign({}, it));
+	operators[it.name] = '';
+    }
+    if (props.filter) {
+	if (props.filter.fileFilter) {
+	    for (const f of props.filter.fileFilter.filters) {
+		const it = items.find(i => i.name === f.key);
+		if (it) {
+		    it.value = f.value;
+		    operators[it.name] = f.type;
+		}
+	    }
+	}
+	if (props.filter.vectorStoreFilter) {
+	    for (const name in props.filter.vectorStoreFilter) {
+		const it = items.find(i => i.name === name);
+		if (it) {
+		    it.value = props.filter.vectorStoreFilter[name];
+		    operators[it.name] = 'eq';
+		}
+	    }
+	}
+    }
+    function onChange(item: IDataItem, hasChanged: boolean) {
+	if (!hasChanged)
+	    operators[item.name] = '';
+    }
+    function onBack() {
+	const filter: IOpenAIFilter = {
+	    fileFilter: { type: 'and', filters: [] },
+	    vectorStoreFilter: {}
+	};
+	for (let i = 0; i < items.length; i++) {
+	    const item = items[i];
+	    if (operators[item.name]) {
+		if (i < numvs) {
+		    filter.vectorStoreFilter[item.name] = item.value;
+		}
+		else {
+		    const f: IComparisonFilter = { key: item.name, type: operators[item.name] as 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte', value: item.value };
+		    filter.fileFilter.filters.push(f);
+		}
+	    }
+	}
+	emits('back', filter);
+    }
+    function onOperation(item: IDataItem, op: string) {
+	operators[item.name] = op;
+    }
+</script>
+
+<template>
+    <v-container fluid class="bg-office">
+	<h4>FileSearch filter</h4>
+	<v-table>
+	    <thead>
+		<tr>
+		    <th class="font-weight-bold" style="width:40%">Name</th>
+		    <th class="font-weight-bold" style="width:40%">Value</th>
+		    <th class="font-weight-bold" style="width:20%">Op</th>
+		</tr>
+	    </thead>
+	    <tbody>
+		<settings-line v-for="(item, index) in items" :key="item.name" :item="item" :op="operators[item.name]" 
+			       :operations="index < numvs ? opsvs : opsfile" clearable @change="onChange(item, true)" 
+			       @clear="onChange(item, false)" @operation="(op) => onOperation(item, op)">
+		</settings-line>
+		<tr>
+		    <td>
+			<v-btn @click="onBack()">
+			    BACK
+			    <v-icon icon="$back"></v-icon>
+			</v-btn>
+		    </td>
+		    <td></td>
+		    <td></td>
+		</tr>
+	    </tbody>
+	</v-table>
+    </v-container>
+</template>

package/src/components/OpenAIMetaData.vue

@@ -7,14 +7,14 @@
     const emits = defineEmits<{ (e: 'back', items?: IDataItem[]): void }>();
     const items: IDataItem[] = [];
     for (const it of props.items) {
-	items.push(Object.assign({}, it);
+	items.push(Object.assign({}, it));
     }
     const header = props.vectorstore ? "Vector Store Metadata" : "File Attributes";
     const changedItems = new Set<string>();
     const changed = ref(false);
 
-    function onChange(item: IDataItem, changed: boolean) {
-	if (changed)
+    function onChange(item: IDataItem, hasChanged: boolean) {
+	if (hasChanged)
 	    changedItems.add(item.name);
 	else
 	    changedItems.delete(item.name);
@@ -27,27 +27,26 @@
 	else {
 	    emits('back');
 	}
-
+    }
 </script>
 
 <template>
-    <v-container fluid >
+    <v-container fluid class="bg-office">
 	<h4>{{header}}</h4>
 	<v-table>
 	    <thead>
 		<tr>
-		    <th style="width:50%">Name</th>
-		    <th style="width:50%">Value</th>
+		    <th class="font-weight-bold" style="width:50%">Name</th>
+		    <th class="font-weight-bold" style="width:50%">Value</th>
 		</tr>
 	    </thead>
 	    <tbody>
-		<settings-line v-for="item in items" :key="item.name" :item="item" @change="onChange(item, true)" @clear="onChange(item, false)"></settings-line>
+		<settings-line v-for="item in items" :key="item.name" :item="item" @change="onChange(item, true)" clearable @clear="onChange(item, false)"></settings-line>
 		<tr>
-		    <td style="width:50%">
-			<v-btn @click="onBack(false)">BACK</v-btn>
-			<v-btn v-if="changed" @click="onBack(true)">SAVE</v-btn>
+		    <td>
+			<v-btn @click="onBack">BACK</v-btn>
 		    </td>
-		    <td style="width:50%"></td>
+		    <td></td>
 		</tr>
 	    </tbody>
 	</v-table>

package/src/components/SettingsLine.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-    import { reactive } from 'vue';
+    import { reactive, ref } from 'vue';
     import { IConfigItem, IDataItem, ItemType, EScope } from '@christianriedl/utils';
 
-    const props = defineProps<{ item: IConfigItem | IDataItem; scopes?: EScope, clearable?: boolean }>();
-    const emits = defineEmits<{ (e: 'change'): void, (e: 'clear'): void }>();
+    const props = defineProps<{ item: IConfigItem | IDataItem; scopes?: EScope, clearable?: boolean, op?: string, operations?: string[] }>();
+    const emits = defineEmits<{ (e: 'change'): void, (e: 'clear'): void, (e: 'operation', op: string): void }>();
 
     const item = reactive(props.item);
     const isString = typeof item.default === 'string' && !item.values;
@@ -14,10 +14,14 @@
     const isVisible = !props.scopes || ((item as IConfigItem).scopes & props.scopes) != 0;
     const enumValues: ItemType[] = item.values!;
     const description = (item as IConfigItem).description || item.name;
+    const operation = ref(props.op ? props.op :  '');
 
     function onChange() {
 	emits('change');
     }
+    function onChangeOperation() {
+	emits('operation', operation.value);
+    }
     function onClear() {
 	item.value = item.default;
 	emits('clear');
@@ -26,8 +30,8 @@
 
 <template>
     <tr v-if="isVisible" class="settingsline">
-        <td style="width:50%">{{description}}</td>
-        <td style="width:50%">
+        <td >{{description}}</td>
+        <td>
             <v-switch v-if="isBoolean" v-model="item.value" :disabled="isDisabled" density="compact" hide-details color="primary" 
                             :append-icon="props.clearable ? '$clear' : undefined" @update:modelValue="onChange" @click:append="onClear"></v-switch>
             <v-text-field v-if="isString" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable" density="compact" 
@@ -38,6 +42,10 @@
                             :items="enumValues" persistent-hint @update:modelValue="onChange" @click:clear="onClear" dense solo hide-details single-line>
             </v-select>
         </td>
+        <td v-if="props.operations">
+            <v-select density="compact" v-model="operation" :items="props.operations" persistent-hint @update:modelValue="onChangeOperation" dense solo hide-details single-line>
+            </v-select>
+        </td>
     </tr>
 </template>
 

package/src/views/SettingsPage.vue

@@ -65,8 +65,8 @@
         <v-table>
             <thead>
                 <tr>
-                    <th style="width:50%">Topic</th>
-                    <th style="width:50%">Parameter</th>
+                    <th class="font-weight-bold" style="width:50%">Topic</th>
+                    <th class="font-weight-bold" style="width:50%">Parameter</th>
                 </tr>
             </thead>
             <tbody>