From 90d5fd58e827d4d51f21779d2af5d3492a6aa3a9 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Mon, 4 Sep 2023 16:35:02 +0530 Subject: [PATCH 01/17] fixed chat reset and css issues --- src/chatbot.css | 2 +- src/components/chatbot/Chatbot.jsx | 39 ++++++++++++++++++++++-------- 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/chatbot.css b/src/chatbot.css index 9e7efa9..1bb5c2f 100644 --- a/src/chatbot.css +++ b/src/chatbot.css @@ -259,7 +259,7 @@ margin: 0; padding: 5px; position: absolute; - top: 5px; + /* top: 5px; */ right: 5px; cursor: pointer; z-index: 99999999; diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index c7e44af..e27cf04 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -58,6 +58,7 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { id: uuidv4(), variant: "chatbot", message: parsedMessage, + timestamp: Date.now() }, }); } @@ -65,16 +66,30 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { fetchData(); }, [refreshChat]); - useEffect(() => { const fetchData = async () => { const savedConversation = JSON.parse( localStorage.getItem("docsbot_chat_history") ); - dispatch({ - type: "load_conversation", - payload: { savedConversation: savedConversation }, - }); + const currentTime = Date.now() + let lastMsgTimeStamp = 0 + if(savedConversation){ + Object.values(savedConversation)?.map(message=>{ + if(message?.timestamp > lastMsgTimeStamp){ + lastMsgTimeStamp = message?.timestamp + } + }) + if(currentTime - lastMsgTimeStamp > 12 * 60 * 60 * 1000){ + setRefreshChat(true) + } + else + { + dispatch({ + type: "load_conversation", + payload: { savedConversation: savedConversation }, + }); + } + } if (savedConversation == null && labels.firstMessage) { const parsedMessage = await parseMarkdown(labels.firstMessage); @@ -85,6 +100,7 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { id: uuidv4(), variant: "chatbot", message: parsedMessage, + timestamp: Date.now(), }, }); } @@ -98,17 +114,19 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { fetchData(); }, [labels.firstMessage]); + + useEffect(() => { localStorage.setItem( "docsbot_chat_history", JSON.stringify(state.messages) ); - if ( - state.lastMessage && - Date.now() - state.lastMessage > 12 * 60 * 60 * 1000 - ) - setRefreshChat(true); + // if ( + // state.lastMessage && + // Date.now() - state.lastMessage > 12 * 60 * 60 * 1000 + // ) + // setRefreshChat(true); }, [state.messages]); function fetchAnswer(question) { @@ -121,6 +139,7 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { variant: "chatbot", message: null, loading: true, + timestamp: Date.now() }, }); ref.current.scrollTop = ref.current.scrollHeight; From fda89d784d4908d3561fb2f9f6afd185fd316ff8 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Tue, 5 Sep 2023 10:40:16 +0530 Subject: [PATCH 02/17] removed commented code --- src/components/chatbot/Chatbot.jsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index e27cf04..b262478 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -122,11 +122,6 @@ export const Chatbot = ({ isOpen, setIsOpen }) => { JSON.stringify(state.messages) ); - // if ( - // state.lastMessage && - // Date.now() - state.lastMessage > 12 * 60 * 60 * 1000 - // ) - // setRefreshChat(true); }, [state.messages]); function fetchAnswer(question) { From 4508c2c34e0b5d167bc061e8f97c241b857d1c36 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Tue, 5 Sep 2023 17:42:16 +0530 Subject: [PATCH 03/17] hide faq type in sources --- src/components/botChatMessage/BotChatMessage.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/botChatMessage/BotChatMessage.jsx b/src/components/botChatMessage/BotChatMessage.jsx index 3b827a3..e0a21a4 100644 --- a/src/components/botChatMessage/BotChatMessage.jsx +++ b/src/components/botChatMessage/BotChatMessage.jsx @@ -145,9 +145,11 @@ export const BotChatMessage = ({ payload }) => { {showSources && (
    - {payload.sources?.map((source, index) => ( - - ))} + {payload.sources?.map((source, index) => { + if(source?.type?.toLowerCase() !=='qa'){ + return + } + })}
)} From 43b0d7cb8c2fe2837c1a4d9b1d07d2fd0b01bfb8 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Wed, 6 Sep 2023 18:21:52 +0530 Subject: [PATCH 04/17] created iframe resizable chatBox --- package-lock.json | 16 ++++ package.json | 1 + public/index.html | 3 + src/chatbot.css | 4 + .../botChatMessage/BotChatMessage.jsx | 2 +- src/components/chatbot/Chatbot.jsx | 4 +- .../iframeChat/IframeChatComponent.jsx | 58 +++++++++++++ src/components/iframeChat/iframeChat.css | 85 +++++++++++++++++++ src/components/iframeChat/index.js | 9 ++ webpack.config.js | 7 +- 10 files changed, 184 insertions(+), 5 deletions(-) create mode 100644 src/components/iframeChat/IframeChatComponent.jsx create mode 100644 src/components/iframeChat/iframeChat.css create mode 100644 src/components/iframeChat/index.js diff --git a/package-lock.json b/package-lock.json index 4df21ca..10a701f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "clsx": "^1.2.1", "eventemitter3": "^5.0.0", "random": "^4.1.0", + "re-resizable": "^6.9.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-shadow-root": "^6.2.0", @@ -6876,6 +6877,15 @@ "rc": "cli.js" } }, + "node_modules/re-resizable": { + "version": "6.9.11", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.11.tgz", + "integrity": "sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==", + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -13823,6 +13833,12 @@ "strip-json-comments": "~2.0.1" } }, + "re-resizable": { + "version": "6.9.11", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.11.tgz", + "integrity": "sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==", + "requires": {} + }, "react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", diff --git a/package.json b/package.json index 609448c..93cd430 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "clsx": "^1.2.1", "eventemitter3": "^5.0.0", "random": "^4.1.0", + "re-resizable": "^6.9.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-shadow-root": "^6.2.0", diff --git a/public/index.html b/public/index.html index 6959cc6..7720903 100644 --- a/public/index.html +++ b/public/index.html @@ -98,6 +98,9 @@

Embeddable Widget Demo

vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

+ +
+

HTML Ipsum Presents

diff --git a/src/chatbot.css b/src/chatbot.css index 1bb5c2f..d5312fb 100644 --- a/src/chatbot.css +++ b/src/chatbot.css @@ -198,6 +198,10 @@ overflow: hidden; } +.docsbot-chat-inner-container-radius{ + border-radius: 0 !important; +} + .docsbot-chat-header { display: flex; align-items: center; diff --git a/src/components/botChatMessage/BotChatMessage.jsx b/src/components/botChatMessage/BotChatMessage.jsx index e0a21a4..162a649 100644 --- a/src/components/botChatMessage/BotChatMessage.jsx +++ b/src/components/botChatMessage/BotChatMessage.jsx @@ -108,7 +108,7 @@ export const BotChatMessage = ({ payload }) => { {payload.sources && ( <>

- {payload.options.hideSources} + {payload.options?.hideSources} {!hideSources && ( + +
+ { + isOpen ? { + setWidth(width + d.width) + setHeight(height + d.height) + }} + minHeight={400} + minWidth={400} + maxWidth={"100%"} + > + + + + + + : null + } + + ) +} + +export default IframeChatComponent \ No newline at end of file diff --git a/src/components/iframeChat/iframeChat.css b/src/components/iframeChat/iframeChat.css new file mode 100644 index 0000000..dd145d5 --- /dev/null +++ b/src/components/iframeChat/iframeChat.css @@ -0,0 +1,85 @@ +.button-container{ + display: flex; + gap: 8px; + margin-bottom: 10px; +} + +.iframe-box{ + border: 1px solid rgb(221 213 213); +} + +#root { + max-width: 1280px; + margin: 0 auto; + padding: 32px; + text-align: center; + } + + @keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + .docsbot-wrapper { + width: 100%; + opacity: 1; + box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 5px 30px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px; + display: block; + z-index: 999999; + height: 100%; + line-height: 16px; + } + + .docsbot-wrapper.docsbot-left { + left: 20px; + right: unset; + } + + .docsbot-chat-container { + background-color: rgb(249, 250, 250); + height: 100%; + animation: fadeIn 0.5s; + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + } + + .docsbot-chat-bot-message { + width: auto; + margin-left: 0; + } + + /* on mobile make the chat window full screen */ + @media (max-width: 480px) { + .docsbot-wrapper { + width: 100%; + right: 0; + border-radius: 0; + bottom: 0; + top: 0; + height: 100%; + max-height: 100vh; + min-height: revert; + } + .docsbot-wrapper.docsbot-left { + left: 0; + right: unset; + } + .docsbot-chat-container { + border-radius: 0; + } + .floating-button.is-open { + display: none; + } + .mobile-close-button { + display: flex; + } + .docsbot-chat-inner-container { + height: 100%; + border-radius: 0; + } + } + \ No newline at end of file diff --git a/src/components/iframeChat/index.js b/src/components/iframeChat/index.js new file mode 100644 index 0000000..748cdc9 --- /dev/null +++ b/src/components/iframeChat/index.js @@ -0,0 +1,9 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import IframeChatComponent from './IframeChatComponent' + +const root = ReactDOM.createRoot(document.getElementById('docsbot-widget-embed')) + +root.render( + +) \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index f4678e2..9ceae7f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,11 +5,14 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (_, { mode }) => { return { - entry: "./src/components/embeddableWidget/EmbeddableWidget.jsx", + entry: { + chat: "./src/components/embeddableWidget/EmbeddableWidget.jsx", + main: "./src/components/iframeChat/index.js" + }, output: { path: path.resolve(__dirname, "build"), publicPath: "/", - filename: "chat.js", + filename: "[name].js", library: "DocsBotAI", libraryExport: "default", libraryTarget: "window", From 1ad5ba75e60f822e7d08eaee4b63bf2f7ac2cc3e Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 11:03:55 +0530 Subject: [PATCH 05/17] removed user resizable feature --- package-lock.json | 16 --------- package.json | 1 - .../iframeChat/IframeChatComponent.jsx | 35 ++++++++----------- src/components/iframeChat/iframeChat.css | 4 +++ 4 files changed, 19 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 10a701f..4df21ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "clsx": "^1.2.1", "eventemitter3": "^5.0.0", "random": "^4.1.0", - "re-resizable": "^6.9.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-shadow-root": "^6.2.0", @@ -6877,15 +6876,6 @@ "rc": "cli.js" } }, - "node_modules/re-resizable": { - "version": "6.9.11", - "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.11.tgz", - "integrity": "sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==", - "peerDependencies": { - "react": "^16.13.1 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -13833,12 +13823,6 @@ "strip-json-comments": "~2.0.1" } }, - "re-resizable": { - "version": "6.9.11", - "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.11.tgz", - "integrity": "sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==", - "requires": {} - }, "react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", diff --git a/package.json b/package.json index 93cd430..609448c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "clsx": "^1.2.1", "eventemitter3": "^5.0.0", "random": "^4.1.0", - "re-resizable": "^6.9.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-shadow-root": "^6.2.0", diff --git a/src/components/iframeChat/IframeChatComponent.jsx b/src/components/iframeChat/IframeChatComponent.jsx index 3b64f12..48ce94e 100644 --- a/src/components/iframeChat/IframeChatComponent.jsx +++ b/src/components/iframeChat/IframeChatComponent.jsx @@ -1,5 +1,4 @@ import React, { useState } from 'react' -import { Resizable } from 're-resizable'; import { Chatbot } from '../chatbot/Chatbot'; import { ChatbotProvider } from '../chatbotContext/ChatbotContext'; import { ConfigProvider } from '../configContext/ConfigContext'; @@ -13,12 +12,18 @@ import iframeChatStyles from "!raw-loader!./iframeChat.css" const IframeChatComponent = () => { const [isOpen, setIsOpen] = useState(false) - const [height, setHeight] = useState(500) - const [width, setWidth] = useState(1000) - const [config] = useState( { + const [config] = useState({ id: "ZrbLG98bbxZ9EFqiPvyl/UaRQtd7AOTaMXeRQGQRl", }) + const handleOpenEmbeddedBox = () => { + const floatChatBox = document.getElementById('docsbotai-root') + if (floatChatBox) { + // window?.DocsBotAI.unmount() + } + setIsOpen(true) + } + return (
@@ -29,27 +34,17 @@ const IframeChatComponent = () => {
- +
{ - isOpen ? { - setWidth(width + d.width) - setHeight(height + d.height) - }} - minHeight={400} - minWidth={400} - maxWidth={"100%"} - > + isOpen ?
- - - + + + - : null +
: null }
) diff --git a/src/components/iframeChat/iframeChat.css b/src/components/iframeChat/iframeChat.css index dd145d5..ea54727 100644 --- a/src/components/iframeChat/iframeChat.css +++ b/src/components/iframeChat/iframeChat.css @@ -6,6 +6,10 @@ .iframe-box{ border: 1px solid rgb(221 213 213); + position: relative; + width: 800px; + height: 500px; + box-sizing: border-box; } #root { From 68947b182bfb94b552442ac7d120941729ced121 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 12:15:15 +0530 Subject: [PATCH 06/17] rename folder and file name for embedded chat --- .../EmbeddedChat.jsx} | 8 ++++---- .../iframeChat.css => embeddedChatBox/embeddedChat.css} | 0 src/components/{iframeChat => embeddedChatBox}/index.js | 4 ++-- webpack.config.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) rename src/components/{iframeChat/IframeChatComponent.jsx => embeddedChatBox/EmbeddedChat.jsx} (90%) rename src/components/{iframeChat/iframeChat.css => embeddedChatBox/embeddedChat.css} (100%) rename src/components/{iframeChat => embeddedChatBox}/index.js (67%) diff --git a/src/components/iframeChat/IframeChatComponent.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx similarity index 90% rename from src/components/iframeChat/IframeChatComponent.jsx rename to src/components/embeddedChatBox/EmbeddedChat.jsx index 48ce94e..9f8fc35 100644 --- a/src/components/iframeChat/IframeChatComponent.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -8,9 +8,9 @@ import reactChatbotStyles from "!raw-loader!../../chatbot.css"; import floatingButtonStyles from "!raw-loader!../floatingButton/FloatingButton.css"; import optionsStyles from "!raw-loader!../options/Options.css"; import linkListStyles from "!raw-loader!../linkList/LinkList.css"; -import iframeChatStyles from "!raw-loader!./iframeChat.css" +import embeddedChatStyles from "!raw-loader!./embeddedChat.css" -const IframeChatComponent = () => { +const EmbeddedChat = () => { const [isOpen, setIsOpen] = useState(false) const [config] = useState({ id: "ZrbLG98bbxZ9EFqiPvyl/UaRQtd7AOTaMXeRQGQRl", @@ -31,7 +31,7 @@ const IframeChatComponent = () => { - +
@@ -50,4 +50,4 @@ const IframeChatComponent = () => { ) } -export default IframeChatComponent \ No newline at end of file +export default EmbeddedChat \ No newline at end of file diff --git a/src/components/iframeChat/iframeChat.css b/src/components/embeddedChatBox/embeddedChat.css similarity index 100% rename from src/components/iframeChat/iframeChat.css rename to src/components/embeddedChatBox/embeddedChat.css diff --git a/src/components/iframeChat/index.js b/src/components/embeddedChatBox/index.js similarity index 67% rename from src/components/iframeChat/index.js rename to src/components/embeddedChatBox/index.js index 748cdc9..712ee58 100644 --- a/src/components/iframeChat/index.js +++ b/src/components/embeddedChatBox/index.js @@ -1,9 +1,9 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import IframeChatComponent from './IframeChatComponent' +import EmbeddedChat from './EmbeddedChat' const root = ReactDOM.createRoot(document.getElementById('docsbot-widget-embed')) root.render( - + ) \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 9ceae7f..4146399 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ module.exports = (_, { mode }) => { return { entry: { chat: "./src/components/embeddableWidget/EmbeddableWidget.jsx", - main: "./src/components/iframeChat/index.js" + embeddedChat: "./src/components/embeddedChatBox/index.js" }, output: { path: path.resolve(__dirname, "build"), From 7761cc0d8444a475bf5187a9312fe60af44001cb Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 13:05:12 +0530 Subject: [PATCH 07/17] fixed design and responsiveness of embedded chat and removed header --- src/chatbot.css | 4 --- src/components/chatbot/Chatbot.jsx | 26 ++++++++++++------- .../embeddedChatBox/EmbeddedChat.jsx | 2 +- .../embeddedChatBox/embeddedChat.css | 7 +++-- 4 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/chatbot.css b/src/chatbot.css index d5312fb..1bb5c2f 100644 --- a/src/chatbot.css +++ b/src/chatbot.css @@ -198,10 +198,6 @@ overflow: hidden; } -.docsbot-chat-inner-container-radius{ - border-radius: 0 !important; -} - .docsbot-chat-header { display: flex; align-items: center; diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index 00d7494..ef9364c 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -18,7 +18,7 @@ import clsx from "clsx"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faXmark, faRefresh } from "@fortawesome/free-solid-svg-icons"; -export const Chatbot = ({ isOpen, setIsOpen , isIframeBox }) => { +export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { const [chatInput, setChatInput] = useState(""); const [refreshChat, setRefreshChat] = useState(false); const { dispatch, state } = useChatbot(); @@ -293,8 +293,9 @@ export const Chatbot = ({ isOpen, setIsOpen , isIframeBox }) => { part="wrapper" >
-
- + { + !isEmbeddedBox && { @@ -308,9 +309,14 @@ export const Chatbot = ({ isOpen, setIsOpen , isIframeBox }) => { {labels.close || "Close"} + }
{ @@ -327,7 +334,8 @@ export const Chatbot = ({ isOpen, setIsOpen , isIframeBox }) => { textAlign: headerAlignment === "left" ? "left" : "center", }} > - {logo ? ( + {isEmbeddedBox? null : + logo ? (
{
) : ( <> -

{botName}

- {description} - +

{botName}

+ {description} + )}
diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index 9f8fc35..b6390b8 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -41,7 +41,7 @@ const EmbeddedChat = () => { isOpen ?
- +
: null diff --git a/src/components/embeddedChatBox/embeddedChat.css b/src/components/embeddedChatBox/embeddedChat.css index ea54727..465abd3 100644 --- a/src/components/embeddedChatBox/embeddedChat.css +++ b/src/components/embeddedChatBox/embeddedChat.css @@ -5,11 +5,11 @@ } .iframe-box{ - border: 1px solid rgb(221 213 213); position: relative; - width: 800px; + width: 80%; height: 500px; box-sizing: border-box; + margin: auto; } #root { @@ -31,7 +31,6 @@ .docsbot-wrapper { width: 100%; opacity: 1; - box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 5px 30px 0px, rgba(0, 0, 0, 0.05) 0px 3px 3px 0px; display: block; z-index: 999999; height: 100%; @@ -44,9 +43,9 @@ } .docsbot-chat-container { + border-radius: 10px; background-color: rgb(249, 250, 250); height: 100%; - animation: fadeIn 0.5s; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } From cbb853427e1ced81e69b8d1c744c8889bbc7f4e4 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 16:35:49 +0530 Subject: [PATCH 08/17] fixed bugs and added feature to remove float button if embedded --- public/index.html | 3 ++- src/components/embeddableWidget/EmbeddableWidget.jsx | 4 ++-- src/components/embeddedChatBox/EmbeddedChat.jsx | 11 +++++++++-- src/components/embeddedChatBox/index.js | 9 --------- src/main.js | 11 +++++++++++ webpack.config.js | 2 +- 6 files changed, 25 insertions(+), 15 deletions(-) delete mode 100644 src/components/embeddedChatBox/index.js create mode 100644 src/main.js diff --git a/public/index.html b/public/index.html index 7720903..cea365a 100644 --- a/public/index.html +++ b/public/index.html @@ -99,7 +99,8 @@

Embeddable Widget Demo

quis, accumsan porttitor, facilisis luctus, metus

-
+
+

HTML Ipsum Presents

diff --git a/src/components/embeddableWidget/EmbeddableWidget.jsx b/src/components/embeddableWidget/EmbeddableWidget.jsx index 8bb37cc..eb8ff6c 100644 --- a/src/components/embeddableWidget/EmbeddableWidget.jsx +++ b/src/components/embeddableWidget/EmbeddableWidget.jsx @@ -38,11 +38,11 @@ export default class EmbeddableWidget { } const el = document.createElement("div"); el.id = "docsbotai-root"; - + const parentRootElement = document.getElementById('parent-root') if (parentElement) { document.querySelector(parentElement).appendChild(el); } else { - document.body.appendChild(el); + parentRootElement.appendChild(el) } const root = ReactDOM.createRoot(el); diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index b6390b8..79516d2 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { Chatbot } from '../chatbot/Chatbot'; import { ChatbotProvider } from '../chatbotContext/ChatbotContext'; import { ConfigProvider } from '../configContext/ConfigContext'; @@ -19,11 +19,18 @@ const EmbeddedChat = () => { const handleOpenEmbeddedBox = () => { const floatChatBox = document.getElementById('docsbotai-root') if (floatChatBox) { - // window?.DocsBotAI.unmount() + window?.DocsBotAI.unmount() } setIsOpen(true) } + useEffect(() => { + const reinitBtn = document.getElementById("reinit-btn"); + reinitBtn.addEventListener("click", () => { + setIsOpen(false) + }) + }, []) + return (
diff --git a/src/components/embeddedChatBox/index.js b/src/components/embeddedChatBox/index.js deleted file mode 100644 index 712ee58..0000000 --- a/src/components/embeddedChatBox/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import EmbeddedChat from './EmbeddedChat' - -const root = ReactDOM.createRoot(document.getElementById('docsbot-widget-embed')) - -root.render( - -) \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..9cb982b --- /dev/null +++ b/src/main.js @@ -0,0 +1,11 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import EmbeddedChat from './components/embeddedChatBox/EmbeddedChat' + +const root = ReactDOM.createRoot(document.getElementById('parent-root')) + +root.render( + <> + + +) \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 4146399..fe1b145 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,8 +6,8 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (_, { mode }) => { return { entry: { + main: "./src/main.js", chat: "./src/components/embeddableWidget/EmbeddableWidget.jsx", - embeddedChat: "./src/components/embeddedChatBox/index.js" }, output: { path: path.resolve(__dirname, "build"), From b05619fb3928456ceba16ed930f8a7b458658d7f Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 18:04:52 +0530 Subject: [PATCH 09/17] file name update and button text change in embedded --- src/components/embeddedChatBox/EmbeddedChat.jsx | 10 +++++++--- src/{main.js => index.js} | 0 webpack.config.js | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) rename src/{main.js => index.js} (100%) diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index 79516d2..ade24aa 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -26,9 +26,13 @@ const EmbeddedChat = () => { useEffect(() => { const reinitBtn = document.getElementById("reinit-btn"); - reinitBtn.addEventListener("click", () => { + const reinitBtnEventListener = reinitBtn.addEventListener("click", () => { setIsOpen(false) }) + + return ()=>{ + removeEventListener(reinitBtnEventListener) + } }, []) return ( @@ -41,8 +45,8 @@ const EmbeddedChat = () => {
- - + +
{ isOpen ?
diff --git a/src/main.js b/src/index.js similarity index 100% rename from src/main.js rename to src/index.js diff --git a/webpack.config.js b/webpack.config.js index fe1b145..9b78573 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,7 +6,7 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (_, { mode }) => { return { entry: { - main: "./src/main.js", + main: "./src/index.js", chat: "./src/components/embeddableWidget/EmbeddableWidget.jsx", }, output: { From 00be543a1583d2af5d590c493b7849cb959a6ae9 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Thu, 7 Sep 2023 18:08:40 +0530 Subject: [PATCH 10/17] removed input ref focus for embedded chat --- src/components/chatbot/Chatbot.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index ef9364c..8f4d2fd 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -106,7 +106,7 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { } //only focus on input if not mobile - if (mediaMatch.matches) { + if (mediaMatch.matches && !isEmbeddedBox) { inputRef.current.focus(); } }; From da5b05077f9048a8fde96e6bcba11e94698f7c56 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Fri, 8 Sep 2023 10:45:32 +0530 Subject: [PATCH 11/17] fixed embedded chatbox width and height --- .../embeddedChatBox/embeddedChat.css | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/embeddedChatBox/embeddedChat.css b/src/components/embeddedChatBox/embeddedChat.css index 465abd3..ecf84da 100644 --- a/src/components/embeddedChatBox/embeddedChat.css +++ b/src/components/embeddedChatBox/embeddedChat.css @@ -6,10 +6,12 @@ .iframe-box{ position: relative; - width: 80%; - height: 500px; + width: 600px; + height: 450px; box-sizing: border-box; margin: auto; + border-radius: 10px; + border: 2px solid #ded4d4; } #root { @@ -55,8 +57,19 @@ margin-left: 0; } + @media (max-width: 650px){ + .iframe-box{ + width: 450px; + height: 350px; + } + } + /* on mobile make the chat window full screen */ @media (max-width: 480px) { + .iframe-box{ + width: 100%; + height: 300px; + } .docsbot-wrapper { width: 100%; right: 0; @@ -71,9 +84,6 @@ left: 0; right: unset; } - .docsbot-chat-container { - border-radius: 0; - } .floating-button.is-open { display: none; } @@ -82,7 +92,7 @@ } .docsbot-chat-inner-container { height: 100%; - border-radius: 0; + /* border-radius: 0; */ } } \ No newline at end of file From 78314c6eef582b4d676850ddbddd87b1ca5da689 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Sat, 9 Sep 2023 12:58:09 +0530 Subject: [PATCH 12/17] changed id name and entry points --- public/index.html | 2 +- src/components/embeddableWidget/EmbeddableWidget.jsx | 4 +--- src/index.js | 2 +- webpack.config.js | 7 ++----- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index cea365a..608a822 100644 --- a/public/index.html +++ b/public/index.html @@ -99,7 +99,7 @@

Embeddable Widget Demo

quis, accumsan porttitor, facilisis luctus, metus

-
+

HTML Ipsum Presents

diff --git a/src/components/embeddableWidget/EmbeddableWidget.jsx b/src/components/embeddableWidget/EmbeddableWidget.jsx index eb8ff6c..1ece9ab 100644 --- a/src/components/embeddableWidget/EmbeddableWidget.jsx +++ b/src/components/embeddableWidget/EmbeddableWidget.jsx @@ -38,13 +38,11 @@ export default class EmbeddableWidget { } const el = document.createElement("div"); el.id = "docsbotai-root"; - const parentRootElement = document.getElementById('parent-root') if (parentElement) { document.querySelector(parentElement).appendChild(el); } else { - parentRootElement.appendChild(el) + document.body.appendChild(el); } - const root = ReactDOM.createRoot(el); root.render(component); diff --git a/src/index.js b/src/index.js index 9cb982b..8f99d52 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import EmbeddedChat from './components/embeddedChatBox/EmbeddedChat' -const root = ReactDOM.createRoot(document.getElementById('parent-root')) +const root = ReactDOM.createRoot(document.getElementById('docsbot-widget-embed')) root.render( <> diff --git a/webpack.config.js b/webpack.config.js index 9b78573..65ee5a7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,14 +5,11 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (_, { mode }) => { return { - entry: { - main: "./src/index.js", - chat: "./src/components/embeddableWidget/EmbeddableWidget.jsx", - }, + entry: ["./src/index.js", "./src/components/embeddableWidget/EmbeddableWidget.jsx"], output: { path: path.resolve(__dirname, "build"), publicPath: "/", - filename: "[name].js", + filename: "chat.js", library: "DocsBotAI", libraryExport: "default", libraryTarget: "window", From a390543fbea7befcb86ab20151692ce17558ff6e Mon Sep 17 00:00:00 2001 From: Aaron Edwards Date: Mon, 11 Sep 2023 17:10:56 -0500 Subject: [PATCH 13/17] Minor css changes --- public/index.html | 2 +- src/components/embeddedChatBox/EmbeddedChat.jsx | 2 +- src/components/embeddedChatBox/embeddedChat.css | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index 608a822..d0797b6 100644 --- a/public/index.html +++ b/public/index.html @@ -99,7 +99,7 @@

Embeddable Widget Demo

quis, accumsan porttitor, facilisis luctus, metus

-
+

HTML Ipsum Presents

diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index ade24aa..abe37b8 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -49,7 +49,7 @@ const EmbeddedChat = () => {
{ - isOpen ?
+ isOpen ?
diff --git a/src/components/embeddedChatBox/embeddedChat.css b/src/components/embeddedChatBox/embeddedChat.css index ecf84da..b220b5a 100644 --- a/src/components/embeddedChatBox/embeddedChat.css +++ b/src/components/embeddedChatBox/embeddedChat.css @@ -4,14 +4,14 @@ margin-bottom: 10px; } -.iframe-box{ +.docsbot-iframe-box{ position: relative; - width: 600px; - height: 450px; + width: 100%; + height: 100%; box-sizing: border-box; margin: auto; border-radius: 10px; - border: 2px solid #ded4d4; + border: 1px solid #ded4d4; } #root { @@ -58,7 +58,7 @@ } @media (max-width: 650px){ - .iframe-box{ + .docsbot-iframe-box{ width: 450px; height: 350px; } @@ -66,7 +66,7 @@ /* on mobile make the chat window full screen */ @media (max-width: 480px) { - .iframe-box{ + .docsbot-iframe-box{ width: 100%; height: 300px; } From fa45973da798af5af75a339840415a56cf52b7f9 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Tue, 12 Sep 2023 14:45:15 +0530 Subject: [PATCH 14/17] handled case if no embedded div found in dom and removed button --- src/components/embeddedChatBox/EmbeddedChat.jsx | 15 ++++----------- src/index.js | 15 ++++++++++++++- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index abe37b8..38c7892 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -30,33 +30,26 @@ const EmbeddedChat = () => { setIsOpen(false) }) - return ()=>{ + return () => { removeEventListener(reinitBtnEventListener) } }, []) return ( -
+
- -
- - -
- { - isOpen ?
+
-
: null - } +
) } diff --git a/src/index.js b/src/index.js index 8f99d52..a6e1c3c 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,20 @@ import React from "react"; import ReactDOM from "react-dom/client"; import EmbeddedChat from './components/embeddedChatBox/EmbeddedChat' -const root = ReactDOM.createRoot(document.getElementById('docsbot-widget-embed')) +let el = null; +const embeddedElement = document.getElementById('docsbot-widget-embed') +if (embeddedElement) { + el = embeddedElement +} +else { + const embeddedElement = document.createElement("div"); + embeddedElement.id = "docsbot-widget-embed"; + embeddedElement.style = "width:600px;height:450px;margin:auto 20px;" + document.body.appendChild(embeddedElement) + el = embeddedElement +} + +const root = ReactDOM.createRoot(el) root.render( <> From 33f2eee6694e8b79788ed74a3411ef7aab1333a5 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Wed, 13 Sep 2023 12:27:28 +0530 Subject: [PATCH 15/17] added dynamic rendering of embedded chat and widget , reduced code size --- .../embeddableWidget/EmbeddableWidget.jsx | 31 ++++++++++------ .../embeddedChatBox/EmbeddedChat.jsx | 36 +++---------------- src/index.js | 24 ------------- webpack.config.js | 2 +- 4 files changed, 27 insertions(+), 66 deletions(-) delete mode 100644 src/index.js diff --git a/src/components/embeddableWidget/EmbeddableWidget.jsx b/src/components/embeddableWidget/EmbeddableWidget.jsx index 1ece9ab..1f79eba 100644 --- a/src/components/embeddableWidget/EmbeddableWidget.jsx +++ b/src/components/embeddableWidget/EmbeddableWidget.jsx @@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client"; import App from "../app/App"; import { ConfigProvider } from "../configContext/ConfigContext"; import { Emitter } from "../../utils/event-emitter"; - +import EmbeddedChat from '../embeddedChatBox/EmbeddedChat' export default class EmbeddableWidget { static _root; static el; @@ -26,24 +26,35 @@ export default class EmbeddableWidget { } static mount({ parentElement = null, ...props } = {}) { + const embeddedChatElement = document.getElementById('docsbot-widget-embed') const component = ( - + { + embeddedChatElement ? : + } ); const doRender = () => { if (EmbeddableWidget.el) { - throw new Error("EmbeddableWidget is already mounted, unmount first"); + console.warn("EmbeddableWidget is already mounted, unmount first"); + return false + } + let el = null + let root = null + if (embeddedChatElement) { + el = embeddedChatElement } - const el = document.createElement("div"); - el.id = "docsbotai-root"; - if (parentElement) { - document.querySelector(parentElement).appendChild(el); - } else { - document.body.appendChild(el); + else { + el = document.createElement("div"); + el.id = "docsbotai-root"; + if (parentElement) { + document.querySelector(parentElement).appendChild(el); + } else { + document.body.appendChild(el); + } } - const root = ReactDOM.createRoot(el); + root = ReactDOM.createRoot(el); root.render(component); this._root = root; diff --git a/src/components/embeddedChatBox/EmbeddedChat.jsx b/src/components/embeddedChatBox/EmbeddedChat.jsx index 38c7892..e612d92 100644 --- a/src/components/embeddedChatBox/EmbeddedChat.jsx +++ b/src/components/embeddedChatBox/EmbeddedChat.jsx @@ -1,7 +1,6 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { Chatbot } from '../chatbot/Chatbot'; import { ChatbotProvider } from '../chatbotContext/ChatbotContext'; -import { ConfigProvider } from '../configContext/ConfigContext'; import fontAwesomeStyles from "!raw-loader!@fortawesome/fontawesome-svg-core/styles.css"; import reactChatbotStyles from "!raw-loader!../../chatbot.css"; @@ -11,29 +10,6 @@ import linkListStyles from "!raw-loader!../linkList/LinkList.css"; import embeddedChatStyles from "!raw-loader!./embeddedChat.css" const EmbeddedChat = () => { - const [isOpen, setIsOpen] = useState(false) - const [config] = useState({ - id: "ZrbLG98bbxZ9EFqiPvyl/UaRQtd7AOTaMXeRQGQRl", - }) - - const handleOpenEmbeddedBox = () => { - const floatChatBox = document.getElementById('docsbotai-root') - if (floatChatBox) { - window?.DocsBotAI.unmount() - } - setIsOpen(true) - } - - useEffect(() => { - const reinitBtn = document.getElementById("reinit-btn"); - const reinitBtnEventListener = reinitBtn.addEventListener("click", () => { - setIsOpen(false) - }) - - return () => { - removeEventListener(reinitBtnEventListener) - } - }, []) return (
@@ -44,12 +20,10 @@ const EmbeddedChat = () => {
- - - - - -
+ + + +
) } diff --git a/src/index.js b/src/index.js deleted file mode 100644 index a6e1c3c..0000000 --- a/src/index.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import EmbeddedChat from './components/embeddedChatBox/EmbeddedChat' - -let el = null; -const embeddedElement = document.getElementById('docsbot-widget-embed') -if (embeddedElement) { - el = embeddedElement -} -else { - const embeddedElement = document.createElement("div"); - embeddedElement.id = "docsbot-widget-embed"; - embeddedElement.style = "width:600px;height:450px;margin:auto 20px;" - document.body.appendChild(embeddedElement) - el = embeddedElement -} - -const root = ReactDOM.createRoot(el) - -root.render( - <> - - -) \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 65ee5a7..f4678e2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,7 @@ const TerserPlugin = require("terser-webpack-plugin"); module.exports = (_, { mode }) => { return { - entry: ["./src/index.js", "./src/components/embeddableWidget/EmbeddableWidget.jsx"], + entry: "./src/components/embeddableWidget/EmbeddableWidget.jsx", output: { path: path.resolve(__dirname, "build"), publicPath: "/", From 3adba7882d5bd7d2c373cafabb12a308baa59e6c Mon Sep 17 00:00:00 2001 From: Aaron Edwards Date: Thu, 14 Sep 2023 15:52:31 -0500 Subject: [PATCH 16/17] Add optional header removal Fix mobile view --- public/index.html | 7 +- src/components/chatbot/Chatbot.jsx | 117 +++++++++--------- .../embeddedChatBox/embeddedChat.css | 14 +-- 3 files changed, 67 insertions(+), 71 deletions(-) diff --git a/public/index.html b/public/index.html index d0797b6..05fc41a 100644 --- a/public/index.html +++ b/public/index.html @@ -38,7 +38,7 @@

Embeddable Widget Demo

}, //signature: 'hmachash:expiry', options: { - alignment: 'right', + alignment: 'left', horizontalMargin: 20, verticalMargin: 20, //hideSources: true, @@ -48,6 +48,7 @@

Embeddable Widget Demo

logo: "https://docsbot.ai/branding/docsbot-logo-white.png", //headerAlignment: "left", //logo: "https://docsbot.ai/branding/docsbot-logo-lg.png", + //hideHeader: true, } }).then(() => { // Script is safely loaded, you can do whatever you want from here with bot @@ -99,8 +100,8 @@

Embeddable Widget Demo

quis, accumsan porttitor, facilisis luctus, metus

-
-
+
+

HTML Ipsum Presents

diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index 8f4d2fd..9ebaf16 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -18,7 +18,7 @@ import clsx from "clsx"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faXmark, faRefresh } from "@fortawesome/free-solid-svg-icons"; -export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { +export const Chatbot = ({ isOpen, setIsOpen, isEmbeddedBox }) => { const [chatInput, setChatInput] = useState(""); const [refreshChat, setRefreshChat] = useState(false); const { dispatch, state } = useChatbot(); @@ -38,6 +38,7 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { verticalMargin, logo, headerAlignment, + hideHeader, } = useConfig(); const ref = useRef(); const inputRef = useRef(); @@ -58,7 +59,7 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { id: uuidv4(), variant: "chatbot", message: parsedMessage, - timestamp: Date.now() + timestamp: Date.now(), }, }); } @@ -71,19 +72,17 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { const savedConversation = JSON.parse( localStorage.getItem("docsbot_chat_history") ); - const currentTime = Date.now() - let lastMsgTimeStamp = 0 - if(savedConversation){ - Object.values(savedConversation)?.map(message=>{ - if(message?.timestamp > lastMsgTimeStamp){ - lastMsgTimeStamp = message?.timestamp + const currentTime = Date.now(); + let lastMsgTimeStamp = 0; + if (savedConversation) { + Object.values(savedConversation)?.map((message) => { + if (message?.timestamp > lastMsgTimeStamp) { + lastMsgTimeStamp = message?.timestamp; } - }) - if(currentTime - lastMsgTimeStamp > 12 * 60 * 60 * 1000){ - setRefreshChat(true) - } - else - { + }); + if (currentTime - lastMsgTimeStamp > 12 * 60 * 60 * 1000) { + setRefreshChat(true); + } else { dispatch({ type: "load_conversation", payload: { savedConversation: savedConversation }, @@ -114,14 +113,11 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { fetchData(); }, [labels.firstMessage]); - - useEffect(() => { localStorage.setItem( "docsbot_chat_history", JSON.stringify(state.messages) ); - }, [state.messages]); function fetchAnswer(question) { @@ -134,7 +130,7 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { variant: "chatbot", message: null, loading: true, - timestamp: Date.now() + timestamp: Date.now(), }, }); ref.current.scrollTop = ref.current.scrollHeight; @@ -293,68 +289,73 @@ export const Chatbot = ({ isOpen, setIsOpen , isEmbeddedBox }) => { part="wrapper" >
-
- { - !isEmbeddedBox && { - e.preventDefault(); - setIsOpen(false); - }} - sr-label="Close chat" - > - - - {labels.close || "Close"} - - - } +
+ {!isEmbeddedBox && ( + { + e.preventDefault(); + setIsOpen(false); + }} + sr-label="Close chat" + > + + + {labels.close || "Close"} + + + )}
-
- {isEmbeddedBox? null : - logo ? ( -
{botName}
) : ( <> -

{botName}

- {description} - +

{botName}

+ {description} + )}
diff --git a/src/components/embeddedChatBox/embeddedChat.css b/src/components/embeddedChatBox/embeddedChat.css index b220b5a..7bfe6c8 100644 --- a/src/components/embeddedChatBox/embeddedChat.css +++ b/src/components/embeddedChatBox/embeddedChat.css @@ -10,7 +10,7 @@ height: 100%; box-sizing: border-box; margin: auto; - border-radius: 10px; + border-radius: 15px; border: 1px solid #ded4d4; } @@ -45,7 +45,7 @@ } .docsbot-chat-container { - border-radius: 10px; + border-radius: 15px; background-color: rgb(249, 250, 250); height: 100%; width: 100%; @@ -56,19 +56,13 @@ width: auto; margin-left: 0; } - - @media (max-width: 650px){ - .docsbot-iframe-box{ - width: 450px; - height: 350px; - } - } /* on mobile make the chat window full screen */ @media (max-width: 480px) { .docsbot-iframe-box{ width: 100%; - height: 300px; + height: 100%; + max-height: calc(100vh - 120px); } .docsbot-wrapper { width: 100%; From 0a778aa4ac5301653285eb16979f15f3bdf6a4b2 Mon Sep 17 00:00:00 2001 From: Yuvraj Singh Date: Wed, 11 Oct 2023 10:38:09 +0530 Subject: [PATCH 17/17] use of reset lable --- src/components/chatbot/Chatbot.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chatbot/Chatbot.jsx b/src/components/chatbot/Chatbot.jsx index 2eb7498..2633c14 100644 --- a/src/components/chatbot/Chatbot.jsx +++ b/src/components/chatbot/Chatbot.jsx @@ -346,7 +346,7 @@ export const Chatbot = ({ isOpen, setIsOpen, isEmbeddedBox }) => {