Merge pull request #17 from PeoplePlusAI/add-disclaimer-and-ga

chore: updates disclaimer and google analytics integration
PeoplePlusAI · Nov 16, 2024 · 150dee3 · 150dee3
2 parents e199d69 + 75859c0
commit 150dee3
Show file tree

Hide file tree

Showing 12 changed files with 269 additions and 178 deletions.
diff --git a/frontend-vite/README.md b/frontend-vite/README.md
@@ -50,12 +50,13 @@ yarn install
 
 ### 3. Export environment variables
 
-Export Supabase environment variables.
+Export Supabase and backend URL environment variables.
 
 Using `.env` file:
 ```bash
 VITE_SUPABASE_API_KEY="<API-KEY>"
 VITE_SUPABASE_AUTHORIZATION_TOKEN="<AUTHORIZATION-TOKEN>"
+VITE_BACKEND_ENDPOINT="https://sukoon-api.pplus.ai"
 ```
 
 ### 4. Start the development server

diff --git a/frontend-vite/index.html b/frontend-vite/index.html
@@ -5,6 +5,14 @@
     <link rel="icon" type="image/png" href="/peopleplusai.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sukoon | People+ai</title>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-E7644C856B"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-E7644C856B');
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend-vite/package.json b/frontend-vite/package.json
@@ -10,11 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.46.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-lottie": "^1.2.7",
-    "uuid": "^11.0.3"
+    "react-lottie": "^1.2.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

diff --git a/frontend-vite/src/components/conversation.jsx b/frontend-vite/src/components/conversation.jsx
@@ -11,16 +11,18 @@ export default function Conversation({
   const [dislikedMessages, setDislikedMessages] = useState([]);
 
   return (
-    <div className="mt-5 relative h-[78vh]">
+    <div className="mt-5">
       {
         Object.keys(feedback).length === 0 ?
           <>
             <Messages dislikedMessages={dislikedMessages} likedMessages={likedMessages}
               messages={messages} setFeedback={setFeedback} isResponseGenerating={isResponseGenerating} />
-            <div className='flex items-end justify-center'>
-              <div className='my-3 w-full md:w-10/12 lg:w-9/12 xl:w-1/2'>
-                <InputForm isResponseGenerating={isResponseGenerating} prompt={prompt}
-                  setPrompt={setPrompt} submitPrompt={submitPrompt} />
+            <div>
+              <div className='h-[10vh] flex items-end justify-center'>
+                <div className='w-full md:w-10/12 lg:w-9/12 xl:w-1/2'>
+                  <InputForm isResponseGenerating={isResponseGenerating} prompt={prompt}
+                    setPrompt={setPrompt} submitPrompt={submitPrompt} />
+                </div>
               </div>
             </div>
           </>

diff --git a/frontend-vite/src/components/feedback-overlay.jsx b/frontend-vite/src/components/feedback-overlay.jsx
@@ -1,8 +1,5 @@
 import { useState } from "react";
-
-const env = await import.meta.env;
-const API_KEY = (env.VITE_SUPABASE_API_KEY);
-const AUTHORIZATION_TOKEN = (env.VITE_SUPABASE_AUTHORIZATION_TOKEN);
+import { SUPABASE_API_KEY, SUPABASE_AUTHORIZATION_TOKEN } from "../utils/envs";
 
 export default function FeedbackOverlay({feedback, setFeedback, likedMessages, setLikedMessages, dislikedMessages, setDislikedMessages}) {
   const [feedbackMessage, setFeedbackMessage] = useState("");
@@ -15,8 +12,8 @@ export default function FeedbackOverlay({feedback, setFeedback, likedMessages, s
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'apikey': API_KEY,
-          'Authorization': AUTHORIZATION_TOKEN,
+          'apikey': SUPABASE_API_KEY,
+          'Authorization': SUPABASE_AUTHORIZATION_TOKEN,
           'Prefer': 'return=minimal'
         },
         body: JSON.stringify({

diff --git a/frontend-vite/src/components/input-form.jsx b/frontend-vite/src/components/input-form.jsx
@@ -1,14 +1,21 @@
 export default function InputForm({prompt, setPrompt, submitPrompt, isResponseGenerating}) {
   return (
-    <form className="relative flex" onSubmit={e => submitPrompt(e)}>
-      <input onChange={e => setPrompt(e.target.value)}
-        value={prompt} type="text" disabled={isResponseGenerating}
-        className="p-4 w-full border-l border-y rounded-l-full outline-none"
-        placeholder="Hey there, how're you doing today?" />
-      <button type='submit'
-        className="pr-4 rounded-r-full border-y border-r bg-white transition">
-        ❯
-      </button>
-    </form>
+    <>
+      <form className="relative flex" onSubmit={e => submitPrompt(e)}>
+        <input onChange={e => setPrompt(e.target.value)}
+          value={prompt} type="text" disabled={isResponseGenerating}
+          className="p-4 w-full border-l-2 border-y-2 rounded-l-full outline-none"
+          placeholder="Hey there, how're you doing today?" />
+        <button type='submit'
+          className="pr-8 rounded-r-full border-y-2 border-r-2 bg-white transition">
+          ❯
+        </button>
+      </form>
+      <div className="mt-1 md:mt-3">
+        <p className="text-center text-xs md:text-sm text-slate-400">
+          By using this, you give your consent that you have read the <a className="text-blue-500" href="https://peopleplusai.github.io/Sukoon/disclaimer.html" target='_blank' rel="noopener noreferrer">disclaimer</a>.
+        </p>
+      </div>
+    </>
   );
 }
diff --git a/frontend-vite/src/components/messages.jsx b/frontend-vite/src/components/messages.jsx
@@ -18,7 +18,7 @@ export default function Messages({
   }, [messages]);
 
   return (
-    <div className="h-full px-[6vw] sm:px-[8vw] lg:px-[10vw] xl:px-[25vw] overflow-y-scroll">
+    <div className="h-[72vh] px-[6vw] sm:px-[8vw] lg:px-[10vw] xl:px-[25vw] pb-12 sm:pb-10 md:pb-8 lg:pb-6 xl-pb-0 overflow-y-scroll">
       {
         messages.map((message, i) => {
           if (message.isResponse !== true) {

diff --git a/frontend-vite/src/containers/landing-page.jsx b/frontend-vite/src/containers/landing-page.jsx
@@ -3,6 +3,8 @@ import PeoplePlusAILogo from "../assets/people-plus-ai-logo.svg";
 import SukoonLogo from "../assets/sukoon-logo.png";
 import NewChat from '../components/new-chat';
 import Conversation from '../components/conversation';
+import { BACKEND_ENDPOINT } from "../utils/envs";
+import { RemoveTrailingSlash } from '../utils/url';
 
 export default function LandingPage() {
   const [prompt, setPrompt] = useState("");
@@ -18,8 +20,10 @@ export default function LandingPage() {
 
     setMessages(messages => [...messages, {message: prompt, isResponse: false}]);
 
+    const backendUrl = `${RemoveTrailingSlash(BACKEND_ENDPOINT)}/query`
+
     try {
-      const response = await fetch("https://sukoon-api.pplus.ai/query", {
+      const response = await fetch(backendUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -39,8 +43,14 @@ export default function LandingPage() {
 
   return (
     <div className="p-5">
-      <a href='/'><img src={SukoonLogo} className="w-16 md:w-24" /></a>
-      <a href='https://peopleplus.ai/' target='_blank'><img src={PeoplePlusAILogo} className="absolute float-right top-0 right-0 w-48" /></a>
+      <div className='h-[10vh]'>
+        <a className='inline-block' href='/'>
+          <img src={SukoonLogo} className="w-16 md:w-24" />
+        </a>
+        <a href='https://peopleplus.ai/' target='_blank'>
+          <img src={PeoplePlusAILogo} className="absolute float-right top-0 right-0 w-48" />
+        </a>
+      </div>
       {
         messages.length > 0 ?
           <Conversation isResponseGenerating={isResponseGenerating} prompt={prompt}

diff --git a/frontend-vite/src/index.css b/frontend-vite/src/index.css
@@ -6,4 +6,6 @@ body {
   background-image: url("./assets/background.svg");
   background-size: cover;
   background-position:top;
+  width: 100vw;
+  height: 100vh;
 }
diff --git a/frontend-vite/src/utils/envs.js b/frontend-vite/src/utils/envs.js
@@ -0,0 +1,7 @@
+const env = await import.meta.env;
+
+const SUPABASE_API_KEY = (env.VITE_SUPABASE_API_KEY);
+const SUPABASE_AUTHORIZATION_TOKEN = (env.VITE_SUPABASE_AUTHORIZATION_TOKEN);
+const BACKEND_ENDPOINT = (env.VITE_BACKEND_ENDPOINT);
+
+export { SUPABASE_API_KEY, SUPABASE_AUTHORIZATION_TOKEN, BACKEND_ENDPOINT };
diff --git a/frontend-vite/src/utils/url.js b/frontend-vite/src/utils/url.js
@@ -0,0 +1,5 @@
+const RemoveTrailingSlash = (url) => {
+  return url.replace(/\/$/, '');
+}
+
+export { RemoveTrailingSlash };