Real-time chat bot using 2 pages. Possible?

advanced-prototyping
#1

Hi everyone,

Have been following the forum for a long time now and it’s always been of great help.
Now I have a problem I can’t find a solution to.

For demo purposes, my client wants to simulate a real-time chat bot experience.

The setup is simple:

  1. One Axure prototype
  2. Admin UI for the chat (view only)
  3. User UI for the chat

My client wants the Admin chat to update automatically based on the response selected by the user in another tab. My understanding is that Axure is not able to communicate changes made on another page in real-time, even using global variables.

Any thoughts how to achieve that or confirmation that this is not possible yet?

Thank you

#2

hope this helps a little

#3

Thank you for your response. It’s a great chatbot by the way.
However I need to make two instances of it located on different pages to communicate with each other. So you think it’s real?

#4

You can use global variables or use dynamic panels for different states that way you can simulate the 2 communicating with each other

#5

No, that won’t work for what they’re requesting. They want two simultaneous instances of a prototype open and communicating from one to the other.

This isn’t possible currently with Axure without a lot of hacking. But then at that point you’ve basically built it without Axure.

#6

i suppose so why do all that work in axure when it can be done using code really.

#7

Thank you for your prompt response. I’ve passed this on to my client. Hope it brings some clarity to our common understanding.

#8

@Vladislav,

I think you might be able to pull this off with Axure. Are you creating this for a demonstration of the concept, a usability test with “untrained participants” or something else? You should be able to effectively get across the concept and experience you are designing.

Actually, you can do this. Since this is all done in one prototype, you can use global variables to pass information along from one page to another. You can also create an event listener of sorts, a “repeating function” made from a dynamic panel, that tests values of global variables every N milliseconds, on one or each page. I came up with this method to demonstrate a website updating a mobile app in real time. Basically, you need a dynamic panel with two states. Set the panel to “Next” state, wrap, and repeat every 500 ms (to check variables every half-second; you can speed this up or slow it down depending on how responsive you need your “real time experience” and how responsive you need the rest of your prototype.) In the dynamic panel’s OnStateChange event, test global variable(s) for changes. You can use a hash character such as ‘#’ or ‘+’ at the beginning of your global var value to indicate a new change, then strip it off once detected.

If I get a little time I’ll create a demo of this to demonstrate this approach.

#9

That’s an interesting approach, and could work. Even with a child popup window you could have it on two different monitors of the same computer.

However one could not do this on two separate computers or even separate tabs in a browser (but a popup is sort of like this.)

#10

Thank you for your input.
Recently I have created this chatbot.rp (73.2 KB)

It works like this:

  1. You reply with a Yes to the chatbot on User page > global var 1 changes its value to 1
  2. In the same tab you go to Admin page > frame refreshes and fetches the global var change > ‘syncs’ the chat and shows messages that are visible on User page
  3. You go to User page again and reply with a Yes to another question > global var 2 changes its value to 1
  4. In the same tab you go to Admin page > frame refreshes and fetches the global var change > ‘syncs’ the chat and shows messages that are visible on User page

@mbc66 if you could make the global var check for updates without having to switch between the 2 pages (while having them open in 2 different tabs) that would be amazing!

I tried to use the trick with a DP you described on one page and noticed that the other page that doesn’t have this repeating DP updates the interaction traces in the console tab. This makes me think that we’re somewhere close to make this real-time experience happen.

#11

@Vladislav,

I’ll take a look at your .rp… Here is what I came up with:
Chatbot Demo.rp (116.9 KB)

There are “chat control functions” on each page; Home, User Chat and Admin Chat. When one actor sends text it shows up on the other actor’s screen. To demonstrate the “bot” aspect, if the user sends a question (anything with a ‘?’ char) the Admin automatically responds. The Home screen shows both Admin and User screens via two inline frames and keeps track of which screen is active. Take a look at the Send Button and “chat control functions” code to see how it works. Prepending ‘##’ to the global variable userChat triggers the function on Admin Chat screen to update the chat thread. Likewise for the global variable adminChat. Prepending either variable with ‘@@’ triggers the Home screen to indicate which actor’s screen is active.

This won’t work with separate computers, browsers or tabs. @nkrisc suggestion to put one window in a popup window sounds pretty good. You could perhaps have a setup with two monitors and two keyboards on the same computer, but one prototype in a browser window wide enough to span both displays. Set the “User Screen” portion on the left and the “Admin Screen” portion way over on the right, so that only one is visible on each monitor. As long as both keyboards are not typing at same time it should work.

I think to go beyond this you’d be better off to create something with server-side code like Python, and append the URL and/or a commonly accessed server text file to handle the chat updates.

#12

Hey @mbc66,

Thank you very much for your efforts. This is very smart what you did on your prototype actually .

#13

Hi @mbc66, this is a great demo.

Thanks for taking the time building and posting.

I’m wondering if there would be a way to list the ‘user’ text within the thread on the right and replies from ‘admin’ on the left? At the moment text is listed underneath each other.

Thanks,

Billy

#14

You would think this would be easy to do, but it just isn’t with this simple approach. It is possible to format the text using the “rich text” option in the “Set text to” droplist, but the formatting is lost at every updated chat input because the text widget is set to its current text plus the new chat text, and unfortunately, the text formatting isn’t carried in the local variable, [[LVAR1]]. Perhaps this has been improved in RP9 though?

Here is another approach, using repeaters to represent the chat thread. Every chat input is a new row, and each row in the repeater has a dynamic panel with two states: “user” and “admin”. In this way, the two “agent” types can have completely different styling and positioning. The drawback is that each repeater row will be the same height and width. So, the “chat bubbles” in each row will always be the same height regardless of the length of the text content. In this demo it looks fine for one or two lines of text, but more than that overflows poorly.

Chatbot Demo 2.rp (128.5 KB)

Hopefully, this might be good enough for your purposes. If not, you can try some rudimentary sizing of the chatInputUser and chatInputAdmin widgets in the OnItemLoad event, based on the length of the text in the Input column (this would be represented as [[ Item.Input.length ]] , but would be pretty inaccurate with proportional fonts. So, err on the liberal side–in other words, add more height than you think you might need. You can use some javascript injection to vary the width of the chat bubble widgets but I haven’t found a way to set the height by determining how many rows the text would take when rendered in the browser.

closed #15

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.