Chat by Siropu

Chat by Siropu [Paid] 1.25.1

No permission to buy (€29.99)
@Siropu

Suggestions:

  • Possibility to schedule a message from ID so eg: "Have a good day all" and schedule this one several times/day?
  • Show images without using the Bbcode button like for youtube videos.
  • Add some options on the dropdown menu like "ban or kick", conversation, advertisement,...
  • Add option for user who want to use reverse shoutbox or normal.
  • Add rooms or a staff room.
  • Add a tag system.
  • Add an option to limit members to view the Shoutbox if not a number of messages without adding/modifying code on some of your templates.
  • Collapse option.
  • Alert sound by message or tag.
  • Add bbcode to use some code like "blink", "flash",...
  • Add an option to put an image on the right side without modifying templates.

Regards,
 
Also, something Taigachat does... when you are on the dedicated chat page, and someone posts a message, there is a notice on your browser tab. This would be nice.
 
How do you BAN people from chat?

Hover their name in the users online > Ban.
Also, when using the All Pages mode, new messages show as being sent from "Chat Bot" until you refresh the page. When the chat is minimized, not opened.
 
I just made some changes to my chat and added the avatars to the left of the messages:

http://8wayrun.com/chat/

I also put the extraTabs position to middle in the listener. And I made a lot of CSS changes.
 
I made some changes to how the "All Pages" lower bar looks like on my site: http://8wayrun.com/

It is now smaller, expands depending on the length of the current content, and disappears when opened.
 
In case anyone wants it... these are the changes I've made...

siropu_chat.css
Code:
#siropuChatBar {
    background-color: @contentBackground;
    border: 1px solid @primaryLighter;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    position: fixed;
    bottom: -1px;
    right: 15px;
    z-index: 1000;
    max-width: 90%;
}
#siropuChatBar a.username:hover {
    text-decoration: none;
}
#siropuChatLastMessage {
    float: left;
    padding: 6px 0 0 35px;
    background: url('data/Siropu/chat/icons/chat.png') 10px 5px no-repeat;
}
#siropuChatLastMessage .muted {
    font-size: 11px;
    padding: 0 10px;
}
#siropuChatToggle {
    float: right;
    display: block;
    padding: 5px 10px;
    background: @primaryLightest;
    border-left: 1px solid @primaryLighter;
    border-top-right-radius: 5px;
}
#siropuChatToggle:hover, .siropuChatActiveTab {
    background: ;
    text-decoration: none;
    background: @primaryLighter !important;
}
#siropuChat {
    position: relative;
    z-index: 1000;
    background: @contentBackground;
    border: 1px solid @primaryLighter;
    border-radius: 5px;
}
#siropuChat.siropuChatAllPages {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
    left: 15px;
}
.siropuChatMaximized {
    top: 15px;
}
.siropuChatMaximized #siropuChatContent  {
    height: 80%;
}
.siropuChatPage.siropuChatMaximized #siropuChatContent {
    height: 600px;
}
#siropuChatHeader {
    padding: 7px 10px;
    background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    border-bottom: 1px solid @primaryLighter;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#siropuChatHeader > h3 {
    display: inline;
    color: @primaryMedium;
}
#siropuChatOptions {
    float: right;
}
#siropuChatSettings {
    padding: 10px;
    background: @contentBackground;
}
#siropuChatSettings label {
    vertical-align: top;
      font-weight: bold;
      font-size: 12px;
}
#siropuChatSelectColor {
    margin: 10px 0;
}
#siropuChatNotice {
    padding: 10px;
    border-bottom: 1px solid @primaryLighterStill;
}
.siropuChatAds {
    padding: 10px;
    text-align: center;
    border-top: 1px solid @primaryLighterStill;
    border-bottom: 1px solid @primaryLighterStill;
}
.siropuChatAds img {
    display: block;
    max-width: 100%;
    height: auto;
}
#siropuChatEditor .siropuChatAds {
    border: 0;
}
#siropuChatContent {
    height: 500px;
}
#siropuChatMessages {
    float: left;
    width: 78%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    background: @contentBackground;
    border-right: 1px solid @primaryLighterStill;
}
#siropuChatMessages > li {
    position: relative;
    margin: 5px 0;
    clear: both;
}
#siropuChatMessages > li:hover {
  
}
#siropuChatMessages > li:first-child {
    margin-top: 0;
}
#siropuChatMessages > li:last-child {
    margin-bottom: 0;
}
#siropuChatMessages .username:hover {
    text-decoration: none;
}
.siropuChatForums #siropuChatMessages {
    width: 75%;
}
#siropuChatUsers {
    height: 100%;
    padding: 10px;
    overflow: auto;
    background: @contentBackground;
}
#siropuChatUsers > li {
    position: relative;  
}
#siropuChatUsers > li:hover {
  
}
#siropuChatUsers .Popup {
    display: inline;
}
#siropuChatUsers .Popup {
    width: 16px;
    height: 16px;
}
.siropuChatMessage {

}
.siropuChatMessage img {
    max-width: 30%;
}
.siropuChatMeta {
    float: right;
}
.siropuChatMeta > *, .siropuChatMod li, #siropuChatOptions > * {
    display: inline-block;
}
#siropuChatToggleUsers {
    display: none;
}
.siropuChatDate {
    padding: 2px 5px;
    background: @primaryLighter;
    border-radius: 5px;
    font-size: 10px;
}
#siropuChatEditor {
    padding: 10px;
    background: @primaryLightest;
    border-top: 1px solid @primaryLighter;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#siropuChatEditor .textCtrl {
    width: 99.3%;
    line-height: 20px;
    margin-bottom: 5px;
}
#siropuChatSubmit {
    float: right;
}
#siropuChatSmilies {
    margin: 5px -10px;
}
#siropuChatSmilies .tabs {
    background: transparent;
}
#siropuChatSmilies ul {
    max-height: 200px;
    overflow: auto;
}
#siropuChatSmilies li {
    display: inline-block;
    cursor: pointer;
}
#siropuChat .avatar img {
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
}
#siropuChat .username {
    font-weight: bold;
}
#siropuChatMessages li > .button {
    padding: 0 2px;
    height: auto;
    line-height: initial;
    outline: 0;
    position: relative;
    bottom: 2px;
    color: #999;
}
#siropuChatMessages li > .button:hover {
    color: #333;
}
#siropuChat .PopupControl {
    background: none;
}
.siropuChatTagged {
    background: @secondaryLighter;
    padding: 5px;
    border-radius: 5px;
}
.siropuChatActive {
    background: url('data/Siropu/chat/icons/user-active.png') right center no-repeat;
}
.siropuChatIdle {
    background: url('data/Siropu/chat/icons/user-idle.png') right center no-repeat;
}
.siropuChatEdit span, .siropuChatDelete span, #siropuChatToggleUsers span {
    height: 12px;
     width: 12px;
     display: block;
    white-space: nowrap;
     text-indent: -9999px;
     font-size: 12px;
}
.siropuChatEdit span {
    background: url('data/Siropu/chat/icons/edit.png') left center no-repeat;
    background-size: 12px 12px;
}
.siropuChatDelete span {
    background: url('data/Siropu/chat/icons/delete.png') left center no-repeat;
    background-size: 12px 12px;
}
#siropuChatToggleUsers span {
    background: url('data/Siropu/chat/icons/chatters.png') left center no-repeat;
    background-size: 14px 14px;
    width: 14px;
    height: 14px;
}
@media (max-width: 768px) {
    #siropuChatBar, #siropuChat.siropuChatAllPages {
        left: 10px;
        right: 10px;
    }
    #siropuChat.siropuChatAllPages {
        bottom: 35px;
    }
    #siropuChatToggleUsers {
        display: inline-block;
    }
    #siropuChatUsers {
        display: none;
        position: absolute;
        top: 40px;
        left: 10px;
        right: 10px;
        border: 1px solid @primaryLighter;
        border-radius: 5px;
        width: auto;
        height: auto;
    }
    #siropuChatMessages {
        float: none;
        width: auto;
        border-right: 0;
    }
    #siropuChatLastMessage {
        float: none;
        margin-bottom: 5px;
    }
    #siropuChatToggle {
        float: none;
        border-radius: 0;
        border-left: 0;
        border-top: 1px solid @primaryLighter;
        text-align: center;
    }
    #siropuChatEditor {
        margin-top: 20px;
    }
}
@media (max-width: 480px) {
    #siropuChat.siropuChatPage, #siropuChat.siropuChatForums {
        margin-bottom: 10px;
    }
    #siropuChat.siropuChatAllPages {
        top: 10px;
    }
    #siropuChatContent {
        height: 70% !important;
    }
    .siropuChatForums #siropuChatContent, .siropuChatPage #siropuChatContent {
        height: 250px !important;
    }
    #siropuChatMessages > li {
        text-align: center;
        padding: 5px 0;
        border-bottom: 1px solid @primaryLighterStill;
    }
    #siropuChatMessages > li:last-child {
        border-bottom: 0;
    }
    .siropuChatPage #siropuChatUsers {
        height: 150px;
    }
    .siropuChatAllPages #siropuChatEditor {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #siropuChatEditor .button {
        font-size: 10px;
        padding: 0 5px;
    }
    #siropuChatEditor .button .fa {
        font-size: 14px;
    }
    #siropuChatSubmit {
        float: none;
        width: 100%;
        margin-bottom: 5px;
    }
    #siropuChatSubmit.siropuChatFaEnabled {
        width: auto;
        margin: 0;
        float: right;
        font-size: inherit;
        font-weight: bold;
    }
    #siropuChatSmilies {
        position: absolute;
        bottom: 40px;
        left: 10px;
        right: 10px;
        border-bottom: 1px solid @primaryLighter;
    }
    #siropuChatEditor {
        text-align: center;
    }
    .siropuChatMeta {
        float: none;
        display: block;
    }
}
@media (max-width: 480px) and (min-height: 600px) {
    #siropuChatContent {
        height: 75% !important;
    }
}
siropu_chat_messages
Code:
<xen:if is="{$chatMessages}">
    <xen:foreach loop="$chatMessages" value="$message">
        <li id="{$message.message_id}" {xen:if '{$message.message_type} != "chat"', ' class="siropuChatBot"', ''} data-author="{xen:if '{$message.username}', '{$message.username}', '{xen:phrase guest}'}">
            <xen:if is="{$message.message_type} == 'chat'">
                <xen:if is="{$xenOptions.siropu_chat_avatars_enabled}">
                    <xen:avatar user="$message" size="s" img="true" />
                </xen:if>
                <a role="button" class="username Tooltip" title="{xen:phrase siropu_chat_tag_user}">{xen:if '{$message.username}', '{xen:helper richusername, $message}', '{xen:phrase guest}'}</a>:
            <xen:else />
                {xen:raw $xenOptions.siropu_chat_bot_name}:
            </xen:if>
            <span class="siropuChatMessage">{xen:helper bbCode, $bbCodeParser, $message.message_text}</span>
            <span class="siropuChatMeta">
                <xen:datetime time="$message.message_date" class="siropuChatDate" />
                <xen:set var="$editMessage">{xen:if '({$visitor.permissions.siropu_chat.editOwn} AND {$visitor.user_id} == {$message.user_id}) || {$visitor.permissions.siropu_chat.editAny}', 1, 0}</xen:set>
                <xen:set var="$deleteMessage">{xen:if '({$visitor.permissions.siropu_chat.deleteOwn} AND {$visitor.user_id} == {$message.user_id}) || {$visitor.permissions.siropu_chat.deleteAny}', 1, 0}</xen:set>
                <xen:if is="{$editMessage} || {$deleteMessage}">
                <ul class="siropuChatMod">
                    <xen:if is="{$editMessage}">
                        <li><a href="{xen:link 'chat/edit', $message}" class="OverlayTrigger siropuChatEdit" title="{xen:phrase edit}...">{xen:if '{$xenOptions.siropu_chat_fa_enabled} AND {$xenOptions.siropu_chat_fa_edit}', '<i class="fa {$xenOptions.siropu_chat_fa_edit}"></i>', '<span>{xen:phrase edit}...</span>'}</a></li>
                    </xen:if>
                    <xen:if is="{$deleteMessage}">
                        <li><a href="{xen:link 'chat/delete', $message}" class="OverlayTrigger siropuChatDelete" title="{xen:phrase delete}...">{xen:if '{$xenOptions.siropu_chat_fa_enabled} AND {$xenOptions.siropu_chat_fa_delete}', '<i class="fa {$xenOptions.siropu_chat_fa_delete}"></i>', '<span>{xen:phrase delete}...</span>'}</a></li>
                    </xen:if>
                </ul>
                </xen:if>
            </span>
        </li>
    </xen:foreach>
</xen:if>

siropu_chat_users
Code:
<xen:if is="{$chatUsers}">
    <xen:foreach loop="$chatUsers" value="$user">
    <li id="{$user.user_id}" class="{xen:if '{xen:calc '{$serverTime} - {$user.user_last_activity}'} <= 300', 'siropuChatActive', 'siropuChatIdle'}" title="{xen:phrase last_activity}: {xen:datetime $user.user_last_activity}">

        <xen:set var="$chatBan">{xen:if '{$visitor.permissions.siropu_chat.ban} AND {$visitor.user_id} != {$user.user_id}', 1, 0}</xen:set>
        <xen:set var="$chatLogout">{xen:if '{$user.user_id} AND {$user.user_id} == {$visitor.user_id}', 1, 0}</xen:set>
      
        <xen:if is="{$chatBan} || {$chatLogout}">
        <div class="Popup">
            <a rel="Menu" class="avatar NoPopupGadget" data-tipclass="flipped"><img src="{xen:helper avatar, {$user}, s}" alt="" /></a>
            <div class="Menu">
                <ul class="secondaryContent blockLinksList">
                    <xen:if is="{$chatBan}">
                        <li><a href="{xen:link 'chat/moderator', '', 'user_id={$user.user_id}', 'action=ban'}" class="OverlayTrigger">{xen:phrase ban}</a></li>
                    </xen:if>
                    <xen:if is="{$chatLogout}">
                        <li><a href="{xen:link 'chat/logout'}" class="siropuChatLogout">{xen:phrase log_out}</a></li>
                    </xen:if>
                </ul>
            </div>
        </div>
        </xen:if>
      
        <xen:username user="$user" rich="true" />
    </li>
    </xen:foreach>
<xen:else />
    <li>{xen:phrase siropu_chat_no_users}</li>
</xen:if>
 
Last edited:
Siropu_Chat_Listener
Code:
<?php

/*
    Copyright (c) Siropu
    This is a PREMIUM PAID Add-on. If you obtained this copy illegally, please go to https://www.siropu.com/ and purchase a licence to get the latest version and to receive support.

    Chat Add-on by Siropu
    XenForo Profile: https://xenforo.com/community/members/siropu.92813/
    Website: https://www.siropu.com/
    Contact: contact@siropu.com
*/

class Siropu_Chat_Listener
{
    public static function load_class_datawriter($class, &$extend)
    {
        switch ($class)
        {
            case 'XenForo_DataWriter_Discussion_Thread':
                $extend[] = 'Siropu_Chat_DataWriter_Discussion_Thread';
                break;
            case 'XenForo_DataWriter_DiscussionMessage_Post':
                $extend[] = 'Siropu_Chat_DataWriter_Discussion_Post';
                break;
        }
    }
    public static function template_create(&$templateName, array &$params, XenForo_Template_Abstract $template)
    {
        if ($templateName == 'PAGE_CONTAINER')
        {
            $template->preloadTemplate('siropu_chat');
            $template->preloadTemplate('siropu_chat_disabled');
        }
    }
    public static function navigation_tabs(array &$extraTabs, $selectedTabId)
    {
        $options = XenForo_Application::get('options');

        if ($options->siropu_chat_enabled
            && $options->siropu_chat_page_enabled
            && (Siropu_Chat_Helper::userHasPermission('view') || Siropu_Chat_Helper::userHasPermission('use')))
        {
            $extraTabs['chat'] = array(
                'href'          => XenForo_Link::buildPublicLink('chat'),
                'title'         => new XenForo_Phrase('siropu_chat'),
                'position'      => 'middle',
                'selected'      => ($selectedTabId == 'chat') ? true : false,
                'linksTemplate' => (Siropu_Chat_Helper::userHasPermission('viewArchive') || Siropu_Chat_Helper::userHasPermission('viewBanned')) ? 'siropu_chat_tab_links' : '',
                'counter'        => count(self::_getModel()->getActiveUsers()),
            );
        }
    }
    public static function template_hook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        if ($hookName == 'page_container_head'
            && self::_getOptions()->siropu_chat_enabled
            && self::_getOptions()->siropu_chat_fa_enabled
            && self::_getOptions()->siropu_chat_fa_include)
        {
            $contents .= '<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">';
        }
        if (in_array($hookName, array('forum_list_nodes', 'footer')))
        {
            $displayMode    = self::_getOptions()->siropu_chat_display_mode;
            $templateParams = $template->getParams();

            if (self::_getOptions()->siropu_chat_enabled
                && (Siropu_Chat_Helper::userHasPermission('view') || Siropu_Chat_Helper::userHasPermission('use'))
                && $templateParams['controllerName'] != 'Siropu_Chat_ControllerPublic_Chat')
            {
                if ($displayMode == 'above_forums_list' && $hookName == 'forum_list_nodes')
                {
                    $contents = self::_getChat($template, $templateParams, true) . $contents;
                }
                else if ($displayMode == 'below_forums_list' && $hookName == 'forum_list_nodes')
                {
                    $contents .= self::_getChat($template, $templateParams, true);
                }
                else if ($displayMode == 'all' && $hookName == 'footer')
                {
                    $contents .= self::_getChat($template, $templateParams);
                }
            }
        }
    }
    protected static function _getChat($template, $templateParams, $nodeList = false)
    {
        $userID  = self::_getVisitor()->user_id;
        $session = self::_getModel()->getSession($userID);

        if ($session['user_is_banned'] && !self::_getOptions()->siropu_chat_banned_view_access)
        {
            return false;
        }

        $settings = Siropu_Chat_Helper::prepareUserSettings($session);

        if (@$settings['disabled'])
        {
            $viewParams = array(
                'nodeList' => $nodeList
            );

            return $template->create('siropu_chat_disabled', array_merge($viewParams, $templateParams));
        }

        $inverse  = $settings ? @$settings['inverse'] : false;
        $messages = self::_getModel()->getMessages(false, array('page' => 1, 'perPage' => self::_getOptions()->siropu_chat_messages_limit), $inverse);

        $displayMode = self::_getOptions()->siropu_chat_display_mode;

        switch ($displayMode)
        {
            case 'all':
                $mode = 'AllPages';
                break;
            case 'above_forums_list':
            case 'below_forums_list':
                $mode = 'Forums';
                break;
        }

        $viewParams = array(
            'chatClass'    => "siropuChat{$mode}",
            'chatMode'     => $displayMode,
            'chatMessages' => $messages,
            'chatLastRow'  => Siropu_Chat_Helper::prepareLastRow($messages, $inverse),
            'chatUsers'    => self::_getModel()->getActiveUsers(),
            'chatSession'  => $session,
            'chatSettings' => $settings,
            'chatColors'   => Siropu_Chat_Helper::prepareColorList(),
            'chatNotice'   => Siropu_Chat_Helper::getNotices(),
            'chatAds'      => Siropu_Chat_Helper::getAds(),
            'bbCodeParser' => XenForo_BbCode_Parser::create(XenForo_BbCode_Formatter_Base::create())
        );

        return $template->create('siropu_chat', array_merge($viewParams, $templateParams));
    }
    protected static function _getVisitor()
    {
        return XenForo_Visitor::getInstance();
    }
    protected static function _getOptions()
    {
        return XenForo_Application::get('options');
    }
    protected static function _getModel()
    {
        return XenForo_Model::create('Siropu_Chat_Model');
    }
}
 
Can you add a welcome message option when a member comes to register?
Post a welcome message in the chat after they register?
I think Siropu uses the default XenForo system for the activity.
Actually, I'm using a custom session for this. I can add the option to set for how long after the last chat activity the user will stay in the chat list with the gray idle indicator.
I will say, I dont like how the CSS system is hard coded. The colors don't really follow the rest of the site; so I had to edit a lot of CSS because of all the hard coded background colors.
It's not really hard coded. All colors are XF's, style properties colors @. I could add style properties to the chat for the main elements to make it easy to customize it.
Also, using the XenForo Alert Bubble system is very easy.
I know, I'm using this with my Ads Manager Add-on. The reason I haven't used this approach is because to me online users don't really count as an alert. I've implemented it for the next version as it probably looks better.
Also, every 5 seconds (the refresh time), the entire chat lags for the refresh. While most wont notice this, if there is an animated gif, or a youtube video in the chat... they lag too.
I haven't noticed this but I think that might be because of the tag system. I've made some changes and hopefully that won't happen again.

@Betclever, some of your suggestions are already on my to do list.
 
The chat at the bottom's font is the same color as the back ground. Its fin on the Chat Page tho, what is the setting to change the font color, I imagine it would be in the css file? ere is a screen shot http://prntscr.com/7ev6y2

I just noticed on the dark alernate skin I have the back ground is white still I would like to match that and make the font white, http://prntscr.com/7ev8ba
 
Will release a new fix soon and after that will add style properties options so you can change the colors. I found out that there are some hard coded backgrounds. I initially changed them all but I don't know what I did that it reverted back.
 
Top Bottom