iai-group · IKostric · Aug 4, 2023 · Aug 5, 2023 · Aug 7, 2023 · Aug 7, 2023
diff --git a/README.md b/README.md
@@ -23,9 +23,9 @@ The widget can be initialized in one of two ways:
   * Add the following div to your website:
   `<div id="chatWidgetContainer"></div>`
   * Add the following script to your website:
-  `<script>initChatWidget()</script>`
+  `<script>ChatWidget()</script>`
 
-There is configuration associated with the widget. You can pass it to the `initChatWidget` function as an object or to the `div` element as attributes.
+There is configuration associated with the widget. You can pass it to the `ChatWidget` function as an object or to the `div` element as attributes.
 
 | Attribute           | Description             | Default value                 |
 | ------------------- | ----------------------- | -----------------------       |
@@ -55,7 +55,7 @@ Example usage:
     serverUrl: "http://127.0.0.1:5000",
     useFeedback: true,
     useLogin: true,
-  });
+  }, "customContainerId");
 </script>
 ```
 

diff --git a/public/index.html b/public/index.html
@@ -29,15 +29,18 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <h1>Chat</h1>
+    <div id="root" style="margin: 0 100px;">
+      <h1>Chat</h1>
     <p>Chat widget</p>
     <div 
       id="chatWidgetContainer"
       data-name="DevBot"
       data-server-url="http://127.0.0.1:5000"
+      data-show-explanation
       >
     </div>
     <p>Powered by <a href="">DevBot</a></p>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,30 @@
-import { Config } from "./types";
+import { useContext } from "react";
+import { ConfigContext } from "./contexts/ConfigContext";
+import { UserContext } from "./contexts/UserContext";
+import ChatBox from "./components/ChatBox/ChatBox";
+import LoginForm from "./components/LoginForm/LoginForm";
 import ChatWidget from "./components/Widget/ChatWidget";
 import ChatEmbedded from "./components/Embedded/ChatEmbedded";
+import ExplainableBox from "./components/Explainability/ExplainableBox";
 
-export default function App(props: Config) {
-  return props.useWidget ? (
-    <ChatWidget {...props} />
+export default function App() {
+  const { config } = useContext(ConfigContext);
+  const { user } = useContext(UserContext);
+
+  const showExplanation = config.showExplanation && user?.username;
+  const content = !user ? <LoginForm /> : <ChatBox />;
+  return config.useWidget ? (
+    <ChatWidget>{content}</ChatWidget>
   ) : (
-    <ChatEmbedded {...props} />
+    <ChatEmbedded>
+      {showExplanation && (
+        <div className="col md-6">
+          <ExplainableBox />
+        </div>
+      )}
+      <div className={showExplanation ? "col md-6" : "col md-12"}>
+        {content}
+      </div>
+    </ChatEmbedded>
   );
 }
diff --git a/src/components/ChatBox/ChatBox.css b/src/components/ChatBox/ChatBox.css
@@ -1,8 +1,8 @@
-#chatBox .form-control {
+.chat .form-control {
     border-color: transparent;
   }
 
-#chatBox .form-control:focus {
+.chat .form-control:focus {
   border-color: transparent;
   box-shadow: inset 0px 0px 0px 1px transparent;
 }
@@ -13,4 +13,10 @@
   flex: 1;
   height: 1px;
   background: #eee;
-}
+}
+
+.chat.card-body{
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column-reverse;
+ }
diff --git a/src/components/ChatBox/ChatBox.tsx b/src/components/ChatBox/ChatBox.tsx
@@ -1,36 +1,39 @@
 import "./ChatBox.css";
 
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useContext,
+} from "react";
 import QuickReplyButton from "../QuickReply";
-
-import {
-  MDBCard,
-  MDBCardHeader,
-  MDBCardBody,
-  MDBIcon,
-  MDBCardFooter,
-} from "mdb-react-ui-kit";
+import { useSocket } from "../../contexts/SocketContext";
+import { MDBCardBody, MDBIcon, MDBCardFooter } from "mdb-react-ui-kit";
 import { AgentChatMessage, UserChatMessage } from "../ChatMessage";
 import { ChatMessage } from "../../types";
-import useSocketConnection from "../socket_connector";
+import { ConfigContext } from "../../contexts/ConfigContext";
+import Frame from "../Frame/Frame";
 
-export default function ChatBox({
-  name,
-  use_feedback,
-  serverUrl,
-  socketioPath,
-}: {
-  name: string;
-  use_feedback: boolean;
-  serverUrl: string | undefined;
-  socketioPath: string | undefined;
-}) {
+export default function ChatBox() {
+  const { config } = useContext(ConfigContext);
+  const {
+    startConversation,
+    sendMessage,
+    quickReply,
+    onMessage,
+    onRestart,
+    giveFeedback,
+  } = useSocket();
   const [chatMessages, setChatMessages] = useState<JSX.Element[]>([]);
   const [chatButtons, setChatButtons] = useState<JSX.Element[]>([]);
   const [inputValue, setInputValue] = useState<string>("");
   const chatMessagesRef = useRef(chatMessages);
   const inputRef = useRef<HTMLInputElement>(null);
-  const connector = useSocketConnection(serverUrl, socketioPath);
+
+  useEffect(() => {
+    startConversation();
+  }, [startConversation]);
 
   const updateMessages = (message: JSX.Element) => {
     chatMessagesRef.current = [...chatMessagesRef.current, message];
@@ -46,7 +49,7 @@ export default function ChatBox({
         message={inputValue}
       />
     );
-    connector.sendMessage({ message: inputValue });
+    sendMessage({ message: inputValue });
     setInputValue("");
     if (inputRef.current) {
       inputRef.current.value = "";
@@ -61,9 +64,9 @@ export default function ChatBox({
           message={message}
         />
       );
-      connector.quickReply({ message: message });
+      quickReply({ message: message });
     },
-    [connector, chatMessagesRef]
+    [chatMessagesRef, quickReply]
   );
 
   const handelMessage = useCallback(
@@ -75,14 +78,14 @@ export default function ChatBox({
         updateMessages(
           <AgentChatMessage
             key={chatMessagesRef.current.length}
-            feedback={use_feedback ? connector.giveFeedback : null}
+            feedback={config.useFeedback ? giveFeedback : null}
             message={message.text}
             image_url={image_url}
           />
         );
       }
     },
-    [connector, chatMessagesRef, use_feedback]
+    [giveFeedback, chatMessagesRef, config]
   );
 
   const handleButtons = useCallback(
@@ -111,37 +114,23 @@ export default function ChatBox({
   );
 
   useEffect(() => {
-    connector.onMessage((message: ChatMessage) => {
+    onMessage((message: ChatMessage) => {
       handelMessage(message);
       handleButtons(message);
     });
-  }, [connector, handleButtons, handelMessage]);
+  }, [onMessage, handleButtons, handelMessage]);
 
   useEffect(() => {
-    connector.onRestart(() => {
+    onRestart(() => {
       setChatMessages([]);
       setChatButtons([]);
     });
-  }, [connector]);
+  }, [onRestart]);
 
   return (
-    <div className="chat-widget-content">
-      <MDBCard
-        id="chatBox"
-        className="chat-widget-card"
-        style={{ borderRadius: "15px" }}
-      >
-        <MDBCardHeader
-          className="d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
-          style={{
-            borderTopLeftRadius: "15px",
-            borderTopRightRadius: "15px",
-          }}
-        >
-          <p className="mb-0 fw-bold">{name}</p>
-        </MDBCardHeader>
-
-        <MDBCardBody>
+    <Frame>
+      <>
+        <MDBCardBody className="chat">
           <div className="card-body-messages">
             {chatMessages}
             <div className="d-flex flex-wrap justify-content-between">
@@ -164,7 +153,7 @@ export default function ChatBox({
             </button>
           </form>
         </MDBCardFooter>
-      </MDBCard>
-    </div>
+      </>
+    </Frame>
   );
 }
diff --git a/src/components/Embedded/ChatEmbedded.css b/src/components/Embedded/ChatEmbedded.css
@@ -1,6 +1,3 @@
-.chat-widget-content .card-body{
-    overflow-y: auto;
-    max-height: 500px;
-    display: flex;
-    flex-direction: column-reverse;
+.chat-widget-content .chat.card-body{
+    height: 501px;
    }
diff --git a/src/components/Embedded/ChatEmbedded.tsx b/src/components/Embedded/ChatEmbedded.tsx
@@ -1,15 +1,6 @@
 import "./ChatEmbedded.css";
-import React from "react";
-import ChatBox from "../ChatBox/ChatBox";
-import { Config } from "../../types";
+import { ReactNode } from "react";
 
-export default function ChatEmbedded(props: Config) {
-  return (
-    <ChatBox
-      name={props.name || "Chatbot"}
-      use_feedback={props.useFeedback || false}
-      serverUrl={props.serverUrl}
-      socketioPath={props.socketioPath}
-    />
-  );
+export default function ChatEmbedded({ children }: { children: ReactNode }) {
+  return <div className="row">{children}</div>;
 }
diff --git a/src/components/Explainability/ExplainableBox.css b/src/components/Explainability/ExplainableBox.css
@@ -0,0 +1,3 @@
+.chat-widget-content .exp.card-body{
+    height: 252px;
+   }
diff --git a/src/components/Explainability/ExplainableBox.tsx b/src/components/Explainability/ExplainableBox.tsx
@@ -0,0 +1,30 @@
+import "./ExplainableBox.css";
+import { useState } from "react";
+import { MDBCardBody } from "mdb-react-ui-kit";
+import Frame from "../Frame/Frame";
+
+export default function ExplainableBox() {
+  const [slotValueExplanation, setSlotValueExplanation] = useState<
+    JSX.Element[]
+  >([]);
+  const [neuralExplanation, setNeuralExplanation] = useState<JSX.Element[]>([]);
+
+  return (
+    <>
+      <div className="row">
+        <div className="col md-12">
+          <Frame title="Explainable AI - Slot-Value">
+            <MDBCardBody className="exp">{slotValueExplanation}</MDBCardBody>
+          </Frame>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col md-12">
+          <Frame title="Explainable AI - Neural Model">
+            <MDBCardBody className="exp">{neuralExplanation}</MDBCardBody>
+          </Frame>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Frame/Frame.css b/src/components/Frame/Frame.css
diff --git a/src/components/Frame/Frame.tsx b/src/components/Frame/Frame.tsx
@@ -0,0 +1,37 @@
+import "./Frame.css";
+
+import { useContext } from "react";
+import { MDBCard, MDBCardHeader } from "mdb-react-ui-kit";
+import { ConfigContext } from "../../contexts/ConfigContext";
+import { UserContext } from "../../contexts/UserContext";
+
+export default function Frame({
+  children,
+  title,
+}: {
+  children: JSX.Element;
+  title?: string;
+}) {
+  const { config } = useContext(ConfigContext);
+  const { user } = useContext(UserContext);
+
+  return (
+    <div className="chat-widget-content">
+      <MDBCard className="chat-widget-card" style={{ borderRadius: "15px" }}>
+        <MDBCardHeader
+          className="d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
+          style={{
+            borderTopLeftRadius: "15px",
+            borderTopRightRadius: "15px",
+          }}
+        >
+          <p className="mb-0 fw-bold">{title ? title : config.name}</p>
+          {user?.username && !title && (
+            <p className="mb-0 fw-bold">{user?.username}</p>
+          )}
+        </MDBCardHeader>
+        {children}
+      </MDBCard>
+    </div>
+  );
+}
diff --git a/src/components/LoginForm/LoginForm.css b/src/components/LoginForm/LoginForm.css
@@ -0,0 +1,20 @@
+.login {
+  max-width: 400px;
+}
+
+.login .form-control {
+    border-color: transparent;
+  }
+
+.login .form-control:focus {
+  border-color: transparent;
+  box-shadow: inset 0px 0px 0px 1px transparent;
+}
+
+.divider:after,
+.divider:before {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: #eee;
+}