Feedback and advise on my chatbot build

Hello guys!

Im working on a Javascript Chatbot and would love your feedback on this side project. Im approaching this with the best of my abilities, and the code is a little redundant; but im trying my best to keep it all together.

Im having issues creating an “else” type condition that fires if the program does not recognize the input value. Ive tired writing an else statement, but for some reason the display text gets stuck on the “else” value that is set… if that makes any sense :thinking:

Im also using a TON of if statements and Im wondering if this is the best approach to doing something like this? It feels super repetitive and error prone. But I can’t think of another way at the moment…

Im also using ‘.includes()’ a lot to capture the users input and generate a response. This is working for the time being but I can see myself running into issues with this as the list of possible responses grows and things begin to overlap? Is there a better way to loosely store possible phrases???

ANYWHO :sweat_smile: any and all feedback is welcome. Im having fun building this and just want to know how I can improve it not just from a technical standpoint but also from a user perspective as well.

Any tips or advise will be greatly appreciated.

Thanks for all your help :grinning:

https://codepen.io/TuscannyCodes/pen/WNpogJW

Hi @tuscannypolk !

I think it is off to a good start.

Just a few suggestions.

I think the height of the input field needs to be taller.
Right now, some of the letters are getting cut off.

One of the things with a chatbot is anticipating how the user is going to respond.
One of the first conditions should be if the user does not type in anything.
A message should pop up.

Screen Shot 2021-05-19 at 8.20.51 PM

Also, it would be nice if when the user hits the enter key a response shows up.

One of the reasons why you have so many if statements is because you are looking for very specific phrases from the user.

You might consider adding some buttons as options to help guide the conversation a little bit better.

For example, I am also building a chatbot for my personal project and I have added options for the user to choose from to help guide the user for a smoother conversation.

Screen Shot 2021-05-19 at 8.31.52 PM
Screen Shot 2021-05-19 at 8.33.00 PM

That could be something to consider so the conversation is not so wide open. :grinning:
Hope that helps!

1 Like

Yeah, that’s only in the editor view fortunately. If you check out the full view, or click the link at the very top that I provided; you’ll see the more accurate sizing of the page and layout. It’s getting squished down because of codepen :thinking:

Great idea. I’ll try to work this into the code. I do feel like it may be a bit tricky though, because the default value of the input will be an empty value. I should be able to figure it out though :sweat_smile:

This is a cool idea as well… I really do want to focus on keeping the front-end build as minimal as possible though. But if I get into a jam, I may have to add a few more buttons to better funnel input data :sweat_smile:

My goal is actually to have the phases as non-specific as possible, which is why im using the ‘.includes()’ method to search the input string and grab key words. My objective is to have the user enter general statements and be able to grab certain words from the string, and then trigger an appropriate response. Thats at least what im trying to do if that makes sense :face_with_monocle:

Thanks a bunch for the feedback. Your application is looking great. Are you using react to build your bot? it has a really interesting interface. Is that all CSS styling?

I am using the react chat bot library.

It takes care of the basic UI features so I can just focus on programming the commands.

For my first project, I only used html, css and vanilla javascript.
It was a good learning experience using no libraries and everything was custom.

But the use of libraries helps cut down on time.

1 Like

Wow! Can’t wait to get into react. I dont know all of the libraries its holds and things that its truly capable of. Thats pretty cool. didn’t know it had a specific Chatbot library.

Your JW Bot looks sweet :+1:

There is not specific or official chatbot library.

When you get to frameworks, you will find that people will create their own libraries as a way to help speed up some of the development process.

And then they will make it open source so others like me can use it too. :grinning:

For example, instead of writing custom css all of the time you can use tools like bootstrap or Materialize

But it is important to have a firm grasp on the core languages.
Before I started using libraries I built a few small projects only using html,css and vanilla javascript just so I could get comfortable with it.

It is good that you are building projects with vanilla js.
It will make it easier to learn the frameworks and libraries.

1 Like

Got it :+1:

Yeah that’s REALLY what im hoping for. I know how I learn best, and it helps if I have a strong foundation of the basics before I move on to the next stage or I get completely lost :sweat_smile:. So yeah like you said, im just building up my knowledge in vanilla.

hello! i was messing around with the bot and i noticed that when i attempted to type “goodbye” it only registered the key word “good” and assumed i was referring to the “how are you?” question. also, it could be helpful to have recommendations for what to say since the chat bot appears to operate based on key words inputted by the user. i’m not a web dev, though, so i’m just looking at it from a purely user standpoint. i hope this helps! have a great day : )
edit: i also noticed that when i clicked on the three bars in the top right, it wouldn’t let me click on them again to return to the chat bot for a few minutes. i’m not sure if this is how the project itself functions, but yeah. that’s just me nitpicking, though. the bot is great! i love how you can give hue food

1 Like

@ecouch23 Your feedback was exactly what I was looking for, so thanks a bunch :pray:. I added the ‘goodbye’ feature and corrected the delay that was on the menu button at the top right corner. :+1:

Thanks for your input, it really helps a bunch and I super appreciate it!

Heres the updated version. If you have any more thoughts or advise feel free to drop a comment. I don’t view your feedback as nitpicking at all! It really helps me make Hue better.

Also, glad you like the food thing, Im looking forward to doing more with it in the future. :sweat_smile:

Also @jwilkins.oboe Thanks for you feedback. I added a “you didn’t say anything” response :face_with_monocle:.

2 Likes

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