mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix] chat screen overflow

Browse Source
This commit is contained in:
kwaroran
2023-05-25 21:04:22 +09:00
parent 1dff7b8149
commit 1bcf299201
5 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.svelte
View File

@@ -21,7 +21,7 @@
</script> </script>
<main class="flex bg-bg w-full h-full"> <main class="flex bg-bg w-full h-full max-w-100vw">
{#if !$loadedStore} {#if !$loadedStore}
<div class="w-full h-full flex justify-center items-center text-gray-200 text-xl"> <div class="w-full h-full flex justify-center items-center text-gray-200 text-xl">
<span>Loading...</span> <span>Loading...</span>

10
src/lib/ChatScreens/Chat.svelte
View File

@@ -64,15 +64,15 @@
$: displaya(message) $: displaya(message)
</script> </script>
<div class="flex max-w-full justify-center" class:bgc={isLastMemory}> <div class="flex max-w-full justify-center" class:bgc={isLastMemory}>
<div class="text-neutral-200 mt-1 mb-1 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start"> <div class="text-neutral-200 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" >
{#await img} {#await img}
<div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} <div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} /> class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{:then m} {:then m}
<div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} <div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} /> class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{/await} {/await}
<span class="flex flex-col ml-4 w-full"> <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
<div class="flexium items-center chat"> <div class="flexium items-center chat">
<span class="chat text-xl unmargin">{name}</span> <span class="chat text-xl unmargin">{name}</span>
<div class="flex-grow flex items-center justify-end text-gray-500"> <div class="flex-grow flex items-center justify-end text-gray-500">
@@ -129,7 +129,7 @@
<AutoresizeArea bind:value={message} /> <AutoresizeArea bind:value={message} />
{:else} {:else}
{#await ParseMarkdown(msgDisplay, character) then md} {#await ParseMarkdown(msgDisplay, character) then md}
<span class="text chat chattext prose prose-invert" <span class="text chat chattext prose prose-invert minw-0"
style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem" style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem" style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
>{@html md}</span> >{@html md}</span>

2
src/lib/ChatScreens/ChatScreen.svelte
View File

@@ -26,7 +26,7 @@
})() })()
</script> </script>
{#if $DataBase.theme === ''} {#if $DataBase.theme === ''}
<div class="flex-grow h-full" style={bgImg}> <div class="flex-grow h-full min-w-0" style={bgImg}>
{#if $selectedCharID >= 0} {#if $selectedCharID >= 0}
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'} {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
<ResizeBox /> <ResizeBox />

4
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -14,7 +14,7 @@
import { processScript } from "src/ts/process/scripts"; import { processScript } from "src/ts/process/scripts";
import GithubStars from "../Others/GithubStars.svelte"; import GithubStars from "../Others/GithubStars.svelte";
import CreatorQuote from "./CreatorQuote.svelte"; import CreatorQuote from "./CreatorQuote.svelte";
import { stopTTS } from "src/ts/process/tts"; import { stopTTS } from "src/ts/process/tts";
let messageInput = '' let messageInput = ''
let openMenu = false let openMenu = false
@@ -200,7 +200,7 @@
} }
}}> }}>
<div class="flex items-end mt-2 mb-2"> <div class="flex items-end mt-2 mb-2">
<textarea class="text-neutral-200 p-2 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected maxw overflow-y-hidden overflow-x-hidden" <textarea class="text-neutral-200 p-2 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected maxw overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInput} bind:value={messageInput}
bind:this={inputEle} bind:this={inputEle}
on:keydown={(e) => { on:keydown={(e) => {

8
src/ts/globalApi.ts
View File

@@ -200,17 +200,23 @@ export async function saveDb(){
) )
if(isTauri){ if(isTauri){
await writeBinaryFile('database/database.bin', dbData, {dir: BaseDirectory.AppData}) await writeBinaryFile('database/database.bin', dbData, {dir: BaseDirectory.AppData})
await writeBinaryFile(`database/dbbackup-${(Date.now()/100).toFixed()}.bin`, dbData, {dir: BaseDirectory.AppData})
} }
else{ else{
await forageStorage.setItem('database/database.bin', dbData) await forageStorage.setItem('database/database.bin', dbData)
await forageStorage.setItem(`database/dbbackup-${(Date.now()/100).toFixed()}.bin`, dbData)
} }
console.log('saved')
} }
await sleep(500) await sleep(500)
} }
} }
async function getDbBackups() {
}
let usingSw = false let usingSw = false
export async function loadData() { export async function loadData() {