diff --git a/web/App.tsx b/web/App.tsx index c183c3517..0e4222f1e 100644 --- a/web/App.tsx +++ b/web/App.tsx @@ -3,6 +3,7 @@ import './tailwind.css' import './app.css' import './dots.css' import '@melloware/coloris/dist/coloris.css' +import './store' import { Component, createMemo, Show, lazy, onMount, Switch, Match } from 'solid-js' import { Route, Router, useLocation } from '@solidjs/router' import NavBar from './shared/NavBar' diff --git a/web/pages/Character/port.ts b/web/pages/Character/port.ts index 5c4ddbd5a..1dc402556 100644 --- a/web/pages/Character/port.ts +++ b/web/pages/Character/port.ts @@ -28,7 +28,6 @@ export async function importCharacterFile(file: FileInputResult) { const ext = file.file.name.split('.').slice(-1)[0] if (IMAGE_FORMATS[ext]) { const char = await processImage(file) - console.log(char) return { char, image: file.file } } diff --git a/web/pages/Chat/helpers.tsx b/web/pages/Chat/helpers.tsx index b51f41e7b..59f510775 100644 --- a/web/pages/Chat/helpers.tsx +++ b/web/pages/Chat/helpers.tsx @@ -1,9 +1,8 @@ import { ChevronLeft, ChevronRight } from 'lucide-solid' -import { Component, JSX, Show } from 'solid-js' +import { Component, Show } from 'solid-js' import Button from '/web/shared/Button' import { chatStore, msgStore } from '/web/store' import { AppSchema, UI } from '/common/types' -import { getRootRgb } from '/web/shared/colors' export const SwipeMessage: Component<{ chatId: string @@ -76,15 +75,6 @@ export function getChatWidth( } } -export function getHeaderBg(mode: UI.UISettings['mode']) { - mode - const rgb = getRootRgb('bg-900') - const styles: JSX.CSSProperties = { - background: rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : 'bg-900', - } - return styles -} - export function emptyMsg(opts: { id?: string charId?: string diff --git a/web/pages/Saga/Detail.tsx b/web/pages/Saga/Detail.tsx index 67fface49..2ba879b11 100644 --- a/web/pages/Saga/Detail.tsx +++ b/web/pages/Saga/Detail.tsx @@ -43,8 +43,7 @@ import { toastStore, userStore } from '/web/store' import { Saga } from '/common/types' import { getRgbaFromVar } from '/web/shared/colors' import { trimSentence } from '/common/util' -import { sticky } from '/web/shared/util' -import { getHeaderBg } from '../Chat/helpers' +import { getHeaderBg, sticky } from '/web/shared/util' export const SagaDetail: Component = (props) => { const user = userStore() diff --git a/web/shared/hooks.ts b/web/shared/hooks.ts index 4e4e12ebc..d5694be30 100644 --- a/web/shared/hooks.ts +++ b/web/shared/hooks.ts @@ -1,6 +1,5 @@ import { Accessor, JSX, Signal, createEffect, createMemo, onCleanup, onMount } from 'solid-js' import { createSignal, createRenderEffect } from 'solid-js' -import { characterStore, chatStore, presetStore, settingStore, userStore } from '../store' import { RootModal, rootModalStore } from '../store/root-modal' import { useLocation, useSearchParams } from '@solidjs/router' import { createImageCache } from '../store/images' @@ -10,6 +9,7 @@ import { getAssetUrl } from './util' import { AutoPreset, getPresetOptions } from './adapter' import { ADAPTER_LABELS } from '/common/adapters' import { forms } from '../emitter' +import { getStore } from '../store/create' export function getPlatform() { return window.innerWidth > 1024 ? 'xl' : window.innerWidth > 720 ? 'lg' : 'sm' @@ -27,8 +27,8 @@ export function useFormField(field: string, init?: string) { } export function usePresetOptions() { - const presets = presetStore((s) => s.presets) - const user = userStore() + const presets = getStore('presets')((s) => s.presets) + const user = getStore('user')() const options = createMemo(() => { const opts = getPresetOptions(presets, { builtin: true }).filter((pre) => pre.value !== 'chat') @@ -112,10 +112,10 @@ export function useCharacterBg(src: 'layout' | 'page') { const isMobile = useMobileDetect() const isChat = isChatPage() - const state = userStore() - const cfg = settingStore() - const chat = chatStore((s) => ({ active: s.active })) - const chars = characterStore((s) => ({ chatId: s.activeChatId, chars: s.chatChars })) + const state = getStore('user')() + const cfg = getStore('settings')() + const chat = getStore('chat')((s) => ({ active: s.active })) + const chars = getStore('character')((s) => ({ chatId: s.activeChatId, chars: s.chatChars })) const bg = createMemo(() => { if (src === 'page') return {} @@ -380,7 +380,7 @@ export const usePaneManager = () => { } export function useBgStyle(props: { hex: string; opacity?: number; blur: boolean }) { - const user = userStore() + const user = getStore('user')() const bgStyle = createMemo(() => { // This causes this memoized value to re-evaluated as it becomes a subscriber of ui.mode diff --git a/web/shared/util.ts b/web/shared/util.ts index 255c1c405..4952fd8dd 100644 --- a/web/shared/util.ts +++ b/web/shared/util.ts @@ -3,10 +3,12 @@ import * as lf from 'localforage' import { UnwrapBody, Validator, assertValid } from '/common/valid' import { AIAdapter, AI_ADAPTERS, PresetAISettings, ThirdPartyFormat } from '../../common/adapters' import type { Option } from './Select' -import { createEffect, onCleanup } from 'solid-js' -import { UserState, settingStore, userStore } from '../store' -import { AppSchema } from '/common/types' +import { createEffect, JSX, onCleanup } from 'solid-js' +import type { UserState } from '../store' +import { AppSchema, UI } from '/common/types' import { deepClone } from '/common/util' +import { getRootRgb } from './colors' +import { getStore } from '../store/create' const [css, hooks] = createHooks(recommended) @@ -39,6 +41,15 @@ export function downloadJson(content: string | object, filename: string = 'agnai URL.revokeObjectURL(anchor.href) } +export function getHeaderBg(mode: UI.UISettings['mode']) { + mode + const rgb = getRootRgb('bg-900') + const styles: JSX.CSSProperties = { + background: rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : 'bg-900', + } + return styles +} + export function getMaxChatWidth(chatWidth: UserState['ui']['chatWidth']) { switch (chatWidth) { case 'xl': @@ -510,7 +521,7 @@ export function serviceHasSetting( export function getAISettingServices(prop?: keyof PresetAISettings) { if (!prop) return - const cfg = settingStore((s) => s.config) + const cfg = getStore('settings')((s) => s.config) const base = adapterSettings[prop] const names: Array = [] for (const reg of cfg.registered) { @@ -633,8 +644,8 @@ export function asyncFrame() { } export function getUsableServices() { - const { user } = userStore.getState() - const { config } = settingStore.getState() + const { user } = getStore('user').getState() + const { config } = getStore('settings').getState() const services: AIAdapter[] = []