@christianriedl/utils 1.0.145 → 1.0.147

package/package.json

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

package/src/components/OpenAI.vue

@@ -154,11 +154,13 @@
 	    return '';
 	}
     }
-    function setFilter(newFilter: IOpenAIFilter) {
+    function setFilter(newFilter: IOpenAIFilter, newTools: string[]) {
 	filter.value = newFilter;
+	tools.value = newTools;
 	showFilter.value = false;
     }
     async function showConfigDialog() {
+	showFilter.value = false;
 	if (await openAI.initializeModelNames())
 	    showConfig.value = true;
     }
@@ -182,9 +184,6 @@
 		<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="showConfigDialog">
-		    <v-icon size="large" icon="$settings" color="primary"></v-icon>
-		</v-btn>
 	    </v-col>
 	</v-row>
 	<v-row v-if="isCamera" dense align="center">
@@ -218,7 +217,8 @@
 	    <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>
+	    <OpenAIFilter :vsmetadata="openAI.vsMetadata" :fileattributes="openAI.fileAttributes" :alltools="openAI.aiTools" 
+			  :tools="tools" :filter="filter" @back="setFilter" @config="showConfigDialog"></OpenAIFilter>
 	</v-dialog>
     </v-container>
 </template>

package/src/components/OpenAIConfig.vue

@@ -36,6 +36,7 @@
     const metadata = ref<IDataItem[]>([]);
     const toolName = ref('');
     const toolFunctions = reactive<IFunction[]>([]);
+    const canClear = !props.ismobile;
     let fileHandle: FileSystemFileHandle | null = null;
     let vsSelected = false;
 
@@ -364,13 +365,13 @@
 		</v-select>
 	    </v-col>
 	    <v-col cols="2">
-		<v-number-input v-model="options.max_output_tokens" control-variant="hidden" hide-details clearable label="Max Token" density="compact" @change="onOptionChange"></v-number-input>
+		<v-number-input v-model="options.max_output_tokens" control-variant="hidden" hide-details :clearable="canClear" label="Max Token" density="compact" @change="onOptionChange"></v-number-input>
 	    </v-col>
 	    <v-col cols="1">
-		<v-number-input v-model="options.temperature" control-variant="hidden" :precision="2" hide-details clearable label="Temperature" density="compact" @change="onOptionChange"></v-number-input>
+		<v-number-input v-model="options.temperature" control-variant="hidden" :precision="2" hide-details :clearable="canClear" label="Temperature" density="compact" @change="onOptionChange"></v-number-input>
 	    </v-col>
 	    <v-col cols="1">
-		<v-number-input v-model="options.top_p" control-variant="hidden" :precision="2" hide-details clearable label="Top P" density="compact" @change="onOptionChange"></v-number-input>
+		<v-number-input v-model="options.top_p" control-variant="hidden" :precision="2" hide-details :clearable="canClear" label="Top P" density="compact" @change="onOptionChange"></v-number-input>
 	    </v-col>
 	    <v-col cols="1">
 		<v-checkbox v-model="options.store" label="Store" hide-details density="compact" @change="onOptionChange"></v-checkbox>
@@ -378,7 +379,7 @@
 	</v-row>
 	<v-row dense align="center">
 	    <v-col cols="12">
-		<v-text-field v-model="options.instructions" type="string" hide-details clearable label="System Message" density="compact" @change="onOptionChange"></v-text-field>
+		<v-text-field v-model="options.instructions" type="string" hide-details :clearable="canClear" label="System Message" density="compact" @change="onOptionChange"></v-text-field>
 	    </v-col>
 	</v-row>
 	<template v-for="(tool, key) in tools">
@@ -387,17 +388,17 @@
 		    <v-text-field v-model="tool.server_label" type="string " hide-details disabled label="mcp" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="3">
-		    <v-text-field v-model="tool.server_url" type="string" hide-details clearable label="Url" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.server_url" type="string" hide-details :clearable="canClear" label="Url" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="2">
-		    <v-text-field v-model="tool.connector_id" type="string" hide-details clearable label="Connector Id" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.connector_id" type="string" hide-details :clearable="canClear" label="Connector Id" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="2">
-		    <v-text-field v-model="tool.server_description" type="string" hide-details clearable label="Description" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.server_description" type="string" hide-details :clearable="canClear" label="Description" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="props.isMobile ? 2 : 1">
 		    <v-select v-model="tool.require_approval" :items="mcpApprovals" hide-details
-			      density="compact" label="Approval" @update:modelValue="onToolChange">
+		      density="compact" label="Approval" @update:modelValue="onToolChange">
 		    </v-select>
 		</v-col>
 		<v-col v-if="!props.ismobile" cols="1">
@@ -419,7 +420,7 @@
 		    </v-select>
 		</v-col>
 		<v-col cols="2">
-		    <v-number-input v-model="tool.max_num_results" control-variant="hidden" hide-details clearable label="Max Results" density="compact" @change="onToolChange"></v-number-input>
+		    <v-number-input v-model="tool.max_num_results" control-variant="hidden" hide-details :clearable="canClear" label="Max Results" density="compact" @change="onToolChange"></v-number-input>
 		</v-col>
 		<v-col cols="1">
 		    <v-btn icon="$delete" variant="tonal" @click.stop.prevent="onDelete(key)"></v-btn>
@@ -433,13 +434,13 @@
 		    <v-text-field :model-value="key" type="string" hide-details disabled label="file_search" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="2">
-		    <v-text-field v-model="tool.user_location.country" type="string" hide-details clearable label="Country" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.user_location.country" type="string" hide-details :clearable="canClear" label="Country" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="3">
-		    <v-text-field v-model="tool.user_location.city" type="string" hide-details clearable label="City" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.user_location.city" type="string" hide-details :clearable="canClear" label="City" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="4">
-		    <v-text-field v-model="tool.user_location.region" type="string" hide-details clearable label="Region" density="compact" @change="onToolChange"></v-text-field>
+		    <v-text-field v-model="tool.user_location.region" type="string" hide-details :clearable="canClear" label="Region" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
 		<v-col cols="1">
 		    <v-btn icon="$delete" variant="tonal" @click.stop.prevent="onDelete(key)"></v-btn>
@@ -449,6 +450,32 @@
 		</v-col>
 	    </v-row>
 	</template>
+	<template v-if="!props.ismobile && openAI.vectorStore">
+	    <v-divider></v-divider>
+	    <h4>  </h4>
+	    <h4>Vector Store</h4>
+	    <v-row dense align="center">
+		<v-col cols="2">
+		    <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-col>
+		<v-col cols="5">
+		    <v-combobox v-model="selectedVectorStoreFile" :items="vectorStoreFiles" hide-details density="compact"></v-combobox>
+		</v-col>
+		<v-col cols="1">
+		    <v-btn variant="text" prepend-icon="$search" @click="searchFile">FILE</v-btn>
+		</v-col>
+		<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-row dense align="center">
 	    <v-col cols="2">
 		<v-btn class="bg-office" @click="emits('back')">
@@ -481,32 +508,6 @@
 		</v-btn>
 	    </v-col>
 	</v-row>
-	<template v-if="!props.ismobile && openAI.vectorStore">
-	    <v-divider></v-divider>
-	    <h4>  </h4>
-	    <h4>Vector Store</h4>
-	    <v-row dense align="center">
-		<v-col cols="2">
-		    <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-col>
-		<v-col cols="5">
-		    <v-combobox v-model="selectedVectorStoreFile" :items="vectorStoreFiles" hide-details density="compact"></v-combobox>
-		</v-col>
-		<v-col cols="1">
-		    <v-btn variant="text" prepend-icon="$search" @click="searchFile">FILE</v-btn>
-		</v-col>
-		<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="editVectorStoreMetaData" @back="saveMetaData"></OpenAIMetaData>
 	</v-dialog>

package/src/components/OpenAIFilter.vue

@@ -1,16 +1,20 @@
 <script setup lang="ts">
-    import { inject, computed, ref, StyleValue } from 'vue';
-    import { IDataItem, Dictionary, IComparisonFilter, ICompoundFilter, IOpenAIFilter } from '@christianriedl/utils'
+    import { inject, reactive, computed, ref, StyleValue } from 'vue';
+    import { IDataItem, Dictionary, IComparisonFilter, ICompoundFilter, IOpenAIFilter, ITool } 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 props = defineProps<{ vsmetadata: IDataItem[], fileattributes: IDataItem[], alltools: Dictionary<ITool>, tools?: string[], filter?: IOpenAIFilter }>();
+    const emits = defineEmits<{ (e: 'back', filter: IOpenAIFilter, tools: string[]): void, (e: 'config'): void }>();
     const items: IDataItem[] = [];
     const opsvs = ['', 'eq'];
     const opsfile = ['', 'eq', 'ne', 'gt', 'gte', 'lt', 'lte'];
     const operators: Dictionary<string> = {};;
     const numvs = props.vsmetadata.length;
+    const tools = reactive<Dictionary<boolean>>({});
 
+    for (const key in props.alltools) {
+	tools[key] = props.tools ? props.tools.indexOf(key) >= 0 : false;
+    }
     for (const it of props.vsmetadata) {
 	items.push(Object.assign({}, it));
 	operators[it.name] = '';
@@ -60,7 +64,12 @@
 		}
 	    }
 	}
-	emits('back', filter);
+	const selectedTools: string[] = [];
+	for (const key in tools) {
+	    if (tools[key])
+		selectedTools.push(key);
+	}
+	emits('back', filter, selectedTools);
     }
     function onOperation(item: IDataItem, op: string) {
 	operators[item.name] = op;
@@ -69,31 +78,71 @@
 
 <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)">
+	<h4>Tools and FileSearch filter</h4>
+	<v-row dense>
+	    <v-col cols="4">
+		<!--
+		<v-table density="compact">
+		    <thead>
+			<tr>
+			    <th class="font-weight-bold">Tool use</th>
+			</tr>
+		    </thead>
+		    <tbody>
+			<tr v-for="(tool,key) in tools" :key="key">
+			    <td>
+				<v-checkbox density="compact" hide-details v-model="tools[key]" :label="key.toString()"></v-checkbox>
+			    </td>
+			</tr>
+		    </tbody>
+		</v-table>
+		-->
+		<v-row dense class="font-weight-bold">
+		    <v-col cols="4">Tool Use</v-col>
+		</v-row>
+		<v-divider></v-divider>
+		<v-row dense v-for="(tool,key) in tools" :key="key">
+		    <v-col cols="12">
+			<v-checkbox density="compact" hide-details v-model="tools[key]" :label="key.toString()"></v-checkbox>
+		    </v-col>
+		</v-row>
+	    </v-col>
+	    <v-col cols="8">
+		<!--
+		<v-table density="compact">
+		    <thead>
+			<tr>
+			    <th class="font-weight-bold" style="width:35%">Name</th>
+			    <th class="font-weight-bold" style="width:35%">Value</th>
+			    <th class="font-weight-bold" style="width:30%">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" @change="onChange(item, true)"
+				       @clear="onChange(item, false)" @operation="(op) => onOperation(item, op)">
+			</settings-line>
+		    </tbody>
+		</v-table>
+		-->
+		<v-row dense class="font-weight-bold">
+		    <v-col cols="6">Name</v-col>
+		    <v-col cols="4">Value</v-col>
+		    <v-col cols="2">Op</v-col>
+		</v-row>
+	    <v-divider></v-divider>
+		<settings-line v-for="(item, index) in items" :key="item.name" :item="item" :op="operators[item.name]"
+				:operations="index < numvs ? opsvs : opsfile" @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-col>
+	</v-row>
+	<v-row dense>
+	    <v-col cols="12">
+		<v-btn @click="onBack()">BACK<v-icon icon="$back"></v-icon></v-btn>
+		<v-btn @click="emits('config')">CONFIG<v-icon icon="$settings"></v-icon></v-btn>
+	    </v-col>
+	</v-row>
     </v-container>
 </template>
+

package/src/components/OpenAIMetaData.vue

@@ -33,22 +33,35 @@
 <template>
     <v-container fluid class="bg-office">
 	<h4>{{header}}</h4>
-	<v-table>
-	    <thead>
-		<tr>
-		    <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)" clearable @clear="onChange(item, false)"></settings-line>
-		<tr>
-		    <td>
-			<v-btn @click="onBack">BACK</v-btn>
-		    </td>
-		    <td></td>
-		</tr>
-	    </tbody>
-	</v-table>
+	<!--
+    <v-table>
+	<thead>
+	    <tr>
+		<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)" clearable @clear="onChange(item, false)"></settings-line>
+	    <tr>
+		<td>
+		    <v-btn @click="onBack">BACK</v-btn>
+		</td>
+		<td></td>
+	    </tr>
+	</tbody>
+    </v-table>
+    -->
+	<v-row dense class="font-weight-bold">
+	    <v-col cols="6">Topic</v-col>
+	    <v-col cols="6">Parameter</v-col>
+	</v-row>
+	<v-divider></v-divider>
+	<settings-line v-for="item in items" :key="item.name" :item="item" @change="onChange(item, true)" clearable @clear="onChange(item, false)"></settings-line>
+	<v-row dense>
+	    <v-col cols="3">
+		<v-btn @click="onBack">BACK</v-btn>
+	    </v-col>
+	</v-row>
     </v-container>
 </template>

package/src/components/SettingsLine.vue

@@ -29,14 +29,15 @@
 </script>
 
 <template>
+    <!--
     <tr v-if="isVisible" class="settingsline">
         <td >{{description}}</td>
         <td>
-            <v-switch v-if="isBoolean" v-model="item.value" :disabled="isDisabled" density="compact" hide-details color="primary" 
+            <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" 
+            <v-text-field v-if="isString" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable" density="compact"
                             hide-details type="string" @update:modelValue="onChange" @click:clear="onClear"></v-text-field>
-            <v-text-field v-if="isNumber" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable" density="compact" 
+            <v-text-field v-if="isNumber" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable" density="compact"
                             hide-details type="number"  @update:modelValue="onChange" @click:clear="onClear"></v-text-field>
             <v-select v-if="isEnum" name="enum" density="compact" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable"
                             :items="enumValues" persistent-hint @update:modelValue="onChange" @click:clear="onClear" dense solo hide-details single-line>
@@ -47,6 +48,26 @@
             </v-select>
         </td>
     </tr>
+    -->
+    <v-row dense v-if="isVisible">
+        <v-col cols="6">{{description}}</v-col>
+        <v-col cols="props.operations ? 4 : 6">
+            <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"
+                          hide-details type="string" @update:modelValue="onChange" @click:clear="onClear"></v-text-field>
+            <v-text-field v-if="isNumber" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable" density="compact"
+                          hide-details type="number" @update:modelValue="onChange" @click:clear="onClear"></v-text-field>
+            <v-select v-if="isEnum" name="enum" density="compact" v-model="item.value" :disabled="isDisabled" :clearable="props.clearable"
+                      :items="enumValues" persistent-hint @update:modelValue="onChange" @click:clear="onClear" dense solo hide-details single-line>
+            </v-select>
+        </v-col>
+        <v-col 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>
+        </v-col>
+    </v-row>
+    <v-divider></v-divider>
 </template>
 
 

package/src/views/SettingsPage.vue

@@ -60,18 +60,26 @@
 </script>
 
 <template>
-    <v-container fluid  :style="heightStyle">
+    <v-container fluid :style="heightStyle">
         <h2>Settings</h2>
-        <v-table>
-            <thead>
-                <tr>
-                    <th class="font-weight-bold" style="width:50%">Topic</th>
-                    <th class="font-weight-bold" style="width:50%">Parameter</th>
-                </tr>
-            </thead>
-            <tbody>
-                <settings-line v-for="config in appConfig.items" :key="config.name" :item="config" :scopes="scopes" @change="onChange(config)"></settings-line>
-            </tbody>
-        </v-table>
+        <!--
+    <v-table>
+        <thead>
+            <tr>
+                <th class="font-weight-bold" style="width:50%">Topic</th>
+                <th class="font-weight-bold" style="width:50%">Parameter</th>
+            </tr>
+        </thead>
+        <tbody>
+            <settings-line v-for="config in appConfig.items" :key="config.name" :item="config" :scopes="scopes" @change="onChange(config)"></settings-line>
+        </tbody>
+    </v-table>
+     -->
+        <v-row dense class="font-weight-bold">
+            <v-col cols="6">Topic</v-col>
+            <v-col cols="6">Parameter</v-col>
+        </v-row>
+        <v-divider></v-divider>
+        <settings-line v-for="config in appConfig.items" :key="config.name" :item="config" :scopes="scopes" @change="onChange(config)"></settings-line>
     </v-container>
 </template>