Update dependencies and add dark mode support

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Muhammed Nazeem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,33 +1,18 @@
-This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+# Page Assist
 
-## Getting Started
+A simple browser extension to assist you in talking with the current page, along with a web UI for the [Ollama](https://github.com/ollama/ollama) project.
 
-First, run the development server:
 
-```bash
+## Features
-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`.
+- [X] Fully local, no data is sent to any server
+- [x] Chat with the current page 
+- [ ] Web UI for Ollama
+- [ ] Chat with Youtube videos
+- [ ] Chat with PDFs
+- [ ] Other Local AI providers
 
-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/)
+## License
 
-## Making production build
+MIT
-
-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!

package.json

@@ -10,6 +10,7 @@
     "package": "plasmo package"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.18.4",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@langchain/community": "^0.0.21",

src/hooks/useDarkmode.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { create } from "zustand";
+
+type DarkModeState = {
+  mode: "system" | "dark" | "light";
+  setMode: (mode: "system" | "dark" | "light") => void;
+};
+
+export const useDarkModeStore = create<DarkModeState>((set) => ({
+  mode: "system",
+  setMode: (mode) => set({ mode }),
+}));
+
+export const useDarkMode = () => {
+  const { mode, setMode } = useDarkModeStore();
+
+  const getSystemTheme = () => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    const isDarkMode = darkModeMediaQuery.matches;
+    return isDarkMode ? "dark" : "light";
+  };
+
+  const handleDarkModeChange = (e: MediaQueryListEvent) => {
+    document.documentElement.classList.remove("dark", "light");
+    const mode = e.matches ? "dark" : "light";
+    document.documentElement.classList.add(mode);
+    setMode(mode);
+  };
+
+  React.useEffect(() => {
+    const theme = localStorage.getItem("theme") as "system" | "dark" | "light";
+    if (theme) {
+      if (theme !== "system") {
+        document.documentElement.classList.add(theme);
+        setMode(theme);
+      } else {
+        const systemTheme = getSystemTheme();
+        document.documentElement.classList.add(systemTheme);
+        setMode(systemTheme);
+      }
+    } else {
+      setMode(getSystemTheme());
+      localStorage.setItem("theme", getSystemTheme());
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const darkModeMediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    darkModeMediaQuery.addEventListener("change", handleDarkModeChange);
+    return () =>
+      darkModeMediaQuery.removeEventListener("change", handleDarkModeChange);
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newMode = mode === "dark" ? "light" : "dark";
+    document.documentElement.classList.remove("dark", "light");
+    document.documentElement.classList.add(newMode);
+    setMode(newMode);
+    localStorage.setItem("theme", newMode);
+  };
+
+  return { mode, toggleDarkMode };
+};

src/option.tsx

@@ -4,13 +4,24 @@ import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
 import "./css/tailwind.css"
-
+import { ConfigProvider, theme } from "antd"
+import { StyleProvider } from "@ant-design/cssinjs"
+import { useDarkMode } from "~hooks/useDarkmode"
 function IndexOption() {
+  const { mode } = useDarkMode()
   return (
     <MemoryRouter>
+      <ConfigProvider
+        theme={{
+          algorithm:
+            mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
+        }}>
+        <StyleProvider hashPriority="high">
           <QueryClientProvider client={queryClient}>
             <ToastContainer />
           </QueryClientProvider>
+        </StyleProvider>
+      </ConfigProvider>
     </MemoryRouter>
   )
 }

src/sidepanel.tsx

@@ -5,16 +5,28 @@ import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
 import "./css/tailwind.css"
+import { ConfigProvider, theme } from "antd"
+import { StyleProvider } from "@ant-design/cssinjs"
+import { useDarkMode } from "~hooks/useDarkmode"
+function IndexSidepanel() {
+  const { mode } = useDarkMode()
 
-function IndexOption() {
   return (
     <MemoryRouter>
+      <ConfigProvider
+        theme={{
+          algorithm:
+            mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
+        }}>
+        <StyleProvider hashPriority="high">
           <QueryClientProvider client={queryClient}>
             <SidepanelRouting />
             <ToastContainer />
           </QueryClientProvider>
+        </StyleProvider>
+      </ConfigProvider>
     </MemoryRouter>
   )
 }
 
-export default IndexOption
+export default IndexSidepanel