Fix missing message opts (#1099)

* fix message options showing
* improve admin sub listing
* use sub levels to determine tier
* copy sub levels
* improve model listing
- include image models
* fixing stripe check for finished checkout that didnt apply

Author: sceuick

common/image-util.ts

@@ -7,12 +7,7 @@ export function filterImageModels(
   tier?: Pick<AppSchema.SubscriptionTier, 'imagesAccess'>
 ) {
   if (user?.admin) return models
-  if (!tier?.imagesAccess) return []
 
-  let level = Math.max(user?.sub?.level ?? 0, 0)
-
-  const list = models
-    .filter((m) => (m.level ?? 0) <= level)
-    .map((m) => ({ ...m, override: '', host: '' }))
+  const list = models.map((m) => ({ ...m, override: '', host: '' }))
   return list
 }

common/types/presets.ts

@@ -37,7 +37,7 @@ export interface SubscriptionModelOption {
   preset: GenSettings &
     Pick<
       SubscriptionModel,
-      'allowGuestUsage' | 'isDefaultSub' | '_id' | 'service' | 'levels' | 'subLevel'
+      'allowGuestUsage' | 'isDefaultSub' | '_id' | 'service' | 'levels' | 'subLevel' | 'subDisabled'
     > & {
       kind: 'submodel'
     }

srv/api/billing/modify.ts

@@ -89,7 +89,7 @@ export const retrieveSubscription = handle(async ({ userId }) => {
 
   const errors: string[] = []
 
-  if (user?.billing?.subscriptionId) {
+  if (user?.billing?.subscriptionId || user?.stripeSessions?.length) {
     const result = await resyncSubscription(user).catch((err: Error) => ({ err }))
     if (!result) {
       errors.push(`Error occurred while retrieving subscription infomation`)

srv/api/billing/stripe.ts

@@ -83,6 +83,7 @@ export async function resyncSubscription(user: AppSchema.User) {
 
   if (billing.subscriptionId !== subscription.id) {
     billing.subscriptionId = subscription.id
+    billing.customerId = subscription.customer as string
   }
 
   /**

srv/db/subscriptions.ts

@@ -122,6 +122,7 @@ export function toModelOption(sub: AppSchema.SubscriptionModel): AppSchema.Subsc
       topK: sub.topK,
       topP: sub.topP,
       minP: sub.minP,
+      subDisabled: sub.subDisabled,
       typicalP: sub.typicalP,
       addBosToken: sub.addBosToken,
       antiBond: sub.antiBond,

web/pages/Admin/SubscriptionList.tsx

@@ -1,6 +1,6 @@
 import { A, useNavigate } from '@solidjs/router'
 import { Copy, Plus, Trash } from 'lucide-solid'
-import { Component, createSignal, For, onMount, Show } from 'solid-js'
+import { Component, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 import Button from '../../shared/Button'
 import { ConfirmModal } from '../../shared/Modal'
 import PageHeader from '../../shared/PageHeader'
@@ -10,7 +10,7 @@ import { getServiceName, sortByLabel } from '/web/shared/adapter'
 import Divider from '/web/shared/Divider'
 import { Pill, SolidCard } from '/web/shared/Card'
 import { Page } from '/web/Layout'
-import { SubscriptionModelLevel } from '/common/types/presets'
+import { SubscriptionModel, SubscriptionModelLevel } from '/common/types/presets'
 
 const SubscriptionList: Component = () => {
   setComponentPageTitle('Subscriptions')
@@ -31,6 +31,38 @@ const SubscriptionList: Component = () => {
   const cfg = userStore()
 
   const [deleting, setDeleting] = createSignal<string>()
+  const subCats = createMemo(() => {
+    const cats = new Map<number, Array<SubscriptionModel & { label: string }>>()
+
+    for (const sub of state.enabled) {
+      let level = sub.levels.reduce<number | null>(
+        (prev, curr) => (prev === null ? curr.level : curr.level < prev ? curr.level : prev),
+        null
+      )
+
+      if (level === null) {
+        level = sub.subLevel
+      }
+
+      if (!cats.has(level)) {
+        cats.set(level, [])
+      }
+
+      const list = cats.get(level)
+      list!.push(sub)
+      cats.set(level, list!)
+    }
+
+    const all = Array.from(cats.entries())
+      .sort((l, r) => l[0] - r[0])
+      .map(([level, list]) => ({
+        name: `Tier ${level}`,
+        list: list.sort((l, r) => l.name.localeCompare(r.name)),
+      }))
+
+    all.push({ name: 'Disabled', list: state.disabled })
+    return all
+  })
 
   const deleteSub = () => {
     const presetId = deleting()
@@ -122,62 +154,69 @@ const SubscriptionList: Component = () => {
         </Show>
         <Divider />
         <div class="flex justify-center font-bold">Models</div>
-        <For each={state.enabled.concat(state.disabled)}>
-          {(sub) => (
-            <div class="flex w-full items-center gap-2">
-              <A
-                href={`/admin/subscriptions/${sub._id}`}
-                class="flex h-12 w-full gap-2 rounded-xl hover:bg-[var(--bg-600)]"
-                classList={{
-                  'bg-red-900': sub.subDisabled && !sub.isDefaultSub,
-                  'text-500': sub.subDisabled && !sub.isDefaultSub,
-                  'bg-800': !sub.subDisabled && !sub.isDefaultSub,
-                  'bg-[var(--hl-800)]': sub.isDefaultSub,
-                }}
-              >
-                <div class="ml-4 flex w-full items-center">
-                  <div class="flex gap-1">
-                    <span class="mr-1 text-xs italic text-[var(--text-600)]">
-                      [Level: {sub.subLevel}] {getServiceName(sub.service)}
-                    </span>
-                    {sub.name}
-                    <Show when={sub.description}>
-                      <span class="text-500 ml-1 text-xs">{sub.description}</span>
-                    </Show>
-                    <span class="mr-1 text-xs italic text-[var(--text-600)]">
-                      {sub.isDefaultSub ? ' default' : ''}
-                      {sub.subDisabled ? ' (disabled)' : ''}
-                    </span>
-                    <Contexts
-                      levels={[
-                        {
-                          level: sub.subLevel,
-                          maxContextLength: sub.maxContextLength!,
-                          maxTokens: sub.maxTokens!,
-                        },
-                      ]}
-                    />
-                    <Contexts levels={sub.levels || []} />
+        <For each={subCats()}>
+          {(item) => (
+            <>
+              <div class="bold flex justify-start">{item.name}</div>
+              <For each={item.list}>
+                {(sub) => (
+                  <div class="flex w-full items-center gap-2">
+                    <A
+                      href={`/admin/subscriptions/${sub._id}`}
+                      class="flex h-12 w-full gap-2 rounded-xl hover:bg-[var(--bg-600)]"
+                      classList={{
+                        'bg-red-900': sub.subDisabled && !sub.isDefaultSub,
+                        'text-500': sub.subDisabled && !sub.isDefaultSub,
+                        'bg-800': !sub.subDisabled && !sub.isDefaultSub,
+                        'bg-[var(--hl-800)]': sub.isDefaultSub,
+                      }}
+                    >
+                      <div class="ml-4 flex w-full items-center">
+                        <div class="flex gap-1">
+                          <span class="mr-1 text-xs italic text-[var(--text-600)]">
+                            [Level: {sub.subLevel}] {getServiceName(sub.service)}
+                          </span>
+                          {sub.name}
+                          <Show when={sub.description}>
+                            <span class="text-500 ml-1 text-xs">{sub.description}</span>
+                          </Show>
+                          <span class="mr-1 text-xs italic text-[var(--text-600)]">
+                            {sub.isDefaultSub ? ' default' : ''}
+                            {sub.subDisabled ? ' (disabled)' : ''}
+                          </span>
+                          <Contexts
+                            levels={[
+                              {
+                                level: sub.subLevel,
+                                maxContextLength: sub.maxContextLength!,
+                                maxTokens: sub.maxTokens!,
+                              },
+                            ]}
+                          />
+                          <Contexts levels={sub.levels || []} />
+                        </div>
+                      </div>
+                    </A>
+                    <Button
+                      schema="clear"
+                      size="sm"
+                      onClick={() => nav(`/admin/subscriptions/new?preset=${sub._id}`)}
+                      class="icon-button"
+                    >
+                      <Copy />
+                    </Button>
+                    <Button
+                      schema="clear"
+                      size="sm"
+                      onClick={() => setDeleting(sub._id)}
+                      class="icon-button"
+                    >
+                      <Trash />
+                    </Button>
                   </div>
-                </div>
-              </A>
-              <Button
-                schema="clear"
-                size="sm"
-                onClick={() => nav(`/admin/subscriptions/new?preset=${sub._id}`)}
-                class="icon-button"
-              >
-                <Copy />
-              </Button>
-              <Button
-                schema="clear"
-                size="sm"
-                onClick={() => setDeleting(sub._id)}
-                class="icon-button"
-              >
-                <Trash />
-              </Button>
-            </div>
+                )}
+              </For>
+            </>
           )}
         </For>
       </div>

web/pages/Admin/SubscriptionModel.tsx

@@ -114,11 +114,9 @@ export const SubscriptionModel: Component = () => {
         ...preset,
         _id: '',
         subLevel: 0,
-        subModel: '',
         subApiKey: '',
         subDisabled: false,
         allowGuestUsage: false,
-        levels: [],
       })
       return
     } else if (params.id === 'default') {

web/pages/Chat/components/Message.tsx

@@ -644,8 +644,9 @@ const MessageOptions: Component<{
   })
 
   const showInner = createMemo(() => {
-    for (const opt of Object.values(logic())) {
-      if (!opt.outer && opt.show) return true
+    const logics = logic()
+    for (const opt of Object.values(logics)) {
+      if (!opt.outer.outer && opt.show) return true
     }
 
     return false

web/pages/Profile/SubscriptionPage.tsx

@@ -9,6 +9,7 @@ import { PatreonControls } from '../Settings/PatreonOauth'
 import { getUserSubscriptionTier } from '/common/util'
 import { isLoggedIn } from '/web/store/api'
 import { useNavigate } from '@solidjs/router'
+import { ModelList } from '/web/shared/PresetSettings/Agnaistic'
 
 export const SubscriptionPage: Component<{}> = (props) => {
   const settings = settingStore((s) => s.config)
@@ -29,6 +30,7 @@ export const SubscriptionPage: Component<{}> = (props) => {
   const [showUnsub, setUnsub] = createSignal(false)
   const [showUpgrade, setUpgrade] = createSignal<AppSchema.SubscriptionTier>()
   const [showDowngrade, setDowngrade] = createSignal<AppSchema.SubscriptionTier>()
+  const [showModels, setShowModels] = createSignal(false)
 
   const hasExpired = createMemo(() => {
     // We should leave this out. It's possible a user can subscribe multiple ways
@@ -106,9 +108,9 @@ export const SubscriptionPage: Component<{}> = (props) => {
               contexts.
             </p>
             <p>
-              In the future you'll also have access to additional features! Such as: Image
-              generation, image storage, and with third-party apps like Discord, Slack, and
-              WhatsApp, and more!
+              In the future you'll also have access to additional features! Such as: voice
+              generation, image storage, and with integration third-party apps like Discord, Slack,
+              and WhatsApp, and more!
             </p>
             <p>Subscribing allows me to spend more time developing and enhancing Agnaistic.</p>
           </SolidCard>
@@ -122,6 +124,10 @@ export const SubscriptionPage: Component<{}> = (props) => {
             </SolidCard>
           </Show>
 
+          <Button schema="primary" onClick={() => setShowModels(true)}>
+            View Available Models
+          </Button>
+
           <PatreonControls />
 
           <Show when={user.sub?.level! > 0}>
@@ -336,6 +342,8 @@ export const SubscriptionPage: Component<{}> = (props) => {
         }
         confirm={() => userStore.modifySubscription(showDowngrade()!._id)}
       />
+
+      <ModelList show={showModels()} close={() => setShowModels(false)} />
     </>
   )
 }

web/pages/Profile/TierCard.tsx

@@ -2,10 +2,6 @@ import { Component, Show, createMemo } from 'solid-js'
 import { AppSchema } from '/common/types'
 import { SolidCard } from '/web/shared/Card'
 import { markdown } from '/web/shared/markdown'
-import { settingStore } from '/web/store'
-import { HelpModal } from '/web/shared/Modal'
-import { getSubscriptionModelLimits } from '/common/util'
-import Button from '/web/shared/Button'
 
 type TierPreview = OmitId<AppSchema.SubscriptionTier, Dates | 'enabled' | 'priceId' | 'productId'>
 
@@ -14,22 +10,6 @@ export const TierCard: Component<{
   children?: any
   class?: string
 }> = (props) => {
-  const settings = settingStore()
-
-  const models = createMemo(() => {
-    return settings.config.subs
-      .filter((s) => props.tier.level >= s.level)
-      .sort((l, r) =>
-        r.level > l.level ? 1 : r.level === l.level ? l.name.localeCompare(r.name) : -1
-      )
-      .map((m) => {
-        const level = getSubscriptionModelLimits(m.preset, props.tier.level)
-        const ctx = level ? `${Math.floor(level.maxContextLength / 1000)}k` : ''
-        return `| ${m.name} | ${ctx} |`
-      })
-      .join('\n')
-  })
-
   const stripeCost = createMemo(() => {
     const prices: any[] = []
     if (props.tier.cost > 0) {
@@ -74,21 +54,6 @@ export const TierCard: Component<{
         <div class="markdown text-sm" innerHTML={markdown.makeHtml(props.tier.description)} />
       </div>
       <div>
-        <Show when={models().length > 0}>
-          <HelpModal
-            title={`Models on ${props.tier.name}`}
-            cta={
-              <div class="flex justify-center">
-                <Button size="sm">View Models</Button>
-              </div>
-            }
-          >
-            <div
-              class="markdown text-sm"
-              innerHTML={markdown.makeHtml(`| Model | Context |\n| ----- | ------- |\n${models()}`)}
-            />
-          </HelpModal>
-        </Show>
         <div class="text-md flex flex-col items-center font-bold">
           {stripeCost()}
           <Show when={props.tier.cost > 0 && !!props.tier.patreon?.cost}>