fix package

Added displaying error messages in UI

CONTRIBUTING.md

@@ -149,6 +149,7 @@ We keep track of all the files we've changed with Void so it's easy to rebase:
 - CONTRIBUTING.md
 - VOID_USEFUL_LINKS.md
 - product.json
+- package.json
 
 - src/vs/workbench/api/common/{extHost.api.impl.ts | extHostApiCommands.ts}
 - src/vs/workbench/workbench.common.main.ts

extensions/void/package-lock.json

@@ -9,9 +9,6 @@
       "version": "0.0.1",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.27.1",
-        "diff-match-patch": "^1.0.5",
-        "diff": "^7.0.0",
-        "ollama": "^0.5.9",
         "openai": "^4.57.0"
       },
       "devDependencies": {
@@ -23,26 +20,30 @@
         "@types/node": "^22.5.1",
         "@types/react": "^18.3.4",
         "@types/react-dom": "^18.3.0",
-        "@types/vscode": "1.89.0",
+        "@types/vscode": "1.92.0",
         "@typescript-eslint/eslint-plugin": "^8.3.0",
         "@typescript-eslint/parser": "^8.3.0",
         "@vscode/test-cli": "^0.0.10",
         "@vscode/test-electron": "2.4.1",
         "autoprefixer": "^10.4.20",
+        "diff-match-patch": "^1.0.5",
         "esbuild": "^0.23.1",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.35.1",
         "eslint-plugin-react-hooks": "^4.6.2",
         "globals": "^15.9.0",
         "marked": "^14.1.0",
+        "ollama": "^0.5.9",
         "postcss": "^8.4.41",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^9.0.1",
+        "react-syntax-highlighter": "^15.6.1",
         "rimraf": "^6.0.1",
         "tailwindcss": "^3.4.10",
         "typescript": "5.5.4",
-        "typescript-eslint": "^8.3.0"
+        "typescript-eslint": "^8.3.0",
+        "uuid": "^10.0.0"
       },
       "engines": {
         "vscode": "^1.89.0"
@@ -199,6 +200,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+      "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@bcoe/v8-coverage": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
@@ -769,9 +783,9 @@
       "license": "MIT"
     },
     "node_modules/@types/vscode": {
-      "version": "1.89.0",
-      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.89.0.tgz",
-      "integrity": "sha512-TMfGKLSVxfGfoO8JfIE/neZqv7QLwS4nwPwL/NwMvxtAY2230H2I4Z5xx6836pmJvMAzqooRQ4pmLm7RUicP3A==",
+      "version": "1.92.0",
+      "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.92.0.tgz",
+      "integrity": "sha512-DcZoCj17RXlzB4XJ7IfKdPTcTGDLYvTOcTNkvtjXWF+K2TlKzHHkBEXNWQRpBIXixNEUgx39cQeTFunY0E2msw==",
       "dev": true,
       "license": "MIT"
     },
@@ -2153,19 +2167,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/diff": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
-      "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
     "node_modules/diff-match-patch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
-      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
@@ -2859,6 +2866,20 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -3044,6 +3065,15 @@
       "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==",
       "license": "MIT"
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/formdata-node": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz",
@@ -3344,6 +3374,17 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
@@ -3386,6 +3427,77 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hastscript/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/hastscript/node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -3396,6 +3508,23 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -4422,6 +4551,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -5577,6 +5721,7 @@
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/ollama/-/ollama-0.5.9.tgz",
       "integrity": "sha512-F/KZuDRC+ZsVCuMvcOYuQ6zj42/idzCkkuknGyyGVmNStMZ/sU3jQpvhnl4SyC0+zBzLiKNZJnJeuPFuieWZvQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "whatwg-fetch": "^3.6.20"
@@ -6198,6 +6343,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -6336,6 +6491,24 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.6.1.tgz",
+      "integrity": "sha512-OqJ2/vL7lEeV5zTJyG7kmARppUjiB9h9udl4qHQjjgEos66z00Ia0OckwYfRxCSFrW8RJIBnsBwQsHZbVPspqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6397,6 +6570,139 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -7720,6 +8026,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/v8-to-istanbul": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
@@ -7784,6 +8104,7 @@
       "version": "3.6.20",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
       "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/whatwg-url": {
@@ -8027,6 +8348,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

extensions/void/package.json

@@ -15,243 +15,7 @@
   "contributes": {
     "configuration": {
       "title": "Void",
-      "properties": {
-        "void.whichApi": {
-          "type": "string",
-          "default": "anthropic",
-          "description": "Choose an API provider.",
-          "enum": [
-            "openAI",
-            "openAICompatible",
-            "anthropic",
-            "azure",
-            "ollama",
-            "greptile"
-          ]
-        },
-        "void.anthropic.apiKey": {
-          "type": "string",
-          "default": "",
-          "description": "Anthropic API key."
-        },
-        "void.anthropic.model": {
-          "type": "string",
-          "default": "claude-3-5-sonnet-20240620",
-          "description": "Anthropic model to use.",
-          "enum": [
-            "claude-3-5-sonnet-20240620",
-            "claude-3-opus-20240229",
-            "claude-3-sonnet-20240229",
-            "claude-3-haiku-20240307"
-          ]
-        },
-        "void.anthropic.maxTokens": {
-          "type": "string",
-          "default": "8192",
-          "description": "Anthropic max number of tokens to output.",
-          "enum": [
-            "1024",
-            "2048",
-            "4096",
-            "8192"
-          ]
-        },
-        "void.openAI.apiKey": {
-          "type": "string",
-          "default": "",
-          "description": "OpenAI API key."
-        },
-        "void.openAI.model": {
-          "type": "string",
-          "default": "gpt-4o",
-          "description": "OpenAI model to use.",
-          "enum": [
-            "o1-preview",
-            "o1-mini",
-            "gpt-4o",
-            "gpt-4o-2024-05-13",
-            "gpt-4o-2024-08-06",
-            "gpt-4o-mini",
-            "gpt-4o-mini-2024-07-18",
-            "gpt-4-turbo",
-            "gpt-4-turbo-2024-04-09",
-            "gpt-4-turbo-preview",
-            "gpt-4-0125-preview",
-            "gpt-4-1106-preview",
-            "gpt-4",
-            "gpt-4-0613",
-            "gpt-3.5-turbo-0125",
-            "gpt-3.5-turbo",
-            "gpt-3.5-turbo-1106"
-          ]
-        },
-        "void.greptile.apiKey": {
-          "type": "string",
-          "default": "",
-          "description": "Greptile API key."
-        },
-        "void.greptile.githubPAT": {
-          "type": "string",
-          "default": "",
-          "description": "Github PAT given to Greptile to access your repository."
-        },
-        "void.greptile.remote": {
-          "type": "string",
-          "description": "remote provider",
-          "enum": [
-            "github",
-            "gitlab"
-          ]
-        },
-        "void.greptile.repository": {
-          "type": "string",
-          "description": "Repository identifier in \"owner/repository\" format."
-        },
-        "void.greptile.branch": {
-          "type": "string",
-          "default": "main",
-          "description": "Name of the git branch."
-        },
-        "void.azure.apiKey": {
-          "type": "string",
-          "description": "Azure API key."
-        },
-        "void.azure.deploymentId": {
-          "type": "string",
-          "description": "Azure API deployment ID."
-        },
-        "void.azure.resourceName": {
-          "type": "string",
-          "description": "Name of the Azure OpenAI resource. Either this or `baseURL` can be used. \nThe resource name is used in the assembled URL: `https://{resourceName}.openai.azure.com/openai/deployments/{modelId}{path}`"
-        },
-        "void.azure.providerSettings": {
-          "type": "object",
-          "properties": {
-            "baseURL": {
-              "type": "string",
-              "default": "https://${resourceName}.openai.azure.com/openai/deployments",
-              "description": "Azure API base URL."
-            },
-            "headers": {
-              "type": "object",
-              "description": "Custom headers to include in the requests."
-            }
-          }
-        },
-        "void.ollama.endpoint": {
-          "type": "string",
-          "default": "http://127.0.0.1:11434",
-          "description": "The Ollama endpoint. Start Ollama by running `OLLAMA_ORIGINS=\"vscode-webview://*\" ollama serve`"
-        },
-        "void.ollama.model": {
-          "type": "string",
-          "default": "llama3.1",
-          "description": "Ollama model to use.",
-          "enum": [
-            "codegemma",
-            "codegemma:2b",
-            "codegemma:7b",
-            "codellama",
-            "codellama:7b",
-            "codellama:13b",
-            "codellama:34b",
-            "codellama:70b",
-            "codellama:code",
-            "codellama:python",
-            "command-r",
-            "command-r:35b",
-            "command-r-plus",
-            "command-r-plus:104b",
-            "deepseek-coder-v2",
-            "deepseek-coder-v2:16b",
-            "deepseek-coder-v2:236b",
-            "falcon2",
-            "falcon2:11b",
-            "firefunction-v2",
-            "firefunction-v2:70b",
-            "gemma",
-            "gemma:2b",
-            "gemma:7b",
-            "gemma2",
-            "gemma2:2b",
-            "gemma2:9b",
-            "gemma2:27b",
-            "llama2",
-            "llama2:7b",
-            "llama2:13b",
-            "llama2:70b",
-            "llama3",
-            "llama3:8b",
-            "llama3:70b",
-            "llama3-chatqa",
-            "llama3-chatqa:8b",
-            "llama3-chatqa:70b",
-            "llama3-gradient",
-            "llama3-gradient:8b",
-            "llama3-gradient:70b",
-            "llama3.1",
-            "llama3.1:8b",
-            "llama3.1:70b",
-            "llama3.1:405b",
-            "llava",
-            "llava:7b",
-            "llava:13b",
-            "llava:34b",
-            "llava-llama3",
-            "llava-llama3:8b",
-            "llava-phi3",
-            "llava-phi3:3.8b",
-            "mistral",
-            "mistral:7b",
-            "mistral-large",
-            "mistral-large:123b",
-            "mistral-nemo",
-            "mistral-nemo:12b",
-            "mixtral",
-            "mixtral:8x7b",
-            "mixtral:8x22b",
-            "moondream",
-            "moondream:1.8b",
-            "openhermes",
-            "openhermes:v2.5",
-            "phi3",
-            "phi3:3.8b",
-            "phi3:14b",
-            "phi3.5",
-            "phi3.5:3.8b",
-            "qwen",
-            "qwen:7b",
-            "qwen:14b",
-            "qwen:32b",
-            "qwen:72b",
-            "qwen:110b",
-            "qwen2",
-            "qwen2:0.5b",
-            "qwen2:1.5b",
-            "qwen2:7b",
-            "qwen2:72b",
-            "smollm",
-            "smollm:135m",
-            "smollm:360m",
-            "smollm:1.7b"
-          ]
-        },
-        "void.openAICompatible.endpoint": {
-          "type": "string",
-          "default": "http://127.0.0.1:11434/v1",
-          "description": "The endpoint."
-        },
-        "void.openAICompatible.model": {
-          "type": "string",
-          "default": "gpt-4o",
-          "description": "The name of the model to use."
-        },
-        "void.openAICompatible.apiKey": {
-          "type": "string",
-          "default": "",
-          "description": "Your API key."
-        }
-      }
+      "properties": {}
     },
     "commands": [
       {
@@ -279,8 +43,9 @@
         "command": "void.toggleThreadSelector",
         "title": "View past chats",
         "icon": "$(history)"
-      }, {
-        "command": "void.openSettings",
+      },
+      {
+        "command": "void.toggleSettings",
         "title": "Void settings",
         "icon": "$(settings-gear)"
       }
@@ -328,7 +93,7 @@
           "group": "navigation"
         },
         {
-          "command": "void.openSettings",
+          "command": "void.toggleSettings",
           "when": "view == 'void.viewnumberone'",
           "group": "navigation"
         }
@@ -351,32 +116,33 @@
     "@types/node": "^22.5.1",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "@types/vscode": "1.89.0",
+    "@types/vscode": "1.92.0",
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",
     "@vscode/test-cli": "^0.0.10",
     "@vscode/test-electron": "2.4.1",
     "autoprefixer": "^10.4.20",
+    "diff-match-patch": "^1.0.5",
     "esbuild": "^0.23.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.35.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "globals": "^15.9.0",
     "marked": "^14.1.0",
+    "ollama": "^0.5.9",
     "postcss": "^8.4.41",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.6.1",
     "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.10",
     "typescript": "5.5.4",
-    "typescript-eslint": "^8.3.0"
+    "typescript-eslint": "^8.3.0",
+    "uuid": "^10.0.0"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.27.1",
-    "diff-match-patch": "^1.0.5",
-    "ollama": "^0.5.9",
-    "openai": "^4.57.0",
-    "diff": "^7.0.0"
+    "openai": "^4.57.0"
   }
 }

extensions/void/src/DisplayChangesProvider.ts

@@ -28,7 +28,7 @@ export class DisplayChangesProvider implements vscode.CodeLensProvider {
 	// used internally by vscode
 	public provideCodeLenses(document: vscode.TextDocument, token: vscode.CancellationToken): vscode.ProviderResult<vscode.CodeLens[]> {
 		const docUriStr = document.uri.toString()
-		return this._diffsOfDocument[docUriStr].flatMap(diff => diff.lenses)
+		return this._diffsOfDocument[docUriStr]?.flatMap(diff => diff.lenses) ?? []
 	}
 
 	// declared by us, registered with vscode.languages.registerCodeLensProvider()

extensions/void/src/SidebarWebviewProvider.ts

@@ -19,7 +19,7 @@ export class SidebarWebviewProvider implements vscode.WebviewViewProvider {
 
 	private readonly _extensionUri: vscode.Uri
 
-	private _webviewView?: vscode.WebviewView; // only used inside onDidChangeConfiguration
+	// private _webviewView?: vscode.WebviewView;
 	private _webviewDeps: string[] = [];
 
 	constructor(context: vscode.ExtensionContext) {
@@ -28,35 +28,14 @@ export class SidebarWebviewProvider implements vscode.WebviewViewProvider {
 
 		let temp_res: typeof this._res | undefined = undefined
 		this.webview = new Promise((res, rej) => { temp_res = res })
-		if (!temp_res) throw new Error("sidebar provider: resolver was undefined")
+		if (!temp_res) throw new Error("Void sidebar provider: resolver was undefined")
 		this._res = temp_res
-
-		// if it affects one of the config items webview depends on, update the webview
-		// TODO should be able to move this entirely to React - make updateWebviewHTML mount once, and then send updates via postMessage from then on
-		vscode.workspace.onDidChangeConfiguration(event => {
-			if (this._webviewDeps.map(dep => event.affectsConfiguration(dep)).some(v => !!v)) {
-				if (this._webviewView) {
-					this.updateWebviewHTML(this._webviewView.webview);
-				}
-			}
-		});
 	}
 
-	// this is updated
-	private updateWebviewHTML(webview: vscode.Webview) {
-		const allowed_urls = ['https://api.anthropic.com', 'https://api.openai.com', 'https://api.greptile.com'];
+	// called by us
+	updateWebviewHTML(webview: vscode.Webview) {
 		this._webviewDeps = []
 
-		const ollamaEndpoint: string | undefined = vscode.workspace.getConfiguration('void.ollama').get('endpoint');
-		this._webviewDeps.push('void.ollama.endpoint');
-		if (ollamaEndpoint)
-			allowed_urls.push(ollamaEndpoint);
-
-		const openAICompatibleEndpoint: string | undefined = vscode.workspace.getConfiguration('void.openAICompatible').get('endpoint');
-		this._webviewDeps.push('void.openAICompatible.endpoint');
-		if (openAICompatibleEndpoint)
-			allowed_urls.push(openAICompatibleEndpoint);
-
 		const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'dist/sidebar/index.js'));
 		const stylesUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'dist/sidebar/styles.css'));
 		const rootUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri));
@@ -68,7 +47,7 @@ export class SidebarWebviewProvider implements vscode.WebviewViewProvider {
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Custom View</title>
-            <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src ${allowed_urls.join(' ')}; img-src vscode-resource: https:; script-src 'nonce-${nonce}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
+            <meta http-equiv="Content-Security-Policy" content="img-src vscode-resource: https:; script-src 'nonce-${nonce}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
             <base href="${rootUri}/">
             <link href="${stylesUri}" rel="stylesheet">
           </head>
@@ -100,6 +79,6 @@ export class SidebarWebviewProvider implements vscode.WebviewViewProvider {
 
 		// resolve webview and _webviewView
 		this._res(webview);
-		this._webviewView = webviewView;
+		// this._webviewView = webviewView;
 	}
 }

extensions/void/src/common/sendLLMMessage.ts

@@ -1,40 +1,9 @@
 import Anthropic from '@anthropic-ai/sdk';
 import OpenAI from 'openai';
 import { Ollama } from 'ollama/browser'
+import { VoidConfig } from '../sidebar/contextForConfig';
 
 
-// always compare these against package.json to make sure every setting in this type can actually be provided by the user
-export type ApiConfig = {
-	anthropic: {
-		apikey: string,
-		model: string,
-		maxTokens: string
-	},
-	openAI: {
-		apikey: string,
-		model: string,
-	},
-	greptile: {
-		apikey: string,
-		githubPAT: string,
-		repoinfo: {
-			remote: string, // e.g. 'github'
-			repository: string, // e.g. 'voideditor/void'
-			branch: string // e.g. 'main'
-		}
-	},
-	ollama: {
-		endpoint: string,
-		model: string
-	},
-	openAICompatible: {
-		endpoint: string,
-		model: string,
-		apikey: string
-	}
-	whichApi: string
-}
-
 
 
 type OnText = (newText: string, fullText: string) => void
@@ -48,7 +17,8 @@ type SendLLMMessageFnTypeInternal = (params: {
 	messages: LLMMessage[],
 	onText: OnText,
 	onFinalMessage: (input: string) => void,
-	apiConfig: ApiConfig,
+	onError: (error: string) => void,
+	voidConfig: VoidConfig,
 })
 	=> {
 		abort: () => void
@@ -58,7 +28,8 @@ type SendLLMMessageFnTypeExternal = (params: {
 	messages: LLMMessage[],
 	onText: OnText,
 	onFinalMessage: (input: string) => void,
-	apiConfig: ApiConfig | null,
+	onError: (error: string) => void,
+	voidConfig: VoidConfig | null,
 })
 	=> {
 		abort: () => void
@@ -67,14 +38,14 @@ type SendLLMMessageFnTypeExternal = (params: {
 
 
 
-// Claude
-const sendClaudeMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, apiConfig }) => {
+// Anthropic
+const sendAnthropicMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, onError, voidConfig }) => {
 
-	const anthropic = new Anthropic({ apiKey: apiConfig.anthropic.apikey, dangerouslyAllowBrowser: true }); // defaults to process.env["ANTHROPIC_API_KEY"]
+	const anthropic = new Anthropic({ apiKey: voidConfig.anthropic.apikey, dangerouslyAllowBrowser: true }); // defaults to process.env["ANTHROPIC_API_KEY"]
 
 	const stream = anthropic.messages.stream({
-		model: apiConfig.anthropic.model,
-		max_tokens: parseInt(apiConfig.anthropic.maxTokens),
+		model: voidConfig.anthropic.model,
+		max_tokens: parseInt(voidConfig.anthropic.maxTokens),
 		messages: messages,
 	});
 
@@ -94,10 +65,19 @@ const sendClaudeMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinal
 		onFinalMessage(content)
 	})
 
+	stream.on('error', (error) => {
+		// the most common error will be invalid API key (401), so we handle this with a nice message
+		if (error instanceof Anthropic.APIError && error.status === 401) {
+			onError('Invalid API key.')
+		}
+		else {
+			onError(error.message)
+		}
+	})
 
 	// if abort is called, onFinalMessage is NOT called, and no later onTexts are called either
 	const abort = () => {
-		// stream.abort() // this doesnt appear to do anything, but it should try to stop claude from generating anymore
+		// stream.controller.abort() // TODO need to test this to make sure it works, it might throw an error
 		did_abort = true
 	}
 
@@ -108,8 +88,8 @@ const sendClaudeMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinal
 
 
 
-// OpenAI and OpenAICompatible
-const sendOpenAIMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, apiConfig }) => {
+// OpenAI, OpenRouter, OpenAICompatible
+const sendOpenAIMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, onError, voidConfig }) => {
 
 	let didAbort = false
 	let fullText = ''
@@ -122,17 +102,27 @@ const sendOpenAIMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinal
 	let openai: OpenAI
 	let options: OpenAI.Chat.Completions.ChatCompletionCreateParamsStreaming
 
-	if (apiConfig.whichApi === 'openAI') {
-		openai = new OpenAI({ baseURL: apiConfig.openAICompatible.endpoint, apiKey: apiConfig.openAICompatible.apikey, dangerouslyAllowBrowser: true })
-		options = { model: apiConfig.openAI.model, messages: messages, stream: true, }
+	if (voidConfig.default.whichApi === 'openAI') {
+		openai = new OpenAI({ apiKey: voidConfig.openAI.apikey, dangerouslyAllowBrowser: true });
+		options = { model: voidConfig.openAI.model, messages: messages, stream: true, }
 	}
-	else if (apiConfig.whichApi === 'openAICompatible') {
-		openai = new OpenAI({ apiKey: apiConfig.openAI.apikey, dangerouslyAllowBrowser: true });
-		options = { model: apiConfig.openAICompatible.model, messages: messages, stream: true, }
+	else if (voidConfig.default.whichApi === 'openRouter') {
+		openai = new OpenAI({
+			baseURL: "https://openrouter.ai/api/v1", apiKey: voidConfig.openRouter.apikey, dangerouslyAllowBrowser: true,
+			defaultHeaders: {
+				"HTTP-Referer": 'https://voideditor.com', // Optional, for including your app on openrouter.ai rankings.
+				"X-Title": 'Void Editor', // Optional. Shows in rankings on openrouter.ai.
+			},
+		});
+		options = { model: voidConfig.openRouter.model, messages: messages, stream: true, }
+	}
+	else if (voidConfig.default.whichApi === 'openAICompatible') {
+		openai = new OpenAI({ baseURL: voidConfig.openAICompatible.endpoint, apiKey: voidConfig.openAICompatible.apikey, dangerouslyAllowBrowser: true })
+		options = { model: voidConfig.openAICompatible.model, messages: messages, stream: true, }
 	}
 	else {
-		console.error(`sendOpenAIMsg: invalid whichApi: ${apiConfig.whichApi}`)
-		throw new Error(`apiConfig.whichAPI was invalid: ${apiConfig.whichApi}`)
+		console.error(`sendOpenAIMsg: invalid whichApi: ${voidConfig.default.whichApi}`)
+		throw new Error(`voidConfig.whichAPI was invalid: ${voidConfig.default.whichApi}`)
 	}
 
 	openai.chat.completions
@@ -143,27 +133,35 @@ const sendOpenAIMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinal
 				didAbort = true;
 			}
 			// when receive text
-			try {
-				for await (const chunk of response) {
-					if (didAbort) return;
-					const newText = chunk.choices[0]?.delta?.content || '';
-					fullText += newText;
-					onText(newText, fullText);
-				}
-				onFinalMessage(fullText);
+			for await (const chunk of response) {
+				if (didAbort) return;
+				const newText = chunk.choices[0]?.delta?.content || '';
+				fullText += newText;
+				onText(newText, fullText);
 			}
-			// when error/fail
-			catch (error) {
-				console.error('Error in OpenAI stream:', error);
-				onFinalMessage(fullText);
+			onFinalMessage(fullText);
+		})
+		// when error/fail - this catches errors of both .create() and .then(for await)
+		.catch(error => {
+			if (error instanceof OpenAI.APIError) {
+				if (error.status === 401) {
+					onError('Invalid API key.');
+				}
+				else {
+					onError(error.message);
+				}
+			}
+			else {
+				onError(error);
 			}
 		})
+
 	return { abort };
 };
 
 
 // Ollama
-export const sendOllamaMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, apiConfig }) => {
+export const sendOllamaMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, onError, voidConfig }) => {
 
 	let didAbort = false
 	let fullText = ""
@@ -173,10 +171,10 @@ export const sendOllamaMsg: SendLLMMessageFnTypeInternal = ({ messages, onText,
 		didAbort = true;
 	};
 
-	const ollama = new Ollama({ host: apiConfig.ollama.endpoint })
+	const ollama = new Ollama({ host: voidConfig.ollama.endpoint })
 
 	ollama.chat({
-		model: apiConfig.ollama.model,
+		model: voidConfig.ollama.model,
 		messages: messages,
 		stream: true,
 	})
@@ -186,21 +184,20 @@ export const sendOllamaMsg: SendLLMMessageFnTypeInternal = ({ messages, onText,
 				didAbort = true
 			}
 			// iterate through the stream
-			try {
-				for await (const chunk of stream) {
-					if (didAbort) return;
-					const newText = chunk.message.content;
-					fullText += newText;
-					onText(newText, fullText);
-				}
-				onFinalMessage(fullText);
-			}
-			// when error/fail
-			catch (error) {
-				console.error('Error:', error);
-				onFinalMessage(fullText);
+			for await (const chunk of stream) {
+				if (didAbort) return;
+				const newText = chunk.message.content;
+				fullText += newText;
+				onText(newText, fullText);
 			}
+			onFinalMessage(fullText);
+
 		})
+		// when error/fail
+		.catch(error => {
+			onError(error)
+		})
+
 	return { abort };
 };
 
@@ -210,7 +207,7 @@ export const sendOllamaMsg: SendLLMMessageFnTypeInternal = ({ messages, onText,
 // https://docs.greptile.com/api-reference/query
 // https://docs.greptile.com/quickstart#sample-response-streamed
 
-const sendGreptileMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, apiConfig }) => {
+const sendGreptileMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFinalMessage, onError, voidConfig }) => {
 
 	let didAbort = false
 	let fullText = ''
@@ -222,14 +219,14 @@ const sendGreptileMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFin
 	fetch('https://api.greptile.com/v2/query', {
 		method: 'POST',
 		headers: {
-			"Authorization": `Bearer ${apiConfig.greptile.apikey}`,
-			"X-Github-Token": `${apiConfig.greptile.githubPAT}`,
+			"Authorization": `Bearer ${voidConfig.greptile.apikey}`,
+			"X-Github-Token": `${voidConfig.greptile.githubPAT}`,
 			"Content-Type": `application/json`,
 		},
 		body: JSON.stringify({
 			messages,
 			stream: true,
-			repositories: [apiConfig.greptile.repoinfo]
+			repositories: [voidConfig.greptile.repoinfo]
 		}),
 	})
 		// this is {message}\n{message}\n{message}...\n
@@ -268,9 +265,7 @@ const sendGreptileMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFin
 
 		})
 		.catch(e => {
-			console.error('Error in Greptile stream:', e);
-			onFinalMessage(fullText);
-
+			onError(e)
 		});
 
 	return { abort }
@@ -279,22 +274,22 @@ const sendGreptileMsg: SendLLMMessageFnTypeInternal = ({ messages, onText, onFin
 
 
 
-export const sendLLMMessage: SendLLMMessageFnTypeExternal = ({ messages, onText, onFinalMessage, apiConfig }) => {
-	if (!apiConfig) return { abort: () => { } }
+export const sendLLMMessage: SendLLMMessageFnTypeExternal = ({ messages, onText, onFinalMessage, onError, voidConfig }) => {
+	if (!voidConfig) return { abort: () => { } }
 
-	switch (apiConfig.whichApi) {
+	switch (voidConfig.default.whichApi) {
 		case 'anthropic':
-			return sendClaudeMsg({ messages, onText, onFinalMessage, apiConfig });
+			return sendAnthropicMsg({ messages, onText, onFinalMessage, onError, voidConfig });
 		case 'openAI':
+		case 'openRouter':
 		case 'openAICompatible':
-			return sendOpenAIMsg({ messages, onText, onFinalMessage, apiConfig });
-		case 'greptile':
-			return sendGreptileMsg({ messages, onText, onFinalMessage, apiConfig });
+			return sendOpenAIMsg({ messages, onText, onFinalMessage, onError, voidConfig });
 		case 'ollama':
-			return sendOllamaMsg({ messages, onText, onFinalMessage, apiConfig });
+			return sendOllamaMsg({ messages, onText, onFinalMessage, onError, voidConfig });
+		case 'greptile':
+			return sendGreptileMsg({ messages, onText, onFinalMessage, onError, voidConfig });
 		default:
-			console.error(`Error: whichApi was ${apiConfig.whichApi}, which is not recognized!`);
+			onError(`Error: whichApi was ${voidConfig.default.whichApi}, which is not recognized!`)
 			return { abort: () => { } }
-		//return sendClaudeMsg({ messages, onText, onFinalMessage, apiConfig }); // TODO
 	}
 }

extensions/void/src/extension.ts

@@ -1,50 +1,13 @@
 import * as vscode from 'vscode';
 import { DisplayChangesProvider } from './DisplayChangesProvider';
-import { BaseDiffArea, ChatThreads, WebviewMessage } from './shared_types';
+import { BaseDiffArea, ChatThreads, MessageFromSidebar, MessageToSidebar } from './shared_types';
 import { SidebarWebviewProvider } from './SidebarWebviewProvider';
-import { ApiConfig } from './common/sendLLMMessage';
 
 const readFileContentOfUri = async (uri: vscode.Uri) => {
 	return Buffer.from(await vscode.workspace.fs.readFile(uri)).toString('utf8')
 		.replace(/\r\n/g, '\n') // replace windows \r\n with \n
 }
 
-
-const getApiConfig = () => {
-	const apiConfig: ApiConfig = {
-		anthropic: {
-			apikey: vscode.workspace.getConfiguration('void.anthropic').get('apiKey') ?? '',
-			model: vscode.workspace.getConfiguration('void.anthropic').get('model') ?? '',
-			maxTokens: vscode.workspace.getConfiguration('void.anthropic').get('maxTokens') ?? '',
-		},
-		openAI: {
-			apikey: vscode.workspace.getConfiguration('void.openAI').get('apiKey') ?? '',
-			model: vscode.workspace.getConfiguration('void.openAI').get('model') ?? '',
-		},
-		greptile: {
-			apikey: vscode.workspace.getConfiguration('void.greptile').get('apiKey') ?? '',
-			githubPAT: vscode.workspace.getConfiguration('void.greptile').get('githubPAT') ?? '',
-			repoinfo: {
-				remote: 'github',
-				repository: 'TODO',
-				branch: 'main'
-			}
-		},
-		ollama: {
-			endpoint: vscode.workspace.getConfiguration('void.ollama').get('endpoint') ?? '',
-			model: vscode.workspace.getConfiguration('void.ollama').get('model') ?? '',
-		},
-		openAICompatible: {
-			endpoint: vscode.workspace.getConfiguration('void.openAICompatible').get('endpoint') ?? '',
-			apikey: vscode.workspace.getConfiguration('void.openAICompatible').get('apiKey') ?? '',
-			model: vscode.workspace.getConfiguration('void.openAICompatible').get('model') ?? '',
-		},
-		whichApi: vscode.workspace.getConfiguration('void').get('whichApi') ?? ''
-	}
-	return apiConfig
-}
-
-
 export function activate(context: vscode.ExtensionContext) {
 
 	// 1. Mount the chat sidebar
@@ -75,7 +38,7 @@ export function activate(context: vscode.ExtensionContext) {
 			const filePath = editor.document.uri;
 
 			// send message to the webview (Sidebar.tsx)
-			webviewProvider.webview.then(webview => webview.postMessage({ type: 'ctrl+l', selection: { selectionStr, selectionRange, filePath } } satisfies WebviewMessage));
+			webviewProvider.webview.then(webview => webview.postMessage({ type: 'ctrl+l', selection: { selectionStr, selectionRange, filePath } } satisfies MessageToSidebar));
 		})
 	);
 
@@ -91,33 +54,23 @@ export function activate(context: vscode.ExtensionContext) {
 		displayChangesProvider.rejectDiff(params)
 	}));
 
-	context.subscriptions.push(vscode.commands.registerCommand('void.openSettings', async () => {
-		vscode.commands.executeCommand('workbench.action.openSettings', '@ext:void.void');
-	}));
-
 	// 5. Receive messages from sidebar
 	webviewProvider.webview.then(
 		webview => {
 
 			// top navigation bar commands
 			context.subscriptions.push(vscode.commands.registerCommand('void.startNewThread', async () => {
-				webview.postMessage({ type: 'startNewThread' } satisfies WebviewMessage)
+				webview.postMessage({ type: 'startNewThread' } satisfies MessageToSidebar)
 			}))
 			context.subscriptions.push(vscode.commands.registerCommand('void.toggleThreadSelector', async () => {
-				webview.postMessage({ type: 'toggleThreadSelector' } satisfies WebviewMessage)
+				webview.postMessage({ type: 'toggleThreadSelector' } satisfies MessageToSidebar)
 			}))
-
-			// when config changes, send it to the sidebar
-			vscode.workspace.onDidChangeConfiguration(e => {
-				if (e.affectsConfiguration('void')) {
-					const apiConfig = getApiConfig()
-					webview.postMessage({ type: 'apiConfig', apiConfig } satisfies WebviewMessage)
-				}
-			})
-
+			context.subscriptions.push(vscode.commands.registerCommand('void.toggleSettings', async () => {
+				webview.postMessage({ type: 'toggleSettings' } satisfies MessageToSidebar)
+			}));
 
 			// Receive messages in the extension from the sidebar webview (messages are sent using `postMessage`)
-			webview.onDidReceiveMessage(async (m: WebviewMessage) => {
+			webview.onDidReceiveMessage(async (m: MessageFromSidebar) => {
 
 				if (m.type === 'requestFiles') {
 
@@ -127,7 +80,7 @@ export function activate(context: vscode.ExtensionContext) {
 					)
 
 					// send contents to webview
-					webview.postMessage({ type: 'files', files, } satisfies WebviewMessage)
+					webview.postMessage({ type: 'files', files, } satisfies MessageToSidebar)
 
 				} else if (m.type === 'applyChanges') {
 
@@ -162,13 +115,17 @@ export function activate(context: vscode.ExtensionContext) {
 					displayChangesProvider.refreshDiffAreas(editor.document.uri)
 
 				}
-				else if (m.type === 'getApiConfig') {
-					const apiConfig = getApiConfig()
-					webview.postMessage({ type: 'apiConfig', apiConfig } satisfies WebviewMessage)
+				else if (m.type === 'getPartialVoidConfig') {
+					const partialVoidConfig = context.globalState.get('partialVoidConfig') ?? {}
+					webview.postMessage({ type: 'partialVoidConfig', partialVoidConfig } satisfies MessageToSidebar)
+				}
+				else if (m.type === 'persistPartialVoidConfig') {
+					const partialVoidConfig = m.partialVoidConfig
+					context.globalState.update('partialVoidConfig', partialVoidConfig)
 				}
 				else if (m.type === 'getAllThreads') {
 					const threads: ChatThreads = context.workspaceState.get('allThreads') ?? {}
-					webview.postMessage({ type: 'allThreads', threads } satisfies WebviewMessage)
+					webview.postMessage({ type: 'allThreads', threads } satisfies MessageToSidebar)
 				}
 				else if (m.type === 'persistThread') {
 					const threads: ChatThreads = context.workspaceState.get('allThreads') ?? {}
@@ -176,7 +133,7 @@ export function activate(context: vscode.ExtensionContext) {
 					context.workspaceState.update('allThreads', updatedThreads)
 				}
 				else {
-					console.error('unrecognized command', m.type, m)
+					console.error('unrecognized command', m)
 				}
 			})
 		}

extensions/void/src/shared_types.ts

@@ -1,6 +1,6 @@
 
 import * as vscode from 'vscode';
-import { ApiConfig } from './common/sendLLMMessage';
+import { PartialVoidConfig } from './sidebar/contextForConfig';
 
 
 
@@ -38,45 +38,27 @@ type Diff = {
 	lenses: vscode.CodeLens[],
 } & BaseDiff
 
-type WebviewMessage = (
-
-	// editor -> sidebar
+// editor -> sidebar
+type MessageToSidebar = (
 	| { type: 'ctrl+l', selection: CodeSelection } // user presses ctrl+l in the editor
-
-	// sidebar -> editor
-	| { type: 'applyChanges', code: string } // user clicks "apply" in the sidebar
-
-	// sidebar -> editor
-	| { type: 'requestFiles', filepaths: vscode.Uri[] }
-
-	// editor -> sidebar
 	| { type: 'files', files: { filepath: vscode.Uri, content: string }[] }
-
-	// sidebar -> editor
-	| { type: 'getApiConfig' }
-
-	// editor -> sidebar
-	| { type: 'apiConfig', apiConfig: ApiConfig }
-
-	// sidebar -> editor
-	| { type: 'getAllThreads' }
-
-	// editor -> sidebar
+	| { type: 'partialVoidConfig', partialVoidConfig: PartialVoidConfig }
 	| { type: 'allThreads', threads: ChatThreads }
-
-	// sidebar -> editor
-	| { type: 'persistThread', thread: ChatThreads[string] }
-
-	// editor -> sidebar
 	| { type: 'startNewThread' }
-
-	// editor -> sidebar
 	| { type: 'toggleThreadSelector' }
-
+	| { type: 'toggleSettings' }
 )
 
+// sidebar -> editor
+type MessageFromSidebar = (
+	| { type: 'applyChanges', code: string } // user clicks "apply" in the sidebar
+	| { type: 'requestFiles', filepaths: vscode.Uri[] }
+	| { type: 'getPartialVoidConfig' }
+	| { type: 'persistPartialVoidConfig', partialVoidConfig: PartialVoidConfig }
+	| { type: 'getAllThreads' }
+	| { type: 'persistThread', thread: ChatThreads[string] }
+)
 
-type Command = WebviewMessage['type']
 
 type ChatThreads = {
 	[id: string]: {
@@ -105,8 +87,8 @@ export {
 	Diff, DiffArea,
 	CodeSelection,
 	File,
-	WebviewMessage,
-	Command,
+	MessageFromSidebar,
+	MessageToSidebar,
 	ChatThreads,
 	ChatMessage,
 }

extensions/void/src/sidebar/Sidebar.tsx

@@ -1,317 +1,68 @@
 import React, { useState, useEffect, useRef, useCallback, FormEvent } from "react"
-import { ApiConfig, sendLLMMessage } from "../common/sendLLMMessage"
-import { File, CodeSelection, WebviewMessage, ChatMessage } from "../shared_types"
-import { awaitVSCodeResponse, getVSCodeAPI, resolveAwaitingVSCodeResponse } from "./getVscodeApi"
+import { CodeSelection, ChatMessage, MessageToSidebar } from "../shared_types"
+import { awaitVSCodeResponse, getVSCodeAPI, onMessageFromVSCode, useOnVSCodeMessage } from "./getVscodeApi"
 
-import { marked } from 'marked';
-import MarkdownRender from "./markdown/MarkdownRender";
-import BlockCode from "./markdown/BlockCode";
-
-import * as vscode from 'vscode'
-import { SelectedFiles } from "./components/SelectedFiles";
-import { useThreads } from "./threadsContext";
-
-
-const filesStr = (fullFiles: File[]) => {
-	return fullFiles.map(({ filepath, content }) =>
-		`
-${filepath.fsPath}
-\`\`\`
-${content}
-\`\`\``).join('\n')
-}
-
-const userInstructionsStr = (instructions: string, files: File[], selection: CodeSelection | null) => {
-	return `
-${filesStr(files)}
-
-${!selection ? '' : `
-I am currently selecting this code:
-\`\`\`${selection.selectionStr}\`\`\`
-`}
-
-Please edit the code following these instructions (or, if appropriate, answer my question instead):
-${instructions}
-
-If you make a change, rewrite the entire file.
-`; // TODO don't rewrite the whole file on prompt, instead rewrite it when click Apply
-}
-
-
-const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
-
-	const role = chatMessage.role
-	const children = chatMessage.displayContent
-
-	if (!children)
-		return null
-
-	let chatbubbleContents: React.ReactNode
-
-	if (role === 'user') {
-		chatbubbleContents = <>
-			<SelectedFiles files={chatMessage.files} setFiles={null} />
-			{chatMessage.selection?.selectionStr && <BlockCode text={chatMessage.selection.selectionStr} hideToolbar />}
-			{children}
-		</>
-	}
-	else if (role === 'assistant') {
-
-		chatbubbleContents = <MarkdownRender string={children} /> // sectionsHTML
-	}
-
-
-	return <div className={`${role === 'user' ? 'text-right' : 'text-left'}`}>
-		<div className={`inline-block p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full`}>
-			{chatbubbleContents}
-		</div>
-	</div>
-}
-
-const ThreadSelector = ({ onClose }: { onClose: () => void }) => {
-	const { allThreads, currentThread, switchToThread } = useThreads()
-	return (
-		<div className="flex flex-col space-y-1">
-			<div className="text-right">
-				<button className="btn btn-sm" onClick={onClose}>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-						className="size-4"
-					>
-						<path
-							strokeLinecap="round"
-							strokeLinejoin="round"
-							d="M6 18 18 6M6 6l12 12"
-						/>
-					</svg>
-				</button>
-			</div>
-			{/* iterate through all past threads */}
-			{Object.keys(allThreads ?? {}).map((threadId) => {
-				const pastThread = (allThreads ?? {})[threadId];
-				return (
-					<button
-						key={pastThread.id}
-						className={`btn btn-sm btn-secondary ${pastThread.id === currentThread?.id ? "btn-primary" : ""}`}
-						onClick={() => switchToThread(pastThread.id)}
-					>
-						{new Date(pastThread.createdAt).toLocaleString()}
-					</button>
-				)
-			})}
-		</div>
-	)
-}
+import { SidebarThreadSelector } from "./SidebarThreadSelector";
+import { useThreads } from "./contextForThreads";
+import { SidebarChat } from "./SidebarChat";
+import { SidebarSettings } from './SidebarSettings';
 
 
 
 const Sidebar = () => {
-	const { allThreads, currentThread, addMessageToHistory, startNewThread, } = useThreads()
+	const [tab, setTab] = useState<'threadSelector' | 'chat' | 'settings'>('chat')
 
-	// state of current message
-	const [selection, setSelection] = useState<CodeSelection | null>(null) // the code the user is selecting
-	const [files, setFiles] = useState<vscode.Uri[]>([]) // the names of the files in the chat
-	const [instructions, setInstructions] = useState('') // the user's instructions
+	// if they pressed the + to add a new chat
+	useOnVSCodeMessage('startNewThread', (m) => {
+		setTab('chat')
+	})
 
-	// state of chat
-	const [messageStream, setMessageStream] = useState('')
-	const [isLoading, setIsLoading] = useState(false)
-	const [isThreadSelectorOpen, setIsThreadSelectorOpen] = useState(false)
+	// if they toggled thread selector
+	useOnVSCodeMessage('toggleThreadSelector', (m) => {
+		if (tab === 'threadSelector')
+			setTab('chat')
+		else
+			setTab('threadSelector')
+	})
 
-	const abortFnRef = useRef<(() => void) | null>(null)
+	// if they toggled settings
+	useOnVSCodeMessage('toggleSettings', (m) => {
+		if (tab === 'settings')
+			setTab('chat')
+		else
+			setTab('settings')
+	})
 
-	const [apiConfig, setApiConfig] = useState<ApiConfig | null>(null)
 
-	// get Api Config on mount
-	useEffect(() => {
-		getVSCodeAPI().postMessage({ type: 'getApiConfig' })
-	}, [])
-
-	// Receive messages from the extension
+	// Receive messages from the VSCode extension
 	useEffect(() => {
 		const listener = (event: MessageEvent) => {
-
-			const m = event.data as WebviewMessage;
-			// resolve any awaiting promises
-			// eg. it will resolve the promise below for `await VSCodeResponse('files')`
-			resolveAwaitingVSCodeResponse(m)
-
-			// if user pressed ctrl+l, add their selection to the sidebar
-			if (m.type === 'ctrl+l') {
-				setSelection(m.selection)
-				const filepath = m.selection.filePath
-
-				// add current file to the context if it's not already in the files array
-				if (!files.find(f => f.fsPath === filepath.fsPath))
-					setFiles(files => [...files, filepath])
-
-			}
-			// when get apiConfig, set
-			else if (m.type === 'apiConfig') {
-				setApiConfig(m.apiConfig)
-			}
-
-			// if they pressed the + to add a new chat
-			else if (m.type === 'startNewThread') {
-				setIsThreadSelectorOpen(false)
-				if (currentThread?.messages.length !== 0)
-					startNewThread()
-			}
-
-			// if they opened thread selector
-			else if (m.type === 'toggleThreadSelector') {
-				setIsThreadSelectorOpen(v => !v)
-			}
-
+			const m = event.data as MessageToSidebar;
+			onMessageFromVSCode(m)
 		}
 		window.addEventListener('message', listener);
 		return () => { window.removeEventListener('message', listener) }
-	}, [files, selection, startNewThread, currentThread])
+	}, [])
 
 
-	const formRef = useRef<HTMLFormElement | null>(null)
-	const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
-
-		e.preventDefault()
-		if (isLoading) return
-
-		setIsLoading(true)
-		setInstructions('');
-		formRef.current?.reset(); // reset the form's text
-		setSelection(null)
-		setFiles([])
-
-		// request file content from vscode and await response
-		getVSCodeAPI().postMessage({ type: 'requestFiles', filepaths: files })
-		const relevantFiles = await awaitVSCodeResponse('files')
-
-		// add message to chat history
-		const content = userInstructionsStr(instructions, relevantFiles.files, selection)
-		// console.log('prompt:\n', content)
-		const newHistoryElt: ChatMessage = { role: 'user', content, displayContent: instructions, selection, files }
-		addMessageToHistory(newHistoryElt)
-
-		// send message to LLM
-		let { abort } = sendLLMMessage({
-			messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })), { role: 'user', content }],
-			onText: (newText, fullText) => setMessageStream(fullText),
-			onFinalMessage: (content) => {
-				// add assistant's message to chat history, and clear selection
-				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
-				addMessageToHistory(newHistoryElt)
-
-				// clear selection
-				setMessageStream('')
-				setIsLoading(false)
-			},
-			apiConfig: apiConfig
-		})
-		abortFnRef.current = abort
-
-	}
-
-	const onStop = useCallback(() => {
-		// abort claude
-		abortFnRef.current?.()
-
-		// if messageStream was not empty, add it to the history
-		const llmContent = messageStream || '(canceled)'
-		const newHistoryElt: ChatMessage = { role: 'assistant', displayContent: messageStream, content: llmContent }
-		addMessageToHistory(newHistoryElt)
-
-		setMessageStream('')
-		setIsLoading(false)
-
-	}, [addMessageToHistory, messageStream])
-
-	//Clear code selection
-	const clearSelection = () => {
-		setSelection(null);
-	};
 
 	return <>
-		<div className="flex flex-col h-screen w-full">
-			{isThreadSelectorOpen && (
-				<div className="mb-2 max-h-[30vh] overflow-y-auto">
-					<ThreadSelector onClose={() => setIsThreadSelectorOpen(false)} />
-				</div>
-			)}
-			<div className="overflow-y-auto overflow-x-hidden space-y-4">
-				{/* previous messages */}
-				{currentThread !== null && currentThread.messages.map((message, i) =>
-					<ChatBubble key={i} chatMessage={message} />
-				)}
-				{/* message stream */}
-				<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream }} />
+		<div className={`flex flex-col h-screen w-full`}>
+
+			<div className={`mb-2 max-h-[30vh] overflow-y-auto ${tab !== 'threadSelector' ? 'hidden' : ''}`}>
+				<SidebarThreadSelector onClose={() => setTab('chat')} />
 			</div>
-			{/* chatbar */}
-			<div className="shrink-0 py-4">
-				{/* selection */}
-				<div className="text-left">
 
-					<div className="relative">
-						<div className="input">
-							{/* selection */}
-							{(files.length || selection?.selectionStr) && <div className="p-2 pb-0 space-y-2">
-								{/* selected files */}
-								<SelectedFiles files={files} setFiles={setFiles} />
-								{/* selected code */}
-								{!!selection?.selectionStr && (
-									<BlockCode className="rounded bg-vscode-sidebar-bg" text={selection.selectionStr} toolbar={(
-										<button
-											onClick={clearSelection}
-											className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
-										>
-											Remove
-										</button>
-									)} />
-								)}
-							</div>}
-							<form
-								ref={formRef}
-								className="flex flex-row items-center rounded-md p-2"
-								onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
-
-								onSubmit={(e) => {
-									console.log('submit!')
-									e.preventDefault();
-									onSubmit(e)
-								}}>
-								{/* input */}
-
-								<textarea
-									onChange={(e) => { setInstructions(e.target.value) }}
-									className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden bg-transparent border-none !outline-none"
-									placeholder="Ctrl+L to select"
-									rows={1}
-									onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
-								/>
-								{/* submit button */}
-								{isLoading ?
-									<button
-										onClick={onStop}
-										className="btn btn-primary rounded-r-lg max-h-10 p-2"
-										type='button'
-									>Stop</button>
-									: <button
-										className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
-										disabled={!instructions}
-										type='submit'
-									>
-										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-											<line x1="12" y1="19" x2="12" y2="5"></line>
-											<polyline points="5 12 12 5 19 12"></polyline>
-										</svg>
-									</button>
-								}
-							</form>
-						</div>
-					</div>
-				</div>
+			<div className={`${tab !== 'chat' && tab !== 'threadSelector' ? 'hidden' : ''}`}>
+				<SidebarChat />
 			</div>
+
+			<div className={`${tab !== 'settings' ? 'hidden' : ''}`}>
+				<SidebarSettings />
+			</div>
+
+
+
 		</div>
 
 	</>

extensions/void/src/sidebar/SidebarChat.tsx

@@ -0,0 +1,288 @@
+import React, { FormEvent, useCallback, useEffect, useRef, useState } from "react";
+
+
+import { marked } from 'marked';
+import MarkdownRender from "./markdown/MarkdownRender";
+import BlockCode from "./markdown/BlockCode";
+import { SelectedFiles } from "./components/SelectedFiles";
+import { File, ChatMessage, CodeSelection } from "../shared_types";
+import * as vscode from 'vscode'
+import { awaitVSCodeResponse, getVSCodeAPI, onMessageFromVSCode, useOnVSCodeMessage } from "./getVscodeApi";
+import { useThreads } from "./contextForThreads";
+import { sendLLMMessage } from "../common/sendLLMMessage";
+import { useVoidConfig } from "./contextForConfig";
+
+
+
+const filesStr = (fullFiles: File[]) => {
+	return fullFiles.map(({ filepath, content }) =>
+		`
+${filepath.fsPath}
+\`\`\`
+${content}
+\`\`\``).join('\n')
+}
+
+const userInstructionsStr = (instructions: string, files: File[], selection: CodeSelection | null) => {
+	let str = '';
+
+	if (files.length > 0) {
+		str += filesStr(files);
+	}
+
+	if (selection) {
+		str += `
+I am currently selecting this code:
+\t\`\`\`${selection.selectionStr}\`\`\`
+`;
+	}
+
+	if (files.length > 0 && selection) {
+		str += `
+Please edit the selected code or the entire file following these instructions:
+`;
+	} else if (files.length > 0) {
+		str += `
+Please edit the file following these instructions:
+`;
+	} else if (selection) {
+		str += `
+Please edit the selected code following these instructions:
+`;
+	}
+
+	str += `
+\t${instructions}
+`;
+	if (files.length > 0) {
+		str += `
+\tIf you make a change, rewrite the entire file.
+`; // TODO don't rewrite the whole file on prompt, instead rewrite it when click Apply
+	}
+	return str;
+};
+
+const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => {
+
+	const role = chatMessage.role
+	const children = chatMessage.displayContent
+
+	if (!children)
+		return null
+
+	let chatbubbleContents: React.ReactNode
+
+	if (role === 'user') {
+		chatbubbleContents = <>
+			<SelectedFiles files={chatMessage.files} setFiles={null} />
+			{chatMessage.selection?.selectionStr && <BlockCode text={chatMessage.selection.selectionStr} hideToolbar />}
+			{children}
+		</>
+	}
+	else if (role === 'assistant') {
+
+		chatbubbleContents = <MarkdownRender string={children} /> // sectionsHTML
+	}
+
+
+	return <div className={`${role === 'user' ? 'text-right' : 'text-left'}`}>
+		<div className={`inline-block p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full`}>
+			{chatbubbleContents}
+		</div>
+	</div>
+}
+
+
+export const SidebarChat = () => {
+
+
+	// state of current message
+	const [selection, setSelection] = useState<CodeSelection | null>(null) // the code the user is selecting
+	const [files, setFiles] = useState<vscode.Uri[]>([]) // the names of the files in the chat
+	const [instructions, setInstructions] = useState('') // the user's instructions
+
+	// state of chat
+	const [messageStream, setMessageStream] = useState('')
+	const [isLoading, setIsLoading] = useState(false)
+	const abortFnRef = useRef<(() => void) | null>(null)
+
+	const [latestError, setLatestError] = useState('')
+
+	// higher level state
+	const { allThreads, currentThread, addMessageToHistory, startNewThread, switchToThread } = useThreads()
+	const { voidConfig } = useVoidConfig()
+
+	// if they pressed the + to add a new chat
+	useOnVSCodeMessage('startNewThread', (m) => {
+		// find a thread with 0 messages and switch to it
+		for (let threadId in allThreads) {
+			if (allThreads[threadId].messages.length === 0) {
+				switchToThread(threadId)
+				return
+			}
+		}
+		// start a new thread
+		startNewThread()
+	})
+
+	// if user pressed ctrl+l, add their selection to the sidebar
+	useOnVSCodeMessage('ctrl+l', (m) => {
+		setSelection(m.selection)
+		const filepath = m.selection.filePath
+
+		// add current file to the context if it's not already in the files array
+		if (!files.find(f => f.fsPath === filepath.fsPath))
+			setFiles(files => [...files, filepath])
+	})
+
+
+	const formRef = useRef<HTMLFormElement | null>(null)
+	const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+
+		e.preventDefault()
+		if (isLoading) return
+
+		setIsLoading(true)
+		setInstructions('');
+		formRef.current?.reset(); // reset the form's text when clear instructions or unexpected behavior happens
+		setSelection(null)
+		setFiles([])
+		setLatestError('')
+
+		// request file content from vscode and await response
+		getVSCodeAPI().postMessage({ type: 'requestFiles', filepaths: files })
+		const relevantFiles = await awaitVSCodeResponse('files')
+
+		// add message to chat history
+		const userContent = userInstructionsStr(instructions, relevantFiles.files, selection)
+		// console.log('prompt:\n', content)
+		const newHistoryElt: ChatMessage = { role: 'user', content: userContent, displayContent: instructions, selection, files }
+		addMessageToHistory(newHistoryElt)
+
+		// send message to LLM
+		let { abort } = sendLLMMessage({
+			messages: [...(currentThread?.messages ?? []).map(m => ({ role: m.role, content: m.content })), { role: 'user', content: userContent }],
+			onText: (newText, fullText) => setMessageStream(fullText),
+			onFinalMessage: (content) => {
+				// add assistant's message to chat history, and clear selection
+				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
+				addMessageToHistory(newHistoryElt)
+				setMessageStream('')
+				setIsLoading(false)
+			},
+			onError: (error) => {
+				// add assistant's message to chat history, and clear selection
+				let content = messageStream; // just use the current content
+				const newHistoryElt: ChatMessage = { role: 'assistant', content, displayContent: content, }
+				addMessageToHistory(newHistoryElt)
+				setMessageStream('')
+				setIsLoading(false)
+
+				setLatestError(error)
+			},
+			voidConfig: voidConfig
+		})
+		abortFnRef.current = abort
+
+	}
+
+	const onStop = useCallback(() => {
+		// abort claude
+		abortFnRef.current?.()
+
+		// if messageStream was not empty, add it to the history
+		const llmContent = messageStream || '(canceled)'
+		const newHistoryElt: ChatMessage = { role: 'assistant', displayContent: messageStream, content: llmContent }
+		addMessageToHistory(newHistoryElt)
+
+		setMessageStream('')
+		setIsLoading(false)
+
+	}, [addMessageToHistory, messageStream])
+
+	//Clear code selection
+	const clearSelection = () => {
+		setSelection(null);
+	};
+
+
+	return <>
+		<div className="overflow-y-auto overflow-x-hidden space-y-4">
+			{/* previous messages */}
+			{currentThread !== null && currentThread.messages.map((message, i) =>
+				<ChatBubble key={i} chatMessage={message} />
+			)}
+			{/* message stream */}
+			<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream }} />
+		</div>
+		{/* chatbar */}
+		<div className="shrink-0 py-4">
+			{/* selection */}
+			<div className="text-left">
+
+				<div className="relative">
+					<div className="input">
+						{/* selection */}
+						{(files.length || selection?.selectionStr) && <div className="p-2 pb-0 space-y-2">
+							{/* selected files */}
+							<SelectedFiles files={files} setFiles={setFiles} />
+							{/* selected code */}
+							{!!selection?.selectionStr && (
+								<BlockCode className="rounded bg-vscode-sidebar-bg" text={selection.selectionStr} toolbar={(
+									<button
+										onClick={clearSelection}
+										className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
+									>
+										Remove
+									</button>
+								)} />
+							)}
+						</div>}
+						<form
+							ref={formRef}
+							className="flex flex-row items-center rounded-md p-2"
+							onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) onSubmit(e) }}
+
+							onSubmit={(e) => {
+								console.log('submit!')
+								e.preventDefault();
+								onSubmit(e)
+							}}>
+							{/* input */}
+
+							<textarea
+								onChange={(e) => { setInstructions(e.target.value) }}
+								className="w-full p-2 leading-tight resize-none max-h-[50vh] overflow-hidden bg-transparent border-none !outline-none"
+								placeholder="Ctrl+L to select"
+								rows={1}
+								onInput={e => { e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px' }} // Adjust height dynamically
+							/>
+							{/* submit button */}
+							{isLoading ?
+								<button
+									onClick={onStop}
+									className="btn btn-primary rounded-r-lg max-h-10 p-2"
+									type='button'
+								>Stop</button>
+								: <button
+									className="btn btn-primary font-bold size-8 flex justify-center items-center rounded-full p-2 max-h-10"
+									disabled={!instructions}
+									type='submit'
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+										<line x1="12" y1="19" x2="12" y2="5"></line>
+										<polyline points="5 12 12 5 19 12"></polyline>
+									</svg>
+								</button>
+							}
+						</form>
+					</div>
+				</div>
+			</div>
+
+			{latestError}
+		</div>
+	</>
+}
+
+

extensions/void/src/sidebar/SidebarSettings.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from "react";
+import { configFields, useVoidConfig, VoidConfigField } from "./contextForConfig";
+
+
+const SettingOfFieldAndParam = ({ field, param }: { field: VoidConfigField, param: string }) => {
+	const { voidConfig, partialVoidConfig, voidConfigInfo, setConfigParam } = useVoidConfig()
+	const { enumArr, defaultVal, description } = voidConfigInfo[field][param]
+	const val = partialVoidConfig[field]?.[param] ?? defaultVal // current value of this item
+
+	const updateState = (newValue: string) => { setConfigParam(field, param, newValue) }
+
+	const resetButton = <button className='btn btn-sm' onClick={() => updateState(defaultVal)}>
+		<svg
+			className='size-5'
+			stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 16 16" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M3.5 2v3.5L4 6h3.5V5H4.979l.941-.941a3.552 3.552 0 1 1 5.023 5.023L5.746 14.28l.72.72 5.198-5.198A4.57 4.57 0 0 0 5.2 3.339l-.7.7V2h-1z"></path>
+		</svg>
+	</button>
+
+	const inputElement = enumArr === undefined ?
+		// string
+		(<input
+			className='input p-1 w-full'
+			type="text"
+			value={val}
+			onChange={(e) => updateState(e.target.value)}
+		/>)
+		:
+		// enum
+		(<select
+			className='dropdown p-1 w-full'
+			value={val}
+			onChange={(e) => updateState(e.target.value)}
+		>
+			{enumArr.map((option) => (
+				<option key={option} value={option}>
+					{option}
+				</option>
+			))}
+		</select>)
+
+	return <div>
+		<label className='hidden'>{param}</label>
+		<span>{description}</span>
+		<div className='flex items-center'>
+			{inputElement}
+			{resetButton}
+		</div>
+	</div>
+}
+
+export const SidebarSettings = () => {
+
+	const { voidConfig, voidConfigInfo } = useVoidConfig()
+
+	const current_field = voidConfig.default['whichApi'] as VoidConfigField
+
+
+	return (
+		<div className='space-y-4 py-2 overflow-y-auto'>
+
+			{/* choose the field */}
+			<div className='outline-vscode-input-bg'>
+				<SettingOfFieldAndParam
+					field='default'
+					param='whichApi'
+				/>
+			</div>
+
+			<hr />
+
+			{/* render all fields, but hide the ones not visible for fast tab switching */}
+			{configFields.map(field => {
+				return <div
+					key={field}
+					className={`flex flex-col gap-y-2 ${field !== current_field ? 'hidden' : ''}`}
+				>
+					{Object.keys(voidConfigInfo[field]).map((param) => (
+						<SettingOfFieldAndParam
+							key={param}
+							field={field}
+							param={param}
+						/>
+					))}
+				</div>
+			})}
+
+			{/* Remove this after 10/21/24, this is just to give developers a heads up about the recent change  */}
+			<div className='pt-20'>
+				{`We recently updated Settings. To copy your old Void settings over, press Ctrl+Shift+P, `}
+				{`type 'Open User Settings (JSON)',`}
+				{` and look for 'void.'. `}
+			</div>
+		</div>
+	)
+}
+

extensions/void/src/sidebar/SidebarThreadSelector.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { ThreadsProvider, useThreads } from "./contextForThreads";
+
+
+const truncate = (s: string) => {
+	let len = s.length
+	const TRUNC_AFTER = 16
+	if (len >= TRUNC_AFTER)
+		s = s.substring(0, TRUNC_AFTER) + '...'
+	return s
+}
+
+
+export const SidebarThreadSelector = ({ onClose }: { onClose: () => void }) => {
+	const { allThreads, currentThread, switchToThread } = useThreads()
+
+	// sorted by most recent to least recent
+	const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].createdAt > allThreads![threadId2].createdAt ? -1 : 1)
+
+	return (
+		<div className="flex flex-col gap-y-1">
+
+			{/* X button at top right */}
+			<div className="text-right">
+				<button className="btn btn-sm" onClick={onClose}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						className="size-4"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M6 18 18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			{/* a list of all the past threads */}
+			<div className='flex flex-col gap-y-1 max-h-80 overflow-y-auto'>
+				{sortedThreadIds.map((threadId) => {
+					if (!allThreads)
+						return <>Error: Threads not found.</>
+					const pastThread = allThreads[threadId]
+
+					let btnStringArr = []
+
+					let msg1 = truncate(allThreads[threadId].messages[0]?.displayContent ?? '(empty)')
+					btnStringArr.push(msg1)
+
+					let msg2 = truncate(allThreads[threadId].messages[1]?.displayContent ?? '')
+					if (msg2)
+						btnStringArr.push(msg2)
+
+					btnStringArr.push(allThreads[threadId].messages.length)
+
+					const btnString = btnStringArr.join(' / ')
+
+					return (
+						<button
+							key={pastThread.id}
+							className={`btn btn-sm rounded-sm ${pastThread.id === currentThread?.id ? "btn-primary" : "btn-secondary"}`}
+							onClick={() => switchToThread(pastThread.id)}
+							title={new Date(pastThread.createdAt).toLocaleString()}
+						>
+							{btnString}
+						</button>
+					)
+				})}
+			</div>
+
+		</div>
+	)
+}

extensions/void/src/sidebar/contextForConfig.tsx

@@ -0,0 +1,360 @@
+import React, { ReactNode, createContext, useCallback, useContext, useEffect, useRef, useState, } from "react"
+import { awaitVSCodeResponse, getVSCodeAPI, useOnVSCodeMessage } from "./getVscodeApi"
+
+const configEnum = <EnumArr extends readonly string[]>(description: string, defaultVal: EnumArr[number], enumArr: EnumArr) => {
+	return {
+		description,
+		defaultVal,
+		enumArr,
+	}
+}
+
+const configString = (description: string, defaultVal: string) => {
+	return {
+		description,
+		defaultVal,
+		enumArr: undefined,
+	}
+}
+
+// fields you can customize (don't forget 'default' - it isn't included here!)
+export const configFields = [
+	'anthropic',
+	'openAI',
+	'greptile',
+	'ollama',
+	'openRouter',
+	'openAICompatible',
+	'azure'
+] as const
+
+
+
+const voidConfigInfo: Record<
+	typeof configFields[number] | 'default', {
+		[prop: string]: {
+			description: string,
+			enumArr?: readonly string[] | undefined,
+			defaultVal: string,
+		},
+	}
+> = {
+	default: {
+		whichApi: configEnum(
+			"API Provider.",
+			'anthropic',
+			configFields,
+		),
+	},
+	anthropic: {
+		apikey: configString('Anthropic API key.', ''),
+		model: configEnum(
+			"Anthropic model to use.",
+			'claude-3-5-sonnet-20240620',
+			[
+				"claude-3-5-sonnet-20240620",
+				"claude-3-opus-20240229",
+				"claude-3-sonnet-20240229",
+				"claude-3-haiku-20240307"
+			] as const,
+		),
+
+		maxTokens: configEnum(
+			"Anthropic max number of tokens to output.",
+			'8192',
+			[
+				"1024",
+				"2048",
+				"4096",
+				"8192"
+			] as const,
+		),
+	},
+	openAI: {
+		apikey: configString('OpenAI API key.', ''),
+		model: configEnum(
+			'OpenAI model to use.',
+			'gpt-4o',
+			[
+				"o1-preview",
+				"o1-mini",
+				"gpt-4o",
+				"gpt-4o-2024-05-13",
+				"gpt-4o-2024-08-06",
+				"gpt-4o-mini",
+				"gpt-4o-mini-2024-07-18",
+				"gpt-4-turbo",
+				"gpt-4-turbo-2024-04-09",
+				"gpt-4-turbo-preview",
+				"gpt-4-0125-preview",
+				"gpt-4-1106-preview",
+				"gpt-4",
+				"gpt-4-0613",
+				"gpt-3.5-turbo-0125",
+				"gpt-3.5-turbo",
+				"gpt-3.5-turbo-1106"
+			] as const
+		),
+	},
+	greptile: {
+		apikey: configString('Greptile API key.', ''),
+		githubPAT: configString('Github PAT that Greptile uses to access your repository', ''),
+		remote: configEnum(
+			'Repo location',
+			'github',
+			[
+				'github',
+				'gitlab'
+			] as const
+		),
+		repository: configString('Repository identifier in "owner/repository" format.', ''),
+		branch: configString('Name of the branch to use.', 'main'),
+	},
+	ollama: {
+		endpoint: configString(
+			'The Ollama endpoint. Start Ollama by running `OLLAMA_ORIGINS="vscode-webview://*" ollama serve`',
+			'http://127.0.0.1:11434'
+		),
+		model: configEnum(
+			'Ollama model to use.',
+			'llama3.1',
+			[
+				"codegemma",
+				"codegemma:2b",
+				"codegemma:7b",
+				"codellama",
+				"codellama:7b",
+				"codellama:13b",
+				"codellama:34b",
+				"codellama:70b",
+				"codellama:code",
+				"codellama:python",
+				"command-r",
+				"command-r:35b",
+				"command-r-plus",
+				"command-r-plus:104b",
+				"deepseek-coder-v2",
+				"deepseek-coder-v2:16b",
+				"deepseek-coder-v2:236b",
+				"falcon2",
+				"falcon2:11b",
+				"firefunction-v2",
+				"firefunction-v2:70b",
+				"gemma",
+				"gemma:2b",
+				"gemma:7b",
+				"gemma2",
+				"gemma2:2b",
+				"gemma2:9b",
+				"gemma2:27b",
+				"llama2",
+				"llama2:7b",
+				"llama2:13b",
+				"llama2:70b",
+				"llama3",
+				"llama3:8b",
+				"llama3:70b",
+				"llama3-chatqa",
+				"llama3-chatqa:8b",
+				"llama3-chatqa:70b",
+				"llama3-gradient",
+				"llama3-gradient:8b",
+				"llama3-gradient:70b",
+				"llama3.1",
+				"llama3.1:8b",
+				"llama3.1:70b",
+				"llama3.1:405b",
+				"llava",
+				"llava:7b",
+				"llava:13b",
+				"llava:34b",
+				"llava-llama3",
+				"llava-llama3:8b",
+				"llava-phi3",
+				"llava-phi3:3.8b",
+				"mistral",
+				"mistral:7b",
+				"mistral-large",
+				"mistral-large:123b",
+				"mistral-nemo",
+				"mistral-nemo:12b",
+				"mixtral",
+				"mixtral:8x7b",
+				"mixtral:8x22b",
+				"moondream",
+				"moondream:1.8b",
+				"openhermes",
+				"openhermes:v2.5",
+				"phi3",
+				"phi3:3.8b",
+				"phi3:14b",
+				"phi3.5",
+				"phi3.5:3.8b",
+				"qwen",
+				"qwen:7b",
+				"qwen:14b",
+				"qwen:32b",
+				"qwen:72b",
+				"qwen:110b",
+				"qwen2",
+				"qwen2:0.5b",
+				"qwen2:1.5b",
+				"qwen2:7b",
+				"qwen2:72b",
+				"smollm",
+				"smollm:135m",
+				"smollm:360m",
+				"smollm:1.7b"
+			] as const
+		),
+	},
+	openRouter: {
+		model: configString(
+			'OpenRouter model to use.',
+			'openai/gpt-4o'
+		),
+		apikey: configString('OpenRouter API key.', ''),
+	},
+	openAICompatible: {
+		endpoint: configString('The endpoint.', 'http://127.0.0.1:11434/v1'),
+		model: configString('The name of the model to use.', 'gpt-4o'),
+		apikey: configString('Your API key.', ''),
+	},
+	azure: {
+		// "void.azure.apiKey": {
+		// 	"type": "string",
+		// 	"description": "Azure API key."
+		// },
+		// "void.azure.deploymentId": {
+		// 	"type": "string",
+		// 	"description": "Azure API deployment ID."
+		// },
+		// "void.azure.resourceName": {
+		// 	"type": "string",
+		// 	"description": "Name of the Azure OpenAI resource. Either this or `baseURL` can be used. \nThe resource name is used in the assembled URL: `https://{resourceName}.openai.azure.com/openai/deployments/{modelId}{path}`"
+		// },
+		// "void.azure.providerSettings": {
+		// 	"type": "object",
+		// 	"properties": {
+		// 		"baseURL": {
+		// 			"type": "string",
+		// 			"default": "https://${resourceName}.openai.azure.com/openai/deployments",
+		// 			"description": "Azure API base URL."
+		// 		},
+		// 		"headers": {
+		// 			"type": "object",
+		// 			"description": "Custom headers to include in the requests."
+		// 		}
+		// 	}
+		// },
+	},
+}
+
+
+// this is the type that comes with metadata like desc, default val, etc
+type VoidConfigInfo = typeof voidConfigInfo
+export type VoidConfigField = keyof typeof voidConfigInfo // typeof configFields[number]
+
+// this is the type that specifies the user's actual config
+export type PartialVoidConfig = {
+	[K in keyof typeof voidConfigInfo]?: {
+		[P in keyof typeof voidConfigInfo[K]]?: typeof voidConfigInfo[K][P]['defaultVal']
+	}
+}
+
+export type VoidConfig = {
+	[K in keyof typeof voidConfigInfo]: {
+		[P in keyof typeof voidConfigInfo[K]]: typeof voidConfigInfo[K][P]['defaultVal']
+	}
+}
+
+
+
+const getVoidConfig = (currentConfig: PartialVoidConfig): VoidConfig => {
+	const config = {} as PartialVoidConfig
+	for (let field of [...configFields, 'default'] as const) {
+		config[field] = {}
+		for (let prop in voidConfigInfo[field]) {
+			config[field][prop] = currentConfig[field]?.[prop] || voidConfigInfo[field][prop].defaultVal
+		}
+	}
+	return config as VoidConfig
+}
+
+const defaultVoidConfig: VoidConfig = getVoidConfig({})
+
+// const [stateRef, setState] = useInstantState(initVal)
+// setState instantly changes the value of stateRef instead of having to wait until the next render
+const useInstantState = <T,>(initVal: T) => {
+	const stateRef = useRef<T>(initVal)
+	const [_, setS] = useState<T>(initVal)
+	const setState = useCallback((newVal: T) => {
+		setS(newVal);
+		stateRef.current = newVal;
+	}, [])
+	return [stateRef as React.RefObject<T>, setState] as const // make s.current readonly - setState handles all changes
+}
+
+
+
+type SetConfigParamType = <K extends VoidConfigField>(field: K, param: keyof VoidConfigInfo[K], newVal: string) => void
+
+type ConfigValueType = {
+	voidConfig: VoidConfig,
+	voidConfigInfo: VoidConfigInfo,
+	partialVoidConfig: PartialVoidConfig,
+	setConfigParam: SetConfigParamType
+}
+
+
+const ConfigContext = createContext<ConfigValueType>(undefined as unknown as ConfigValueType)
+
+export function ConfigProvider({ children }: { children: ReactNode }) {
+	const [partialVoidConfig, setPartialVoidConfig] = useInstantState<PartialVoidConfig>({}) // the user's selections
+	const [voidConfig, setVoidConfig] = useState<VoidConfig>(defaultVoidConfig)
+
+
+	// get the config on mount
+	useEffect(() => {
+		getVSCodeAPI().postMessage({ type: 'getPartialVoidConfig' })
+		awaitVSCodeResponse('partialVoidConfig').then((m) => {
+			setPartialVoidConfig(m.partialVoidConfig)
+			const newFullConfig = getVoidConfig(m.partialVoidConfig)
+			setVoidConfig(newFullConfig)
+		})
+	}, [setPartialVoidConfig])
+
+	// return the provider
+	return (<ConfigContext.Provider
+		value={{
+			voidConfig,
+			voidConfigInfo,
+			partialVoidConfig: partialVoidConfig.current ?? {},
+			setConfigParam: (field, param, newVal) => {
+				const newPartialConfig: PartialVoidConfig = {
+					...partialVoidConfig.current,
+					[field]: {
+						...partialVoidConfig.current?.[field],
+						[param]: newVal
+					}
+				}
+				setPartialVoidConfig(newPartialConfig)
+				const newFullConfig = getVoidConfig(newPartialConfig)
+				setVoidConfig(newFullConfig)
+				getVSCodeAPI().postMessage({ type: 'persistPartialVoidConfig', partialVoidConfig: newPartialConfig })
+			}
+		}}
+	>
+		{children}
+	</ConfigContext.Provider>
+	)
+}
+
+export function useVoidConfig(): ConfigValueType {
+	const context = useContext<ConfigValueType>(ConfigContext)
+	if (context === undefined) {
+		throw new Error("useVoidConfig missing Provider")
+	}
+	return context
+}
+

extensions/void/src/sidebar/contextForThreads.tsx

@@ -3,7 +3,8 @@ import { ChatMessage, ChatThreads } from "../shared_types"
 import { awaitVSCodeResponse, getVSCodeAPI } from "./getVscodeApi"
 
 
-type ThreadsContextValue = {
+// a "thread" means a chat message history
+type ConfigForThreadsValueType = {
 	readonly allThreads: ChatThreads | null,
 	readonly currentThread: ChatThreads[string] | null;
 	addMessageToHistory: (message: ChatMessage) => void;
@@ -11,7 +12,7 @@ type ThreadsContextValue = {
 	startNewThread: () => void;
 }
 
-const ThreadsContext = createContext<ThreadsContextValue>(undefined as unknown as ThreadsContextValue)
+const ThreadsContext = createContext<ConfigForThreadsValueType>(undefined as unknown as ConfigForThreadsValueType)
 
 const createNewThread = () => ({
 	id: new Date().getTime().toString(),
@@ -39,7 +40,7 @@ export function ThreadsProvider({ children }: { children: ReactNode }) {
 
 	// this loads allThreads in on mount
 	useEffect(() => {
-		getVSCodeAPI().postMessage({ type: "getAllThreads" })
+		getVSCodeAPI().postMessage({ type: 'getAllThreads' })
 		awaitVSCodeResponse('allThreads')
 			.then(response => {
 				setAllThreads(response.threads)
@@ -90,10 +91,10 @@ export function ThreadsProvider({ children }: { children: ReactNode }) {
 	)
 }
 
-export function useThreads(): ThreadsContextValue {
-	const context = useContext<ThreadsContextValue>(ThreadsContext)
+export function useThreads(): ConfigForThreadsValueType {
+	const context = useContext<ConfigForThreadsValueType>(ThreadsContext)
 	if (context === undefined) {
-		throw new Error("useThreads must be used within a ThreadsProvider")
+		throw new Error("useThreads missing Provider")
 	}
 	return context
 }

extensions/void/src/sidebar/getVscodeApi.ts

@@ -1,48 +1,79 @@
-import { Command, WebviewMessage } from "../shared_types";
+import { useEffect } from "react";
+import { MessageFromSidebar, MessageToSidebar, } from "../shared_types";
+import { v4 as uuidv4 } from 'uuid';
 
 
+type Command = MessageToSidebar['type']
 
-// message -> res[]
-const awaiting: { [c in Command]: ((res: any) => void)[] } = {
+// messageType -> res[]
+const onetimeCallbacks: { [C in Command]: ((res: any) => void)[] } = {
 	"ctrl+l": [],
-	"applyChanges": [],
-	"requestFiles": [],
 	"files": [],
-	"apiConfig": [],
-	"getApiConfig": [],
+	"partialVoidConfig": [],
 	"startNewThread": [],
-	"getAllThreads": [],
 	"allThreads": [],
-	"persistThread": [],
-	"toggleThreadSelector": []
+	"toggleThreadSelector": [],
+	"toggleSettings": [],
 }
 
+// messageType -> id -> res
+const callbacks: { [C in Command]: { [id: string]: ((res: any) => void) } } = {
+	"ctrl+l": {},
+	"files": {},
+	"partialVoidConfig": {},
+	"startNewThread": {},
+	"allThreads": {},
+	"toggleThreadSelector": {},
+	"toggleSettings": {},
+}
+
+
 // use this function to await responses
 export const awaitVSCodeResponse = <C extends Command>(c: C) => {
-	let result: Promise<WebviewMessage & { type: C }> = new Promise((res, rej) => {
-		awaiting[c].push(res)
+	let result: Promise<MessageToSidebar & { type: C }> = new Promise((res, rej) => {
+		onetimeCallbacks[c].push(res)
 	})
 	return result
 }
 
-export const resolveAwaitingVSCodeResponse = (m: WebviewMessage) => {
-	// resolve all promises for this message
-	for (let res of awaiting[m.type]) {
+
+// use this function to add a listener to a certain type of message
+export const useOnVSCodeMessage = <C extends Command>(messageType: C, fn: (e: MessageToSidebar & { type: C }) => void) => {
+	useEffect(() => {
+		const mType = messageType
+		const callbackId: string = uuidv4();
+		// @ts-ignore
+		callbacks[mType][callbackId] = fn;
+		return () => { delete callbacks[mType][callbackId] }
+	}, [messageType, fn])
+}
+
+
+
+// this function gets called whenever sidebar receives a message - it should only mount once
+export const onMessageFromVSCode = (m: MessageToSidebar) => {
+	// resolve all promises for this message type
+	for (let res of onetimeCallbacks[m.type]) {
+		res(m)
+		onetimeCallbacks[m.type].splice(0) // clear the array
+	}
+	// call the listener for this message type
+	for (let res of Object.values(callbacks[m.type])) {
 		res(m)
-		awaiting[m.type].splice(0) // clear the array
 	}
 }
 
 
-// VS Code exposes the function acquireVsCodeApi() to us, it should only get called once
-let vsCodeApi: ReturnType<AcquireVsCodeApiType> | undefined;
 
 type AcquireVsCodeApiType = () => {
-	postMessage(message: WebviewMessage): void;
+	postMessage(message: MessageFromSidebar): void;
 	// setState(state: any): void; // getState and setState are made obsolete by us using { retainContextWhenHidden: true }
 	// getState(): any;
 };
 
+// VS Code exposes the function acquireVsCodeApi() to us, this variable makes sure it only gets called once
+let vsCodeApi: ReturnType<AcquireVsCodeApiType> | undefined;
+
 export function getVSCodeAPI(): ReturnType<AcquireVsCodeApiType> {
 	if (vsCodeApi)
 		return vsCodeApi;

extensions/void/src/sidebar/index.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom/client"
 import Sidebar from "./Sidebar"
-import { ThreadsProvider } from "./threadsContext"
+import { ThreadsProvider } from "./contextForThreads"
+import { ConfigProvider } from "./contextForConfig"
 
 // mount the sidebar on the id="root" element
 if (typeof document === "undefined") {
@@ -13,7 +14,9 @@ console.log("Void root Element:", rootElement)
 
 const extension = (
 	<ThreadsProvider>
-		<Sidebar />
+		<ConfigProvider>
+			<Sidebar />
+		</ConfigProvider>
 	</ThreadsProvider>
 )
 const root = ReactDOM.createRoot(rootElement)

extensions/void/src/sidebar/markdown/BlockCode.tsx

@@ -1,6 +1,9 @@
 import React, { ReactNode, useCallback, useEffect, useState } from "react"
 import { getVSCodeAPI } from "../getVscodeApi"
 
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
 enum CopyButtonState {
 	Copy = "Copy",
 	Copied = "Copied!",
@@ -12,17 +15,27 @@ const COPY_FEEDBACK_TIMEOUT = 1000
 // code block with toolbar (Apply, Copy, etc) at top
 const BlockCode = ({
 	text,
+	language,
 	toolbar,
 	hideToolbar = false,
 	className,
 }: {
 	text: string
+	language?: string
 	toolbar?: ReactNode
 	hideToolbar?: boolean
 	className?: string
 }) => {
 	const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy)
 
+	const customStyle = {
+		...atomOneDarkReasonable,
+		'code[class*="language-"]': {
+			...atomOneDarkReasonable['code[class*="language-"]'],
+			background: "none",
+		},
+	}
+
 	useEffect(() => {
 		if (copyButtonState !== CopyButtonState.Copy) {
 			setTimeout(() => {
@@ -71,7 +84,14 @@ const BlockCode = ({
 			<div
 				className={`overflow-x-auto rounded-sm text-vscode-editor-fg bg-vscode-editor-bg ${!hideToolbar ? "rounded-tl-none" : ""} ${className}`}
 			>
-				<pre className="p-2">{text}</pre>
+				<SyntaxHighlighter
+					language={language}
+					style={customStyle}
+					className={"rounded-sm"}
+				>
+					{text}
+				</SyntaxHighlighter>
+
 			</div>
 		</div>
 	)

extensions/void/src/sidebar/markdown/MarkdownRender.tsx

@@ -12,7 +12,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
 	}
 
 	if (t.type === "code") {
-		return <BlockCode text={t.text} />
+		return <BlockCode text={t.text} language={t.lang} />
 	}
 
 	if (t.type === "heading") {
@@ -165,4 +165,4 @@ const MarkdownRender = ({ string, nested = false }: { string: string, nested?: b
 	)
 }
 
-export default MarkdownRender
+export default MarkdownRender

extensions/void/src/sidebar/styles.css

@@ -35,5 +35,9 @@ html {
 }
 
 .input {
-	@apply bg-vscode-input-bg text-vscode-input-fg border-vscode-input-border;
+	@apply bg-vscode-input-bg text-vscode-input-fg border-vscode-input-border focus:outline-vscode-focus-border;
+}
+
+.dropdown {
+	@apply bg-vscode-dropdown-bg text-vscode-dropdown-foreground border-vscode-dropdown-border focus:outline-vscode-focus-border;
 }

extensions/void/tailwind.config.js

@@ -18,8 +18,11 @@ module.exports = {
 					"button-hoverBg": "var(--vscode-button-hoverBackground)",
 					"button-secondary-fg": "var(--vscode-button-secondaryForeground)",
 					"button-secondary-bg": "var(--vscode-button-secondaryBackground)",
-					"button-secondary-hoverBg":
-						"var(--vscode-button-secondaryHoverBackground)",
+					"button-secondary-hoverBg": "var(--vscode-button-secondaryHoverBackground)",
+					"dropdown-bg": "var(--vscode-settings-dropdownBackground)",
+					"dropdown-foreground": "var(--vscode-settings-dropdownForeground)",
+					"dropdown-border": "var(--vscode-settings-dropdownBorder)",
+					"focus-border": "var(--vscode-focusBorder)",
 				},
 			},
 		},