feat: cleanup unused template vars; outline prompt in red when any ar…

…e missing

src/components/TabPages/Presets/Presets__TextArea.svelte

@@ -4,7 +4,7 @@
  import { chatState } from '$stores/chatState';
  import SYSTEM_PROMPTS from '../../../preset-prompts';
  import { appState } from '$stores/stores';
- import { refreshTemplateVars } from '$stores/templates';
+ import { refreshTemplateVars, templateIncomplete } from '$stores/templates';
 
  export let value;
 
@@ -68,6 +68,7 @@
  refreshTemplateVars();
  }}
  class="bg-core-color-darker2 text-accent-color-lighter2"
+ class:template_incomplete={$templateIncomplete}
  {...$$restProps}
  />
  <div class="mt-4 grid grid-cols-6 gap-4 place-content-center">
@@ -106,20 +107,7 @@
  opacity: 0.25;
  }
 
- // button {
- // @apply transition-all;
- // @apply duration-300;
- // @apply rounded-md;
-
- // background-color: var(--accent-color-darker3);
-
- // flex: auto;
-
- // &:disabled {
- // opacity: 0.5;
- // }
- // &:hover {
- // opacity: 0.5;
- // }
- // }
+ .template_incomplete {
+ outline: 3px inset rgb(161, 0, 0) !important;
+ }
 </style>

src/stores/templates.ts

@@ -104,16 +104,21 @@ export function refreshTemplateVars() {
  return tv;
  });
  }
-
- // TODO: cleanup non-existent ones
-
- // tlv.find((tv) => {
- // if (tv.key === tok) {
- // return true;
- // }
- // console.log(' =========== > adding', tok);
- // templateVariables.push({ key: tok, value: 'ZZZ' });
- // });
  }
- console.log('refreshTemplateVars - ', get(templateVariables));
+ // cull templateVariables that are not in tlv
+ templateVariables.update((t) =>
+ t.filter((tv) => {
+ return template_tokens.includes(tv.key);
+ })
+ );
 }
+
+export const templateIncomplete = derived(
+ templateVariables,
+ ($templateVariables) => {
+ // debugger;
+ // console.log('templateIncomplete - ', $templateVariables);
+ // debugger;
+ return $templateVariables.filter((i) => !i.value).length;
+ }
+);