/me command for chat

Question

I love the "action" command /me found elsewhere, and think it would be fun to have in the chat. A message like:

/me loves the new chat system

Would show up as:

Josh loves the new chat system

Rather than:

Josh: loves the new chat system

I'm trying to think how it would work with the "bubbles" style. Maybe any messages starting with /me would flip-flop the user's icon and name, and would not be in a bubble. Suggestions welcome.

Answer 1

Okay, well this has been a contentious debate but in the spirit of Friday, and the Friday opening a long weekend (here in the US anyway) I propose the following solution, which I hereby make Community Wiki so those jQuery experts out there can improve it:

To add support for the /me command, if you so choose, bookmark the following:

javascript: var meRe=/^\/me .*$/;var doMe=function() { $('div.message').each(function() {var c=$(this).find('div.content');if(c.length && meRe.test(c[0].innerHTML)){var a=c[0].innerHTML.substr(3);var uc=c.parents('div.user-container');if(uc.find(".message").length>1){c.remove();uc=$('<div class="'+uc[0].className+'"></div>').append(uc.find("div.signature").clone()).append('<div class="message">'+a+'</div>').insertAfter(uc);}else{c.parents(".message").unwrap().html(a); }uc.css("font-style","italic").find('div.signature').children(".avatar,.username,.flair").hide().end().find(".tiny-signature").css("padding",0).show().find(".avatar").hide();}})};void(window.setInterval(doMe, 500))

Then, when in a chat room, open that bookmarklet and all /me messages will be (very crudely) rewritten.

If you prefer greasemonkey (or the Chrome / Opera equivalent), then you get the luxury of a script that doesn't have to all fit on one line:

// ==UserScript==
// @name           So Do Me
// @namespace      http://shog9.com/greasemonkey/scripts
// @description    Attractive display for comments prefixed with /me on SO Chat
// @version        1.1
// @include        http://chat.meta.stackexchange.com/rooms/*
// @include        http://chat.stackexchange.com/rooms/*
// ==/UserScript==

var script = document.createElement("script");
script.textContent = "(" + grease.toString() + ")()";
document.body.appendChild(script);

function grease()
{
  var meRe = /^\/me .*$/;
  var doMe = function ()
  {
    $('div.message').each(function ()
    {
      var c = $(this).find('div.content');
      if (c.length && meRe.test(c[0].innerHTML))
      {
        var a = c[0].innerHTML.substr(3);
        var uc = c.parents('div.user-container');
        if ( uc.find(".message").length > 1 )
        {
          c.remove();
          uc = $('<div class="' + uc[0].className + '"></div>')
            .append(uc.find("div.signature").clone())
            .append('<div class="message">' + a + '</div>')
            .insertAfter(uc);
        }
        else
        {
          c.parents(".message").unwrap().html(a);
        }

        uc.css("font-style", "italic")
          .find('div.signature')
            .children(".avatar,.username,.flair")
              .hide().end()
            .find(".tiny-signature")
              .css("padding",0)
              .show()
              .find(".avatar")
                .hide();
      }
    })
  };
  window.setInterval(doMe, 500);
}

And if anyone wants to roll this code into the real system, feel free! Happy Friday...

Answer 2

Live chat is, by nature, a less formal discussion environment.

The /me syntax is ubiquitous and extends far beyond IRC. It is more commonly referred to as an "emote."

Emote (v) - to show or pretend emotion

Discussions, whether serious or informal, frequently involve emotions. There is a difference between the following two expressions of emotion, even if it is a slight one:

<Diago> I am angry!
* Diago is angry!

Considering that /me is used quite often currently, without explicit support, I do believe implementing it will be an improvement to the system.

Answer 3

/me would like such a feature

But /me thinks it would be unnecessary.

/me feels that while it would improve the atmosphere of chat, it wouldn't help much--people will deviate a lot from adding good content{*}

/me now feels that it will make the site tend towards Facebook. Not too much, mind you.

/me feels that there's not much of a difference between a stylised bubbly /me and a normal displayed /me. C'mon, everyone knows what it means. They don't need an extra bubble-visual-cue for that. Use the userscript if you want it.

/me wants a waffle

^{*Hypocrisy alert--/me spends too much of his time on MSO, which does count as deviation.. But he has his reasons}

Answer 4

The "Chat" aspect was created for discussion. It was created so that issues which were being hammered out in long convoluted comment threads could be discussed in real-time on in a separate area.

This is in no way enhanced by the ability to say "Devin likes ponies". Or even

devinb: I feel strong about this.
devinb stands up.
devinb: It is absolutely imperative that you use a factory pattern. (or jQuery)

Allowing these /me comments simply creates less of a "serious discussion" and more of a "carnival" atmosphere, where we are encouraged to /sing and /dance for each others amusement.

Answer 5

This is my solution (I tried to make it look as much like the screenshot as possible):

function me() {
    $('.message .content').each(function() {
        if(this.innerHTML.indexOf('/me ') === 0 && this.innerHTML.trim().length > 4) {
            var container = $(this).parents('.user-container');
            var inner = document.createElement('div');
            inner.innerHTML = container.find('.username').html() + ' ' + this.innerHTML.substr(4);
            inner.id = $(this).parents('.message').attr('id');
            inner.className = $(this).parents('.message').attr('class');
            var me_box = container.clone();
            me_box.css({display: 'block', clear: 'both', fontSize: '.9em'});
            me_box.find('.signature').css('width', 'auto');
            me_box.find('.tiny-signature').css({display: 'block', padding: '0'});
            me_box.find('.messages, .username, .flair, .clear-both').remove();
            me_box.append(inner);
            container.after(me_box);
            $(this).parents('.message').remove();
            if(!container.find('.message').length) {
                container.remove();
            }
        }
    });
}
me();
setInterval(me, 500);
void 0;

It looks like this: