documentation written and restart fixed

pvscreations · Dec 2, 2023 · a391215 · a391215
1 parent d382f5b
commit a391215
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 27 deletions.
diff --git a/chat.css b/chat.css
@@ -1,48 +1,56 @@
-    #chat{
-        width:50%;
-        margin:auto;
-        border:2px solid green;
-        list-style-type: none;
-        position: relative;
-    }
+    /* It descirbes the welcome msg say hi i am your assitant */
     .initial{
         font-weight: bold;
+        list-style-type:none;
+        text-transform: capitalize;
 
     }
+
+    /* It describes the container of client chat or right side chat */
     .client{
         display: flex;
         justify-content: end; 
 
     }
+
+    /* This below describes the chat of client or right side chat */
     .clientchat{       
-        border:1px solid red;
-        color:green
+        border:1px solid darkcyan;
+        color:green;
+        max-width:50%;
+
     }
     .clientchat:hover{
-        background-color:rgb(70, 176, 70);
-        color:white;
-    }
-    .botchat:hover{
-        background-color: rgb(180, 89, 89);
+        background-color:rgb(123, 94, 228);
         color:white;
     }
+
+    /* It describes the container of bot chat or left side chat */
+
     .bot{
-       display: inline-block;
-        max-width:50%;
-
-    }
+        display: inline-block;
+         max-width:50%;       
+     }
+    /* This below describes the chat of client or right side chat */
+
     .botchat{       
         border:1px solid gray;
 
     }
-.clientchat{
-    max-width:50%;
-}
+
+    .botchat:hover{
+        background-color: rgb(172, 89, 180);
+        color:white;
+    }
+
+    /* This describes the common properties of both client and bot chat */
     .botchat,.clientchat{
         padding:5px;
         border-radius:1px 10px 10px 10px;
         cursor: pointer;
        margin:2px;
+       list-style-type:none;
+
 
     }
 
diff --git a/chat.html b/chat.html
@@ -3,16 +3,24 @@
 <head>
 <title>'title her'
 </title>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pvscreations/[email protected]/chat.css">
+<link rel="stylesheet" href="./chat.css">
+<style type="text/css">
+   #chat{
+        width:50%;
+        margin:auto;
+        border:2px solid green;
+    } 
+</style>
 </head>
 <body>
     <div id="chat">
 
     </div>
 </body>
-<script src="https://cdn.jsdelivr.net/gh/pvscreations/[email protected]/chat.js"></script>
+<script src="./chat.js"></script>
 <script type="text/javascript">
-    var a={
+    // This is the questions data
+    var content={
     "attendance issues": {
         "teacher": "database is down currently",
         "app": {
@@ -37,7 +45,33 @@
     },
     "want to give feedback on app?": "database is down currently",
 };
-    const assistant=new Chatbot({content:a,container:document.getElementById("chat"),objectName:"assistant"},{welcomeMsg:"hi i am chotay betay","sendOfMsg":"goodbye",redirectLink:"b.html"});
+    /**
+     * Here we call the chatbot
+     * param1 is the required information to be sent to class
+            * content is object of question,
+            * container is in which you want to render the chat
+            * objectname is the object you are creating
+     *param2 is optional which is used to customize the chatbot
+            *welcomeMsg describes the chatbot msg which is hi i am xyz
+            *sendofmsg describes the final msg of chatbot like goodbye
+            *redirectlink is the link at final stage where you want to redirect the chatbot
+     * 
+    */
+    const assistant=new Chatbot(
+        {
+            content:content,
+            container:document.getElementById("chat"),
+            objectName:"assistant" //It is the object name you are creating here it is assistant you was creating line60
+        },
+        {
+            welcomeMsg:"hi i am your attendance assistant",
+            sendOfMsg:"goodbye",
+            redirectLink:"realtimechat.html"
+        }
+    );
+    /**
+     * Here we call the chatbot to come into effect
+    */
     assistant.initialise();
 
 </script>

diff --git a/chat.js b/chat.js
@@ -23,6 +23,7 @@ var Chatbot = /** @class */ (function () {
         this.chat = __assign(__assign({}, this.chat), chat);
         console.log(chat);
         this.containerRef = container;
+        this.containerRef.style.position = "relative";
     }
     Chatbot.prototype.initialise = function () {
         var x = document.createElement("li");
@@ -65,7 +66,7 @@ var Chatbot = /** @class */ (function () {
     Chatbot.prototype.finalise = function () {
         var x = document.createElement("div");
         x.setAttribute("class", "bot");
-        x.innerHTML = "<li class='botchat' onclick='(()=>{".concat(Chatbot.objectName, ".reciever(\"RESTART\"),").concat(Chatbot.objectName, ".initial(").concat(JSON.stringify(Chatbot.chatContent), ")})()'>Restart</li><li class='botchat' onClick=\"agent()\"><a href=\"").concat(this.chat.redirectLink, "\">").concat(this.chat.redirectMsg, "</a></li>");
+        x.innerHTML = "<li class='botchat' onclick='(()=>{".concat(Chatbot.objectName, ".reciever(\"RESTART\"),").concat(Chatbot.objectName, ".initialise()})()'>Restart</li><li class='botchat' onClick=\"agent()\"><a href=\"").concat(this.chat.redirectLink, "\">").concat(this.chat.redirectMsg, "</a></li>");
         this.containerRef.appendChild(x);
     };
     ;

diff --git a/chat.ts b/chat.ts
@@ -17,6 +17,7 @@ class Chatbot{
         this.chat={...this.chat,...chat};
         console.log(chat);
         this.containerRef=container;
+        this.containerRef.style.position="relative";
     }
 
     initialise(){
@@ -60,7 +61,7 @@ class Chatbot{
     finalise(){
         let x=document.createElement("div");
         x.setAttribute("class","bot");
-        x.innerHTML=`<li class='botchat' onclick='(()=>{${Chatbot.objectName}.reciever("RESTART"),${Chatbot.objectName}.initial(${JSON.stringify(Chatbot.chatContent)})})()'>Restart</li><li class='botchat' onClick="agent()"><a href="${this.chat.redirectLink}">${this.chat.redirectMsg}</a></li>`;
+        x.innerHTML=`<li class='botchat' onclick='(()=>{${Chatbot.objectName}.reciever("RESTART"),${Chatbot.objectName}.initialise()})()'>Restart</li><li class='botchat' onClick="agent()"><a href="${this.chat.redirectLink}">${this.chat.redirectMsg}</a></li>`;
         this.containerRef.appendChild(x);
     };
     feedback(){