Fix conditional sub-block rendering (#1039)

- rename templates from root modal - fix novel preset templates - fix conditional sub-block rendering - open menu by default on desktop * add missing fields to simple
agnaistic · Oct 3, 2024 · 7d240d5 · 7d240d5
1 parent a596202
commit 7d240d5
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 79 deletions.
diff --git a/common/adapters.ts b/common/adapters.ts
@@ -52,6 +52,16 @@ export const MODE_SETTINGS: {
     streamResponse: true,
     temp: true,
     localRequests: true,
+    openRouterModel: true,
+    oaiModel: true,
+    thirdPartyModel: true,
+    claudeModel: true,
+    novelModel: true,
+    mistralModel: true,
+    stopSequences: true,
+    thirdPartyKey: true,
+    thirdPartyFormat: true,
+    thirdPartyUrl: true,
   },
   advanced: {},
 }

diff --git a/common/presets/novel.ts b/common/presets/novel.ts
@@ -23,16 +23,7 @@ export const novelPresets = {
     disabledSamplers: [6, 5],
     streamResponse: true,
     typicalP: 1,
-    gaslight: `{{char}} Memory: {{memory}}
-Description of {{char}}: {{personality}}
-
-How {{char}} speaks: {{example_dialogue}}
-
-[ Title: Dialogue between {{char}} and {{user}}; Tags: conversation; Genre: online roleplay ]
-[ Style: chat ]
-Summary: {{scenario}}
-***
-`,
+    gaslight: templates.NovelAI,
   },
   novel_clio: {
     name: 'Clio - Talker C',
@@ -52,14 +43,7 @@ Summary: {{scenario}}
     topA: 0.075,
     order: [1, 3, 4, 0, 2],
     streamResponse: true,
-    gaslight: `{{char}} Memory: {{memory}}
-Description of {{char}}: {{personality}}
-
-How {{char}} speaks: {{example_dialogue}}
-
-[ Title: Dialogue between {{char}} and {{user}}; Tags: conversation; Genre: online roleplay ]
-***
-Summary: {{scenario}}`,
+    gaslight: templates.NovelAI,
   },
   novel_20BC: {
     name: '20BC+',

diff --git a/common/presets/templates.ts b/common/presets/templates.ts
@@ -144,11 +144,9 @@ Then the roleplay chat between "{{char}}" and "{{user}}" begins.
 
 {{#each msg}}{{#if .isbot}}### Response:\n{{.name}}: {{.msg}}{{/if}}{{#if .isuser}}### Instruction:\n{{.name}}: {{.msg}}{{/if}}
 {{/each}}
-{{#if ujb}}### Instruction:
-{{ujb}}
-{{/if}}
+
 ### Response:
-  {{post}}`,
+{{#if ujb}}({{value}}) {{/if}}{{post}}`,
   Vicuna: neat`
 {{#if system_prompt}}{{system_prompt}}{{else}}Write "{{char}}'s" next reply in a fictional roleplay chat between "{{user}}" and "{{char}}".{{/else}}
 {{/if}}
@@ -185,12 +183,13 @@ Description of {{char}}:
 How {{char}} speaks:
 {{example_dialogue}}
 
-[ Title: Dialogue between {{char}} and {{user}}; Tags: conversation; Genre: online roleplay ]
+[ Title: Dialogue between "{{char}}" and "{{user}}"; Tags: conversation; Genre: online roleplay ]
+[ Style: chat ]
 ***
 Summary: {{scenario}}
 {{history}}
-{{ujb}}
-  {{post}}`,
+{{#if ujb}}{ {{value}} }{{/if}}
+{{post}}`,
   Pyg: neat`
 {{char}}'s Persona:
 {{personality}}
@@ -246,9 +245,6 @@ Then the roleplay chat begins.<|im_end|>
 {{#each msg}}<|im_start|>[{{.name}}]
 {{.msg}}<|im_end|>
 {{/each}}
-{{#if ujb}}<|im_start|>system
-{{ujb}}<|im_end|>
-{{/if}}
 <|im_start|>[{{char}}]
-{{post}}`,
+{{#if ujb}}({{value}}) {{/if}}{{post}}`,
 }
diff --git a/common/template-parser.ts b/common/template-parser.ts
@@ -191,11 +191,15 @@ export async function parseTemplate(
   const parts = opts.parts || {}
 
   if (parts.systemPrompt) {
-    parts.systemPrompt = render(parts.systemPrompt, { ...opts, isPart: true })
+    opts.isPart = true
+    parts.systemPrompt = render(parts.systemPrompt, opts)
+    opts.isPart = false
   }
 
   if (parts.ujb) {
-    parts.ujb = render(parts.ujb, { ...opts, isPart: true })
+    opts.isPart = true
+    parts.ujb = render(parts.ujb, opts)
+    opts.isPart = false
   }
 
   const ast = parser.parse(template, {}) as PNode[]
@@ -249,10 +253,9 @@ export async function parseTemplate(
     }
   }
 
-  const result = render(output, { ...opts, isFinal: true })
-    .replace(/\r\n/g, '\n')
-    .replace(/\n\n+/g, '\n\n')
-    .trim()
+  opts.isFinal = true
+  const result = render(output, opts).replace(/\r\n/g, '\n').replace(/\n\n+/g, '\n\n').trim()
+  opts.isFinal = false
 
   sections.sections.history = history
 
@@ -415,7 +418,8 @@ function renderLowPriority(node: LowPriorityNode, opts: TemplateOpts) {
     const result = renderNode(child, opts)
     if (result) output.push(result)
   }
-  opts.lowpriority = opts.lowpriority ?? []
+
+  opts.lowpriority ??= []
   const lowpriorityBlockId = '__' + v4() + '__'
   opts.lowpriority.push({ id: lowpriorityBlockId, content: output.join('') })
   return lowpriorityBlockId
@@ -527,7 +531,10 @@ function renderCondition(
   const output: string[] = []
   for (const child of children) {
     if (typeof child !== 'string' && child.kind === 'else') continue
-    const result = renderNode(child, { ...opts, isPart: false }, value)
+    const isPart = opts.isPart
+    opts.isPart = false
+    const result = renderNode(child, opts, value)
+    opts.isPart = isPart
     if (result) output.push(result)
   }
 

diff --git a/web/pages/PromptTemplates/index.tsx b/web/pages/PromptTemplates/index.tsx
@@ -5,8 +5,7 @@ import { presetStore } from '/web/store/presets'
 import { Copy, Plus, Save, Trash } from 'lucide-solid'
 import Divider from '/web/shared/Divider'
 import { templates } from '../../../common/presets/templates'
-import { useRootModal } from '/web/shared/hooks'
-import Modal from '/web/shared/Modal'
+import { RootModal } from '/web/shared/Modal'
 import PromptEditor from '/web/shared/PromptEditor'
 import TextInput from '/web/shared/TextInput'
 import { AppSchema } from '/common/types'
@@ -152,34 +151,29 @@ const TemplateModal: Component<{
     </>
   )
 
-  useRootModal({
-    id: 'prompt-templates',
-    element: (
-      <Modal
-        title={'Prompt Templates'}
-        maxWidth="half"
-        show={props.show}
-        close={props.close}
-        footer={Footer}
-      >
-        <form ref={form!} class="flex flex-col gap-4 text-sm">
-          <TextInput
-            fieldName="name"
-            placeholder="Name"
-            label="Name"
-            value={props.edit?.name || ''}
-            required
-          />
-          <PromptEditor
-            fieldName="template"
-            value={props.edit?.template || props.initial || ''}
-            minHeight={100}
-            showHelp
-          />
-        </form>
-      </Modal>
-    ),
-  })
-
-  return null
+  return (
+    <RootModal
+      title={'Prompt Templates'}
+      maxWidth="half"
+      show={props.show}
+      close={props.close}
+      footer={Footer}
+    >
+      <form ref={form!} class="flex flex-col gap-4 text-sm">
+        <TextInput
+          fieldName="name"
+          placeholder="Name"
+          label="Name"
+          value={props.edit?.name || ''}
+          required
+        />
+        <PromptEditor
+          fieldName="template"
+          value={props.edit?.template || props.initial || ''}
+          minHeight={100}
+          showHelp
+        />
+      </form>
+    </RootModal>
+  )
 }
diff --git a/web/shared/PromptEditor/SelectTemplate.tsx b/web/shared/PromptEditor/SelectTemplate.tsx
@@ -25,6 +25,7 @@ export const SelectTemplate: Component<{
   const state = presetStore((s) => ({ templates: s.templates }))
 
   const [opt, setOpt] = createSignal(props.currentTemplateId || 'Alpaca')
+  const [templateName, setName] = createSignal(props.currentTemplate || 'Alpaca')
   const [template, setTemplate] = createSignal(templates.Alpaca)
   const [builtin, setBuiltin] = createSignal(templates.Alpaca)
   const [filter, setFilter] = createSignal('')
@@ -80,6 +81,7 @@ export const SelectTemplate: Component<{
 
       setOpt(id)
       const existing = state.templates.find((t) => t._id === id)
+      setName(existing?.name || '')
       setTemplate(existing?.template || props.currentTemplate || match.template)
       setBuiltin(match.template)
     }
@@ -106,7 +108,7 @@ export const SelectTemplate: Component<{
 
               presetStore.updateTemplate(
                 opt(),
-                { name: orig.name, template: update, presetId: props.presetId },
+                { name: templateName(), template: update, presetId: props.presetId },
                 () => {
                   toastStore.success('Prompt template updated')
                   props.select(id, update)
@@ -130,7 +132,7 @@ export const SelectTemplate: Component<{
                 return
               }
 
-              presetStore.updateTemplate(opt(), { name: orig.name, template: update }, () => {
+              presetStore.updateTemplate(opt(), { name: templateName(), template: update }, () => {
                 toastStore.success('Prompt template updated')
                 props.select(id, update)
                 props.close()
@@ -145,12 +147,7 @@ export const SelectTemplate: Component<{
           <Button
             schema="primary"
             onClick={() => {
-              const matches = state.templates.filter((t) => t.name.startsWith(`Custom ${opt()}`))
-
-              const name =
-                matches.length > 0 ? `Custom ${opt()} #${matches.length + 1}` : `Custom ${opt()}`
-
-              presetStore.createTemplate(name, template(), props.presetId, (id) => {
+              presetStore.createTemplate(templateName(), template(), props.presetId, (id) => {
                 props.select(id, template())
                 props.close()
               })
@@ -202,6 +199,17 @@ export const SelectTemplate: Component<{
             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)
             }}
           />
@@ -212,6 +220,11 @@ export const SelectTemplate: Component<{
           close={() => setAutoOpen(false)}
           jsonValues={{ example: '', 'another long example': '', response: '' }}
         />
+        <TextInput
+          fieldName="templateName"
+          value={templateName()}
+          onInput={(ev) => setName(ev.currentTarget.value)}
+        />
         <TextInput
           ref={(r) => (ref = r)}
           fieldName="template"

diff --git a/web/store/settings.ts b/web/store/settings.ts
@@ -11,7 +11,7 @@ import { FeatureFlags, defaultFlags } from './flags'
 import { ReplicateModel } from '/common/types/replicate'
 import { getSubscriptionModelLimits, tryParse, wait } from '/common/util'
 import { ButtonSchema } from '../shared/Button'
-import { canUsePane } from '../shared/hooks'
+import { canUsePane, isMobile } from '../shared/hooks'
 import { setContextLimitStrategy } from '/common/prompt'
 
 export type SettingState = {
@@ -59,7 +59,7 @@ const initState: SettingState = {
   guestAccessAllowed: canUseStorage(),
   initLoading: true,
   cfg: { loading: false, ttl: 0 },
-  showMenu: false,
+  showMenu: isMobile() ? false : true,
   showImpersonate: false,
   models: [],
   workers: [],