Cool Javascript Support Chatbot

	<!-- 	Cool Javascript Support Chatbot
	
	Written by Jeff Baker on March 19, 2023.
	Copyright 2023 by Jeff Baker - 
	http://www.seabreezecomputers.com/chatbot
	Version 1.0
	
	To use the following details and script tags in your web page you can
	copy them and paste them in your html body or if you server supports
	php in your html file then you can include this file anywhere in your
	html body with this line: 
	
	^?php include('coolchatbot.html'); ?>
	
	(NOTE: Replace ^ above with < in your html file)
	
	-->
	
	<!-- VARIABLES
		You may create variables that are used with Cool Javascript Chatbot in a
		variable called coolchatbot_vars as shown below. Variables set here will
		override variables set in coolchatbot.js. You can use these variables in
		any <details> tag text by surrounding it with ##. For example, you could write:
		"My name is ##chatbot_name##."
	-->
	<script>
		var coolchatbot_vars = {
			chatbot_name : "Chatbot", /* Chatbot display name */
			user_name : "You", /* User display name in chat box */
			chatbot_icon_title : "Support Chatbot", /* Title that appears below chatbot button */
			chatbot_box_title : "Support Chatbot", /* Title that appears above chat box */
			business_name : "Example Business", /* Put your business name */
			business_address : "Los Angeles, CA", /* Put your full business address */
			business_phone : "(555) 555-5555", /* Put your full business phone number */
			business_email : "support@example.com", /* Put your business email */
			business_hours : "Monday-Friday 9AM-6PM", /* Put your business hours */
		}
	</script>
	
	<!-- CSS
		Right click on any element in the Customer Support chat box and click on "Inspect" 
		and in the Developer Console "Elements" tab you can see the id
		of the element to set any CSS styles that you would like. Some styling is below:
		(NOTE: Remove this <style> element if you are placing the CSS in your own CSS file)
	-->
	<style id="coolchatbot_style">
		.coolchatbot_user_text {
		    float: right;
			min-width: 50%;
			display: block;
			background-color: royalblue;
			border-radius: 5px;
			padding: 1px;
			margin: 1px;
			margin-left: 15px;
		}
		.coolchatbot_chatbot_text {
			float: left;
			min-width: 50%;
			display: block;
			background-color: dimgray;
			border-radius: 5px;
			padding: 1px;
			margin: 1px;
			margin-right: 15px;
		}
		.coolchatbot_agent_text {
			float: left;
			min-width: 50%;
			display: block;
			background-color: teal;
			border-radius: 5px;
			padding: 1px;
			margin: 1px;
			margin-right: 15px;
		}
	</style>
	
	<!-- QUESTIONS AND RESPONSES
		Create any amount of user questions and chatbot answers by creating
		<details> and <summary> elements. You may edit any of the tags below
		and use them in your html document for your web page.
	-->
	
	<!-- A <details> tag with a data-greeting attribute will be used to greet the
		user when they first click on the Support Chatbot icon. It will randomly 
		choose the greeting by the text that is separated with |||
	-->
	<details style="display: none;" data-greeting>
		Hello ||| Hello! ||| Hi. How can I help you?
	</details>
	
	<!-- A <details> tag with a data-no-answer attribute will be used as a response
		to a user question for which the chatbot cannot find another answer.
	-->
	<details style="display: none;" data-no-answer>
		Can you tell me more information?
		|||
		Can you provide more details?
		|||
		Do you have more information?
	</details>
	
	<!-- All other <details> tags must have a data-req-keywords attribute. The user's message
		must have at least one of the required keywords to possibly match the response.
		The <summary> tag should contain a basic summary of what the user might ask.
	-->
	<details style="display: none;" data-req-keywords="hi, hello, whats up, what's up, hey, help, howdy"
	data-keywords="there">
		<summary>Hello</summary>
		How can I help you?
		|||
		How may I assist you?
	</details>
	
	<!-- Sometimes the user will type something that doesn't need a response from the chatbot.
		Just create a <details> tag with the keywords and leave the body of the <details> tag blank.
	-->
	<details style="display: none;" 
	data-req-keywords="ok, okay, hmm, hmmm, think, thinking, look, see, looking, check, checking, sec, 
	second, minute, hold, wait, try"
	data-keywords="let, me, I'll, go, on, I'm, going, to">
		
	</details>
	
	<!-- The <details> tag may also contain a data-keywords attribute that helps the chatbot
		choose a response. If the user's message contains at least one of the required keywords 
		and also some of the regular keywords then this response might be chosen.
	-->
	<details style="display: none;" 
	data-req-keywords="do, sell, repairs, fix, repair, provide, offer"
	data-keywords="what, can, you, does, your, business, company, work, with, on, have">
		<summary>What do you do?</summary>
		
		##business_name## provides software related services such as JavaScript and PHP scripts
		for websites. We also provide Chrome Extensions and Edge Add-Ons.
		See <a href="https://www.seabreezecomputers.com/" target="_blank">https://www.seabreezecomputers.com/</a>
		
	</details>
	
	
	<details style="display: none;" 
	data-req-keywords="do, services, service, offer, provide"
	data-keywords="what, can, you, does, your, business, company, work, with, on, have">
		<summary>What services do you provide?</summary>
		
		##business_name## provides software related services such as JavaScript and PHP scripts
		for websites. We also provide Chrome Extensions and Edge Add-Ons.
		See <a href="https://www.seabreezecomputers.com/" target="_blank">https://www.seabreezecomputers.com/</a>
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="do, product, products, offer, provide, software, hardware, apps, programs, applications, app, program"
	data-keywords="what, can, you, does, your, business, company, work, with, on, have">
		<summary>What products do you provide?</summary>
		
		##business_name## provides software related services such as JavaScript and PHP scripts
		for websites. We also provide Chrome Extensions and Edge Add-Ons.
		See <a href="https://www.seabreezecomputers.com/" target="_blank">https://www.seabreezecomputers.com/</a>
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="how much, cost, price, prices, pricing, free"
	data-keywords="does, it, what, is, your, are, the">
		<summary>How much does it cost?</summary>
			
		<a href="#pricing">Click here for pricing.</a> Advanced technical support is $85 USD per hour.
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="location, directions, address, located, at, where"
	data-keywords="store, company, business, office, is, are you, your, 
	do, have, you, can, give, me, what, is, place">
		<summary>Where are you located?</summary>
		
		##business_name## 
		<br/>
		##business_address##
		<br/>
		Here is a <a href="https://www.google.com/maps/place/##business_address##" target="_blank">
		Google Maps link</a>
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="phone, number, call"
	data-keywords="What, is, for, support, customer, how, do, may">
		You may call ##business_name## at <a href="tel:##business_phone##">##business_phone##</a>
	</details>
	
	
	<!-- The following <details> tag will match if a customer asks to chat with a live agent.
		Live agent chat is only available with the PHP & MySQL Add-On. You can create two
		<div>s within the matched <details> tags. The div with the attribute data-agent-not-available
		will be displayed to the user if no agents are currently available to chat. It will still try
		to notify agents that are online or through email. The div with the attribute data-agent-available
		will be displayed to the user if there is an agent online and available to chat.
	-->
	<details style="display: none;" 
	data-req-keywords="contact, talk, speak, chat, agent available, person available"
	data-keywords="can i, may i, to, someone, a, person, agent, rep, representative, admin,
	administrator, manager, live, real, person, human, is there, do, you, have, with, how, support">
		<summary>Can I chat with a human?</summary>
		
		<div data-agent-not-available>
			Live chat with an agent is unavailable. 
			You may call ##business_name## at <a href="tel:##business_phone##">##business_phone##</a>
			You may email ##business_name## at 
			<a href="mailto:##business_email##?subject=##business_name## Customer Support" 
			target="_blank">##business_email##</a>
		</div>
		
		<div data-agent-available>
			I have notified support that you wish to chat with an agent.
		</div>
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="email, email address"
	data-keywords="what, is, your, address">
		<summary>What is your email address?</summary>
		
		You may email ##business_name## at 
		<a href="mailto:##business_email##?subject=##business_name## Customer Support" 
		target="_blank">##business_email##</a>
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="hours, open, when, time"
	data-keywords="is, your, store, business, are, you, office, company, do">
		<summary>What are your business hours?</summary>
		
		##business_name## hours are: ##business_hours##.
		
	</details>
	
	<!-- You can have nested <details> tags to continue a discussion with some context.
		In the example below, if the user asks "How are you?" then the chatbot might
		respond with "I'm good. How are you?". When the user responds then the chatbot
		will use the <details> tags nested underneath to provide a response with context.
	-->
	<details style="display: none;" data-req-keywords="how, hows, how's" 
	data-keywords="it, going, you, doing">
		<summary>How are you?</summary>
		
		I'm good. How are you?
		|||
		I'm fine. Thank you.
		
			<details data-req-keywords="fine, good, ok, alright, allright, all right, not bad, can't complain,
			fantastic, incredible, amazing, wonderful, great" 
			data-keywords="I'm, Im, doing">
				<summary>Good</summary>
				
				Good. How may I assist you?
				|||
				That's good. How can I help you?
				
			</details>
			<details data-req-keywords="bad, not good, not great, not so good, so so, not too good, terrible, 
			sick, awful, confused, angry, upset, mad, frustrated, crazy, tired, not very good, annoyed, exhausted,
			not very good, not well, not very well, disappointed">
				<summary>Bad</summary>
				
				I'm sorry. How can I help you?
				|||
				I'm sorry. How may I assist you?
				|||
				I'm sorry. Hopefully I can help.
				
			</details>
	</details>
	
	<details style="display: none;" 
	data-req-keywords="that worked, it's working, its working, it worked, that worked, good now,
	working now, that fixed, it is fixed, works now, it is working"  
	data-keywords="good, well, fine, great, relieved, happy, so, very, now">
		Good! I'm happy to hear that. ||| I'm glad its working. ||| That is good to know.
	</details>
	
	<details style="display: none;" 
	data-req-keywords="it's not working, its not working, hasn't worked, hasn't been working,
	not working, problem, it is not fixed, it is not working, broken, frozen, stuck, freezing,
	not doing anything, not doing"  
	data-keywords="its, it's">
		Try turning it off all the way. After 30 seconds turn it back on. Then see if it works.
	</details>
	
	<!-- ADVANCED -->
	
	<!-- REGULAR EXPRESSIONS 
		The data-req-keywords attribute can be a regular expression. Regular expressions are very powerful.
		They are contained in / and / and then some flags. For more information about regular expressions
		see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet
		
		Named Capturing Group
		Regular expressions can capture some of the matched text to use it later on as a variable.
		In the example below (?<firstName>[^\n\s\.]+) captures the first name of a user and puts
		it in a variable. You can then use the variable later on with ##firstName##
		
	-->
	
	<!-- Get first name and last name (case sensitive for first letter): https://regex101.com/r/DjTxnl/2 --> 
	<details style="display: none;"
	data-req-keywords="/(?:name is |name'?s? |[Ii]'?m |[Cc]all me )(?!at )(?:Dr|Ms|Mr|Mrs|Prof|Msgr|Rev|Gen)?[.]? ?(?<firstName>[A-Z][^\n\s\.]+) ?(?<lastName>[A-Z][^\s\n\.]*)?[.]?$/"
	data-keywords="my, name, is, call me, I'm">
		<summary>My name is</summary>
		
		Nice to meet you ##firstName##. My name is ##chatbot_name##.
	
	</details>
	
	<!-- Get first name and last name not case sensitive /i) : https://regex101.com/r/DjTxnl/1 --> 
	<details style="display: none;"
	data-req-keywords="/(?:name is |name'?s? |Call me |I'?m )(?!at|bad|not|so|terrible|sick|awful|confused|angry|upset|mad|frustrated|crazy|tired|annoyed|exhausted|disappointed|going|really|very|greatly|awfully|lost|having|getting|super|feeling|dumb|stupid)(?:Dr|Ms|Mr|Mrs|Prof|Msgr|Rev|Gen)?[.]? ?(?<firstName>[^\n\s\.]+) ?(?<lastName>[^\s\n\.]*)(?:\.|$)/i"
	data-keywords="my, name, is, call me">
		<summary>My name is</summary>
		
		Nice to meet you ##firstName##. My name is ##chatbot_name##.
	
	</details>
	
	<!-- Here is another example of nested <details> tags for having a conversation
		with context if the user asks for the chatbot's name and then the chatbot
		asks for the user's name.
	-->
	<details style="display: none;"
	data-req-keywords="name" 
	data-keywords="what, is, your, whats, what's">
		<summary>What is your name?</summary>
		
		My name is ##chatbot_name##. What is your name?
		
		<!-- Get first and last name with optional "I'm" in front -->
		<details style="display: none;"
		data-req-keywords="/(?:name is |name'?s? |[Ii]'?m |[Cc]all me )(?!at )(?:Dr|Ms|Mr|Mrs|Prof|Msgr|Rev|Gen)?[.]? ?(?<firstName>[^\n\s\.]+) ?(?<lastName>[^\s\n\.]*)?/i"
		data-keywords="my, name, is">
			<summary>My name's</summary>
			
			Nice to meet you ##firstName##. My name is ##chatbot_name##.
		</details>
		
		<!-- Get first and last name without "My name is" only if chatbot asked "What is your name?" -->
		<details style="display: none;"
		data-req-keywords="/^(?:Dr|Ms|Mr|Mrs|Prof|Msgr|Rev|Gen)?[.]? ?(?<firstName>[^\n\s\.]+) ?(?<lastName>[^\s\n\.]*)$/i">
			<summary>John Smith</summary>
			
			Nice to meet you ##firstName##. My name is ##chatbot_name##.
		
		</details>
	</details>
	
	<!-- JAVASCRIPT FUNCTIONS
		You can have the matched question answered with a javascript function by adding the
		data-function="func()" attribute to the <details> tag. The return variable from the function
		will be the response that the chatbot displays.
	-->
	<details style="display: none;"
	data-req-keywords="time" data-keywords="what, is, it, now, whats, the, what's, current"
	data-function="getTime()">
		<summary>What time is it?</summary>
		
		<script>
			// The script block does not have to be in the details tag. It is just here to be tidy.
			function getTime() {
				return new Date().toLocaleTimeString(undefined, {timeStyle:"short"});
			}
		</script>
		
	</details>
	
	<details style="display: none;"
	data-req-keywords="time" data-keywords="what, whats, what's, is, it, there, at, your, location, in, area, where, you, are"
	data-function="getServerTime()">
		<summary>What time is it there?</summary>
		
		<script>
			function getServerTime() {
				// See list of javascript IANA timezones: Intl.supportedValuesOf('timeZone')
				return new Date().toLocaleTimeString(undefined, {timeZone: "America/Los_Angeles", timeStyle:"short"});
			}
		</script>
	</details>
	
	
	<!-- Get time in country/city timezone -->
	<details style="display: none;"
	data-req-keywords="/(what|whats|what's)( is)?( the)? time( is)?( it)?( in )(?<citytime>.*?)($|\.|\?|\n)/i" 
	data-keywords="what, time, is, it, in"
	data-function="getCityTime()">
		<summary>What time is it in "city"?</summary>
		
		<script>
			function getCityTime() {
				// See list of javascript IANA timezones: Intl.supportedValuesOf('timeZone')
				var tz_array = Intl.supportedValuesOf('timeZone');
				var timeZone = "America/Los_Angeles"; // Default timezone
				for (var i = 0; i < tz_array.length; i++) {
					var city = coolchatbot.vars.citytime.replace(" ", "_"); // Replace space with _
					var re = new RegExp(city, "i");
					if (tz_array[i].match(re)) {
						timeZone = tz_array[i];
					}
				}
				var time = new Date().toLocaleTimeString(undefined, {timeZone: timeZone, timeStyle:"short"});
				var text = "The time in "+timeZone+" is "+time;
				return text;
			}
		</script>
		
	</details>
	
	<details style="display: none;" data-req-keywords="thank you, thanks" 
	data-keywords="for, your, help, support, information, info, time, very much, so much">
		<summary>Thank you</summary>
		
			You're welcome! ||| You're welcome ##firstName##.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="you are, your, you're, youre, this is, it is, your product is, your software is, your program is,"
	data-keywords="so, very, really, helpful, smart, awesome, great, intelligent, good, neat, cool, 
	beautiful, wonderful, funny, fast, quick, amazing, fantastic">
		<summary>You're really smart.</summary>
		
				Thank you. ||| Thanks ##firstName##!
				
	</details>
	
	<details style="display: none;"
	data-req-keywords="you are, your, you're, youre, this is, it is, your product is, this thing is"
	data-keywords="so, very, really, stupid, dumb, ugly, frustrating, maddening, difficult, awful, 
	disappointing, aggravating, annoying, confusing, bad, terrible, unhelpful, crazy, hard, ridiculous">
		<summary>You are really dumb.</summary>
			
			I'm sorry.
			|||
			I'm sorry that you are disappointed.
			|||
			I'm sorry ##firstName##.
		
	</details>
	
	<details style="display: none;" 
	data-req-keywords="you are not, your not, you're not, youre not, this is not, it isn't, this isn't, this isnt, it isnt"
	data-keywords="so, very, really, helpful, smart, awesome, great, intelligent, good, neat, cool, 
	beautiful, wonderful, funny">
		<summary>You're not very smart.</summary>
		
			I'm sorry.
			|||
			I'm sorry that you are disappointed.
			|||
			I'm sorry ##firstName##.
				
	</details>
	
	<details style="display: none;" 
	data-req-keywords="bad, not good, not great, not so good, so so, not too good, terrible, 
	sick, awful, confused, angry, upset, mad, frustrated, crazy, tired, not very good, annoyed, exhausted,
	not very good, not well, not very well, disgusted, sad"
	data-keywords="so, very, really, I'm, Im, feeling, doing">
			<summary>I'm upset</summary>
			
			I'm sorry. 
			|||
			I'm sorry ##firstName##.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="happy, glad, learning, grateful, thankful, awesome, terrific, 
			fantastic, incredible, amazing, wonderful, great"
	data-keywords="I'm, im, that, makes, me, this, very, really, so, with, it">
		<summary>I'm happy</summary>
		
			That is good to know.
			|||
			I'm glad to know that ##firstName##.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="ai"
	data-keywords="are, you">
		<summary>Are you AI?</summary>
		
			I suppose I am artificial in that I was created by humans.
			As for my intelligence, I only know what was written and programmed for me.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="chatgpt, google, bard, internet, run on, powered by, powered with, gemini"
	data-keywords="are, you, powered, by, run, on, do, you, work, with, connected, to">
		<summary>Are you powered by chatGPT?</summary>
		
			I am powered by only JavaScript and HTML.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="are you, alive, real, person, human, agent, language, programmed"
	data-keywords="robot, computer, program, what, in">
		<summary>Are you a person?</summary>
		
			I am a chatbot. A computer program.
			I am programmed with JavaScript and HTML.
			For more information go to 
			<a href="https://www.seabreezecomputers.com/chatbot/">https://www.seabreezecomputers.com/chatbot/</a>
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="my website, our website, my business website, my company website, my companies website,
	my company's website, my companys website, our company's website, personal website, my own website"
	data-keywords="May, we, add, this, you, chatbot, chat-bot, chat bot, put">
		<summary>Can I add you to my website?</summary>
		
			You may add this Customer Support Chatbot to your website.
			It is programmed with JavaScript and HTML.
			For more information go to 
			<a href="https://www.seabreezecomputers.com/chatbot/">https://www.seabreezecomputers.com/chatbot/</a>
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="are you"
	data-keywords="smart, intelligent, stupid, dumb, idiotic, idiot, an, funny">
		<summary>Are you smart?</summary>
		
			Sometimes.
			|||
			At times.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="do you like, do you love"
	data-keywords="dogs, cats, animals, birds, pets, fish, chicken, meat, dessert, music">
		<summary>Do you like dogs?</summary>
		
			Sometimes.
			|||
			Kind of.
			|||
			Sort of.
			
	</details>
	
	<details style="display: none;" 
	data-req-keywords="test it, test mode, test_mode, testing, test this"
	data-keywords="how, do, use, what, is, used, for">
		<summary>How do I use test_mode?</summary>
		
			In the script set <b>test_mode</b> to <b>true</b>. Then in a browser with a
			developer console open the developer console window. In Chrome
			use <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>J</kbd> to open it. 
			In the console window you will see diagnostic info as you
			use the chatbot. For instance, it will show you which <details>
			tags matched the user's question and why a result was chosen (points).
			
	</details>