@christianriedl/utils 1.0.134 → 1.0.136

package/dist/iOpenAI.d.ts

@@ -79,6 +79,7 @@ export interface IOpenAIServiceWithTools extends IOpenAIService {
     addFileSearchTool(label: string, tool: IFileSearchTool): 'notfound' | 'exists' | 'changed';
     addWebSearchTool(label: string, tool: IWebSearchTool): void;
     addFunctionTool(tool: IFunctionTool, toolFunction: ToolFunction): void;
+    getToolFunctions(tool: string): Promise<IResponseResult>;
 }
 export interface IVectorStore {
     id: string;

package/package.json

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

package/src/components/OpenAIConfig.vue

@@ -3,6 +3,11 @@
     import { appConfigSymbol, AppConfig, Dictionary } from '@christianriedl/utils';
     import { getOpenAISymbol, IOpenAIServiceWithVectorStore, IOpenAIAppConfig, IOpenAIOptions, ITool } from '@christianriedl/utils';
 
+    interface IFunction {
+	name: string;
+	description: string;
+    };
+
     const props = defineProps<{ tools?: string[], ismobile: boolean }>();
     const emits = defineEmits<{ (e: 'use', tools: string[], persist: boolean): void, (e: 'back'): void }>();
 
@@ -24,6 +29,9 @@
     const vectorStoreFiles = ref<string[]>([]);
     const selectedVectorStoreName = ref('');
     const selectedVectorStoreFile = ref('');
+    const showFunctions = ref(false);
+    const toolName = ref('');
+    const toolFunctions = reactive<IFunction[]>([]);
     let fileHandle: FileSystemFileHandle | null = null;
 
     initializeTools();
@@ -66,6 +74,15 @@
     function onUseChange() {
 	useChanged.value = true;
     }
+    async function showTools(serverLabel: string) {
+	toolName.value = serverLabel;
+	const res = await openAI.getToolFunctions(serverLabel);
+	if (res.json) {
+	    const funcs = res.json.tools as IFunction[];
+	    toolFunctions.splice(0, toolFunctions.length, ...funcs);
+	    showFunctions.value = true;
+	}
+    }
     function onSave() {
 	const persist = window.confirm('Do you want to persist the changes?');
 	if (toolsChanged.value) {
@@ -216,7 +233,7 @@
 	<template v-for="(tool, key) in tools">
 	    <v-row v-if="tool.type == 'mcp'" dense align="center">
 		<v-col cols="2">
-		    <v-text-field v-model="tool.server_label" type="string "hide-details disabled  label="mcp" density="compact" @change="onToolChange"></v-text-field>
+		    <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="4">
 		    <v-text-field v-model="tool.server_url" type="string" hide-details clearable label="Url" density="compact" @change="onToolChange"></v-text-field>
@@ -224,11 +241,14 @@
 		<v-col cols="3">
 		    <v-text-field v-model="tool.server_description" type="string" hide-details clearable label="Description" density="compact" @change="onToolChange"></v-text-field>
 		</v-col>
-		<v-col cols="2">
-		    <v-select v-model="tool.require_approval" :items="mcpApprovals" hide-details 
+		<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">
 		    </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-col cols="1">
 		    <v-checkbox v-model="use[key]" label="Use" hide-details density="compact" @update:modelValue="onUseChange"></v-checkbox>
 		</v-col>
@@ -268,20 +288,17 @@
 	</template>
 	<v-row dense align="center">
 	    <v-col cols="2">
-		<v-btn class="bg-office" @click="emits('back')">
-		    BACK
+		<v-btn class="bg-office" @click="emits('back')">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">
-		    SAVE
+		<v-btn :disabled="!optionsChanged && !toolsChanged" class="bg-office" @click="onSave">SAVE
 		    <v-icon icon="$save"></v-icon>
 		</v-btn>
 	    </v-col>
 	    <v-col cols="2">
-		<v-btn :disabled="!useChanged" class="bg-office" @click="onSaveUsage">
-		    SAVE TOOL USE
+		<v-btn :disabled="!useChanged" class="bg-office" @click="onSaveUsage">SAVE TOOL USE
 		    <v-icon icon="$save"></v-icon>
 		</v-btn>
 	    </v-col>
@@ -314,5 +331,21 @@
 		</v-col>
 	    </v-row>
 	</template>
+	<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 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">
+			<v-btn class="bg-office" @click="showFunctions = false">BACK
+			    <v-icon icon="$back"></v-icon>
+			</v-btn>
+		    </v-col>
+		</v-row>
+	    </v-container>
+	</v-dialog>
     </v-container>
 </template>