{ openMenu = false }}> {#if $selectedCharID < 0} {#if $PlaygroundStore === 0} {:else} {/if} {:else}

{ //@ts-ignore const scrolled = (e.target.scrollHeight - e.target.clientHeight + e.target.scrollTop) if(scrolled < 100 && $CurrentChat.message.length > loadPages){ loadPages += 15 } }}>

{#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}

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

{/if} {#if !$DataBase.useAdvancedEditor}

{
                        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}
                />
                {:else}
                <AdvancedChatEditor 
                    bind:value={messageInput}
                    bind:translate={messageInputTranslate}
                    on:change={(e) => { updateInputTransateMessage(e.detail.translate);}}
                 />
                {/if}

{#if $doingChat || doingChatInputTranslate} 
                    <div
                        class="mr-2 bg-selected flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
                        <div class="loadmove chat-process-stage-{$chatProcessStage}" class:autoload={autoMode}>
                        </div>
                    </div>
                {:else}
                    <div on:click={send}
                        class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
                    </div>
                {/if}
                {#if $CurrentCharacter.chaId !== '§playground'}
                    <div on:click={(e) => {
                        openMenu = !openMenu
                        e.stopPropagation()
                    }}
                    class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
                    </div>
                {:else}
                    <div on:click={(e) => {
                        $CurrentChat.message.push({
                            role: 'char',
                            data: ''
                        })
                        $CurrentChat = $CurrentChat
                    }}
                        class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Plus />
                    </div>
                {/if}
            </div>
            {#if $DataBase.useAutoTranslateInput && !$DataBase.useAdvancedEditor && $CurrentCharacter.chaId !== '§playground'}
                <div class="flex items-center mt-2 mb-2">
                    <label for='messageInputTranslate' class="text-textcolor ml-4">
                        <LanguagesIcon />
                    </label>
                    <textarea id = 'messageInputTranslate' class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton 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 fileInput.length > 0}
                <div class="flex items-center ml-4 flex-wrap p-2 m-2 border-darkborderc border rounded-md">
                    {#each fileInput as file, i}
                        {#await getInlayImage(file) then inlayImage}
                            <img src={inlayImage.data} alt="Inlay" class="max-w-24 max-h-24">
                        {/await}
                    {/each}
                </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=(
                    ($DataBase.subModel === "textgen_webui" || $DataBase.subModel === "mancer" || $DataBase.subModel.startsWith('local_')) && $DataBase.autoSuggestClean
                    ? msg.replace(/ +$.+?$ *$| - [^"'*]*?$/, '')
                    : msg
                )} {send}/>
            {/if}
            
            {#each messageForm($CurrentChat.message, loadPages) as chat, i}
                {#if chat.role === 'char'}
                    {#if $CurrentCharacter.type !== 'group'}
                        <Chat
                            idx={chat.index}
                            name={$CurrentCharacter.name} 
                            message={chat.data}
                            img={getCharImage($CurrentCharacter.image, 'css')}
                            rerollIcon={i === 0}
                            onReroll={reroll}
                            unReroll={unReroll}
                            isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                            character={$CurrentSimpleCharacter}
                            largePortrait={$CurrentCharacter.largePortrait}
                            MessageGenerationInfo={chat.generationInfo}
                        />
                    {: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={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                            character={chat.saying}
                            largePortrait={findCharacterbyId(chat.saying).largePortrait}
                            MessageGenerationInfo={chat.generationInfo}
                        />
                    {/if}
                {:else}
                    <Chat
                        character={$CurrentSimpleCharacter}
                        idx={chat.index}
                        name={$CurrentUsername} 
                        message={chat.data}
                        img={getCharImage($CurrentUserIcon, 'css')}
                        isLastMemory={$CurrentChat.lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                        largePortrait={$DataBase.personas[$DataBase.selectedPersona].largePortrait}
                        MessageGenerationInfo={chat.generationInfo}
                    />
                {/if}
            {/each}
            {#if $CurrentChat.message.length <= loadPages}
                {#if $CurrentCharacter.type !== 'group' && $CurrentCharacter.chaId !== '§playground'}
                    <Chat
                        character={$CurrentSimpleCharacter}
                        name={$CurrentCharacter.name}
                        message={$CurrentCharacter.firstMsgIndex === -1 ? $CurrentCharacter.firstMessage :
                            $CurrentCharacter.alternateGreetings[$CurrentCharacter.firstMsgIndex]}
                        img={getCharImage($CurrentCharacter.image, 'css')}
                        idx={-1}
                        altGreeting={$CurrentCharacter.alternateGreetings.length > 0}
                        largePortrait={$CurrentCharacter.largePortrait}
                        onReroll={() => {
                            const cha = $CurrentCharacter
                            if(cha.type !== 'group'){
                                if (cha.firstMsgIndex >= (cha.alternateGreetings.length - 1)){
                                    cha.firstMsgIndex = -1
                                }
                                else{
                                    cha.firstMsgIndex += 1
                                }
                            }
                            $CurrentCharacter = cha
                        }}
                        unReroll={() => {
                            const cha = $CurrentCharacter
                            if(cha.type !== 'group'){
                                if (cha.firstMsgIndex === -1){
                                    cha.firstMsgIndex = (cha.alternateGreetings.length - 1)
                                }
                                else{
                                    cha.firstMsgIndex -= 1
                                }
                            }
                            $CurrentCharacter = cha
                        }}
                        isLastMemory={false}

/>
                    {#if !$CurrentCharacter.removedQuotes && $CurrentCharacter.creatorNotes.length >= 2}
                        <CreatorQuote quote={$CurrentCharacter.creatorNotes} onRemove={() => {
                            const cha = $CurrentCharacter
                            if(cha.type !== 'group'){
                                cha.removedQuotes = true
                            }
                            $CurrentCharacter = cha
                        }} />
                    {/if}
                {/if}
            {/if}

{#if openMenu}
                <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor rounded-md" on:click={(e) => {
                    e.stopPropagation()
                }}>
                    {#if $CurrentCharacter.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 $CurrentCharacter.ttsMode === 'webspeech' || $CurrentCharacter.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"
                        class:text-textcolor2={($CurrentChat.message.length < 2) || ($CurrentChat.message[$CurrentChat.message.length - 1].role !== 'char')}
                        on:click={() => {
                            if(($CurrentChat.message.length < 2) || ($CurrentChat.message[$CurrentChat.message.length - 1].role !== 'char')){
                                return
                            }
                            sendContinue();
                        }}
                    >
                        <StepForwardIcon />
                        <span class="ml-2">{language.continueResponse}</span>
                    </div>

{#if $DataBase.showMenuChatList}
                        <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}
                    
                    {#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}</span>
                    </div>

<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
                        const res = await postChatFile(messageInput)
                        if(res?.type === 'image'){
                            fileInput.push(res.data)
                            updateInputSizeAll()
                        }
                        if(res?.type === 'text'){
                            messageInput += `{{file::${res.name}::${res.data}}}`
                            updateInputSizeAll()
                        }
                    }}>
                        <ImagePlusIcon />
                        <span class="ml-2">{language.postFile}</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={() => {
                        $CurrentChat.modules ??= []
                        openModuleList = true
                        openMenu = false
                    }}>
                        <PackageIcon />
                        <span class="ml-2">{language.modules}</span>
                    </div>

{#if $DataBase.sideMenuRerollButton}
                        <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>
                    {/if}
                </div>

{/if}
        </div>

{/if}
</div>
<style>

.chat-process-stage-1{
        border-top: 0.4rem solid #60a5fa;
        border-left: 0.4rem solid #60a5fa;
    }

.chat-process-stage-2{
        border-top: 0.4rem solid #db2777;
        border-left: 0.4rem solid #db2777;
    }

.chat-process-stage-3{
        border-top: 0.4rem solid #34d399;
        border-left: 0.4rem solid #34d399;
    }

.chat-process-stage-4{
        border-top: 0.4rem solid #8b5cf6;
        border-left: 0.4rem solid #8b5cf6;
    }

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

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