initial extension

extension/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

extension/.prettierrc.cjs

@@ -0,0 +1,17 @@
+/**
+ * @type {import('prettier').Options}
+ */
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: [require.resolve("@plasmohq/prettier-plugin-sort-imports")],
+  importOrder: ["^@plasmohq/(.*)$", "^~(.*)$", "^[./]"],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
+}

extension/README.md

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

extension/content.ts

@@ -0,0 +1,95 @@
+export {};
+
+var iframe = document.createElement("iframe");
+iframe.id = "pageassist-iframe";
+iframe.style.backgroundColor = "white";
+iframe.style.position = "fixed";
+iframe.style.top = "0px";
+iframe.style.right = "0px";
+iframe.style.zIndex = "9000000000000000000";
+iframe.style.border = "0px";
+iframe.style.display = "none";
+iframe.style.width = "500px";
+iframe.style.height = "100%";
+
+iframe.src = chrome.runtime.getURL("popup.html");
+
+document.body.appendChild(iframe);
+var toggleIcon = document.createElement("div");
+chrome.storage.sync.get('chat-widget', function(data) {
+  if(data['chat-widget'] === "true") {
+    // this means hide the toggle icon
+    console.log("hide the toggle icon");
+    toggleIcon.style.display = "none";
+  } else {
+    toggleIcon.style.display = "block";
+  }
+});
+toggleIcon.id = "pageassist-icon";
+toggleIcon.style.position = "fixed";
+toggleIcon.style.top = "50%";
+toggleIcon.style.right = "0px";
+toggleIcon.style.transform = "translateY(-50%)";
+toggleIcon.style.zIndex = "9000000000000000000";
+toggleIcon.style.background = "linear-gradient(to bottom, #0c0d52, #023e8a)";
+toggleIcon.style.height = "50px";
+toggleIcon.style.width = "50px";
+toggleIcon.style.borderTopLeftRadius = "10px";
+toggleIcon.style.borderBottomLeftRadius = "10px";
+toggleIcon.style.cursor = "pointer";
+
+var iconBackground = document.createElement("div");
+iconBackground.style.backgroundRepeat = "no-repeat";
+iconBackground.style.backgroundSize = "contain";
+iconBackground.style.height = "100%";
+iconBackground.style.backgroundImage =
+  "url('data:image/png;base64,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')";
+iconBackground.style.width = "100%";
+iconBackground.style.opacity = "0.7";
+iconBackground.style.position = "absolute";
+iconBackground.style.top = "0";
+iconBackground.style.left = "0";
+
+
+toggleIcon.appendChild(iconBackground);
+toggleIcon.addEventListener("click", function () {
+  if (iframe.style.display === "none") {
+    iframe.style.display = "block";
+    toggleIcon.style.display = "none";
+    toggleIcon.classList.add("hidden");
+  } else {
+    iframe.style.display = "none";
+    toggleIcon.classList.remove("hidden");
+  }
+});
+
+document.body.appendChild(toggleIcon);
+
+iframe.addEventListener("load", function () {
+  var closeButton = iframe.contentDocument.createElement("button");
+  closeButton.innerText = "Close";
+  closeButton.style.position = "fixed";
+  closeButton.style.top = "20px";
+  closeButton.style.right = "20px";
+  closeButton.addEventListener("click", function () {
+    toggleIcon.classList.remove("hidden");
+    iframe.style.display = "none";
+  });
+  iframe.contentDocument.body.appendChild(closeButton);
+});
+
+window.addEventListener("message", function (event) {
+  if (event.data === "pageassist-close") {
+    iframe.style.display = "none";
+    toggleIcon.style.display = "block";
+    toggleIcon.classList.remove("hidden");
+  } else if (event.data === "pageassist-html") {
+    console.log("pageassist-html");
+    let html = document.documentElement.outerHTML;
+
+    iframe.contentWindow.postMessage({
+      type: "pageassist-html",
+      html: html,
+    }, "*");
+  }
+});

extension/hooks/useLocal.tsx

@@ -0,0 +1,40 @@
+import React from "react"
+
+export default function useLocal(key: string) {
+  const [value, setValue] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    chrome.storage.local.get(key, (result) => {
+      setValue(result[key])
+    })
+  }, [key])
+
+  const update = (newValue: string) => {
+    chrome.storage.local.set({ [key]: newValue }, () => {
+      setValue(newValue)
+    })
+  }
+
+  const remove = () => {
+    chrome.storage.local.remove(key)
+    setValue(null)
+  }
+
+  return { value, update, remove }
+}
+
+export function useChatWidget() {
+  const { value, update } = useLocal("chat-widget")
+  const [active, setActive] = React.useState<boolean>(value === "show")
+
+  const setActiveValue = (newValue: boolean) => {
+    if (newValue) {
+      update("show")
+    } else {
+      update("hide")
+    }
+    setActive(newValue)
+  }
+
+  return { active, setActiveValue }
+}

extension/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "pageassist",
+  "displayName": "Page Assist",
+  "version": "0.0.1",
+  "description": "Chat with any webpage using an intelligent chat feature",
+  "author": "n4ze3m",
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build",
+    "package": "plasmo package"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.16",
+    "@mantine/form": "^6.0.5",
+    "@plasmohq/storage": "^1.4.0",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tanstack/react-query": "^4.28.0",
+    "axios": "^1.3.4",
+    "plasmo": "0.67.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^8.0.6",
+    "react-router-dom": "^6.10.0"
+  },
+  "devDependencies": {
+    "@plasmohq/prettier-plugin-sort-imports": "3.6.3",
+    "@types/chrome": "0.0.210",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "prettier": "2.8.3",
+    "tailwindcss": "^3.3.0",
+    "typescript": "4.9.4"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ],
+    "web_accessible_resources": [
+      {
+        "resources": [
+          "popup.html"
+        ],
+        "matches": [
+          "https://*/*",
+          "http://*/*"
+        ]
+      }
+    ],
+    "permissions": [
+      "storage"
+    ]
+  }
+}

extension/popup.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MemoryRouter } from "react-router-dom"
+import { Routing } from "~routes"
+
+
+const queryClient = new QueryClient()
+
+function IndexPopup() {
+  return (
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>
+        <Routing />
+      </QueryClientProvider>
+    </MemoryRouter>
+  )
+}
+
+export default IndexPopup

extension/postcss.config.js

@@ -0,0 +1,9 @@
+/**
+ * @type {import('postcss').ProcessOptions}
+ */
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
+  }

extension/routes/chat.tsx

@@ -0,0 +1,224 @@
+import { useEffect, useRef, useState } from "react"
+
+import "./tailwind.css"
+
+import {
+  ArrowUpOnSquareIcon,
+  Cog6ToothIcon,
+  XMarkIcon
+} from "@heroicons/react/20/solid"
+import { useForm } from "@mantine/form"
+import { useMutation } from "@tanstack/react-query"
+import axios from "axios"
+import logoImage from "data-base64:~assets/icon.png"
+import ReactMarkdown from "react-markdown"
+import { Link, useNavigate } from "react-router-dom"
+
+function Chat() {
+  type Message = {
+    isBot: boolean
+    message: string
+  }
+
+  type History = {
+    bot_response: string
+    human_message: string
+  }
+
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      isBot: true,
+      message: "Hi, I'm PageAssist Bot. How can I help you?"
+    }
+  ])
+
+  const [history, setHistory] = useState<History[]>([])
+
+  const route = useNavigate()
+
+  const form = useForm({
+    initialValues: {
+      message: "",
+      isBot: false
+    }
+  })
+  const divRef = useRef(null)
+
+  useEffect(() => {
+    divRef.current.scrollIntoView({ behavior: "smooth" })
+  })
+
+  const getHtmlFromParent = () => {
+    window.parent.postMessage("pageassist-html", "*")
+    return new Promise((resolve, reject) => {
+      window.addEventListener("message", (event) => {
+        if (event.data.type === "pageassist-html") {
+          resolve(event.data.html)
+        } else {
+          reject("Error")
+        }
+      })
+    })
+  }
+  const sendToBot = async (message: string) => {
+    const html = await getHtmlFromParent()
+
+    const response = await axios.post(process.env.PLASMO_PUBLIC_API_KEY!, {
+      user_message: message,
+      html: html,
+      history: history
+    })
+
+    return response.data
+  }
+
+  const { mutateAsync: sendToBotAsync, isLoading: isSending } = useMutation(
+    sendToBot,
+    {
+      onSuccess: (data) => {
+        setMessages([...messages, { isBot: true, message: data.bot_response }])
+        setHistory([...history, data])
+      },
+      onError: (error) => {
+        setMessages([
+          ...messages,
+          { isBot: true, message: "Something went wrong" }
+        ])
+      }
+    }
+  )
+
+  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]">
+        <svg
+          className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
+          viewBox="0 0 1155 678"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
+            fillOpacity=".3"
+            d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+          />
+          <defs>
+            <linearGradient
+              id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
+              x1="1155.49"
+              x2="-78.208"
+              y1=".177"
+              y2="474.645"
+              gradientUnits="userSpaceOnUse">
+              <stop stopColor="#9089FC" />
+              <stop offset={1} stopColor="#FF80B5" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      {/* Component Start */}
+      <div className="flex items-center justify-between px-6 pt-4 pb-2 md:justify-start md:space-x-10">
+        <div>
+          <Link to="/" className="flex">
+            <img className="h-10 w-auto" src={logoImage} alt="PageAssist" />
+          </Link>
+        </div>
+        <div className="flex items-center space-x-4">
+          <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={() => {
+              // Send data to the app
+            }}>
+            <ArrowUpOnSquareIcon
+              className="-ml-1 mr-3 h-5 w-5"
+              aria-hidden="true"
+            />
+            Send to App
+          </button>
+          <button
+            type="button"
+            className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-800 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 shadow-sm focus:ring-inset focus:ring-indigo-500"
+            onClick={() => {
+              route("/settings")
+            }}>
+            <Cog6ToothIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+          <div className="-my-2 -mr-2 md:hidden">
+            <button
+              type="button"
+              className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-800 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 shadow-sm focus:ring-inset focus:ring-indigo-500"
+              aria-expanded="false"
+              onClick={() => {
+                window.parent.postMessage("pageassist-close", "*")
+              }}>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          minHeight: "calc(100vh - 4rem)"
+        }}
+        className="flex flex-col  p-6 items-center justify-center w-screen">
+        <div className="flex flex-col flex-grow w-full max-w-xl bg-white shadow-sm  rounded-lg overflow-hidden">
+          <div className="flex flex-col flex-grow h-0 p-4 overflow-auto">
+            {messages.map((message, index) => {
+              return (
+                <div
+                  key={index}
+                  className={
+                    message.isBot
+                      ? "flex w-full mt-2 space-x-3 max-w-xs"
+                      : "flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end"
+                  }>
+                  <div>
+                    <div
+                      className={
+                        message.isBot
+                          ? "bg-gray-300 p-3 rounded-r-lg rounded-bl-lg"
+                          : "bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg"
+                      }>
+                      <p className="text-sm">
+                        <ReactMarkdown>{message.message}</ReactMarkdown>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+            {isSending && (
+              <div className="flex w-full mt-2 space-x-3 max-w-xs">
+                <div>
+                  <div className="bg-gray-300 p-3 rounded-r-lg rounded-bl-lg">
+                    <p className="text-sm">Hold on, I'm looking...</p>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={divRef} />
+          </div>
+          <div className="bg-gray-300 p-4">
+            <form
+              onSubmit={form.onSubmit(async (values) => {
+                setMessages([...messages, values])
+                form.reset()
+                await sendToBotAsync(values.message)
+              })}>
+              <input
+                disabled={isSending}
+                className="flex items-center h-10 w-full rounded px-3 text-sm"
+                type="text"
+                required
+                placeholder="Type your message…"
+                {...form.getInputProps("message")}
+              />
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Chat

extension/routes/home.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+import Chat from "./chat"
+import Login from "./login"
+
+export default function Home() {
+  const [token] = useStorage("pa-token", null)
+
+  return <>{token ? <Chat /> : <Login />}</>
+}

extension/routes/index.tsx

@@ -0,0 +1,10 @@
+import { Route, Routes } from "react-router-dom"
+import Settings from "./settings"
+import Home from "./home"
+
+export const Routing = () => (
+    <Routes>
+        <Route path="/" element={<Home />} />     
+        <Route path="/settings" element={<Settings />} />   
+    </Routes>
+)

extension/routes/login.tsx

@@ -0,0 +1,116 @@
+import { XMarkIcon } from "@heroicons/react/20/solid"
+import { useForm } from "@mantine/form"
+import logoImage from "data-base64:~assets/icon.png"
+import React from "react"
+import { Link, useNavigate } from "react-router-dom"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+export default function Login() {
+  const navigate = useNavigate()
+  const [_, setToken] = useStorage("pa-token", null)
+
+  const form = useForm({
+    initialValues: {
+      passcode: ""
+    }
+  })
+
+  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]">
+        <svg
+          className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
+          viewBox="0 0 1155 678"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
+            fillOpacity=".3"
+            d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+          />
+          <defs>
+            <linearGradient
+              id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
+              x1="1155.49"
+              x2="-78.208"
+              y1=".177"
+              y2="474.645"
+              gradientUnits="userSpaceOnUse">
+              <stop stopColor="#9089FC" />
+              <stop offset={1} stopColor="#FF80B5" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      {/* Component Start */}
+      <div className="flex items-center justify-between px-6 pt-4 pb-2 md:justify-start md:space-x-10">
+        <div>
+          <Link to="/" className="flex">
+            <img className="h-10 w-auto" src={logoImage} alt="PageAssist" />
+          </Link>
+        </div>
+        <div className="flex items-center space-x-4">
+          <div className="-my-2 -mr-2 md:hidden">
+            <button
+              type="button"
+              className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-800 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 shadow-sm focus:ring-inset focus:ring-indigo-500"
+              aria-expanded="false"
+              onClick={() => {
+                window.parent.postMessage("pageassist-close", "*")
+              }}>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          minHeight: "calc(100vh - 4rem)"
+        }}
+        className="flex flex-col  p-6  w-screen">
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+          Sign in to your account
+        </h2>
+        <div className="bg-white py-8 px-4 shadow-sm rounded-lg sm:px-10 mt-8">
+          <ul className="list-disc list-inside text-gray-800 text-md">
+            <li>Log in to your Page Assist account.</li>
+            <li>Go to your account settings.</li>
+            <li>Find your passcode under "Chrome Extension".</li>
+            <li>Copy your passcode to your clipboard.</li>
+            <li>Open the PageAssist extension and paste your passcode.</li>
+            <li>Click "Save" and Happy Chatting!</li>
+          </ul>
+          <form
+            className="space-y-6"
+            onSubmit={form.onSubmit(async (values) => {
+              setToken(values.passcode)
+              navigate("/")
+            })}>
+            <div>
+              <div className="mt-3">
+                <input
+                  id="passcode"
+                  name="passcode"
+                  type="password"
+                  autoComplete="current-passcode"
+                  placeholder="Passcode"
+                  required
+                  {...form.getInputProps("passcode")}
+                  className="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                />
+              </div>
+            </div>
+            <div>
+              <button
+                type="submit"
+                className="flex w-full justify-center rounded-md border border-transparent bg-teal-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
+                Save
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

extension/routes/settings.tsx

@@ -0,0 +1,128 @@
+import { Switch } from "@headlessui/react"
+import { ChevronLeftIcon, XMarkIcon } from "@heroicons/react/20/solid"
+import logoImage from "data-base64:~assets/icon.png"
+import { useState } from "react"
+import { Link, useNavigate } from "react-router-dom"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+import { useChatWidget } from "~hooks/useLocal"
+
+//@ts-ignore
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ")
+}
+
+function Settings() {
+  const route = useNavigate()
+  const [active, setActiveValue] = useStorage("chat-widget", false)
+  const [_, setToken] = useStorage("pa-token", null)
+
+  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]">
+        <svg
+          className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
+          viewBox="0 0 1155 678"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)"
+            fillOpacity=".3"
+            d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+          />
+          <defs>
+            <linearGradient
+              id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533"
+              x1="1155.49"
+              x2="-78.208"
+              y1=".177"
+              y2="474.645"
+              gradientUnits="userSpaceOnUse">
+              <stop stopColor="#9089FC" />
+              <stop offset={1} stopColor="#FF80B5" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <div className="flex items-center justify-between px-6 pt-4 pb-2 md:justify-start md:space-x-10">
+        <div>
+          <Link to="/" className="flex">
+            <img className="h-10 w-auto" src={logoImage} alt="PageAssist" />
+          </Link>
+        </div>
+        <div className="flex items-center space-x-4">
+          <button
+            type="button"
+            className="bg-white shadow-sm rounded-md p-2 inline-flex items-center justify-center text-gray-800 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+            onClick={() => {
+              route("/")
+            }}>
+            <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+          <div className="-my-2 -mr-2 md:hidden">
+            <button
+              type="button"
+              className="bg-white  shadow-sm rounded-md p-2 inline-flex items-center justify-center text-gray-800 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+              aria-expanded="false"
+              onClick={() => {
+                window.parent.postMessage("pageassist-close", "*")
+              }}>
+              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        style={{
+          minHeight: "calc(100vh - 4rem)"
+        }}
+        className="flex flex-col  p-6  w-screen">
+        <ul role="list" className="mt-2 divide-y divide-gray-200">
+          <Switch.Group
+            as="li"
+            className="flex items-center justify-between py-4">
+            <div className="flex flex-col">
+              <Switch.Label
+                as="p"
+                className="text-sm font-medium text-gray-900"
+                passive>
+                Hide Widget Icon
+              </Switch.Label>
+              <Switch.Description className="text-sm text-gray-500">
+                Hide or Show the widget icon on websites you visit.
+              </Switch.Description>
+            </div>
+            <Switch
+              checked={active}
+              onChange={setActiveValue}
+              className={classNames(
+                active ? "bg-teal-500" : "bg-gray-200",
+                "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+              )}>
+              <span
+                aria-hidden="true"
+                className={classNames(
+                  active ? "translate-x-5" : "translate-x-0",
+                  "inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                )}
+              />
+            </Switch>
+          </Switch.Group>
+        </ul>
+
+        <button
+          type="button"
+          onClick={() => {
+            setToken(null)
+            route("/")
+          }}
+          className="flex w-full justify-center rounded-md border border-transparent bg-red-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
+          Logout
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Settings

extension/routes/tailwind.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'font';
+  src: url('font.ttf') format('truetype');
+}
+body {
+  font-family: 'font' !important;
+}
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

extension/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    mode: "jit",
+    darkMode: "class",
+    content: ["./**/*.tsx"],
+    plugins: [
+      require('@tailwindcss/forms'),
+
+    ]
+  }

extension/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./*"]
+    },
+    "baseUrl": "."
+  }
+}