siddhart-srivastava
/
chabot-UI
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
1 Commit
1 Branch
1.9 MiB
 
 
Branch: master
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „master“
${ noResults }
chabot-UI/index.html

242 Zeilen
7.8 KiB
Originalformat Permalink Blame Verlauf 

  1. <html>

  2.   <head>

  3.     <style>

  4.  /* Some miscellenous widget manipulation */

  5.       .rw-launcher {

  6.   -webkit-animation-delay: 0;

  7.   -webkit-animation-duration: 0.5s;

  8.   -webkit-animation-name: slide-in;

  9.   -webkit-animation-fill-mode: forwards;

  10.   -moz-animation-delay: 0;

  11.   -moz-animation-duration: 0.5s;

  12.   -moz-animation-name: slide-in;

  13.   -moz-animation-fill-mode: forwards;

  14.   animation-delay: 0;

  15.   animation-duration: 0.5s;

  16.   animation-name: slide-in;

  17.   animation-fill-mode: forwards;

  18.   display: flex;

  19.   align-items: center !important;

  20.   justify-content: center;

  21.   background-color: white !important;

  22.   border: 0 !important;

  23.   box-shadow: 0 2px 10px 1px white!important; 

  24.   height: 125px !important;

  25.   margin: 0;

  26.   width: 125px !important;

  27.   box-sizing:border-box

  28. }

  29. /* Resizing the widget */

  30. .rw-launcher img {

  31.     width: 125 !important;

  32.     max-height: 125 !important;

  33.     object-fit: contain !important;

  34.  }

  35.  /* Getting rid of the rotation animation of the widget while closing  */

  36. .rw-close-launcher {

  37.     -webkit-animation-delay: 0;

  38.     -webkit-animation-duration: 0s !important;

  39.     -webkit-animation-name: rotation-lr !important;

  40.     -webkit-animation-fill-mode: forwards;

  41.     -moz-animation-delay: 0;

  42.     -moz-animation-duration: 0s !important;

  43.     -moz-animation-name: rotation-lr !important;

  44.     -moz-animation-fill-mode: forwards;

  45.     animation-delay: 0;

  46.     animation-duration: 0s !important;

  47.     animation-name: rotation-lr !important;

  48.     animation-fill-mode: forwards;

  49. }

  50. 

  51. /* Getting rid of the rotation animation of the widget while opening  */

  52. .rw-open-launcher {

  53.     -webkit-animation-delay: 0;

  54.     -webkit-animation-duration: 0.5s;

  55.     -webkit-animation-name: rotation-rl;

  56.     -webkit-animation-fill-mode: forwards;

  57.     -moz-animation-delay: 0;

  58.     -moz-animation-duration: .5s;

  59.     -moz-animation-name: rotation-rl;

  60.     -moz-animation-fill-mode: forwards;

  61.     animation-delay: 0;

  62.     animation-duration: 0s !important;

  63.     animation-name: rotation-rl;

  64.     animation-fill-mode: forwards;

  65. }

  66.     </style>

  67.   </head>

  68.     <body>

  69.     <style>

  70.       /* Background color for the header */

  71.       .rw-conversation-container .rw-header{background-color: #233e80;}

  72.       /* Correction of the shadow for the chat window */

  73.       .rw-conversation-container {

  74.     -webkit-animation-delay: 0;

  75.     -webkit-animation-duration: .5s;

  76.     -webkit-animation-name: slide-in;

  77.     -webkit-animation-fill-mode: forwards;

  78.     -moz-animation-delay: 0;

  79.     -moz-animation-duration: .5s;

  80.     -moz-animation-name: slide-in;

  81.     -moz-animation-fill-mode: forwards;

  82.     animation-delay: 0;

  83.     animation-duration: .5s;

  84.     animation-name: slide-in;

  85.     animation-fill-mode: forwards;

  86.     border-radius: 10px;

  87.     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%);

  88.     overflow: hidden;

  89.     width: 370px;

  90. }

  91. /* Resizing avatar (to the left of replies) */

  92. .rw-conversation-container .rw-avatar {

  93.     width: 55px;

  94.     height: 55px;

  95.     border-radius: 100%;

  96.     margin-right: -3px;

  97.     /* position: relative; */

  98.     bottom: 0px;

  99. }

  100. /* Positioning the avatar to the left of replies rather than at the top*/

  101. .rw-conversation-container .rw-message {

  102.     margin: 10px;

  103.     font-size: 16px;

  104.     line-height: 20px;

  105.     display: flex;

  106.     font-family: Inter,sans-serif;

  107.     flex-wrap: unset !important;

  108.     position: relative;

  109. }

  110. /* Header avatar resizing  */

  111. .rw-conversation-container .rw-header .rw-avatar {

  112.     all: initial;

  113.     height: 57px;

  114.     width: 57px;

  115.     position: absolute;

  116.     top: 4px;

  117.     left: 0px;

  118. }

  119. /* Color box for buttons (payload) */

  120. .rw-conversation-container .rw-reply {

  121.     -webkit-transition: box-shadow .3s ease,top .3s ease;

  122.     -moz-transition: box-shadow .3s ease,top .3s ease;

  123.     -o-transition: box-shadow .3s ease,top .3s ease;

  124.     transition: box-shadow .3s ease,top .3s ease;

  125.     display: -webkit-box;

  126.     display: -webkit-flex;

  127.     display: -moz-box;

  128.     display: -ms-flexbox;

  129.     display: flex;

  130.     -webkit-flex-align: center;

  131.     -ms-flex-align: center;

  132.     -webkit-align-items: center;

  133.     align-items: center;

  134.     background-color: #fafafa;

  135.     border: 1px solid #135afe;

  136.     border-radius: 15px;

  137.     color: #233e80;

  138.     padding: 4px 8px;

  139.     max-width: 215px;

  140.     min-height: 1.7em;

  141.     font-weight: 500;

  142.     text-align: center;

  143.     font-family: Inter,sans-serif;

  144.     cursor: pointer;

  145.     margin: 0.25em;

  146.     text-decoration: unset;

  147.     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);*/

  148. }

  149.     </style>

  150.       <script>

  151.         // For Device information (Desktop or Mobile)

  152.         device = ""

  153.         let details = navigator.userAgent;

  154.     

  155.         /* Creating a regular expression 

  156.         containing some mobile devices keywords 

  157.         to search it in details string*/

  158.         let regexp = /android|iphone|kindle|ipad/i;

  159.     

  160.         /* Using test() method to search regexp in details

  161.         it returns boolean value*/

  162.         let isMobileDevice = regexp.test(details);

  163.     

  164.         if (isMobileDevice) {

  165.             device = "Mobile";

  166.         } else {

  167.             device = "Desktop";

  168.         }

  169.     

  170.     

  171.     

  172.         // For Browser information

  173.         navigator.saysWho = (() => {

  174.           const { userAgent } = navigator

  175.           let match = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []

  176.           let temp

  177.     

  178.           if (/trident/i.test(match[1])) {

  179.             temp = /\brv[ :]+(\d+)/g.exec(userAgent) || []

  180.     

  181.             return `IE ${temp[1] || ''}`

  182.           }

  183.     

  184.           if (match[1] === 'Chrome') {

  185.             temp = userAgent.match(/\b(OPR|Edge)\/(\d+)/)

  186.     

  187.             if (temp !== null) {

  188.               return temp.slice(1).join(' ').replace('OPR', 'Opera')

  189.             }

  190.     

  191.             temp = userAgent.match(/\b(Edg)\/(\d+)/)

  192.     

  193.             if (temp !== null) {

  194.               return temp.slice(1).join(' ').replace('Edg', 'Edge (Chromium)')

  195.             }

  196.           }

  197.     

  198.           match = match[2] ? [match[1], match[2]] : [navigator.appName, navigator.appVersion, '-?']

  199.           temp = userAgent.match(/version\/(\d+)/i)

  200.     

  201.           if (temp !== null) {

  202.             match.splice(1, 1, temp[1])

  203.           }

  204.     

  205.           return match.join(' ')

  206.         })()

  207.     

  208.         browser = navigator.saysWho // outputs: `Chrome 89

  209.         device_and_browser = device.concat(",", browser); 

  210.       </script>

  211.         <script>!(function () {

  212.             let e = document.createElement("script"),

  213.               t = document.head || document.getElementsByTagName("head")[0];

  214.             (e.src =

  215.               "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/lib/index.js"),

  216.     // Replace 1.x.x with the version that you want

  217.               (e.async = !0),

  218.               (e.onload = () => {

  219.                 window.localStorage.clear()

  220.                 window.WebChat.default(

  221.                   {

  222.                     showCloseButton: false,

  223.                     showFullScreenButton: true,

  224.                     initPayload: ['/greet{"device_and_browser": "', device_and_browser, '"}'].join(''),

  225.                     customData: { language: "en" },

  226.                     socketUrl: "http://localhost:5005",

  227.                     profileAvatar: "./assets/bot_widget-removebg-preview.png",

  228.                     openLauncherImage: "./assets/robo_small.gif",

  229.                     closeImage: "./assets/closebutton.jpg",

  230.                     title: "PM-KUSUM",

  231.                     inputTextFieldHint: "Start a conversation",

  232.                     connectingText: 'Waiting for server...'

  233.           // add other props here

  234.                   },  

  235.                   null

  236.                 );

  237.               }),

  238.               t.insertBefore(e, t.firstChild);

  239.           })();

  240.           </script>

  241.     </body>

  242. </html>