Add Themes
This commit is contained in:
kwaroran
@@ -58,6 +58,7 @@
|
||||
|
||||
let msgDisplay = $state('')
|
||||
let translated = $state(DBState.db.autoTranslate)
|
||||
let role = $derived(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx]?.role)
|
||||
async function rm(e:MouseEvent, rec?:boolean){
|
||||
if(e.shiftKey){
|
||||
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
|
||||
@@ -88,9 +89,7 @@
|
||||
}
|
||||
|
||||
async function edit(){
|
||||
let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
|
||||
msg[idx].data = message
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].data = message
|
||||
}
|
||||
|
||||
function getCbsCondition(){
|
||||
@@ -193,153 +192,225 @@
|
||||
unsubscribers.forEach(u => u())
|
||||
})
|
||||
</script>
|
||||
<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${DBState.db.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
|
||||
<div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
|
||||
{#if !blankMessage && !$HideIconStore}
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
|
||||
<div class="shadow-lg border-textcolor2 border mt-2 flex justify-center items-center text-textcolor2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}>
|
||||
{#if name === 'assistant'}
|
||||
<BotIcon />
|
||||
{:else}
|
||||
<UserIcon />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#await img}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{:then m}
|
||||
{#if largePortrait && (!DBState.db.roundIcons)}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100 / 0.75}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{:else}
|
||||
<div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
{/if}
|
||||
<span class="flex flex-col ml-4 w-full max-w-full min-w-0">
|
||||
<div class="flexium items-center chat">
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
|
||||
<span class="chat text-xl border-darkborderc flex items-center">
|
||||
<span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
|
||||
<button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
|
||||
}}><ArrowLeftRightIcon size="18" /></button>
|
||||
</span>
|
||||
{:else if !blankMessage && !$HideIconStore}
|
||||
<span class="chat text-xl unmargin text-textcolor">{name}</span>
|
||||
{/if}
|
||||
<div class="flex-grow flex items-center justify-end text-textcolor2">
|
||||
<span class="text-xs">{statusMessage}</span>
|
||||
{#if DBState.db.useChatCopy && !blankMessage}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
|
||||
window.navigator.clipboard.writeText(msgDisplay).then(() => {
|
||||
setStatusMessage(language.copied)
|
||||
})
|
||||
}}>
|
||||
<CopyIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{#if idx > -1}
|
||||
{#if DBState.db.characters[$selectedCharID].type !== 'group' && DBState.db.characters[$selectedCharID].ttsMode !== 'none' && (DBState.db.characters[$selectedCharID].ttsMode)}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
|
||||
return sayTTS(null, message)
|
||||
}}>
|
||||
<Volume2Icon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if !$ConnectionOpenStore}
|
||||
<button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => {
|
||||
if(!editMode){
|
||||
editMode = true
|
||||
}
|
||||
else{
|
||||
editMode = false
|
||||
edit()
|
||||
}
|
||||
}}>
|
||||
<PencilIcon size={20}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
|
||||
<TrashIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if DBState.db.translator !== '' && !blankMessage}
|
||||
<button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => {
|
||||
translated = !translated
|
||||
}}>
|
||||
<LanguagesIcon />
|
||||
</button>
|
||||
{/if}
|
||||
{#if rerollIcon || altGreeting}
|
||||
{#if DBState.db.swipe || altGreeting}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}>
|
||||
<ArrowLeft size={22}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
|
||||
<ArrowRight size={22}/>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
|
||||
<RefreshCcwIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
|
||||
<div>
|
||||
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
|
||||
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
|
||||
onclick={() => {
|
||||
alertRequestData({
|
||||
genInfo: messageGenerationInfo,
|
||||
idx: idx,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<BotIcon size={20} />
|
||||
<span class="ml-1">
|
||||
{capitalize(getModelShortName(messageGenerationInfo.model))}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#snippet genInfo()}
|
||||
{#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
|
||||
<div>
|
||||
<button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
|
||||
hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center"
|
||||
onclick={() => {
|
||||
alertRequestData({
|
||||
genInfo: messageGenerationInfo,
|
||||
idx: idx,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<BotIcon size={20} />
|
||||
<span class="ml-1">
|
||||
{capitalize(getModelShortName(messageGenerationInfo.model))}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet textBox()}
|
||||
{#if editMode}
|
||||
<AutoresizeArea bind:value={message} handleLongPress={(e) => {
|
||||
editMode = false
|
||||
}} />
|
||||
{:else if blankMessage}
|
||||
<div class="w-full flex justify-center text-textcolor2 italic mb-12">
|
||||
{language.noMessage}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
|
||||
if(DBState.db.clickToEdit && idx > -1){
|
||||
editMode = true
|
||||
}
|
||||
}}
|
||||
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
|
||||
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
|
||||
>
|
||||
{#key $ReloadGUIPointer}
|
||||
{#await markParsing(msgDisplay, character, 'normal', idx, translated)}
|
||||
{@html lastParsed}
|
||||
{:then md}
|
||||
{@html md}
|
||||
{/await}
|
||||
{/key}
|
||||
</span>
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet icons(options:{applyTextColors?:boolean} = {})}
|
||||
<div class="flex-grow flex items-center justify-end" class:text-textcolor2={options?.applyTextColors !== false}>
|
||||
<span class="text-xs">{statusMessage}</span>
|
||||
{#if DBState.db.useChatCopy && !blankMessage}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
|
||||
window.navigator.clipboard.writeText(msgDisplay).then(() => {
|
||||
setStatusMessage(language.copied)
|
||||
})
|
||||
}}>
|
||||
<CopyIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{#if idx > -1}
|
||||
{#if DBState.db.characters[$selectedCharID].type !== 'group' && DBState.db.characters[$selectedCharID].ttsMode !== 'none' && (DBState.db.characters[$selectedCharID].ttsMode)}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
|
||||
return sayTTS(null, message)
|
||||
}}>
|
||||
<Volume2Icon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{#if editMode}
|
||||
<AutoresizeArea bind:value={message} handleLongPress={(e) => {
|
||||
editMode = false
|
||||
}} />
|
||||
{:else if blankMessage}
|
||||
<div class="w-full flex justify-center text-textcolor2 italic mb-12">
|
||||
{language.noMessage}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
|
||||
if(DBState.db.clickToEdit && idx > -1){
|
||||
|
||||
{#if !$ConnectionOpenStore}
|
||||
<button class={"ml-2 hover:text-green-500 transition-colors "+(editMode?'text-green-400':'')} onclick={() => {
|
||||
if(!editMode){
|
||||
editMode = true
|
||||
}
|
||||
}}
|
||||
style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
|
||||
style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
|
||||
>
|
||||
{#key $ReloadGUIPointer}
|
||||
{#await markParsing(msgDisplay, character, 'normal', idx, translated)}
|
||||
{@html lastParsed}
|
||||
{:then md}
|
||||
{@html md}
|
||||
{/await}
|
||||
{/key}
|
||||
</span>
|
||||
else{
|
||||
editMode = false
|
||||
edit()
|
||||
}
|
||||
}}>
|
||||
<PencilIcon size={20}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={(e) => rm(e, false)} use:longpress={(e) => rm(e, true)}>
|
||||
<TrashIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{#if DBState.db.translator !== '' && !blankMessage}
|
||||
<button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => {
|
||||
translated = !translated
|
||||
}}>
|
||||
<LanguagesIcon />
|
||||
</button>
|
||||
{/if}
|
||||
{#if rerollIcon || altGreeting}
|
||||
{#if DBState.db.swipe || altGreeting}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}>
|
||||
<ArrowLeft size={22}/>
|
||||
</button>
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
|
||||
<ArrowRight size={22}/>
|
||||
</button>
|
||||
{:else}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" onclick={onReroll}>
|
||||
<RefreshCcwIcon size={20}/>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet icon(options:{rounded?:boolean,styleFix?:string} = {})}
|
||||
{#if !blankMessage && !$HideIconStore}
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
|
||||
<div class="shadow-lg border-textcolor2 border flex justify-center items-center text-textcolor2" style={options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={options?.rounded} class:rounded-full={options?.rounded}>
|
||||
{#if name === 'assistant'}
|
||||
<BotIcon />
|
||||
{:else}
|
||||
<UserIcon />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#await img}
|
||||
<div class="shadow-lg bg-textcolor2" style={options?.styleFix ??`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{:then m}
|
||||
{#if largePortrait && (!options?.rounded)}
|
||||
<div class="shadow-lg bg-textcolor2" style={m + (options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100 / 0.75}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`)}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{:else}
|
||||
<div class="shadow-lg bg-textcolor2" style={m + (options?.styleFix ?? `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`)}
|
||||
class:rounded-md={!options?.rounded} class:rounded-full={options?.rounded}></div>
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
|
||||
<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${DBState.db.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
|
||||
<div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
|
||||
{#if DBState.db.theme === 'mobilechat' && !blankMessage}
|
||||
<div class={role === 'user' ? "flex items-start w-full justify-end" : "flex items-start"}>
|
||||
{#if role !== 'user'}
|
||||
{@render icon({rounded: true})}
|
||||
{/if}
|
||||
<div
|
||||
class="bg-gray-100 rounded-lg p-3 max-w-[70%] mx-2"
|
||||
class:rounded-tl-none={role !== 'user'}
|
||||
class:rounded-tr-none={role === 'user'}
|
||||
>
|
||||
<p class="text-gray-800">{@render textBox()}</p>
|
||||
{#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx]?.time}
|
||||
<span class="text-xs text-textcolor2 mt-1 block">
|
||||
{new Intl.DateTimeFormat(undefined, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour12: false
|
||||
}).format(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].time)}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if role === 'user'}
|
||||
{@render icon({rounded: true})}
|
||||
{/if}
|
||||
</div>
|
||||
{:else if DBState.db.theme === 'cardboard' && !blankMessage}
|
||||
<div class="w-full flex flex-col px-0 sm:px-4 py-4 relative">
|
||||
<div class="bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg shadow-lg border-gray-400 border p-4 flex flex-col">
|
||||
<div class="flex gap-4 mt-2 flex-col sm:flex-row">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="sm:h-96 sm:w-72 sm:min-w-72 w-48 h-64">
|
||||
{@render icon({rounded: false, styleFix:'height:100%;width:100%;'})}
|
||||
</div>
|
||||
<h2 class="text-base font-bold text-gray-500 text-center mt-2 max-w-full text-ellipsis">{name}</h2>
|
||||
|
||||
</div>
|
||||
{#if editMode}
|
||||
<textarea class="flex-grow h-96 overflow-y-auto bg-transparent text-black p-2 mb-2 resize-none" bind:value={message}></textarea>
|
||||
{:else}
|
||||
<div class="flex-grow h-96 overflow-y-auto p-2 mb-2 sm:mb-0">
|
||||
{@render textBox()}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 bg-gradient-to-b from-gray-200 to-gray-300 p-2 rounded-md border border-gray-400 text-gray-400">
|
||||
{@render icons({applyTextColors: false})}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{@render icon({rounded: DBState.db.roundIcons})}
|
||||
<span class="flex flex-col ml-4 w-full max-w-full min-w-0 text-black">
|
||||
<div class="flexium items-center chat">
|
||||
{#if DBState.db.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
|
||||
<span class="chat text-xl border-darkborderc flex items-center">
|
||||
<span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
|
||||
<button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
|
||||
DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
|
||||
}}><ArrowLeftRightIcon size="18" /></button>
|
||||
</span>
|
||||
{:else if !blankMessage && !$HideIconStore}
|
||||
<span class="chat text-xl unmargin text-textcolor">{name}</span>
|
||||
{/if}
|
||||
{@render icons()}
|
||||
</div>
|
||||
{@render genInfo()}
|
||||
{@render textBox()}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -35,19 +35,6 @@
|
||||
|
||||
{#if $ShowVN}
|
||||
<VisualNovelMain />
|
||||
{:else if DBState.db.theme === ''}
|
||||
<div class="flex-grow h-full min-w-0 relative justify-center flex">
|
||||
<SideBarArrow />
|
||||
<BackgroundDom />
|
||||
<div style={bgImg} class="h-full w-full" class:max-w-6xl={DBState.db.classicMaxWidth}>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if DBState.db.characters[$selectedCharID].viewScreen !== 'none' && (DBState.db.characters[$selectedCharID].type === 'group' || (!DBState.db.characters[$selectedCharID].inlayViewScreen))}
|
||||
<ResizeBox />
|
||||
{/if}
|
||||
{/if}
|
||||
<DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if DBState.db.theme === 'waifu'}
|
||||
<div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}">
|
||||
<SideBarArrow />
|
||||
@@ -81,6 +68,19 @@
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex-grow h-full min-w-0 relative justify-center flex">
|
||||
<SideBarArrow />
|
||||
<BackgroundDom />
|
||||
<div style={bgImg} class="h-full w-full" class:max-w-6xl={DBState.db.classicMaxWidth}>
|
||||
{#if $selectedCharID >= 0}
|
||||
{#if DBState.db.characters[$selectedCharID].viewScreen !== 'none' && (DBState.db.characters[$selectedCharID].type === 'group' || (!DBState.db.characters[$selectedCharID].inlayViewScreen))}
|
||||
<ResizeBox />
|
||||
{/if}
|
||||
{/if}
|
||||
<DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if openChatList}
|
||||
<ChatList close={() => {openChatList = false}}/>
|
||||
|
||||
Reference in New Issue
Block a user