Merge pull request #15 from grimmerk/code_explainer

feat(code_explainer): implement POC feature

Author: grimmerk

.gitignore

@@ -1,3 +1,5 @@
 desktop/electron/out
 
 electron/embedded.provisionprofile
+dev.db
+electron/prisma/migrations

README.md

@@ -57,43 +57,15 @@ Use this to quickly open and switch VS Code projects.
 8. [fixed] close the packaged app via cmd+q seems not close SwitchV-server-macos process? check by command: lsof -i:55688. Use ctrl+c to stop development (running via yarn start) is OK. (add close button on tray to help? I guess it is not helping). 
     1. Solved by electron sending kill server process in the before-quick event handler. Another person suggests to add one more step to handle SIGINT signal on server side, ref https://stackoverflow.com/questions/71523442/child-process-doesnt-exit.
 
-### debugger issue 
+### Use VS Code Debugger  
 
 **To debug main process**
 
-Below is a workaround way to debug main process: Its reference is 
-https://github.com/electron-userland/electron-forge/issues/1369#issuecomment-1172913835
-  
+In VS Code Run and Debug, choose `Electron: Main Process` to launch and debug.
 
-```json
-{
-  "type": "node",
-  "request": "launch",
-  "name": "Electron Main",
-  "runtimeExecutable": "npm",
-  "runtimeArgs": [
-      "run",
-      "start",
-  ],
-  "cwd": "${workspaceFolder}"
-}
-```
-
-electron-forge official site only mention how to debug main process but it has a bug 
-https://github.com/electron-userland/electron-forge/issues/1369
-
-```json
-{
-  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron-forge-vscode-nix",
-}
-```
-
-Error: Cannot find module '/Users/liamdawson/w/@electron-forge/cli/dist/electron-forge-start'
-
-
-**To debug render process (workaround way)**
+**To debug render process (below set up becomes broken after the timing updating electron 29 and add 2nd window, please directly set up breakpoints in the opened dev tool instead) **
 
-[electron site](https://www.electronjs.org/docs/latest/tutorial/debugging-vscode) and [ms github site](https://github.com/Microsoft/vscode-recipes/tree/master/Electron) both mention below setting to debug main proces 
+[electron site](https://www.electronjs.org/docs/latest/tutorial/debugging-vscode) and [ms github site](https://github.com/Microsoft/vscode-recipes/tree/master/Electron) both mention below setting to debug main process
 
 
 ```json 
@@ -107,7 +79,7 @@ and ms github site has a extra setting for debugging render process. But the abo
 1. `yarn start` (to start webpack server part) 
 2. launch compound "Electron: All" launch setting (from ms github site) to debug main & **render processes**. 
 
-The drawback is you will see two copy of SwitchV. And attaching render process takes a little time (e.g. only stop at some breakpoints after a while/refresh).
+The drawback is you will see two copy of SwitchV. And attaching render process takes a little time (e.g. only stop at some breakpoints after a while/refresh).~~
 
 ## notes about packaging a macOS app
 

electron/.vscode/launch.json

@@ -2,22 +2,27 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Node.js - Debug Current File",
+            "name": "Electron: Main Process",
             "type": "node",
             "request": "launch",
-            "program": "${file}"
+            "cwd": "${workspaceFolder}",
+            "runtimeExecutable": "yarn",
+            "windows": {
+                "runtimeExecutable": "yarn.cmd"
+            },
+            "runtimeArgs": [
+                "start"
+            ],
+            "outputCapture": "std",
         },
         {
+            "name": "Debug Current File",
             "type": "node",
             "request": "launch",
-            "name": "Electron Main",
-            "runtimeExecutable": "npm",
-            "runtimeArgs": [
-                "run",
-                "start",
-                "--remote-debugging-port=9223"
-            ],
-            "cwd": "${workspaceFolder}"
+            "program": "${file}",
+            "skipFiles": [
+                "<node_internals>/**"
+            ]
         },
         {
             "type": "node",

electron/README.md

@@ -0,0 +1,58 @@
+# SwitchV Electron App
+
+## Code Explainer Feature
+
+SwitchV now includes a Code Explainer feature powered by Anthropic's Claude AI. This feature allows you to get detailed explanations of code snippets with a simple keyboard shortcut.
+
+### Setup
+
+1. Make sure you have an Anthropic API key. You can get one from [Anthropic's website](https://console.anthropic.com/).
+
+2. Add your API key to the `.env` file in the `electron` directory:
+   ```
+   ANTHROPIC_API_KEY=your_api_key_here
+   ```
+
+3. Install dependencies:
+   ```
+   yarn
+   ```
+
+### Usage
+
+1. Start the application:
+   ```
+   yarn start
+   ```
+
+2. Select the code you want to explain in any editor.
+
+3. Press `Cmd+C` to copy the selected code to your clipboard.
+
+4. Press `Ctrl+Cmd+E` to open the Code Explainer window, which will:
+   - Create a floating window with the code from your clipboard
+   - Generate an explanation using Anthropic Claude
+
+5. The window will display your code and start generating an explanation.
+
+> Note: For a smooth demonstration workflow, make sure to copy your code to the clipboard before triggering the Code Explainer with Ctrl+Cmd+E.
+
+### How It Works
+
+- The Code Explainer uses Claude API to generate explanations.
+- The API request is made from the main Electron process (not the renderer) for security.
+- Explanations are streamed in real-time for a better user experience.
+- The UI is a semi-transparent floating window that can be closed when not needed.
+
+### Features
+
+- Syntax highlighting for various programming languages
+- Streaming explanation that updates in real-time
+- Automatic language detection
+- Error handling
+
+### Development Notes
+
+- API keys are loaded from `.env` using dotenv
+- The main API communication is in `AnthropicService.ts`
+- The UI component is in `CodeExplainer.tsx`

electron/forge.config.ts

@@ -8,8 +8,9 @@ import { WebpackPlugin } from '@electron-forge/plugin-webpack';
 import { mainConfig } from './webpack.main.config';
 import { rendererConfig } from './webpack.renderer.config';
 
-const fs = require('fs');
+import * as fs from 'fs';
 
+// Ensure compatibility with Electron Forge v7
 const config: ForgeConfig = {
   hooks: {
     generateAssets: async () => {
@@ -65,6 +66,14 @@ const config: ForgeConfig = {
               js: './src/preload.ts',
             },
           },
+          {
+            html: './src/explainer.html',
+            js: './src/explainer-renderer.ts',
+            name: 'explainer_window',
+            preload: {
+              js: './src/preload.ts',
+            },
+          },
         ],
       },
     }),

electron/package.json

@@ -6,60 +6,63 @@
   "main": ".webpack/main",
   "scripts": {
     "db": "prisma migrate dev",
-    "start": "NODE_ENV=development electron-forge start",
-    "dev": "EMBEDSERVER=1 NODE_ENV=development electron-forge start",
+    "start": "cross-env NODE_ENV=development electron-forge start",
+    "dev": "cross-env EMBEDSERVER=1 NODE_ENV=development electron-forge start",
+    "start:explainer": "cross-env NODE_ENV=development electron-forge start",
     "package": "electron-forge package",
-    "package_mas": "npm run prebuild && BUILD_TYPE=prod electron-forge package --platform=mas && npm run postbuild",
+    "package_mas": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge package --platform=darwin -- --mas && npm run postbuild",
     "prebuild": "sh prebuild.sh",
     "postbuild": "sh postbuild.sh",
-    "make": "npm run prebuild && BUILD_TYPE=prod electron-forge make && npm run postbuild",
-    "make_mas": "npm run prebuild && BUILD_TYPE=prod electron-forge make --platform=mas && npm run postbuild",
-    "make:staging": "npm run prebuild && BUILD_TYPE=staging electron-forge make && npm run postbuild",
+    "make": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge make && npm run postbuild",
+    "make_mas": "npm run prebuild && cross-env BUILD_TYPE=prod electron-forge make --platform=darwin -- --mas && npm run postbuild",
+    "make:staging": "npm run prebuild && cross-env BUILD_TYPE=staging electron-forge make && npm run postbuild",
     "make-x86": "electron-forge make --arch=x64 --platform=darwin",
     "publish": "electron-forge publish",
     "lint": "eslint --ext .ts,.tsx .",
-    "db:migrate": "prisma migrate dev"
+    "db:migrate": "prisma migrate dev",
+    "watch": "webpack --watch"
+
   },
   "keywords": [],
   "author": {
     "name": "Grimmer",
-    "email": "grimmer0125@gmail.com"
+    "email": "k@grimmer.com"
   },
   "license": "MIT",
-  "config": {
-    "forge": "./config.forge.js"
-  },
   "devDependencies": {
-    "@electron-forge/cli": "^6.0.4",
-    "@electron-forge/maker-deb": "^6.0.4",
-    "@electron-forge/maker-rpm": "^6.0.4",
-    "@electron-forge/maker-squirrel": "^6.0.4",
-    "@electron-forge/maker-zip": "^6.0.4",
-    "@electron-forge/plugin-webpack": "^6.0.4",
+    "@electron-forge/cli": "^7.2.0",
+    "@electron-forge/maker-deb": "^7.2.0",
+    "@electron-forge/maker-rpm": "^7.2.0",
+    "@electron-forge/maker-squirrel": "^7.2.0",
+    "@electron-forge/maker-zip": "^7.2.0",
+    "@electron-forge/plugin-webpack": "^7.2.0",
     "@types/express": "^4.17.17",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
     "@types/react-highlight-words": "^0.16.4",
-    "@typescript-eslint/eslint-plugin": "^5.0.0",
-    "@typescript-eslint/parser": "^5.0.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "@vercel/webpack-asset-relocator-loader": "^1.7.3",
     "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
     "css-loader": "^6.0.0",
-    "electron": "^22.0.0",
-    "eslint": "^8.0.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.25.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.14",
+    "electron": "^29.4.6",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "node-loader": "^2.0.0",
-    "prettier": "^2.8.1",
-    "style-loader": "^3.0.0",
-    "ts-loader": "^9.2.2",
-    "ts-node": "^10.9.1",
-    "typescript": "~4.5.4",
+    "prettier": "^3.2.5",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.3.3",
     "webpack-node-externals": "^3.0.0"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.17.1",
     "@atlaskit/button": "^16.5.3",
     "@atlaskit/dropdown-menu": "^11.5.10",
     "@atlaskit/popup": "^1.5.4",
@@ -70,13 +73,18 @@
     "@prisma/client": "^4.16.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
+    "dotenv": "^16.4.5",
     "electron-settings": "^4.0.2",
     "electron-squirrel-startup": "^1.0.0",
     "prisma": "^4.16.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-highlight-words": "^0.18.0",
+    "react-markdown": "^8.0.5",
     "react-select": "^5.4.0",
-    "reflect-metadata": "^0.1.13"
+    "react-syntax-highlighter": "^15.5.0",
+    "reflect-metadata": "^0.1.13",
+    "remark-gfm": "^3.0.1",
+    "rxjs": "^7.8.1"
   }
-}
+}