siddhart-srivastava
/
chabot-UI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Initial commit

master
Siddharth 2 years ago
commit
4ab2f428a0
8 changed files with 244 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      dget.jpg
  2. BIN
      assets/bot_widget-removebg-preview.png
  3. BIN
      assets/closebutton.jpg
  4. +0
    -0
      assets/demo.html
  5. BIN
      assets/robo_small.gif
  6. +1
    -0
      composer.json
  7. +242
    -0
      index.html
  8. +1
    -0
      index.php

BIN
assets/bot → dget.jpg View File


BIN
assets/bot_widget-removebg-preview.png View File

Before After
Width: 455  |  Height: 468  |  Size: 77 KiB

BIN
assets/closebutton.jpg View File

Before After
Width: 3464  |  Height: 3464  |  Size: 158 KiB

+ 0
- 0
assets/demo.html View File


BIN
assets/robo_small.gif View File

Before After
Width: 455  |  Height: 468  |  Size: 1.9 MiB

+ 1
- 0
composer.json View File

@@ -0,0 +1 @@
{}

+ 242
- 0
index.html View File

@@ -0,0 +1,242 @@
<html>
<head>
<style>
/* Some miscellenous widget manipulation */
.rw-launcher {
-webkit-animation-delay: 0;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-in;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-in;
-moz-animation-fill-mode: forwards;
animation-delay: 0;
animation-duration: 0.5s;
animation-name: slide-in;
animation-fill-mode: forwards;
display: flex;
align-items: center !important;
justify-content: center;
background-color: white !important;
border: 0 !important;
box-shadow: 0 2px 10px 1px white!important;
height: 125px !important;
margin: 0;
width: 125px !important;
box-sizing:border-box
}
/* Resizing the widget */
.rw-launcher img {
width: 125 !important;
max-height: 125 !important;
object-fit: contain !important;
}
/* Getting rid of the rotation animation of the widget while closing */
.rw-close-launcher {
-webkit-animation-delay: 0;
-webkit-animation-duration: 0s !important;
-webkit-animation-name: rotation-lr !important;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0;
-moz-animation-duration: 0s !important;
-moz-animation-name: rotation-lr !important;
-moz-animation-fill-mode: forwards;
animation-delay: 0;
animation-duration: 0s !important;
animation-name: rotation-lr !important;
animation-fill-mode: forwards;
}

/* Getting rid of the rotation animation of the widget while opening */
.rw-open-launcher {
-webkit-animation-delay: 0;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: rotation-rl;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0;
-moz-animation-duration: .5s;
-moz-animation-name: rotation-rl;
-moz-animation-fill-mode: forwards;
animation-delay: 0;
animation-duration: 0s !important;
animation-name: rotation-rl;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<style>
/* Background color for the header */
.rw-conversation-container .rw-header{background-color: #233e80;}
/* Correction of the shadow for the chat window */
.rw-conversation-container {
-webkit-animation-delay: 0;
-webkit-animation-duration: .5s;
-webkit-animation-name: slide-in;
-webkit-animation-fill-mode: forwards;
-moz-animation-delay: 0;
-moz-animation-duration: .5s;
-moz-animation-name: slide-in;
-moz-animation-fill-mode: forwards;
animation-delay: 0;
animation-duration: .5s;
animation-name: slide-in;
animation-fill-mode: forwards;
border-radius: 10px;
box-shadow: 0px -20px 12px 0px hsl(0deg 14% 89% / 0%), inset 4px -7px 3.7px -1px rgb(0 0 0 / 7%), 0 5px 7px -1px hsl(0deg 0% 0% / 9%), 2px -8px 12.5px -1px rgb(84 25 25 / 10%), 2px -6px 23.4px 0px rgb(255 0 0 / 12%), inset -3px -5px 56px 0px rgb(237 0 0 / 17%);
overflow: hidden;
width: 370px;
}
/* Resizing avatar (to the left of replies) */
.rw-conversation-container .rw-avatar {
width: 55px;
height: 55px;
border-radius: 100%;
margin-right: -3px;
/* position: relative; */
bottom: 0px;
}
/* Positioning the avatar to the left of replies rather than at the top*/
.rw-conversation-container .rw-message {
margin: 10px;
font-size: 16px;
line-height: 20px;
display: flex;
font-family: Inter,sans-serif;
flex-wrap: unset !important;
position: relative;
}
/* Header avatar resizing */
.rw-conversation-container .rw-header .rw-avatar {
all: initial;
height: 57px;
width: 57px;
position: absolute;
top: 4px;
left: 0px;
}
/* Color box for buttons (payload) */
.rw-conversation-container .rw-reply {
-webkit-transition: box-shadow .3s ease,top .3s ease;
-moz-transition: box-shadow .3s ease,top .3s ease;
-o-transition: box-shadow .3s ease,top .3s ease;
transition: box-shadow .3s ease,top .3s ease;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: #fafafa;
border: 1px solid #135afe;
border-radius: 15px;
color: #233e80;
padding: 4px 8px;
max-width: 215px;
min-height: 1.7em;
font-weight: 500;
text-align: center;
font-family: Inter,sans-serif;
cursor: pointer;
margin: 0.25em;
text-decoration: unset;
box-shadow: unset !important/*0 .2px .7px -7pxrgba(0,0,0,.277),0 .5px 1.8px -7pxrgba(0,0,0,.369),0 1.2px 3.8px -7pxrgba(0,0,0,.442),0 4px 13px -7pxrgba(0,0,0,.64);*/
}
</style>
<script>
// For Device information (Desktop or Mobile)
device = ""
let details = navigator.userAgent;
/* Creating a regular expression
containing some mobile devices keywords
to search it in details string*/
let regexp = /android|iphone|kindle|ipad/i;
/* Using test() method to search regexp in details
it returns boolean value*/
let isMobileDevice = regexp.test(details);
if (isMobileDevice) {
device = "Mobile";
} else {
device = "Desktop";
}
// For Browser information
navigator.saysWho = (() => {
const { userAgent } = navigator
let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []
let temp
if (/trident/i.test(match[1])) {
temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []
return `IE ${temp[1] || ''}`
}
if (match[1] === 'Chrome') {
temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)
if (temp !== null) {
return temp.slice(1).join(' ').replace('OPR', 'Opera')
}
temp = userAgent.match(/\b(Edg)\/(\d+)/)
if (temp !== null) {
return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')
}
}
match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?']
temp = userAgent.match(/version\/(\d+)/i)
if (temp !== null) {
match.splice(1, 1, temp[1])
}
return match.join(' ')
})()
browser = navigator.saysWho // outputs: `Chrome 89
device_and_browser = device.concat(",", browser);
</script>
<script>!(function () {
let e = document.createElement("script"),
t = document.head || document.getElementsByTagName("head")[0];
(e.src =
"https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),
// Replace 1.x.x with the version that you want
(e.async = !0),
(e.onload = () => {
window.localStorage.clear()
window.WebChat.default(
{
showCloseButton: false,
showFullScreenButton: true,
initPayload: ['/greet{"device_and_browser": "', device_and_browser, '"}'].join(''),
customData: { language: "en" },
socketUrl: "http://localhost:5005",
profileAvatar: "./assets/bot_widget-removebg-preview.png",
openLauncherImage: "./assets/robo_small.gif",
closeImage: "./assets/closebutton.jpg",
title: "PM-KUSUM",
inputTextFieldHint: "Start a conversation",
connectingText: 'Waiting for server...'
// add other props here
},
null
);
}),
t.insertBefore(e, t.firstChild);
})();
</script>
</body>
</html>

+ 1
- 0
index.php View File

@@ -0,0 +1 @@
<?php include_once("index.html"); ?>

Write Preview
Loading…
Cancel
Save