fix chargen model change in ui (#1081)

* fix chargen model change in ui
* fix adapter config initial update
* fix preset registered setting initial set
- modal sizing
- mobile input bar send on enter
* sub level error
* fix admin config page editing

Author: sceuick

srv/api/upload.ts

@@ -11,7 +11,7 @@ import { errors } from './wrap'
 const s3 = new S3({
   region: 'us-east-1',
   forcePathStyle: false,
-  endpoint: `https://${config.storage.endpoint}`,
+  endpoint: config.storage.endpoint ? `https://${config.storage.endpoint}` : undefined,
   credentials: {
     accessKeyId: config.storage.id,
     secretAccessKey: config.storage.key,
@@ -90,6 +90,10 @@ export async function upload(attachment: Attachment, name: string, ttl?: number)
       ContentType: attachment.type,
       ACL: 'public-read',
     })
+    if (config.cdnHostname) {
+      return `https://${config.cdnHostname}/assets/${filename}`
+    }
+
     return `/assets/` + filename
   }
 

srv/config.ts

@@ -67,6 +67,7 @@ export const config = {
   host: env('APP_HOST', '0.0.0.0'),
   port: +env('PORT', '3001'),
   assetUrl: env('ASSET_URL', ''),
+  cdnHostname: env('CDN_HOSTNAME', ''),
   assetFolder: env('ASSET_FOLDER', resolve(__dirname, '..', 'dist', 'assets')),
   extraFolder: env('EXTRA_FOLDER', ''),
   billing: {

web/pages/Admin/Configuration.tsx

@@ -23,7 +23,7 @@ const ServerConfiguration: Component = () => {
   const [search, setSearch] = useSearchParams()
 
   const state = adminStore()
-  const tab = useTabs(['General', 'Images', 'Voice', 'Characters'], +(search.cfg_tab || '0'))
+  const tab = useTabs(['General', 'Images', 'Voice'], +(search.cfg_tab || '0'))
 
   createEffect(() => {
     setSearch({ cfg_tab: tab.selected().toString() })

web/pages/Chat/components/InputBar.tsx

@@ -36,7 +36,7 @@ import { SpeechRecognitionRecorder } from './SpeechRecognitionRecorder'
 import { Toggle } from '/web/shared/Toggle'
 import { defaultCulture } from '/web/shared/CultureCodes'
 import { createDebounce } from '/web/shared/util'
-import { useDraft, useEffect } from '/web/shared/hooks'
+import { useDraft, useEffect, useMobileDetect } from '/web/shared/hooks'
 import { eventStore } from '/web/store/event'
 import { useAppContext } from '/web/store/context'
 import NoCharacterIcon from '/web/icons/NoCharacterIcon'
@@ -103,6 +103,7 @@ const InputBar: Component<{
   const [complete, setComplete] = createSignal(false)
   const [listening, setListening] = createSignal(false)
   const [dragging, setDragging] = createSignal(false)
+  const mob = useMobileDetect()
 
   const completeOpts = createMemo(() => {
     const list = ctx.activeBots.map((char) => ({ label: char.name, value: char._id }))
@@ -298,8 +299,7 @@ const InputBar: Component<{
             setComplete(true)
           }
 
-          const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
-          const canMobileSend = isMobileDevice ? user.ui.mobileSendOnEnter : true
+          const canMobileSend = mob() ? user.ui.mobileSendOnEnter : true
           if (ev.key === 'Enter' && !ev.shiftKey && canMobileSend) {
             if (complete()) return
             send()

web/pages/Settings/UISettings.tsx

@@ -189,7 +189,7 @@ const UISettings: Component<{}> = () => {
 
       <Toggle
         fieldName="mobileSendOnEnter"
-        label="Send Message on Enter on Mobile"
+        label="Send on Enter on Mobile"
         helperText='Instead of adding a line break, "Enter" will send the message (Mobile only)'
         value={state.ui.mobileSendOnEnter}
         onChange={(ev) => userStore.saveUI({ mobileSendOnEnter: ev })}
@@ -388,7 +388,7 @@ const UISettings: Component<{}> = () => {
       <Divider />
       <div class="text-lg font-bold">Preview</div>
       <Show when={chars.characters.list.length > 0}>
-        <div class="bg-100 flex w-full flex-col gap-2 rounded-md p-2">
+        <div class="bg-600 flex w-full flex-col gap-2 rounded-md p-2">
           <Message
             index={-1}
             editing={false}

web/pages/Settings/components/RegisteredSettings.tsx

@@ -23,10 +23,10 @@ const RegisteredSettings: Component<{
               value={props.state.adapterConfig?.[props.service.name]?.[each.field]}
               config={props.state.adapterConfig?.[props.service.name]}
               onChange={(ev) => {
-                const prev = { ...(props.state.adapterConfig as any)[props.service.name] }
+                const prev = { ...(props.state.adapterConfig as any)?.[props.service.name] }
                 prev[each.field] = ev
                 const next = { ...props.state.adapterConfig, [props.service.name]: prev }
-                props.setter('adapterConfig', next)
+                props.setter({ adapterConfig: next })
               }}
             />
           </Show>

web/shared/Modal.tsx

@@ -44,15 +44,15 @@ const Modal: Component<Props> = (props) => {
   return (
     <Portal>
       <Show when={props.show}>
-        <div class="fixed inset-x-0 top-0 z-[100] items-center justify-center px-4 sm:inset-0 sm:flex sm:items-center sm:justify-center">
+        <div class="fixed inset-x-0 top-0 z-[100] items-center justify-center px-2 sm:inset-0 sm:flex sm:items-center sm:justify-center">
           <div class="fixed inset-0 -z-10 opacity-40 transition-opacity">
             <div class="absolute inset-0 bg-black" />
           </div>
           <div class="modal-body">
             <form
               ref={autofocus}
               onSubmit={props.onSubmit || defaultSubmit}
-              class={`modal-height bg-900 z-50 w-[calc(100vw-16px)] overflow-hidden rounded-lg shadow-md shadow-black transition-all ${width()} `}
+              class={`modal-height bg-900 z-50 w-[calc(100vw-0px)] overflow-hidden rounded-lg shadow-md shadow-black transition-all ${width()} `}
               classList={{ 'h-full': props.maxHeight, 'opacity-80': props.transparent }}
               role="dialog"
               aria-modal="true"

web/shared/PresetSettings/Agnaistic.tsx

@@ -21,6 +21,10 @@ export const AgnaisticSettings: Field<{ noSave: boolean }> = (props) => {
       return
     }
     presetStore.updateRegisterPresetProp(props.state._id, 'agnaistic', 'subscriptionId', value)
+    props.setter(
+      'registered',
+      applyStoreProperty(props.state.registered, 'agnaistic.subscriptionId', value)
+    )
   }
 
   createEffect(

web/shared/PresetSettings/Registered.tsx

@@ -36,7 +36,7 @@ export const RegisteredSettings: Component<{
               onChange={(ev) => {
                 if (!props.setter || !props.state) return
                 if (!props.state.service) return
-                const prev = { ...(props.state.registered as any)[props.state.service!] }
+                const prev = { ...(props.state.registered as any)?.[props.state.service!] }
                 prev[opt.field] = ev
                 const next = { ...props.state.registered, [props.state.service]: prev }
                 props.setter('registered', next)

web/shared/TextInput.tsx

@@ -165,6 +165,7 @@ const TextInput: Component<Props> = (props) => {
     // Therefore we must also monitor it on-input
     setTimeout(() => {
       if (props.value === undefined || !inputRef) return
+      if (!props.onChange) return
       if (props.value.toString().trim() !== inputRef.value.toString().trim()) {
         inputRef.value = props.value.toString()
       }

web/shared/Toggle.tsx

@@ -36,12 +36,8 @@ export const Toggle: Component<{
 
   return (
     <div
-      class={`flex flex-col items-center gap-2 ${justify()}`}
+      class={`flex flex-row items-center gap-2 ${justify()}`}
       classList={{
-        'flex-col': props.vertLabel,
-        'flex-row': !props.vertLabel,
-        'sm:flex-row': !props.vertLabel,
-        // 'sm:items-center': !props.vertLabel,
         '!gap-0': props.vertLabel && !props.class?.includes('gap-'),
         'gap-2': !props.vertLabel && !props.class?.includes('gap-'),
         hidden: props.hide ?? false,

web/store/character.ts

@@ -110,7 +110,7 @@ export const characterStore = createStore<CharacterState>(
     async (chatId: string, chars: AppSchema.Character[], temps: AppSchema.Character[]) => {
       const allChars = chars.concat(temps)
       set({ chatChars: { chatId, list: allChars, map: toMap(allChars) } })
-      characterStore.loadImpersonate()
+      characterStore.loadImpersonate(chatId)
     }
   )
 
@@ -200,14 +200,14 @@ export const characterStore = createStore<CharacterState>(
       return { impersonating: char || undefined }
     },
 
-    async loadImpersonate({
-      activeChatId,
-      chatChars: { list },
-      characters: { list: allList },
-      impersonating: current,
-    }) {
+    async loadImpersonate(
+      { activeChatId, chatChars: { list }, characters: { list: allList }, impersonating: current },
+      chatId?: string
+    ) {
       const fallback = storage.localGetItem(IMPERSONATE_KEY) || ''
-      let id = activeChatId ? getStoredValue(`${activeChatId}-impersonate`, fallback) : fallback
+      let id = activeChatId
+        ? getStoredValue(`${chatId || activeChatId}-impersonate`, fallback)
+        : fallback
 
       if (!id) return
 

web/store/user.ts

@@ -313,7 +313,11 @@ export const userStore = createStore<UserState>(
 
       if (res.result) {
         const next = getUserSubscriptionTier(res.result.user, tiers, previous)
-        yield { user: res.result.user, sub: next, userLevel: res.result.user.sub.level ?? 0 }
+        yield {
+          user: res.result.user,
+          sub: next,
+          userLevel: res.result.user.sub?.level ?? next?.level ?? 0,
+        }
       }
 
       if (quiet) return