Dr Nic

Nifty Threaded IM Chat within Gtalk/Gmail Chat

Ever had IM chats where a conversation splits into multiple topics? You’ll be able to follow along, intelligently piecing together which-message-goes-with-which-topic, until the following scenario inevitably occurs:

  me: What's on this weekend? Going to the football?
  me: Are you and Jackie still seeing each other?
  you: Yes
  me: Eh? Yes - football or yes to Jackie?

That is, eventually the messages become ambiguous as to which topic they go to.

The solution

A designer friend of mine and I discovered this problem every day as we talked about different projects and completely unrelated things. Ironically, this led to a new inline topic: what if each thread/topic could be visually identifiable?

Perhaps we could just modify one of the HTML-based IM clients, such as Gmail Chat/Gtalk (same could be done for Facebook’s IM client I guess), and use twitter-esque #tags to identify threads (no fancy jabber protocol changes). If we did this we could prototype something, see if it was a useful way to solve the multi-threaded IM chat problem. I mean, how hard could it be?

Prototype: Greasemonkey Script (Firefox + Safari)

Since I have a thing for Greasemonkey scripts at the moment (which also run on Safari/Mailplane using GreaseKit), it immediately came to mind as a way to hack into Gmail’s Chat.

After installing Greasemonkey or GreaseKit, click to install the extension for Gmail’s inline Jabber/Gtalk chat.

Restart Gmail, fire up a chat to someone (for example, complain of bugs to drnicwilliams@gmail.com) and try the following:

  greasemonkey is fun
  gmailchat is very nifty and hackable
  its cool that I can annotate gmail chat with #greasemonkey
  no way, #gmailchat is colour highlighted
  sexy

Which will look something like the picture at the top.

Sadly, I’m talking to myself here. QA testing can be a lonely man’s sport.

Success?

Technically, yes. I mean, it works. You use a different #tag and it will be a different colour.

It was a prototype to determine if using #tags was a friendly, non-invasive way to identify threads. And it kind-of works, as long as you remember to use them. In IM, less-so than twitter, it seems unnatural to add #tags, or prefix a keyword with a # character. But, in time, I think you’d learn to do it to get the benefit.

The bigger issue is that I don’t want to use Gmail’s Chat for my IM client. I didn’t find the source to Apple’s iChat client lying around on github; and I really don’t want to go hacking Cocoa/Win32 apps just to try out an idea. A greasemonkey script is an awesome way to try out something like this.

Now, if everyone could just make this idea of #tagging intra-IM conversation threads/topics, then perhaps 5 years from now Apple will pick it up and implement it in iChat. Any of the more accessible, open source clients could implement this too. Probably a lot sooner.

Known bugs

In Mailplane (though not Safari), the 2nd+ threads aren’t coloured differently. I’m having trouble fixing this at the moment due to an issue in blue-ridge’s setup on Safari.

It currently shares thread colouring across all open chat windows. Probably not a big issue. I forgot to consider multiple chat windows when I wrote the code.

When you use a new #tag, it only finds one previous message with ‘tag’ in it. Really, once a word is #tagged, then any message containing ‘tagged’ could be included in the thread.

Quirky thing I learned

You can’t really use the jquery.livequery.js plugin to watch for DOM changes in Greasemonkey scripts. It works by hooking into jQuery DOM modification calls, such as append and prepend, to know instantly that something has changed. Gmail, and many other websites, don’t use jQuery. So it doesn’t work. Even though your beautiful unit tests say it will. Use setInterval instead.

Project status

It’s finished. It was a prototype to try out an idea. It has unit tests, it works and if you want to use it for your own research project or “oh oh oh how cool would it be if…?” hackathon, go for gold with the code base. Rename it, abuse it. Have fun.

Source on github: http://github.com/drnic/threaded-gtalk-gmscript/

A pleasant word from my sponsor

When I was hacking on Threaded Gtalk GMScript, I wasn’t doing something more productive at my firm Mocra. Ironically, you could reward my wayward efforts by considering us for your awesome new Rails or iPhone project. It will make you happy. Especially if its chock-full of JavaScript.

Related posts:

  1. TDD for Greasemonkey scripts; and introducing Ninja Search JS “this article shows how I used test-driven development tools and...
  2. Prototype: “element-id”.$() instead of $(‘element-id’) The Prototype library gives us the $() operation for converting...
  3. Yehuda Katz starts a blog Yehuda is the creator of autoDB – the wonderful admin...
  4. Ajax on Rails – Prototype vs JQuery [Original article published on DevLounge - please post comments there]...

7 Responses to “Nifty Threaded IM Chat within Gtalk/Gmail Chat”

  1. [...] This post was Twitted by _erlend [...]

  2. Sam Figueroa says:

    Wow I love this idea. I like what you’re hacking up with Greasemonkey lately. Nice job. I’ll have to give this one a try.

  3. solars says:

    very nice :)
    would be a cool feature for google wave? :)

  4. AirForce1 says:

    I must firstly install Greasemonkey and give it a try! Thanks, nice coding.

  5. Mike Silva says:

    At eWeb Marketing Management we are always engaging in multi-topic chats that get rather confusing as we bounce back and forth from one to another. Up till now we would have to close out the sessions and start again to make sense of it all. This has real possibilities for our project management chats…. can’t wait to try it out.

  6. Dr Nic says:

    @Mike – if your own chat system is also HTML based, then the script could be adapted for it + built in to the HTML itself so clients automatically have it installed.

  7. Stuart Fraser says:

    I love the idea. Multi-threaded conversations can become a real guessing game. I looked at your prototype and didn’t see anything until you mentioned to look at the prototype, which again looked like ti was all the same colour. I then realised that we red/green colour deficient men have a problem with colours like this.

    Facebook has a chat feature too, one that I use more often than some of the other clients.