Skip to content

Commit 51c1b66

Browse files
devxpritedevxprite
committed
Add Welcome Msg
1 parent 7a178ca commit 51c1b66

File tree

6 files changed

+184
-30
lines changed

6 files changed

+184
-30
lines changed

‎index.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
/* eslint-disable max-len */
22
const _ = require("lodash");
33
const convert = require("convert-units");
4-
const { lowerCase } = require("lower-case");
54
const extractValues = require("extract-values");
65
const stringSimilarity = require("string-similarity");
6+
const { lowerCase } = require("lower-case");
77
const { upperCaseFirst } = require("upper-case-first");
8+
const { capitalCase } = require("change-case");
89

910
const cors = require("cors");
1011
const axios = require("axios");
@@ -105,7 +106,7 @@ const sendAnswer = async (req, res) => {
105106

106107
responseText = changeUnit(amount, unitFrom, unitTo);
107108
} catch (error) {
108-
responseText = "One or more unit missing.";
109+
responseText = "One or more units are missing.";
109110
console.log(error);
110111
}
111112
} else if (regExforWikipedia.test(humanInput)) {
@@ -115,17 +116,19 @@ const sendAnswer = async (req, res) => {
115116
delimiters: ["{", "}"],
116117
});
117118

118-
const { topic } = valuesObj;
119+
let { topic } = valuesObj;
120+
topic = capitalCase(topic);
119121

120-
const wikipediaResponse = (await axios(`https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=1&explaintext=1&titles=${topic}`)).data;
121-
console.log(wikipediaResponse);
122-
const wikipediaResponsePageNo = Object.keys(wikipediaResponse.query.pages)[0];
123-
const wikipediaResponseText = wikipediaResponse.query.pages[wikipediaResponsePageNo].extract;
122+
const wikipediaResponse = await axios(`https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=1&explaintext=1&titles=${topic}`);
123+
const wikipediaResponseData = wikipediaResponse.data;
124+
const wikipediaResponsePageNo = Object.keys(wikipediaResponseData.query.pages)[0];
125+
const wikipediaResponseText = wikipediaResponseData.query.pages[wikipediaResponsePageNo].extract;
124126

125-
responseText = wikipediaResponseText;
126127
if (wikipediaResponseText == undefined || wikipediaResponseText == "") {
127-
responseText = "Sorry, we can't find any article with this exact name.";
128+
responseText = `Sorry, we can't find any article related to "${topic}".`;
128129
isFallback = true;
130+
} else {
131+
responseText = wikipediaResponseText;
129132
}
130133
} else {
131134
const similarQuestionObj = stringSimilarity.findBestMatch(humanInput, allQustions).bestMatch;
@@ -145,7 +148,7 @@ const sendAnswer = async (req, res) => {
145148
} else {
146149
isFallback = true;
147150
action = "Default_Fallback";
148-
if (humanInput.length <= 20 && !/(\s{1,})/gmi.test(humanInput)) {
151+
if (humanInput.length >= 5 && humanInput.length <= 20 && !/(\s{1,})/gmi.test(humanInput)) {
149152
responseText = "You are probably hitting random keys :D";
150153
} else {
151154
responseText = _.sample(fallbackChat);

‎package-lock.json‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
},
1818
"dependencies": {
1919
"axios": "^0.27.2",
20+
"case": "^1.6.3",
21+
"change": "^0.0.0",
2022
"change-case": "^4.1.2",
2123
"compression": "^1.7.4",
2224
"convert-units": "^2.3.4",

‎public/index.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,25 @@
3535
<h2>JavaScript ChatBot</h2>
3636
<p class="typing">bot is typing. . .</p>
3737
</div>
38+
<div>
39+
<div class="status"></div>
40+
</div>
3841
</header>
3942

4043
<main>
41-
<div class="chat-msg-box bot">
42-
<p>Hello</p>
44+
45+
<div class="main-background">
46+
<div>
47+
<h3>JavaScript ChatBot</h3>
48+
<p>A Simple & Powerful chatbot in JavaScript.</p>
49+
</div>
4350
</div>
4451
</main>
52+
53+
<section class="all-questions">
54+
<p>How are You?</p>
55+
</section>
56+
4557
<footer>
4658
<form id="chat-form">
4759
<input type="text" class="chat-input">

‎public/src/css/app.css‎

Lines changed: 81 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ header {
2727
position: fixed;
2828
top: 0;
2929
width: 100vw;
30-
height: 7vh;
30+
height: 3.7em;
3131
display: flex;
3232
align-items: center;
3333
padding-left: 1rem;
3434
box-shadow: #000 2px 0px 4px;
35+
justify-content: space-around;
36+
transition: all 1.5s;
3537
}
3638

3739
.typing {
@@ -40,7 +42,17 @@ header {
4042
display: none;
4143
}
4244

43-
main {
45+
.status {
46+
width: 0.6em;
47+
height: 0.6em;
48+
border-radius: 50%;
49+
background: lime;
50+
box-shadow: lime 0px 0px 10px 3px;
51+
animation: status-online 1s infinite linear alternate-reverse;
52+
}
53+
54+
main,
55+
section.all-questions {
4456
height: 86vh;
4557
margin-top: 8vh;
4658
}
@@ -68,33 +80,69 @@ main {
6880
margin-bottom: 15vh;
6981
}
7082

83+
.main-background {
84+
position: fixed;
85+
top: 42vh;
86+
text-align: center;
87+
width: 100vw;
88+
z-index: -1;
89+
/* margin: auto; */
90+
}
91+
92+
.main-background div {
93+
width: auto;
94+
border: 2px solid #3f3f3f;
95+
margin: auto;
96+
display: inline-block;
97+
padding: 1em 2em;
98+
border-radius: 0.5em;
99+
max-width: 85vw;
100+
box-shadow: inset #000 0px 0px 4px 1px;
101+
color: #757575;
102+
}
103+
104+
.main-background div h3 {
105+
margin-bottom: 0.5em;
106+
}
107+
108+
.main-background div p {
109+
font-size: 14px;
110+
}
111+
71112
footer {
72-
background-color: #010101;
113+
background-color: inherit;
73114
position: fixed;
74115
bottom: 0;
75116
width: 100vw;
76-
height: 6vh;
117+
height: 3.5em;
77118
display: flex;
78119
align-items: center;
79-
box-shadow: #000 -2px 0px 2px;
120+
box-shadow: #000 -2px 0px 4px 1px;
80121
padding: 0px 3vw;
81122
}
82123

83124
.chat-input {
84125
width: 82vw;
85126
height: 2.5em;
86127
border-radius: 0.5em;
87-
background: #aaa;
128+
background: #4c4c4c;
129+
border: 2px solid #6e6d6d;
130+
padding-left: 0.5em;
131+
color: #dbdbdb;
132+
}
133+
134+
.chat-input:focus {
135+
outline: none;
136+
border-color: chartreuse;
88137
}
89138

90139
.chat-submit {
91140
width: 10vw;
92141
}
93142

94-
95143
/* loader */
96144
.spinner {
97-
margin: 5px auto 0;
145+
margin: 2px auto 0;
98146
width: 70px;
99147
text-align: center;
100148
}
@@ -121,16 +169,34 @@ footer {
121169
}
122170

123171
@-webkit-keyframes sk-bouncedelay {
124-
0%, 80%, 100% { -webkit-transform: scale(0) }
125-
40% { -webkit-transform: scale(1.0) }
172+
0%,
173+
80%,
174+
100% {
175+
-webkit-transform: scale(0);
176+
}
177+
40% {
178+
-webkit-transform: scale(1);
179+
}
126180
}
127181

128182
@keyframes sk-bouncedelay {
129-
0%, 80%, 100% {
183+
0%,
184+
80%,
185+
100% {
130186
-webkit-transform: scale(0);
131187
transform: scale(0);
132-
} 40% {
133-
-webkit-transform: scale(1.0);
134-
transform: scale(1.0);
135188
}
136-
}
189+
40% {
190+
-webkit-transform: scale(1);
191+
transform: scale(1);
192+
}
193+
}
194+
195+
@keyframes status-online {
196+
from {
197+
box-shadow: lime 0px 0px 2px 1px;
198+
}
199+
to {
200+
box-shadow: lime 0px 0px 12px 5px;
201+
}
202+
}

‎public/src/javascript/app.js‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const submitForm = () => {
99
`);
1010

1111
$.ajax({
12-
url: `https://javascript-chatbot.vercel.app/api/question/?q=${encodeURIComponent(chatInput)}`,
12+
url: `http://localhost:3000/api/question/?q=${encodeURIComponent(chatInput)}`,
1313
method: "GET",
1414
cache: false,
1515
beforeSend: () => {
@@ -29,7 +29,7 @@ const submitForm = () => {
2929
}, { duration: 500 });
3030
},
3131
success: (data) => {
32-
const response = (data.responseText).replace("\n", "</br>");
32+
const response = (data.responseText).replace(/\n/gm, "</br>");
3333
$(".chat-msg-box.bot:last-child").html(`<p>${response}</p>`);
3434
},
3535
error: () => {
@@ -41,7 +41,50 @@ const submitForm = () => {
4141
});
4242
};
4343

44-
$.ajax();
44+
window.onload = () => {
45+
setTimeout(() => {
46+
if (document.querySelectorAll(".chat-msg-box").length == 0) {
47+
$.ajax({
48+
url: "http://localhost:3000/api/welcome",
49+
method: "GET",
50+
cache: false,
51+
beforeSend: () => {
52+
$(".typing").show();
53+
$("main").append(`
54+
<div class="chat-msg-box bot">
55+
<div class="spinner">
56+
<div class="bounce1"></div>
57+
<div class="bounce2"></div>
58+
<div class="bounce3"></div>
59+
</div>
60+
</div>
61+
`);
62+
$([document.documentElement, document.body]).animate({
63+
scrollTop: $(".chat-msg-box.bot:last-child").offset().top,
64+
}, { duration: 500 });
65+
},
66+
success: (data) => {
67+
const response = (data.responseText).replace(/\n/gm, "</br>");
68+
$(".chat-msg-box.bot:last-child").html(`<p>${response}</p>`);
69+
},
70+
error: () => {
71+
$(".chat-msg-box.bot:last-child").remove();
72+
},
73+
complete: () => {
74+
$(".typing").hide();
75+
},
76+
});
77+
}
78+
}, 3000);
79+
};
80+
81+
window.onresize = () => {
82+
if (window.innerHeight < 580) {
83+
$("header").css("top", "-4em");
84+
} else {
85+
$("header").css("top", "0vh");
86+
}
87+
};
4588

4689
$("#chat-form").submit((e) => {
4790
e.preventDefault();

0 commit comments

Comments
 (0)