aboutsummaryrefslogtreecommitdiff
path: root/apps/extension
diff options
context:
space:
mode:
Diffstat (limited to 'apps/extension')
-rw-r--r--apps/extension/.eslintrc.cjs18
-rw-r--r--apps/extension/README.md9
-rw-r--r--apps/extension/components.json2
-rw-r--r--apps/extension/manifest.json64
-rw-r--r--apps/extension/package.json2
-rw-r--r--apps/extension/postcss.config.js2
-rw-r--r--apps/extension/src/App.tsx19
-rw-r--r--apps/extension/src/SideBar.tsx328
-rw-r--r--apps/extension/src/background.ts30
-rw-r--r--apps/extension/src/components/ui/button.tsx32
-rw-r--r--apps/extension/src/components/ui/input.tsx16
-rw-r--r--apps/extension/src/components/ui/tooltip.tsx20
-rw-r--r--apps/extension/src/content.tsx28
-rw-r--r--apps/extension/src/dist.css951
-rw-r--r--apps/extension/src/ext.css4
-rw-r--r--apps/extension/src/lib/utils.ts6
-rw-r--r--apps/extension/src/main.tsx10
-rw-r--r--apps/extension/src/types/zods.ts12
-rw-r--r--apps/extension/src/util.ts22
-rw-r--r--apps/extension/tailwind.config.js17
-rw-r--r--apps/extension/vite.config.ts32
21 files changed, 229 insertions, 1395 deletions
diff --git a/apps/extension/.eslintrc.cjs b/apps/extension/.eslintrc.cjs
index d6c95379..6e8698b7 100644
--- a/apps/extension/.eslintrc.cjs
+++ b/apps/extension/.eslintrc.cjs
@@ -2,17 +2,17 @@ module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:react-hooks/recommended',
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react-hooks/recommended",
],
- ignorePatterns: ['dist', '.eslintrc.cjs'],
- parser: '@typescript-eslint/parser',
- plugins: ['react-refresh'],
+ ignorePatterns: ["dist", ".eslintrc.cjs"],
+ parser: "@typescript-eslint/parser",
+ plugins: ["react-refresh"],
rules: {
- 'react-refresh/only-export-components': [
- 'warn',
+ "react-refresh/only-export-components": [
+ "warn",
{ allowConstantExport: true },
],
},
-}
+};
diff --git a/apps/extension/README.md b/apps/extension/README.md
index 7619225f..bb156850 100644
--- a/apps/extension/README.md
+++ b/apps/extension/README.md
@@ -17,15 +17,14 @@ If you are developing a production application, we recommend updating the config
export default {
// other rules...
parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- project: ['./tsconfig.json', './tsconfig.node.json'],
+ ecmaVersion: "latest",
+ sourceType: "module",
+ project: ["./tsconfig.json", "./tsconfig.node.json"],
tsconfigRootDir: __dirname,
},
-}
+};
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
- \ No newline at end of file
diff --git a/apps/extension/components.json b/apps/extension/components.json
index 5c081ce9..6ceb01a1 100644
--- a/apps/extension/components.json
+++ b/apps/extension/components.json
@@ -14,4 +14,4 @@
"components": "src/components",
"utils": "src/lib/utils"
}
-} \ No newline at end of file
+}
diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json
index 7b7bf460..561ca8fe 100644
--- a/apps/extension/manifest.json
+++ b/apps/extension/manifest.json
@@ -1,37 +1,35 @@
{
- "manifest_version": 3,
- "name": "SuperMemory",
- "version": "1.0.0",
- "action": {
- "default_popup": "index.html"
- },
- "icons": {
- "16": "icons/icon16.png",
- "32": "icons/icon32.png",
- "48": "icons/icon48.png",
- "128": "icons/icon128.png"
- },
- "content_scripts": [
- {
- "js": [
- "src/content.tsx"
- ],
- "matches": [
- "http://localhost:3000/*",
- "https://opulent-funicular-94rx4v9w775f96q-3000.app.github.dev/*",
- "https://anycontext.dhr.wtf/*",
- "<all_urls>"
- ]
- }
- ],
- "permissions": [
- "activeTab",
- "storage",
+ "manifest_version": 3,
+ "name": "SuperMemory",
+ "version": "1.0.0",
+ "action": {
+ "default_popup": "index.html"
+ },
+ "icons": {
+ "16": "icons/icon16.png",
+ "32": "icons/icon32.png",
+ "48": "icons/icon48.png",
+ "128": "icons/icon128.png"
+ },
+ "content_scripts": [
+ {
+ "js": ["src/content.tsx"],
+ "matches": [
"http://localhost:3000/*",
"https://opulent-funicular-94rx4v9w775f96q-3000.app.github.dev/*",
- "https://anycontext.dhr.wtf/*"
- ],
- "background": {
- "service_worker": "src/background.ts"
+ "https://anycontext.dhr.wtf/*",
+ "<all_urls>"
+ ]
}
-} \ No newline at end of file
+ ],
+ "permissions": [
+ "activeTab",
+ "storage",
+ "http://localhost:3000/*",
+ "https://opulent-funicular-94rx4v9w775f96q-3000.app.github.dev/*",
+ "https://anycontext.dhr.wtf/*"
+ ],
+ "background": {
+ "service_worker": "src/background.ts"
+ }
+}
diff --git a/apps/extension/package.json b/apps/extension/package.json
index 1543535f..241470a8 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -28,4 +28,4 @@
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
-} \ No newline at end of file
+}
diff --git a/apps/extension/postcss.config.js b/apps/extension/postcss.config.js
index 2e7af2b7..2aa7205d 100644
--- a/apps/extension/postcss.config.js
+++ b/apps/extension/postcss.config.js
@@ -3,4 +3,4 @@ export default {
tailwindcss: {},
autoprefixer: {},
},
-}
+};
diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
index 551fb0d0..f563664f 100644
--- a/apps/extension/src/App.tsx
+++ b/apps/extension/src/App.tsx
@@ -1,9 +1,12 @@
-import { useEffect, useState } from 'react';
-import { z } from 'zod';
-import { userObj } from './types/zods';
-import { getEnv } from './util';
+import { useEffect, useState } from "react";
+import { z } from "zod";
+import { userObj } from "./types/zods";
+import { getEnv } from "./util";
-const backendUrl = getEnv() === "development" ? "http://localhost:3000" : "https://supermemory.dhr.wtf";
+const backendUrl =
+ getEnv() === "development"
+ ? "http://localhost:3000"
+ : "https://supermemory.dhr.wtf";
function App() {
const [userData, setUserData] = useState<z.infer<typeof userObj> | null>(
@@ -11,9 +14,9 @@ function App() {
);
const doStuff = () => {
- chrome.runtime.sendMessage({ type: 'getJwt' }, (response) => {
+ chrome.runtime.sendMessage({ type: "getJwt" }, (response) => {
const jwt = response.jwt;
- const loginButton = document.getElementById('login');
+ const loginButton = document.getElementById("login");
if (loginButton) {
if (jwt) {
@@ -31,7 +34,7 @@ function App() {
console.error(d.error);
}
});
- loginButton.style.display = 'none';
+ loginButton.style.display = "none";
}
}
});
diff --git a/apps/extension/src/SideBar.tsx b/apps/extension/src/SideBar.tsx
index 96b1dd4c..07d9b9f5 100644
--- a/apps/extension/src/SideBar.tsx
+++ b/apps/extension/src/SideBar.tsx
@@ -1,215 +1,64 @@
-import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
-import './dist.css';
-import { Input } from './components/ui/input';
-import { Button } from './components/ui/button';
+import { useState } from "react";
+
+import "./ext.css";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
-} from './components/ui/tooltip';
+} from "./components/ui/tooltip";
function sendUrlToAPI() {
// get the current URL
const url = window.location.href;
- const blacklist = ['localhost:3000', 'anycontext.dhr.wtf'];
+ const blacklist = ["localhost:3000", "anycontext.dhr.wtf"];
// check if the URL is blacklisted
if (blacklist.some((blacklisted) => url.includes(blacklisted))) {
- console.log('URL is blacklisted');
+ console.log("URL is blacklisted");
return;
} else {
// const content = Entire page content, but cleaned up for the LLM. No ads, no scripts, no styles, just the text. if article, just the importnat info abou tit.
const content = document.documentElement.innerText;
- chrome.runtime.sendMessage({ type: 'urlChange', content, url });
+ chrome.runtime.sendMessage({ type: "urlChange", content, url });
}
}
-function SideBar({ jwt }: { jwt: string }) {
- const [isOpen, setIsOpen] = useState(false);
- const [input, setInput] = useState('');
+function SideBar() {
const [savedWebsites, setSavedWebsites] = useState<string[]>([]);
const [isSendingData, setIsSendingData] = useState(false);
- const [toBeParsed, setToBeParsed] = useState('');
- const [aiResponse, setAIResponse] = useState<string>('');
- const [lastQuestion, setLastQuestion] = useState<string>('');
-
- const handleStreamData = (newChunk: string) => {
- // Append the new chunk to the existing data to be parsed
- setToBeParsed((prev) => prev + newChunk);
- };
-
- const queryApi = async () => {
- const content = document.documentElement.innerText;
-
- setAIResponse('');
-
- const query = `Answer this question based on this query: ${input}\n\n${content}`;
-
- chrome.runtime.sendMessage({ type: 'queryApi', input: query, jwt });
- };
-
- useEffect(() => {
- if (typeof window === 'undefined') return;
-
- chrome.runtime.onMessage.addListener((message) => {
- if (message.action === 'streamData') {
- console.log(message.data);
- handleStreamData(message.data);
- } else if (message.action === 'streamEnd') {
- setLastQuestion(input);
- setInput('');
- setToBeParsed('');
- }
- });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- useEffect(() => {
- // Define a function to try parsing the accumulated data
- const tryParseAccumulatedData = () => {
- // Attempt to parse the "toBeParsed" state as JSON
- try {
- // Split the accumulated data by the known delimiter "\n\n"
- const parts = toBeParsed.split('\n\n');
- let remainingData = '';
-
- // Process each part to extract JSON objects
- parts.forEach((part, index) => {
- if (part.startsWith('data: [DONE]data: ')) {
- part = part.replace('data: [DONE]data: ', 'data: ');
- }
- try {
- const parsedPart = JSON.parse(part.replace('data: ', '')); // Try to parse the part as JSON
-
- // If the part is the last one and couldn't be parsed, keep it to accumulate more data
- if (index === parts.length - 1 && !parsedPart) {
- remainingData = part;
- } else if (parsedPart && parsedPart.response) {
- // If the part is parsable and has the "response" field, update the AI response state
- setAIResponse((prev) => prev + parsedPart.response);
- }
- } catch (error) {
- // If parsing fails and it's not the last part, it's a malformed JSON
- if (index !== parts.length - 1) {
- console.error('Malformed JSON part: ', part);
- } else {
- // If it's the last part, it may be incomplete, so keep it
- remainingData = part;
- }
- }
- });
-
- // Update the toBeParsed state to only contain the unparsed remainder
- if (remainingData !== toBeParsed) {
- setToBeParsed(remainingData);
- }
- } catch (error) {
- console.error('Error parsing accumulated data: ', error);
- }
- };
-
- // Call the parsing function if there's data to be parsed
- if (toBeParsed) {
- tryParseAccumulatedData();
- }
- }, [toBeParsed]);
-
return (
<>
<TooltipProvider>
- {isOpen && (
- <div
- onClick={() => setIsOpen(false)}
- className="anycontext-overlay"
- ></div>
- )}
-
- {isOpen ? (
- <motion.div
- initial={{ x: '100%' }}
- animate={{ x: 0 }}
- exit={{ x: '100%' }}
- transition={{ duration: 0.3 }}
- className="anycontext-sidebar anycontext-relative"
- >
- <div className="anycontext-sidebar-content anycontext-text-black anycontext-px-4 anycontext-relative">
- <h1 className="anycontext-header anycontext-font-sans">
- Ask a question to this page
- </h1>
-
- {/* Three buttons as options to choose from */}
- {!input && (
- <div className="anycontext-flex anycontext-flex-col anycontext-gap-4 anycontext-mt-8 anycontext-px-4">
- <Button
- onClick={async () => {
- setInput('Summarise the content of this web page');
- await queryApi();
- }}
- className="anycontext-w-full"
- >
- Summarize content
- </Button>
- <Button
- onClick={async () => {
- setInput(
- 'Whats the most important points of this page? Answer in points.',
- );
- await queryApi();
- }}
- className="anycontext-w-full"
- >
- What's the most important?
- </Button>
- <Button
- onClick={() => {
- setIsOpen(false);
- sendUrlToAPI();
- setIsSendingData(true);
- setTimeout(() => {
- setIsSendingData(false);
- setSavedWebsites([
- ...savedWebsites,
- window.location.href,
- ]);
- }, 1000);
- }}
- className="anycontext-w-full anycontext-bg-gradient-to-tr anycontext-from-purple-400 anycontext-to-purple-600"
- >
- Save to memory
- </Button>
- </div>
- )}
-
- {lastQuestion && (
- <div className="anycontext-mb-4">
- <h2 className="anycontext-text-lg anycontext-font-semibold">
- {lastQuestion}
- </h2>
- </div>
- )}
- <div className="anycontext-px-4 anycontext-max-h-[75vh] anycontext-overflow-y-auto anycontext-mt-8">
- {aiResponse.replace('</s>', '')}
- </div>
-
- <form
- onSubmit={async (e) => {
- e.preventDefault();
- await queryApi();
- setInput('');
+ <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999] anycontext-font-sans">
+ {/* <Tooltip delayDuration={300}>
+ <TooltipContent side="left">
+ <p>Open Sidebar</p>
+ </TooltipContent>
+ </Tooltip> */}
+
+ <Tooltip delayDuration={300}>
+ <TooltipTrigger
+ className="anycontext-bg-transparent
+ anycontext-border-none anycontext-m-0 anycontext-p-0
+ "
+ >
+ <button
+ onClick={() => {
+ sendUrlToAPI();
+ setIsSendingData(true);
+ setTimeout(() => {
+ setIsSendingData(false);
+ setSavedWebsites([...savedWebsites, window.location.href]);
+ }, 1000);
}}
- className="anycontext-flex anycontext-absolute anycontext-bottom-0 anycontext-w-full anycontext-gap-4 anycontext-justify-between anycontext-px-4"
+ disabled={savedWebsites.includes(window.location.href)}
+ className="anycontext-open-button disabled:anycontext-opacity-30 anycontext-bg-transparent
+ anycontext-border-none anycontext-m-0 anycontext-p-0"
>
- <Input
- value={input}
- onChange={(e) => setInput(e.target.value)}
- placeholder="Ask anything about this website"
- className="anycontext-mb-4 anycontext-text-black anycontext-outline"
- />
- <Button onClick={async () => queryApi()}>
+ {savedWebsites.includes(window.location.href) ? (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -220,102 +69,33 @@ function SideBar({ jwt }: { jwt: string }) {
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
- className="lucide lucide-send-horizontal"
+ className="lucide lucide-file-check-2"
>
- <path d="m3 3 3 9-3 9 19-9Z" />
- <path d="M6 12h16" />
+ <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
+ <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+ <path d="m3 15 2 2 4-4" />
</svg>
- </Button>
- </form>
- </div>
- </motion.div>
- ) : (
- <div className="anycontext-flex anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999]">
- <Tooltip delayDuration={300}>
- <TooltipTrigger>
- <button
- onClick={() => setIsOpen(true)}
- className="anycontext-open-button"
- >
+ ) : (
<svg
xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- className="lucide lucide-panel-right-open"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? "anycontext-animate-spin" : ""}`}
>
- <rect width="18" height="18" x="3" y="3" rx="2" />
- <path d="M15 3v18" />
- <path d="m10 15-3-3 3-3" />
+ <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
</svg>
- </button>
- </TooltipTrigger>
- <TooltipContent side="left">
- <p>Open Sidebar</p>
- </TooltipContent>
- </Tooltip>
-
- <Tooltip delayDuration={300}>
- <TooltipTrigger>
- <button
- onClick={() => {
- sendUrlToAPI();
- setIsSendingData(true);
- setTimeout(() => {
- setIsSendingData(false);
- setSavedWebsites([
- ...savedWebsites,
- window.location.href,
- ]);
- }, 1000);
- }}
- disabled={savedWebsites.includes(window.location.href)}
- className="anycontext-open-button disabled:anycontext-opacity-30"
- >
- {savedWebsites.includes(window.location.href) ? (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- strokeWidth="2"
- strokeLinecap="round"
- strokeLinejoin="round"
- className="lucide lucide-file-check-2"
- >
- <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" />
- <path d="M14 2v4a2 2 0 0 0 2 2h4" />
- <path d="m3 15 2 2 4-4" />
- </svg>
- ) : (
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className={`anycontext-w-5 anycontext-h-5 ${isSendingData ? 'anycontext-animate-spin' : ''}`}
- >
- <path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z" />
- </svg>
- )}
- </button>
- </TooltipTrigger>
- <TooltipContent side="left">
- <p>
- {savedWebsites.includes(window.location.href)
- ? 'Added to memory'
- : 'Add to memory'}
- </p>
- </TooltipContent>
- </Tooltip>
- </div>
- )}
+ )}
+ </button>
+ </TooltipTrigger>
+ <TooltipContent className="anycontext-p-0" side="left">
+ <p className="anycontext-p-0 anycontext-m-0">
+ {savedWebsites.includes(window.location.href)
+ ? "Added to memory"
+ : "Add to memory"}
+ </p>
+ </TooltipContent>
+ </Tooltip>
+ </div>
</TooltipProvider>
</>
);
diff --git a/apps/extension/src/background.ts b/apps/extension/src/background.ts
index 137849b8..2cf29f40 100644
--- a/apps/extension/src/background.ts
+++ b/apps/extension/src/background.ts
@@ -1,6 +1,9 @@
import { getEnv } from "./util";
-const backendUrl = getEnv() === "development" ? "http://localhost:3000" : "https://supermemory.dhr.wtf";
+const backendUrl =
+ getEnv() === "development"
+ ? "http://localhost:3000"
+ : "https://supermemory.dhr.wtf";
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.type === "getJwt") {
@@ -9,9 +12,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
});
return true;
- }
-
- else if (request.type === "urlChange") {
+ } else if (request.type === "urlChange") {
const content = request.content;
const url = request.url;
@@ -24,15 +25,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
fetch(`${backendUrl}/api/store`, {
method: "POST",
headers: {
- "Authorization": `Bearer ${jwt}`,
+ Authorization: `Bearer ${jwt}`,
},
body: JSON.stringify({ pageContent: content, url }),
- }).then(ers => console.log(ers.status))
+ }).then((ers) => console.log(ers.status));
});
})();
- }
-
- else if (request.type === "queryApi") {
+ } else if (request.type === "queryApi") {
const input = request.input;
const jwt = request.jwt;
@@ -40,12 +39,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
await fetch(`${backendUrl}/api/ask`, {
method: "POST",
headers: {
- "Authorization": `Bearer ${jwt}`,
+ Authorization: `Bearer ${jwt}`,
},
body: JSON.stringify({
query: input,
}),
- }).then(async response => {
+ }).then(async (response) => {
if (!response.body) {
throw new Error("No response body");
}
@@ -59,8 +58,13 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (done) break;
// For simplicity, we're sending chunks as they come.
// This might need to be adapted based on your data and needs.
- const chunkAsString = new TextDecoder('utf-8').decode(value).replace("data: ", "")
- chrome.tabs.sendMessage(sender.tab.id, { action: "streamData", data: chunkAsString });
+ const chunkAsString = new TextDecoder("utf-8")
+ .decode(value)
+ .replace("data: ", "");
+ chrome.tabs.sendMessage(sender.tab.id, {
+ action: "streamData",
+ data: chunkAsString,
+ });
}
// Notify the content script that the stream is complete.
chrome.tabs.sendMessage(sender.tab.id, { action: "streamEnd" });
diff --git a/apps/extension/src/components/ui/button.tsx b/apps/extension/src/components/ui/button.tsx
index cf7b4315..6ca7d07a 100644
--- a/apps/extension/src/components/ui/button.tsx
+++ b/apps/extension/src/components/ui/button.tsx
@@ -1,22 +1,24 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
const buttonVariants = cva(
"anycontext-inline-flex anycontext-items-center anycontext-justify-center anycontext-whitespace-nowrap anycontext-rounded-md anycontext-text-sm anycontext-font-medium anycontext-ring-offset-white anycontext-transition-colors focus-visible:anycontext-outline-none focus-visible:anycontext-ring-2 focus-visible:anycontext-ring-stone-950 focus-visible:anycontext-ring-offset-2 disabled:anycontext-pointer-events-none disabled:anycontext-opacity-50 dark:anycontext-ring-offset-stone-950 dark:focus-visible:anycontext-ring-stone-300",
{
variants: {
variant: {
- default: "anycontext-bg-stone-900 anycontext-text-stone-50 hover:anycontext-bg-stone-900/90 dark:anycontext-bg-stone-50 dark:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-50/90",
+ default:
+ "anycontext-bg-stone-900 anycontext-text-stone-50 hover:anycontext-bg-stone-900/90 dark:anycontext-bg-stone-50 dark:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-50/90",
destructive:
"anycontext-bg-red-500 anycontext-text-stone-50 hover:anycontext-bg-red-500/90 dark:anycontext-bg-red-900 dark:anycontext-text-stone-50 dark:hover:anycontext-bg-red-900/90",
outline:
"anycontext-border anycontext-border-stone-200 anycontext-bg-white hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
secondary:
"anycontext-bg-stone-100 anycontext-text-stone-900 hover:anycontext-bg-stone-100/80 dark:anycontext-bg-stone-800 dark:anycontext-text-stone-50 dark:hover:anycontext-bg-stone-800/80",
- ghost: "hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
+ ghost:
+ "hover:anycontext-bg-stone-100 hover:anycontext-text-stone-900 dark:hover:anycontext-bg-stone-800 dark:hover:anycontext-text-stone-50",
link: "anycontext-text-stone-900 anycontext-underline-offset-4 hover:anycontext-underline dark:anycontext-text-stone-50",
},
size: {
@@ -30,27 +32,27 @@ const buttonVariants = cva(
variant: "default",
size: "default",
},
- }
-)
+ },
+);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
- asChild?: boolean
+ asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
+ const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
- )
- }
-)
-Button.displayName = "Button"
+ );
+ },
+);
+Button.displayName = "Button";
-export { Button, buttonVariants }
+export { Button };
diff --git a/apps/extension/src/components/ui/input.tsx b/apps/extension/src/components/ui/input.tsx
index e91bb0ca..4771795a 100644
--- a/apps/extension/src/components/ui/input.tsx
+++ b/apps/extension/src/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
type={type}
className={cn(
"anycontext-flex anycontext-h-10 anycontext-w-full anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-px-3 anycontext-py-2 anycontext-text-sm anycontext-ring-offset-white file:anycontext-border-0 file:anycontext-bg-transparent file:anycontext-text-sm file:anycontext-font-medium placeholder:anycontext-text-stone-500 focus-visible:anycontext-outline-none focus-visible:anycontext-ring-2 focus-visible:anycontext-ring-stone-950 focus-visible:anycontext-ring-offset-2 disabled:anycontext-cursor-not-allowed disabled:anycontext-opacity-50 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-ring-offset-stone-950 dark:placeholder:anycontext-text-stone-400 dark:focus-visible:anycontext-ring-stone-300",
- className
+ className,
)}
ref={ref}
{...props}
/>
- )
- }
-)
-Input.displayName = "Input"
+ );
+ },
+);
+Input.displayName = "Input";
-export { Input }
+export { Input };
diff --git a/apps/extension/src/components/ui/tooltip.tsx b/apps/extension/src/components/ui/tooltip.tsx
index 364c7ada..12185db5 100644
--- a/apps/extension/src/components/ui/tooltip.tsx
+++ b/apps/extension/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -18,11 +18,11 @@ const TooltipContent = React.forwardRef<
sideOffset={sideOffset}
className={cn(
"anycontext-z-50 anycontext-overflow-hidden anycontext-rounded-md anycontext-border anycontext-border-stone-200 anycontext-bg-white anycontext-px-3 anycontext-py-1.5 anycontext-text-sm anycontext-text-stone-950 anycontext-shadow-md anycontext-animate-in anycontext-fade-in-0 anycontext-zoom-in-95 data-[state=closed]:anycontext-animate-out data-[state=closed]:anycontext-fade-out-0 data-[state=closed]:anycontext-zoom-out-95 data-[side=bottom]:anycontext-slide-in-from-top-2 data-[side=left]:anycontext-slide-in-from-right-2 data-[side=right]:anycontext-slide-in-from-left-2 data-[side=top]:anycontext-slide-in-from-bottom-2 dark:anycontext-border-stone-800 dark:anycontext-bg-stone-950 dark:anycontext-text-stone-50",
- className
+ className,
)}
{...props}
/>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/extension/src/content.tsx b/apps/extension/src/content.tsx
index 1e92bf04..d9994dca 100644
--- a/apps/extension/src/content.tsx
+++ b/apps/extension/src/content.tsx
@@ -1,4 +1,4 @@
-window.addEventListener('message', (event) => {
+window.addEventListener("message", (event) => {
if (event.source !== window) {
return;
}
@@ -7,13 +7,13 @@ window.addEventListener('message', (event) => {
if (jwt) {
if (
!(
- window.location.hostname === 'localhost' ||
- window.location.hostname === 'anycontext.dhr.wtf' ||
- window.location.hostname === 'supermemory.dhr.wtf'
+ window.location.hostname === "localhost" ||
+ window.location.hostname === "anycontext.dhr.wtf" ||
+ window.location.hostname === "supermemory.dhr.wtf"
)
) {
console.log(
- 'JWT is only allowed to be used on localhost or anycontext.dhr.wtf',
+ "JWT is only allowed to be used on localhost or anycontext.dhr.wtf",
);
return;
}
@@ -22,24 +22,24 @@ window.addEventListener('message', (event) => {
}
});
-const appContainer = document.createElement('div');
-appContainer.id = 'anycontext-app-container';
+const appContainer = document.createElement("div");
+appContainer.id = "anycontext-app-container";
// First in the body, above the content
document.body.insertBefore(appContainer, document.body.firstChild);
-appContainer.style.zIndex = '9999';
+appContainer.style.zIndex = "9999";
-import ReactDOM from 'react-dom/client';
-import SideBar from './SideBar';
+import ReactDOM from "react-dom/client";
+import SideBar from "./SideBar";
// get JWT from local storage
-const jwt = chrome.storage.local.get('jwt').then((data) => {
+const jwt = chrome.storage.local.get("jwt").then((data) => {
return data.jwt;
}) as Promise<string>;
-jwt.then((jwt) => {
+jwt.then(() => {
ReactDOM.createRoot(
- document.getElementById('anycontext-app-container')!,
- ).render(<SideBar jwt={jwt} />);
+ document.getElementById("anycontext-app-container")!,
+ ).render(<SideBar />);
});
diff --git a/apps/extension/src/dist.css b/apps/extension/src/dist.css
deleted file mode 100644
index 5fda8915..00000000
--- a/apps/extension/src/dist.css
+++ /dev/null
@@ -1,951 +0,0 @@
-*,
-::before,
-::after {
- box-sizing: border-box;
- /* 1 */
-
- border-width: 0;
- /* 2 */
-
- border-style: solid;
- /* 2 */
-
- border-color: #e5e7eb;
- /* 2 */
-}
-
-::before,
-::after {
- --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
-*/
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-
-[hidden] {
- display: none;
-}
-
-*,
-::before,
-::after {
- --tw-border-spacing-x: 0;
-
- --tw-border-spacing-y: 0;
-
- --tw-translate-x: 0;
-
- --tw-translate-y: 0;
-
- --tw-rotate: 0;
-
- --tw-skew-x: 0;
-
- --tw-skew-y: 0;
-
- --tw-scale-x: 1;
-
- --tw-scale-y: 1;
-
- --tw-pan-x: ;
-
- --tw-pan-y: ;
-
- --tw-pinch-zoom: ;
-
- --tw-scroll-snap-strictness: proximity;
-
- --tw-gradient-from-position: ;
-
- --tw-gradient-via-position: ;
-
- --tw-gradient-to-position: ;
-
- --tw-ordinal: ;
-
- --tw-slashed-zero: ;
-
- --tw-numeric-figure: ;
-
- --tw-numeric-spacing: ;
-
- --tw-numeric-fraction: ;
-
- --tw-ring-inset: ;
-
- --tw-ring-offset-width: 0px;
-
- --tw-ring-offset-color: #fff;
-
- --tw-ring-color: rgb(59 130 246 / 0.5);
-
- --tw-ring-offset-shadow: 0 0 #0000;
-
- --tw-ring-shadow: 0 0 #0000;
-
- --tw-shadow: 0 0 #0000;
-
- --tw-shadow-colored: 0 0 #0000;
-
- --tw-blur: ;
-
- --tw-brightness: ;
-
- --tw-contrast: ;
-
- --tw-grayscale: ;
-
- --tw-hue-rotate: ;
-
- --tw-invert: ;
-
- --tw-saturate: ;
-
- --tw-sepia: ;
-
- --tw-drop-shadow: ;
-
- --tw-backdrop-blur: ;
-
- --tw-backdrop-brightness: ;
-
- --tw-backdrop-contrast: ;
-
- --tw-backdrop-grayscale: ;
-
- --tw-backdrop-hue-rotate: ;
-
- --tw-backdrop-invert: ;
-
- --tw-backdrop-opacity: ;
-
- --tw-backdrop-saturate: ;
-
- --tw-backdrop-sepia: ;
-}
-
-::backdrop {
- --tw-border-spacing-x: 0;
-
- --tw-border-spacing-y: 0;
-
- --tw-translate-x: 0;
-
- --tw-translate-y: 0;
-
- --tw-rotate: 0;
-
- --tw-skew-x: 0;
-
- --tw-skew-y: 0;
-
- --tw-scale-x: 1;
-
- --tw-scale-y: 1;
-
- --tw-pan-x: ;
-
- --tw-pan-y: ;
-
- --tw-pinch-zoom: ;
-
- --tw-scroll-snap-strictness: proximity;
-
- --tw-gradient-from-position: ;
-
- --tw-gradient-via-position: ;
-
- --tw-gradient-to-position: ;
-
- --tw-ordinal: ;
-
- --tw-slashed-zero: ;
-
- --tw-numeric-figure: ;
-
- --tw-numeric-spacing: ;
-
- --tw-numeric-fraction: ;
-
- --tw-ring-inset: ;
-
- --tw-ring-offset-width: 0px;
-
- --tw-ring-offset-color: #fff;
-
- --tw-ring-color: rgb(59 130 246 / 0.5);
-
- --tw-ring-offset-shadow: 0 0 #0000;
-
- --tw-ring-shadow: 0 0 #0000;
-
- --tw-shadow: 0 0 #0000;
-
- --tw-shadow-colored: 0 0 #0000;
-
- --tw-blur: ;
-
- --tw-brightness: ;
-
- --tw-contrast: ;
-
- --tw-grayscale: ;
-
- --tw-hue-rotate: ;
-
- --tw-invert: ;
-
- --tw-saturate: ;
-
- --tw-sepia: ;
-
- --tw-drop-shadow: ;
-
- --tw-backdrop-blur: ;
-
- --tw-backdrop-brightness: ;
-
- --tw-backdrop-contrast: ;
-
- --tw-backdrop-grayscale: ;
-
- --tw-backdrop-hue-rotate: ;
-
- --tw-backdrop-invert: ;
-
- --tw-backdrop-opacity: ;
-
- --tw-backdrop-saturate: ;
-
- --tw-backdrop-sepia: ;
-}
-
-.anycontext-fixed {
- position: fixed;
-}
-
-.anycontext-absolute {
- position: absolute;
-}
-
-.anycontext-relative {
- position: relative;
-}
-
-.anycontext-bottom-0 {
- bottom: 0px;
-}
-
-.anycontext-bottom-12 {
- bottom: 3rem;
-}
-
-.anycontext-right-0 {
- right: 0px;
-}
-
-.anycontext-z-50 {
- z-index: 50;
-}
-
-.anycontext-z-\[99999\] {
- z-index: 99999;
-}
-
-.anycontext-mb-4 {
- margin-bottom: 1rem;
-}
-
-.anycontext-mt-8 {
- margin-top: 2rem;
-}
-
-.anycontext-flex {
- display: flex;
-}
-
-.anycontext-inline-flex {
- display: inline-flex;
-}
-
-.anycontext-h-10 {
- height: 2.5rem;
-}
-
-.anycontext-h-11 {
- height: 2.75rem;
-}
-
-.anycontext-h-5 {
- height: 1.25rem;
-}
-
-.anycontext-h-9 {
- height: 2.25rem;
-}
-
-.anycontext-max-h-\[75vh\] {
- max-height: 75vh;
-}
-
-.anycontext-w-10 {
- width: 2.5rem;
-}
-
-.anycontext-w-5 {
- width: 1.25rem;
-}
-
-.anycontext-w-full {
- width: 100%;
-}
-
-@keyframes anycontext-spin {
- to {
- transform: rotate(360deg);
- }
-}
-
-.anycontext-animate-spin {
- animation: anycontext-spin 1s linear infinite;
-}
-
-.anycontext-flex-col {
- flex-direction: column;
-}
-
-.anycontext-items-center {
- align-items: center;
-}
-
-.anycontext-justify-center {
- justify-content: center;
-}
-
-.anycontext-justify-between {
- justify-content: space-between;
-}
-
-.anycontext-gap-2 {
- gap: 0.5rem;
-}
-
-.anycontext-gap-4 {
- gap: 1rem;
-}
-
-.anycontext-overflow-hidden {
- overflow: hidden;
-}
-
-.anycontext-overflow-y-auto {
- overflow-y: auto;
-}
-
-.anycontext-whitespace-nowrap {
- white-space: nowrap;
-}
-
-.anycontext-rounded-md {
- border-radius: 0.375rem;
-}
-
-.anycontext-border {
- border-width: 1px;
-}
-
-.anycontext-border-stone-200 {
- --tw-border-opacity: 1;
-
- border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.anycontext-bg-red-500 {
- --tw-bg-opacity: 1;
-
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-stone-100 {
- --tw-bg-opacity: 1;
-
- background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-stone-900 {
- --tw-bg-opacity: 1;
-
- background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-white {
- --tw-bg-opacity: 1;
-
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.anycontext-bg-gradient-to-tr {
- background-image: linear-gradient(to top right, var(--tw-gradient-stops));
-}
-
-.anycontext-from-purple-400 {
- --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
-
- --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
-
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.anycontext-to-purple-600 {
- --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
-}
-
-.anycontext-px-3 {
- padding-left: 0.75rem;
-
- padding-right: 0.75rem;
-}
-
-.anycontext-px-4 {
- padding-left: 1rem;
-
- padding-right: 1rem;
-}
-
-.anycontext-px-8 {
- padding-left: 2rem;
-
- padding-right: 2rem;
-}
-
-.anycontext-py-1 {
- padding-top: 0.25rem;
-
- padding-bottom: 0.25rem;
-}
-
-.anycontext-py-1\.5 {
- padding-top: 0.375rem;
-
- padding-bottom: 0.375rem;
-}
-
-.anycontext-py-2 {
- padding-top: 0.5rem;
-
- padding-bottom: 0.5rem;
-}
-
-.anycontext-font-sans {
- font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
- 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-}
-
-.anycontext-text-sm {
- font-size: 0.875rem;
-
- line-height: 1.25rem;
-}
-
-.anycontext-text-lg {
- font-size: 1.125rem;
-
- line-height: 1.75rem;
-}
-
-.anycontext-font-medium {
- font-weight: 500;
-}
-
-.anycontext-font-semibold {
- font-weight: 600;
-}
-
-.anycontext-text-black {
- --tw-text-opacity: 1;
-
- color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-50 {
- --tw-text-opacity: 1;
-
- color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-900 {
- --tw-text-opacity: 1;
-
- color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.anycontext-text-stone-950 {
- --tw-text-opacity: 1;
-
- color: rgb(12 10 9 / var(--tw-text-opacity));
-}
-
-.anycontext-underline-offset-4 {
- text-underline-offset: 4px;
-}
-
-.anycontext-shadow-md {
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
- 0 2px 4px -2px var(--tw-shadow-color);
-
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
- var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.anycontext-outline {
- outline-style: solid;
-}
-
-.anycontext-ring-offset-white {
- --tw-ring-offset-color: #fff;
-}
-
-.anycontext-transition-colors {
- transition-property: color, background-color, border-color,
- text-decoration-color, fill, stroke;
-
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
- transition-duration: 150ms;
-}
-
-@keyframes enter {
- from {
- opacity: var(--tw-enter-opacity, 1);
-
- transform: translate3d(
- var(--tw-enter-translate-x, 0),
- var(--tw-enter-translate-y, 0),
- 0
- )
- scale3d(
- var(--tw-enter-scale, 1),
- var(--tw-enter-scale, 1),
- var(--tw-enter-scale, 1)
- )
- rotate(var(--tw-enter-rotate, 0));
- }
-}
-
-@keyframes exit {
- to {
- opacity: var(--tw-exit-opacity, 1);
-
- transform: translate3d(
- var(--tw-exit-translate-x, 0),
- var(--tw-exit-translate-y, 0),
- 0
- )
- scale3d(
- var(--tw-exit-scale, 1),
- var(--tw-exit-scale, 1),
- var(--tw-exit-scale, 1)
- )
- rotate(var(--tw-exit-rotate, 0));
- }
-}
-
-.anycontext-animate-in {
- animation-name: enter;
-
- animation-duration: 150ms;
-
- --tw-enter-opacity: initial;
-
- --tw-enter-scale: initial;
-
- --tw-enter-rotate: initial;
-
- --tw-enter-translate-x: initial;
-
- --tw-enter-translate-y: initial;
-}
-
-.anycontext-fade-in-0 {
- --tw-enter-opacity: 0;
-}
-
-.anycontext-zoom-in-95 {
- --tw-enter-scale: 0.95;
-}
-
-/* ext.css - Assuming this is your CSS file */
-
-.anycontext-overlay {
- position: fixed;
-
- top: 0;
-
- left: 0;
-
- min-height: 100vh;
-
- width: 100%;
-
- height: 100%;
-
- background-color: rgba(0, 0, 0, 0.5);
-
- z-index: 99998;
-}
-
-.anycontext-sidebar {
- position: fixed;
-
- top: 0;
-
- right: 0;
-
- min-height: 100vh;
-
- width: 100%;
-
- max-width: 31%;
- /* Responsive width */
-
- z-index: 99999;
-
- padding: 8px 16px;
- /* px-4 py-2 */
-}
-
-.anycontext-sidebar-content {
- position: relative;
-
- display: flex;
-
- flex-direction: column;
-
- height: 95vh;
-
- background-color: white;
-
- border-radius: 8px;
- /* rounded-lg */
-
- padding: 8px;
- /* px-2 */
-
- box-shadow:
- 0 4px 6px -1px rgba(0, 0, 0, 0.1),
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
- /* shadow-md */
-}
-
-.anycontext-close-button {
- position: absolute;
-
- right: 0;
-
- padding: 8px;
- /* p-2 */
-
- border-radius: 4px;
- /* rounded-md */
-
- margin: 8px;
- /* m-2 */
-}
-
-.anycontext-close-button:hover {
- background-color: rgba(114, 87, 255, 0.5);
- /* hover:bg-[#7257ff]/50 */
-
- color: white;
- /* hover:text-white */
-}
-
-.anycontext-open-button {
- color: white;
-
- background-color: #7257ff;
-
- background-opacity: 75%;
-
- cursor: pointer;
-
- padding: 8px;
- /* px-4 py-2 */
-
- border-radius: 4px 0 0 4px;
- /* rounded-l-md */
-
- display: flex;
-
- align-items: center;
-
- justify-content: space-between;
-}
-
-.anycontext-header {
- margin: 16px;
- /* m-4 */
-
- font-weight: 600;
- /* font-semibold */
-
- font-size: 1.25rem;
- /* text-xl */
-
- color: black;
-}
-
-.anycontext-icon {
- height: 24px;
- /* h-6 */
-
- width: 24px;
- /* w-6 */
-}
-
-.file\:anycontext-border-0::file-selector-button {
- border-width: 0px;
-}
-
-.file\:anycontext-bg-transparent::file-selector-button {
- background-color: transparent;
-}
-
-.file\:anycontext-text-sm::file-selector-button {
- font-size: 0.875rem;
-
- line-height: 1.25rem;
-}
-
-.file\:anycontext-font-medium::file-selector-button {
- font-weight: 500;
-}
-
-.placeholder\:anycontext-text-stone-500::-moz-placeholder {
- --tw-text-opacity: 1;
-
- color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.placeholder\:anycontext-text-stone-500::placeholder {
- --tw-text-opacity: 1;
-
- color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.hover\:anycontext-bg-red-500\/90:hover {
- background-color: rgb(239 68 68 / 0.9);
-}
-
-.hover\:anycontext-bg-stone-100:hover {
- --tw-bg-opacity: 1;
-
- background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.hover\:anycontext-bg-stone-100\/80:hover {
- background-color: rgb(245 245 244 / 0.8);
-}
-
-.hover\:anycontext-bg-stone-900\/90:hover {
- background-color: rgb(28 25 23 / 0.9);
-}
-
-.hover\:anycontext-text-stone-900:hover {
- --tw-text-opacity: 1;
-
- color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.hover\:anycontext-underline:hover {
- text-decoration-line: underline;
-}
-
-.focus-visible\:anycontext-outline-none:focus-visible {
- outline: 2px solid transparent;
-
- outline-offset: 2px;
-}
-
-.focus-visible\:anycontext-ring-2:focus-visible {
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
- var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
- calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
- var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-visible\:anycontext-ring-stone-950:focus-visible {
- --tw-ring-opacity: 1;
-
- --tw-ring-color: rgb(12 10 9 / var(--tw-ring-opacity));
-}
-
-.focus-visible\:anycontext-ring-offset-2:focus-visible {
- --tw-ring-offset-width: 2px;
-}
-
-.disabled\:anycontext-pointer-events-none:disabled {
- pointer-events: none;
-}
-
-.disabled\:anycontext-cursor-not-allowed:disabled {
- cursor: not-allowed;
-}
-
-.disabled\:anycontext-opacity-30:disabled {
- opacity: 0.3;
-}
-
-.disabled\:anycontext-opacity-50:disabled {
- opacity: 0.5;
-}
-
-.data-\[state\=closed\]\:anycontext-animate-out[data-state='closed'] {
- animation-name: exit;
-
- animation-duration: 150ms;
-
- --tw-exit-opacity: initial;
-
- --tw-exit-scale: initial;
-
- --tw-exit-rotate: initial;
-
- --tw-exit-translate-x: initial;
-
- --tw-exit-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:anycontext-fade-out-0[data-state='closed'] {
- --tw-exit-opacity: 0;
-}
-
-.data-\[state\=closed\]\:anycontext-zoom-out-95[data-state='closed'] {
- --tw-exit-scale: 0.95;
-}
-
-.data-\[side\=bottom\]\:anycontext-slide-in-from-top-2[data-side='bottom'] {
- --tw-enter-translate-y: -0.5rem;
-}
-
-.data-\[side\=left\]\:anycontext-slide-in-from-right-2[data-side='left'] {
- --tw-enter-translate-x: 0.5rem;
-}
-
-.data-\[side\=right\]\:anycontext-slide-in-from-left-2[data-side='right'] {
- --tw-enter-translate-x: -0.5rem;
-}
-
-.data-\[side\=top\]\:anycontext-slide-in-from-bottom-2[data-side='top'] {
- --tw-enter-translate-y: 0.5rem;
-}
-
-:is(.anycontext-dark .dark\:anycontext-border-stone-800) {
- --tw-border-opacity: 1;
-
- border-color: rgb(41 37 36 / var(--tw-border-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-red-900) {
- --tw-bg-opacity: 1;
-
- background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-50) {
- --tw-bg-opacity: 1;
-
- background-color: rgb(250 250 249 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-800) {
- --tw-bg-opacity: 1;
-
- background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-bg-stone-950) {
- --tw-bg-opacity: 1;
-
- background-color: rgb(12 10 9 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-text-stone-50) {
- --tw-text-opacity: 1;
-
- color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-text-stone-900) {
- --tw-text-opacity: 1;
-
- color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:anycontext-ring-offset-stone-950) {
- --tw-ring-offset-color: #0c0a09;
-}
-
-:is(
- .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400
- )::-moz-placeholder {
- --tw-text-opacity: 1;
-
- color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-:is(
- .anycontext-dark .dark\:placeholder\:anycontext-text-stone-400
- )::placeholder {
- --tw-text-opacity: 1;
-
- color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-red-900\/90:hover) {
- background-color: rgb(127 29 29 / 0.9);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-50\/90:hover) {
- background-color: rgb(250 250 249 / 0.9);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800:hover) {
- --tw-bg-opacity: 1;
-
- background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-bg-stone-800\/80:hover) {
- background-color: rgb(41 37 36 / 0.8);
-}
-
-:is(.anycontext-dark .dark\:hover\:anycontext-text-stone-50:hover) {
- --tw-text-opacity: 1;
-
- color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-:is(
- .anycontext-dark
- .dark\:focus-visible\:anycontext-ring-stone-300:focus-visible
- ) {
- --tw-ring-opacity: 1;
-
- --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
-}
diff --git a/apps/extension/src/ext.css b/apps/extension/src/ext.css
index f5f73fa6..0583faad 100644
--- a/apps/extension/src/ext.css
+++ b/apps/extension/src/ext.css
@@ -2,7 +2,6 @@
@tailwind components;
@tailwind utilities;
-/* ext.css - Assuming this is your CSS file */
.anycontext-overlay {
position: fixed;
top: 0;
@@ -53,7 +52,7 @@
.anycontext-open-button {
color: white;
- background-color: #7257ff;
+ background-color: #7257ff50; /* bg-indigo-600 */
background-opacity: 75%;
cursor: pointer;
padding: 8px; /* px-4 py-2 */
@@ -68,7 +67,6 @@
font-weight: 600; /* font-semibold */
font-size: 1.25rem; /* text-xl */
color: black;
-
}
.anycontext-icon {
diff --git a/apps/extension/src/lib/utils.ts b/apps/extension/src/lib/utils.ts
index d084ccad..365058ce 100644
--- a/apps/extension/src/lib/utils.ts
+++ b/apps/extension/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs))
+ return twMerge(clsx(inputs));
}
diff --git a/apps/extension/src/main.tsx b/apps/extension/src/main.tsx
index e63eef4a..b5c00920 100644
--- a/apps/extension/src/main.tsx
+++ b/apps/extension/src/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
-)
+);
diff --git a/apps/extension/src/types/zods.ts b/apps/extension/src/types/zods.ts
index 35f9ef87..3316aa16 100644
--- a/apps/extension/src/types/zods.ts
+++ b/apps/extension/src/types/zods.ts
@@ -1,4 +1,4 @@
-import { z } from "zod"
+import { z } from "zod";
export const userObj = z.object({
message: z.string(),
@@ -6,14 +6,14 @@ export const userObj = z.object({
session: z.object({
sessionToken: z.string(),
userId: z.string(),
- expires: z.string()
+ expires: z.string(),
}),
user: z.object({
id: z.string(),
name: z.string(),
email: z.string().nullable().optional(),
emailVerified: z.string().nullable(),
- image: z.string().nullable().optional()
- })
- })
-}) \ No newline at end of file
+ image: z.string().nullable().optional(),
+ }),
+ }),
+});
diff --git a/apps/extension/src/util.ts b/apps/extension/src/util.ts
index b1085edd..d2ea35d3 100644
--- a/apps/extension/src/util.ts
+++ b/apps/extension/src/util.ts
@@ -1,13 +1,13 @@
export const getEnv = () => {
- // chrome.management.getSelf((self) => {
- // if (self.installType === 'development') {
- // return "development"
- // }
- // else {
- // return "production"
- // }
- // })
+ // chrome.management.getSelf((self) => {
+ // if (self.installType === 'development') {
+ // return "development"
+ // }
+ // else {
+ // return "production"
+ // }
+ // })
- // return null
- return 'development'
-} \ No newline at end of file
+ // return null
+ return "production";
+};
diff --git a/apps/extension/tailwind.config.js b/apps/extension/tailwind.config.js
index fa014b43..84c01958 100644
--- a/apps/extension/tailwind.config.js
+++ b/apps/extension/tailwind.config.js
@@ -1,13 +1,13 @@
-import tailwindcssAnimate from 'tailwindcss-animate';
+import tailwindcssAnimate from "tailwindcss-animate";
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: [
- './pages/**/*.{ts,tsx}',
- './components/**/*.{ts,tsx}',
- './app/**/*.{ts,tsx}',
- './src/**/*.{ts,tsx}',
- 'index.html'
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ "index.html",
],
prefix: "anycontext-",
theme: {
@@ -36,4 +36,7 @@ export default {
},
},
plugins: [tailwindcssAnimate],
-} \ No newline at end of file
+ corePlugins: {
+ preflight: false,
+ },
+};
diff --git a/apps/extension/vite.config.ts b/apps/extension/vite.config.ts
index 6a2e7d5e..c2b53f80 100644
--- a/apps/extension/vite.config.ts
+++ b/apps/extension/vite.config.ts
@@ -1,29 +1,27 @@
-import { Plugin, defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { crx } from '@crxjs/vite-plugin'
-import manifest from './manifest.json'
-import path from 'path'
+import { Plugin, defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { crx } from "@crxjs/vite-plugin";
+import manifest from "./manifest.json";
+import path from "path";
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const viteManifestHackIssue846: Plugin & { renderCrxManifest: (manifest: unknown, bundle: any) => void } = {
+const viteManifestHackIssue846: Plugin & {
+ renderCrxManifest: (manifest: unknown, bundle: any) => void;
+} = {
// Workaround from https://github.com/crxjs/chrome-extension-tools/issues/846#issuecomment-1861880919.
- name: 'manifestHackIssue846',
+ name: "manifestHackIssue846",
renderCrxManifest(_manifest, bundle) {
- bundle['manifest.json'] = bundle['.vite/manifest.json']
- bundle['manifest.json'].fileName = 'manifest.json'
- delete bundle['.vite/manifest.json']
+ bundle["manifest.json"] = bundle[".vite/manifest.json"];
+ bundle["manifest.json"].fileName = "manifest.json";
+ delete bundle[".vite/manifest.json"];
},
-}
+};
export default defineConfig({
- plugins: [
- react(),
- crx({ manifest }),
- viteManifestHackIssue846
- ],
+ plugins: [react(), crx({ manifest }), viteManifestHackIssue846],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
-}) \ No newline at end of file
+});