different default engine/model for commands

README.md

@@ -73,6 +73,7 @@ To use Internet search you need a [Tavily API key](https://app.tavily.com/home).
 
 ## DONE
 
+- [x] Different default engine/model for commands
 - [x] Text attachments (TXT, PDF, DOCX, PPTX, XLSX)
 - [x] MistralAI function calling
 - [x] Auto-update

css/editor.css

@@ -0,0 +1,39 @@
+
+dialog.editor header, dialog.editor main, dialog.editor footer {
+  background-color: white;
+  border: none;
+}
+
+dialog.editor header {
+  font-size: 10pt;
+}
+
+dialog.editor main {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+dialog.editor footer {
+  justify-content: flex-start;
+  flex-direction: row-reverse;
+}
+
+dialog.editor footer button {
+  margin: 0px 4px;
+  font-size: 9.5pt;
+}
+
+dialog.editor form .group label,
+dialog.editor form .group input,
+dialog.editor form .group textarea,
+dialog.editor form .group select {
+  font-size: 9.5pt;
+}
+
+dialog.editor form .group label {
+  min-width: 100px;
+}
+
+dialog.editor textarea {
+  height: 120px;
+}

defaults/settings.json

@@ -21,6 +21,10 @@
       "fontSize": 3
     }
   },
+  "commands": {
+    "engine": "",
+    "model": ""
+  },
   "shortcuts": {
     "chat": {
       "key": "Space",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "witsy",
   "productName": "Witsy",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Witsy: desktop AI assistant",
   "repository": {
     "type": "git",

src/automations/commander.ts

@@ -147,8 +147,8 @@ export const runCommand = async (app: App, llm: LlmEngine, textId: string, comma
     // extract what we need
     const template = command.template;
     const action = command.action;
-    const engine = command.engine || config.llm.engine;
-    const model = command.model || config.getActiveModel();
+    const engine = command.engine || config.commands.engine || config.llm.engine;
+    const model = command.model || config.commands.model || config.getActiveModel();
     // const temperature = command.temperature;
 
     // build prompt

src/screens/CommandDefaults.vue

@@ -0,0 +1,76 @@
+<template>
+  <dialog class="editor">
+    <form method="dialog">
+      <header>
+        <div class="title">Commands defaults</div>
+      </header>
+      <main>
+        <div class="group">
+          <label>LLM Provider</label>
+          <select v-model="engine" @change="onChangeEngine">
+            <option value="">Use global default</option>
+            <option value="openai">OpenAI</option>
+            <option value="ollama">Ollama</option>
+            <option value="anthropic">Anthropic</option>
+            <option value="mistralai">MistralAI</option>
+            <option value="groq">Groq</option>
+          </select>
+        </div>
+        <div class="group">
+          <label>LLM Model</label>
+          <select v-model="model">
+            <option value="" v-if="!models.length">Use global default</option>
+            <option v-for="m in models" :key="m.id" :value="m.id">{{ m.name }}</option>
+          </select>
+        </div>
+      </main>
+      <footer>
+        <button @click="onSave" class="default">Save</button>
+        <button @click="onCancel" formnovalidate>Cancel</button>
+      </footer>
+    </form>
+  </dialog>
+</template>
+
+<script setup>
+
+import { ref, computed, watch } from 'vue'
+import { store } from '../services/store'
+
+const engine = ref(null)
+const model = ref(null)
+
+const models = computed(() => {
+  if (!engine.value || engine.value == '') return []
+  return store.config.engines[engine.value].models.chat
+})
+
+const load = () => {
+  engine.value = store.config.commands?.engine || ''
+  model.value = store.config.commands?.model || ''
+}
+
+const onChangeEngine = () => {
+  if (engine.value == '') model.value = ''
+  else model.value = store.config.engines[engine.value].models.chat?.[0]?.id
+}
+
+const onCancel = () => {
+  load()
+}
+
+const onSave = (event) => {
+  store.config.commands.engine = engine.value
+  store.config.commands.model = model.value
+  store.saveSettings()
+}
+
+defineExpose({ load })
+
+</script>
+
+<style scoped>
+@import '../../css/dialog.css';
+@import '../../css/form.css';
+@import '../../css/editor.css';
+</style>

src/screens/CommandEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <dialog class="command">
+  <dialog class="editor">
     <form method="dialog">
       <header>
         <div class="title">Command details</div>
@@ -28,7 +28,7 @@
         <div class="group">
           <label>LLM Provider</label>
           <select v-model="engine" @change="onChangeEngine">
-            <option value="">Default</option>
+            <option value="">Use commands default</option>
             <option value="openai">OpenAI</option>
             <option value="ollama">Ollama</option>
             <option value="anthropic">Anthropic</option>
@@ -39,7 +39,7 @@
         <div class="group">
           <label>LLM Model</label>
           <select v-model="model">
-            <option value="" v-if="!models.length">Default</option>
+            <option value="" v-if="!models.length">Use commands default</option>
             <option v-for="m in models" :key="m.id" :value="m.id">{{ m.name }}</option>
           </select>
         </div>
@@ -81,8 +81,7 @@ const engine = ref(null)
 const model = ref(null)
 
 const models = computed(() => {
-  if (!engine.value) return []
-  if (engine.value == '_default') return []
+  if (!engine.value || engine.value == '') return []
   return store.config.engines[engine.value].models.chat
 })
 
@@ -164,61 +163,23 @@ const onSave = (event) => {
 <style scoped>
 @import '../../css/dialog.css';
 @import '../../css/form.css';
+@import '../../css/editor.css';
 </style>
 
 <style scoped>
 
-dialog.command header, dialog.command main, dialog.command footer {
-  background-color: white;
-  border: none;
-}
-
-dialog.command header {
-  font-size: 10pt;
-}
-
-dialog.command main {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-dialog.command footer {
-  justify-content: flex-start;
-  flex-direction: row-reverse;
-}
-
-dialog.command footer button {
-  margin: 0px 4px;
-  font-size: 10pt;
-}
-
-dialog.command form .group label,
-dialog.command form .group input,
-dialog.command form .group textarea,
-dialog.command form .group select {
-  font-size: 10pt;
-}
-
-dialog.command form .group label {
-  min-width: 100px;
-}
-
-dialog.command textarea {
-  height: 120px;
-}
-
-dialog.command form .group input.icon {
+dialog.editor form .group input.icon {
   flex: 0 0 32px;
   text-align: center;
 }
 
-dialog.command form .group input.shortcut {
+dialog.editor form .group input.shortcut {
   flex: 0 0 32px;
   text-align: center;
   text-transform: uppercase;
 }
 
-.windows dialog.command .icon {
+.windows dialog.editor .icon {
   font-family: 'NotoColorEmojiLimited';
   font-size: 9pt;
 }

src/settings/SettingsCommands.vue

@@ -25,7 +25,11 @@
       <button @click.prevent="onNew">New</button>
       <button @click.prevent="onEdit(selected)" :disabled="!selected">Edit</button>
       <button @click.prevent="onDelete" :disabled="!selected">Delete</button>
+      <div class="right">
+        <button @click.prevent="onDefaults">Defaults</button>
+      </div>
     </div>
+    <CommandDefaults id="defaults" ref="defaults" @command-defaults-modified="onCommandModified"/>
     <CommandEditor id="editor" :command="edited" @command-modified="onCommandModified"/>
   </div>
 </template>
@@ -37,11 +41,13 @@ import { v4 as uuidv4 } from 'uuid'
 import { ref, computed } from 'vue'
 import { store } from '../services/store'
 import { newCommand, saveCommands } from '../services/commands'
+import CommandDefaults from '../screens/CommandDefaults.vue'
 import CommandEditor from '../screens/CommandEditor.vue'
 
 const commands = ref(null)
 const selected = ref(null)
 const edited = ref(null)
+const defaults = ref(null)
 
 const visibleCommands = computed(() => commands.value?.filter(command => command.state != 'deleted'))
 
@@ -60,6 +66,11 @@ const action = (action) => {
   if (action == 'clipboard_copy') return 'Copy to Clipboard'
 }
 
+const onDefaults = () => {
+  defaults.value.load()
+  document.getElementById('defaults').showModal()
+}
+
 const onSelect = (command) => {
   selected.value = command
 }
@@ -243,10 +254,16 @@ input[type=checkbox] {
 
 .actions {
   margin-top: 8px;
+  display: flex;
 }
 
 .actions button:first-child {
   margin-left: 0px;
 }
 
+.actions .right {
+  flex: 1;
+  text-align: right;
+}
+
 </style>

src/types/config.d.ts

@@ -4,6 +4,7 @@ import { Shortcut } from './index.d'
 export interface Configuration {
   general: GeneralConfig
   llm: LLMConfig
+  commands: CommandsConfig
   instructions: InstructionsConfig
   appearance: AppearanceConfig
   shortcuts: ShortcutsConfig
@@ -34,6 +35,11 @@ interface AppearanceConfig {
   chat: ChatAppearance
 }
 
+interface CommandsConfig {
+  engine: string
+  model: string
+}
+
 interface ChatAppearance {
   theme: string
   fontSize: number