Bug fixes and improvements (#1104)

- fix image filter
- fix json download on firefox
- add placeholder help in template editor

Author: sceuick

common/image-util.ts

@@ -6,6 +6,7 @@ export function filterImageModels(
   models: ImageModel[],
   tier?: Pick<AppSchema.SubscriptionTier, 'imagesAccess'>
 ) {
+  if (!models) return []
   if (user?.admin) return models
 
   const list = models.map((m) => ({ ...m, override: '', host: '' }))

web/pages/Character/DownloadModal.tsx

@@ -79,6 +79,13 @@ export const DownloadModal: Component<{
     )
   )
 
+  const objectUrl = createMemo(() => {
+    const url = URL.createObjectURL(
+      new Blob([charToJson(props.char || char()!, format())], { type: 'text/json' })
+    )
+    return url
+  })
+
   return (
     <Modal
       show={props.show && !!char()}
@@ -91,12 +98,7 @@ export const DownloadModal: Component<{
           </Button>
           <Switch>
             <Match when={fileType() === 'json'}>
-              <a
-                href={`data:text/json:charset=utf-8,${encodeURIComponent(
-                  charToJson(props.char || char()!, format())
-                )}`}
-                download={`${char()!.name}.json`}
-              >
+              <a href={objectUrl()} download={`${char()!.name}.json`}>
                 <Button>
                   <Save /> Download (JSON)
                 </Button>

web/shared/PromptEditor/Definitions.tsx

@@ -0,0 +1,111 @@
+import { Component, For, JSX, Match, Switch, createMemo } from 'solid-js'
+import { FormLabel } from '../FormLabel'
+import { TitleCard } from '../Card'
+import { AppSchema } from '/common/types/schema'
+import { RootModal } from '../Modal'
+import { Interp, InterpAll } from './types'
+
+const helpers: { [key in InterpAll | string]?: JSX.Element | string } = {
+  char: 'Character name',
+  user: `Your impersonated character's name. Your profile name if you aren't impersonating a character`,
+  scenario: `Your main character's scenario`,
+  personality: `The personality of the replying character`,
+  example_dialogue: `The example dialogue of the replying character`,
+  history: `(Required, or use \`#each msgs\`) Aliases: \`messages\` \`msgs\`. Chat history.`,
+
+  'json.variable name': 'A value from your JSON schema. E.g. `{{json.name of my value}}`',
+  system_prompt: `(For instruct models like Turbo, GPT-4, Claude, etc). "Instructions" for how the AI should behave. E.g. "Enter roleplay mode. You will write the {{char}}'s next reply ..."`,
+  ujb: '(Aka: `{{jailbreak}}`) Similar to `system_prompt`, but typically at the bottom of the prompt',
+
+  impersonating: `Your character's personality. This only applies when you are using the "character impersonation" feature.`,
+  chat_age: `The age of your chat (time elapsed since chat created)`,
+  idle_duration: `The time elapsed since you last sent a message`,
+  all_personalities: `Personalities of all characters in the chat EXCEPT the main character.`,
+  post: 'The "post-amble" text. This gives specific instructions on how the model should respond. E.g. Typically reads: `{{char}}:`',
+
+  insert:
+    "(Aka author's note) Insert text at a specific depth in the prompt. E.g. `{{#insert=4}}This is 4 rows from the bottom{{/insert}}`",
+
+  memory: `Text retrieved from your Memory Book(s)`,
+
+  longterm_memory:
+    '(Aka `chat_embed`) Text retrieved from chat history embeddings. Adjust the token budget in the preset `Memory` section.',
+  user_embed: 'Text retrieved from user-specified embeddings (Articles, PDFs, ...)',
+  roll: 'Produces a random number. Defaults to "d20". To use a custom number: {{roll [number]}}. E.g.: {{roll 1000}}',
+  random:
+    'Produces a random word from a comma-separated list. E.g.: `{{random happy, sad, jealous, angry}}`',
+  'each bot': (
+    <>
+      Supported properties: <code>{`{{.name}} {{.persona}}`}</code>
+      <br />
+      Example: <code>{`{{#each bot}}{{.name}}'s personality: {{.persona}}{{/each}}`}</code>
+    </>
+  ),
+  'each message': (
+    <>
+      {' '}
+      Supported properties: <code>{`{{.msg}} {{.name}} {{.isuser}} {{.isbot}} {{.i}}`}</code> <br />
+      You can use <b>conditions</b> for isbot and isuser. E.g.{' '}
+      <code>{`{{#if .isuser}} ... {{/if}}`}</code>
+      <br />
+      Full example:{' '}
+      <code>{`{{#each msg}}{{#if .isuser}}User: {{.msg}}{{/if}}{{#if .isbot}}Bot: {{.msg}}{{/if}}{{/each}}`}</code>
+    </>
+  ),
+  'each chat_embed': (
+    <>
+      Supported properties: <code>{`{{.name}} {{.text}}`}</code>
+      <br />
+      Example: <code>{`{{#each chat_embed}}{{.name}} said: {{.text}}{{/each}}`}</code>
+    </>
+  ),
+  lowpriority: (
+    <>
+      Text that is only inserted if there still is token budget remaining for it after inserting
+      conversation history.
+      <br />
+      Example:{' '}
+      <code>{`{{#if example_dialogue}}{{#lowpriority}}This is how {{char}} speaks: {{example_dialogue}}{{/lowpriority}}{{/if}}`}</code>
+    </>
+  ),
+}
+
+export const DefinitionsModal: Component<{
+  show: boolean
+  close: () => void
+  interps: Interp[]
+  inherit?: Partial<AppSchema.GenSettings>
+}> = (props) => {
+  const items = createMemo(() => {
+    const all = Object.entries(helpers)
+    const entries = all.filter(([interp]) => props.interps.includes(interp as any))
+
+    return entries
+  })
+
+  return (
+    <RootModal
+      show={props.show}
+      close={props.close}
+      title={<div>Placeholder Definitions</div>}
+      maxWidth="half"
+    >
+      <div class="flex w-full flex-col gap-1 text-sm">
+        <For each={items()}>
+          {([interp, help]) => (
+            <TitleCard>
+              <Switch>
+                <Match when={typeof help === 'string'}>
+                  <FormLabel label={<b>{interp}</b>} helperMarkdown={help as string} />
+                </Match>
+                <Match when>
+                  <FormLabel label={<b>{interp}</b>} helperText={help} />
+                </Match>
+              </Switch>
+            </TitleCard>
+          )}
+        </For>
+      </div>
+    </RootModal>
+  )
+}

web/shared/PromptEditor/SelectTemplate.tsx

@@ -1,12 +1,15 @@
 import { Component, Match, Switch, createEffect, createMemo, createSignal } from 'solid-js'
 import { RootModal } from '../Modal'
-import { RefreshCcw } from 'lucide-solid'
+import { HelpCircle, RefreshCcw } from 'lucide-solid'
 import Button from '../Button'
 import { templates } from '../../../common/presets/templates'
 import Select from '../Select'
 import TextInput from '../TextInput'
 import { presetStore, toastStore } from '/web/store'
 import { PromptSuggestions, onPromptAutoComplete, onPromptKey } from './Suggestions'
+import { DefinitionsModal } from './Definitions'
+import { Interp, Placeholder, placeholders, v2placeholders } from './types'
+import { Pill } from '../Card'
 
 const builtinTemplates = Object.keys(templates).map((key) => ({
   label: `(Built-in) ${key}`,
@@ -30,6 +33,7 @@ export const SelectTemplate: Component<{
   const [builtin, setBuiltin] = createSignal(templates.Alpaca)
   const [filter, setFilter] = createSignal('')
   const [autoOpen, setAutoOpen] = createSignal(false)
+  const [help, showHelp] = createSignal(false)
 
   const templateOpts = createMemo(() => {
     const base = Object.entries(templates).reduce(
@@ -89,6 +93,14 @@ export const SelectTemplate: Component<{
     return opts.length
   }, builtinTemplates.length)
 
+  const usable = createMemo(() => {
+    type Entry = [Interp, Placeholder]
+    const all = Object.entries(placeholders) as Entry[]
+
+    all.push(...(Object.entries(v2placeholders) as Entry[]))
+    return all
+  })
+
   const Footer = (
     <>
       <Button schema="secondary" onClick={props.close}>
@@ -173,69 +185,84 @@ export const SelectTemplate: Component<{
   )
 
   return (
-    <RootModal
-      title={'Prompt Templates'}
-      show={props.show}
-      close={props.close}
-      footer={Footer}
-      maxWidth="half"
-    >
-      <div class="relative flex flex-col gap-4 text-sm">
-        <div class="flex gap-1">
+    <>
+      <RootModal
+        title={
+          <div class="flex gap-1">
+            Prompt Templates{' '}
+            <Pill small onClick={() => showHelp(true)}>
+              Help <HelpCircle class="ml-1" size={16} />
+            </Pill>
+          </div>
+        }
+        show={props.show}
+        close={props.close}
+        footer={Footer}
+        maxWidth="half"
+      >
+        <div class="relative flex flex-col gap-4 text-sm">
+          <div class="flex gap-1">
+            <TextInput
+              fieldName="filter"
+              placeholder="Filter templates"
+              onChange={(ev) => setFilter(ev.currentTarget.value)}
+              parentClass="w-full"
+            />
+            <Button>
+              <RefreshCcw onClick={presetStore.getTemplates} />
+            </Button>
+          </div>
+          <div class="h-min-[6rem]">
+            <Select
+              fieldName="templateId"
+              items={options().filter((opt) => opt.label.toLowerCase().includes(filter()))}
+              value={opt()}
+              onChange={(ev) => {
+                setOpt(ev.value)
+
+                const matches = state.templates.filter((t) => t.name.startsWith(`Custom ${opt()}`))
+                const name = ev.label.startsWith('(Built-in)')
+                  ? matches.length > 0
+                    ? `Custom ${opt()} #${matches.length + 1}`
+                    : `Custom ${opt()}`
+                  : templateOpts()[ev.value].name
+                if (ev.label.startsWith('(Built-in)')) {
+                }
+
+                setName(name)
+                setTemplate(templateOpts()[ev.value].template)
+              }}
+            />
+          </div>
+          <PromptSuggestions
+            onComplete={(opt) => onPromptAutoComplete(ref, opt)}
+            open={autoOpen()}
+            close={() => setAutoOpen(false)}
+            jsonValues={{ example: '', 'another long example': '', response: '' }}
+          />
           <TextInput
-            fieldName="filter"
-            placeholder="Filter templates"
-            onChange={(ev) => setFilter(ev.currentTarget.value)}
-            parentClass="w-full"
+            fieldName="templateName"
+            value={templateName()}
+            onChange={(ev) => setName(ev.currentTarget.value)}
           />
-          <Button>
-            <RefreshCcw onClick={presetStore.getTemplates} />
-          </Button>
-        </div>
-        <div class="h-min-[6rem]">
-          <Select
-            fieldName="templateId"
-            items={options().filter((opt) => opt.label.toLowerCase().includes(filter()))}
-            value={opt()}
-            onChange={(ev) => {
-              setOpt(ev.value)
-
-              const matches = state.templates.filter((t) => t.name.startsWith(`Custom ${opt()}`))
-              const name = ev.label.startsWith('(Built-in)')
-                ? matches.length > 0
-                  ? `Custom ${opt()} #${matches.length + 1}`
-                  : `Custom ${opt()}`
-                : templateOpts()[ev.value].name
-              if (ev.label.startsWith('(Built-in)')) {
-              }
-
-              setName(name)
-              setTemplate(templateOpts()[ev.value].template)
-            }}
+          <TextInput
+            ref={(r) => (ref = r)}
+            fieldName="template"
+            value={template()}
+            isMultiline
+            onChange={(ev) => setTemplate(ev.currentTarget.value)}
+            class="font-mono text-xs"
+            onKeyDown={(ev) => onPromptKey(ev as any, () => setAutoOpen(true))}
           />
         </div>
-        <PromptSuggestions
-          onComplete={(opt) => onPromptAutoComplete(ref, opt)}
-          open={autoOpen()}
-          close={() => setAutoOpen(false)}
-          jsonValues={{ example: '', 'another long example': '', response: '' }}
-        />
-        <TextInput
-          fieldName="templateName"
-          value={templateName()}
-          onChange={(ev) => setName(ev.currentTarget.value)}
-        />
-        <TextInput
-          ref={(r) => (ref = r)}
-          fieldName="template"
-          value={template()}
-          isMultiline
-          onChange={(ev) => setTemplate(ev.currentTarget.value)}
-          class="font-mono text-xs"
-          onKeyDown={(ev) => onPromptKey(ev as any, () => setAutoOpen(true))}
-        />
-      </div>
-      <div class="flex justify-end gap-2"></div>
-    </RootModal>
+        <div class="flex justify-end gap-2"></div>
+      </RootModal>
+
+      <DefinitionsModal
+        interps={usable().map((item) => item[0])}
+        show={help()}
+        close={() => showHelp(false)}
+      />
+    </>
   )
 }