extension code updated

extension/content.ts

@@ -88,10 +88,12 @@ const main = async () => {
     } else if (event.data === "pageassist-html") {
       console.log("pageassist-html");
       let html = document.documentElement.outerHTML;
+      let url = window.location.href;
 
       iframe.contentWindow.postMessage({
         type: "pageassist-html",
         html: html,
+        url: url,
       }, "*");
     }
   });

extension/package.json

@@ -21,7 +21,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.6",
-    "react-router-dom": "^6.10.0"
+    "react-router-dom": "^6.10.0",
+    "react-toastify": "^9.1.2"
   },
   "devDependencies": {
     "@plasmohq/prettier-plugin-sort-imports": "3.6.3",

extension/pnpm-lock.yaml

@@ -37,6 +37,9 @@ dependencies:
   react-router-dom:
     specifier: ^6.10.0
     version: 6.10.0(react-dom@18.2.0)(react@18.2.0)
+  react-toastify:
+    specifier: ^9.1.2
+    version: 9.1.2(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
   '@plasmohq/prettier-plugin-sort-imports':
@@ -2903,6 +2906,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: false
 
+  /clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -5122,6 +5130,17 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-toastify@9.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-PBfzXO5jMGEtdYR5jxrORlNZZe/EuOkwvwKijMatsZZm8IZwLj01YvobeJYNjFcA6uy6CVrx2fzL9GWbhWPTDA==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      clsx: 1.2.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}

extension/popup.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import { MemoryRouter } from "react-router-dom"
 import { Routing } from "~routes"
-
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const queryClient = new QueryClient()
 
@@ -10,6 +11,7 @@ function IndexPopup() {
     <MemoryRouter>
       <QueryClientProvider client={queryClient}>
         <Routing />
+        <ToastContainer />
       </QueryClientProvider>
     </MemoryRouter>
   )

extension/routes/chat.tsx

@@ -13,6 +13,9 @@ import axios from "axios"
 import logoImage from "data-base64:~assets/icon.png"
 import ReactMarkdown from "react-markdown"
 import { Link, useNavigate } from "react-router-dom"
+import { toast } from "react-toastify"
+
+import { useStorage } from "@plasmohq/storage/hook"
 
 function Chat() {
   type Message = {
@@ -33,6 +36,7 @@ function Chat() {
   ])
 
   const [history, setHistory] = useState<History[]>([])
+  const [userToken] = useStorage("pa-token", null)
 
   const route = useNavigate()
 
@@ -53,25 +57,55 @@ function Chat() {
     return new Promise((resolve, reject) => {
       window.addEventListener("message", (event) => {
         if (event.data.type === "pageassist-html") {
-          resolve(event.data.html)
+          resolve(event.data)
         } else {
           reject("Error")
         }
       })
     })
   }
-  const sendToBot = async (message: string) => {
-    const html = await getHtmlFromParent()
 
-    const response = await axios.post(process.env.PLASMO_PUBLIC_API_URL!, {
+  const sendToBot = async (message: string) => {
-      user_message: message,
+    // @ts-ignore
-      html: html,
+    const { html } = await getHtmlFromParent()
-      history: history
+
-    })
+    const response = await axios.post(
+      `${process.env.PLASMO_PUBLIC_API_URL}/chat/chrome`,
+      {
+        user_message: message,
+        html: html,
+        history: history
+      }
+    )
 
     return response.data
   }
 
+  const onSave = async () => {
+    const data = await getHtmlFromParent()
+    const response = await axios.post(
+      `${process.env.PLASMO_PUBLIC_API_URL}/user/save`,
+      data,
+      {
+        headers: {
+          "x-auth-token": userToken
+        }
+      }
+    )
+
+    return response.data
+  }
+
+  const { mutateAsync: saveAsync, isLoading: isSaving } = useMutation(onSave, {
+    onSuccess: (data) => {
+      toast.success("Saved Successfully")
+    },
+    onError: (er) => {
+      console.log(er)
+      toast.error("Error in saving")
+    }
+  })
+
   const { mutateAsync: sendToBotAsync, isLoading: isSending } = useMutation(
     sendToBot,
     {
@@ -125,14 +159,15 @@ function Chat() {
           <button
             type="button"
             className="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4  text-gray-800 hover:text-gray-500 shadow-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-            onClick={() => {
+            onClick={async () => {
               // Send data to the app
+              await saveAsync()
             }}>
             <ArrowUpOnSquareIcon
               className="-ml-1 mr-3 h-5 w-5"
               aria-hidden="true"
             />
-            Send to App
+            {isSaving ? "Saving..." : "Send to App"}
           </button>
           <button
             type="button"
@@ -205,14 +240,49 @@ function Chat() {
                 form.reset()
                 await sendToBotAsync(values.message)
               })}>
-              <input
+              <div className="flex-grow space-y-6">
-                disabled={isSending}
+                <div className="flex">
-                className="flex items-center h-10 w-full rounded px-3 text-sm"
+                  <span className="mr-3">
-                type="text"
+                    <button
-                required
+                      disabled={isSending || isSaving}
-                placeholder="Type your message…"
+                      onClick={() => {
-                {...form.getInputProps("message")}
+                        setHistory([])
-              />
+                        setMessages([
+                          {
+                            message: "Hi, I'm PageAssist. How can I help you?",
+                            isBot: true
+                          }
+                        ])
+                      }}
+                      className="inline-flex items-center rounded-md border border-gray-700 bg-white px-3 h-10 text-sm font-medium text-gray-700  hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                      type="button">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="h-5 w-5 text-gray-600">
+                        <path d="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"></path>
+                        <path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"></path>
+                        <path d="M14.5 17.5 4.5 15"></path>
+                      </svg>
+                    </button>
+                  </span>
+                  <div className="flex-grow">
+                    <input
+                      disabled={isSending || isSaving}
+                      className="flex items-center h-10 w-full rounded px-3 text-sm"
+                      type="text"
+                      required
+                      placeholder="Type your message…"
+                      {...form.getInputProps("message")}
+                    />
+                  </div>
+                </div>
+              </div>
             </form>
           </div>
         </div>

extension/routes/login.tsx

@@ -21,7 +21,7 @@ export default function Login() {
 
   const onSubmit = async (token: string) => {
     const response = await axios.post(
-      `${process.env.PLASMO_PUBLIC_CLIENT_URL}/api/verify`,
+      `${process.env.PLASMO_PUBLIC_API_URL}/user/validate`,
       {
         token
       }
@@ -39,7 +39,7 @@ export default function Login() {
       },
       onError: (e:any) => {
         if (axios.isAxiosError(e)) {
-          setErr(e.response?.data.error)
+          setErr(e.response?.data.detail)
         } else {
           setErr(e?.message)
         }
@@ -47,6 +47,9 @@ export default function Login() {
     }
   )
 
+
+  
+
   return (
     <div className="isolate bg-gray-100 text-gray-800">
       <div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">