@christianriedl/utils 1.0.153 → 1.0.155

package/package.json

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

package/src/components/OpenAI.vue

@@ -25,7 +25,6 @@
     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('');
@@ -42,7 +41,6 @@
 
     async function onComplete() {
 	htmlText.value = "<h4>WAITING ...</h4>";
-	files.value = [];
 	isUpload.value = false;
 	let answer: IResponseResult;
 	if (camera.value) {
@@ -124,17 +122,44 @@
 	    camera.value = undefined;
 	}
     }
-    function onFile() {
+    async function fileUpload() {
+	replyLines.value = [];
+	htmlText.value = '';
+	isCamera.value = false;
+	if (camera.value) {
+	    camera.value.stop();
+	    camera.value = undefined;
+	}
 	if (!question.value) {
 	    question.value = "Was erkennst du auf dem Bild ?";
 	}
-	if (files.value && files.value.length > 0) {
+	const clipboardUrl = await window.navigator.clipboard.readText();
+	if (clipboardUrl && clipboardUrl.startsWith("http")) {
+	    if (window.confirm(`Use '${clipboardUrl}' ?`)) {
+		imageUrl.value = clipboardUrl;
+		isUpload.value = true;
+		return;
+	    }
+	    await window.navigator.clipboard.writeText('');
+	}
+	const pickerOpts = {
+	    types: [{
+		    description: "Images",
+		    accept: { "image/*": [".png", ".gif", ".jpeg", ".jpg"] }
+		}],
+	    excludeAcceptAllOption: true,
+	    multiple: false,
+	};
+	const files: FileSystemFileHandle[] = await(window as any).showOpenFilePicker(pickerOpts);
+	if (files && files.length > 0) {
+	    const file = await files[0].getFile();
 	    const reader = new FileReader();
 	    reader.addEventListener("load", async () => {
 		// convert image file to base64 string
 		imageUrl.value = reader.result as string;
+		isUpload.value = true;
 	    }, false,);
-	    reader.readAsDataURL(files.value[0]);
+	    reader.readAsDataURL(file);
 	}
     }
     function onUse(usetools: string[], persist: boolean) {
@@ -189,7 +214,7 @@
 		<v-btn variant="tonal" class="bg-office aibutton" @click="onCamera">
 		    <v-icon size="large" icon="$webcam" color="primary"></v-icon>
 		</v-btn>
-		<v-btn variant="tonal" class="bg-office aibutton" @click="isUpload=true;replyLines=[]">
+		<v-btn variant="tonal" class="bg-office aibutton" @click="fileUpload">
 		    <v-icon size="large" icon="$image" color="primary"></v-icon>
 		</v-btn>
 	    </v-col>
@@ -205,12 +230,8 @@
 	    </v-col>
 	</v-row>
 	<v-row v-if="isUpload" dense align="center">
-	    <v-col cols="6">
-		<v-file-input show-size clearable multiple hide-details v-model="files" accept="image/*" label="Select File" prepend-icon="" append-icon="" @update:modelValue="onFile">
-		</v-file-input>
-	    </v-col>
-	    <v-col cols="6">
-		<img width="100%" :src="imageUrl">
+	    <v-col cols="12">
+		<v-img :src="imageUrl"></v-img>
 	    </v-col>
 	</v-row>
 	<v-row v-if="htmlText" dense>

package/src/components/OpenAIConfig.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive } from 'vue';
+    import { inject, ref, reactive, onBeforeUnmount } from 'vue';
     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';
@@ -40,6 +40,8 @@
     let fileHandle: FileSystemFileHandle | null = null;
     let vsSelected = false;
 
+    onBeforeUnmount(() => onBack());
+
     initializeTools();
     checkAllFilter();
 
@@ -99,8 +101,11 @@
 	    showFunctions.value = true;
 	}
     }
-    function onSave() {
-	const persist = window.confirm('Do you want to persist the changes?');
+    function onSave(ask: boolean) {
+	let persist = false;
+	if (ask) {
+	    persist = window.confirm('Do you want to persist the changes?');
+	}
 	if (toolsChanged.value) {
 	    for (const key in fileSearch) {
 		const vsNames = fileSearch[key];
@@ -125,8 +130,11 @@
 	    optionsChanged.value = false;
 	}
     }
-    function onSaveUsage() {
-	const persist = window.confirm('Do you want to persist the changes?');
+    function onSaveUsage(ask: boolean) {
+	let persist = false;
+	if (ask) {
+	    persist = window.confirm('Do you want to persist the changes?');
+	}
 	const useTools: string[] = [];
 	for (const key in use) {
 	    if (use[key]) {
@@ -136,6 +144,13 @@
 	emits('use', useTools, persist);
 	useChanged.value = false;
     }
+    function onBack() {
+	if (optionsChanged.value)
+	    onSave(false);
+	if (useChanged.value)
+	    onSaveUsage(false);
+	emits("back");
+    }
     function onAddMcp() {
 	const name = window.prompt('Enter MCP name:');
 	if (name && name.length > 0) {
@@ -510,19 +525,19 @@
 	</template>
 	<v-row dense align="center">
 	    <v-col cols="2">
-		<v-btn class="bg-office" @click="emits('back')">
+		<v-btn class="bg-office" @click="onBack">
 		    BACK
 		    <v-icon icon="$back"></v-icon>
 		</v-btn>
 	    </v-col>
 	    <v-col cols="2">
-		<v-btn :disabled="!optionsChanged && !toolsChanged" class="bg-office" @click="onSave">
+		<v-btn :disabled="!optionsChanged && !toolsChanged" class="bg-office" @click="onSave(true)">
 		    SAVE
 		    <v-icon icon="$save"></v-icon>
 		</v-btn>
 	    </v-col>
 	    <v-col cols="2">
-		<v-btn :disabled="!useChanged" class="bg-office" @click="onSaveUsage">
+		<v-btn :disabled="!useChanged" class="bg-office" @click="onSaveUsage(true)">
 		    SAVE TOOL USE
 		    <v-icon icon="$save"></v-icon>
 		</v-btn>

package/src/components/OpenAIFilter.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, reactive, computed, ref, StyleValue } from 'vue';
+    import { inject, reactive, computed, ref, onBeforeUnmount, StyleValue } from 'vue';
     import { IDataItem, Dictionary, IComparisonFilter, ICompoundFilter, IOpenAIFilter, ITool } from '@christianriedl/utils'
     import SettingsLine from '../components/SettingsLine.vue';
 
@@ -12,6 +12,8 @@
     const numvs = props.vsmetadata.length;
     const tools = reactive<Dictionary<boolean>>({});
 
+    onBeforeUnmount(() => onBack());
+
     for (const key in props.alltools) {
 	tools[key] = props.tools ? props.tools.indexOf(key) >= 0 : false;
     }