@@ -2,7 +2,11 @@ import { Component, Show, createEffect, createMemo, createSignal, on } from 'sol
2
2
import { chatStore , presetStore , settingStore , userStore } from '/web/store'
3
3
import { CustomOption , CustomSelect } from '../CustomSelect'
4
4
import { getSubscriptionModelLimits } from '/common/util'
5
- import { SubscriptionModelLevel , SubscriptionModelOption } from '/common/types/presets'
5
+ import {
6
+ SubscriptionModelLevel ,
7
+ SubscriptionModelOption ,
8
+ SubscriptionTier ,
9
+ } from '/common/types/presets'
6
10
import { ChevronDown } from 'lucide-solid'
7
11
import { SubCTA } from '/web/Navigation'
8
12
import { applyStoreProperty , createEmitter } from '../util'
@@ -58,7 +62,16 @@ export const AgnaisticSettings: Field<{ noSave: boolean }> = (props) => {
58
62
if ( ! opt ) {
59
63
return < div > None</ div >
60
64
}
61
- return < ModelLabel sub = { opt ?. sub ! } limit = { opt ?. limit } nodesc />
65
+ return (
66
+ < ModelLabel
67
+ sub = { opt ?. sub ! }
68
+ limit = { opt ?. limit }
69
+ nodesc
70
+ tier = { opt . tierName }
71
+ disabled = { opt . disabled }
72
+ requires = { opt . requires }
73
+ />
74
+ )
62
75
} )
63
76
64
77
return (
@@ -185,28 +198,66 @@ function useModelOptions() {
185
198
const tierLevel = state . user ?. admin ? Infinity : state . userLevel
186
199
const level = state . user ?. admin ? Infinity : tierLevel
187
200
188
- return settings . config . subs
189
- . filter ( ( sub ) => ( ! ! sub . preset . allowGuestUsage ? true : sub . level <= level ) )
190
- . map ( ( sub ) => {
191
- const limit = getSubscriptionModelLimits ( sub . preset , level )
192
-
193
- return {
194
- label : < ModelLabel sub = { sub } limit = { limit } /> ,
195
- value : sub . _id ,
196
- level : sub . level ,
197
- sub,
198
- limit,
199
- }
200
- } )
201
- . sort ( ( l , r ) => r . level - l . level )
201
+ return (
202
+ settings . config . subs
203
+ . map ( ( sub ) => {
204
+ const limit = getSubscriptionModelLimits ( sub . preset , level )
205
+ const disabled = ! ! sub . preset . allowGuestUsage ? false : sub . level > level
206
+ const tier =
207
+ sub . level <= 0
208
+ ? 'Free'
209
+ : state . tiers . reduce < SubscriptionTier | null > ( ( prev , curr ) => {
210
+ if ( prev ?. level === sub . level ) return prev
211
+ if ( curr . level === sub . level ) return curr
212
+ if ( curr . level < sub . level ) return prev
213
+ if ( ! prev ) return curr
214
+
215
+ // Return the lowest tier above the threshold
216
+ return prev . level > curr . level ? curr : prev
217
+ } , null ) ?. name
218
+
219
+ const requires = sub . level <= 0 ? 'Registering' : tier || 'Staff Only'
220
+ return {
221
+ label : (
222
+ < ModelLabel
223
+ sub = { sub }
224
+ limit = { limit }
225
+ disabled = { disabled }
226
+ tier = { tier || 'Staff' }
227
+ requires = { requires }
228
+ />
229
+ ) ,
230
+ value : sub . _id ,
231
+ level : sub . level ,
232
+ sub,
233
+ limit,
234
+ disabled,
235
+ tierName : tier || 'Staff' ,
236
+ requires,
237
+ title : sub . name ,
238
+ }
239
+ } )
240
+ // Remove staff models from the list
241
+ . filter ( ( sub ) => ( sub . tierName === 'Staff' && ! state . user ?. admin ? false : true ) )
242
+ . sort ( ( l , r ) => {
243
+ if ( l . disabled && ! r . disabled ) return 1
244
+ if ( r . disabled && ! l . disabled ) return - 1
245
+ // if (l.disabled && r.disabled) return l.title.localeCompare(r.title)
246
+ if ( l . level !== r . level ) return l . level - r . level
247
+ return l . title . localeCompare ( r . title )
248
+ } )
249
+ )
202
250
} )
203
251
204
252
return opts
205
253
}
206
254
207
255
const ModelLabel : Component < {
208
256
sub : SubscriptionModelOption
257
+ tier : string
258
+ requires : string
209
259
limit ?: SubscriptionModelLevel
260
+ disabled : boolean
210
261
nodesc ?: boolean
211
262
} > = ( props ) => {
212
263
const context = createMemo ( ( ) =>
@@ -224,8 +275,15 @@ const ModelLabel: Component<{
224
275
{ Math . floor ( context ( ) / 1000 ) } K, { tokens ( ) } tokens
225
276
</ div >
226
277
</ div >
227
- < Show when = { props . sub . preset . description && ! props . nodesc } >
228
- < div class = "text-700 text-xs" > { props . sub . preset . description } </ div >
278
+ < Show when = { ! props . disabled && ! props . nodesc } >
279
+ < div class = "text-700 text-xs" >
280
+ { props . tier }
281
+ { props . sub . preset . description ? ', ' : '' }
282
+ { props . sub . preset . description }
283
+ </ div >
284
+ </ Show >
285
+ < Show when = { props . disabled } >
286
+ < div class = "text-700 text-xs" > Requires { props . requires } </ div >
229
287
</ Show >
230
288
</ div >
231
289
)
0 commit comments