@christianriedl/utils 1.0.135 → 1.0.137

package/package.json

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

package/src/components/OpenAI.vue

@@ -24,9 +24,10 @@
     const isUpload = ref(false);
     const showConfig = ref(false);
     const files = ref<File[]>([]);
-    const dataUrl = ref("");
+    const imageUrl = ref("");
     const camera = ref<InstanceType<typeof Camera>>();
     const htmlText = ref('');
+    const tools = ref(props.tools);
 
     onUnmounted(() => {
 	openAI.clearContext();
@@ -40,18 +41,18 @@
 	isUpload.value = false;
 	let answer: IResponseResult;
 	if (camera.value) {
-	    dataUrl.value = await camera.value.snapshot() as string;
+	    imageUrl.value = await camera.value.snapshot() as string;
 	    camera.value.stop();
 	    camera.value = undefined;
 	    isCamera.value = false;
 	}
-	if (dataUrl.value) {
-	    answer = await openAI.response(question.value, undefined, dataUrl.value);
-	    dataUrl.value = "";
+	if (imageUrl.value) {
+	    answer = await openAI.response(question.value, undefined, imageUrl.value);
+	    imageUrl.value = "";
 	}
 	else {
-	    if (props.tools !== undefined) {
-		answer = await openAI.response(question.value, props.tools);
+	    if (tools.value !== undefined) {
+		answer = await openAI.response(question.value, tools.value);
 	    }
 	    else {
 		answer = await openAI.response(question.value);
@@ -67,7 +68,6 @@
 		}
 	    }
 	    if (openAI.options.outputFormat == 'html') {
-
 		const tempDiv = document.createElement('div');
 		if (answer.text.startsWith('```html\n')) {
 		    if (answer.text.endsWith('\n```')) {
@@ -121,13 +121,14 @@
 	    const reader = new FileReader();
 	    reader.addEventListener("load", async () => {
 		// convert image file to base64 string
-		dataUrl.value = reader.result as string;
+		imageUrl.value = reader.result as string;
 	    }, false,);
 	    reader.readAsDataURL(files.value[0]);
 	}
     }
-    function onUse(tools: string[], persist: boolean) {
-	emits('use', tools, persist);
+    function onUse(usetools: string[], persist: boolean) {
+	tools.value = usetools;
+	emits('use', usetools, persist);
     }
     // Move to some library
     async function markdownToHtml(markdownText: string): Promise<string> {
@@ -189,7 +190,7 @@
 		</v-file-input>
 	    </v-col>
 	    <v-col cols="6">
-		<img width="100%" :src="dataUrl">
+		<img width="100%" :src="imageUrl">
 	    </v-col>
 	</v-row>
 	<v-row v-if="htmlText" dense >
@@ -201,7 +202,7 @@
 	    <v-col cols="12">{{line}}</v-col>
 	</v-row>
 	<v-dialog v-model="showConfig" :fullscreen="isMobile">
-	    <OpenAIConfig :tools="props.tools" :ismobile="isMobile" @use="onUse" @back="showConfig=false"></OpenAIConfig>
+	    <OpenAIConfig :tools="tools" :ismobile="isMobile" @use="onUse" @back="showConfig=false"></OpenAIConfig>
 	</v-dialog>
     </v-container>
 </template>

package/src/components/OpenAIConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { inject, ref, reactive } from 'vue';
     import { appConfigSymbol, AppConfig, Dictionary } from '@christianriedl/utils';
-    import { getOpenAISymbol, IOpenAIServiceWithVectorStore, IOpenAIAppConfig, IOpenAIOptions, ITool } from '@christianriedl/utils';
+    import { getOpenAISymbol, IOpenAIServiceWithVectorStore, IOpenAIAppConfig, IOpenAIOptions, ITool, IMcpTool, IFileSearchTool } from '@christianriedl/utils';
 
     interface IFunction {
 	name: string;
@@ -30,8 +30,8 @@
     const selectedVectorStoreName = ref('');
     const selectedVectorStoreFile = ref('');
     const showFunctions = ref(false);
-    const toolName = ref<>('');
-    const functions = ref<IFunction[]>([]);
+    const toolName = ref('');
+    const toolFunctions = reactive<IFunction[]>([]);
     let fileHandle: FileSystemFileHandle | null = null;
 
     initializeTools();
@@ -78,7 +78,8 @@
 	toolName.value = serverLabel;
 	const res = await openAI.getToolFunctions(serverLabel);
 	if (res.json) {
-	    functions.value = res.json as IFunction[];
+	    const funcs = res.json.tools as IFunction[];
+	    toolFunctions.splice(0, toolFunctions.length, ...funcs);
 	    showFunctions.value = true;
 	}
     }
@@ -87,6 +88,7 @@
 	if (toolsChanged.value) {
 	    for (const key in fileSearch) {
 		const vsNames = fileSearch[key];
+		tools[key].vector_store_ids.splice(0, tools[key].vector_store_ids.length);
 		for (let i = 0; i < vsNames.length; i++) {
 		    tools[key].vector_store_ids[i] = openAI.vectorStore![vsNames[i]].id;
 		}
@@ -118,6 +120,29 @@
 	emits('use', useTools, persist);
 	useChanged.value = false;
     }
+    function onAddMcp() {
+	const name = window.prompt('Enter MCP name:');
+	if (name && name.length > 0) {
+	    if (tools[name]) {
+		alert('Tool with this name already exists, please choose another name !');
+		return;
+	    }
+	    const mcpTool: IMcpTool = { type: 'mcp', server_label: name, server_url: '<set url>', require_approval: 'never' };
+	    tools[name] = mcpTool;
+	}
+    }
+    function onAddSearch() {
+	const name = window.prompt('Enter File search name:');
+	if (name && name.length > 0) {
+	    if (tools[name]) {
+		alert('Tool with this name already exists, please choose another name !');
+		return;
+	    }
+	    const searchTool: IFileSearchTool = { type: 'file_search', vector_store_ids: [] };
+	    tools[name] = searchTool;
+	    fileSearch[name] = [];
+	}
+    }
     function vectorStoreSelected() {
 	selectedVectorStoreFile.value = '';
 	const vs = openAI.vectorStore![selectedVectorStoreName.value];
@@ -245,8 +270,8 @@
 		      density="compact" label="Approval" @update:modelValue="onToolChange">
 		    </v-select>
 		</v-col>
-		<v-col v-if="!props.isMobile" cols="1">
-		    <v-btn variant="text" prepend-icon="$search"  @click="showTools(tool.server_label))">TOOLS  </v-btn>
+		<v-col v-if="!props.ismobile" cols="1">
+		    <v-btn variant="text" prepend-icon="$search" @click="showTools(tool.server_label)">TOOLS</v-btn>
 		</v-col>
 		<v-col cols="1">
 		    <v-checkbox v-model="use[key]" label="Use" hide-details density="compact" @update:modelValue="onUseChange"></v-checkbox>
@@ -301,6 +326,16 @@
 		    <v-icon icon="$save"></v-icon>
 		</v-btn>
 	    </v-col>
+	    <v-col cols="2">
+		<v-btn class="bg-office" @click="onAddMcp">ADD MCP
+		    <v-icon icon="$plus"></v-icon>
+		</v-btn>
+	    </v-col>
+	    <v-col cols="2">
+		<v-btn class="bg-office" @click="onAddSearch">ADD SEARCH
+		    <v-icon icon="$plus"></v-icon>
+		</v-btn>
+	    </v-col>
 	</v-row>
 	<template v-if="!props.ismobile && openAI.vectorStore">
 	    <v-divider></v-divider>
@@ -333,9 +368,9 @@
 	<v-dialog v-model="showFunctions">
 	    <v-container fluid class="bg-office overflow-y-auto">
 		<h4>{{toolName + " functions"}}</h4>
-		<v-row dense align="center" v-for="func in functions" v-key="func.name">
-		    <v-col cols="5">{{func.name}}</v-col>
-		    <v-col cols="7">{{func.description}}</v-col>
+		<v-row dense align="center" v-for="func in toolFunctions" :key="func.name">
+		    <v-col cols="4">{{func.name}}</v-col>
+		    <v-col cols="8">{{func.description}}</v-col>
 		</v-row>
 		<v-row dense align="center">
 		    <v-col cols="2">