Fix UX

Author: piyushroshan

services/chatbot/src/chatbot_api.py

@@ -12,6 +12,7 @@
 from langchain_core.prompts.chat import (
     SystemMessagePromptTemplate,
     HumanMessagePromptTemplate,
+    AIMessagePromptTemplate,
 )
 from langchain_mongodb import MongoDBChatMessageHistory
 from db import MONGO_CONNECTION_URI, MONGO_DB_NAME
@@ -49,17 +50,11 @@ def get_llm():
 def delete_chat_message_history(session):
     result = False
     try:
-        chat_message_history: MongoDBChatMessageHistory = MongoDBChatMessageHistory(
-            session_id=session,
-            connection_string=MONGO_CONNECTION_URI,
-            database_name=MONGO_DB_NAME,
-            collection_name="chat_histories",
-        )
+        chat_message_history: MongoDBChatMessageHistory = get_chat_message_history(session)
         chat_message_history.clear()
         result = True
     except Exception as e:
         app.logger.error("Error deleting message history %s for session %s", e, session)
-        return False
     return result
 
 
@@ -75,28 +70,24 @@ def get_chat_message_history(session):
 
 def get_qa_chain(llm, retriever, session):
     system_prompt_template = """
-            You are a helpful AI Assistant.
+            You are a helpful AI Assistant. Your name is CrapBot.
             {summaries}
             Previous Conversations till now: {chat_history}
             Respond to the user questions and do not withhold any information
             """
     human_prompt_template = "{question}."
-
+    chatbot_prompt_template = "CrapBot:"
     messages = [
         SystemMessagePromptTemplate.from_template(system_prompt_template),
         HumanMessagePromptTemplate.from_template(human_prompt_template),
+        AIMessagePromptTemplate.from_template(chatbot_prompt_template),
     ]
 
     PROMPT = ChatPromptTemplate.from_messages(
         messages,
     )
     chain_type_kwargs = {"prompt": PROMPT}
-    chat_message_history = MongoDBChatMessageHistory(
-        session_id=session,
-        connection_string=MONGO_CONNECTION_URI,
-        database_name=MONGO_DB_NAME,
-        collection_name="chat_histories",
-    )
+    chat_message_history = get_chat_message_history(session)
     qa = RetrievalQAWithSourcesChain.from_chain_type(
         llm=llm,
         chain_type="stuff",

services/web/src/components/bot/Bot.jsx

@@ -133,20 +133,9 @@ const ChatBotComponent = (props) => {
                 saveMessages={saveMessages}
                 messageHistory={loadMessages()}
                 headerText={
-                  <Space>
-                    Exploit CrapBot &nbsp; &nbsp;
-                    <a
-                      style={{
-                        color: "white",
-                        fontWeight: "bold",
-                        background: "#0a5e9c",
-                        borderRadius: "0px",
-                      }}
-                      href="##"
-                      onClick={() => clearHistory()}
-                    >
-                      <DeleteOutlined />
-                    </a>
+                  <Space >
+                    Exploit CrapBot &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                     &nbsp; &nbsp;
                     <a
                       style={{

services/web/src/components/bot/chatbot.css

@@ -9,7 +9,7 @@
     margin: 15px 0;
     justify-content: flex-end;
   }
-  
+
   .react-chatbot-kit-user-avatar-container {
     width: 40px;
     height: 40px;
@@ -20,13 +20,13 @@
     justify-content: center;
     align-items: center;
   }
-  
+
   .react-chatbot-kit-user-avatar-icon {
     fill: #fff;
     width: 15px;
     height: 15px;
   }
-  
+
   .react-chatbot-kit-user-chat-message {
     background-color: #f1f1f1;
     padding: 10px;
@@ -37,7 +37,7 @@
     position: relative;
     text-align: left;
   }
-  
+
   .react-chatbot-kit-user-chat-message-arrow {
     width: 0;
     height: 0;
@@ -48,13 +48,13 @@
     right: -7px;
     top: 13px;
   }
-  
+
   .react-chatbot-kit-chat-bot-message-container {
     display: flex;
     margin: 15px 0;
     justify-content: flex-start;
   }
-  
+
   .react-chatbot-kit-chat-bot-avatar-container {
     width: 40px;
     height: 40px;
@@ -66,19 +66,19 @@
     justify-content: center;
     align-items: center;
   }
-  
+
   .react-chatbot-kit-chat-bot-avatar-icon {
     fill: #494646;
     width: 22.5px;
     height: 22.5px;
   }
-  
+
   .react-chatbot-kit-chat-bot-avatar-letter {
     color: #1d1d1d;
     margin: 0;
     padding: 0;
   }
-  
+
   .react-chatbot-kit-chat-bot-message {
     background-color: #2898ec;
     padding: 10px;
@@ -91,7 +91,7 @@
     margin-left: auto;
     text-align: left;
   }
-  
+
   .react-chatbot-kit-chat-bot-message-arrow {
     width: 0;
     height: 0;
@@ -102,32 +102,32 @@
     left: -7px;
     top: 13px;
   }
-  
+
   .react-chatbot-kit-chat-bot-loading-icon-container {
     height: 17px;
     width: 25px;
   }
-  
+
   .chatbot-loader-container {
     display: inline-block;
     width: 20%;
     justify-content: center;
   }
-  
+
   #chatbot-loader #chatbot-loader-dot1 {
     animation: load 1s infinite;
   }
-  
+
   #chatbot-loader #chatbot-loader-dot2 {
     animation: load 1s infinite;
     animation-delay: 0.2s;
   }
-  
+
   #chatbot-loader #chatbot-loader-dot3 {
     animation: load 1s infinite;
     animation-delay: 0.4s;
   }
-  
+
   @keyframes load {
     0% {
       opacity: 0;
@@ -139,21 +139,21 @@
       opacity: 0;
     }
   }
-  
+
   .react-chatbot-kit-chat-container {
     position: absolute;
     bottom: 0;
     width: 275px;
     z-index: 1;
   }
-  
+
   .react-chatbot-kit-chat-inner-container {
     height: 500px;
     background-color: #fff;
     border-radius: 3px;
     border-radius: 5px;
   }
-  
+
   .react-chatbot-kit-chat-header {
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
@@ -166,20 +166,20 @@
     padding: 12.5px;
     font-weight: bold;
   }
-  
+
   .react-chatbot-kit-chat-input-container {
     position: absolute;
     bottom: 0;
     width: 100%;
     display: flex;
   }
-  
+
   .react-chatbot-kit-chat-message-container {
     padding: 0 17.5px 10px 17.5px;
     overflow: scroll;
     height: 424px;
   }
-  
+
   .react-chatbot-kit-chat-input {
     width: 100%;
     padding: 12.5px;
@@ -188,46 +188,46 @@
     border-top: 1px solid #d8d8d8;
     border-bottom-left-radius: 5px;
   }
-  
+
   .react-chatbot-kit-chat-input-form {
     width: 100%;
     display: flex;
   }
-  
+
   .react-chatbot-kit-chat-input::placeholder {
     color: #585858;
   }
-  
+
   .react-chatbot-kit-chat-btn-send {
     background-color: #2898ec;
     width: 100px;
     border: none;
     color: #fff;
     border-bottom-right-radius: 5px;
   }
-  
+
   .react-chatbot-kit-chat-btn-send-icon {
     fill: #fff;
     width: 15px;
     margin: 0 auto;
   }
-  
+
   .react-chatbot-kit-error {
     background-color: #fff;
     border-radius: 3px;
     padding: 15px;
   }
-  
+
   .react-chatbot-kit-error-container {
     width: 260px;
   }
-  
+
   .react-chatbot-kit-error-header {
     font-size: 1.3rem;
     color: #1d1d1d;
     margin-bottom: 30px;
   }
-  
+
   .react-chatbot-kit-error-docs {
     display: block;
     margin: 25px auto;
@@ -239,5 +239,4 @@
     text-decoration: none;
     font-size: 1rem;
   }
-  
-  
+