From e6130f11dac3db63118d93abfe2d47728427de68 Mon Sep 17 00:00:00 2001 From: n4ze3m Date: Sat, 3 Feb 2024 11:29:47 +0530 Subject: [PATCH] Update dependencies and add dark mode support --- LICENCE | 21 ++++++++++++ README.md | 37 +++++++-------------- package.json | 1 + src/hooks/useDarkmode.tsx | 67 +++++++++++++++++++++++++++++++++++++++ src/option.tsx | 19 ++++++++--- src/sidepanel.tsx | 26 +++++++++++---- 6 files changed, 134 insertions(+), 37 deletions(-) create mode 100644 LICENCE create mode 100644 src/hooks/useDarkmode.tsx diff --git a/LICENCE b/LICENCE new file mode 100644 index 0000000..632e8df --- /dev/null +++ b/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. \ No newline at end of file diff --git a/README.md b/README.md index ca9c259..afc3a04 100644 --- a/README.md +++ b/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 -pnpm dev -# or -npm run dev -``` +## Features -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 - -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! +MIT \ No newline at end of file diff --git a/package.json b/package.json index e2456e6..d216a8c 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/useDarkmode.tsx b/src/hooks/useDarkmode.tsx new file mode 100644 index 0000000..2d31533 --- /dev/null +++ b/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((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 }; +}; \ No newline at end of file diff --git a/src/option.tsx b/src/option.tsx index 0e50a48..b33f3f9 100644 --- a/src/option.tsx +++ b/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 ( - - - + + + + + + + ) } diff --git a/src/sidepanel.tsx b/src/sidepanel.tsx index e175b94..da28021 100644 --- a/src/sidepanel.tsx +++ b/src/sidepanel.tsx @@ -1,20 +1,32 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query" import { MemoryRouter } from "react-router-dom" -import { SidepanelRouting } from "~routes" +import { SidepanelRouting } from "~routes" 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 ( - - - - + + + + + + + + ) } -export default IndexOption +export default IndexSidepanel