<arc-chat-message>

    <div class={ messageCard: true, mine: myMessage, another: !myMessage }>
        <img src="/portal/user/file_out/UsrUser/WsRuvGM9ehmy_Nw36rWdxeMa2__sbgteNeiYhdDQSZavet_sjUehe.jpg/image-jpeg/写真1.jpg/0/113797/1" class="icon" alt="User Image" />
        <p class="name">{myMessage? '自分': name}</p>
        <arc-chat-message-balloon></arc-chat-message-balloon>
    </div>

    <style scoped>

        .messageCard {
            position: relative;
            margin: 0;
            padding: 0;
            border: solid 1px red;
            width: 100%;
        }


        .icon{
            position: absolute;
            top: 8px;
            border-radius: 50%;
            eifth: 32px;
            height: 32px;
        }

        .mine .icon{
            right: 6px;
        }

        .another .icon{
            left: 6px;
        }

        .name{
            position: absolute;
            top: 14px;
            color: #EEE;
            font-size: 0.9em;
        }
        .mine .name{
            right: 54px;
        }
        .another .name{
            left: 53px;
        }

    </style>


    <script>

    </script>

</arc-chat-message>