Threaded chat support for NodeBB

phenomlab

@cagatay it’s in the first post

https://sudonix.org/topic/538/adding-a-banner-to-chat-messages/30

cagatay

thank you did it, but there is a small problem, button is transparented and do not seem.

phenomlab

@cagatay this is because your are using the sudonix theme which isn’t stock Harmony which this post is designed for.

You will need custom CSS to resolve this which is why I am reluctant to provide the sudonix code and associated themes because of the issues it will cause further down the line when you attempt to use add-on code that is not designed for direct usage, but for stock Harmony.

DownPW

hello @phenomlab

Test the last code.
Working very well, definitively better

Notice the bug for system event persist even having updated the chat banner code

And other question : I see that there is no border for the arrows, can we add some like this ?

phenomlab

@DownPW Yep. Let me have a quick look.

phenomlab

@DownPW said in Threaded chat support for NodeBB:

And other question : I see that there is no border for the arrows, can we add some like this ?

This is actually a lot more complex than it looks - mostly because you cannot draw an additional border around the pseudo element because one already exists. It’s still possible, with the below changes

[data-self="1"].threaded {
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */
}
[data-self="0"].threaded {
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */
}

[data-self="1"].threaded {
    border: 1px solid var(--bs-border-color);
}
[data-self="0"].threaded {
    border: 1px solid var(--bs-border-color);  
}
[data-self="0"].threaded::before {
    border-color: transparent var(--bs-border-color) transparent transparent !important;
}
[data-self="0"].threaded:after {
    content: " ";
    position: absolute;
    top: 20px;
    z-index: 2;
    border: 15px solid var(--bs-body-bg);
    border-color: transparent var(--bs-body-bg) transparent transparent !important;
    left: -14px;
    border-width: 15px 15px 15px 0;
}
[data-self="1"].threaded::before {
border-color: transparent transparent transparent var(--bs-border-color) !important;
}
[data-self="1"].threaded:after {
    content: " ";
    position: absolute;
    top: 20px;
    z-index: 2;
    border: 15px solid var(--bs-body-bg);
    border-color: transparent transparent transparent var(--bs-body-bg) !important;
    right: -29px;
    border-width: 15px 15px 15px 0;
    border: 15px solid var(--bs-body-bg);
}

Obviously, we are removing the box-shadow directive here and replacing it with a border. Then we need to add :after pseudo elements to “overlay” the :before to create the transparent background. This then yields the below effect

If you want to go cheap, you could skip this CSS altogether, and just use a background on the [data-self="0"].threaded and [data-self="1"].threaded elements - as long as it is the same color as the border, it’ll be fine.

For example

[data-self="1"].threaded {
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */
    background: var(--bs-body-navbar);
}
[data-self="0"].threaded {
    /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */
    background: var(--bs-body-navbar);
}
[data-self="0"].threaded::before {
    border-color: transparent var(--bs-body-navbar) transparent transparent !important;
}
[data-self="1"].threaded::before {
    border-color: transparent transparent transparent var(--bs-body-navbar) !important;
}

This would yield

As you can see, it’s a lot less effort to not include any borders. However, there are some great examples shown here - it really depends on how complex you want it to be

https://devsnap.me/css-speech-bubbles

phenomlab

@DownPW said in Threaded chat support for NodeBB:

Notice the bug for system event persist even having updated the chat banner code

I cannot replicate this on your dev environment.

DownPW

hmmm strange same things in incognito mode.
Have you tets to go here :

phenomlab

@DownPW Wait - I see it now - wrong room

Try this

[component="chat/system-message"] {
    clear: both;
}

DownPW

Definitively better, you can add it to git

In any case, enormous work and as usual : many thanks
I think my users will be happy to have this functionality !!!

phenomlab

@DownPW said in Threaded chat support for NodeBB:

I think my users will be happy to have this functionality !!!

Yes, I think this makes chat so much easier to navigate.

DownPW

@phenomlab said in Threaded chat support for NodeBB:

@DownPW said in Threaded chat support for NodeBB:

I think my users will be happy to have this functionality !!!

Yes, I think this makes chat so much easier to navigate.

Yes, it’s actually easier to read and more ergonomic and pretty to top it off ! (I don’t know if this expression exists in English )

phenomlab

@DownPW a perfect translation and expression. Same in English!

DownPW

@phenomlab

you think I can have with result with a background (bubble + arrow) different to border color (more light) ?

EDIT :

Find the trick

@media (min-width:1200px) {
[data-self="1"].threaded {
    width: 50%;
    float: right;
    margin-right: 5% !important;
    transition: margin-left 0.3s ease, margin-right 0.3s ease;
    position: relative;
    padding-bottom: 20px !important;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-navbar);
}
[data-self="1"].threaded::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 20px;
    width: 0;
    z-index: 1;
    right: -30px;
    border-width: 15px 15px 15px 0;
    border: 15px solid var(--bs-border-color);
    border-color: transparent transparent transparent var(--bs-border-color) !important;
    }
[data-self="1"].threaded:after {
    content: " ";
    position: absolute;
    top: 20px;
    z-index: 2;
    border: 15px solid var(--bs-body-bg);
    border-color: transparent transparent transparent var(--bs-body-navbar) !important;
    right: -29px;
    border-width: 15px 15px 15px 0;
    border: 15px solid var(--bs-body-navbar);
}
[data-self="0"].threaded {
    width: 50%;
    float: left;
    margin-left: 5% !important;
    transition: margin-left 0.3s ease, margin-right 0.3s ease;
    position: relative;
    padding-bottom: 20px !important;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-navbar);
}
[data-self="0"].threaded::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 20px;
    width: 0;
    z-index: 1;
    left: -30px;
    border-width: 15px 15px 15px 0;
    border: 15px solid var(--bs-border-color);
    border-color: transparent var(--bs-border-color) transparent transparent !important;
}
[data-self="0"].threaded:after {
    content: " ";
    position: absolute;
    top: 20px;
    z-index: 2;
    border: 15px solid var(--bs-body-navbar);
    border-color: transparent var(--bs-body-navbar) transparent transparent !important;
    left: -14px;
    border-width: 15px 15px 15px 0;
}
    [component="chat/message"] {
        transition: margin-left 0.3s ease, margin-right 0.3s ease;  
    }
    [data-self="1"][component="chat/message"] .message-body-wrapper.threaded {
        float: right;
    }
    [data-self="1"][component="chat/message"] .message-header.threaded{
        float: right;
    }
    [component="chat/message/controls"] {
        top: 30px;
    }
    [component="chat/system-message"] {
        clear: both;
    }
}

DownPW

@phenomlab

It seems that when the 2 codes are together, the thread view for topics no longer works.

On the first screen below, my post should be shifted to the right and it is no longer.
On the other hand, my post in “highlight” mode is quite offbeat

maybe a problem just with my CSS, I’m looking for the directive that could bother me

EDIT :

Seems to find the trick again, just add an !important to thread View post css code

li.pt-4.self-post:not(.self-post .topic-owner-post).threaded {
   margin-left: 0rem !important;
 }

phenomlab

@DownPW said in Threaded chat support for NodeBB:

just add an !important to thread View post css code

Yep. Just don’t overuse that directive.

DownPW

Ok chief

– Result :

DownPW

hello my friend @phenomlab continue t otest and debug, I see this bug.

When you edit your post and save it, you lose the display (or the post simply disappears) and you have to refresh the page to see it again and display it correctly

EDIT:

in public can :edit post lose display/layout
In private chat : edit post lose the post

public :

private:

phenomlab

@DownPW Did you use the necessary patch?

https://github.com/NodeBB/NodeBB/commit/a7517d886f83703dc158c0e2327542156b539eb6

DownPW

this :

$(window).on('action:chat.onMessagesAddedToDom', function(data) {
        	$(document).ready(function() { 
    	    console.log('hook triggered'); 
        threadedChat();
});
});

Seems you have add it on the function.js on github no ?

Threaded chat support for NodeBB

Related Topics

using exclusive nodebb forum data to create a chatgpt chatbot?

Threaded post support for NodeBB

New Code Repository

Setting up a beta NodeBB v3 environment

Neural networks being used to create realistic phishing emails

nodebb chat roll dice game

Detect if user is admin

Easier to read code and pre blocks

Threaded chat support for NodeBB

Related Topics

Individual Categories