pager-widget 0.2.1 → 0.2.3

package/App.jsx

@@ -15,6 +15,7 @@ import useWidgetService from "./useWidgetService";
 import InputConverter from "./InputConverter";
 import ConsentPopup from "./ConsentPopup";
 import axios from "axios";
+import { EndPointProvider } from "./useEndpoint";
 
 const switchSize = (size, small, medium, large) => {
   //  ;
@@ -77,7 +78,7 @@ const FormHeader = styled.div`
   align-items: center;
   width: 100%;
   float: left;
-  font-family: "Gordita-Medium", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   font-size: ${(props) => switchSize(props.size, "15px", "20px", "24px")};
   color: #000;
   margin-right: 12px;
@@ -135,7 +136,7 @@ const ChatWrapper = styled.div`
         height: 46px;
 
             p{
-            font-family: 'Gordita-Regular', 'Open Sans', sans-serif;;
+            font-family: "Inter", "Open Sans";
             font-size: 12px;
             color: #000;
             margin: 0;
@@ -312,7 +313,7 @@ const ChatContentWrapper = styled.div`
   padding: 12px 20px 20px 15px;
   display: block;
   overflow-y: scroll;
-  background: #F6F8FA;
+  background: #FFFFFF;
   overflow-x: hidden;
   box-sizing: border-box;
   // background-position: center;
@@ -354,14 +355,14 @@ const AssistantChat = styled.div`
   // .timestamp {
   //   color: #888;
   //   font-size: 10px;
-  //   font-family: 'Gordita-Regular', 'Open Sans', sans-serif;
+  //   font-family: "Inter", "Open Sans";
   // }
 
   // .tryit_cards h4 {
   //   font-size: 13px;
   //   margin-top: 10px;
   //   margin-bottom: 0px;
-  //   font-family: 'Gordita-Medium', 'Open Sans', sans-serif;
+  //   font-family: "Inter", "Open Sans";
   //   width: 100%;
   //   color: #fff;
 
@@ -773,7 +774,7 @@ const ContentHeader = styled.div`
   }
 `;
 const Paragraph = styled.p`
-  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   margin: 0;
   width: 100%;
   color: #000;
@@ -809,14 +810,14 @@ const ChatMessage = styled.div`
   padding: 12px 10px 8px 16px !important;
   margin-left: 14px;
   margin-top: 14px;
-  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   white-space: pre-wrap;
   box-sizing: border-box;
   word-break: break-word;
   border-radius: 0px 6px 6px 6px;
   color: #333;
   position: relative;
-  background: #ffffff 0% 0% no-repeat padding-box;
+  background: #f2f4f7 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 5px #00000029;
   border-radius: 0px 10px 10px 10px;
   // font-size: 13px;
@@ -912,7 +913,7 @@ const ChatMessage = styled.div`
   .timestamp {
     color: #888;
     // font-size: 10px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
     position: relative;
     bottom: 0px;
     text-transform: uppercase;
@@ -947,7 +948,7 @@ const ChatMessage = styled.div`
 
     h6 {
       // font-size: 13px;
-      font-family: "Gordita-Medium", "Open Sans", sans-serif;
+      font-family: "Inter", "Open Sans";
       color: #333;
       margin: 0;
 
@@ -976,7 +977,7 @@ const ChatMessage = styled.div`
   .chatAssistant_one {
     h6 {
       font-size: 16px;
-      font-family: "Gordita-Regular", "Open Sans", sans-serif;
+      font-family: "Inter", "Open Sans";
       color: #555;
       margin: 16px 0 0;
       font-style: italic;
@@ -988,7 +989,7 @@ const ChatMessage = styled.div`
       li {
         color: #1d48eb;
         font-size: 16px;
-        font-family: "Gordita-Regular", "Open Sans", sans-serif;
+        font-family: "Inter", "Open Sans";
         margin-bottom: 4px;
         a {
           text-decoration: none;
@@ -1006,24 +1007,24 @@ const ChatMessage = styled.div`
 
   .wid_message {
     font-size: 16px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
   }
 `;
 
 const FormMessage = styled.div`
   width: 100%;
 
-  padding: 1px 10px 8px 16px !important;
+  padding: 1px 10px 8px 10px !important;
   margin-left: 14px;
   margin-top: 20px;
-  font-family: "Gordita-Regular", "Open Sans", sans-serif;
+  font-family: "Inter", "Open Sans";
   white-space: pre-wrap;
   box-sizing: border-box;
   word-break: break-word;
   border-radius: 0px 6px 6px 6px;
   color: #333;
   // position: relative;
-  background: #ffffff 0% 0% no-repeat padding-box;
+  background: #f6f8fa 0% 0% no-repeat padding-box;
   box-shadow: 0px 3px 5px #00000029;
   border: 1px solid lightgrey;
   // border-radius: 0px 10px 10px 10px;
@@ -1345,7 +1346,7 @@ const MessageBox = styled.div`
   .timestamp {
     color: #888;
     font-size: 10px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
@@ -1372,7 +1373,7 @@ const MessageBox = styled.div`
     font-size: 13px;
     margin-top: 10px;
     margin-bottom: 0px;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
     width: 100%;
     color: #fff;
 
@@ -1402,7 +1403,7 @@ const MessageBox = styled.div`
     font-size: 12px;
     color: #fff;
     max-width: 100%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
     margin: 0 0 8px 0;
     display: flex;
 
@@ -1566,7 +1567,7 @@ const MessageBox = styled.div`
 
         h6 {
           font-size: 13px;
-          font-family: "Gordita-Medium", "Open Sans", sans-serif;
+          font-family: "Inter", "Open Sans";
           color: #333;
           margin: 0;
 
@@ -1660,7 +1661,7 @@ const MessageBox = styled.div`
     font-size: 12px;
     width: 35%;
     margin: 0;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -1688,7 +1689,7 @@ const MessageBox = styled.div`
     position: relative;
     bottom: 1px;
     width: 60%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "Inter", "Open Sans";
     margin: 0;
     word-break: break-word;
 
@@ -1722,7 +1723,6 @@ const FormBox = styled.div`
   width: 100%;
   position: relative;
   display: flex;
-  
 
   ${LogoSize} {
     position: absolute;
@@ -2036,7 +2036,7 @@ const FormBox = styled.div`
   .timestamp {
     color: #888;
     font-size: 10px;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "12px", "12px", "16px")};
@@ -2063,7 +2063,7 @@ const FormBox = styled.div`
     font-size: 13px;
     margin-top: 10px;
     margin-bottom: 0px;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     width: 100%;
     color: #fff;
 
@@ -2093,7 +2093,7 @@ const FormBox = styled.div`
     font-size: 12px;
     color: #fff;
     max-width: 100%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     margin: 0 0 8px 0;
     display: flex;
 
@@ -2257,7 +2257,7 @@ const FormBox = styled.div`
 
         h6 {
           font-size: 13px;
-          font-family: "Gordita-Medium", "Open Sans", sans-serif;
+          font-family: "'Inter', 'Open Sans'";
           color: #333;
           margin: 0;
 
@@ -2351,7 +2351,7 @@ const FormBox = styled.div`
     font-size: 12px;
     width: 35%;
     margin: 0;
-    font-family: "Gordita-Medium", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
 
     @media (min-width: 2160px) {
       font-size: ${(props) => switchSize(props.size, "16px", "18px", "20px")};
@@ -2379,7 +2379,7 @@ const FormBox = styled.div`
     position: relative;
     bottom: 1px;
     width: 60%;
-    font-family: "Gordita-Regular", "Open Sans", sans-serif;
+    font-family: "'Inter', 'Open Sans'";
     margin: 0;
     word-break: break-word;
 
@@ -2642,7 +2642,7 @@ const WidgetUpdateButton = styled.div`
       cursor: pointer;
       margin-top: 12px;
       font-size: 14px;
-      font-family: "Gordita-Regular";
+      font-family: "Inter";
       display: flex;
       align-items: center;
       padding: 6px 12px;
@@ -2677,7 +2677,7 @@ export const Button = styled.button`
   outline: 0;
   cursor: pointer;
   margin-top: 4px;
-  font-family: "Gordita-Regular";
+  font-family: "Inter";
   display: inline-flex;
   align-items: center;
   padding: 6px 12px;
@@ -2777,8 +2777,8 @@ const InputMessageChat = styled.div`
   padding: 8px 16px 4px 16px;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #e5e5e5;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
 
   .widget_input_message_section {
     display: flex;
@@ -2806,7 +2806,7 @@ const InputMessageChat = styled.div`
         border: none;
         background-color: transparent;
         outline: none;
-        font-family: "Gordita-Regular";
+        font-family: "Inter";
         // font-size: 14px !important;
         // margin-top: 5px;
         // line-height: 20px;
@@ -3111,7 +3111,7 @@ const ButtonWrapper = styled.div`
       cursor: pointer;
       margin-top: 12px;
       font-size: 12px;
-      font-family: "Gordita-Regular";
+      font-family: "Inter";
       display: inline-flex;
       align-items: center;
       padding: 6px 12px;
@@ -3162,7 +3162,7 @@ const style = {
   overflowWrap: "break-word",
   textAlign: "start",
   height: "38px",
-  fontFamily: "Gordita-Regular",
+  fontFamily: "Inter",
 };
 
 const App = ({
@@ -3222,9 +3222,7 @@ const App = ({
     if (!widget?.id) return; // Prevent API call if widget ID is undefined
 
     axios
-      .get(
-        `http://dev.pagergpt.ai/wgt-hook/public/${widget?.workspace}/${widget.id}/form`
-      )
+      .get(`${endpoint}/public/${widget?.workspace}/${widget.id}/form`)
       .then((res) => {
         setFields(res.data);
       })
@@ -3256,6 +3254,7 @@ const App = ({
               exit={exit}
               logoshape={style.logo_shape}
             />
+            <EndPointProvider endpoint={endpoint}>
             <ChatContentWrapper
               size={widget_size}
               clsassName="widget_chat_content"
@@ -3298,8 +3297,8 @@ const App = ({
                       style={{
                         borderRadius: "50%",
                         top: "2px",
-                        height: "28px",
-                        width: "28px",
+                        height: "24.9px",
+                        width: "24px",
                       }}
                     >
                       <img
@@ -3318,7 +3317,7 @@ const App = ({
                       <InputConverter
                         formData={fields}
                         conversationId={conversationId}
-                        widgetId={widget_id}
+                        widget={widget}
                         workspace={widget?.workspace}
                         setFormSubmit={setFormSubmit}
                         setSourceState={setSourceState}
@@ -3328,6 +3327,7 @@ const App = ({
                 </>
               ) : null}
             </ChatContentWrapper>
+            </EndPointProvider>
             <Footer
               {...{ sendMessage, onFileUpload }}
               widget={widget}
@@ -3921,7 +3921,7 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
           </Paragraph>
         </ContentHeaderLeft>
         <ContentHeaderRight size={scale.widgetSize}>
-          <IconSpan
+          {/* <IconSpan
             className="relative restart"
             onClick={restart}
             style={{ fill: widget.primary_color }}
@@ -3943,8 +3943,28 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
               />
             </svg>
             <label className="restart_content">Restart Chat</label>
-          </IconSpan>
-          <IconSpan
+          </IconSpan> */}
+          <div
+            style={{
+              
+              display: "flex",
+              gap: "8px",
+            }}
+          >
+            <button
+              onClick={restart}
+              style={{
+                color: `${widget.primary_color}`,
+                background: `${widget.accent_color}`,
+                border: "1px solid white",
+                padding: "6px 12px",
+                borderRadius: "8px",
+                height: "28px"
+              }}
+            >
+              Restart
+            </button>
+            {/* <IconSpan
             className="relative close_section"
             onClick={exit}
             style={{ fill: widget.primary_color }}
@@ -3964,7 +3984,21 @@ const ChatHeaderTop = ({ widget, onClick, open, restart, exit, logoshape }) => {
               <path d="M16.8 14.9l4.2-4.2.1-.1c.4-.5.4-1.3-.1-1.7-.5-.4-1.3-.4-1.7.1l-4.2 4.2L10.9 9l-.1-.1c-.2-.2-.5-.3-.9-.3-.3 0-.6.1-.8.4-.3.2-.4.5-.3.8 0 .3.2.6.4.8l4.2 4.2L9.2 19c-.2.2-.4.5-.4.9 0 .7.5 1.2 1.2 1.2.3 0 .6-.1.9-.4l4.2-4.2 4.2 4.2-.1.3h.9c.3 0 .6-.1.9-.4.5-.5.5-1.2 0-1.7l-4.2-4z" />
             </svg>
             <label className=""> End Chat </label>
-          </IconSpan>
+          </IconSpan> */}
+            <button
+              onClick={exit}
+              style={{
+                color: `${widget.primary_color}`,
+                background: `${widget.accent_color}`,
+                border: "1px solid white",
+                padding: "6px 12px",
+                borderRadius: "8px",
+                height: "28px"
+              }}
+            >
+              Exit
+            </button>
+          </div>
         </ContentHeaderRight>
       </ContentHeader>
     </ChatHeader>
@@ -3983,6 +4017,7 @@ const AiResponse = ({
   const scale = useScaleContext();
   return (
     <>
+    
       <MessageBox size={scale.widgetSize} className="widget_chat_logs">
         <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
           <img
@@ -4044,7 +4079,14 @@ const ChatAssistant = ({
   return (
     <>
       <MessageBox size={scale.widgetSize} className="widget_chat_logs">
-        <LogoSize style={{ borderRadius: logoshape == "box" ? "5%" : "50%" }}>
+        <LogoSize
+          style={{
+            borderRadius: logoshape == "box" ? "5%" : "50%",
+            width: "24.9px",
+            height: "24px",
+            top: "12px",
+          }}
+        >
           <img
             alt={"logo"}
             src={
@@ -4055,7 +4097,12 @@ const ChatAssistant = ({
         </LogoSize>
         <ChatMessage size={scale.widgetSize}>
           <div className="flex widget_title chat_assisitant">
-            <h6>{widget && widget.name}</h6>
+            <h6 style={{
+              fontWeight: "500",
+              fontSize: "12px",
+              fontStyle: "normal",
+              lineHeight: "18px",
+              }}>{widget && widget.name}</h6>
             <div className="timestamp">{formatTimeAMPM(timestamp)}</div>
           </div>
           {type === "text_with_btns" ? (
@@ -4066,7 +4113,7 @@ const ChatAssistant = ({
             <div>
               {console.log("output struct", outputStruct.value)}
               <AssistantMd mdText={outputStruct.value}></AssistantMd>
-          </div>
+            </div>
           )}
         </ChatMessage>
       </MessageBox>
@@ -4290,7 +4337,14 @@ const UserAssistant = ({
             className="flex widget_title user_chat"
             style={{ color: "#000" }}
           >
-            <h6>{SYS_FirstName}</h6>
+            <h6 style={{
+              color:`${widget.user_message_text_color}`,
+              fontSize: "12px",
+              fontStyle: "normal",
+              fontWeight: "500",
+              lineHeight: "18px"
+              
+            }}>{SYS_FirstName}</h6>
             <div className="timestamp" style={{ color: "#fff", gap: 0 }}>
               {formatTimeAMPM(timestamp)}
             </div>

package/ConsentPopup.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import {
   browserName,
   osName,
@@ -14,6 +14,7 @@ import AssistantMd, {
   evalNormalOrJoinText,
   parseUrlAndString,
 } from "./md/assistant_md"
+import { EndPointContext } from "./useEndpoint";
 const ConsentPopup = ({
   formData,
   conversationId,
@@ -27,15 +28,13 @@ const ConsentPopup = ({
  
 }) => {
  
-  const [deviceLocation, setDeviceLocation] = useState({
-    lat: "",
-    long: "",
-  });
+  const [deviceLocation, setDeviceLocation] = useState("");
 
   // const consentOutput = JSON.parse(widget?.consent_data)
 
-
-  // console.log("consent widget", widget.consent_data)
+  const endpoint = useContext(EndPointContext)
+  console.log("ConsentPopup Endpoint:", endpoint);
+  console.log("consent widget", widget?.accent_color)
   const handleCheckboxChange = (event) => {
     setIsVisible(event.target.checked);
   };
@@ -47,12 +46,18 @@ const ConsentPopup = ({
             lat: position.coords.latitude,
             long: position.coords.longitude,
           });
+          axios.get(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.coords.latitude}&lon=${position.coords.longitude}`).then((res)=> {
+            
+            setDeviceLocation(res.data.address?.country)
+          }).catch((err)=> {
+            setDeviceLocation("")
+          })
+
         },
-        (error) => {
-          console.error("Error getting location:", error.message);
-        }
+      
       );
     } else {
+      setDeviceLocation("")
       console.error("Geolocation is not supported by this browser.");
     }
   }, []);
@@ -77,7 +82,7 @@ const ConsentPopup = ({
 
       {
         field_id: "SYS_location",
-        value: `Lat: ${deviceLocation.lat}, Long: ${deviceLocation.long}`,
+        value: `${deviceLocation}`,
       },
       // Correctly updated location
       {
@@ -109,7 +114,7 @@ const ConsentPopup = ({
 
     axios
       .post(
-        `https://dev.pagergpt.ai/wgt-hook/${widget.workspace}/${widget.id}/lead`,
+        `${endpoint}/${widget.workspace}/${widget.id}/lead`,
         submissionPayload,
         { withCredentials: true }
       )
@@ -148,8 +153,9 @@ console.log("url location", window.location.origin)
       {console.log("output struct 2", widget.consent_data)}
       <div style={{
         fontSize: "16px",
-        fontWeight: "100",
+        fontWeight: "400",
         lineHeight: "24px",
+        fontFamily: "Inter, Open Sans"
         
 
 
@@ -187,9 +193,9 @@ console.log("url location", window.location.origin)
 
       }}>
         <button
-        
+          
           disabled={isVisible == false ? true : false}
-          style={{...popupStyles.button, width: "90%"}}
+          style={{...popupStyles.button, width: "90%", background:isVisible === false ?"#E2E8F0":widget?.accent_color}}
           onClick={handleSubmit}
         >
           Submit