{ openMenu = false }}> {#if $selectedCharID < 0}

RisuAI

Version {appVer}

{:else}

{ //@ts-ignore const scrolled = (e.target.scrollHeight - e.target.clientHeight + e.target.scrollTop) if(scrolled < 100 && $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length > loadPages){ loadPages += 30 } }}>

{
                        if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
                            send()
                            e.preventDefault()
                        }
                        if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
                            reroll()
                            e.preventDefault()
                        }
                    }}
                    on:input={updateInputSize}
                    style:height={inputHeight}
                />

{#if $doingChat}
                    <div
                        class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
                        <div class="loadmove" class:autoload={autoMode}>
                        </div>
                    </div>
                {:else}
                    <div on:click={send}
                        class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
                    </div>
                {/if}
                <div on:click={(e) => {
                    openMenu = !openMenu
                    e.stopPropagation()
                }}
                class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
            </div>
            </div>
            {#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
                {#if chat.role === 'char'}
                    {#if $DataBase.characters[$selectedCharID].type !== 'group'}
                        {#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
                            <Chat
                                idx={chat.index}
                                name={$DataBase.characters[$selectedCharID].name} 
                                message={chat.data}
                                img={''}
                                rerollIcon={i === 0}
                                onReroll={reroll}
                                unReroll={unReroll}
                            />
                        {:then im} 
                            <Chat
                                idx={chat.index}
                                name={$DataBase.characters[$selectedCharID].name} 
                                message={chat.data}
                                img={im}
                                rerollIcon={i === 0}
                                onReroll={reroll}
                                unReroll={unReroll}

/>
                        {/await}
                    {:else}
                        {#await getCharImage(findCharacterbyId(chat.saying).image, 'css')}
                            <Chat
                                idx={chat.index}
                                name={findCharacterbyId(chat.saying).name} 
                                message={chat.data}
                                rerollIcon={i === 0}
                                onReroll={reroll}
                                unReroll={unReroll}
                                img={''}
                            />
                        {:then im} 
                            <Chat
                                idx={chat.index}
                                name={findCharacterbyId(chat.saying).name} 
                                rerollIcon={i === 0}
                                message={chat.data}
                                onReroll={reroll}
                                unReroll={unReroll}
                                img={im}
                            />
                        {/await}
                    {/if}
                {:else}
                    {#await getCharImage($DataBase.userIcon, 'css')}
                        <Chat
                            idx={chat.index}
                            name={$DataBase.username} 
                            message={chat.data}
                            img={''}
                        />
                    {:then im}
                        <Chat
                            idx={chat.index}
                            name={$DataBase.username} 
                            message={chat.data}
                            img={im}
                        />
                    {/await}
                {/if}
            {/each}
            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
                {#if $DataBase.characters[$selectedCharID].type !== 'group'}
                    {#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
                        <Chat
                            name={$DataBase.characters[$selectedCharID].name}
                            message={ $DataBase.characters[$selectedCharID].firstMessage}
                            img={''}
                            idx={-1}
                        />      
                    {:then im}
                        <Chat
                            name={$DataBase.characters[$selectedCharID].name}
                            message={ $DataBase.characters[$selectedCharID].firstMessage}
                            img={im}
                            idx={-1}
                        />
                    {/await}
                {/if}
            {/if}
            {#if openMenu}
                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
                    e.stopPropagation()
                }}>
                    {#if $DataBase.characters[$selectedCharID].type === 'group'}
                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={runAutoMode}>
                            <DicesIcon />
                            <span class="ml-2">{language.autoMode}</span>
                        </div>
                    {/if}

<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
                        openChatList = true
                        openMenu = false
                    }}>
                        <DatabaseIcon />
                        <span class="ml-2">{language.chatList}</span>
                    </div>
                    {#if $DataBase.translator !== ''}
                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
                            $doingChat = true
                            messageInput = (await translate(messageInput, true))
                            $doingChat = false
                        }}>
                            <LanguagesIcon />
                            <span class="ml-2">{language.translateInput}</span>
                        </div>
                    {/if}
                    <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={reroll}>
                        <RefreshCcwIcon />
                        <span class="ml-2">{language.reroll}</span>
                    </div>
                </div>

{/if}
        </div>

{/if}
</div>
<style>
    .maxw{
        max-width: calc(100vw - 10rem);
    }
    .loadmove {
        animation: spin 1s linear infinite;
        border-radius: 50%;
        border: 0.4rem solid rgba(0,0,0,0);
        width: 1rem;
        height: 1rem;
        border-top: 0.4rem solid #6272a4;
        border-left: 0.4rem solid #6272a4;
    }

.autoload{
        border-top: 0.4rem solid #10b981;
        border-left: 0.4rem solid #10b981;
    }

@keyframes spin {
        
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>