dmitrizzle / chat-bubble Goto Github PK

A way to build plugins on top of chat-bubble. This would let the users customize their setup, allow developers add reusable features and keep the codebase light. Some of the existing features (like being able to remember past conversations) should probably become plugins instead of the core functionality.

Before building this, there should probably be a plan on which parts of the bot should be available to be built on top of:

• Input methods are already "pluggable" - user can add their own input processing, including NLC classifiers. However, this part should probably be re-thought for a better structure and ease of use (plus an easy way to add plugins, instead of typing code).
• Styles are customizable by-default with CSS, this shouldn't be an issue unless someone has a suggestion on how to build it more user-friendly.
• Output methods bot replies could benefit from being able to be filtered, manipulated etc (see #54). This may need to be able to connect to the styles somehow so that the user wouldn't have to install CSS and JS separately, though we have to be careful here not to create bloat.
• Script manipulators this is sort of related to the above. It would be nice to make an easy way to create tools that could manipulate bot's script. Such as loading it on-demand via XHR (this is already built with Archie.AI, however, it would be nice to have something like this accessible as a plugin, rather than a requirement to build code from scratch) - or timing bot output as a feed, see #55

Any ideas, input and suggestions on how to build this while ensuring the minimal size of the final package are highly appreciated.

Feature request.
Hi
I loved the chat-bubble bot!
My limitation is that am new to python, js, and learning on the fly.
I would like to use it for a demo, but am stuck at one area. Am using web2py framework and would like that when a user types a question, the same is saved in db for processing. My humble request is that, how do i append to an sqlite db? For example, even as a user selects or types banana or ice cream, that same is inserted to the db.
Kind regards

Right now the chat bubble works fine, but there might be issues should the conversation options be updated in real-time or need to be more flexible. At very least there should be some sort of concise record of the conversation and user interaction besides computer RAM.

Note: it's still fine to have the system work as-is for now, but data records will need to be created in the following fashion

• Store conversation in immutable JSON object
• This object will need to be processed by our system in some way so that we remember user choices, where they at etc

Hi everyone, I am using chat-bubble for a django application which answers users questions. In my use case I have to process the user input question before giving the answer back.

When the user directly types in a question, I figured out how to process the question with Python and send the answer back to JS (this is done using ajax, see my answer here for further information).

Now the problem comes when the user chose an option, in this case I can't find a way to do some processing and/or call a JS function depending on the option chosen. For example, in the keyboard input example, if we want to compute the number of times the 'banana' option is chosen along the conversation, how can we do that? Or, simplier, how can we call alert('you chosed banana') each time 'banana' is chosen?

In my case I need to record user feedback (options: 'good answer' vs 'bad answer') after each response to improve the chatbot reasoning afterward.

Hope the issue is well explained, thanks for your support 💯

Hi, I am looking to connect this to a websocket. I need the user inputs to be sent to the socket and the output from the socket to be given back as bot's reply. Basically, I have a python model in place handling the conversations. I just want to connect this UI with the python model. Also, I need the bot to be reactive rather than initiative. Any help on this will be much appreciated. Thanks :)

Please give me an example like how I can use this with MEAN stack.
I'm using AngularJS 1.0 with NodeJS and Express and reason behind using this is because I want to store the chat conversation in MongoDB.

Bug or feature request?

Let me know what type of issue this is.

If it's a bug, please provide the full method to reproduce.

How did you end up seeing the bug? What steps did you take to see it?

The bubble bot tutor is OK to explain the simplest things, but a proper doc is needed for advanced cases #11

I am currently using chat-bubble to teach how to prototype bot conversations. I wanted to ask where in bubbles.js - could I change 'says, reply, question and answer' so I could make it easier for others who may not have coding competency to understand what those mean in the index.html.

For example, changing 'says' to 'bot_says'

Bug or feature request?

feature

chat-bubble is a simple, vanilla-JS app written in ES5. It's been thoroughly tested in production and has been delivering stable experience to its users for years. However, I would like to see some integration tests to ensure that this code continues to be stable for many more years.

I recommend cypress via github-actions.

The only downside is that we'll have to have dev-dependencies which will have no effect on production versions of the app but will require additional maintenance from the developers.

I really liked the repo but I didn't understand how can I connect this one with an NLC system such as Amazon Lex.

If it is possible can you provide a tutorial for us?

Thank you so much!

Perhaps this could be better coded wit ES6 + Babel?

• Language is mixed between tech savvy and simplistic
• Some grammar errors
• Bullshit needs minimizing
• Expectations for skills required and amount of work need to be set

Hi,
I am using your chatbubble. I notice that when I use it in a frame, the width of the say bubble reduces (see link https://ibb.co/kVn3Fdr ). I also notice that bubbleContent.offsetWidth in bubble.js for "say" is zero when i test it. This problem does not happen when running chat bubble outside of the frame and on a standalone. Can you assist me here? What do i need to adjust to fix this issue? Here is the link to screenshot: https://ibb.co/kVn3Fdr

Occasionally answer bubble buttons would switch places. Which is really wierd.

Bug or feature request?

Can I select multiple answers at a time? If not please let me know if there is any way that I can do that.
Will help me and the world a lot

If it's a bug, please provide the full method to reproduce.

How did you end up seeing the bug? What steps did you take to see it?

I guess it'll have to be done anyway, even for ES5. Because there's a case of local file access restrictions when working with memory.

Sometimes people click things more than once

this.typeInput() relies on window[convo] instead of internal convo variable.

Now, In documentation, using script tag one can include the file. But, how to use it when this is installed via npm?

Scrolling content down still feels choppy.

It would be great to display date:time of the reply bubbles and even group them based on date.

It has to go.

chatWindow.talk({"a": {
        says: ["aaa"],
        reply: [
            {
                question:"a",
                answer: "a"
            }
        ]
    }},"a");
chatWindow.talk({"b": {
        says: ["bbb"],
        reply: [
            {
                question:"b",
                answer: "b"
            }
        ]
    }},"b");
chatWindow.talk({"c": {
        says: ["ccc"],
        reply: [
            {
                question:"c",
                answer: "c"
            }
        ]
    }},"c");

this will only reply with c's question, how to resolve this issue?

Deemed unsafe... could be replaced with http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string

After taking some input from users and validation like this
if(a.length == 6)
{
chatWindow.talk(
{
"sapcode": {
says: [
"Ok Thankssss...","Please Enter Your Employee ID."
],
reply: o.convo[o.standingAnswer].reply

          }
      
      },
        
        "sapcode"
      )
           
      }

Now I want to ask user to Do you want to submit this form ? And with reply Yes and No
where these code should be added exactly. I'm new in this could you please help me.

Hey. I apologize in advance for bad English.
I need to understand how you can call question bubbles and answer bubbles as easy as possible for example test ("123", question)
I plan to connect to the entire project ai speech kit. Unfortunately there is not enough knowledge to understand how to manually call tiles from html code.

Hi, I tried to implement this in my vue js + vuetify project yet I am unable to go past the reply. I get this error when I click on a reply.



Code: https://pastebin.com/RFTtside

I have no other errors which is why this is confusing me. Does anyone know where should I look? I've tried tons of things and nothing.
Thank you!

if there is a single quote in prefixed reply question it occurred error with
"Uncaught SyntaxError: missing ) after argument list"
on questionsHTML

ie)
if the answer is "i don't care" or else
rest of chat will be stops with javascript error

Bug or feature request?

Let me know what type of issue this is.
When I click between the bubbles (somewhere at the top space between the two bubbles, then all bubbles disappears and chatbot can't move forward.

If it's a bug, please provide the full method to reproduce.

How did you end up seeing the bug? What steps did you take to see it?

Please see the image below, you can test it yourself

Can I able to Store the reply messages of the bot

Text cuts off on small screens for long button sentences

Hey,

it appears this is not working on the latest webpack version, any idea how to fix?

http://prntscr.com/tzoqkq

Bug or feature request?

feature

chat-bubble is a simple, vanilla-JS app written in ES5. It's been thoroughly tested in production and has been delivering stable experience to its users for years. However, I would like to see some integration tests to ensure that this code continues to be stable for many more years.

I recommend jest via github-actions.

The only downside is that we'll have to have dev-dependencies which will have no effect on production versions of the app but will require additional maintenance from the developers.

this is a really interesting project!

does the JSON markup have any ability to fuzzy match on inputs with regex or similar?
or having nodes be looked up based on some type of NLP intent/entity matching?

Right now the animation delay is a little too long.
It's there to give time for the options buttons to disappear, but it'll need to be a bit smarter for better user experience.

Great solution you have created. Do you have an idea for how to manage a case where I have it running inside an iframe (chat-box frame basically) and when the window is closed the initial messages will wrap to single character length. If I do no wrapping, then the result is that nothing will wrap so that does not work either. There is also the case where the user closes the chat box in middle of replies coming from the bot, where the same will happen. Wrapping will take place to one character width.

I think the ideal would be where the chat is progressing only when the window is in focus, and if focus is stopped mid message, it would cancel it and start from where it left next time the user comes back to focus. Do you have an idea how I could achieve this?

Thanks a lot!

I don't know how to delete the user options (example: banana, ice cream) and instead just let him type in the question. I tried to delete 'question' from 'reply' part, replace it with null, with empty string ... but no one seems to work. Can you help me out with it please ?
Thank you

Hi,

Bubble js is awesome but not compatible with Bootstrap. i think clearfix style getting problem.

anyone can have resolve this?

User shouldn't need to build HTML to launch the chat widget

This chat engine is to be used with Watson NLC API so it needs to have an input chat field as an integrated feature or a plugin. These are the proposed steps to implement that.

• Textfield that's designed to work with mobile & desktop screens
• Textfield has send button
• Textfield input is animated up on Enter
• Textfield evokes a custom function
• Plan and understand API data chunking. Currently we have two JSON data sets in our API. As the skillet grows (especially with Watson responses) there may be hundreds of those; we need to make sure we're organized and each of those JSON documents aren't too big and we aren't loading them redundantly if the user requests the same thing twice over, for example.

Until scrolling is necessary, bubbles will. Link on iPhone.

It would be great if the text input could simply toggled on/off. Depending on the dialog it might sometimes make sense to only allow limited choices and sometimes to allow text input. Or is it already possible, e.g. by passing in a "inputCallbackFn" to my "Bubbles" object or by setting it to "null"?

Chat Bubble is not presented correctly in both Edge and Firefox. I would be great if it could be compatible with all major browsers.

Firefox:

Use example 3, with keyboard input. The chat bubbles will flow under the text input area, being barely visible and hardly clickable.

Edge:

Use example 6. See that for a number of possible answers only one is visible. The other options are clickable but invisible, making it impossible for a user to understand their meaning. Also, in example 3 chat bubbles slightly flow under the input area.

• Currently "self" is required to inform JavaScript of the object name assigned to the function. That needs to go as it's ugly and redundant.
• The invocation itself doesn't seem too elegant and I wonder how it'd work with React-type programming. We need to upgrade this; any thoughts?

Bug or feature request?

Bug

If it's a bug, please provide the full method to reproduce.

in the examples there is no typing animation (dots).

I love what you are doing here @dmitrizzle 🙌🏽

I would love to see image url support or img tags for now.

Any time line for this feature?

Current one doesn't really say much about all the capabilities