[feat] Add support for chat stickers

This commit adds support for chat stickers by allowing users to use stickers in chat message window. The users can toggle show additional asset list using a button. Added Additional assets file extension data. Additional assets list shows preview. Optimized render when use streaming api. (prevent markdown again when message not changed) Added controls to Video/Audio Assets
2023-06-22 07:10:18 +09:00
parent 89015ac009
commit d8a5ee5b4e
13 changed files with 200 additions and 37 deletions
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { get } from 'svelte/store';
+    import { FileAudioIcon, PlusIcon } from "lucide-svelte";
+    import { DataBase, setDatabase, type character, type groupChat } from "src/ts/storage/database";
+    import { getFileSrc, saveAsset } from "src/ts/storage/globalApi";
+    import { selectMultipleFile } from "src/ts/util";
+    export let currentCharacter:character|groupChat;
+    export let onSelect:(additionalAsset:[string,string,string])=>void;
+    let assetFileExtensions:string[] = []
+    let assetFilePath:string[] = []
+
+    $:{
+        if(currentCharacter.type ==='character'){
+            if(currentCharacter.additionalAssets){
+                for(let i = 0; i < currentCharacter.additionalAssets.length; i++){
+                    // console.log('check content type ...', currentCharacter.additionalAssets[i][0], currentCharacter.additionalAssets[i][1]);
+                    if(currentCharacter.additionalAssets[i].length > 2 && currentCharacter.additionalAssets[i][2]) {
+                        assetFileExtensions[i] = currentCharacter.additionalAssets[i][2]
+                    } else {
+                        assetFileExtensions[i] = currentCharacter.additionalAssets[i][1].split('.').pop()
+                    }
+                    getFileSrc(currentCharacter.additionalAssets[i][1]).then((filePath) => {
+                        assetFilePath[i] = filePath
+                    })
+                }
+            }
+        }
+    }
+</script>
+{#if currentCharacter.type ==='character'}
+    <button class="hover:text-green-500 bg-gray-500 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
+        if(currentCharacter.type === 'character'){
+            const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
+            currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []
+            if(!da){
+                return
+            }
+            for(const f of da){
+                console.log(f)
+                const img = f.data
+                const name = f.name
+                const extension = name.split('.').pop().toLowerCase()
+                const imgp = await saveAsset(img,'',extension)
+                currentCharacter.additionalAssets.push([name, imgp, extension])
+                currentCharacter = currentCharacter
+            }
+            const db = get(DataBase);
+            setDatabase(db)
+        }
+    }}>
+        <PlusIcon />
+    </button>
+    {#if currentCharacter.additionalAssets}
+        {#each currentCharacter.additionalAssets as additionalAsset, i}
+                <button on:click={()=>{
+                    onSelect(additionalAsset)
+                }}>
+                    {#if assetFilePath[i]}
+                        {#if assetFileExtensions[i] === 'mp4'}
+                            <!-- svelte-ignore a11y-media-has-caption -->
+                            <video class="w-16 h-16 m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
+                        {:else if assetFileExtensions[i] === 'mp3'}
+                            <div class='w-16 h-16 m-1 rounded-md bg-slate-500 flex flex-col justify-center items-center'>
+                                <FileAudioIcon/>
+                                <div class='w-16 px-1 text-ellipsis whitespace-nowrap overflow-hidden'>{additionalAsset[0]}</div>
+                            </div>
+                            <!-- <audio controls class="w-16 h-16 m-1 rounded-md"><source src={assetPath} type="audio/mpeg"></audio> -->
+                        {:else}
+                        <img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={additionalAsset[0]}/>
+                        {/if}
+                    {/if}
+                </button>
+        {/each}
+    {/if}
+{/if}
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -8,6 +8,7 @@
    import { selectedCharID } from "../../ts/stores";
    import { translate } from "../../ts/translator/translator";
    import { replacePlaceholders } from "../../ts/util";
+    
    export let message = ''
    export let name = ''
    export let isLastMemory:boolean
@@ -17,6 +18,7 @@
    export let onReroll = () => {}
    export let unReroll = () => {}
    export let character:character|groupChat|null = null
+    let md:string
    let translating = false
    let editMode = false
    let statusMessage:string = ''
@@ -24,7 +26,8 @@

    let msgDisplay = ''
    let msgTranslated = ''
-    let translated = false;
+    let translated = false
+
    async function rm(){
        const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
        if(rm){
@@ -53,7 +56,7 @@
        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
    }

-    async function displaya(message:string){
+    async function displaya(message:string, isStreaming:boolean = false){
        if($DataBase.autoTranslate && $DataBase.translator !== ''){
            if(msgTranslated==='')
                msgDisplay = replacePlaceholders(message, name)
@@ -64,6 +67,12 @@
        else{
            msgDisplay = replacePlaceholders(message, name)
        }
+
+        if(!md || !isStreaming || isStreaming && idx === $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1) {
+            ParseMarkdown(msgDisplay, character, 'normal').then(mdNew=>{
+                md = mdNew
+            })
+        }
    }

    const setStatusMessage = (message:string, timeout:number = 0)=>{
@@ -74,7 +83,7 @@
        }, timeout)
    }

-    $: displaya(message)
+    $: displaya(message, $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].isStreaming)
 </script>
 <div class="flex max-w-full justify-center" class:bgc={isLastMemory}>
    <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" >
@@ -161,19 +170,17 @@
            </div>
            {#if editMode}
                <AutoresizeArea bind:value={message} />
-            {:else}
-                {#await ParseMarkdown(msgDisplay, character) then md} 
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <span class="text chat chattext prose prose-invert minw-0" on:click={() => {
-                        if($DataBase.clickToEdit && idx > -1){
-                            editMode = true
-                            msgTranslated = ""
-                        }
-                    }}
-                        style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
-                        style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
-                    >{@html md}</span>
-                {/await}
+            {:else if md}
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <span class="text chat chattext prose prose-invert minw-0" on:click={() => {
+                    if($DataBase.clickToEdit && idx > -1){
+                        editMode = true
+                        msgTranslated = ""
+                    }
+                }}
+                    style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
+                    style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
+                >{@html md}</span>
            {/if}
        </span>

--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Suggestion from './Suggestion.svelte';
-    import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, MicOffIcon, PowerIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
+    import { DatabaseIcon, DicesIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
    import { selectedCharID } from "../../ts/stores";
    import Chat from "./Chat.svelte";
-    import { DataBase, type Message } from "../../ts/storage/database";
+    import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
    import { getCharImage } from "../../ts/characters";
    import { doingChat, sendChat } from "../../ts/process/index";
    import { findCharacterbyId, messageForm, sleep } from "../../ts/util";
@@ -17,6 +17,7 @@
    import { stopTTS } from "src/ts/process/tts";
    import MainMenu from '../UI/MainMenu.svelte';
    import Help from '../Others/Help.svelte';
+    import AssetInput from './AssetInput.svelte';

    let messageInput:string = ''
    let messageInputTranslate:string = ''
@@ -28,6 +29,8 @@
    let rerollid = -1
    let lastCharId = -1
    let doingChatInputTranslate = false
+    let currentCharacter:character|groupChat = $DataBase.characters[$selectedCharID]
+    let toggleStickers:boolean = false

    async function send() {
        let selectedChar = $selectedCharID
@@ -218,6 +221,10 @@
            }
        })
    }
+
+    $: {
+        currentCharacter = $DataBase.characters[$selectedCharID]
+    }
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="w-full h-full" style={customStyle} on:click={() => {
@@ -234,6 +241,12 @@
            }
        }}>
            <div class="flex items-end mt-2 mb-2 w-full">
+                {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
+                    <div on:click={()=>{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')}>
+                            <Laugh/>
+                    </div>    
+                {/if}
                <textarea 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={messageInput}
                    bind:this={inputEle}
@@ -299,9 +312,27 @@
                </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'}