{ openMenu = false }}> {#if $selectedCharID < 0} {: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 $DataBase.useChatSticker && currentCharacter.type !== 'group'}

{toggleStickers = !toggleStickers}} class={"ml-4 bg-gray-500 flex justify-center items-center w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-white')}>

{/if}

{
                        if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
                            if($DataBase.sendWithEnter){
                                send()
                                e.preventDefault()
                            }
                        }
                        if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
                            reroll()
                            e.preventDefault()
                        }
                    }}
                    on:input={()=>{updateInputSizeAll();updateInputTransateMessage(false)}}
                    style:height={inputHeight}
                />

{#if $doingChat || doingChatInputTranslate}
                    <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" on:click={abortChat}>
                        <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>
            {#if $DataBase.useAutoTranslateInput}
                <div class="flex items-center mt-2 mb-2 w-full">
                    <label for='messageInputTranslate' class="text-neutral-200 ml-4">
                        <LanguagesIcon />
                    </label>
                    <textarea id = 'messageInputTranslate' class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                        bind:value={messageInputTranslate}
                        bind:this={inputTranslateEle}
                        on:keydown={(e) => {
                            if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
                                if($DataBase.sendWithEnter){
                                    send()
                                    e.preventDefault()
                                }
                            }
                            if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
                                reroll()
                                e.preventDefault()
                            }
                        }}
                        on:input={()=>{updateInputSizeAll();updateInputTransateMessage(true)}}
                        placeholder={language.enterMessageForTranslateToEnglish}
                        style:height={inputTranslateHeight}
                    />
                </div>
            {/if}
            
            {#if toggleStickers}
                <div class="ml-4 flex flex-wrap">
                    <AssetInput bind:currentCharacter={currentCharacter} onSelect={(additionalAsset)=>{
                        let fileType = 'img'
                        if(additionalAsset.length > 2 && additionalAsset[2]) {
                            const fileExtension = additionalAsset[2]
                            if(fileExtension === 'mp4' || fileExtension === 'webm')
                                fileType = 'video'
                            else if(fileExtension === 'mp3' || fileExtension === 'wav')
                                fileType = 'audio'
                        }
                        messageInput += `<span class='notranslate' translate='no'>{{${fileType}::${additionalAsset[0]}}}</span> *${additionalAsset[0]} added*`
                        updateInputSizeAll()
                    }}/>
                </div>    
            {/if}

{#if $DataBase.useAutoSuggestions}
                <Suggestion messageInput={(msg)=>messageInput=msg} {send}/>
            {/if}
            
            {#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'}
                        <Chat
                            idx={chat.index}
                            name={$DataBase.characters[$selectedCharID].name} 
                            message={chat.data}
                            img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
                            rerollIcon={i === 0}
                            onReroll={reroll}
                            unReroll={unReroll}
                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $DataBase.showMemoryLimit}
                            character={$DataBase.characters[$selectedCharID]}
                        />
                    {:else}
                        <Chat
                            idx={chat.index}
                            name={findCharacterbyId(chat.saying).name} 
                            rerollIcon={i === 0}
                            message={chat.data}
                            onReroll={reroll}
                            unReroll={unReroll}
                            img={getCharImage(findCharacterbyId(chat.saying).image, 'css')}
                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $DataBase.showMemoryLimit}
                            character={findCharacterbyId(chat.saying)}
                        />
                    {/if}
                {:else}
                    <Chat
                        character={$DataBase.characters[$selectedCharID]}
                        idx={chat.index}
                        name={$DataBase.username} 
                        message={chat.data}
                        img={getCharImage($DataBase.userIcon, 'css')}
                        isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $DataBase.showMemoryLimit}
                    />
                {/if}
            {/each}
            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
                {#if $DataBase.characters[$selectedCharID].type !== 'group'}
                    <Chat
                        character={$DataBase.characters[$selectedCharID]}
                        name={$DataBase.characters[$selectedCharID].name}
                        message={$DataBase.characters[$selectedCharID].firstMsgIndex === -1 ? $DataBase.characters[$selectedCharID].firstMessage :
                            $DataBase.characters[$selectedCharID].alternateGreetings[$DataBase.characters[$selectedCharID].firstMsgIndex]}
                        img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
                        idx={-1}
                        altGreeting={$DataBase.characters[$selectedCharID].alternateGreetings.length > 0}
                        onReroll={() => {
                            const cha = $DataBase.characters[$selectedCharID]
                            if(cha.type !== 'group'){
                                if (cha.firstMsgIndex >= (cha.alternateGreetings.length - 1)){
                                    cha.firstMsgIndex = -1
                                }
                                else{
                                    cha.firstMsgIndex += 1
                                }
                            }
                            $DataBase.characters[$selectedCharID] = cha
                        }}
                        unReroll={() => {
                            const cha = $DataBase.characters[$selectedCharID]
                            if(cha.type !== 'group'){
                                if (cha.firstMsgIndex === -1){
                                    cha.firstMsgIndex = (cha.alternateGreetings.length - 1)
                                }
                                else{
                                    cha.firstMsgIndex -= 1
                                }
                            }
                            $DataBase.characters[$selectedCharID] = cha
                        }}
                        isLastMemory={false}

/>
                    {#if !$DataBase.characters[$selectedCharID].removedQuotes && $DataBase.characters[$selectedCharID].creatorNotes.length >= 2}
                        <CreatorQuote quote={$DataBase.characters[$selectedCharID].creatorNotes} onRemove={() => {
                            const cha = $DataBase.characters[$selectedCharID]
                            if(cha.type !== 'group'){
                                cha.removedQuotes = true
                            }
                            $DataBase.characters[$selectedCharID] = cha
                        }} />
                    {/if}
                {/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}

{#if $DataBase.characters[$selectedCharID].ttsMode === 'webspeech' || $DataBase.characters[$selectedCharID].ttsMode === 'elevenlab'}
                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
                            stopTTS()
                        }}>
                            <MicOffIcon />
                            <span class="ml-2">{language.ttsStop}</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 "+ ($DataBase.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} on:click={() => {
                            $DataBase.useAutoTranslateInput = !$DataBase.useAutoTranslateInput
                        }}>
                            <GlobeIcon />
                            <span class="ml-2">{language.autoTranslateInput}</span>
                        </div>
                        
                    {/if}
            
                    <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
                        screenShot()
                    }}>
                        <CameraIcon />
                        <span class="ml-2">{language.screenshot} <Help key="experimental"/></span>
                    </div>

<div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} on:click={async () => {
                        $DataBase.useAutoSuggestions = !$DataBase.useAutoSuggestions
                    }}>
                        <ReplyIcon />
                        <span class="ml-2">{language.autoSuggest}</span>
                    </div>
                    <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>
    .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>