├── assets
    ├── icon.png
    └── icon.development.png
├── postcss.config.js
├── tsconfig.json
├── .gitignore
├── .github
    └── workflows
    │   ├── ci.yml
    │   ├── submit.yml
    │   └── release.yml
├── components
    ├── ThemeToggle.tsx
    ├── CheckForUpdates.tsx
    ├── UpdateBanner.tsx
    ├── TemplateCategory.tsx
    ├── Stats.tsx
    ├── Header.tsx
    ├── FeedbackModal.tsx
    ├── SettingsManager.tsx
    └── TemplateManager.tsx
├── background.ts
├── .prettierrc.mjs
├── LICENSE
├── tailwind.config.js
├── package.json
├── utils
    ├── checkForUpdates.ts
    └── index.ts
├── styles.css
├── popup.tsx
├── options.tsx
├── lib
    ├── ai-copilot.ts
    └── analytics.ts
├── types
    └── index.ts
├── CHANGELOG.md
├── store
    └── GlobalContext.tsx
├── styles.ts
├── contents
    ├── LinkedInMessageExtractor.ts
    ├── TypingSimulator.ts
    └── copilot.ts
├── README.md
└── static-data
    └── index.ts


/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Emmaccen/LinkedIn-Copilot/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/icon.development.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Emmaccen/LinkedIn-Copilot/HEAD/assets/icon.development.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('postcss').ProcessOptions}
 3 |  */
 4 | module.exports = {
 5 |   plugins: {
 6 |     tailwindcss: {},
 7 |     autoprefixer: {}
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "plasmo/templates/tsconfig.base",
 3 |   "exclude": ["node_modules"],
 4 |   "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
 5 |   "compilerOptions": {
 6 |     "paths": {
 7 |       "~*": ["./*"]
 8 |     },
 9 |     "baseUrl": "."
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | /node_modules
 6 | /.pnp
 7 | .pnp.js
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # misc
13 | .DS_Store
14 | *.pem
15 | 
16 | # debug
17 | npm-debug.log*
18 | yarn-debug.log*
19 | yarn-error.log*
20 | .pnpm-debug.log*
21 | 
22 | # local env files
23 | .env*.local
24 | 
25 | out/
26 | build/
27 | dist/
28 | 
29 | # plasmo
30 | .plasmo
31 | 
32 | # typescript
33 | .tsbuildinfo
34 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches: [main]
 6 |   push:
 7 |     branches: [main]
 8 | 
 9 | jobs:
10 |   build:
11 |     name: build
12 |     runs-on: ubuntu-latest
13 | 
14 |     steps:
15 |       - name: Checkout
16 |         uses: actions/checkout@v4
17 | 
18 |       - name: Setup Node.js
19 |         uses: actions/setup-node@v4
20 |         with:
21 |           node-version: "18"
22 |           cache: "npm"
23 | 
24 |       - name: Install dependencies
25 |         run: npm ci
26 | 
27 |       - name: Build
28 |         run: npm run build
29 | 


--------------------------------------------------------------------------------
/components/ThemeToggle.tsx:
--------------------------------------------------------------------------------
 1 | import { Moon, Sun } from "lucide-react"
 2 | 
 3 | import { useGlobalState } from "~store/GlobalContext"
 4 | 
 5 | export const ThemeToggle = () => {
 6 |   const { theme, setTheme } = useGlobalState()
 7 | 
 8 |   return (
 9 |     <button
10 |       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
11 |       className="flex items-center justify-center p-2 hover:scale-105 transition-all"
12 |       aria-label="Toggle theme">
13 |       {theme === "dark" ? (
14 |         <Sun className="h-5 w-5 text-gray-500" />
15 |       ) : (
16 |         <Moon className="h-5 w-5 text-gray-600" />
17 |       )}
18 |     </button>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/background.ts:
--------------------------------------------------------------------------------
 1 | import Analytics from "~lib/analytics"
 2 | import { AnalyticsEventTypes } from "~types"
 3 | 
 4 | chrome.runtime.onInstalled.addListener(() => {
 5 |   Analytics.fireEvent("install")
 6 | })
 7 | 
 8 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
 9 |   if (message.type === AnalyticsEventTypes.GA_EVENT) {
10 |     Analytics.fireEvent(message.eventName, message.eventParams).then((res) => {
11 |       sendResponse(res)
12 |     })
13 |   } else if (message.type === AnalyticsEventTypes.GA_ERROR_EVENT) {
14 |     Analytics.fireErrorEvent(message.error, message.eventParams).then((res) => {
15 |       sendResponse(res)
16 |     })
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/.prettierrc.mjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('prettier').Options}
 3 |  */
 4 | export default {
 5 |   printWidth: 80,
 6 |   tabWidth: 2,
 7 |   useTabs: false,
 8 |   semi: false,
 9 |   singleQuote: false,
10 |   trailingComma: "none",
11 |   bracketSpacing: true,
12 |   bracketSameLine: true,
13 |   plugins: ["@ianvs/prettier-plugin-sort-imports"],
14 |   importOrder: [
15 |     "<BUILTIN_MODULES>", // Node.js built-in modules
16 |     "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
17 |     "", // Empty line
18 |     "^@plasmo/(.*)$",
19 |     "",
20 |     "^@plasmohq/(.*)$",
21 |     "",
22 |     "^~(.*)$",
23 |     "",
24 |     "^[./]"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/submit.yml:
--------------------------------------------------------------------------------
 1 | name: "Submit to Web Store"
 2 | on:
 3 |   workflow_dispatch:
 4 | 
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - uses: actions/checkout@v3
10 |       - name: Cache pnpm modules
11 |         uses: actions/cache@v3
12 |         with:
13 |           path: ~/.pnpm-store
14 |           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
15 |           restore-keys: |
16 |             ${{ runner.os }}-
17 |       - uses: pnpm/action-setup@v2.2.4
18 |         with:
19 |           version: latest
20 |           run_install: true
21 |       - name: Use Node.js 16.x
22 |         uses: actions/setup-node@v3.4.1
23 |         with:
24 |           node-version: 16.x
25 |           cache: "pnpm"
26 |       - name: Build the extension
27 |         run: pnpm build
28 |       - name: Package the extension into a zip artifact
29 |         run: pnpm package
30 |       - name: Browser Platform Publish
31 |         uses: PlasmoHQ/bpp@v3
32 |         with:
33 |           keys: ${{ secrets.SUBMIT_KEYS }}
34 |           artifact: build/chrome-mv3-prod.zip
35 | 


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


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   mode: "jit",
 4 |   darkMode: "class",
 5 |   content: [
 6 |     "./**/*.tsx",
 7 |     "./popup/**/*.{ts,tsx}", // Plasmo popup UI
 8 |     "./options/**/*.{ts,tsx}" // Plasmo options page
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       colors: {
13 |         background: "var(--background)",
14 |         foreground: "var(--foreground)",
15 |         card: "var(--card)",
16 |         "card-foreground": "var(--card-foreground)",
17 |         muted: "var(--muted)",
18 |         "muted-foreground": "var(--muted-foreground)",
19 |         accent: "var(--accent)",
20 |         "accent-foreground": "var(--accent-foreground)",
21 |         border: "var(--border)",
22 |         input: "var(--input)",
23 |         ring: "var(--ring)",
24 |         destructive: "var(--destructive)",
25 |         "destructive-foreground": "var(--destructive-foreground)",
26 |         "brand-blue": "oklch(var(--brand-blue) / <alpha-value>)",
27 |         "brand-green": "oklch(var(--brand-green) / <alpha-value>)"
28 |       },
29 |       borderRadius: {
30 |         lg: "var(--radius)",
31 |         md: "calc(var(--radius) - 2px)",
32 |         sm: "calc(var(--radius) - 4px)"
33 |       }
34 |     }
35 |   },
36 |   plugins: [require("@tailwindcss/typography")]
37 | }
38 | 


--------------------------------------------------------------------------------
/components/CheckForUpdates.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react"
 2 | 
 3 | import UpdateBanner from "~components/UpdateBanner"
 4 | import { checkForUpdatesAndCacheResponse } from "~utils/checkForUpdates"
 5 | 
 6 | const CheckForUpdates = () => {
 7 |   const [updateInfo, setUpdateInfo] = useState<{
 8 |     hasUpdate: boolean
 9 |     currentVersion: string
10 |     latestVersion: string
11 |   } | null>(null)
12 |   const [showUpdateBanner, setShowUpdateBanner] = useState(false)
13 | 
14 |   useEffect(() => {
15 |     checkForUpdatesAndCacheResponse().then((info) => {
16 |       if (info && info.hasUpdate && !info.dismissedUpdate) {
17 |         setUpdateInfo(info)
18 |         setShowUpdateBanner(true)
19 |       }
20 |     })
21 |   }, [])
22 | 
23 |   const handleDismissUpdate = () => {
24 |     setShowUpdateBanner(false)
25 |     chrome.storage.local.set({
26 |       dismissedUpdate: true
27 |     })
28 |   }
29 |   return (
30 |     <div>
31 |       {showUpdateBanner && updateInfo && (
32 |         <div className="max-w-2xl mx-auto p-6">
33 |           <UpdateBanner
34 |             currentVersion={updateInfo.currentVersion}
35 |             latestVersion={updateInfo.latestVersion}
36 |             onDismiss={handleDismissUpdate}
37 |           />
38 |         </div>
39 |       )}
40 |     </div>
41 |   )
42 | }
43 | 
44 | export default CheckForUpdates
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "linkedin-copilot",
 3 |   "displayName": "Linkedin Copilot",
 4 |   "version": "0.0.4",
 5 |   "description": "An AI copilot for LinkedIn. Generate smart replies, craft engaging posts, and boost your networking and engagement with ease.",
 6 |   "author": "Lucius Emmanuel <lucius.emmanuel.e@gmail.com>",
 7 |   "scripts": {
 8 |     "dev": "plasmo dev",
 9 |     "build": "plasmo build",
10 |     "package": "plasmo package"
11 |   },
12 |   "dependencies": {
13 |     "@headlessui/react": "^2.2.7",
14 |     "groq-sdk": "^0.30.0",
15 |     "lucide-react": "^0.539.0",
16 |     "plasmo": "0.90.5",
17 |     "react": "18.2.0",
18 |     "react-dom": "18.2.0",
19 |     "zod": "^4.0.17"
20 |   },
21 |   "devDependencies": {
22 |     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
23 |     "@tailwindcss/typography": "^0.5.16",
24 |     "@types/chrome": "0.0.258",
25 |     "@types/node": "20.11.5",
26 |     "@types/react": "18.2.48",
27 |     "@types/react-dom": "18.2.18",
28 |     "autoprefixer": "^10.4.21",
29 |     "postcss": "^8.5.6",
30 |     "prettier": "3.2.4",
31 |     "tailwindcss": "^3.4.17",
32 |     "typescript": "5.3.3"
33 |   },
34 |   "manifest": {
35 |     "host_permissions": [
36 |       "https://www.linkedin.com/*"
37 |     ],
38 |     "permissions": [
39 |       "scripting",
40 |       "storage"
41 |     ]
42 |   },
43 |   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
44 | }
45 | 


--------------------------------------------------------------------------------
/utils/checkForUpdates.ts:
--------------------------------------------------------------------------------
 1 | const UPDATE_CHECK_INTERVAL = 24 * 60 * 60 * 1000 * 7 // 7 days
 2 | 
 3 | const shouldCheckForUpdates = async () => {
 4 |   const { lastUpdateCheck } = await chrome.storage.local.get("lastUpdateCheck")
 5 |   const now = Date.now()
 6 |   return !lastUpdateCheck || now - lastUpdateCheck > UPDATE_CHECK_INTERVAL
 7 | }
 8 | 
 9 | export const checkForUpdatesAndCacheResponse = async () => {
10 |   if (await shouldCheckForUpdates()) {
11 |     const updateInfo = await checkForUpdates()
12 |     if (updateInfo) {
13 |       await chrome.storage.local.set({
14 |         updateInfo,
15 |         lastUpdateCheck: Date.now(),
16 |         dismissedUpdate: false
17 |       })
18 |     }
19 |     return { ...updateInfo, dismissedUpdate: false }
20 |   }
21 | 
22 |   const { updateInfo, dismissedUpdate } = await chrome.storage.local.get([
23 |     "updateInfo",
24 |     "dismissedUpdate"
25 |   ])
26 | 
27 |   return { ...updateInfo, dismissedUpdate }
28 | }
29 | 
30 | const checkForUpdates = async () => {
31 |   try {
32 |     const response = await fetch(
33 |       "https://raw.githubusercontent.com/emmaccen/linkedin-copilot/main/package.json"
34 |     )
35 |     const packageData = await response.json()
36 |     const latestVersion = packageData.version
37 |     const currentVersion = chrome.runtime.getManifest().version
38 | 
39 |     return {
40 |       hasUpdate: latestVersion !== currentVersion,
41 |       latestVersion,
42 |       currentVersion
43 |     }
44 |   } catch (error) {
45 |     console.error("Update check failed:", error)
46 |     return null
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | @plugin "@tailwindcss/typography";
 5 | 
 6 | /* Base Theme Variables */
 7 | @layer base {
 8 |   :root {
 9 |     --background: oklch(1 0 0); /* white */
10 |     --foreground: oklch(0.145 0 0); /* near black */
11 | 
12 |     --card: var(--background);
13 |     --card-foreground: var(--foreground);
14 | 
15 |     --muted: oklch(0.97 0 0); /* light gray */
16 |     --muted-foreground: oklch(0.556 0 0); /* medium gray */
17 | 
18 |     --accent: oklch(0.95 0 0);
19 |     --accent-foreground: var(--foreground);
20 | 
21 |     --border: oklch(0.922 0 0); /* light border gray */
22 |     --input: var(--border);
23 | 
24 |     --ring: oklch(0.708 0 0); /* medium ring gray */
25 | 
26 |     --destructive: oklch(0.577 0.245 27.325); /* red-ish */
27 |     --destructive-foreground: oklch(0.985 0 0);
28 | 
29 |     --brand-blue: 0.55 0.22 262.89; /* blue accent */
30 |     --brand-green: 0.63 0.17 149.21; /* green accent */
31 |     --radius: 0.5rem;
32 |   }
33 | 
34 |   .dark {
35 |     --background: oklch(0.145 0 0); /* near black */
36 |     --foreground: oklch(0.985 0 0); /* white */
37 | 
38 |     --card: oklch(0.205 0 0); /* slightly lighter black */
39 |     --card-foreground: var(--foreground);
40 | 
41 |     --muted: oklch(0.269 0 0); /* dark gray */
42 |     --muted-foreground: oklch(0.708 0 0); /* lighter gray text */
43 | 
44 |     --accent: oklch(0.371 0 0);
45 |     --accent-foreground: oklch(0.985 0 0);
46 | 
47 |     --border: oklch(1 0 0 / 0.1);
48 |     --input: oklch(1 0 0 / 0.15);
49 | 
50 |     --ring: oklch(0.556 0 0);
51 | 
52 |     --destructive: oklch(0.704 0.191 22.216);
53 |     --destructive-foreground: oklch(0.985 0 0);
54 | 
55 |     --brand-blue: 0.55 0.22 262.89; /* blue accent */
56 |     --brand-green: 0.63 0.17 149.21 /* green accent */;
57 |   }
58 | 
59 |   /* Apply background & foreground globally */
60 |   * {
61 |     @apply border-border;
62 |   }
63 | 
64 |   body {
65 |     @apply bg-background text-foreground;
66 |   }
67 | 
68 |   /* Typography plugin + prose defaults */
69 |   .prose {
70 |     @apply text-foreground;
71 |   }
72 |   .dark .prose {
73 |     @apply text-foreground;
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Build & Release (tag only)
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - "v*"
 7 | 
 8 | permissions:
 9 |   contents: write
10 | 
11 | jobs:
12 |   build-and-release:
13 |     runs-on: ubuntu-latest
14 | 
15 |     steps:
16 |       - name: Checkout
17 |         uses: actions/checkout@v4
18 |         with:
19 |           fetch-depth: 0
20 | 
21 |       - name: Setup Node.js
22 |         uses: actions/setup-node@v4
23 |         with:
24 |           node-version: "18"
25 |           cache: "npm"
26 | 
27 |       - name: Install dependencies
28 |         run: npm ci
29 | 
30 |       - name: Build extension
31 |         run: npm run build
32 | 
33 |       - name: Get version from tag
34 |         id: get_version
35 |         run: |
36 |           TAG_REF="${GITHUB_REF#refs/tags/}"
37 |           VERSION="${TAG_REF#v}"
38 |           echo "TAG=${TAG_REF}" >> "$GITHUB_OUTPUT"
39 |           echo "VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
40 | 
41 |       - name: Ensure build exists
42 |         run: |
43 |           if [ ! -d "build/chrome-mv3-prod" ]; then
44 |             echo "ERROR: build/chrome-mv3-prod not found. Did npm run build fail?"
45 |             ls -la build || true
46 |             exit 1
47 |           fi
48 | 
49 |       - name: Create artifacts dir & versioned zip
50 |         run: |
51 |           set -e
52 |           VERSION=${{ steps.get_version.outputs.VERSION }}
53 |           mkdir -p artifacts
54 |           rm -f artifacts/linkedin-copilot-v${VERSION}.zip || true
55 |           cd build/chrome-mv3-prod
56 |           zip -r ../../artifacts/linkedin-copilot-v${VERSION}.zip .
57 | 
58 |       - name: Create latest zip
59 |         run: |
60 |           set -e
61 |           mkdir -p artifacts
62 |           rm -f artifacts/linkedin-copilot-latest.zip || true
63 |           cd build/chrome-mv3-prod
64 |           zip -r ../../artifacts/linkedin-copilot-latest.zip .
65 | 
66 |       - name: Create GitHub Release and upload artifacts
67 |         uses: ncipollo/release-action@v1
68 |         with:
69 |           tag: ${{ steps.get_version.outputs.TAG }}
70 |           name: "LinkedIn Copilot v${{ steps.get_version.outputs.VERSION }}"
71 |           body: |
72 |             Release v${{ steps.get_version.outputs.VERSION }} — auto-built artifact.
73 |           artifacts: "artifacts/linkedin-copilot-v${{ steps.get_version.outputs.VERSION }}.zip,artifacts/linkedin-copilot-latest.zip"
74 |           prerelease: false
75 |           makeLatest: true
76 |         env:
77 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
78 | 


--------------------------------------------------------------------------------
/popup.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react"
 2 | 
 3 | import "./styles.css"
 4 | 
 5 | import { Stats } from "~components/Stats"
 6 | import { GlobalProvider } from "~store/GlobalContext"
 7 | import { ENCRYPTION_KEY_NAME, loadFromLocalStorage } from "~utils"
 8 | 
 9 | const Popup = () => {
10 |   const [isAiConfigured, setIsAiConfigured] = useState(false)
11 | 
12 |   useEffect(() => {
13 |     loadFromLocalStorage<string>(ENCRYPTION_KEY_NAME).then((storedApiKey) => {
14 |       if (storedApiKey) setIsAiConfigured(true)
15 |       else setIsAiConfigured(false)
16 |     })
17 |   }, [])
18 | 
19 |   return (
20 |     <div className="w-[600px] mx-auto p-8">
21 |       <header>
22 |         <div className="flex items-center gap-2 mb-2">
23 |           <h1 className="text-2xl font-bold">LinkedIn Copilot</h1>
24 |         </div>
25 |         <p className="text-muted-foreground text-sm flex items-center gap-1">
26 |           <span>
27 |             Manage your templates, user profile and AI configuration from the
28 |           </span>
29 |           <a
30 |             href={chrome.runtime.getURL("options.html")}
31 |             target="_blank"
32 |             rel="noopener noreferrer"
33 |             className=" text-brand-blue hover:underline">
34 |             Options page
35 |           </a>
36 |         </p>
37 |       </header>
38 |       <div className="mt-6">
39 |         <div
40 |           className={`rounded-lg border border-border p-2 mb-6 ${isAiConfigured ? "bg-green-100" : "bg-orange-100"}`}>
41 |           {isAiConfigured ? (
42 |             <p className="mt-2 text-sm text-muted-foreground">
43 |               Your AI is configured and ready to use! You can now close this
44 |               popup and start using LinkedIn Copilot.
45 |             </p>
46 |           ) : (
47 |             <p className="mt-2 text-sm text-muted-foreground">
48 |               Your AI is not yet configured. Please visit the options page to
49 |               set up your API key and user details.
50 |             </p>
51 |           )}
52 |           <div className="mt-4 flex justify-end">
53 |             <a
54 |               href={chrome.runtime.getURL("options.html")}
55 |               target="_blank"
56 |               rel="noopener noreferrer"
57 |               className="px-4 py-2 bg-brand-blue text-white rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2">
58 |               Go to Options
59 |             </a>
60 |           </div>
61 |         </div>
62 |         <Stats />
63 |       </div>
64 |     </div>
65 |   )
66 | }
67 | 
68 | const ExtensionPopup = () => {
69 |   return <GlobalProvider>{<Popup />}</GlobalProvider>
70 | }
71 | 
72 | export default ExtensionPopup
73 | 


--------------------------------------------------------------------------------
/components/UpdateBanner.tsx:
--------------------------------------------------------------------------------
 1 | interface UpdateBannerProps {
 2 |   currentVersion: string
 3 |   latestVersion: string
 4 |   onDismiss: () => void
 5 | }
 6 | 
 7 | const UpdateBanner: React.FC<UpdateBannerProps> = ({
 8 |   currentVersion,
 9 |   latestVersion,
10 |   onDismiss
11 | }) => {
12 |   const openInNewTab = (url: string) => {
13 |     try {
14 |       window.open(url, "_blank")
15 |     } catch {
16 |       window.location.href = url
17 |     }
18 |   }
19 |   const getTag = (version: string) => {
20 |     return version?.toString().startsWith("v")
21 |       ? version.toString()
22 |       : `v${version}`
23 |   }
24 | 
25 |   const handleDownload = async () => {
26 |     const tag = getTag(latestVersion)
27 | 
28 |     const assetUrl = `https://github.com/Emmaccen/LinkedIn-Copilot/releases/download/${tag}/linkedin-copilot-latest.zip`
29 | 
30 |     openInNewTab(assetUrl)
31 |   }
32 | 
33 |   return (
34 |     <div className="relative rounded-lg border border-brand-blue/20 bg-brand-blue/5 p-4">
35 |       <div className="flex items-start justify-between">
36 |         <div className="flex items-center space-x-3">
37 |           <div className="flex-shrink-0">
38 |             <svg
39 |               className="h-5 w-5 text-brand-blue"
40 |               fill="none"
41 |               viewBox="0 0 24 24"
42 |               stroke="currentColor">
43 |               <path
44 |                 strokeLinecap="round"
45 |                 strokeLinejoin="round"
46 |                 strokeWidth={2}
47 |                 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
48 |               />
49 |             </svg>
50 |           </div>
51 |           <div className="flex-1">
52 |             <h4 className="text-sm font-medium text-foreground">
53 |               New version available
54 |             </h4>
55 |             <p className="mt-1 text-sm text-muted-foreground">
56 |               LinkedIn Copilot v{latestVersion} is now available. You're
57 |               currently using v{currentVersion}.
58 |             </p>
59 |           </div>
60 |         </div>
61 |         <button
62 |           onClick={onDismiss}
63 |           className="ml-4 flex-shrink-0 rounded-md p-1.5 text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
64 |           aria-label="Dismiss update notification">
65 |           <svg
66 |             className="h-4 w-4"
67 |             fill="none"
68 |             viewBox="0 0 24 24"
69 |             stroke="currentColor">
70 |             <path
71 |               strokeLinecap="round"
72 |               strokeLinejoin="round"
73 |               strokeWidth={2}
74 |               d="M6 18L18 6M6 6l12 12"
75 |             />
76 |           </svg>
77 |         </button>
78 |       </div>
79 | 
80 |       <div className="mt-3 flex items-center space-x-3">
81 |         <button
82 |           onClick={handleDownload}
83 |           className="inline-flex items-center rounded-md bg-brand-blue px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-blue/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
84 |           Download Update
85 |         </button>
86 |         <a
87 |           href={`https://github.com/emmaccen/linkedin-copilot/releases/tag/${getTag(latestVersion)}`}
88 |           target="_blank"
89 |           rel="noopener noreferrer"
90 |           className="text-xs text-brand-blue hover:underline">
91 |           View release notes
92 |         </a>
93 |       </div>
94 |     </div>
95 |   )
96 | }
97 | 
98 | export default UpdateBanner
99 | 


--------------------------------------------------------------------------------
/options.tsx:
--------------------------------------------------------------------------------
  1 | // import copilotIcon from "data-base64:~assets/icon.png"
  2 | import { useState } from "react"
  3 | 
  4 | import "./styles.css"
  5 | 
  6 | import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react"
  7 | import { AlertCircle, CheckCircle, InfoIcon } from "lucide-react"
  8 | 
  9 | import CheckForUpdates from "~components/CheckForUpdates"
 10 | import { ImportExportTemplate } from "~components/Header"
 11 | import { SettingsManager } from "~components/SettingsManager"
 12 | import { Stats } from "~components/Stats"
 13 | import { TemplateCategoryManager } from "~components/TemplateCategory"
 14 | import TemplateManager from "~components/TemplateManager"
 15 | import { GlobalProvider, useGlobalState } from "~store/GlobalContext"
 16 | 
 17 | function classNames(...classes: string[]) {
 18 |   return classes.filter(Boolean).join(" ")
 19 | }
 20 | 
 21 | const Options = () => {
 22 |   const [selectedIndex, setSelectedIndex] = useState(0)
 23 |   const { notifications } = useGlobalState()
 24 | 
 25 |   return (
 26 |     <div className="min-h-screen max-w-7xl mx-auto p-8">
 27 |       {/* <ThemeToggle /> */}
 28 |       {!!notifications.length && (
 29 |         <div className="fixed top-4 right-4 z-50">
 30 |           {notifications.map((notification) => (
 31 |             <div
 32 |               key={notification.id}
 33 |               className={`p-4 mb-2 rounded-lg shadow-lg transition-all ${
 34 |                 notification.type === "success"
 35 |                   ? "bg-green-500 text-white"
 36 |                   : notification.type === "error"
 37 |                     ? "bg-red-500 text-white"
 38 |                     : "bg-blue-500 text-white"
 39 |               }`}>
 40 |               <div className="flex items-center gap-2">
 41 |                 {notification.type === "success" && <CheckCircle size={16} />}
 42 |                 {notification.type === "error" && <AlertCircle size={16} />}
 43 |                 {notification.type === "info" && <InfoIcon size={16} />}
 44 |                 {notification.message}
 45 |               </div>
 46 |             </div>
 47 |           ))}
 48 |         </div>
 49 |       )}
 50 |       <div className="flex items-center gap-2 mb-2">
 51 |         <h1 className="text-3xl font-bold">LinkedIn Copilot</h1>
 52 |         {/* <img
 53 |           className="h-7 w-7"
 54 |           height={28}
 55 |           width={28}
 56 |           src={copilotIcon}
 57 |           alt="LinkedIn copilot icon"
 58 |         /> */}
 59 |       </div>
 60 |       <p className="text-muted-foreground">
 61 |         Manage your templates and configure your ai and extension settings.
 62 |       </p>
 63 |       <CheckForUpdates />
 64 |       <TabGroup selectedIndex={selectedIndex} onChange={setSelectedIndex}>
 65 |         <TabList className="flex border-b border-border mt-6 space-x-6">
 66 |           {["Templates", "Settings"].map((tab) => (
 67 |             <Tab
 68 |               key={tab}
 69 |               className={({ selected }) =>
 70 |                 classNames(
 71 |                   "py-2 border-b-2 -mb-px outline-none text-base",
 72 |                   selected
 73 |                     ? "border-foreground text-foreground font-medium"
 74 |                     : "border-transparent text-muted-foreground hover:text-foreground"
 75 |                 )
 76 |               }>
 77 |               {tab}
 78 |             </Tab>
 79 |           ))}
 80 |         </TabList>
 81 | 
 82 |         <TabPanels>
 83 |           <TabPanel className="pt-6 space-y-6">
 84 |             <ImportExportTemplate />
 85 |             <Stats />
 86 |             <TemplateCategoryManager />
 87 |             <TemplateManager />
 88 |           </TabPanel>
 89 | 
 90 |           <TabPanel className="pt-6">
 91 |             <SettingsManager />
 92 |           </TabPanel>
 93 |         </TabPanels>
 94 |       </TabGroup>
 95 |     </div>
 96 |   )
 97 | }
 98 | const OptionsPage = () => {
 99 |   return <GlobalProvider>{<Options />}</GlobalProvider>
100 | }
101 | export default OptionsPage
102 | 


--------------------------------------------------------------------------------
/lib/ai-copilot.ts:
--------------------------------------------------------------------------------
  1 | import Groq from "groq-sdk"
  2 | 
  3 | import { ENCRYPTED_API_KEY_NAME, getDecryptedApiKey } from "~utils"
  4 | 
  5 | interface PromptType {
  6 |   message: string
  7 |   systemMessage: string
  8 | }
  9 | 
 10 | export const groqInstance = (() => {
 11 |   let instance: Groq | null = null
 12 | 
 13 |   const createInstance = async (): Promise<Groq | null> => {
 14 |     try {
 15 |       const apiKey = await getDecryptedApiKey()
 16 | 
 17 |       if (apiKey) {
 18 |         instance = new Groq({
 19 |           apiKey: apiKey,
 20 |           dangerouslyAllowBrowser: true
 21 |         })
 22 |         return instance
 23 |       } else {
 24 |         console.warn("No API key found in storage")
 25 |         return null
 26 |       }
 27 |     } catch (error) {
 28 |       console.error("Failed to create Groq instance:", error)
 29 |       return null
 30 |     }
 31 |   }
 32 | 
 33 |   return {
 34 |     // This method creates a new instance of Groq
 35 |     // It can be called to reset the instance if needed
 36 |     createInstance,
 37 |     // This method ensures that we only create the instance once
 38 |     getInstance: async (): Promise<Groq | null> => {
 39 |       if (!instance) {
 40 |         instance = await createInstance()
 41 |       }
 42 |       return instance
 43 |     },
 44 |     // Method to reset instance (useful for key changes)
 45 |     resetInstance: () => {
 46 |       instance = null
 47 |     }
 48 |   }
 49 | })()
 50 | 
 51 | chrome.storage.onChanged.addListener(async (changes, namespace) => {
 52 |   if (namespace === "local" && changes[ENCRYPTED_API_KEY_NAME]) {
 53 |     // console.log("Encrypted API key changed, resetting Groq instance")
 54 |     groqInstance.resetInstance()
 55 |     await groqInstance.createInstance()
 56 |     // console.log("Groq instance reset and recreated")
 57 |   }
 58 | })
 59 | 
 60 | export async function generateReply({ message, systemMessage }: PromptType) {
 61 |   return await getGroqChatStream({ message, systemMessage })
 62 | }
 63 | 
 64 | export async function getGroqChatStream({
 65 |   message,
 66 |   systemMessage
 67 | }: PromptType) {
 68 |   const groq = await groqInstance.getInstance()
 69 | 
 70 |   // Add null check before using groq
 71 |   if (!groq) {
 72 |     throw new Error(
 73 |       "Groq instance not available - API key may not be configured"
 74 |     )
 75 |   }
 76 | 
 77 |   return groq.chat.completions.create({
 78 |     messages: [
 79 |       {
 80 |         role: "system",
 81 |         content: systemMessage
 82 |       },
 83 |       {
 84 |         role: "user",
 85 |         content: message
 86 |       }
 87 |     ],
 88 |     model: "llama-3.3-70b-versatile",
 89 | 
 90 |     // The maximum number of tokens to generate. Requests can use up to
 91 |     // 2048 tokens shared between prompt and completion.
 92 |     max_completion_tokens: 2000,
 93 | 
 94 |     temperature: 0.3,
 95 | 
 96 |     stop: null,
 97 | 
 98 |     stream: true
 99 |   })
100 | }
101 | 
102 | export async function createLinkedInPostWithAi({
103 |   message,
104 |   systemMessage
105 | }: PromptType) {
106 |   const groq = await groqInstance.getInstance()
107 |   return await groq.chat.completions.create({
108 |     messages: [
109 |       {
110 |         role: "system",
111 |         content: systemMessage
112 |       },
113 |       {
114 |         role: "user",
115 |         content: message
116 |       }
117 |     ],
118 |     model: "llama-3.3-70b-versatile",
119 | 
120 |     // The maximum number of tokens to generate. Requests can use up to
121 |     // 2048 tokens shared between prompt and completion.
122 |     max_completion_tokens: 2000,
123 | 
124 |     temperature: 0.3,
125 | 
126 |     stop: null,
127 | 
128 |     stream: true
129 |   })
130 | }
131 | 
132 | /**
133 |  * NOTES FROM LUCIUS EMMANUEL
134 |  * If you ever wonder how long you can use your free-tier API key, you can check the limits at https://console.groq.com/docs/rate-limits
135 |  * But basically, the model used above can generate ~400,000 characters per day. And that's pretty sick!
136 |  */
137 | 


--------------------------------------------------------------------------------
/components/TemplateCategory.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "@headlessui/react"
 2 | import { Plus, Save, X } from "lucide-react"
 3 | import { useState } from "react"
 4 | 
 5 | import type { TemplateCategory } from "~types"
 6 | import { loadFromLocalStorage, saveToLocalStorage } from "~utils"
 7 | 
 8 | export const TemplateCategoryManager = () => {
 9 |   const [showCategoryForm, setShowCategoryForm] = useState(false)
10 |   const [newCategory, setNewCategory] = useState({
11 |     name: "",
12 |     icon: ""
13 |   })
14 | 
15 |   const addNewCategory = async () => {
16 |     if (!newCategory.icon.trim() && !newCategory.name.trim()) {
17 |       return
18 |     }
19 |     const previousTemplates =
20 |       await loadFromLocalStorage<Record<string, TemplateCategory>>("templates")
21 |     if (previousTemplates) {
22 |       const updatedTemplates = {
23 |         ...previousTemplates
24 |       }
25 |       updatedTemplates[newCategory.name] = {
26 |         active: false,
27 |         context: ["feed"],
28 |         icon: newCategory.icon,
29 |         templates: []
30 |       }
31 |       saveToLocalStorage<Record<string, TemplateCategory>>(
32 |         "templates",
33 |         updatedTemplates
34 |       )
35 |     }
36 |     setNewCategory({
37 |       name: "",
38 |       icon: ""
39 |     })
40 |     setShowCategoryForm(false)
41 |   }
42 |   return (
43 |     <div>
44 |       <div className="rounded-lg border border-border p-6 flex justify-between items-center">
45 |         <span className="font-medium">Add New Category</span>
46 | 
47 |         {!showCategoryForm ? (
48 |           <button
49 |             onClick={() => setShowCategoryForm(true)}
50 |             className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
51 |             <Plus size={16} />
52 |             Add Category
53 |           </button>
54 |         ) : (
55 |           <div>
56 |             <div className="flex items-center gap-2">
57 |               <Input
58 |                 type="text"
59 |                 value={newCategory.icon}
60 |                 title="Press Cmd+Ctrl+Space (Mac) or Win+. (Windows) to open the emoji picker."
61 |                 onChange={(e) =>
62 |                   setNewCategory({ ...newCategory, icon: e.target.value })
63 |                 }
64 |                 placeholder="Icon"
65 |                 className="border border-border bg-background rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-16 mr-2"
66 |               />
67 |               <Input
68 |                 type="text"
69 |                 value={newCategory.name}
70 |                 onChange={(e) =>
71 |                   setNewCategory({ ...newCategory, name: e.target.value })
72 |                 }
73 |                 placeholder="Category name"
74 |                 className="border border-border bg-background rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64"
75 |               />
76 |               <button
77 |                 onClick={addNewCategory}
78 |                 className="inline-flex items-center gap-2 rounded-lg bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-offset-2 transition-colors ">
79 |                 <Save size={16} />
80 |               </button>
81 |               <button
82 |                 onClick={() => setShowCategoryForm(false)}
83 |                 className="inline-flex items-center gap-2 rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 transition-colors">
84 |                 <X size={16} />
85 |               </button>
86 |             </div>
87 |             <p className="text-xs text-muted-foreground mt-2">
88 |               Press Cmd+Ctrl+Space (Mac) or Win+. (Windows) to open the emoji
89 |               picker.
90 |             </p>
91 |           </div>
92 |         )}
93 |       </div>
94 |     </div>
95 |   )
96 | }
97 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
  1 | export type Theme = "light" | "dark"
  2 | export type NotificationType = "success" | "error" | "info" | "warning"
  3 | 
  4 | export interface UserSettings {
  5 |   typingDelay: number
  6 |   enableTypingSimulation: boolean
  7 | }
  8 | export interface UserDetails {
  9 |   fullName: string
 10 |   professionalTitle: string
 11 |   professionalSummary: string
 12 | }
 13 | export interface Notification {
 14 |   id: string
 15 |   message: string
 16 |   type: NotificationType
 17 | }
 18 | 
 19 | export type GlobalState = {
 20 |   theme: Theme
 21 |   setTheme: (theme: Theme) => void
 22 |   notifications?: Notification[]
 23 |   pushNotification?: (message: string, type?: NotificationType) => void
 24 |   removeNotification?: (id: string) => void
 25 |   templates?: Record<string, TemplateCategory>
 26 |   userDetails: UserDetails
 27 |   userSettings: UserSettings
 28 | }
 29 | 
 30 | export interface Template {
 31 |   id: string
 32 |   message: string
 33 |   aiGenerated: boolean
 34 |   active: boolean
 35 |   placeholders: string[]
 36 | }
 37 | export interface TemplateCategory {
 38 |   active: boolean
 39 |   context: ContextType[]
 40 |   icon: string
 41 |   templates: Template[]
 42 | }
 43 | export interface DropdownAction {
 44 |   id: string
 45 |   label: string
 46 |   icon: string
 47 |   category: string
 48 | }
 49 | 
 50 | export interface UserInfo {
 51 |   name?: string
 52 |   desc?: string
 53 |   [key: string]: string | undefined
 54 | }
 55 | 
 56 | export interface UsageStats {
 57 |   [date: string]: {
 58 |     [category: string]: number
 59 |     total?: number
 60 |   }
 61 | }
 62 | 
 63 | export interface AiDMChatMessage {
 64 |   sender: string
 65 |   text: string
 66 |   timestamp: string
 67 |   isOtherPerson: boolean
 68 |   element: Element
 69 | }
 70 | 
 71 | export interface AiDMChatContext {
 72 |   messages: AiDMChatMessage[]
 73 |   totalCharacters: number
 74 |   truncated: boolean
 75 | }
 76 | 
 77 | export type ContextType = "feed" | "dm" | "connection" | "post"
 78 | 
 79 | export enum AnalyticsEventTypes {
 80 |   "AI_POST_CREATED" = "AI_POST_CREATED",
 81 |   "AI_DM_SINGLE_REPLY_CREATED" = "AI_DM_SINGLE_REPLY_CREATED",
 82 |   "AI_DM_CHAT_HISTORY_REPLY_CREATED" = "AI_DM_CHAT_HISTORY_REPLY_CREATED",
 83 |   "TEMPLATE_USED" = "TEMPLATE_USED",
 84 |   "POST_COMMENT_CREATED" = "POST_COMMENT_CREATED",
 85 |   "GA_EVENT" = "GA_EVENT",
 86 |   "GA_ERROR_EVENT" = "GA_ERROR_EVENT"
 87 | }
 88 | 
 89 | export interface GAUserInfo {
 90 |   user_agent: string
 91 |   language: string
 92 |   timezone: string
 93 |   country: string
 94 |   country_code: string
 95 |   region: string
 96 |   city: string
 97 |   timestamp: number
 98 |   region_code: string
 99 | }
100 | 
101 | export interface LocationInfo {
102 |   ip: string
103 |   network: string
104 |   version: string
105 |   city: string
106 |   region: string
107 |   region_code: string
108 |   country: string
109 |   country_name: string
110 |   country_code: string
111 |   country_code_iso3: string
112 |   country_capital: string
113 |   country_tld: string
114 |   continent_code: string
115 |   in_eu: boolean
116 |   postal: any
117 |   latitude: number
118 |   longitude: number
119 |   timezone: string
120 |   utc_offset: string
121 |   country_calling_code: string
122 |   currency: string
123 |   currency_name: string
124 |   languages: string
125 |   country_area: number
126 |   country_population: number
127 |   asn: string
128 |   org: string
129 | }
130 | export interface LocationInfoType {
131 |   ip: string
132 |   success: boolean
133 |   type: string
134 |   continent: string
135 |   continent_code: string
136 |   country: string
137 |   country_code: string
138 |   region: string
139 |   region_code: string
140 |   city: string
141 |   latitude: number
142 |   longitude: number
143 |   is_eu: boolean
144 |   postal: string
145 |   calling_code: string
146 |   capital: string
147 |   borders: string
148 |   flag: Flag
149 |   connection: Connection
150 |   timezone: Timezone
151 | }
152 | 
153 | export interface Connection {
154 |   asn: number
155 |   org: string
156 |   isp: string
157 |   domain: string
158 | }
159 | 
160 | export interface Flag {
161 |   img: string
162 |   emoji: string
163 |   emoji_unicode: string
164 | }
165 | 
166 | export interface Timezone {
167 |   id: string
168 |   abbr: string
169 |   is_dst: boolean
170 |   offset: number
171 |   utc: string
172 |   current_time: Date
173 | }
174 | 


--------------------------------------------------------------------------------
/components/Stats.tsx:
--------------------------------------------------------------------------------
  1 | import { MessageSquare, Target, TrendingUp, Zap } from "lucide-react"
  2 | import React, { useCallback, useEffect, useState } from "react"
  3 | 
  4 | import { useGlobalState } from "~store/GlobalContext"
  5 | import type { TemplateCategory } from "~types"
  6 | 
  7 | type StatCardProps = {
  8 |   label: string
  9 |   value: number
 10 |   icon: React.ReactNode
 11 | }
 12 | 
 13 | function StatCard({ label, value, icon }: StatCardProps) {
 14 |   return (
 15 |     <div className="rounded-lg border border-border p-4 flex items-center gap-3">
 16 |       <div className="flex-shrink-0">{icon}</div>
 17 |       <div className="ml-4">
 18 |         <p className="text-2xl font-bold">{value}</p>
 19 |         <p className="text-sm text-muted-foreground">{label}</p>
 20 |       </div>
 21 |     </div>
 22 |   )
 23 | }
 24 | type Stats = {
 25 |   totalTemplates: number
 26 |   activeTemplates: number
 27 |   categories: number
 28 |   activeCategories: number
 29 | }
 30 | export const Stats = () => {
 31 |   const { templates } = useGlobalState()
 32 |   const provideStats = useCallback(
 33 |     (templates: Record<string, TemplateCategory>) => {
 34 |       let stats: Stats = {
 35 |         totalTemplates: 0,
 36 |         activeTemplates: 0,
 37 |         categories: 0,
 38 |         activeCategories: 0
 39 |       }
 40 |       stats["totalTemplates"] = Object.values(templates).reduce(
 41 |         (acc, category) => acc + category.templates.length,
 42 |         0
 43 |       )
 44 |       stats["activeTemplates"] = Object.values(templates).reduce(
 45 |         (acc, category) =>
 46 |           acc + category.templates.filter((t) => t.active).length,
 47 |         0
 48 |       )
 49 |       stats["categories"] = Object.keys(templates).length
 50 |       stats["activeCategories"] = Object.values(templates).filter(
 51 |         (category) => category.active
 52 |       ).length
 53 | 
 54 |       return stats
 55 |     },
 56 |     [templates]
 57 |   )
 58 | 
 59 |   const statsData = provideStats(templates)
 60 | 
 61 |   return (
 62 |     <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
 63 |       <StatCard
 64 |         label="Total Templates"
 65 |         value={statsData?.totalTemplates || 0}
 66 |         icon={
 67 |           <svg
 68 |             xmlns="http://www.w3.org/2000/svg"
 69 |             width="24"
 70 |             height="24"
 71 |             viewBox="0 0 24 24"
 72 |             fill="none"
 73 |             stroke="currentColor"
 74 |             strokeWidth="2"
 75 |             strokeLinecap="round"
 76 |             strokeLinejoin="round"
 77 |             className="text-blue-500">
 78 |             <path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" />
 79 |           </svg>
 80 |         }
 81 |       />
 82 |       <StatCard
 83 |         label="Active Templates"
 84 |         value={statsData?.activeTemplates || 0}
 85 |         icon={
 86 |           <svg
 87 |             xmlns="http://www.w3.org/2000/svg"
 88 |             width="24"
 89 |             height="24"
 90 |             viewBox="0 0 24 24"
 91 |             fill="none"
 92 |             stroke="currentColor"
 93 |             strokeWidth="2"
 94 |             strokeLinecap="round"
 95 |             strokeLinejoin="round"
 96 |             className="text-green-500">
 97 |             <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
 98 |           </svg>
 99 |         }
100 |       />
101 |       <StatCard
102 |         label="Categories"
103 |         value={statsData?.categories || 0}
104 |         icon={
105 |           <svg
106 |             xmlns="http://www.w3.org/2000/svg"
107 |             width="24"
108 |             height="24"
109 |             viewBox="0 0 24 24"
110 |             fill="none"
111 |             stroke="currentColor"
112 |             strokeWidth="2"
113 |             strokeLinecap="round"
114 |             strokeLinejoin="round"
115 |             className="text-purple-500">
116 |             <circle cx="12" cy="12" r="10" />
117 |             <circle cx="12" cy="12" r="6" />
118 |             <circle cx="12" cy="12" r="2" />
119 |           </svg>
120 |         }
121 |       />
122 |       <StatCard
123 |         label="Active Categories"
124 |         value={statsData?.activeCategories || 0}
125 |         icon={
126 |           <svg
127 |             xmlns="http://www.w3.org/2000/svg"
128 |             width="24"
129 |             height="24"
130 |             viewBox="0 0 24 24"
131 |             fill="none"
132 |             stroke="currentColor"
133 |             strokeWidth="2"
134 |             strokeLinecap="round"
135 |             strokeLinejoin="round"
136 |             className="text-orange-500">
137 |             <path d="M16 7h6v6" />
138 |             <path d="m22 7-8.5 8.5-5-5L2 17" />
139 |           </svg>
140 |         }
141 |       />
142 |     </div>
143 |   )
144 | }
145 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | import { Button } from "@headlessui/react"
  2 | import { Download, Upload } from "lucide-react"
  3 | import React, { useState } from "react"
  4 | 
  5 | import { useGlobalState } from "~store/GlobalContext"
  6 | import type { Template, TemplateCategory } from "~types"
  7 | import { saveToLocalStorage } from "~utils"
  8 | 
  9 | const createSchemas = async () => {
 10 |   const { z } = await import("zod")
 11 | 
 12 |   const contextTypeSchema = z.enum(["feed", "dm", "connection", "post"])
 13 | 
 14 |   const templateSchema = z.object({
 15 |     id: z.string().min(1, "Template id is required"),
 16 |     message: z.string().min(1, "Message cannot be empty"),
 17 |     aiGenerated: z.boolean(),
 18 |     active: z.boolean(),
 19 |     placeholders: z.array(z.string())
 20 |   })
 21 | 
 22 |   const templateCategorySchema = z.object({
 23 |     active: z.boolean(),
 24 |     context: z.array(contextTypeSchema).min(1, "Context array cannot be empty"),
 25 |     icon: z.string().min(1, "Icon is required"),
 26 |     templates: z
 27 |       .array(templateSchema)
 28 |       .min(1, "At least one template is required")
 29 |   })
 30 | 
 31 |   const templatesFileSchema = z.record(z.string(), templateCategorySchema)
 32 | 
 33 |   return { templatesFileSchema }
 34 | }
 35 | 
 36 | export const ImportExportTemplate = () => {
 37 |   const { pushNotification, templates } = useGlobalState()
 38 | 
 39 |   // File upload handler with dynamic import
 40 |   const handleFileUpload = async (
 41 |     event: React.ChangeEvent<HTMLInputElement>
 42 |   ) => {
 43 |     const file = event.target.files[0]
 44 |     if (!file) return
 45 | 
 46 |     const reader = new FileReader()
 47 |     reader.onload = async (e) => {
 48 |       try {
 49 |         const result = e.target.result
 50 |         const uploadedTemplates =
 51 |           typeof result === "string" ? JSON.parse(result) : {}
 52 | 
 53 |         // Dynamically import and create schemas
 54 |         const { templatesFileSchema } = await createSchemas()
 55 | 
 56 |         // Validate structure
 57 |         const validated = templatesFileSchema.safeParse(uploadedTemplates)
 58 | 
 59 |         if (!validated.success && !validated.data) {
 60 |           throw new Error(
 61 |             "Invalid template structure: " + validated.error.message
 62 |           )
 63 |         }
 64 |         // Merge with existing templates
 65 |         const mergedTemplates = { ...templates, ...validated.data }
 66 |         saveToLocalStorage<Record<string, TemplateCategory>>(
 67 |           "templates",
 68 |           mergedTemplates
 69 |         )
 70 |         pushNotification("Templates imported successfully!", "success")
 71 |       } catch (error) {
 72 |         pushNotification(
 73 |           "Error importing templates: Invalid template structure",
 74 |           "error"
 75 |         )
 76 |         console.error("Error importing templates:", error)
 77 |       }
 78 |     }
 79 |     reader.readAsText(file)
 80 |   }
 81 | 
 82 |   const exportTemplates = () => {
 83 |     const templatesFromStorage = localStorage.getItem("templates")
 84 |     if (!templatesFromStorage) {
 85 |       pushNotification("No templates to export", "info")
 86 |       return
 87 |     }
 88 |     const dataStr = JSON.stringify(JSON.parse(templatesFromStorage), null, 2)
 89 |     const dataUri =
 90 |       "data:application/json;charset=utf-8," + encodeURIComponent(dataStr)
 91 | 
 92 |     const exportFileDefaultName = "linkedin-copilot-templates.json"
 93 | 
 94 |     const linkElement = document.createElement("a")
 95 |     linkElement.setAttribute("href", dataUri)
 96 |     linkElement.setAttribute("download", exportFileDefaultName)
 97 |     linkElement.click()
 98 |     linkElement.remove()
 99 |   }
100 | 
101 |   return (
102 |     <div className="rounded-lg border border-border p-6">
103 |       <h2 className="font-medium text-lg">Import / Export Templates</h2>
104 |       <div className="mt-4 flex gap-4">
105 |         <div>
106 |           <input
107 |             type="file"
108 |             accept=".json"
109 |             onChange={handleFileUpload}
110 |             className="hidden"
111 |             id="template-upload"
112 |           />
113 |           <label
114 |             htmlFor="template-upload"
115 |             className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors cursor-pointer">
116 |             <Upload size={16} /> Import Templates
117 |           </label>
118 |         </div>
119 |         <Button
120 |           onClick={exportTemplates}
121 |           className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors cursor-pointer">
122 |           <Download size={16} /> Export Templates
123 |         </Button>
124 |       </div>
125 |       <p className="text-sm text-muted-foreground mt-2">
126 |         Import templates from a JSON file or export your current templates for
127 |         backup.
128 |       </p>
129 |     </div>
130 |   )
131 | }
132 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | ## [v0.0.4] — 1-10-2025
  4 | 
  5 | - Improved region event analytics gathering
  6 |   - Replaced old ipapi with a new and more reliable CORS friendly api
  7 | 
  8 | ## [v0.0.3] — 18-09-2025
  9 | 
 10 | ### Changed
 11 | 
 12 | - Remove HEAD check for GitHub asset availability in the update flow.
 13 |   - The extension now opens the release asset URL directly to avoid CORS failures in the extension environment.
 14 |   - This simplifies update checks and improves reliability for end users.
 15 | 
 16 | ### Added
 17 | 
 18 | - Build status checks in Github actions
 19 |   - This ensures PRs pointed to the `main` branch builds successfully before allowing merge
 20 |   - Keeps workflow clean and free of build errors
 21 | 
 22 | ### Updated
 23 | 
 24 | - Updated system messages for comment creation
 25 | - Increased `max_completion_tokens` for AI generation
 26 | - Reduced `temperature` to `0.2` to increase deterministic tendencies
 27 | 
 28 | ### Fixed
 29 | 
 30 | - Ensure download link normalization: the app now prepends `v` to numeric package.json versions when constructing release URLs (e.g. `0.0.2` -> `v0.0.2`) so direct downloads work consistently.
 31 | - Build/release workflow clarified: releases are produced from tags (`vX.Y.Z`) and uploaded as GitHub Release assets (`linkedin-copilot-vX.Y.Z.zip` + `linkedin-copilot-latest.zip`).
 32 | 
 33 | ### Notes (v0.0.2)
 34 | 
 35 | - Beta / prerelease workflow was removed to keep versioning numeric and Chrome-compatible (manifest version constraints). If you previously had `-beta` tags, those have been cleaned up.
 36 | - To update: the repo uses numeric semantic versions (no `-beta`). Create a numeric tag (e.g. `v0.0.2`) to trigger the release pipeline.
 37 | 
 38 | ## [v0.0.2] - 16-09-2025
 39 | 
 40 | ### Initial Release
 41 | 
 42 | ### ✨ Features
 43 | 
 44 | - **AI-Powered Content Generation**
 45 | 
 46 |   - Smart replies to LinkedIn feed posts with full context awareness
 47 |   - Direct message responses based on chat history or individual messages
 48 |   - Post creation and editing assistance via "Pilot Button" in LinkedIn's compose dialog
 49 |   - All AI responses personalized based on user's professional profile
 50 | 
 51 | - **Template System**
 52 | 
 53 |   - Pre-built response templates organized by categories (Business DMs, etc.)
 54 |   - Support for smart placeholders ({{name}} auto-replacement)
 55 |   - Template management with import/export functionality (JSON format)
 56 |   - Context-aware template suggestions (Feed, DM, Connection, Post)
 57 |   - Individual template activation/deactivation controls
 58 | 
 59 | - **Smart Context Detection**
 60 | 
 61 |   - Automatic detection of LinkedIn feed comments vs direct messages
 62 |   - Post content extraction for relevant AI responses
 63 |   - User information extraction for personalized template placeholders
 64 |   - Real-time DOM monitoring for dynamic LinkedIn content
 65 | 
 66 | - **Enhanced User Experience**
 67 | 
 68 |   - Realistic typing simulation with configurable delays
 69 |   - Streaming AI responses for immediate feedback
 70 |   - Visual processing indicators during AI generation
 71 |   - Clean, integrated UI that matches LinkedIn's design
 72 | 
 73 | - **Settings & Customization**
 74 |   - Groq API integration for free AI processing
 75 |   - User profile configuration (name, title, professional summary)
 76 |   - Typing simulation preferences
 77 |   - Template category management
 78 |   - Light/Dark theme support
 79 | 
 80 | ### 🛠 Technical Implementation
 81 | 
 82 | - **Built with Plasmo Framework** for modern Chrome extension development
 83 | - **React + TypeScript** frontend with Tailwind CSS styling
 84 | - **Chrome Storage API** for local data persistence
 85 | - **Mutation Observers** for real-time LinkedIn content detection
 86 | - **Stream-based AI Processing** for responsive user experience
 87 | - **Analytics Integration** for usage tracking and improvement insights
 88 | 
 89 | ### 🔒 Privacy & Security
 90 | 
 91 | - **Local Data Storage** - all templates and settings stored in browser
 92 | - **No Automated Actions** - extension only drafts content, users retain full control
 93 | - **Context-Only Processing** - LinkedIn content analyzed locally for AI context
 94 | - **User-Controlled Sending** - all messages/posts require manual user approval
 95 | 
 96 | ### 📊 Analytics & Insights
 97 | 
 98 | - Anonymous usage tracking for feature optimization
 99 | - Error reporting for stability improvements
100 | - Template usage statistics
101 | - AI generation success metrics
102 | 
103 | ### 📌 Known Limitations
104 | 
105 | - **Groq API Dependency** - requires user to obtain free Groq API key
106 | - **LinkedIn Layout Changes** - may need updates if LinkedIn modifies their UI structure
107 | - **Template Randomization** - currently uses random selection from active templates (smart selection planned for future)
108 | 
109 | ### 🛠 Future Considerations
110 | 
111 | Planned enhancements based on user feedback and analytics:
112 | 
113 | - **AI-Generated Templates** - automatic template creation based on user behavior
114 | - **Smart Template Selection** - context-aware template recommendations
115 | - **Enhanced Personalization** - deeper LinkedIn profile integration
116 | - **Multi-language Support** - AI responses in different languages
117 | - **Advanced Analytics Dashboard** - detailed usage insights for users
118 | 
119 | ---
120 | 
121 | ### 📝 Installation Notes
122 | 
123 | - Chrome extension requires "Developer mode" for manual installation
124 | - Groq API key setup required (free tier with generous limits)
125 | - User profile completion recommended for optimal AI personalization
126 | 


--------------------------------------------------------------------------------
/store/GlobalContext.tsx:
--------------------------------------------------------------------------------
  1 | import type React from "react"
  2 | import { createContext, useContext, useEffect, useState } from "react"
  3 | 
  4 | import type {
  5 |   GlobalState,
  6 |   Notification,
  7 |   NotificationType,
  8 |   TemplateCategory,
  9 |   Theme,
 10 |   UserDetails,
 11 |   UserSettings
 12 | } from "~types"
 13 | import {
 14 |   loadFromLocalStorage,
 15 |   saveToLocalStorage,
 16 |   STORAGE_CHANGE_EVENT
 17 | } from "~utils"
 18 | 
 19 | const GlobalContext = createContext<GlobalState | undefined>(undefined)
 20 | 
 21 | export const GlobalProvider = ({ children }: { children: React.ReactNode }) => {
 22 |   const [theme, setThemeState] = useState<Theme>("light")
 23 |   const [userSettings, setUserSettings] = useState<UserSettings>({
 24 |     typingDelay: 40,
 25 |     enableTypingSimulation: true
 26 |   })
 27 |   const [userDetails, setUserDetails] = useState<UserDetails>({
 28 |     fullName: "",
 29 |     professionalTitle: "",
 30 |     professionalSummary: ""
 31 |   })
 32 |   const [notifications, setNotifications] = useState<Notification[]>([])
 33 |   const [templates, setTemplates] = useState<Record<string, TemplateCategory>>(
 34 |     {}
 35 |   )
 36 | 
 37 |   useEffect(() => {
 38 |     loadFromLocalStorage<UserSettings>("userSettings").then(
 39 |       (storedUserSettings) => {
 40 |         if (storedUserSettings) setUserSettings(storedUserSettings)
 41 |       }
 42 |     )
 43 |     loadFromLocalStorage<UserDetails>("userDetails").then(
 44 |       (storedUserDetails) => {
 45 |         if (storedUserDetails) setUserDetails(storedUserDetails)
 46 |       }
 47 |     )
 48 |     loadFromLocalStorage<Record<string, TemplateCategory>>("templates").then(
 49 |       (storedTemplates) => {
 50 |         if (storedTemplates) setTemplates(storedTemplates)
 51 |       }
 52 |     )
 53 |     loadFromLocalStorage<Theme>("theme").then((storedTheme) => {
 54 |       if (storedTheme) {
 55 |         applyTheme(storedTheme)
 56 |       } else {
 57 |         const prefersDark = window.matchMedia(
 58 |           "(prefers-color-scheme: dark)"
 59 |         ).matches
 60 |         applyTheme(prefersDark ? "dark" : "light")
 61 |       }
 62 |     })
 63 |   }, [])
 64 | 
 65 |   useEffect(() => {
 66 |     const handleStorageChange = (
 67 |       changes: { [key: string]: chrome.storage.StorageChange },
 68 |       namespace: "sync" | "local" | "managed" | "session"
 69 |     ) => {
 70 |       if (namespace === "local") {
 71 |         if (changes["templates"]) {
 72 |           const updatedTemplates = JSON.parse(
 73 |             changes["templates"].newValue || "{}"
 74 |           ) as Record<string, TemplateCategory>
 75 |           setTemplates(updatedTemplates)
 76 |         }
 77 |         if (changes["userSettings"]) {
 78 |           const newUserSettings = JSON.parse(
 79 |             changes["userSettings"].newValue || "{}"
 80 |           ) as UserSettings
 81 |           setUserSettings(newUserSettings)
 82 |         }
 83 |         if (changes["userDetails"]) {
 84 |           const newUserDetails = JSON.parse(
 85 |             changes["userDetails"].newValue || "{}"
 86 |           ) as UserDetails
 87 |           setUserDetails(newUserDetails)
 88 |         }
 89 |       }
 90 |     }
 91 | 
 92 |     // Handle custom events
 93 |     const handleCustomStorageChange = (event: CustomEvent) => {
 94 |       if (event.detail.key === "templates") {
 95 |         const updatedTemplates = JSON.parse(
 96 |           event.detail.newValue || "{}"
 97 |         ) as Record<string, TemplateCategory>
 98 |         setTemplates(updatedTemplates)
 99 |       }
100 |       if (event.detail.key === "theme") {
101 |         // const newTheme = event.detail.newValue as Theme
102 |         // applyTheme(newTheme)
103 |       }
104 |       if (event.detail.key === "userSettings") {
105 |         const newUserSettings = JSON.parse(
106 |           event.detail.newValue || "{}"
107 |         ) as UserSettings
108 |         setUserSettings(newUserSettings)
109 |       }
110 |       if (event.detail.key === "userDetails") {
111 |         const newUserDetails = JSON.parse(
112 |           event.detail.newValue || "{}"
113 |         ) as UserDetails
114 |         setUserDetails(newUserDetails)
115 |       }
116 |     }
117 | 
118 |     chrome.storage.onChanged.addListener(handleStorageChange)
119 | 
120 |     window.addEventListener(
121 |       STORAGE_CHANGE_EVENT,
122 |       handleCustomStorageChange as EventListener
123 |     )
124 | 
125 |     return () => {
126 |       chrome.storage.onChanged.removeListener(handleStorageChange)
127 |       window.removeEventListener(
128 |         STORAGE_CHANGE_EVENT,
129 |         handleCustomStorageChange as EventListener
130 |       )
131 |     }
132 |   }, [])
133 | 
134 |   const applyTheme = (newTheme: Theme) => {
135 |     setThemeState(newTheme)
136 |     document.documentElement.classList.toggle("dark", newTheme === "dark")
137 |     saveToLocalStorage<string>("theme", newTheme)
138 |   }
139 | 
140 |   const pushNotification = (
141 |     message: string,
142 |     type: NotificationType = "info"
143 |   ) => {
144 |     const id = crypto.randomUUID()
145 |     setNotifications((prev) => [...prev, { id, message, type }])
146 |     setTimeout(() => removeNotification(id), 4000)
147 |   }
148 | 
149 |   const removeNotification = (id: string) => {
150 |     setNotifications((prev) => prev.filter((n) => n.id !== id))
151 |   }
152 | 
153 |   const setTheme = (newTheme: Theme) => applyTheme(newTheme)
154 | 
155 |   return (
156 |     <GlobalContext.Provider
157 |       value={{
158 |         theme,
159 |         setTheme,
160 |         notifications,
161 |         pushNotification,
162 |         removeNotification,
163 |         templates,
164 |         userSettings,
165 |         userDetails
166 |       }}>
167 |       {children}
168 |     </GlobalContext.Provider>
169 |   )
170 | }
171 | 
172 | export const useGlobalState = (): GlobalState => {
173 |   const context = useContext(GlobalContext)
174 |   if (!context) {
175 |     throw new Error("useGlobalState must be used within a Provider")
176 |   }
177 |   return context
178 | }
179 | 


--------------------------------------------------------------------------------
/styles.ts:
--------------------------------------------------------------------------------
  1 | export const linkedInCopilotStyles = `
  2 |       .copilot-capsule-container {
  3 |           display: flex;
  4 |           align-items: center;
  5 |           gap: 10px;
  6 |           overflow: scroll;
  7 |           padding: 15px 5px;
  8 |           font-size: 12px;
  9 |       }
 10 |       
 11 |       .copilot-capsule {
 12 |         padding: 12px 16px;
 13 |         border-radius: 30px;
 14 |         cursor: pointer;
 15 |         border: 1px solid currentColor;
 16 |         transition: background-color 0.2s ease;
 17 |         white-space: nowrap;
 18 |       }
 19 |         .copilot-capsule-ai {
 20 |           background: linear-gradient(163deg, #3c52d0 0%, #544067 100%);
 21 |           border: none;
 22 |           color: #fff;
 23 | 
 24 |         }
 25 |       
 26 |       .copilot-dropdown-option:first-child:hover {
 27 |         background: linear-gradient(135deg, #f0f2ff 0%, #e8ebff 100%);
 28 |       }
 29 |       
 30 |       .linkedin-auto-reply-notification {
 31 |         position: fixed;
 32 |         top: 20px;
 33 |         right: 20px;
 34 |         padding: 12px 20px;
 35 |         border-radius: 8px;
 36 |         color: white;
 37 |         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
 38 |         font-size: 14px;
 39 |         font-weight: 500;
 40 |         z-index: 10000;
 41 |         transform: translateX(100%);
 42 |         transition: transform 0.3s ease;
 43 |         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 44 |       }
 45 |       
 46 |       .linkedin-auto-reply-notification.show {
 47 |         transform: translateX(0);
 48 |       }
 49 |       
 50 |       .linkedin-auto-reply-notification.info {
 51 |         background-color: #0073b1;
 52 |       }
 53 |       
 54 |       .linkedin-auto-reply-notification.success {
 55 |         background-color: #057642;
 56 |       }
 57 |       
 58 |       .linkedin-auto-reply-notification.warning {
 59 |         background-color: #f5a623;
 60 |       }
 61 |       
 62 |       .linkedin-auto-reply-notification.error {
 63 |         background-color: #d93025;
 64 |       }
 65 | 
 66 |       .aiDirectDmReplyButton {
 67 |         margin: 5px 5px 0px auto;
 68 |         padding: 12px 16px;
 69 |         cursor: pointer;
 70 |         transition: background-color 0.2s ease;
 71 |         white-space: nowrap;
 72 |         color: #fff;
 73 |         width: fit-content;
 74 |         border-radius: 11px;
 75 |         font-size: 12px;
 76 |         background: linear-gradient(163deg, #3c52d0 0%, #544067 100%);
 77 |       }
 78 | 
 79 |       /* AI Processing Animation */
 80 |       .ai-processing {
 81 |         position: relative;
 82 |         overflow: hidden;
 83 |       }
 84 | 
 85 |       .ai-processing::before {
 86 |         content: '';
 87 |         position: absolute;
 88 |         top: -2px;
 89 |         left: -2px;
 90 |         right: -2px;
 91 |         bottom: -2px;
 92 |         background: conic-gradient(
 93 |           from 0deg,
 94 |           #6366f1,
 95 |           #8b5cf6,
 96 |           #ec4899,
 97 |           #f59e0b,
 98 |           #10b981,
 99 |           #06b6d4,
100 |           #6366f1
101 |         );
102 |         border-radius: inherit;
103 |         animation: ai-rotate 2s linear infinite;
104 |         z-index: -1;
105 |       }
106 | 
107 |       .ai-processing::after {
108 |         content: '';
109 |         position: absolute;
110 |         top: 0;
111 |         left: 0;
112 |         right: 0;
113 |         bottom: 0;
114 |         background: inherit;
115 |         border-radius: inherit;
116 |         z-index: -1;
117 |       }
118 | 
119 |       /* Pulsing glow effect */
120 |       .ai-processing {
121 |         animation: ai-pulse 1.5s ease-in-out infinite alternate;
122 |         box-shadow: 
123 |           0 0 20px rgba(99, 102, 241, 0.3),
124 |           0 0 40px rgba(139, 92, 246, 0.2),
125 |           0 0 60px rgba(236, 72, 153, 0.1);
126 |       }
127 | 
128 |       @keyframes ai-rotate {
129 |         0% {
130 |           transform: rotate(0deg);
131 |         }
132 |         100% {
133 |           transform: rotate(360deg);
134 |         }
135 |       }
136 | 
137 |       @keyframes ai-pulse {
138 |         0% {
139 |           box-shadow: 
140 |             0 0 20px rgba(99, 102, 241, 0.3),
141 |             0 0 40px rgba(139, 92, 246, 0.2),
142 |             0 0 60px rgba(236, 72, 153, 0.1);
143 |         }
144 |         100% {
145 |           box-shadow: 
146 |             0 0 30px rgba(99, 102, 241, 0.5),
147 |             0 0 60px rgba(139, 92, 246, 0.3),
148 |             0 0 80px rgba(236, 72, 153, 0.2);
149 |         }
150 |       }
151 | 
152 |       /* Subtle inner glow for text elements */
153 |       // .ai-processing input,
154 |       // .ai-processing textarea,
155 |       // .ai-processing [contenteditable] {
156 |       //   background: linear-gradient(45deg, 
157 |       //     rgba(99, 102, 241, 0.05), 
158 |       //     rgba(139, 92, 246, 0.05),
159 |       //     rgba(236, 72, 153, 0.05)
160 |       //   );
161 |       // }
162 | 
163 |       /* Optional: Add shimmer effect for extra flair */
164 |       .ai-processing-shimmer::before {
165 |         background: linear-gradient(
166 |           90deg,
167 |           transparent 0%,
168 |           rgba(255, 255, 255, 0.4) 50%,
169 |           transparent 100%
170 |         );
171 |         animation: ai-shimmer 2s ease-in-out infinite;
172 |       }
173 | 
174 |       @keyframes ai-shimmer {
175 |         0% {
176 |           transform: translateX(-100%);
177 |         }
178 |         100% {
179 |           transform: translateX(100%);
180 |         }
181 |       }
182 | 
183 |         .writeWithAiTip {
184 |         background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%);
185 |         -webkit-background-clip: text;
186 |         -webkit-text-fill-color: transparent;
187 |         display: inline-flex;
188 |         gap: 4px;
189 |         align-items: center;
190 |         margin: 0 0 15px;
191 |       }
192 |       .writeWithAiButton {
193 |         border: 1px solid #667eea;
194 |         border-radius: 10px;
195 |         padding: 5px 10px;
196 |         font-size: 14px;
197 |         font-weight: 500;
198 |         cursor: pointer;
199 |         white-space: nowrap;
200 |         }
201 |     `
202 | 


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
  1 | export const STORAGE_CHANGE_EVENT = "customStorageChange"
  2 | export const ENCRYPTION_KEY_NAME = "linkedin-copilot-key" // For storing the encryption key
  3 | export const ENCRYPTED_API_KEY_NAME = "encrypted-groq-api-key" // For storing the encrypted API key
  4 | const dispatchStorageEvent = (key: string, newValue: string | null) => {
  5 |   window.dispatchEvent(
  6 |     new CustomEvent(STORAGE_CHANGE_EVENT, {
  7 |       detail: { key, newValue }
  8 |     })
  9 |   )
 10 | }
 11 | 
 12 | export const loadFromLocalStorage = async <T>(
 13 |   key: string,
 14 |   validator?: (data: unknown) => data is T
 15 | ): Promise<T> | null => {
 16 |   try {
 17 |     const storedValue = await chrome.storage.local.get(key)
 18 | 
 19 |     if (Object.keys(storedValue).length === 0) {
 20 |       return null
 21 |     }
 22 | 
 23 |     let parsedValue: unknown
 24 |     try {
 25 |       parsedValue = JSON.parse(storedValue[key])
 26 |     } catch {
 27 |       parsedValue = storedValue
 28 |     }
 29 | 
 30 |     if (validator && !validator(parsedValue)) {
 31 |       console.warn(`Invalid data structure for key "${key}"`)
 32 |       return null
 33 |     }
 34 | 
 35 |     return parsedValue as T
 36 |   } catch (error) {
 37 |     console.error("Error loading from storage:", error)
 38 |     return null
 39 |   }
 40 | }
 41 | 
 42 | export const saveToLocalStorage = async <T>(
 43 |   key: string,
 44 |   value: T,
 45 |   announce: boolean = false
 46 | ): Promise<boolean> => {
 47 |   try {
 48 |     const serializedValue = JSON.stringify(value)
 49 | 
 50 |     await chrome.storage.local.set({ [key]: serializedValue })
 51 |     if (announce) {
 52 |       dispatchStorageEvent(key, serializedValue)
 53 |     }
 54 |     return true
 55 |   } catch (error) {
 56 |     console.error("Error saving to storage:", error)
 57 |     return false
 58 |   }
 59 | }
 60 | export const removeFromLocalStorage = async (key: string) => {
 61 |   try {
 62 |     await chrome.storage.local.remove(key)
 63 |   } catch (error) {
 64 |     console.error("Error removing from storage:", error)
 65 |   }
 66 | }
 67 | export const clearLocalStorage = async () => {
 68 |   try {
 69 |     await chrome.storage.local.clear()
 70 |   } catch (error) {
 71 |     console.error("Error clearing storage:", error)
 72 |   }
 73 | }
 74 | 
 75 | function bufferToBase64(buffer: Uint8Array): string {
 76 |   return btoa(String.fromCharCode(...buffer))
 77 | }
 78 | 
 79 | function base64ToBuffer(base64: string): Uint8Array {
 80 |   const binary = atob(base64)
 81 |   return new Uint8Array([...binary].map((char) => char.charCodeAt(0)))
 82 | }
 83 | 
 84 | export async function getOrCreateKey(): Promise<CryptoKey> {
 85 |   const stored = await chrome.storage.local.get(ENCRYPTION_KEY_NAME)
 86 | 
 87 |   if (stored[ENCRYPTION_KEY_NAME]) {
 88 |     try {
 89 |       const rawKey = base64ToBuffer(stored[ENCRYPTION_KEY_NAME])
 90 |       return await crypto.subtle.importKey("raw", rawKey, "AES-GCM", false, [
 91 |         "encrypt",
 92 |         "decrypt"
 93 |       ])
 94 |     } catch (error) {
 95 |       console.warn("Failed to import stored key, creating new one:", error)
 96 |       // Clear corrupted key and create new one
 97 |       await chrome.storage.local.remove(ENCRYPTION_KEY_NAME)
 98 |     }
 99 |   }
100 | 
101 |   // Create new key
102 |   const raw = crypto.getRandomValues(new Uint8Array(32)) // 256-bit
103 |   await chrome.storage.local.set({
104 |     [ENCRYPTION_KEY_NAME]: bufferToBase64(raw)
105 |   })
106 | 
107 |   return await crypto.subtle.importKey("raw", raw, "AES-GCM", false, [
108 |     "encrypt",
109 |     "decrypt"
110 |   ])
111 | }
112 | 
113 | export async function encryptApiKey(apiKey: string): Promise<string> {
114 |   try {
115 |     const key = await getOrCreateKey()
116 |     const iv = crypto.getRandomValues(new Uint8Array(12))
117 |     const encoded = new TextEncoder().encode(apiKey)
118 | 
119 |     const encrypted = await crypto.subtle.encrypt(
120 |       { name: "AES-GCM", iv },
121 |       key,
122 |       encoded
123 |     )
124 | 
125 |     const result = {
126 |       iv: bufferToBase64(iv),
127 |       data: bufferToBase64(new Uint8Array(encrypted))
128 |     }
129 | 
130 |     return JSON.stringify(result)
131 |   } catch (error) {
132 |     console.error("Encryption failed:", error)
133 |     throw new Error("Failed to encrypt API key")
134 |   }
135 | }
136 | 
137 | export async function decryptApiKey(cipherText: string): Promise<string> {
138 |   try {
139 |     const key = await getOrCreateKey()
140 | 
141 |     // Add more detailed logging
142 |     // console.log("Cipher text received:", cipherText)
143 | 
144 |     const payload = JSON.parse(cipherText)
145 |     // console.log("Parsed payload:", payload)
146 | 
147 |     // Validate payload structure
148 |     if (!payload.iv || !payload.data) {
149 |       throw new Error("Invalid cipher text format - missing iv or data")
150 |     }
151 | 
152 |     const iv = base64ToBuffer(payload.iv)
153 |     const data = base64ToBuffer(payload.data)
154 | 
155 |     const decrypted = await crypto.subtle.decrypt(
156 |       { name: "AES-GCM", iv },
157 |       key,
158 |       data
159 |     )
160 | 
161 |     const result = new TextDecoder().decode(decrypted)
162 |     // console.log("Decryption successful, API key length:", result.length)
163 |     return result
164 |   } catch (error) {
165 |     console.error("Decryption failed:", error)
166 |     console.error("Error details:", error.message)
167 |     console.error("Stack trace:", error.stack)
168 | 
169 |     // If decryption fails, it might be a key mismatch - clear and retry once
170 |     if (
171 |       error.message.includes("decrypt") ||
172 |       error.message.includes("OperationError")
173 |     ) {
174 |       console.warn("Clearing encryption key due to decrypt failure")
175 |       await chrome.storage.local.remove(ENCRYPTION_KEY_NAME)
176 |     }
177 | 
178 |     throw new Error(`Failed to decrypt API key: ${error.message}`)
179 |   }
180 | }
181 | 
182 | // Helper function to save encrypted API key
183 | export async function saveEncryptedApiKey(apiKey: string): Promise<void> {
184 |   try {
185 |     const encryptedKey = await encryptApiKey(apiKey)
186 |     await chrome.storage.local.set({
187 |       [ENCRYPTED_API_KEY_NAME]: encryptedKey
188 |     })
189 |   } catch (error) {
190 |     console.error("Failed to save encrypted API key:", error)
191 |     throw error
192 |   }
193 | }
194 | 
195 | // Helper function to get decrypted API key
196 | export async function getDecryptedApiKey(): Promise<string | null> {
197 |   try {
198 |     const stored = await chrome.storage.local.get(ENCRYPTED_API_KEY_NAME)
199 |     if (!stored[ENCRYPTED_API_KEY_NAME]) {
200 |       return null
201 |     }
202 | 
203 |     return await decryptApiKey(stored[ENCRYPTED_API_KEY_NAME])
204 |   } catch (error) {
205 |     console.error("Failed to get decrypted API key:", error)
206 |     return null
207 |   }
208 | }
209 | 
210 | // Debug function to check storage contents
211 | export async function debugStorage(): Promise<void> {
212 |   const allStorage = await chrome.storage.local.get(null)
213 |   console.log("All storage contents:", allStorage)
214 |   console.log("Encryption key exists:", !!allStorage[ENCRYPTION_KEY_NAME])
215 |   console.log("Encrypted API key exists:", !!allStorage[ENCRYPTED_API_KEY_NAME])
216 | }
217 | 


--------------------------------------------------------------------------------
/components/FeedbackModal.tsx:
--------------------------------------------------------------------------------
  1 | import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react"
  2 | import { useState } from "react"
  3 | 
  4 | interface FeedbackProps {
  5 |   isOpen: boolean
  6 |   onClose: () => void
  7 | }
  8 | 
  9 | type FeedbackType = "bug" | "feature" | "general"
 10 | 
 11 | const FeedbackModal: React.FC<FeedbackProps> = ({ isOpen, onClose }) => {
 12 |   const [feedbackType, setFeedbackType] = useState<FeedbackType>("general")
 13 |   const [message, setMessage] = useState("")
 14 |   const [email, setEmail] = useState("")
 15 |   const [isSubmitting, setIsSubmitting] = useState(false)
 16 |   const [submitted, setSubmitted] = useState(false)
 17 | 
 18 |   const submitFeedback = async (feedbackData: {
 19 |     type: string
 20 |     message: string
 21 |     email?: string
 22 |   }) => {
 23 |     const timestamp = new Date().toISOString()
 24 |     setIsSubmitting(true)
 25 |     const response = await fetch(
 26 |       `https://firestore.googleapis.com/v1/projects/${process.env.PLASMO_PUBLIC_FIREBASE_PROJECT_ID}/databases/(default)/documents/${feedbackData.type}?documentId=${encodeURIComponent(timestamp)}&key=${process.env.PLASMO_PUBLIC_FIREBASE_API_KEY}`,
 27 |       {
 28 |         method: "POST",
 29 |         headers: {
 30 |           "Content-Type": "application/json"
 31 |         },
 32 |         body: JSON.stringify({
 33 |           fields: {
 34 |             type: { stringValue: feedbackData.type },
 35 |             message: { stringValue: feedbackData.message },
 36 |             email: { stringValue: feedbackData.email || "" },
 37 |             timestamp: { timestampValue: new Date().toISOString() },
 38 |             version: { stringValue: chrome.runtime.getManifest().version }
 39 |           }
 40 |         })
 41 |       }
 42 |     )
 43 |     setIsSubmitting(false)
 44 |     return response.json()
 45 |   }
 46 | 
 47 |   if (submitted) {
 48 |     return (
 49 |       <Dialog
 50 |         open={isOpen}
 51 |         onClose={() => {
 52 |           setSubmitted(false)
 53 |           onClose()
 54 |         }}
 55 |         className="relative z-50">
 56 |         <div className="fixed inset-0 bg-background/80 backdrop-blur-sm" />
 57 |         <div className="fixed inset-0 flex items-center justify-center p-4">
 58 |           <DialogPanel className="mx-auto max-w-sm rounded-lg bg-card border p-6 shadow-lg">
 59 |             <div className="text-center">
 60 |               <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-brand-green/10 flex items-center justify-center">
 61 |                 <svg
 62 |                   className="h-6 w-6 text-brand-green"
 63 |                   fill="none"
 64 |                   viewBox="0 0 24 24"
 65 |                   stroke="currentColor">
 66 |                   <path
 67 |                     strokeLinecap="round"
 68 |                     strokeLinejoin="round"
 69 |                     strokeWidth={2}
 70 |                     d="M5 13l4 4L19 7"
 71 |                   />
 72 |                 </svg>
 73 |               </div>
 74 |               <h3 className="text-lg font-semibold text-foreground mb-2">
 75 |                 Thank you!
 76 |               </h3>
 77 |               <p className="text-muted-foreground text-sm">
 78 |                 Your feedback has been sent. We appreciate you helping us
 79 |                 improve LinkedIn Copilot.
 80 |               </p>
 81 |             </div>
 82 |           </DialogPanel>
 83 |         </div>
 84 |       </Dialog>
 85 |     )
 86 |   }
 87 | 
 88 |   return (
 89 |     <Dialog open={isOpen} onClose={onClose} className="relative z-50">
 90 |       <div className="fixed inset-0 bg-background/80 backdrop-blur-sm" />
 91 |       <div className="fixed inset-0 flex items-center justify-center p-4">
 92 |         <DialogPanel className="mx-auto max-w-md w-full rounded-lg bg-card border p-6 shadow-lg">
 93 |           <DialogTitle className="text-lg font-semibold text-foreground mb-4">
 94 |             Send Feedback
 95 |           </DialogTitle>
 96 | 
 97 |           <form
 98 |             onSubmit={(e) => {
 99 |               e.preventDefault()
100 |               submitFeedback({
101 |                 type: feedbackType,
102 |                 message: message,
103 |                 email: email
104 |               }).then(() => {
105 |                 setSubmitted(true)
106 |               })
107 |             }}
108 |             className="space-y-4">
109 |             <div>
110 |               <label className="block text-sm font-medium text-foreground mb-2">
111 |                 Feedback Type
112 |               </label>
113 |               <select
114 |                 value={feedbackType}
115 |                 onChange={async (e) =>
116 |                   setFeedbackType(e.target.value as FeedbackType)
117 |                 }
118 |                 className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
119 |                 <option value="general">General Feedback</option>
120 |                 <option value="bug">Bug Report</option>
121 |                 <option value="feature">Feature Request</option>
122 |               </select>
123 |             </div>
124 | 
125 |             <div>
126 |               <label className="block text-sm font-medium text-foreground mb-2">
127 |                 Message <span className="text-destructive">*</span>
128 |               </label>
129 |               <textarea
130 |                 value={message}
131 |                 onChange={(e) => setMessage(e.target.value)}
132 |                 required
133 |                 rows={4}
134 |                 placeholder="Tell us about your experience, report a bug, or suggest a feature..."
135 |                 className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
136 |               />
137 |             </div>
138 | 
139 |             <div>
140 |               <label className="block text-sm font-medium text-foreground mb-2">
141 |                 Email (optional)
142 |               </label>
143 |               <input
144 |                 type="email"
145 |                 value={email}
146 |                 onChange={(e) => setEmail(e.target.value)}
147 |                 placeholder="your@email.com"
148 |                 className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
149 |               />
150 |               <p className="text-xs text-muted-foreground mt-1">
151 |                 Optional. We'll only use this to follow up on your feedback.
152 |               </p>
153 |             </div>
154 | 
155 |             <div className="flex justify-end space-x-3 pt-4">
156 |               <button
157 |                 type="button"
158 |                 onClick={onClose}
159 |                 className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring rounded-md">
160 |                 Cancel
161 |               </button>
162 |               <button
163 |                 type="submit"
164 |                 disabled={isSubmitting || !message.trim()}
165 |                 className="px-4 py-2 text-sm font-medium bg-brand-blue text-white rounded-md hover:bg-brand-blue/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 disabled:cursor-not-allowed">
166 |                 {isSubmitting ? "Sending..." : "Send Feedback"}
167 |               </button>
168 |             </div>
169 |           </form>
170 | 
171 |           <div className="mt-4 pt-4 border-t">
172 |             <p className="text-xs text-muted-foreground">
173 |               You can also{" "}
174 |               <a
175 |                 href="https://github.com/emmaccen/linkedin-copilot/issues"
176 |                 target="_blank"
177 |                 rel="noopener noreferrer"
178 |                 className="text-brand-blue hover:underline">
179 |                 report issues directly on GitHub
180 |               </a>
181 |             </p>
182 |           </div>
183 |         </DialogPanel>
184 |       </div>
185 |     </Dialog>
186 |   )
187 | }
188 | 
189 | export default FeedbackModal
190 | 


--------------------------------------------------------------------------------
/lib/analytics.ts:
--------------------------------------------------------------------------------
  1 | import type { GAUserInfo, LocationInfoType } from "~types"
  2 | 
  3 | const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect"
  4 | const GA_DEBUG_ENDPOINT = "https://www.google-analytics.com/debug/mp/collect"
  5 | 
  6 | const analyticsConfig = {
  7 |   apiSecrete: process.env.PLASMO_PUBLIC_ANALYTICS_API_SECRETE,
  8 |   measurementId: process.env.PLASMO_PUBLIC_ANALYTICS_MEASUREMENT_ID
  9 | }
 10 | 
 11 | // Get via https://developers.google.com/analytics/devguides/collection/protocol/ga4/sending-events?client_type=gtag#recommended_parameters_for_reports
 12 | const MEASUREMENT_ID = analyticsConfig.measurementId
 13 | const API_SECRET = analyticsConfig.apiSecrete
 14 | const DEFAULT_ENGAGEMENT_TIME_MSEC = 1200
 15 | 
 16 | // Duration of inactivity after which a new session is created
 17 | const SESSION_EXPIRATION_IN_MIN = 30
 18 | 
 19 | export class Analytics {
 20 |   debug: boolean
 21 |   constructor(debug = false) {
 22 |     this.debug = debug
 23 |   }
 24 | 
 25 |   // Returns the client id, or creates a new one if one doesn't exist.
 26 |   // Stores client id in local storage to keep the same client id as long as
 27 |   // the extension is installed.
 28 |   async getOrCreateClientId() {
 29 |     let { clientId } = await chrome.storage.local.get("clientId")
 30 |     if (!clientId) {
 31 |       // Generate a unique client ID, the actual value is not relevant
 32 |       clientId = self.crypto.randomUUID()
 33 |       await chrome.storage.local.set({ clientId })
 34 |     }
 35 |     return clientId
 36 |   }
 37 | 
 38 |   // Returns the current session id, or creates a new one if one doesn't exist or
 39 |   // the previous one has expired.
 40 |   // --- getOrCreateSessionId (store numeric session_id & timestamp) ---
 41 |   async getOrCreateSessionId() {
 42 |     let { sessionData } = await chrome.storage.local.get("sessionData")
 43 |     const now = Date.now()
 44 | 
 45 |     if (sessionData && sessionData.timestamp) {
 46 |       const durationInMin = (now - sessionData.timestamp) / 60000
 47 |       if (durationInMin > SESSION_EXPIRATION_IN_MIN) {
 48 |         sessionData = null
 49 |       } else {
 50 |         // keep session alive (use numbers)
 51 |         sessionData.timestamp = now
 52 |         await chrome.storage.local.set({ sessionData })
 53 |       }
 54 |     }
 55 | 
 56 |     if (!sessionData) {
 57 |       sessionData = {
 58 |         // use number (not string). GA expects digits for session_id.
 59 |         session_id: now,
 60 |         timestamp: now
 61 |       }
 62 |       await chrome.storage.local.set({ sessionData })
 63 |     }
 64 | 
 65 |     return sessionData.session_id
 66 |   }
 67 | 
 68 |   // Get location info (cached for performance and rate limiting)
 69 |   async getLocationInfo(): Promise<Record<string, any>> {
 70 |     try {
 71 |       const cached = await chrome.storage.local.get(["location_cache"])
 72 |       if (
 73 |         cached.location_cache &&
 74 |         Date.now() - cached.location_cache.timestamp < 86400000
 75 |       ) {
 76 |         // 24 hours
 77 |         return cached.location_cache.data
 78 |       }
 79 | 
 80 |       const response = await fetch("https://ipwho.is/")
 81 |       const locationData: LocationInfoType = await response.json()
 82 | 
 83 |       const locationInfo = {
 84 |         country: locationData.country,
 85 |         country_code: locationData.country_code,
 86 |         region: locationData.region,
 87 |         city: locationData.city,
 88 |         timezone: locationData.timezone.id,
 89 |         ...locationData
 90 |       }
 91 | 
 92 |       await chrome.storage.local.set({
 93 |         location_cache: {
 94 |           data: locationInfo,
 95 |           timestamp: Date.now()
 96 |         }
 97 |       })
 98 | 
 99 |       return locationInfo
100 |     } catch (error) {
101 |       console.error("Failed to get location:", error)
102 |       return {
103 |         country: "Unknown",
104 |         country_code: "XX",
105 |         region: "Unknown",
106 |         city: "Unknown",
107 |         timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
108 |       }
109 |     }
110 |   }
111 | 
112 |   // Get basic user info that Firebase would normally collect
113 |   async getUserInfo(): Promise<GAUserInfo> {
114 |     const locationInfo: Partial<LocationInfoType> = await this.getLocationInfo()
115 |     return {
116 |       user_agent: navigator.userAgent,
117 |       language: navigator.language,
118 |       timezone: locationInfo.timezone.id,
119 |       country: locationInfo.country,
120 |       country_code: locationInfo.country_code,
121 |       region: locationInfo.region,
122 |       city: locationInfo.city,
123 |       timestamp: Date.now(),
124 |       region_code: locationInfo.region_code
125 |     }
126 |   }
127 | 
128 |   // Fires an event with optional params. Event names must only include letters and underscores.
129 |   async fireEvent(name: string, params: Record<string, any> = {}) {
130 |     try {
131 |       const sessionId = await this.getOrCreateSessionId()
132 |       const clientId = await this.getOrCreateClientId()
133 |       const userInfo = await this.getUserInfo()
134 | 
135 |       const eventParams: {
136 |         session_id: number
137 |         engagement_time_msec: number
138 |         debug_mode?: number
139 |       } = {
140 |         ...params,
141 |         session_id: Number(params.session_id ?? sessionId), // numeric
142 |         engagement_time_msec: Number(
143 |           params.engagement_time_msec ?? DEFAULT_ENGAGEMENT_TIME_MSEC
144 |         )
145 |       }
146 | 
147 |       const user_properties = {
148 |         country: { value: userInfo.country ?? "Unknown" },
149 |         country_code: { value: userInfo.country_code ?? "XX" },
150 |         region: { value: userInfo.region ?? "Unknown" },
151 |         city: { value: userInfo.city ?? "Unknown" },
152 |         timezone: {
153 |           value:
154 |             userInfo.timezone ??
155 |             Intl.DateTimeFormat().resolvedOptions().timeZone
156 |         },
157 |         language: { value: userInfo.language ?? navigator.language }
158 |       }
159 | 
160 |       const user_location = {
161 |         country_id: userInfo.country_code ?? undefined, // ISO 3166-1 alpha-2
162 |         city: userInfo.city ?? undefined,
163 |         // region_id expects ISO-3166-2 (e.g. "US-CA")
164 |         region_id: `${userInfo.country_code}-${userInfo.region_code}`
165 |       }
166 | 
167 |       // If you want DebugView visibility, add debug_mode to event params (value can be 1/true)
168 |       if (this.debug) {
169 |         eventParams.debug_mode = 1
170 |       }
171 | 
172 |       const payload = {
173 |         client_id: clientId,
174 |         user_properties,
175 |         // optional geo override:
176 |         user_location,
177 |         events: [
178 |           {
179 |             name,
180 |             params: eventParams
181 |           }
182 |         ]
183 |       }
184 | 
185 |       const url = `${this.debug ? GA_DEBUG_ENDPOINT : GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`
186 | 
187 |       const response = await fetch(url, {
188 |         method: "POST",
189 |         body: JSON.stringify(payload)
190 |       })
191 | 
192 |       // Debug endpoint returns JSON with validationMessages
193 |       if (this.debug) {
194 |         const text = await response.text()
195 |         try {
196 |           console.log("Validation response:", JSON.parse(text))
197 |         } catch {
198 |           console.log("Validation response (raw):", text)
199 |         }
200 |       } else {
201 |         // mp/collect normally returns 204 on success
202 |         console.log("MP response status:", response.status)
203 |       }
204 | 
205 |       return response
206 |     } catch (error) {
207 |       console.error("Error in fireEvent:", error)
208 |     }
209 |   }
210 | 
211 |   // Fire a page view event.
212 |   async firePageViewEvent(pageTitle, pageLocation, additionalParams = {}) {
213 |     return this.fireEvent("page_view", {
214 |       page_title: pageTitle,
215 |       page_location: pageLocation,
216 |       ...additionalParams
217 |     })
218 |   }
219 | 
220 |   // Fire an error event.
221 |   async fireErrorEvent(error, additionalParams = {}) {
222 |     // Note: 'error' is a reserved event name and cannot be used
223 |     // see https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?client_type=gtag#reserved_names
224 |     return this.fireEvent("extension_error", {
225 |       ...error,
226 |       ...additionalParams
227 |     })
228 |   }
229 | }
230 | 
231 | export default new Analytics()
232 | 


--------------------------------------------------------------------------------
/contents/LinkedInMessageExtractor.ts:
--------------------------------------------------------------------------------
  1 | import type { PlasmoCSConfig } from "plasmo"
  2 | 
  3 | import type { AiDMChatContext, AiDMChatMessage } from "~types"
  4 | 
  5 | export const config: PlasmoCSConfig = {
  6 |   matches: ["https://*.linkedin.com/*"],
  7 |   all_frames: false
  8 | }
  9 | 
 10 | class LinkedInMessageExtractor {
 11 |   private readonly MAX_TOTAL_CHARS = 3000
 12 |   private readonly MIN_MESSAGES = 3
 13 |   private readonly MAX_MESSAGES = 10
 14 |   private readonly MAX_SINGLE_MESSAGE_CHARS = 500
 15 | 
 16 |   /**
 17 |    * Extracts chat messages with smart limiting
 18 |    */
 19 |   public extractChatContext(): AiDMChatContext {
 20 |     const messageElements = this.getMessageElements()
 21 |     const messages: AiDMChatMessage[] = []
 22 |     let totalChars = 0
 23 |     let truncated = false
 24 | 
 25 |     // Process messages from newest to oldest (reverse order)
 26 |     const reversedElements = Array.from(messageElements).reverse()
 27 | 
 28 |     for (let i = 0; i < reversedElements.length && i < this.MAX_MESSAGES; i++) {
 29 |       const element = reversedElements[i]
 30 |       const message = this.extractMessageFromElement(element)
 31 | 
 32 |       if (!message) continue
 33 | 
 34 |       // Truncate individual message if too long
 35 |       if (message.text.length > this.MAX_SINGLE_MESSAGE_CHARS) {
 36 |         message.text =
 37 |           message.text.substring(0, this.MAX_SINGLE_MESSAGE_CHARS) + "..."
 38 |         truncated = true
 39 |       }
 40 | 
 41 |       const messageLength = message.text.length + message.sender.length + 4 // +4 for formatting
 42 | 
 43 |       // Check if adding this message would exceed our limit
 44 |       if (
 45 |         messages.length >= this.MIN_MESSAGES &&
 46 |         totalChars + messageLength > this.MAX_TOTAL_CHARS
 47 |       ) {
 48 |         truncated = true
 49 |         break
 50 |       }
 51 | 
 52 |       messages.unshift(message) // Add to beginning to maintain chronological order
 53 |       totalChars += messageLength
 54 |     }
 55 | 
 56 |     // If we have too few messages and they're over the limit, truncate the oldest ones
 57 |     if (
 58 |       messages.length < this.MIN_MESSAGES &&
 59 |       totalChars > this.MAX_TOTAL_CHARS
 60 |     ) {
 61 |       this.truncateOldestMessages(messages, this.MAX_TOTAL_CHARS)
 62 |       truncated = true
 63 |     }
 64 | 
 65 |     return {
 66 |       messages,
 67 |       totalCharacters: totalChars,
 68 |       truncated
 69 |     }
 70 |   }
 71 | 
 72 |   /**
 73 |    * Gets all message elements from the chat
 74 |    */
 75 |   private getMessageElements(): NodeListOf<Element> {
 76 |     return document.activeElement.querySelectorAll(
 77 |       ".msg-s-event-listitem[data-event-urn]"
 78 |     )
 79 |   }
 80 | 
 81 |   /**
 82 |    * Extracts message data from a single DOM element
 83 |    */
 84 |   private extractMessageFromElement(element: Element): AiDMChatMessage | null {
 85 |     const messageTextElement = element.querySelector(
 86 |       ".msg-s-event-listitem__body"
 87 |     )
 88 |     const senderNameElement = element.querySelector(
 89 |       ".msg-s-message-group__name"
 90 |     )
 91 |     const timestampElement = element.querySelector(
 92 |       ".msg-s-message-group__timestamp"
 93 |     )
 94 | 
 95 |     if (!messageTextElement) return null
 96 | 
 97 |     const text = this.cleanMessageText(messageTextElement.textContent || "")
 98 |     if (!text.trim()) return null
 99 | 
100 |     const isOtherPerson = element.classList.contains(
101 |       "msg-s-event-listitem--other"
102 |     )
103 | 
104 |     // If it's your message, sender name won't be in the DOM - use "You"
105 |     const sender = isOtherPerson
106 |       ? senderNameElement?.textContent?.trim() || "LinkedIn User"
107 |       : "You"
108 | 
109 |     const timestamp = timestampElement?.textContent?.trim() || ""
110 | 
111 |     return {
112 |       sender,
113 |       text,
114 |       timestamp,
115 |       isOtherPerson,
116 |       element
117 |     }
118 |   }
119 |   private attachSingleReplyAction(element: Element): Element | null {
120 |     if (element.hasAttribute("data-copilot-reply-attached")) return
121 |     const messageTextElement = element.querySelector(
122 |       ".msg-s-event-listitem__body"
123 |     )
124 | 
125 |     if (!messageTextElement) return null
126 | 
127 |     const isOtherPerson = element.classList.contains(
128 |       "msg-s-event-listitem--other"
129 |     )
130 |     let ele = document.createElement("button")
131 |     ele.classList.add("aiDirectDmReplyButton")
132 |     ele.innerText = "Reply with AI"
133 |     if (isOtherPerson) {
134 |       element.insertAdjacentElement("beforeend", ele)
135 |       element.setAttribute("data-copilot-reply-attached", "true")
136 |     }
137 | 
138 |     return ele
139 |   }
140 | 
141 |   /**
142 |    * Cleans up message text (removes extra whitespace, etc.)
143 |    */
144 |   private cleanMessageText(text: string): string {
145 |     return text
146 |       .replace(/\s+/g, " ") // Replace multiple whitespace with single space
147 |       .trim()
148 |   }
149 | 
150 |   /**
151 |    * Truncates oldest messages to fit within character limit
152 |    */
153 |   private truncateOldestMessages(
154 |     messages: AiDMChatMessage[],
155 |     maxChars: number
156 |   ): void {
157 |     let totalChars = messages.reduce(
158 |       (sum, msg) => sum + msg.text.length + msg.sender.length + 4,
159 |       0
160 |     )
161 | 
162 |     while (messages.length > 1 && totalChars > maxChars) {
163 |       const removed = messages.shift()!
164 |       totalChars -= removed.text.length + removed.sender.length + 4
165 |     }
166 | 
167 |     // If even one message is too long, truncate it
168 |     if (messages.length === 1 && totalChars > maxChars) {
169 |       const message = messages[0]
170 |       const targetLength = maxChars - message.sender.length - 4 - 3 // -3 for "..."
171 |       if (targetLength > 0) {
172 |         message.text = message.text.substring(0, targetLength) + "..."
173 |       }
174 |     }
175 |   }
176 | 
177 |   /**
178 |    * Formats messages for AI context (you can customize this)
179 |    */
180 |   public formatForAI(context: AiDMChatContext): string {
181 |     const formattedMessages = context.messages
182 |       .map((msg) => `${msg.sender}: ${msg.text}`)
183 |       .join("\n")
184 | 
185 |     return (
186 |       formattedMessages + (context.truncated ? "\n[Context truncated]" : "")
187 |     )
188 |   }
189 | 
190 |   /**
191 |    * Gets context and formats it in one call
192 |    */
193 |   public getChatContextForAI(): string {
194 |     const context = this.extractChatContext()
195 |     return this.formatForAI(context)
196 |   }
197 | 
198 |   /**
199 |    * Sets up MutationObserver to watch for new messages
200 |    */
201 |   public watchForNewMessages(
202 |     callback: (newMessage: AiDMChatMessage, replyButton: Element) => void
203 |   ): MutationObserver {
204 |     const chatContainer = document.querySelector(".msg-s-message-list-content")
205 | 
206 |     if (!chatContainer) {
207 |       // throw new Error("Chat container not found")
208 |       // naa, decided to watch on doc.body instead
209 |     }
210 | 
211 |     const observer = new MutationObserver((mutations) => {
212 |       mutations.forEach((mutation) => {
213 |         if (mutation.type === "childList") {
214 |           mutation.addedNodes.forEach((node) => {
215 |             if (node.nodeType === Node.ELEMENT_NODE) {
216 |               const element = node as Element
217 | 
218 |               // Check if it's a message element or contains one
219 |               let messageElement = element.classList.contains(
220 |                 "msg-s-event-listitem"
221 |               )
222 |                 ? element
223 |                 : element.querySelector(".msg-s-event-listitem[data-event-urn]")
224 | 
225 |               if (messageElement) {
226 |                 let message = this.extractMessageFromElement(messageElement)
227 |                 message.text = `${message.sender}: ${message.text}`
228 |                 let attachedElement =
229 |                   this.attachSingleReplyAction(messageElement)
230 |                 if (message && attachedElement) {
231 |                   callback(message, attachedElement)
232 |                 }
233 |               }
234 |             }
235 |           })
236 |         }
237 |       })
238 |     })
239 | 
240 |     observer.observe(document.body, {
241 |       childList: true,
242 |       subtree: true
243 |     })
244 | 
245 |     return observer
246 |   }
247 | 
248 |   /**
249 |    * Debug function to see what messages are found
250 |    */
251 |   public debugMessages(): void {
252 |     const context = this.extractChatContext()
253 |     console.log("Chat Context:", context)
254 |     console.log("Formatted for AI:", this.formatForAI(context))
255 |   }
256 | }
257 | 
258 | export const messageExtractor = new LinkedInMessageExtractor()
259 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # LinkedIn Copilot
  2 | 
  3 | **An AI-powered Chrome extension that helps you craft engaging LinkedIn content and responses with ease.**
  4 | 
  5 | Transform your LinkedIn networking with intelligent, personalized responses for posts, comments, DMs, and content creation. LinkedIn Copilot understands context and your professional profile to generate authentic, relevant content that sounds like you.
  6 | 
  7 | ## ✨ Features
  8 | 
  9 | ### 🤖 AI-Powered Content Generation
 10 | 
 11 | - **Smart Post Replies**: Generate contextual responses to LinkedIn posts based on the content and author
 12 | - **DM Assistant**: Reply to direct messages with AI that understands chat history or individual messages
 13 | - **Content Creation**: Use the "Pilot Button" to write and edit LinkedIn posts with AI assistance
 14 | - **Profile-Based Personalization**: All responses are tailored to your professional background and writing style
 15 | 
 16 | ### 📝 Template System
 17 | 
 18 | - **Pre-built Templates**: Quick access to common responses like congratulations, birthday wishes, and more
 19 | - **Category Organization**: Organize templates by context (Feed, DM, Connections, Posts)
 20 | - **Smart Placeholders**: Automatically insert names and context-specific information
 21 | - **Import/Export**: Backup and share your template collections
 22 | 
 23 | ### ⚙️ Smart Features
 24 | 
 25 | - **Typing Simulation**: Realistic typing animation to make responses feel natural
 26 | - **Context Awareness**: Different behavior for feed comments vs direct messages
 27 | - **Real-time Processing**: Streaming AI responses for immediate feedback
 28 | - **Usage Analytics**: Track your productivity and most-used features
 29 | 
 30 | ## 🚀 Quick Installation
 31 | 
 32 | ### For End Users (Recommended)
 33 | 
 34 | 1. **Download the Latest Release**
 35 | 
 36 |    - Go to [Releases](https://github.com/Emmaccen/LinkedIn-Copilot/releases)
 37 |    - Download the latest version `linkedin-copilot-[version-number].zip`
 38 | 
 39 | 2. **Install in Chrome**
 40 | 
 41 |    - Open Chrome and go to `chrome://extensions/`
 42 |    - Enable "Developer mode" (toggle in top-right)
 43 |    - Click "Load unpacked"
 44 |    - Select the extracted folder from the downloaded zip
 45 | 
 46 | 3. **Setup Your Profile**
 47 |    - Click the extension icon and go to Options page
 48 |    - Navigate to the Settings tab
 49 |    - Add your Groq API key (free - see setup guide below)
 50 |    - Fill out your professional details (name, title, summary)
 51 |    - Start using LinkedIn with AI assistance!
 52 | 
 53 | ### API Key Setup (Free & Easy)
 54 | 
 55 | LinkedIn Copilot uses Groq's free AI API, which offers generous limits for personal use:
 56 | 
 57 | 1. **Get Your Free API Key**
 58 | 
 59 |    - Visit [Groq Console](https://console.groq.com/keys)
 60 |    - Sign up with GitHub (recommended - instant approval with organization)
 61 |    - Create a new API key
 62 |    - Copy your key
 63 | 
 64 | 2. **Add to Extension**
 65 |    - Open LinkedIn Copilot settings
 66 |    - Paste your API key
 67 |    - Save settings
 68 | 
 69 | > **Note**: Groq's free tier is generous - you'd need to generate responses multiple times per minute to hit limits, which reset regularly.
 70 | 
 71 | ## 📖 How to Use
 72 | 
 73 | ### 1. Post Comments
 74 | 
 75 | - Click on any LinkedIn post comment box
 76 | - See AI and template options appear
 77 | - Choose "Reply with AI" for contextual responses
 78 | - Or select a template category for quick replies
 79 | 
 80 | ### 2. Direct Messages
 81 | 
 82 | - Open any LinkedIn chat
 83 | - AI options appear in the message input area
 84 | - Generate responses based on chat history or individual messages
 85 | 
 86 | ### 3. Create Posts
 87 | 
 88 | - Click "Write a post" on LinkedIn
 89 | - Describe your post idea in the text box
 90 | - Click the "Pilot ✨" button
 91 | - AI will generate/improve your content
 92 | 
 93 | ### 4. Templates
 94 | 
 95 | - Manage templates in the extension page
 96 | - Create categories for different scenarios
 97 | - Use placeholders like `{{name}}` for personalization
 98 | - Import/export template collections
 99 | 
100 | ## 🔒 Privacy & Compliance
101 | 
102 | ### Responsible Usage
103 | 
104 | LinkedIn Copilot is designed as a **writing assistant tool** that helps you create content - it never takes actions on your behalf. Here's what it does and doesn't do:
105 | 
106 | **What it DOES:**
107 | 
108 | - Generates text suggestions for your review
109 | - Fills in input fields with AI-generated content
110 | - Provides template-based quick responses
111 | - Analyzes LinkedIn content for context (locally processed)
112 | 
113 | **What it DOESN'T do:**
114 | 
115 | - Automatically send messages or comments
116 | - Post content without your approval
117 | - Store your LinkedIn data externally
118 | - Take any actions without your explicit click
119 | 
120 | ### User Control
121 | 
122 | - **You're always in control**: All generated content appears in input fields for your review
123 | - **You decide what to send**: The extension never clicks "Send" or "Post" for you
124 | - **Local processing**: Your templates and settings are stored locally in your browser
125 | - **No data collection**: Your LinkedIn activity and content are not stored or transmitted
126 | 
127 | ### Platform Compliance
128 | 
129 | This extension operates similarly to writing tools like Grammarly - it assists with content creation but leaves all posting decisions to you. Since it doesn't automate actions or violate LinkedIn's user experience, it maintains compliance with platform policies.
130 | 
131 | **Use responsibly**: While the tool helps with efficiency, always ensure your interactions remain genuine and authentic to maintain trust in your professional network.
132 | 
133 | ## 🛠️ For Developers
134 | 
135 | ### Development Setup
136 | 
137 | ```bash
138 | # Clone the repository
139 | git clone https://github.com/emmaccen/linkedin-copilot.git
140 | cd linkedin-copilot
141 | 
142 | # Install dependencies
143 | npm install
144 | 
145 | # Start development server
146 | npm run dev
147 | 
148 | # Build for production
149 | npm run build
150 | ```
151 | 
152 | ### Tech Stack
153 | 
154 | - **Framework**: [Plasmo](https://docs.plasmo.com/) (Chrome Extension Framework)
155 | - **Frontend**: React + TypeScript
156 | - **Styling**: Tailwind CSS
157 | - **AI**: Groq SDK
158 | - **Storage**: Chrome Extension Storage API
159 | 
160 | ### Project Structure
161 | 
162 | ```
163 | ├── components/          # React components
164 | ├── contents/           # Content scripts
165 | ├── lib/               # Utilities and AI logic
166 | ├── store/             # State management
167 | ├── types/             # TypeScript definitions
168 | ├── utils/             # Helper functions
169 | └── static-data/       # Constants and templates
170 | ```
171 | 
172 | ### Contributing
173 | 
174 | Contributions are welcome! This project is actively maintained with data-driven development decisions based on real user feedback and analytics.
175 | 
176 | **Before contributing:**
177 | 
178 | - Check existing issues and discussions
179 | - For major features, open an issue to discuss the approach
180 | - Follow the existing code style and patterns
181 | - Test your changes thoroughly
182 | 
183 | **Development workflow:**
184 | 
185 | 1. Fork the repository
186 | 2. Create a feature branch
187 | 3. Make your changes
188 | 4. Test with the development build
189 | 5. Submit a pull request
190 | 
191 | ### Building from Source
192 | 
193 | ```bash
194 | # Install dependencies
195 | npm install
196 | 
197 | # Build extension
198 | npm run build
199 | 
200 | # Package for distribution
201 | npm run package
202 | ```
203 | 
204 | The built extension will be in the `build/` directory.
205 | 
206 | ## 📊 Analytics & Privacy
207 | 
208 | This extension includes privacy-focused analytics to improve user experience:
209 | 
210 | - **Usage patterns**: Which features are used most
211 | - **Error tracking**: Technical issues for bug fixes
212 | - **No personal data**: LinkedIn content, messages, or personal information is never collected
213 | - **Local storage**: All your data stays in your browser
214 | 
215 | Analytics help prioritize development and ensure the extension meets user needs effectively.
216 | 
217 | ## 🤝 Support & Community
218 | 
219 | - **Issues**: Report bugs or request features via [GitHub Issues](https://github.com/emmaccen/linkedin-copilot/issues)
220 | - **Discussions**: Join conversations in [GitHub Discussions](https://github.com/emmaccen/linkedin-copilot/discussions)
221 | - **Updates**: Follow development updates and releases
222 | 
223 | ## 📄 License
224 | 
225 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
226 | 
227 | ## 🙏 Acknowledgments
228 | 
229 | Built with [Plasmo](https://www.plasmo.com/) - the browser extension framework that makes development a joy.
230 | 
231 | Powered by [Groq](https://groq.com/) for fast, intelligent AI responses.
232 | 
233 | ---
234 | 
235 | **Ready to transform your LinkedIn networking?** Download the latest release and start crafting better content with AI assistance!
236 | 


--------------------------------------------------------------------------------
/contents/TypingSimulator.ts:
--------------------------------------------------------------------------------
  1 | import type { PlasmoCSConfig } from "plasmo"
  2 | 
  3 | import type { UserSettings } from "~types"
  4 | 
  5 | export const config: PlasmoCSConfig = {
  6 |   matches: ["https://*.linkedin.com/*"],
  7 |   all_frames: false
  8 | }
  9 | 
 10 | class LinkedInTypingSimulator {
 11 |   /**
 12 |    * Simulates typing in LinkedIn's contenteditable message box
 13 |    */
 14 |   private async typeMessage(
 15 |     message: string,
 16 |     inputElement: HTMLElement,
 17 |     userSettings: UserSettings
 18 |   ): Promise<void> {
 19 |     // Focus the element first
 20 |     inputElement.focus()
 21 | 
 22 |     // Clear the placeholder content properly
 23 |     this.clearContentEditableElement(inputElement)
 24 | 
 25 |     let i = 0
 26 |     const typeChar = (): void => {
 27 |       if (i >= message.length) {
 28 |         // Dispatch final events
 29 |         this.dispatchTypingEvents(inputElement, message[i - 1] || "")
 30 |         return
 31 |       }
 32 | 
 33 |       const char = message.charAt(i)
 34 |       this.insertCharacterAtCursor(inputElement, char)
 35 |       this.dispatchTypingEvents(inputElement, char)
 36 | 
 37 |       i++
 38 | 
 39 |       if (i < message.length) {
 40 |         setTimeout(typeChar, userSettings.typingDelay)
 41 |       }
 42 |     }
 43 | 
 44 |     typeChar()
 45 |   }
 46 | 
 47 |   /**
 48 |    * Sets the value instantly (no typing animation)
 49 |    */
 50 |   private setInputValue(
 51 |     message: string,
 52 |     inputElement: HTMLElement,
 53 |     append = false
 54 |   ): void {
 55 |     inputElement.focus()
 56 | 
 57 |     if (inputElement.tagName === "TEXTAREA") {
 58 |       const textarea = inputElement as HTMLTextAreaElement
 59 |       if (append) textarea.value += message
 60 |       else textarea.value = message
 61 |     } else {
 62 |       // Handle contenteditable div
 63 |       if (!append) {
 64 |         this.clearContentEditableElement(inputElement)
 65 |       }
 66 | 
 67 |       this.insertTextAtCursor(inputElement, message)
 68 |     }
 69 | 
 70 |     this.dispatchTypingEvents(inputElement, message)
 71 |   }
 72 | 
 73 |   /**
 74 |    * Clears contenteditable element properly, handling LinkedIn's structure
 75 |    */
 76 |   private clearContentEditableElement(element: HTMLElement): void {
 77 |     // Remove all content
 78 |     element.innerHTML = ""
 79 | 
 80 |     // Create the structure LinkedIn expects for empty state
 81 |     const p = document.createElement("p")
 82 |     const br = document.createElement("br")
 83 |     p.appendChild(br)
 84 |     element.appendChild(p)
 85 | 
 86 |     // Set cursor at the beginning
 87 |     this.setCursorToStart(element)
 88 |   }
 89 | 
 90 |   /**
 91 |    * Inserts a single character at the current cursor position
 92 |    */
 93 |   private insertCharacterAtCursor(element: HTMLElement, char: string): void {
 94 |     const selection = window.getSelection()
 95 |     if (!selection || selection.rangeCount === 0) {
 96 |       // If no selection, append to the end
 97 |       this.insertTextAtEnd(element, char)
 98 |       return
 99 |     }
100 | 
101 |     const range = selection.getRangeAt(0)
102 | 
103 |     // Handle different cases based on where the cursor is
104 |     if (char === "\n") {
105 |       // Handle line breaks
106 |       const br = document.createElement("br")
107 |       range.deleteContents()
108 |       range.insertNode(br)
109 |       range.setStartAfter(br)
110 |       range.setEndAfter(br)
111 |     } else {
112 |       // Insert regular character
113 |       const textNode = document.createTextNode(char)
114 |       range.deleteContents()
115 |       range.insertNode(textNode)
116 |       range.setStartAfter(textNode)
117 |       range.setEndAfter(textNode)
118 |     }
119 | 
120 |     selection.removeAllRanges()
121 |     selection.addRange(range)
122 |   }
123 | 
124 |   /**
125 |    * Inserts text at the cursor position, handling LinkedIn's DOM structure
126 |    */
127 |   private insertTextAtCursor(element: HTMLElement, text: string): void {
128 |     const selection = window.getSelection()
129 | 
130 |     if (!selection || selection.rangeCount === 0) {
131 |       this.insertTextAtEnd(element, text)
132 |       return
133 |     }
134 | 
135 |     const range = selection.getRangeAt(0)
136 | 
137 |     // Handle line breaks in the text
138 |     const lines = text.split("\n")
139 | 
140 |     for (let i = 0; i < lines.length; i++) {
141 |       if (i > 0) {
142 |         // Insert line break
143 |         const br = document.createElement("br")
144 |         range.insertNode(br)
145 |         range.setStartAfter(br)
146 |         range.setEndAfter(br)
147 |       }
148 | 
149 |       if (lines[i]) {
150 |         const textNode = document.createTextNode(lines[i])
151 |         range.insertNode(textNode)
152 |         range.setStartAfter(textNode)
153 |         range.setEndAfter(textNode)
154 |       }
155 |     }
156 | 
157 |     selection.removeAllRanges()
158 |     selection.addRange(range)
159 |   }
160 | 
161 |   /**
162 |    * Inserts text at the end of the contenteditable element
163 |    */
164 |   private insertTextAtEnd(element: HTMLElement, text: string): void {
165 |     // Find the last text node or create one
166 |     let lastP = element.querySelector("p:last-child")
167 | 
168 |     if (!lastP) {
169 |       lastP = document.createElement("p")
170 |       element.appendChild(lastP)
171 |     }
172 | 
173 |     // Remove empty <br> if it exists
174 |     const br = lastP.querySelector("br")
175 |     if (br && lastP.textContent === "") {
176 |       br.remove()
177 |     }
178 | 
179 |     // Add the text
180 |     const lines = text.split("\n")
181 |     for (let i = 0; i < lines.length; i++) {
182 |       if (i > 0) {
183 |         const newP = document.createElement("p")
184 |         element.appendChild(newP)
185 |         lastP = newP
186 |       }
187 | 
188 |       if (lines[i]) {
189 |         lastP.appendChild(document.createTextNode(lines[i]))
190 |       }
191 |     }
192 | 
193 |     // Set cursor to end
194 |     this.setCursorToEnd(element)
195 |   }
196 | 
197 |   /**
198 |    * Sets cursor to the start of the contenteditable element
199 |    */
200 |   private setCursorToStart(element: HTMLElement): void {
201 |     const range = document.createRange()
202 |     const selection = window.getSelection()
203 | 
204 |     if (element.firstChild) {
205 |       range.setStart(element.firstChild, 0)
206 |       range.setEnd(element.firstChild, 0)
207 |     } else {
208 |       range.setStart(element, 0)
209 |       range.setEnd(element, 0)
210 |     }
211 | 
212 |     selection?.removeAllRanges()
213 |     selection?.addRange(range)
214 |   }
215 | 
216 |   /**
217 |    * Sets cursor to the end of the contenteditable element
218 |    */
219 |   private setCursorToEnd(element: HTMLElement): void {
220 |     const range = document.createRange()
221 |     const selection = window.getSelection()
222 | 
223 |     range.selectNodeContents(element)
224 |     range.collapse(false)
225 | 
226 |     selection?.removeAllRanges()
227 |     selection?.addRange(range)
228 |   }
229 | 
230 |   /**
231 |    * Dispatches the necessary events for LinkedIn to recognize the input
232 |    */
233 |   private dispatchTypingEvents(element: HTMLElement, char: string): void {
234 |     // Dispatch multiple events that LinkedIn might be listening for
235 |     const events = [
236 |       new Event("input", { bubbles: true }),
237 |       new Event("change", { bubbles: true }),
238 |       new KeyboardEvent("keydown", {
239 |         bubbles: true,
240 |         key: char,
241 |         code: `Key${char.toUpperCase()}`,
242 |         which: char.charCodeAt(0)
243 |       }),
244 |       new KeyboardEvent("keypress", {
245 |         bubbles: true,
246 |         key: char,
247 |         code: `Key${char.toUpperCase()}`,
248 |         which: char.charCodeAt(0)
249 |       }),
250 |       new KeyboardEvent("keyup", {
251 |         bubbles: true,
252 |         key: char,
253 |         code: `Key${char.toUpperCase()}`,
254 |         which: char.charCodeAt(0)
255 |       }),
256 |       new InputEvent("input", {
257 |         bubbles: true,
258 |         cancelable: true,
259 |         data: char,
260 |         inputType: "insertText"
261 |       })
262 |     ]
263 | 
264 |     events.forEach((event) => {
265 |       try {
266 |         element.dispatchEvent(event)
267 |       } catch (error) {
268 |         console.warn("Failed to dispatch event:", event.type, error)
269 |       }
270 |     })
271 | 
272 |     // Also dispatch on parent elements that might be listening
273 |     let parent = element.parentElement
274 |     while (parent && parent !== document.body) {
275 |       try {
276 |         parent.dispatchEvent(new Event("input", { bubbles: true }))
277 |         parent.dispatchEvent(new Event("change", { bubbles: true }))
278 |       } catch (error) {
279 |         // Ignore errors on parent events
280 |       }
281 |       parent = parent.parentElement
282 |     }
283 |   }
284 | 
285 |   /**
286 |    * Public method to type a message with animation
287 |    */
288 |   public async simulateTyping(
289 |     message: string,
290 |     element: HTMLElement,
291 |     userSettings: UserSettings
292 |   ): Promise<void> {
293 |     await this.typeMessage(message, element, userSettings)
294 |   }
295 | 
296 |   /**
297 |    * Public method to set message instantly
298 |    */
299 |   public setMessage(
300 |     message: string,
301 |     element: HTMLElement,
302 |     append = false
303 |   ): void {
304 |     this.setInputValue(message, element, append)
305 |   }
306 | 
307 |   /**
308 |    * Public method to clear the input
309 |    */
310 |   public clearInput(element: HTMLElement): void {
311 |     this.clearContentEditableElement(element)
312 |     this.dispatchTypingEvents(element, "")
313 |   }
314 | 
315 |   /**
316 |    * Check if the element is empty (has only placeholder content)
317 |    */
318 |   public isElementEmpty(element: HTMLElement): boolean {
319 |     const text = element.textContent?.trim() || ""
320 |     return text === "" || text === "\n"
321 |   }
322 | 
323 |   /**
324 |    * Wait for element to be ready for input
325 |    */
326 |   public async waitForElement(
327 |     selector: string,
328 |     timeout = 5000
329 |   ): Promise<HTMLElement | null> {
330 |     return new Promise((resolve) => {
331 |       const startTime = Date.now()
332 | 
333 |       const checkElement = () => {
334 |         const element = document.querySelector(selector) as HTMLElement
335 | 
336 |         if (element && element.isContentEditable) {
337 |           resolve(element)
338 |           return
339 |         }
340 | 
341 |         if (Date.now() - startTime > timeout) {
342 |           resolve(null)
343 |           return
344 |         }
345 | 
346 |         setTimeout(checkElement, 100)
347 |       }
348 | 
349 |       checkElement()
350 |     })
351 |   }
352 | }
353 | 
354 | export const linkedInTyping = new LinkedInTypingSimulator()
355 | 


--------------------------------------------------------------------------------
/static-data/index.ts:
--------------------------------------------------------------------------------
  1 | import type { ContextType, UserDetails } from "~/types"
  2 | 
  3 | export const AiCommentSystemMessage = ({
  4 |   linkedInPostUserInfo,
  5 |   personalInfo,
  6 |   context
  7 | }: {
  8 |   linkedInPostUserInfo: Record<string, string>
  9 |   personalInfo: UserDetails
 10 |   context: ContextType
 11 | }) => `
 12 | You are commenting on LinkedIn posts as a real person based on the provided profile. Your goal is to add genuine value through authentic, conversational responses.
 13 | 
 14 | CONTEXT:
 15 | Your profile: ${JSON.stringify(personalInfo)}
 16 | Post context: ${context}
 17 | Original poster: ${JSON.stringify(linkedInPostUserInfo)}
 18 | 
 19 | 
 20 | RESPONSE REQUIREMENTS:
 21 | - Keep replies SHORT (1-2 sentences max unless the topic genuinely demands more depth)
 22 | - Read the post carefully and respond to its main point, not just react positively
 23 | - Sound human and conversational, never like a LinkedIn influencer or corporate bot
 24 | - Use the provided context to understand conversation flow and avoid repeating points already made
 25 | - Match the tone of the original post while maintaining professionalism
 26 | - Never use emdashes or dashes for parenthetical phrases
 27 | 
 28 | BEHAVIORAL GUIDELINES:
 29 | - Don't agree with everything just to be nice - have your own informed opinions
 30 | - Be willing to respectfully disagree or offer alternative perspectives with brief reasoning
 31 | - Share original thoughts and insights, not generic responses
 32 | - Draw from your profile background only when genuinely relevant - don't force personal anecdotes
 33 | - Use appropriate humor when it fits naturally (keep it professional)
 34 | - Be occasionally contrarian if it adds real value to the discussion
 35 | - Avoid buzzwords, corporate speak, and LinkedIn clichés
 36 | - Don't end comments with questions unless they're genuine and natural
 37 | - If the post is low-quality or doesn't warrant engagement, suggest not commenting
 38 | - If the post is controversial or sensitive, respond with extra care and professionalism
 39 | 
 40 | QUALITY CHECK:
 41 | Before responding, ask yourself: "Does this comment add unique value that others probably haven't already said?" If no, reconsider commenting.
 42 | 
 43 | BAD EXAMPLES:
 44 | - "I love how you [specific verb/compliment about post] - [rest of comment]"
 45 | - "Great insights! Thanks for sharing!"
 46 | - "I couldn't agree more! What do you think about X?"
 47 | - "This is so valuable!"
 48 | - "Love this! Really makes you think"
 49 | 
 50 | GOOD EXAMPLES:
 51 | - "Hard disagree on point 3. In my experience with [specific area], [brief counter-example]"
 52 | - "This reminds me of when I [brief relevant story from your profile] - the real challenge turned out to be [insight]"
 53 | - "Interesting take, though I'd argue [alternative perspective with reasoning]"
 54 | - "Been there. What most people miss is [specific insight]"
 55 | - "True, but this overlooks [important consideration]"
 56 | 
 57 | Reply in plain text, no markdown formatting. Be yourself, not a LinkedIn stereotype.
 58 | 
 59 | `
 60 | 
 61 | export const AiSingleDmSystemMessage = ({
 62 |   personalInfo
 63 | }: {
 64 |   personalInfo: UserDetails
 65 | }) => `
 66 | You are replying to a LinkedIn DM as a real person based on the provided profile. The user chose to reply to this specific message independently, suggesting it has clear context and substance that warrants a standalone response.
 67 | 
 68 | CONTEXT:
 69 | Your profile: ${JSON.stringify(personalInfo)}
 70 | 
 71 | RESPONSE APPROACH:
 72 | - Read the message carefully and respond to its main points directly
 73 | - Keep responses appropriately sized for the complexity of their message (detailed questions deserve detailed answers, simple messages get brief replies)
 74 | - Sound professional but human - match their communication style somewhat
 75 | - Be honest about your interest level, availability, and capabilities
 76 | - Reference specific details from their message to show genuine engagement
 77 | - Draw from your professional background when relevant to provide valuable insights
 78 | 
 79 | ADAPTIVE TONE:
 80 | - If they're formal → be professional but approachable
 81 | - If they're casual → match their energy while staying professional
 82 | - If they're asking for advice → be helpful and specific
 83 | - If they're pitching something → be direct about your interest level
 84 | - If they're networking → be genuinely engaging if there's mutual benefit
 85 | 
 86 | RESPONSE QUALITY:
 87 | - Actually address what they're asking or discussing
 88 | - Provide value through your perspective, experience, or insights when relevant
 89 | - Ask meaningful follow-up questions only if you're genuinely interested in their response
 90 | - Be direct about next steps if any are needed
 91 | - Don't feel obligated to be enthusiastic about poor-fit opportunities
 92 | 
 93 | AVOID:
 94 | - Generic "thanks for reaching out" unless it's genuinely appropriate
 95 | - Corporate buzzwords and LinkedIn clichés
 96 | - Being overly accommodating when there's no clear benefit
 97 | - Asking questions they already answered in their message
 98 | - Responses that could apply to any message (be specific to their content)
 99 | 
100 | Reply in plain text, no markdown formatting. Be authentic, helpful, and true to your professional persona.
101 | `
102 | 
103 | export const AiDmChatSystemMessage = ({
104 |   personalInfo
105 | }: {
106 |   personalInfo: UserDetails
107 | }) => `
108 | You are replying to a LinkedIn DM conversation as a real person based on the provided profile. Focus on maintaining natural conversation flow while being genuinely helpful.
109 | 
110 | CONTEXT:
111 | Your profile: ${JSON.stringify(personalInfo)}
112 | 
113 | RESPONSE REQUIREMENTS:
114 | - Keep replies conversational and natural (1-3 sentences typically)
115 | - Acknowledge the conversation context and reference previous messages when relevant
116 | - Maintain the established tone of the conversation
117 | - Be responsive to what was actually asked or discussed
118 | - Don't repeat information already shared in the chat
119 | - Match the formality level of the conversation (casual if they're casual, professional if formal)
120 | 
121 | CONVERSATION AWARENESS:
122 | - If this is continuing a discussion, build on previous points naturally
123 | - If they're asking a follow-up question, directly address it
124 | - If introducing new information, connect it to what's been discussed
125 | - Avoid restating things already established in the conversation
126 | - Pay attention to the relationship stage (first contact vs ongoing conversation)
127 | 
128 | TONE GUIDELINES:
129 | - Sound like yourself having a real conversation, not a customer service bot
130 | - Be helpful and responsive without being overly eager
131 | - Use appropriate humor if the conversation has been light
132 | - Be direct and honest about your availability, interests, or capabilities
133 | - Don't oversell yourself or be overly accommodating
134 | 
135 | AVOID:
136 | - Generic "thanks for reaching out" responses unless it's genuinely first contact
137 | - Overly formal language unless the conversation has been formal
138 | - Asking obvious questions that have already been answered
139 | - Long-winded responses that break conversation flow
140 | - Ending every message with a question unless it's natural
141 | 
142 | Reply in plain text, no markdown formatting. Keep it human and conversational.
143 | `
144 | 
145 | export const aiWritingStyleSystemMessage = ({
146 |   personalInfo
147 | }: {
148 |   personalInfo: UserDetails
149 | }) => `
150 | 
151 | You are creating LinkedIn posts based on the user's topic description. Write as the person described in the profile, creating engaging content that sounds authentically human.
152 | 
153 | CONTEXT:
154 | - Your profile: ${JSON.stringify(personalInfo)} 
155 | 
156 | POST REQUIREMENTS:
157 | - Write in first person as the profile owner
158 | - Keep posts concise but engaging (typically 3-10 sentences, unless topic requires more depth)
159 | - Start with a hook that grabs attention within the first line
160 | - Structure: Hook → Main point/story → Insight/takeaway → Optional call for engagement
161 | - Use double line breaks (two enters) between distinct paragraphs
162 | - Use single line breaks within paragraphs when you want a soft break
163 | - Structure your post with clear paragraph breaks for readability on mobile
164 | 
165 | CONTENT STRATEGY:
166 | - Share genuine insights from the perspective of your profile background
167 | - Tell specific stories or examples when relevant to your experience
168 | - Offer contrarian or unique perspectives that stand out from typical LinkedIn content
169 | - Include actionable advice or thought-provoking questions when appropriate
170 | - Be vulnerable and authentic when the topic allows
171 | - Avoid humble-bragging and obvious self-promotion
172 | 
173 | TONE & STYLE:
174 | - Conversational and approachable, not corporate or overly formal
175 | - Confident but not arrogant
176 | - Use simple, clear language - avoid jargon unless necessary for your field
177 | - Show personality - humor, passion, or strong opinions when appropriate
178 | - Sound like a real person sharing genuine thoughts, not a content marketing team
179 | - Never use emdashes
180 | - Never use dashes for parenthetical phrases or to separate thoughts
181 | 
182 | ENGAGEMENT ELEMENTS:
183 | - End with genuine questions only when they naturally fit and you actually want responses
184 | - Use relevant emojis sparingly (1-3 max) and only if they enhance the message
185 | - Include subtle calls-to-action when appropriate for your goals
186 | - Consider controversial but respectful takes that encourage thoughtful discussion
187 | 
188 | CONTENT TYPES TO CONSIDER:
189 | - Personal anecdotes with professional lessons
190 | - Industry observations with unique angles
191 | - Behind-the-scenes insights from your experience
192 | - Contrarian takes on common advice
193 | - Lessons learned from failures or challenges
194 | - Predictions or trends you're noticing
195 | 
196 | AVOID:
197 | - Generic motivational quotes without personal context
198 | - Obvious humble-bragging ("I was so honored to be chosen...")
199 | - Fake vulnerability for engagement
200 | - Corporate buzzword soup
201 | - Recycled content everyone has seen before
202 | - Overly long posts unless the topic genuinely requires depth
203 | - Ending every post with "Thoughts?" or "What do you think?"
204 | 
205 | QUALITY CHECK:
206 | Before finalizing, ask: "Would I actually want to read this post if someone else wrote it? Does it offer something valuable or interesting?"
207 | 
208 | GOOD POST EXAMPLES:
209 | 
210 | *Personal story approach:*
211 | "Just got off a call where a client asked me to 'make the logo bigger' for the 47th time this month.
212 | 
213 | Instead of my usual internal eye-roll, I asked: 'What problem are you trying to solve by making it bigger?'
214 | 
215 | Turns out, they felt their brand wasn't memorable enough. We ended up redesigning their entire customer onboarding flow instead.
216 | 
217 | Sometimes the solution isn't what they're asking for."
218 | 
219 | *Industry insight approach:*
220 | "Everyone talks about 'scaling company culture' but most get it backwards.
221 | 
222 | Culture doesn't scale. Systems do.
223 | 
224 | The companies that maintain their culture while growing? They've systemized the behaviors that created that culture in the first place.
225 | 
226 | Netflix didn't scale their culture. They scaled their hiring process, feedback systems, and decision-making frameworks."
227 | 
228 | *Contrarian take approach:*
229 | "Unpopular opinion: Most 'networking events' are terrible for actual networking.
230 | 
231 | You end up in a room full of people trying to sell each other something, exchanging business cards you'll never look at again.
232 | 
233 | The best professional relationships I've built? Coffee chats, industry Slack groups, and actually helping people solve problems before asking for anything."
234 | 
235 | Write naturally and authentically as the profile owner. No markdown formatting in the final post.
236 | 
237 | `
238 | 


--------------------------------------------------------------------------------
/components/SettingsManager.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react"
  2 | 
  3 | import FeedbackModal from "~components/FeedbackModal"
  4 | import { useGlobalState } from "~store/GlobalContext"
  5 | import type { Theme, UserDetails, UserSettings } from "~types"
  6 | import {
  7 |   ENCRYPTION_KEY_NAME,
  8 |   loadFromLocalStorage,
  9 |   saveEncryptedApiKey,
 10 |   saveToLocalStorage
 11 | } from "~utils"
 12 | 
 13 | const hiddenKey = "***************************************"
 14 | 
 15 | function Toggle({
 16 |   checked,
 17 |   onChange,
 18 |   size = "default"
 19 | }: {
 20 |   checked: boolean
 21 |   onChange: (checked: boolean) => void
 22 |   size?: "default" | "small"
 23 | }) {
 24 |   const sizeClasses = size === "small" ? "h-5 w-9" : "h-6 w-11"
 25 |   const thumbClasses =
 26 |     size === "small" ? "h-3 w-3 translate-x-5" : "h-4 w-4 translate-x-6"
 27 |   const thumbOffClasses = size === "small" ? "translate-x-1" : "translate-x-1"
 28 | 
 29 |   return (
 30 |     <button
 31 |       type="button"
 32 |       onClick={() => onChange(!checked)}
 33 |       className={`${
 34 |         checked ? "bg-brand-blue" : "bg-muted"
 35 |       } relative inline-flex ${sizeClasses} items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2`}>
 36 |       <span
 37 |         className={`${
 38 |           checked ? thumbClasses : thumbOffClasses
 39 |         } inline-block ${size === "small" ? "h-3 w-3" : "h-4 w-4"} transform rounded-full bg-white transition-transform`}
 40 |       />
 41 |     </button>
 42 |   )
 43 | }
 44 | 
 45 | export function SettingsManager() {
 46 |   const { userDetails, userSettings, pushNotification, theme, setTheme } =
 47 |     useGlobalState()
 48 |   const [userDetailsLocal, setUserDetailsLocal] =
 49 |     useState<UserDetails>(userDetails)
 50 | 
 51 |   const [apiKey, setApiKey] = useState("")
 52 |   const [showFeedback, setShowFeedback] = useState(false)
 53 | 
 54 |   useEffect(() => {
 55 |     loadFromLocalStorage<string>(ENCRYPTION_KEY_NAME).then((storedApiKey) => {
 56 |       if (storedApiKey) {
 57 |         setApiKey(hiddenKey)
 58 |       }
 59 |     })
 60 |   }, [])
 61 | 
 62 |   return (
 63 |     <div>
 64 |       <div className="space-y-10">
 65 |         <h3 className="text-lg font-semibold text-foreground mb-4">
 66 |           General Settings
 67 |         </h3>
 68 |         <div className="bg-card rounded-lg border border-border p-6">
 69 |           <div className="space-y-4">
 70 |             <div>
 71 |               <label className="block text-sm font-medium text-foreground mb-2">
 72 |                 Typing Delay (ms)
 73 |               </label>
 74 |               <input
 75 |                 type="number"
 76 |                 value={userSettings.typingDelay}
 77 |                 onChange={(e) => {
 78 |                   const newSettings = {
 79 |                     ...userSettings,
 80 |                     typingDelay: parseInt(e.target.value)
 81 |                   }
 82 |                   saveToLocalStorage<UserSettings>("userSettings", newSettings)
 83 |                 }}
 84 |                 className="w-full px-3 py-2 border border-border bg-background rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent"
 85 |               />
 86 |               <p className="text-sm text-muted-foreground mt-1">
 87 |                 Controls how fast the typing simulation appears (lower = faster)
 88 |               </p>
 89 |             </div>
 90 | 
 91 |             <div className="flex items-center gap-3">
 92 |               <Toggle
 93 |                 checked={userSettings.enableTypingSimulation}
 94 |                 onChange={(checked) => {
 95 |                   const newSettings = {
 96 |                     ...userSettings,
 97 |                     enableTypingSimulation: checked
 98 |                   }
 99 |                   saveToLocalStorage<UserSettings>("userSettings", newSettings)
100 |                 }}
101 |               />
102 |               <label className="text-sm text-foreground">
103 |                 Enable typing simulation
104 |               </label>
105 |             </div>
106 |             <div className="flex items-center gap-3">
107 |               <Toggle
108 |                 checked={theme === "dark"}
109 |                 onChange={(checked) => {
110 |                   const newTheme = checked ? "dark" : "light"
111 |                   setTheme(newTheme as Theme)
112 |                 }}
113 |               />
114 |               <label className="text-sm text-foreground">
115 |                 Theme ({theme === "dark" ? "Dark" : "Light"})
116 |               </label>
117 |             </div>
118 |           </div>
119 |         </div>
120 | 
121 |         <h3 className="text-lg font-semibold text-foreground mb-4">
122 |           User Details
123 |         </h3>
124 |         <div className="bg-card rounded-lg border border-border p-6">
125 |           <p className="text-muted-foreground mb-4">
126 |             This will be used to personalize your replies to posts. Make it
127 |             detailed and include only important points
128 |           </p>
129 |           <div className="space-y-4">
130 |             <div>
131 |               <label className="block text-sm font-medium text-foreground mb-2">
132 |                 Full Name
133 |               </label>
134 |               <input
135 |                 type="text"
136 |                 value={userDetailsLocal.fullName}
137 |                 onChange={(e) => {
138 |                   const updatedData = {
139 |                     ...userDetailsLocal,
140 |                     fullName: e.target.value
141 |                   }
142 |                   setUserDetailsLocal(updatedData)
143 |                 }}
144 |                 className="w-full px-3 py-2 border border-border bg-background rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent"
145 |               />
146 |             </div>
147 |             <div>
148 |               <label className="block text-sm font-medium text-foreground mb-2">
149 |                 Professional Title
150 |               </label>
151 |               <input
152 |                 type="text"
153 |                 value={userDetailsLocal.professionalTitle}
154 |                 onChange={(e) => {
155 |                   const updatedData = {
156 |                     ...userDetailsLocal,
157 |                     professionalTitle: e.target.value
158 |                   }
159 |                   setUserDetailsLocal(updatedData)
160 |                 }}
161 |                 className="w-full px-3 py-2 border border-border bg-background rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent"
162 |               />
163 |             </div>
164 |             <div>
165 |               <label className="block text-sm font-medium text-foreground mb-2">
166 |                 Professional Summary
167 |               </label>
168 |               <textarea
169 |                 value={userDetailsLocal.professionalSummary}
170 |                 onChange={(e) => {
171 |                   const updatedData = {
172 |                     ...userDetailsLocal,
173 |                     professionalSummary: e.target.value
174 |                   }
175 |                   setUserDetailsLocal(updatedData)
176 |                 }}
177 |                 rows={4}
178 |                 maxLength={500}
179 |                 className="w-full px-3 py-2 border border-border bg-background rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent font-mono"
180 |                 placeholder="A brief summary about you..."
181 |               />
182 |             </div>
183 |             <div className="flex justify-end mt-5">
184 |               <button
185 |                 onClick={async () => {
186 |                   if (!userDetailsLocal) return
187 |                   await saveToLocalStorage<UserDetails>(
188 |                     "userDetails",
189 |                     userDetailsLocal
190 |                   )
191 | 
192 |                   pushNotification("user details updated", "success")
193 |                 }}
194 |                 className="flex gap-2 items-center px-4 py-2 bg-brand-blue text-white rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2">
195 |                 <svg
196 |                   xmlns="http://www.w3.org/2000/svg"
197 |                   width="24"
198 |                   height="24"
199 |                   viewBox="0 0 24 24"
200 |                   fill="none"
201 |                   stroke="currentColor"
202 |                   strokeWidth="2"
203 |                   strokeLinecap="round"
204 |                   strokeLinejoin="round"
205 |                   className="w-4 h-4">
206 |                   <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
207 |                   <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
208 |                   <path d="M7 3v4a1 1 0 0 0 1 1h7" />
209 |                 </svg>
210 |                 Save Details
211 |               </button>
212 |             </div>
213 |           </div>
214 |         </div>
215 | 
216 |         <h3 className="text-lg font-semibold text-foreground mb-4">API Key</h3>
217 |         <div className="bg-card rounded-lg border border-border p-6">
218 |           <div>
219 |             <label className="block text-sm font-medium text-foreground mb-2">
220 |               Groq API Key
221 |             </label>
222 |             <input
223 |               type="password"
224 |               value={apiKey}
225 |               onChange={(e) => setApiKey(e.target.value)}
226 |               className="w-full px-3 py-2 border border-border bg-background rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent"
227 |               placeholder="Enter your Groq API key..."
228 |             />
229 |           </div>
230 |           <div className="flex justify-end mt-5">
231 |             <button
232 |               onClick={async () => {
233 |                 if (!apiKey || apiKey === hiddenKey) return
234 |                 await saveEncryptedApiKey(apiKey)
235 |                 setApiKey(hiddenKey)
236 |                 pushNotification("API Key saved successfully", "success")
237 |               }}
238 |               className="flex gap-2 items-center px-4 py-2 bg-brand-blue text-white rounded-lg hover:bg-opacity-90 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2">
239 |               <svg
240 |                 xmlns="http://www.w3.org/2000/svg"
241 |                 width="24"
242 |                 height="24"
243 |                 viewBox="0 0 24 24"
244 |                 fill="none"
245 |                 stroke="currentColor"
246 |                 strokeWidth="2"
247 |                 strokeLinecap="round"
248 |                 strokeLinejoin="round"
249 |                 className="w-4 h-4">
250 |                 <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
251 |                 <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" />
252 |                 <path d="M7 3v4a1 1 0 0 0 1 1h7" />
253 |               </svg>
254 |               Save API Key
255 |             </button>
256 |           </div>
257 |         </div>
258 | 
259 |         <h3 className="text-lg font-semibold text-foreground mb-4">
260 |           About Placeholders
261 |         </h3>
262 |         <div className="bg-card rounded-lg border border-border p-6">
263 |           <div className="bg-brand-blue/10 border border-brand-blue/20 rounded-lg p-4">
264 |             <p className="text-foreground mb-2">
265 |               Currently supported placeholder:
266 |             </p>
267 |             <div className="font-mono text-sm bg-background border border-border p-2 rounded">
268 |               {"{{name}}"} - Replaced with the user's first name
269 |             </div>
270 |             <p className="text-sm text-muted-foreground mt-2">
271 |               More placeholders will be added in future updates based on
272 |               available LinkedIn data.
273 |             </p>
274 |           </div>
275 |         </div>
276 |         <div className="border-t pt-8">
277 |           <h3 className="text-lg font-semibold text-foreground mb-4">
278 |             Help & Feedback
279 |           </h3>
280 |           <div className="space-y-4">
281 |             <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/30">
282 |               <div>
283 |                 <h4 className="font-medium text-foreground">
284 |                   Share Your Experience
285 |                 </h4>
286 |                 <p className="text-sm text-muted-foreground mt-1">
287 |                   Help us improve LinkedIn Copilot with your feedback and
288 |                   suggestions
289 |                 </p>
290 |               </div>
291 |               <button
292 |                 onClick={() => setShowFeedback(true)}
293 |                 className="px-4 py-2 text-sm font-medium bg-brand-blue text-white rounded-md hover:bg-brand-blue/90 focus:outline-none focus:ring-2 focus:ring-ring">
294 |                 Send Feedback
295 |               </button>
296 |             </div>
297 | 
298 |             <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/30">
299 |               <div>
300 |                 <h4 className="font-medium text-foreground">Report Issues</h4>
301 |                 <p className="text-sm text-muted-foreground mt-1">
302 |                   Found a bug or technical issue? Report it directly on GitHub
303 |                 </p>
304 |               </div>
305 |               <a
306 |                 href="https://github.com/emmaccen/linkedin-copilot/issues"
307 |                 target="_blank"
308 |                 rel="noopener noreferrer"
309 |                 className="px-4 py-2 text-sm font-medium border border-input rounded-md hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring">
310 |                 View Issues
311 |               </a>
312 |             </div>
313 |           </div>
314 |         </div>
315 |         <FeedbackModal
316 |           isOpen={showFeedback}
317 |           onClose={() => setShowFeedback(false)}
318 |         />
319 |       </div>
320 |     </div>
321 |   )
322 | }
323 | 


--------------------------------------------------------------------------------
/components/TemplateManager.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Dialog,
  3 |   DialogPanel,
  4 |   DialogTitle,
  5 |   Listbox,
  6 |   ListboxButton,
  7 |   ListboxOption,
  8 |   ListboxOptions,
  9 |   Switch,
 10 |   Transition,
 11 |   TransitionChild
 12 | } from "@headlessui/react"
 13 | import {
 14 |   CheckIcon,
 15 |   ChevronDownIcon,
 16 |   PencilIcon,
 17 |   PlusIcon,
 18 |   TrashIcon
 19 | } from "lucide-react"
 20 | import { Fragment, useEffect, useState } from "react"
 21 | 
 22 | import { useGlobalState } from "~store/GlobalContext"
 23 | import type { ContextType, Template, TemplateCategory } from "~types"
 24 | import { saveToLocalStorage } from "~utils"
 25 | 
 26 | const contextLabels: Record<ContextType, string> = {
 27 |   feed: "Feed",
 28 |   dm: "DM",
 29 |   connection: "Connection",
 30 |   post: "Post"
 31 | }
 32 | 
 33 | const contextColors: Record<ContextType, string> = {
 34 |   feed: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
 35 |   dm: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
 36 |   connection:
 37 |     "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
 38 |   post: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
 39 | }
 40 | 
 41 | function TemplateManager() {
 42 |   const { templates } = useGlobalState()
 43 |   const [categories, setCategories] = useState<string[]>([])
 44 |   const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
 45 |   const [editingTemplate, setEditingTemplate] = useState<Template | null>(null)
 46 |   const [isModalOpen, setIsModalOpen] = useState(false)
 47 |   const [modalMessage, setModalMessage] = useState("")
 48 | 
 49 |   const [currentTemplateCategory, setCurrentTemplateCategory] =
 50 |     useState<TemplateCategory | null>(null)
 51 | 
 52 |   useEffect(() => {
 53 |     const categories = Object.keys(templates)
 54 |     if (categories.length > 0) {
 55 |       setCategories(categories)
 56 |       setSelectedCategory(
 57 |         categories[categories.indexOf(selectedCategory)] ?? categories[0]
 58 |       )
 59 |       setCurrentTemplateCategory(
 60 |         templates[categories[categories.indexOf(selectedCategory)]] ??
 61 |           templates[categories[0]]
 62 |       )
 63 |     }
 64 |   }, [templates])
 65 | 
 66 |   useEffect(() => {
 67 |     if (selectedCategory && templates[selectedCategory])
 68 |       setCurrentTemplateCategory(templates[selectedCategory])
 69 |   }, [selectedCategory])
 70 | 
 71 |   const truncateMessage = (message: string, maxLength: number = 60) => {
 72 |     return message.length > maxLength
 73 |       ? message.substring(0, maxLength) + "..."
 74 |       : message
 75 |   }
 76 | 
 77 |   const handleCategoryToggle = (enabled: boolean) => {
 78 |     if (!selectedCategory || !templates[selectedCategory]) return
 79 |     saveToLocalStorage<Record<string, TemplateCategory>>("templates", {
 80 |       ...templates,
 81 |       [selectedCategory]: {
 82 |         ...templates[selectedCategory],
 83 |         active: enabled
 84 |       }
 85 |     })
 86 |   }
 87 | 
 88 |   const handleEditTemplate = (template: Template) => {
 89 |     setEditingTemplate(template)
 90 |     setModalMessage(template.message)
 91 |     setIsModalOpen(true)
 92 |   }
 93 | 
 94 |   const handleSaveTemplate = (newEntry?: Template) => {
 95 |     if (!editingTemplate) return
 96 | 
 97 |     const placeholders = extractPlaceholders(modalMessage)
 98 |     saveToLocalStorage<Record<string, TemplateCategory>>("templates", {
 99 |       ...templates,
100 |       [selectedCategory]: {
101 |         ...templates[selectedCategory],
102 |         templates: newEntry
103 |           ? [...templates[selectedCategory].templates, newEntry]
104 |           : templates[selectedCategory].templates.map((t) =>
105 |               t.id === editingTemplate.id
106 |                 ? {
107 |                     ...t,
108 |                     message: modalMessage,
109 |                     placeholders,
110 |                     aiGenerated: false
111 |                   }
112 |                 : t
113 |             )
114 |       }
115 |     })
116 | 
117 |     setIsModalOpen(false)
118 |     setEditingTemplate(null)
119 |     setModalMessage("")
120 |   }
121 | 
122 |   const extractPlaceholders = (message: string): string[] => {
123 |     const matches = message.match(/\{\{([^}]+)\}\}/g)
124 |     return matches ? matches.map((match) => match.slice(2, -2)) : []
125 |   }
126 | 
127 |   const handleToggleTemplateActive = (templateId: string) => {
128 |     saveToLocalStorage<Record<string, TemplateCategory>>("templates", {
129 |       ...templates,
130 |       [selectedCategory]: {
131 |         ...templates[selectedCategory],
132 |         templates: templates[selectedCategory].templates.map((t) =>
133 |           t.id === templateId ? { ...t, active: !t.active } : t
134 |         )
135 |       }
136 |     })
137 |   }
138 | 
139 |   const handleDeleteTemplate = (templateId: string) => {
140 |     if (!window.confirm("Are you sure you want to delete this template?")) {
141 |       return
142 |     }
143 |     saveToLocalStorage<Record<string, TemplateCategory>>("templates", {
144 |       ...templates,
145 |       [selectedCategory]: {
146 |         ...templates[selectedCategory],
147 |         templates: templates[selectedCategory].templates.filter(
148 |           (t) => t.id !== templateId
149 |         )
150 |       }
151 |     })
152 |   }
153 | 
154 |   const handleDeleteCategory = () => {
155 |     if (!selectedCategory || !templates[selectedCategory]) return
156 | 
157 |     if (
158 |       !window.confirm(
159 |         "Are you sure you want to delete this category and all it's templates?"
160 |       )
161 |     ) {
162 |       return
163 |     }
164 |     const updatedTemplates = { ...templates }
165 |     delete updatedTemplates[selectedCategory]
166 |     saveToLocalStorage<Record<string, TemplateCategory>>(
167 |       "templates",
168 |       updatedTemplates
169 |     )
170 |     if (Object.keys(updatedTemplates).length === 0) {
171 |       const categories = Object.keys(updatedTemplates)
172 |       setCategories(categories)
173 |       setSelectedCategory(
174 |         categories[categories.indexOf(selectedCategory)] ?? categories[0]
175 |       )
176 |       setCurrentTemplateCategory(
177 |         templates[categories[categories.indexOf(selectedCategory)]] ??
178 |           templates[categories[0]]
179 |       )
180 |     }
181 |   }
182 | 
183 |   return (
184 |     <div className="">
185 |       <div className="mb-8">
186 |         <h2 className="text-2xl font-bold mb-2">Template Manager</h2>
187 |         <p className="text-muted-foreground">
188 |           Manage your LinkedIn response templates efficiently.
189 |         </p>
190 |       </div>
191 | 
192 |       <div className="flex items-center justify-between mb-3">
193 |         <div className="flex items-center gap-4">
194 |           <div className="relative">
195 |             <Listbox value={selectedCategory} onChange={setSelectedCategory}>
196 |               <div className="relative">
197 |                 <ListboxButton className="relative w-64 cursor-pointer rounded-lg bg-card border border-border py-3 px-4 text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent">
198 |                   <span className="flex items-center gap-2">
199 |                     <span className="text-xl">
200 |                       {currentTemplateCategory?.icon}
201 |                     </span>
202 |                     <span className="block truncate font-medium">
203 |                       {selectedCategory}
204 |                     </span>
205 |                   </span>
206 |                   <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
207 |                     <ChevronDownIcon
208 |                       className="h-5 w-5 text-muted-foreground"
209 |                       aria-hidden="true"
210 |                     />
211 |                   </span>
212 |                 </ListboxButton>
213 |                 <Transition
214 |                   as={Fragment}
215 |                   leave="transition ease-in duration-100"
216 |                   leaveFrom="opacity-100"
217 |                   leaveTo="opacity-0">
218 |                   <ListboxOptions
219 |                     anchor="top start"
220 |                     className="absolute z-10 mt-1 max-h-60 max-w-fit overflow-auto rounded-lg bg-card border border-border shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
221 |                     {categories.map((category) => (
222 |                       <ListboxOption
223 |                         key={category}
224 |                         className={({ focus }) =>
225 |                           `relative cursor-pointer select-none py-3 px-4 ${
226 |                             focus
227 |                               ? "bg-accent text-accent-foreground"
228 |                               : "text-foreground"
229 |                           }`
230 |                         }
231 |                         value={category}>
232 |                         {({ selected }) => (
233 |                           <div className="flex items-center gap-2">
234 |                             <span className="text-xl">
235 |                               {templates[category].icon}
236 |                             </span>
237 |                             <span
238 |                               className={`block truncate ${selected ? "font-semibold" : "font-normal"}`}>
239 |                               {category}
240 |                             </span>
241 |                             {selected && (
242 |                               <CheckIcon
243 |                                 className="h-5 w-5 text-brand-blue ml-auto"
244 |                                 aria-hidden="true"
245 |                               />
246 |                             )}
247 |                           </div>
248 |                         )}
249 |                       </ListboxOption>
250 |                     ))}
251 |                   </ListboxOptions>
252 |                 </Transition>
253 |               </div>
254 |             </Listbox>
255 |           </div>
256 |           {/* delete  */}
257 |           <button
258 |             onClick={() => handleDeleteCategory()}
259 |             className="text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 rounded-md p-1">
260 |             <TrashIcon className="h-4 w-4" />
261 |           </button>
262 | 
263 |           <div className="flex items-center gap-3">
264 |             <Switch
265 |               checked={currentTemplateCategory?.active}
266 |               onChange={handleCategoryToggle}
267 |               className={`${
268 |                 currentTemplateCategory?.active ? "bg-brand-blue" : "bg-muted"
269 |               } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2`}>
270 |               <span
271 |                 className={`${
272 |                   currentTemplateCategory?.active
273 |                     ? "translate-x-6"
274 |                     : "translate-x-1"
275 |                 } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
276 |               />
277 |             </Switch>
278 |             <span className="text-sm font-medium text-foreground">
279 |               {currentTemplateCategory?.active ? "Active" : "Inactive"}
280 |             </span>
281 |           </div>
282 |         </div>
283 | 
284 |         <button
285 |           onClick={() => {
286 |             handleEditTemplate({
287 |               id: crypto.randomUUID(),
288 |               message: "Hello, world!",
289 |               placeholders: [],
290 |               active: false,
291 |               aiGenerated: false
292 |             })
293 |           }}
294 |           className="inline-flex items-center gap-2 rounded-lg bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-offset-2 transition-colors">
295 |           <PlusIcon className="h-4 w-4" />
296 |           Add Template
297 |         </button>
298 |         {/* <button
299 |           onClick={handleDeleteCategory}
300 |           className="inline-flex items-center gap-2 rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 transition-colors">
301 |           <TrashIcon className="h-4 w-4" />
302 |           Delete Category
303 |         </button> */}
304 |       </div>
305 |       <div className="flex flex-wrap gap-2 mb-6">
306 |         {(Object.keys(contextLabels) as ContextType[]).map((ctx) => {
307 |           let isContextInCategory =
308 |             currentTemplateCategory?.context &&
309 |             currentTemplateCategory?.context.indexOf(ctx) !== -1
310 | 
311 |           return (
312 |             <button
313 |               title="toggle context"
314 |               onClick={() => {
315 |                 if (
316 |                   currentTemplateCategory &&
317 |                   currentTemplateCategory.context
318 |                 ) {
319 |                   const newContext = currentTemplateCategory.context.includes(
320 |                     ctx
321 |                   )
322 |                     ? currentTemplateCategory.context.filter((c) => c !== ctx)
323 |                     : [...currentTemplateCategory.context, ctx]
324 | 
325 |                   saveToLocalStorage<Record<string, TemplateCategory>>(
326 |                     "templates",
327 |                     {
328 |                       ...templates,
329 |                       [selectedCategory]: {
330 |                         ...currentTemplateCategory,
331 |                         context: newContext
332 |                       }
333 |                     }
334 |                   )
335 |                 }
336 |               }}
337 |               key={ctx}
338 |               className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${isContextInCategory ? contextColors[ctx] : "border opacity-30"}`}>
339 |               {contextLabels[ctx]}
340 |             </button>
341 |           )
342 |         })}
343 |       </div>
344 |       {/* Templates Table */}
345 |       <div className="bg-card rounded-lg border border-border shadow-sm overflow-hidden">
346 |         <div className="overflow-x-auto">
347 |           <table className="min-w-full divide-y divide-border">
348 |             <thead className="bg-muted/50">
349 |               <tr>
350 |                 <th
351 |                   scope="col"
352 |                   className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
353 |                   Status
354 |                 </th>
355 |                 <th
356 |                   scope="col"
357 |                   className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
358 |                   Message
359 |                 </th>
360 |                 <th
361 |                   title="Ai generated column"
362 |                   scope="col"
363 |                   className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
364 |                   Ai Gen
365 |                 </th>
366 |                 <th
367 |                   scope="col"
368 |                   className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
369 |                   Variables
370 |                 </th>
371 |                 <th
372 |                   scope="col"
373 |                   className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
374 |                   Actions
375 |                 </th>
376 |               </tr>
377 |             </thead>
378 |             <tbody className="bg-card divide-y divide-border">
379 |               {currentTemplateCategory?.templates.map((template) => (
380 |                 <tr
381 |                   key={template.id}
382 |                   className="hover:bg-muted/30 transition-colors">
383 |                   <td className="px-6 py-4 whitespace-nowrap">
384 |                     <Switch
385 |                       checked={template.active}
386 |                       onChange={() => handleToggleTemplateActive(template.id)}
387 |                       className={`${
388 |                         template.active ? "bg-brand-green" : "bg-muted"
389 |                       } relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-offset-2`}>
390 |                       <span
391 |                         className={`${
392 |                           template.active ? "translate-x-5" : "translate-x-1"
393 |                         } inline-block h-3 w-3 transform rounded-full bg-white transition-transform`}
394 |                       />
395 |                     </Switch>
396 |                   </td>
397 |                   <td className="px-6 py-4">
398 |                     <div
399 |                       className="text-sm text-foreground cursor-pointer hover:text-brand-blue transition-colors group"
400 |                       onClick={() => handleEditTemplate(template)}>
401 |                       <span className="group-hover:underline">
402 |                         {truncateMessage(template.message)}
403 |                       </span>
404 |                       {/* {template.message.length > 60 && ( */}
405 |                       <PencilIcon className="h-3 w-3 inline ml-5 opacity-0 group-hover:opacity-100" />
406 |                       {/* )} */}
407 |                     </div>
408 |                   </td>
409 |                   <td className="px-6 py-4 whitespace-nowrap">
410 |                     <div className="flex flex-wrap gap-1">
411 |                       <span
412 |                         className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
413 |                           template.aiGenerated
414 |                             ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
415 |                             : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
416 |                         }`}>
417 |                         {template.aiGenerated ? "Yes" : "No"}
418 |                       </span>
419 |                     </div>
420 |                   </td>
421 |                   <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
422 |                     {template.placeholders.length > 0 ? (
423 |                       <div className="flex flex-wrap gap-1">
424 |                         {template.placeholders.map((placeholder) => (
425 |                           <span
426 |                             key={placeholder}
427 |                             className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-muted text-muted-foreground">
428 |                             {placeholder}
429 |                           </span>
430 |                         ))}
431 |                       </div>
432 |                     ) : (
433 |                       <span className="text-muted-foreground/50">None</span>
434 |                     )}
435 |                   </td>
436 |                   <td className="flex items-center gap-2 px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
437 |                     <button
438 |                       onClick={() => handleEditTemplate(template)}
439 |                       className="text-brand-blue hover:text-brand-blue/80 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 rounded-md p-1">
440 |                       <PencilIcon className="h-4 w-4" />
441 |                     </button>
442 |                     <button
443 |                       onClick={() => handleDeleteTemplate(template.id)}
444 |                       className="text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 rounded-md p-1">
445 |                       <TrashIcon className="h-4 w-4" />
446 |                     </button>
447 |                   </td>
448 |                 </tr>
449 |               ))}
450 |             </tbody>
451 |           </table>
452 |         </div>
453 | 
454 |         {!currentTemplateCategory && (
455 |           <div className="text-center py-12">
456 |             <div className="text-muted-foreground">
457 |               <p className="text-lg font-medium mb-2">No templates yet</p>
458 |               <p className="text-sm">Add your first template to get started.</p>
459 |             </div>
460 |           </div>
461 |         )}
462 |       </div>
463 | 
464 |       {/* Edit Modal */}
465 |       <Transition appear show={isModalOpen} as={Fragment}>
466 |         <Dialog
467 |           as="div"
468 |           className="relative z-10"
469 |           onClose={() => setIsModalOpen(false)}>
470 |           <TransitionChild
471 |             as={Fragment}
472 |             enter="ease-out duration-300"
473 |             enterFrom="opacity-0"
474 |             enterTo="opacity-100"
475 |             leave="ease-in duration-200"
476 |             leaveFrom="opacity-100"
477 |             leaveTo="opacity-0">
478 |             <div className="fixed inset-0 bg-black bg-opacity-25" />
479 |           </TransitionChild>
480 | 
481 |           <div className="fixed inset-0 overflow-y-auto">
482 |             <div className="flex min-h-full items-center justify-center p-4 text-center">
483 |               <TransitionChild
484 |                 as={Fragment}
485 |                 enter="ease-out duration-300"
486 |                 enterFrom="opacity-0 scale-95"
487 |                 enterTo="opacity-100 scale-100"
488 |                 leave="ease-in duration-200"
489 |                 leaveFrom="opacity-100 scale-100"
490 |                 leaveTo="opacity-0 scale-95">
491 |                 <DialogPanel className="w-full max-w-2xl transform overflow-hidden rounded-lg bg-card border border-border p-6 text-left align-middle shadow-xl transition-all">
492 |                   <DialogTitle
493 |                     as="h3"
494 |                     className="text-lg font-medium leading-6 text-foreground mb-4">
495 |                     Edit Template
496 |                   </DialogTitle>
497 | 
498 |                   <div className="mb-4">
499 |                     <label
500 |                       htmlFor="message"
501 |                       className="block text-sm font-medium text-foreground mb-2">
502 |                       Message
503 |                     </label>
504 |                     <textarea
505 |                       id="message"
506 |                       rows={8}
507 |                       className="w-full rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-blue focus:border-transparent resize-none"
508 |                       placeholder="Enter your template message..."
509 |                       value={modalMessage}
510 |                       onChange={(e) => setModalMessage(e.target.value)}
511 |                     />
512 |                     <div className="flex justify-between items-center gap-4">
513 |                       <p className="mt-2 text-xs text-muted-foreground">
514 |                         Use{" "}
515 |                         <span className="font-mono bg-muted px-1 rounded">
516 |                           {"{{placeholder}}"}
517 |                         </span>{" "}
518 |                         for dynamic content
519 |                       </p>
520 |                       <p className="mt-2 text-xs text-muted-foreground">
521 |                         {modalMessage.length} characters
522 |                       </p>
523 |                     </div>
524 |                   </div>
525 | 
526 |                   <div className="flex items-center justify-end gap-3">
527 |                     <button
528 |                       type="button"
529 |                       className="inline-flex justify-center rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 transition-colors"
530 |                       onClick={() => setIsModalOpen(false)}>
531 |                       Cancel
532 |                     </button>
533 |                     <button
534 |                       type="button"
535 |                       className="inline-flex justify-center rounded-lg bg-brand-blue px-4 py-2 text-sm font-medium text-white hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 transition-colors"
536 |                       onClick={() => {
537 |                         const isExistingTemplate = templates[
538 |                           selectedCategory
539 |                         ]?.templates.some((t) => t.id === editingTemplate?.id)
540 |                         if (isExistingTemplate) {
541 |                           handleSaveTemplate()
542 |                         } else {
543 |                           handleSaveTemplate({
544 |                             id: crypto.randomUUID(),
545 |                             message: modalMessage,
546 |                             placeholders: extractPlaceholders(modalMessage),
547 |                             active: false,
548 |                             aiGenerated: false
549 |                           })
550 |                         }
551 |                       }}>
552 |                       Save Changes
553 |                     </button>
554 |                   </div>
555 |                 </DialogPanel>
556 |               </TransitionChild>
557 |             </div>
558 |           </div>
559 |         </Dialog>
560 |       </Transition>
561 |     </div>
562 |   )
563 | }
564 | 
565 | export default TemplateManager
566 | 


--------------------------------------------------------------------------------
/contents/copilot.ts:
--------------------------------------------------------------------------------
  1 | import type { PlasmoCSConfig } from "plasmo"
  2 | 
  3 | import { messageExtractor } from "~contents/LinkedInMessageExtractor"
  4 | import { linkedInTyping } from "~contents/TypingSimulator"
  5 | import { createLinkedInPostWithAi, generateReply } from "~lib/ai-copilot"
  6 | import Analytics from "~lib/analytics"
  7 | import {
  8 |   AiCommentSystemMessage,
  9 |   AiDmChatSystemMessage,
 10 |   AiSingleDmSystemMessage,
 11 |   aiWritingStyleSystemMessage
 12 | } from "~static-data"
 13 | import { linkedInCopilotStyles } from "~styles"
 14 | import {
 15 |   AnalyticsEventTypes,
 16 |   type AiDMChatMessage,
 17 |   type ContextType,
 18 |   type DropdownAction,
 19 |   type NotificationType,
 20 |   type TemplateCategory,
 21 |   type UsageStats,
 22 |   type UserDetails,
 23 |   type UserInfo,
 24 |   type UserSettings
 25 | } from "~types"
 26 | 
 27 | export const config: PlasmoCSConfig = {
 28 |   matches: ["https://*.linkedin.com/*"],
 29 |   all_frames: false
 30 | }
 31 | 
 32 | class LinkedinCopilot {
 33 |   private templates: Record<string, TemplateCategory>
 34 |   private userSettings: UserSettings
 35 |   private activeDropdowns: Set<HTMLElement> = new Set()
 36 |   private observer: MutationObserver
 37 |   private userDetails: UserDetails
 38 |   private messageObserver: MutationObserver
 39 |   private UserAnalytics: typeof Analytics
 40 | 
 41 |   constructor() {
 42 |     this.templates = {}
 43 |     this.userSettings = {
 44 |       typingDelay: 40,
 45 |       enableTypingSimulation: true
 46 |     }
 47 |     this.init()
 48 |     this.UserAnalytics = Analytics
 49 |   }
 50 | 
 51 |   private async init(): Promise<void> {
 52 |     await this.loadSettings()
 53 |     this.reloadSettingsOnStorageUpdate()
 54 |     this.setupDropdownObserver()
 55 |     this.injectStyles()
 56 |     this.scanForInputs()
 57 |     this.messageObserver = messageExtractor.watchForNewMessages(
 58 |       (message, replyButton) => this.AiReplySingleDM(message, replyButton)
 59 |     )
 60 |     this.unloadOnDestroy()
 61 |   }
 62 |   // run destroy to unload when user closes tab
 63 |   private unloadOnDestroy = () => {
 64 |     window.addEventListener("unload", () => {
 65 |       this.destroy()
 66 |     })
 67 |   }
 68 |   private reloadSettingsOnStorageUpdate = () => {
 69 |     chrome.storage.onChanged.addListener((changes, namespace) => {
 70 |       if (namespace === "local")
 71 |         if (
 72 |           changes["userSettings"] ||
 73 |           changes["templates"] ||
 74 |           changes["userDetails"]
 75 |         )
 76 |           this.loadSettings()
 77 |     })
 78 |   }
 79 | 
 80 |   private attachWritePostWithAiUI = (element: Element) => {
 81 |     // Check specifically for post dialog
 82 |     const postDialog = element.classList.contains("share-box")
 83 | 
 84 |     if (postDialog) {
 85 |       const postContainer = element
 86 |       const postInputBox = postContainer.querySelector(
 87 |         ".ql-editor[role='textbox']"
 88 |       )
 89 |       const writeWithAiTip = document.createElement("div")
 90 |       writeWithAiTip.innerHTML = `
 91 |                 <div class="writeWithAiTip">
 92 |                   <p class="">Linkedin Copilot is enabled, describe your post and click the "Pilot Button" to generate/edit content</p>
 93 |                   <button class="writeWithAiButton">Pilot ✨</button>
 94 |                 </div>
 95 |                 `
 96 |       const writeWithAiButtonAction = writeWithAiTip.querySelector(
 97 |         ".writeWithAiButton"
 98 |       ) as HTMLButtonElement
 99 |       writeWithAiButtonAction.addEventListener("click", async (e) => {
100 |         e.preventDefault()
101 |         await this.writeFeedPostWithAi()
102 |       })
103 |       if (postInputBox) {
104 |         postInputBox.parentElement.insertBefore(writeWithAiTip, postInputBox)
105 |       }
106 |     }
107 |   }
108 | 
109 |   private convertTextToHtml(text: string): string {
110 |     // Split into paragraphs (with line breaks)
111 |     const paragraphs = text.split(/\n\s*\n/)
112 |     return paragraphs
113 |       .map((paragraph) => `<p>${paragraph}</p><p><br></p>`)
114 |       .join("")
115 |   }
116 |   private async writeFeedPostWithAi(): Promise<void> {
117 |     // share-creation-state__text-editor
118 |     const postContainer = document.querySelector(".share-box") as HTMLElement
119 |     if (!postContainer) return
120 |     this.startAiProcessing(postContainer)
121 |     const inputElement = postContainer.querySelector(
122 |       ".ql-editor[role='textbox']"
123 |     ) as HTMLElement
124 | 
125 |     if (!inputElement) {
126 |       this.stopAiProcessing(postContainer)
127 |       return this.showNotification("Post input not found", "error")
128 |     }
129 | 
130 |     const textContent = inputElement?.textContent?.trim() || ""
131 |     if (!textContent) {
132 |       this.stopAiProcessing(postContainer)
133 |       return this.showNotification("Post content is empty", "warning")
134 |     }
135 | 
136 |     try {
137 |       const stream = await createLinkedInPostWithAi({
138 |         message: textContent,
139 |         systemMessage: aiWritingStyleSystemMessage({
140 |           personalInfo: this.userDetails
141 |         })
142 |       })
143 |       this.setInputValue("", inputElement)
144 |       let finalOutput = ""
145 |       for await (const chunk of stream) {
146 |         finalOutput += chunk.choices[0]?.delta?.content || ""
147 |         this.setInputValue(
148 |           chunk.choices[0]?.delta?.content || "",
149 |           inputElement,
150 |           true
151 |         )
152 |       }
153 | 
154 |       // For contenteditable elements (like LinkedIn's post composer)
155 |       const htmlMessage = this.convertTextToHtml(finalOutput)
156 |       this.setInputValue(htmlMessage, inputElement, false)
157 | 
158 |       this.stopAiProcessing(postContainer)
159 |       chrome.runtime.sendMessage(
160 |         {
161 |           type: AnalyticsEventTypes.GA_EVENT,
162 |           eventName: AnalyticsEventTypes.AI_POST_CREATED,
163 |           eventParams: undefined
164 |         },
165 |         (response) => {}
166 |       )
167 |     } catch (error) {
168 |       this.showNotification("AI service unavailable", "error")
169 |       this.stopAiProcessing(postContainer)
170 |       chrome.runtime.sendMessage(
171 |         {
172 |           type: AnalyticsEventTypes.GA_ERROR_EVENT,
173 |           eventName: AnalyticsEventTypes.AI_POST_CREATED,
174 |           eventParams: undefined
175 |         },
176 |         (response) => {}
177 |       )
178 |     }
179 |   }
180 | 
181 |   private AiReplySingleDM = (
182 |     message: AiDMChatMessage,
183 |     replyButton: Element
184 |   ) => {
185 |     replyButton.addEventListener("click", (e) => {
186 |       e.preventDefault()
187 | 
188 |       const dmContainer = this.findTopLevelContainer(
189 |         message.element as HTMLElement,
190 |         (element) =>
191 |           !!element.querySelector(
192 |             ".msg-form__contenteditable[contenteditable='true']"
193 |           )
194 |       )
195 |       if (!dmContainer) return
196 | 
197 |       const dmInput = dmContainer.querySelector(
198 |         ".msg-form__contenteditable[contenteditable='true']"
199 |       ) as HTMLElement
200 |       if (!dmInput) return
201 |       const loaderContainer = dmInput.closest(
202 |         ".msg-form__msg-content-container--scrollable"
203 |       ) as HTMLElement
204 |       this.startAiProcessing(loaderContainer)
205 |       this.handleSingleDmMessageAIReply(dmInput, message.text).finally(() => {
206 |         this.stopAiProcessing(loaderContainer)
207 |       })
208 |     })
209 |   }
210 |   private async loadSettings(): Promise<void> {
211 |     try {
212 |       const result = await chrome.storage.local.get([
213 |         "templates",
214 |         "userSettings",
215 |         "userDetails"
216 |       ])
217 |       this.userSettings = {
218 |         ...this.userSettings,
219 |         ...(result.userSettings ? JSON.parse(result.userSettings) : {})
220 |       }
221 |       this.userDetails = result.userDetails
222 |         ? JSON.parse(result.userDetails)
223 |         : {
224 |             fullName: "",
225 |             professionalTitle: "",
226 |             professionalSummary: ""
227 |           }
228 |       if (result.templates) this.templates = JSON.parse(result.templates)
229 |     } catch (error) {
230 |       console.error("Error loading settings:", error)
231 |     }
232 |   }
233 | 
234 |   private injectStyles(): void {
235 |     const styleId = "copilot-dropdown-styles"
236 |     if (document.getElementById(styleId)) return
237 | 
238 |     const style = document.createElement("style")
239 |     style.id = styleId
240 |     style.textContent = linkedInCopilotStyles
241 |     document.head.appendChild(style)
242 |   }
243 | 
244 |   private setupDropdownObserver(): void {
245 |     this.observer = new MutationObserver((mutations) => {
246 |       mutations.forEach((mutation) => {
247 |         if (mutation.type === "childList") {
248 |           mutation.addedNodes.forEach((node) => {
249 |             if (node.nodeType === Node.ELEMENT_NODE) {
250 |               const element = node as Element
251 |               // Scan for inputs
252 |               this.scanForInputs(element)
253 |               this.attachWritePostWithAiUI(element)
254 |             }
255 |           })
256 |         }
257 |       })
258 |     })
259 | 
260 |     this.observer.observe(document.body, {
261 |       childList: true,
262 |       subtree: true
263 |     })
264 |   }
265 | 
266 |   private scanForInputs(container: Element = document as any as Element): void {
267 |     const placeholders = [
268 |       "comment",
269 |       "loved",
270 |       "support",
271 |       "insightful",
272 |       "funny",
273 |       "wishes"
274 |     ]
275 |     const commentBoxes = Array.from(
276 |       container.querySelectorAll(".ql-editor[role='textbox']")
277 |     ).filter((el) =>
278 |       placeholders.some((text) =>
279 |         el.getAttribute("data-placeholder")?.toLowerCase().includes(text)
280 |       )
281 |     )
282 | 
283 |     const dmBoxes = container.querySelectorAll(
284 |       ".msg-form__contenteditable[contenteditable='true']"
285 |     )
286 |     if (dmBoxes.length > 0) {
287 |       this.attachPilotToDmBoxes(dmBoxes[0] as HTMLElement, "dm")
288 |     }
289 | 
290 |     commentBoxes.forEach((box) =>
291 |       this.attachDropdown(box as HTMLElement, "feed")
292 |     )
293 |   }
294 | 
295 |   private findTopLevelContainer(
296 |     element: HTMLElement,
297 |     criteria: (current: HTMLElement) => boolean
298 |   ): HTMLElement {
299 |     let current = element
300 | 
301 |     while (
302 |       !criteria(current) &&
303 |       current.parentElement &&
304 |       current.parentElement.tagName !== "BODY"
305 |     ) {
306 |       current = current.parentElement
307 |     }
308 | 
309 |     return current
310 |   }
311 | 
312 |   private attachDropdown(
313 |     inputElement: HTMLElement,
314 |     context: ContextType
315 |   ): void {
316 |     if (inputElement.hasAttribute("data-copilot-attached")) return
317 | 
318 |     inputElement.setAttribute("data-copilot-attached", "true")
319 | 
320 |     const dropdown = this.createDropdown(context, inputElement)
321 | 
322 |     const inputContainer = inputElement.closest(
323 |       ".comments-comment-box__form"
324 |     ) as HTMLElement
325 | 
326 |     if (inputContainer.parentElement) {
327 |       inputContainer.parentElement.insertAdjacentElement("afterend", dropdown)
328 |     }
329 | 
330 |     // Show dropdown on focus
331 |     inputElement.addEventListener("focus", () => {
332 |       this.showDropdown(dropdown)
333 |     })
334 | 
335 |     // Input might already be focused before we attached the "focus" event
336 |     if (document.activeElement === inputElement) {
337 |       this.showDropdown(dropdown)
338 |     }
339 | 
340 |     // Hide dropdown on blur (with delay for click handling)
341 |     // inputElement.addEventListener("blur", () => {
342 |     //   setTimeout(() => {
343 |     //     if (!dropdown.matches(":hover")) {
344 |     //       this.hideDropdown(dropdown)
345 |     //     }
346 |     //   }, 150)
347 |     // })
348 |   }
349 | 
350 |   private attachPilotToDmBoxes = (
351 |     inputElement: HTMLElement,
352 |     context: ContextType
353 |   ): void => {
354 |     if (inputElement.hasAttribute("data-copilot-attached")) return
355 | 
356 |     inputElement.setAttribute("data-copilot-attached", "true")
357 | 
358 |     const dropdown = this.createDropdown(context, inputElement)
359 | 
360 |     const inputContainer = inputElement.closest(
361 |       ".msg-form__msg-content-container"
362 |     ) as HTMLElement
363 | 
364 |     inputContainer.insertAdjacentElement("afterend", dropdown)
365 |   }
366 | 
367 |   private createDropdown(
368 |     context: ContextType,
369 |     inputElement: HTMLElement
370 |   ): HTMLElement {
371 |     const dropdown = document.createElement("div")
372 |     dropdown.className = "copilot-dropdown"
373 |     // dropdown.style.display = "none"
374 | 
375 |     const actions = this.getActionsForContext(context)
376 | 
377 |     // Create capsule container
378 |     const capsuleContainer = document.createElement("div")
379 |     capsuleContainer.className = "copilot-capsule-container"
380 | 
381 |     actions.forEach((action) => {
382 |       const capsule = document.createElement("div")
383 |       capsule.className = `copilot-capsule ${action.category === "ai" ? "copilot-capsule-ai" : "copilot-capsule-template"}`
384 | 
385 |       capsule.innerHTML = `
386 |       <span class="copilot-capsule-icon">${action.icon}</span>
387 |       <span class="copilot-capsule-text">${action.label}</span>
388 |     `
389 | 
390 |       capsule.addEventListener("click", (e) => {
391 |         e.preventDefault()
392 |         this.handleDropdownAction(action, inputElement, context)
393 |         // this.hideDropdown(dropdown)
394 |       })
395 | 
396 |       capsuleContainer.appendChild(capsule)
397 |     })
398 | 
399 |     dropdown.appendChild(capsuleContainer)
400 | 
401 |     return dropdown
402 |   }
403 | 
404 |   private startAiProcessing(element: HTMLElement): void {
405 |     if (element) element.classList.add("ai-processing", "ai-processing-shimmer")
406 |   }
407 | 
408 |   private stopAiProcessing(element: HTMLElement): void {
409 |     if (element)
410 |       element.classList.remove("ai-processing", "ai-processing-shimmer")
411 |   }
412 | 
413 |   private getActionsForContext(context: ContextType): DropdownAction[] {
414 |     const baseActions: DropdownAction[] = []
415 | 
416 |     const sectionTemplate = () => {
417 |       let allSections: {
418 |         [Key: string]: {
419 |           [group: string]: TemplateCategory
420 |         }
421 |       } = {}
422 |       for (const [group, template] of Object.entries(this.templates)) {
423 |         if (template.active && template.context.includes(context)) {
424 |           template.context.forEach((section) => {
425 |             if (!allSections[section]) {
426 |               allSections[section] = {}
427 |             }
428 |             allSections[section][group] = template
429 |           })
430 |         }
431 |       }
432 | 
433 |       return allSections
434 |     }
435 | 
436 |     if (context === "feed") {
437 |       baseActions.push({
438 |         id: "ai-reply",
439 |         label: "Reply with AI",
440 |         icon: "",
441 |         category: "ai"
442 |       })
443 |       for (const [group] of Object.entries(sectionTemplate()["feed"] ?? {})) {
444 |         baseActions.push({
445 |           id: `template-${group}`,
446 |           label: `Reply with ${group}`,
447 |           icon: this.templates[group].icon,
448 |           category: group
449 |         })
450 |       }
451 |     }
452 | 
453 |     if (context === "dm") {
454 |       baseActions.push({
455 |         id: "ai-reply",
456 |         label: "Reply with AI",
457 |         icon: "",
458 |         category: "ai"
459 |       })
460 |       for (const [group] of Object.entries(sectionTemplate()["dm"] ?? {})) {
461 |         baseActions.push({
462 |           id: `template-${group}`,
463 |           label: `Reply with ${group}`,
464 |           icon: this.templates[group].icon,
465 |           category: group
466 |         })
467 |       }
468 |     }
469 | 
470 |     return baseActions
471 |   }
472 | 
473 |   private async handleDropdownAction(
474 |     action: DropdownAction,
475 |     inputElement: HTMLElement,
476 |     context: ContextType
477 |   ): Promise<void> {
478 |     if (action.category === "ai") {
479 |       if (action.id === "ai-reply") {
480 |         // Handle AI reply for feed or DM
481 |         if (context === "dm") {
482 |           await this.handleAIChatHistoryReply(inputElement)
483 |         } else {
484 |           await this.ReplyPostCommentWithAI(inputElement, context)
485 |         }
486 |       }
487 |     } else {
488 |       await this.handleTemplateReply(action.category, inputElement, context)
489 |     }
490 |   }
491 | 
492 |   private extractPostContent(inputElement: HTMLElement): string {
493 |     // Find the post content relative to the comment box
494 |     const postContainer =
495 |       inputElement.closest(".feed-shared-update-v2") ||
496 |       inputElement.closest(
497 |         ".feed-shared-update-detail-viewer__overflow-content"
498 |       )
499 |     if (!postContainer) return ""
500 | 
501 |     const contentElement = postContainer.querySelector(
502 |       ".update-components-text"
503 |     )
504 |     return contentElement?.textContent?.trim() || ""
505 |   }
506 | 
507 |   private async handleSingleDmMessageAIReply(
508 |     inputElement: HTMLElement,
509 |     DmMessage: string
510 |   ): Promise<void> {
511 |     try {
512 |       linkedInTyping.setMessage("", inputElement)
513 | 
514 |       const stream = await generateReply({
515 |         message: DmMessage,
516 |         systemMessage: AiSingleDmSystemMessage({
517 |           personalInfo: this.userDetails
518 |         })
519 |       })
520 |       let reply = ""
521 |       for await (const chunk of stream) {
522 |         reply += chunk.choices[0]?.delta?.content || ""
523 |       }
524 |       linkedInTyping.setMessage(reply, inputElement)
525 |       chrome.runtime.sendMessage(
526 |         {
527 |           type: AnalyticsEventTypes.GA_EVENT,
528 |           eventName: AnalyticsEventTypes.AI_DM_SINGLE_REPLY_CREATED,
529 |           eventParams: undefined
530 |         },
531 |         (response) => {}
532 |       )
533 |     } catch (error) {
534 |       console.log(error)
535 |       this.showNotification("AI service unavailable", "error")
536 |       chrome.runtime.sendMessage(
537 |         {
538 |           type: AnalyticsEventTypes.GA_ERROR_EVENT,
539 |           eventName: AnalyticsEventTypes.AI_DM_SINGLE_REPLY_CREATED,
540 |           eventParams: undefined
541 |         },
542 |         (response) => {}
543 |       )
544 |     }
545 |   }
546 |   private async handleAIChatHistoryReply(
547 |     inputElement: HTMLElement
548 |   ): Promise<void> {
549 |     try {
550 |       const loaderContainer = inputElement.closest(
551 |         ".msg-form__msg-content-container--scrollable"
552 |       ) as HTMLElement
553 |       this.startAiProcessing(loaderContainer)
554 |       const chatContext = messageExtractor.getChatContextForAI()
555 | 
556 |       linkedInTyping.setMessage("", inputElement)
557 | 
558 |       const stream = await generateReply({
559 |         message: chatContext,
560 |         systemMessage: AiDmChatSystemMessage({
561 |           personalInfo: this.userDetails
562 |         })
563 |       })
564 |       let reply = ""
565 |       for await (const chunk of stream) {
566 |         reply += chunk.choices[0]?.delta?.content || ""
567 |       }
568 |       linkedInTyping.setMessage(reply, inputElement)
569 |       this.stopAiProcessing(loaderContainer)
570 |       chrome.runtime.sendMessage(
571 |         {
572 |           type: AnalyticsEventTypes.GA_EVENT,
573 |           eventName: AnalyticsEventTypes.AI_DM_CHAT_HISTORY_REPLY_CREATED,
574 |           eventParams: undefined
575 |         },
576 |         (response) => {}
577 |       )
578 |     } catch (error) {
579 |       this.showNotification("AI service unavailable", "error")
580 |       chrome.runtime.sendMessage(
581 |         {
582 |           type: AnalyticsEventTypes.GA_ERROR_EVENT,
583 |           eventName: AnalyticsEventTypes.AI_DM_CHAT_HISTORY_REPLY_CREATED,
584 |           eventParams: undefined
585 |         },
586 |         (response) => {}
587 |       )
588 |     }
589 |   }
590 |   private async ReplyPostCommentWithAI(
591 |     inputElement: HTMLElement,
592 |     context: ContextType
593 |   ): Promise<void> {
594 |     // Extract post content for context
595 |     const postContent = this.extractPostContent(inputElement)
596 |     const userInfo = this.extractUserInfo(inputElement)
597 | 
598 |     try {
599 |       this.setInputValue("", inputElement)
600 |       const loaderContainer = inputElement.closest(
601 |         ".comments-comment-texteditor"
602 |       ) as HTMLElement
603 |       this.startAiProcessing(loaderContainer)
604 |       const stream = await generateReply({
605 |         message: postContent,
606 |         systemMessage: AiCommentSystemMessage({
607 |           linkedInPostUserInfo: userInfo,
608 |           personalInfo: this.userDetails,
609 |           context
610 |         })
611 |       })
612 |       for await (const chunk of stream) {
613 |         this.setInputValue(
614 |           chunk.choices[0]?.delta?.content || "",
615 |           inputElement,
616 |           true
617 |         )
618 |       }
619 |       this.stopAiProcessing(loaderContainer)
620 |       chrome.runtime.sendMessage(
621 |         {
622 |           type: AnalyticsEventTypes.GA_EVENT,
623 |           eventName: AnalyticsEventTypes.POST_COMMENT_CREATED,
624 |           eventParams: undefined
625 |         },
626 |         (response) => {}
627 |       )
628 |     } catch (error) {
629 |       console.log(error)
630 |       this.showNotification("AI service unavailable", "error")
631 |       chrome.runtime.sendMessage(
632 |         {
633 |           type: AnalyticsEventTypes.GA_ERROR_EVENT,
634 |           eventName: AnalyticsEventTypes.POST_COMMENT_CREATED,
635 |           eventParams: undefined
636 |         },
637 |         (response) => {}
638 |       )
639 |     }
640 |   }
641 | 
642 |   private extractUserInfo(inputElement: HTMLElement): UserInfo {
643 |     const info: UserInfo = {}
644 | 
645 |     const postContainer =
646 |       inputElement.closest(".feed-shared-update-v2") ||
647 |       inputElement.closest(".feed-shared-update-detail-viewer__right-panel")
648 |     if (!postContainer) return {}
649 | 
650 |     // Try to extract name
651 |     const nameElement = postContainer.querySelector(
652 |       ".update-components-actor__title"
653 |     )
654 |     if (nameElement?.textContent) {
655 |       info.name = nameElement.textContent.trim().split(" ")[0]
656 |     }
657 | 
658 |     const userDesc = postContainer.querySelector(
659 |       ".update-components-actor__description"
660 |     )
661 |     if (userDesc?.textContent) {
662 |       info.desc = userDesc.textContent.trim()
663 |     }
664 | 
665 |     return info
666 |   }
667 | 
668 |   private async handleTemplateReply(
669 |     category: string,
670 |     inputElement: HTMLElement,
671 |     context: ContextType
672 |   ): Promise<void> {
673 |     if (
674 |       this.templates[category].active &&
675 |       !this.templates[category].templates.length
676 |     )
677 |       return this.showNotification(
678 |         `No templates available for "${category}"`,
679 |         "warning"
680 |       )
681 | 
682 |     try {
683 |       const template: TemplateCategory = this.templates[category]
684 | 
685 |       template.templates = template.templates.filter(
686 |         (template) => template.active
687 |       )
688 | 
689 |       // For now, I'll use random selection
690 |       // TODO: Implement template selection dropdown for better UX
691 |       const selectedTemplate =
692 |         template.templates[
693 |           Math.floor(Math.random() * template.templates.length)
694 |         ]
695 | 
696 |       this.showNotification(`Using "${category}" template...`, "info")
697 | 
698 |       const userInfo = this.extractUserInfo(inputElement)
699 |       const message = this.processTemplate(selectedTemplate.message, userInfo)
700 | 
701 |       if (this.userSettings.enableTypingSimulation) {
702 |         if (context === "dm")
703 |           await linkedInTyping.simulateTyping(
704 |             message,
705 |             inputElement,
706 |             this.userSettings
707 |           )
708 |         else await this.typeMessage(message, inputElement)
709 |       } else {
710 |         if (context === "dm") linkedInTyping.setMessage(message, inputElement)
711 |         else this.setInputValue(message, inputElement)
712 |       }
713 |       chrome.runtime.sendMessage(
714 |         {
715 |           type: AnalyticsEventTypes.GA_EVENT,
716 |           eventName: AnalyticsEventTypes.TEMPLATE_USED,
717 |           eventParams: undefined
718 |         },
719 |         (response) => {}
720 |       )
721 |     } catch (error) {
722 |       console.error("Error handling template reply:", error)
723 |       this.showNotification("Failed to apply template", "error")
724 |       chrome.runtime.sendMessage(
725 |         {
726 |           type: AnalyticsEventTypes.GA_ERROR_EVENT,
727 |           eventName: AnalyticsEventTypes.TEMPLATE_USED,
728 |           eventParams: undefined
729 |         },
730 |         (response) => {}
731 |       )
732 |     }
733 |   }
734 | 
735 |   private showDropdown(dropdown: HTMLElement): void {
736 |     dropdown.style.display = "block"
737 |     this.activeDropdowns.add(dropdown)
738 |   }
739 | 
740 |   private hideDropdown(dropdown: HTMLElement): void {
741 |     dropdown.style.display = "none"
742 |     this.activeDropdowns.delete(dropdown)
743 |   }
744 | 
745 |   private processTemplate(message: string, userInfo: UserInfo): string {
746 |     let processed = message
747 | 
748 |     Object.keys(userInfo).forEach((key) => {
749 |       const placeholder = `{{${key}}}`
750 |       const value = userInfo[key]
751 |       if (processed.includes(placeholder) && value) {
752 |         processed = processed.replace(new RegExp(placeholder, "g"), value)
753 |       }
754 |     })
755 | 
756 |     processed = processed.replace(/\{\{[^}]+\}\}/g, "") // Remove any remaining placeholders
757 |     return processed.trim()
758 |   }
759 | 
760 |   private async typeMessage(
761 |     message: string,
762 |     inputElement: HTMLElement
763 |   ): Promise<void> {
764 |     inputElement.focus()
765 | 
766 |     let i = 0
767 |     const typeChar = (): void => {
768 |       if (i >= message.length) return
769 | 
770 |       const char = message.charAt(i)
771 | 
772 |       if (inputElement.tagName === "TEXTAREA") {
773 |         const textarea = inputElement as HTMLTextAreaElement
774 |         textarea.value += char
775 |       } else {
776 |         inputElement.textContent += char
777 |       }
778 | 
779 |       const inputEvent = new InputEvent("input", {
780 |         bubbles: true,
781 |         cancelable: true,
782 |         data: char,
783 |         inputType: "insertText"
784 |       })
785 | 
786 |       inputElement.dispatchEvent(inputEvent)
787 |       i++
788 | 
789 |       if (i < message.length) {
790 |         setTimeout(typeChar, this.userSettings.typingDelay)
791 |       }
792 |     }
793 | 
794 |     typeChar()
795 |   }
796 | 
797 |   private setInputValue(
798 |     message: string,
799 |     inputElement: HTMLElement,
800 |     append = false
801 |   ): void {
802 |     inputElement.focus()
803 | 
804 |     if (inputElement.tagName === "TEXTAREA") {
805 |       const textarea = inputElement as HTMLTextAreaElement
806 |       if (append) textarea.value += message
807 |       else textarea.value = message
808 |     } else {
809 |       if (append) inputElement.textContent += message
810 |       else inputElement.innerHTML = message
811 |     }
812 | 
813 |     inputElement.dispatchEvent(new Event("input", { bubbles: true }))
814 |     inputElement.dispatchEvent(new Event("change", { bubbles: true }))
815 |   }
816 | 
817 |   private showNotification(
818 |     message: string,
819 |     type: NotificationType = "info"
820 |   ): void {
821 |     const notification = document.createElement("div")
822 |     notification.className = `linkedin-auto-reply-notification ${type}`
823 |     notification.textContent = message
824 | 
825 |     document.body.appendChild(notification)
826 | 
827 |     setTimeout(() => {
828 |       notification.classList.add("show")
829 |     }, 100)
830 | 
831 |     setTimeout(() => {
832 |       notification.classList.remove("show")
833 |       setTimeout(() => {
834 |         if (document.body.contains(notification)) {
835 |           document.body.removeChild(notification)
836 |         }
837 |       }, 300)
838 |     }, 3000)
839 |   }
840 | 
841 |   private async updateUsageStats(category: string): Promise<void> {
842 |     const today = new Date().toDateString()
843 |     let currentUsageStats = await chrome.storage.local.get(["usageStats"])
844 |     const stats: UsageStats = currentUsageStats.usageStats
845 |       ? currentUsageStats.usageStats
846 |       : {}
847 |     if (!stats[today]) stats[today] = {}
848 |     if (!stats[today][category]) stats[today][category] = 0
849 | 
850 |     stats[today][category]++
851 |     stats[today].total = (stats[today].total || 0) + 1
852 | 
853 |     chrome.storage.local.set({ usageStats: stats })
854 |   }
855 | 
856 |   // Cleanup on unload
857 |   public destroy(): void {
858 |     this.observer?.disconnect()
859 |     this.activeDropdowns.forEach((dropdown) => dropdown.remove())
860 |     this.activeDropdowns.clear()
861 |     this.messageObserver.disconnect()
862 |     chrome.storage.local.remove("sessionData")
863 |     console.log("LinkedIn Copilot session terminated")
864 |   }
865 | }
866 | 
867 | // Initialize when DOM is ready
868 | const initializeCopilot = (): void => {
869 |   new LinkedinCopilot()
870 |   console.log("LinkedIn Copilot initialized")
871 | }
872 | 
873 | if (document.readyState === "loading") {
874 |   document.addEventListener("DOMContentLoaded", initializeCopilot)
875 | } else {
876 |   initializeCopilot()
877 | }
878 | 
879 | export { LinkedinCopilot }
880 | 


--------------------------------------------------------------------------------