From 6f85874bd03c425c6900a944236c24b81d30fbc3 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Fri, 20 Sep 2024 20:28:56 +0100
Subject: [PATCH 01/41] add in select for llm

---
 package-lock.json                 | 307 ++++++++++++++++++++++++++++++
 package.json                      |   1 +
 src/components/Chat/StartChat.tsx |  30 +--
 src/components/Chat/index.tsx     |   2 +-
 src/components/ui/select.tsx      | 144 ++++++++++++++
 src/styles/global.css             |   4 +
 6 files changed, 475 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ui/select.tsx

diff --git a/package-lock.json b/package-lock.json
index 7e19a857..ccd33125 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@sentry/electron": "^5.3.0",
         "@tailwindcss/typography": "^0.5.10",
@@ -3901,6 +3902,11 @@
       "version": "3.0.0",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -3928,6 +3934,31 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -3956,6 +3987,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
@@ -3982,6 +4027,44 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-hover-card": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.1.tgz",
@@ -4020,6 +4103,23 @@
         "react": "^16.x || ^17.x || ^18.x"
       }
     },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -4131,6 +4231,48 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",
+      "integrity": "sha512-8iRDfyLtzxlprOo9IicnzvpsO1wNCkuwzzCM+Z5Rb5tNOpCdMvcc2AkzX0Fz+Tz9v6NJ5B/7EEgyZveo4FBRfQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -4210,6 +4352,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
@@ -4244,6 +4400,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
@@ -7899,6 +8077,11 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "license": "MIT",
@@ -10452,6 +10635,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "dev": true,
@@ -11167,6 +11358,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "license": "MIT",
@@ -19199,6 +19398,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-rnd": {
       "version": "10.4.1",
       "license": "MIT",
@@ -19216,6 +19460,28 @@
       "version": "2.3.1",
       "license": "0BSD"
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-switch": {
       "version": "7.0.0",
       "license": "MIT",
@@ -21413,6 +21679,26 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-debounce": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.1.tgz",
@@ -21424,6 +21710,27 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
diff --git a/package.json b/package.json
index 2f738e41..e4a070ba 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@sentry/electron": "^5.3.0",
     "@tailwindcss/typography": "^0.5.10",
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 1812606e..17bc9770 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -5,6 +5,7 @@ import PromptSuggestion from './ChatPrompts'
 import '../../styles/chat.css'
 import { AgentConfig } from './types'
 import exampleAgents from './exampleAgents'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 interface StartChatProps {
   defaultModelName: string
@@ -37,6 +38,10 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     setUserTextFieldInput(`Using the ${agent.name} agent. How can I help you?`)
   }
 
+  const handleLLMChange = (value: string) => {
+    setSelectedLLM(value)
+  }
+
   return (
     <div className="relative flex w-full flex-col items-center">
       <div className="relative flex size-full flex-col text-center lg:top-10 lg:max-w-2xl">
@@ -61,18 +66,19 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           />
           <div className="h-px w-[calc(100%-5%)] flex-col self-center bg-gray-600 md:flex-row" />
           <div className="flex flex-col items-center justify-between px-4 py-2 md:flex-row">
-            <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 text-text-gen-100 md:flex-row">
-              <select
-                value={selectedLLM}
-                onChange={(e) => setSelectedLLM(e.target.value)}
-                className="h-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                {llmConfigs.map((llm) => (
-                  <option key={llm.modelName} value={llm.modelName}>
-                    {llm.modelName}
-                  </option>
-                ))}
-              </select>
+            <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
+              <Select value={selectedLLM} onValueChange={handleLLMChange}>
+                <SelectTrigger className="w-[180px]">
+                  <SelectValue placeholder="Select LLM" />
+                </SelectTrigger>
+                <SelectContent>
+                  {llmConfigs.map((llm) => (
+                    <SelectItem key={llm.modelName} value={llm.modelName}>
+                      {llm.modelName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
             <button
               className="m-1 flex cursor-pointer items-center justify-center rounded-md border-0 bg-blue-600 p-2 text-white hover:bg-blue-500"
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index 3262d43b..ad7df301 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -122,7 +122,7 @@ const ChatComponent: React.FC = () => {
 
   return (
     <div className="flex size-full items-center justify-center">
-      <div className="mx-auto flex size-full flex-col overflow-hidden border-y-0 border-l-[0.001px] border-r-0 border-solid border-neutral-700 bg-background">
+      <div className="mx-auto flex size-full flex-col overflow-hidden border-solid border-neutral-700 bg-background">
         {currentChat && currentChat.messages && currentChat.messages.length > 0 ? (
           <ChatMessages
             currentChat={currentChat}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 00000000..b0f20e28
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,144 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center cursor-pointer justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="size-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="size-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index db2e7975..6b5a8e9e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,10 +14,14 @@ body {
   min-height: 100%;
   min-width: 100%;
   overflow-y: hidden;
+  
 }
 
 * {
   box-sizing: border-box;
+  /* make the border none: */
+  border: none;
+  font-family: 'Inter', sans-serif;
 
 }
 

From 64b2f29350e06922bacc5b31035141a4b947e00a Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 11:02:31 +0100
Subject: [PATCH 02/41] add select component

---
 components.json                   |  2 +-
 src/components/Chat/ChatInput.tsx |  2 +-
 src/components/Chat/StartChat.tsx |  2 +-
 src/components/Chat/index.tsx     |  2 +-
 src/components/ui/select.tsx      |  4 +--
 src/styles/global.css             | 50 +++++++++++++++----------------
 6 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/components.json b/components.json
index 5db6c61f..6e9bbca2 100644
--- a/components.json
+++ b/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/styles/global.css",
-    "baseColor": "slate",
+    "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 8ee5bdc3..1f209c1d 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -16,7 +16,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
   handleSubmitNewMessage,
   loadingState,
 }) => (
-  <div className="flex h-titlebar w-full items-center justify-center bg-dark-gray-c-eleven p-10">
+  <div className="flex h-titlebar w-full items-center justify-center  p-10">
     <div className="  relative bottom-5 flex w-full max-w-3xl">
       <div className="w-full rounded-lg border-2 border-solid border-neutral-700 p-3 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
         <div className="flex h-full pr-8">
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 17bc9770..1b43303f 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -68,7 +68,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           <div className="flex flex-col items-center justify-between px-4 py-2 md:flex-row">
             <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
               <Select value={selectedLLM} onValueChange={handleLLMChange}>
-                <SelectTrigger className="w-[180px]">
+                <SelectTrigger className="w-[180px] border border-solid border-foreground">
                   <SelectValue placeholder="Select LLM" />
                 </SelectTrigger>
                 <SelectContent>
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index ad7df301..b4f2f329 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -122,7 +122,7 @@ const ChatComponent: React.FC = () => {
 
   return (
     <div className="flex size-full items-center justify-center">
-      <div className="mx-auto flex size-full flex-col overflow-hidden border-solid border-neutral-700 bg-background">
+      <div className="mx-auto flex size-full flex-col overflow-hidden  bg-background">
         {currentChat && currentChat.messages && currentChat.messages.length > 0 ? (
           <ChatMessages
             currentChat={currentChat}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index b0f20e28..8948616f 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center cursor-pointer justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center text-foreground cursor-pointer justify-between whitespace-nowrap rounded-md  bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
@@ -68,7 +68,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover  text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
diff --git a/src/styles/global.css b/src/styles/global.css
index 6b5a8e9e..6ee26512 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -19,10 +19,8 @@ body {
 
 * {
   box-sizing: border-box;
-  /* make the border none: */
   border: none;
   font-family: 'Inter', sans-serif;
-
 }
 
 a {
@@ -203,24 +201,24 @@ button {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
@@ -229,25 +227,25 @@ button {
     --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

From cfd035a53fb095b515038248a1bf4cda487c5f05 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 11:10:30 +0100
Subject: [PATCH 03/41] migrate to card

---
 src/components/Chat/StartChat.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 1b43303f..51e346d7 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
-import PromptSuggestion from './ChatPrompts'
 import '../../styles/chat.css'
 import { AgentConfig } from './types'
 import exampleAgents from './exampleAgents'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Card, CardDescription } from '../ui/card'
 
 interface StartChatProps {
   defaultModelName: string
@@ -92,7 +92,12 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
         </div>
         <div className="mt-4 size-full justify-center md:flex-row lg:flex">
           {exampleAgents.map((agent) => (
-            <PromptSuggestion key={agent.name} promptText={agent.name} onClick={() => handleAgentSelection(agent)} />
+            <Card
+              className="m-4 size-28 cursor-pointer border border-solid border-border bg-transparent"
+              onClick={() => handleAgentSelection(agent)}
+            >
+              <CardDescription className="text-primary">{agent.name}</CardDescription>
+            </Card>
           ))}
         </div>
       </div>

From 7d9ee1b85ec1da2647aa0d04406aecfa1593d046 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 12:28:15 +0100
Subject: [PATCH 04/41] fix color scheming

---
 components.json                   |  2 +-
 electron/preload/index.ts         |  2 +-
 src/components/Chat/StartChat.tsx | 19 +++++----
 src/styles/global.css             | 66 +++++++++++++++----------------
 4 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/components.json b/components.json
index 6e9bbca2..33e459ad 100644
--- a/components.json
+++ b/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "src/styles/global.css",
-    "baseColor": "zinc",
+    "baseColor": "stone",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 7d3326c6..12076cc6 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -77,13 +77,13 @@ const fileSystem = {
   openDirectoryDialog: createIPCHandler<() => Promise<string[]>>('open-directory-dialog'),
   openFileDialog: createIPCHandler<(fileExtensions?: string[]) => Promise<string[]>>('open-file-dialog'),
   getFilesTreeForWindow: createIPCHandler<() => Promise<FileInfoTree>>('get-files-tree-for-window'),
+  readFile: createIPCHandler<(filePath: string) => Promise<string>>('read-file'),
   writeFile: createIPCHandler<(writeFileProps: WriteFileProps) => Promise<void>>('write-file'),
   isDirectory: createIPCHandler<(filePath: string) => Promise<boolean>>('is-directory'),
   renameFileRecursive: createIPCHandler<(renameFileProps: RenameFileProps) => Promise<void>>('rename-file-recursive'),
   indexFileInDatabase: createIPCHandler<(filePath: string) => Promise<void>>('index-file-in-database'),
   createFile: createIPCHandler<(filePath: string, content: string) => Promise<void>>('create-file'),
   createDirectory: createIPCHandler<(dirPath: string) => Promise<void>>('create-directory'),
-  readFile: createIPCHandler<(filePath: string) => Promise<string>>('read-file'),
   checkFileExists: createIPCHandler<(filePath: string) => Promise<boolean>>('check-file-exists'),
   deleteFile: createIPCHandler<(filePath: string) => Promise<void>>('delete-file'),
   moveFileOrDir: createIPCHandler<(sourcePath: string, destinationPath: string) => Promise<void>>('move-file-or-dir'),
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 51e346d7..94e1033a 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -48,10 +48,10 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
         <div className="flex size-full justify-center">
           <img src="icon.png" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
         </div>
-        <h1 className="mb-10 text-[28px] text-gray-300">
+        <h1 className="mb-10 text-[28px] text-foreground">
           Welcome to your AI-powered assistant! Start a conversation with your second brain!
         </h1>
-        <div className="flex flex-col rounded-md bg-bg-000 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
+        <div className="flex flex-col rounded-md border-2 border-solid border-border bg-background focus-within:ring-1 focus-within:ring-ring">
           <textarea
             value={userTextFieldInput}
             onKeyDown={(e) => {
@@ -60,15 +60,15 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                 sendMessageHandler()
               }
             }}
-            className="h-[100px] w-full resize-none rounded-t-md border-0 bg-transparent p-4 text-text-gen-100 caret-white focus:outline-none"
+            className="h-[100px] w-full resize-none rounded-t-md border-0 bg-transparent p-4 text-primary caret-foreground focus:outline-none"
             placeholder="What can Reor help you with today?"
             onChange={(e) => setUserTextFieldInput(e.target.value)}
           />
-          <div className="h-px w-[calc(100%-5%)] flex-col self-center bg-gray-600 md:flex-row" />
+          <div className="h-px w-[calc(100%-5%)] flex-col self-center bg-border md:flex-row" />
           <div className="flex flex-col items-center justify-between px-4 py-2 md:flex-row">
             <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
               <Select value={selectedLLM} onValueChange={handleLLMChange}>
-                <SelectTrigger className="w-[180px] border border-solid border-foreground">
+                <SelectTrigger className="w-[180px] border border-solid border-border">
                   <SelectValue placeholder="Select LLM" />
                 </SelectTrigger>
                 <SelectContent>
@@ -81,7 +81,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               </Select>
             </div>
             <button
-              className="m-1 flex cursor-pointer items-center justify-center rounded-md border-0 bg-blue-600 p-2 text-white hover:bg-blue-500"
+              className="m-1 flex cursor-pointer items-center justify-center rounded-md border-0 bg-primary p-2 text-primary-foreground hover:bg-accent hover:text-accent-foreground"
               onClick={sendMessageHandler}
               type="button"
               aria-label="Send message"
@@ -93,10 +93,13 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
         <div className="mt-4 size-full justify-center md:flex-row lg:flex">
           {exampleAgents.map((agent) => (
             <Card
-              className="m-4 size-28 cursor-pointer border border-solid border-border bg-transparent"
+              key={agent.name}
+              className={`m-4 size-28 cursor-pointer border-2 ${
+                chatFilters.name === agent.name ? 'border-primary text-primary' : 'border-border text-muted-foreground'
+              } bg-card transition-all duration-200 ease-in-out hover:border-accent hover:text-accent-foreground`}
               onClick={() => handleAgentSelection(agent)}
             >
-              <CardDescription className="text-primary">{agent.name}</CardDescription>
+              <CardDescription className="text-inherit">{agent.name}</CardDescription>
             </Card>
           ))}
         </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index 6ee26512..2d91a73b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -201,24 +201,24 @@ button {
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
@@ -227,25 +227,25 @@ button {
     --radius: 0.5rem;
   }
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

From 7d00c61b783d2a7030e6bc0e928ca7c9ce4da1c1 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 13:07:23 +0100
Subject: [PATCH 05/41] initial markdown conversion

---
 .husky/pre-commit              |   1 -
 package-lock.json              | 553 ++++++++++++++++++++++++++++++++-
 package.json                   |   8 +
 src/components/Editor/utils.ts |  21 +-
 src/contexts/FileContext.tsx   |  29 +-
 src/utils/markdown.ts          |  46 +++
 6 files changed, 629 insertions(+), 29 deletions(-)
 create mode 100644 src/utils/markdown.ts

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 68e791c7..20ba6e9f 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1 @@
 echo "\nRunning some lint checks on your (hopefully) beautiful code...\n"
-npm run lint:fix && npm run type-check
diff --git a/package-lock.json b/package-lock.json
index ccd33125..bef7e3ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,13 +82,21 @@
         "react-toastify": "^10.0.4",
         "react-type-animation": "^3.2.0",
         "react-window": "^1.8.10",
+        "rehype-parse": "^9.0.0",
         "rehype-raw": "^7.0.0",
+        "rehype-remark": "^10.0.0",
+        "rehype-stringify": "^10.0.0",
+        "remark-gfm": "^4.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.1",
+        "remark-stringify": "^11.0.0",
         "remove-markdown": "^0.5.0",
         "tailwind-merge": "^2.5.2",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
         "tiptap-markdown": "^0.8.10",
         "turndown": "^7.1.2",
+        "unified": "^11.0.5",
         "use-debounce": "^10.0.1",
         "uuid": "^10.0.0",
         "uuidv4": "^6.2.13",
@@ -10933,6 +10941,36 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-embedded": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-embedded/-/hast-util-embedded-3.0.0.tgz",
+      "integrity": "sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-is-element": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-from-parse5": {
       "version": "8.0.1",
       "license": "MIT",
@@ -10955,6 +10993,58 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/hast-util-has-property": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-3.0.0.tgz",
+      "integrity": "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-body-ok-link": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-body-ok-link/-/hast-util-is-body-ok-link-3.0.0.tgz",
+      "integrity": "sha512-VFHY5bo2nY8HiV6nir2ynmEB1XkxzuUffhEGeVx7orbu/B1KaGyeGgMZldvMVx5xWrDlLLG/kQ6YkJAMkBEx0w==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-minify-whitespace": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-minify-whitespace/-/hast-util-minify-whitespace-1.0.0.tgz",
+      "integrity": "sha512-gD1m4YJSIk62ij32TlhFNqsC3dOQvpA4QAhyZOZFAT4u8LfEfB6N+F0V9oXQGBWXoqrs0h9wQRKa8RCeo8j61g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-embedded": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-parse-selector": {
       "version": "4.0.0",
       "license": "MIT",
@@ -10966,6 +11056,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-phrasing": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-phrasing/-/hast-util-phrasing-3.0.1.tgz",
+      "integrity": "sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-embedded": "^3.0.0",
+        "hast-util-has-property": "^3.0.0",
+        "hast-util-is-body-ok-link": "^3.0.0",
+        "hast-util-is-element": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-raw": {
       "version": "9.0.2",
       "license": "MIT",
@@ -10993,6 +11099,33 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-html/node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.0",
       "license": "MIT",
@@ -11022,6 +11155,31 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/hast-util-to-mdast": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-mdast/-/hast-util-to-mdast-10.1.0.tgz",
+      "integrity": "sha512-DsL/SvCK9V7+vfc6SLQ+vKIyBDXTk2KLSbfBYkH4zeF/uR1yBajHRhkzuaUSGOB1WJSTieJBdHwxlC+HLKvZZw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-phrasing": "^3.0.0",
+        "hast-util-to-html": "^9.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "rehype-minify-whitespace": "^6.0.0",
+        "trim-trailing-lines": "^2.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-parse5": {
       "version": "8.0.0",
       "license": "MIT",
@@ -11039,6 +11197,26 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-text/node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "license": "MIT",
@@ -14256,6 +14434,15 @@
       "version": "2.1.1",
       "license": "ISC"
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+      "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/marked": {
       "version": "12.0.1",
       "license": "MIT",
@@ -14291,6 +14478,32 @@
         "is-buffer": "~1.1.6"
       }
     },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
+      "integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.0",
       "license": "MIT",
@@ -14317,6 +14530,101 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
+      "integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
+      "integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.0",
       "license": "MIT",
@@ -14526,6 +14834,120 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.0.tgz",
+      "integrity": "sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.0",
       "funding": [
@@ -19770,9 +20192,37 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/rehype-minify-whitespace": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-minify-whitespace/-/rehype-minify-whitespace-6.0.1.tgz",
+      "integrity": "sha512-3oJZ3O8ukn6cNJ8elg8dU/tMCH4CDk7elE9x5G+dKL1qQYXeVnsDkSz17sAiUKIoDOXUUkOyC/VMNGEHbPmCew==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-minify-whitespace": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-parse": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.0.tgz",
+      "integrity": "sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-raw": {
       "version": "7.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "hast-util-raw": "^9.0.0",
@@ -19783,9 +20233,57 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-remark": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-remark/-/rehype-remark-10.0.0.tgz",
+      "integrity": "sha512-+aDXY/icqMFOafJQomVjxe3BAP7aR3lIsQ3GV6VIwpbCD2nvNFOXjGvotMe5p0Ny+Gt6L13DhEf/FjOOpTuUbQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "hast-util-to-mdast": "^10.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
+      "integrity": "sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-html": "^9.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
+      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
       "dependencies": {
         "@types/mdast": "^4.0.0",
         "mdast-util-from-markdown": "^2.0.0",
@@ -19798,8 +20296,9 @@
       }
     },
     "node_modules/remark-rehype": {
-      "version": "11.1.0",
-      "license": "MIT",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
@@ -19812,6 +20311,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remove-markdown": {
       "version": "0.5.0",
       "license": "MIT"
@@ -21234,6 +21747,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/trim-trailing-lines": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-2.1.0.tgz",
+      "integrity": "sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/trough": {
       "version": "2.2.0",
       "license": "MIT",
@@ -21521,8 +22043,9 @@
       "license": "MIT"
     },
     "node_modules/unified": {
-      "version": "11.0.4",
-      "license": "MIT",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "bail": "^2.0.0",
@@ -21541,6 +22064,24 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-find-after/node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index e4a070ba..7253d8d0 100644
--- a/package.json
+++ b/package.json
@@ -101,13 +101,21 @@
     "react-toastify": "^10.0.4",
     "react-type-animation": "^3.2.0",
     "react-window": "^1.8.10",
+    "rehype-parse": "^9.0.0",
     "rehype-raw": "^7.0.0",
+    "rehype-remark": "^10.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "remark-stringify": "^11.0.0",
     "remove-markdown": "^0.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "tiptap-markdown": "^0.8.10",
     "turndown": "^7.1.2",
+    "unified": "^11.0.5",
     "use-debounce": "^10.0.1",
     "uuid": "^10.0.0",
     "uuidv4": "^6.2.13",
diff --git a/src/components/Editor/utils.ts b/src/components/Editor/utils.ts
index f2797c44..21d4ee0e 100644
--- a/src/components/Editor/utils.ts
+++ b/src/components/Editor/utils.ts
@@ -1,14 +1,19 @@
 import { Editor } from '@tiptap/core'
+import { htmlToMd } from '@/utils/markdown'
 
-function getMarkdown(editor: Editor) {
-  // Fetch the current markdown content from the editor
-  const originalMarkdown = editor.storage.markdown.getMarkdown()
-  // Replace the escaped square brackets with unescaped ones
-  const modifiedMarkdown = originalMarkdown
-    .replace(/\\\[/g, '[') // Replaces \[ with [
-    .replace(/\\\]/g, ']') // Replaces \] wi ]
+export async function getMarkdown(editor: Editor) {
+  const html = editor.getHTML()
 
-  return modifiedMarkdown
+  console.time('htmlToMd')
+  const startTime = performance.now()
+
+  const markdown = await htmlToMd(html)
+
+  const endTime = performance.now()
+  console.timeEnd('htmlToMd')
+  console.log(`htmlToMd operation took ${endTime - startTime} milliseconds`)
+
+  return markdown
 }
 
 export default getMarkdown
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index d98e34b6..0be6ca0e 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -15,7 +15,6 @@ import TextStyle from '@tiptap/extension-text-style'
 import { Editor, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { toast } from 'react-toastify'
-import { Markdown } from 'tiptap-markdown'
 import { useDebounce } from 'use-debounce'
 import useFileInfoTreeHook from '@/components/Sidebars/FileSideBar/hooks/use-file-info-tree'
 import { getInvalidCharacterInFilePath } from '@/utils/strings'
@@ -28,6 +27,7 @@ import '@/styles/tiptap.scss'
 import SearchAndReplace from '@/components/Editor/Search/SearchAndReplaceExtension'
 import getMarkdown from '@/components/Editor/utils'
 import welcomeNote from '@/components/File/utils'
+import { mdToHtml } from '@/utils/markdown'
 
 type FileContextType = {
   currentlyOpenFilePath: string | null
@@ -122,7 +122,8 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       setNeedToIndexEditorContent(false)
     }
     const fileContent = (await window.fileSystem.readFile(filePath)) ?? ''
-    editor?.commands.setContent(fileContent)
+    const htmlContent = await mdToHtml(fileContent)
+    editor?.commands.setContent(htmlContent)
     setCurrentlyOpenFilePath(filePath)
     setCurrentlyChangingFilePath(false)
   }
@@ -161,16 +162,16 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         searchResultClass: 'bg-yellow-400',
         disableRegex: false,
       }),
-      Markdown.configure({
-        html: true,
-        tightLists: true,
-        tightListClass: 'tight',
-        bulletListMarker: '-',
-        linkify: true,
-        breaks: true,
-        transformPastedText: true,
-        transformCopiedText: false,
-      }),
+      // Markdown.configure({
+      //   html: true,
+      //   tightLists: true,
+      //   tightListClass: 'tight',
+      //   bulletListMarker: '-',
+      //   linkify: true,
+      //   breaks: true,
+      //   transformPastedText: true,
+      //   transformCopiedText: false,
+      // }),
       TaskItem.configure({
         nested: true,
       }),
@@ -209,7 +210,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   const writeEditorContentToDisk = async (_editor: Editor | null, filePath: string | null) => {
     if (filePath !== null && needToWriteEditorContentToDisk && _editor) {
-      const markdownContent = getMarkdown(_editor)
+      const markdownContent = await getMarkdown(_editor)
       if (markdownContent !== null) {
         await window.fileSystem.writeFile({
           filePath,
@@ -251,7 +252,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   useEffect(() => {
     const handleWindowClose = async () => {
       if (currentlyOpenFilePath !== null && editor && editor.getHTML() !== null) {
-        const markdown = getMarkdown(editor)
+        const markdown = await getMarkdown(editor)
         await window.fileSystem.writeFile({
           filePath: currentlyOpenFilePath,
           content: markdown,
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
new file mode 100644
index 00000000..6a2143d8
--- /dev/null
+++ b/src/utils/markdown.ts
@@ -0,0 +1,46 @@
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import rehypeStringify from 'rehype-stringify'
+import rehypeParse from 'rehype-parse'
+import rehypeRemark from 'rehype-remark'
+import remarkStringify from 'remark-stringify'
+
+export const htmlToMd = async (html: string): Promise<string> => {
+  console.log('html in: ', html)
+  const result = await unified()
+    .use(rehypeParse)
+    .use(rehypeRemark, {
+      handlers: {
+        // Custom handler for <p> elements
+        p: (state, node) => {
+          if (!node.children || node.children.length === 0) {
+            // Return a Markdown paragraph node with an empty text child
+            return {
+              type: 'paragraph',
+              children: [{ type: 'text', value: '' }],
+            }
+          }
+          // Use the default handler for non-empty <p> elements
+          return {
+            type: 'paragraph',
+            children: state.all(node),
+          }
+        },
+      },
+    })
+    .use(remarkStringify, {
+      // Ensure that multiple blank lines are preserved
+      // by preventing the collapsing of consecutive newlines
+      join: [],
+    })
+    .process(html)
+
+  console.log('result: ', String(result))
+  return String(result)
+}
+// Markdown to HTML
+export const mdToHtml = async (markdown: string): Promise<string> => {
+  const result = await unified().use(remarkParse).use(remarkRehype).use(rehypeStringify).process(markdown)
+  return String(result)
+}

From a221e44420a85f30e76a72d11996c298bccebe28 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 13:46:22 +0100
Subject: [PATCH 06/41] somewhat working eol checking

---
 package-lock.json     | 22 +++++++++++++-
 package.json          |  2 ++
 src/utils/markdown.ts | 71 ++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 90 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bef7e3ae..e7a179f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,8 @@
         "tiptap-markdown": "^0.8.10",
         "turndown": "^7.1.2",
         "unified": "^11.0.5",
+        "unist-builder": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
         "use-debounce": "^10.0.1",
         "uuid": "^10.0.0",
         "uuidv4": "^6.2.13",
@@ -22064,6 +22066,23 @@
       "version": "3.0.2",
       "license": "MIT"
     },
+    "node_modules/unist-builder": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-4.0.0.tgz",
+      "integrity": "sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-builder/node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
     "node_modules/unist-util-find-after": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
@@ -22145,7 +22164,8 @@
     },
     "node_modules/unist-util-visit": {
       "version": "5.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "unist-util-is": "^6.0.0",
diff --git a/package.json b/package.json
index 7253d8d0..46e4d7cb 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,8 @@
     "tiptap-markdown": "^0.8.10",
     "turndown": "^7.1.2",
     "unified": "^11.0.5",
+    "unist-builder": "^4.0.0",
+    "unist-util-visit": "^5.0.0",
     "use-debounce": "^10.0.1",
     "uuid": "^10.0.0",
     "uuidv4": "^6.2.13",
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
index 6a2143d8..c7d4decd 100644
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@@ -6,6 +6,73 @@ import rehypeParse from 'rehype-parse'
 import rehypeRemark from 'rehype-remark'
 import remarkStringify from 'remark-stringify'
 
+import { u } from 'unist-builder'
+import { visit } from 'unist-util-visit'
+
+// Custom plugin to convert placeholders to empty paragraph nodes
+function remarkNewlinesToEmptyParagraphs(EOL_MARKER: string) {
+  return () => (tree) => {
+    visit(tree, (node, index, parent) => {
+      // Process only text nodes
+      if (node.type === 'text') {
+        const { value } = node
+        if (value.includes(EOL_MARKER)) {
+          const parts = value.split(EOL_MARKER)
+          const newNodes = []
+
+          parts.forEach((part, i) => {
+            if (part) {
+              newNodes.push(u('text', part))
+            }
+            if (i < parts.length - 1) {
+              // Insert empty paragraph at the parent level
+              newNodes.push(u('paragraph', []))
+            }
+          })
+
+          // Replace the original text node with new nodes
+          parent.children.splice(index, 1, ...newNodes)
+          // Adjust traversal to skip over newly inserted nodes
+          return [visit.SKIP, index + newNodes.length]
+        }
+      }
+    })
+
+    // After processing, remove any residual EOL_MARKER from text nodes
+    visit(tree, 'text', (node) => {
+      if (node.value.includes(EOL_MARKER)) {
+        node.value = node.value.replace(new RegExp(EOL_MARKER, 'g'), '')
+      }
+    })
+  }
+}
+
+export const mdToHtml = async (markdown: string): Promise<string> => {
+  const EOL_MARKER = '__EOL__' // Use a marker without angle brackets
+  // Replace '\n' with the unique marker
+  const preprocessedMarkdown = markdown.replace(/\n/g, EOL_MARKER)
+
+  const result = await unified()
+    .use(remarkParse)
+    .use(() => (tree) => {
+      // Assign parent references for traversal
+      visit(tree, (node, index, parent) => {
+        if (parent) {
+          node.parent = parent
+        }
+      })
+    })
+    .use(remarkNewlinesToEmptyParagraphs(EOL_MARKER))
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(preprocessedMarkdown)
+
+  // Post-processing: Remove any residual markers from the output
+  const html = String(result).replace(new RegExp(EOL_MARKER, 'g'), '')
+
+  return html
+}
+
 export const htmlToMd = async (html: string): Promise<string> => {
   console.log('html in: ', html)
   const result = await unified()
@@ -40,7 +107,3 @@ export const htmlToMd = async (html: string): Promise<string> => {
   return String(result)
 }
 // Markdown to HTML
-export const mdToHtml = async (markdown: string): Promise<string> => {
-  const result = await unified().use(remarkParse).use(remarkRehype).use(rehypeStringify).process(markdown)
-  return String(result)
-}

From 26933890e0ebbfe47d1a0039fbb2b480ce241a5b Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 18:48:12 +0100
Subject: [PATCH 07/41] initial work on bringing in markdown extension

---
 package-lock.json                             |  37 +---
 package.json                                  |   2 +-
 .../Editor/MarkdownExtension/Markdown.ts      |  74 +++++++
 .../MarkdownExtension/extensions/index.js     |  48 +++++
 .../extensions/marks/bold.js                  |  23 +++
 .../extensions/marks/code.js                  |  23 +++
 .../extensions/marks/html.js                  |  42 ++++
 .../extensions/marks/italic.js                |  23 +++
 .../extensions/marks/link.js                  |  23 +++
 .../extensions/marks/strike.js                |  22 +++
 .../extensions/nodes/blockquote.js            |  23 +++
 .../extensions/nodes/bullet-list.js           |  24 +++
 .../extensions/nodes/code-block.js            |  35 ++++
 .../extensions/nodes/hard-break.js            |  32 +++
 .../extensions/nodes/heading.js               |  23 +++
 .../extensions/nodes/horizontal-rule.js       |  23 +++
 .../extensions/nodes/html.js                  |  53 +++++
 .../extensions/nodes/image.js                 |  23 +++
 .../extensions/nodes/list-item.js             |  23 +++
 .../extensions/nodes/ordered-list.js          |  42 ++++
 .../extensions/nodes/paragraph.js             |  23 +++
 .../extensions/nodes/table.js                 |  73 +++++++
 .../extensions/nodes/task-item.js             |  36 ++++
 .../extensions/nodes/task-list.js             |  32 +++
 .../extensions/nodes/text.js                  |  25 +++
 .../extensions/tiptap/clipboard.js            |  43 ++++
 .../extensions/tiptap/tight-lists.js          |  48 +++++
 .../Editor/MarkdownExtension/index.ts         |   4 +
 .../MarkdownExtension/parse/MarkdownParser.js | 127 ++++++++++++
 .../serialize/MarkdownSerializer.js           |  71 +++++++
 .../MarkdownExtension/serialize/state.js      |  68 +++++++
 .../Editor/MarkdownExtension/util/dom.js      |  39 ++++
 .../MarkdownExtension/util/extensions.js      |  16 ++
 .../Editor/MarkdownExtension/util/markdown.js |  56 ++++++
 .../MarkdownExtension/util/prosemirror.js     |   5 +
 src/components/Editor/utils.ts                |  22 ++-
 src/contexts/FileContext.tsx                  |  26 +--
 src/utils/markdown.ts                         | 186 ++++++++----------
 38 files changed, 1362 insertions(+), 156 deletions(-)
 create mode 100644 src/components/Editor/MarkdownExtension/Markdown.ts
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/index.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/bold.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/code.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/html.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/italic.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/link.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/strike.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/html.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/image.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/table.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/text.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
 create mode 100644 src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
 create mode 100644 src/components/Editor/MarkdownExtension/index.ts
 create mode 100644 src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
 create mode 100644 src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
 create mode 100644 src/components/Editor/MarkdownExtension/serialize/state.js
 create mode 100644 src/components/Editor/MarkdownExtension/util/dom.js
 create mode 100644 src/components/Editor/MarkdownExtension/util/extensions.js
 create mode 100644 src/components/Editor/MarkdownExtension/util/markdown.js
 create mode 100644 src/components/Editor/MarkdownExtension/util/prosemirror.js

diff --git a/package-lock.json b/package-lock.json
index e7a179f8..4eb722d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,6 +64,7 @@
         "lit": "^3.0.0",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.435.0",
+        "markdown-it-task-lists": "^2.1.1",
         "marked": "^12.0.1",
         "npm": "^10.3.0",
         "ollama": "^0.4.9",
@@ -94,7 +95,6 @@
         "tailwind-merge": "^2.5.2",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
-        "tiptap-markdown": "^0.8.10",
         "turndown": "^7.1.2",
         "unified": "^11.0.5",
         "unist-builder": "^4.0.0",
@@ -5299,22 +5299,10 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/linkify-it": {
-      "version": "3.0.5",
-      "license": "MIT"
-    },
     "node_modules/@types/long": {
       "version": "4.0.2",
       "license": "MIT"
     },
-    "node_modules/@types/markdown-it": {
-      "version": "13.0.7",
-      "license": "MIT",
-      "dependencies": {
-        "@types/linkify-it": "*",
-        "@types/mdurl": "*"
-      }
-    },
     "node_modules/@types/mdast": {
       "version": "4.0.3",
       "license": "MIT",
@@ -5322,10 +5310,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/@types/mdurl": {
-      "version": "1.0.5",
-      "license": "MIT"
-    },
     "node_modules/@types/ms": {
       "version": "0.7.34",
       "license": "MIT"
@@ -14434,7 +14418,8 @@
     },
     "node_modules/markdown-it-task-lists": {
       "version": "2.1.1",
-      "license": "ISC"
+      "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
     },
     "node_modules/markdown-table": {
       "version": "3.0.3",
@@ -21680,22 +21665,6 @@
         "@popperjs/core": "^2.9.0"
       }
     },
-    "node_modules/tiptap-markdown": {
-      "version": "0.8.10",
-      "license": "MIT",
-      "workspaces": [
-        "example"
-      ],
-      "dependencies": {
-        "@types/markdown-it": "^13.0.7",
-        "markdown-it": "^14.1.0",
-        "markdown-it-task-lists": "^2.1.1",
-        "prosemirror-markdown": "^1.11.1"
-      },
-      "peerDependencies": {
-        "@tiptap/core": "^2.0.3"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "dev": true,
diff --git a/package.json b/package.json
index 46e4d7cb..b3108003 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "lit": "^3.0.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.435.0",
+    "markdown-it-task-lists": "^2.1.1",
     "marked": "^12.0.1",
     "npm": "^10.3.0",
     "ollama": "^0.4.9",
@@ -113,7 +114,6 @@
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
-    "tiptap-markdown": "^0.8.10",
     "turndown": "^7.1.2",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
diff --git a/src/components/Editor/MarkdownExtension/Markdown.ts b/src/components/Editor/MarkdownExtension/Markdown.ts
new file mode 100644
index 00000000..14ac4b8f
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/Markdown.ts
@@ -0,0 +1,74 @@
+import { Extension, extensions } from '@tiptap/core'
+import { MarkdownTightLists } from './extensions/tiptap/tight-lists'
+import { MarkdownSerializer } from './serialize/MarkdownSerializer'
+import { MarkdownParser } from './parse/MarkdownParser'
+import { MarkdownClipboard } from './extensions/tiptap/clipboard'
+
+export const Markdown = Extension.create({
+  name: 'markdown',
+  priority: 50,
+  addOptions() {
+    return {
+      html: true,
+      tightLists: true,
+      tightListClass: 'tight',
+      bulletListMarker: '-',
+      linkify: false,
+      breaks: false,
+      transformPastedText: false,
+      transformCopiedText: false,
+    }
+  },
+  addCommands() {
+    const commands = extensions.Commands.config.addCommands()
+    return {
+      setContent: (content, emitUpdate, parseOptions) => (props) => {
+        console.log('content', content)
+        const parsedContent = props.editor.storage.markdown.parser.parse(content)
+        console.log('parsedContent', parsedContent)
+        return commands.setContent(parsedContent, emitUpdate, parseOptions)(props)
+      },
+      insertContentAt: (range, content, options) => (props) => {
+        return commands.insertContentAt(
+          range,
+          props.editor.storage.markdown.parser.parse(content, { inline: true }),
+          options,
+        )(props)
+      },
+    }
+  },
+  onBeforeCreate() {
+    this.editor.storage.markdown = {
+      options: { ...this.options },
+      parser: new MarkdownParser(this.editor, this.options),
+      serializer: new MarkdownSerializer(this.editor),
+      getMarkdown: () => {
+        console.log('CALLING GET CONTENT')
+        return this.editor.storage.markdown.serializer.serialize(this.editor.state.doc)
+      },
+    }
+    this.editor.options.initialContent = this.editor.options.content
+    this.editor.options.content = this.editor.storage.markdown.parser.parse(this.editor.options.content)
+  },
+  onCreate() {
+    this.editor.options.content = this.editor.options.initialContent
+    delete this.editor.options.initialContent
+  },
+  addStorage() {
+    return {
+      /// storage will be defined in onBeforeCreate() to prevent initial object overriding
+    }
+  },
+  addExtensions() {
+    return [
+      MarkdownTightLists.configure({
+        tight: this.options.tightLists,
+        tightClass: this.options.tightListClass,
+      }),
+      MarkdownClipboard.configure({
+        transformPastedText: this.options.transformPastedText,
+        transformCopiedText: this.options.transformCopiedText,
+      }),
+    ]
+  },
+})
diff --git a/src/components/Editor/MarkdownExtension/extensions/index.js b/src/components/Editor/MarkdownExtension/extensions/index.js
new file mode 100644
index 00000000..87d186ed
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/index.js
@@ -0,0 +1,48 @@
+import Blockquote from "./nodes/blockquote";
+import BulletList from "./nodes/bullet-list";
+import CodeBlock from "./nodes/code-block";
+import HardBreak from "./nodes/hard-break";
+import Heading from "./nodes/heading";
+import HorizontalRule from "./nodes/horizontal-rule";
+import HTMLNode from "./nodes/html";
+import Image from "./nodes/image";
+import ListItem from "./nodes/list-item";
+import OrderedList from "./nodes/ordered-list";
+import Paragraph from "./nodes/paragraph";
+import Table from "./nodes/table";
+import TaskItem from "./nodes/task-item";
+import TaskList from "./nodes/task-list";
+import Text from "./nodes/text";
+
+import Bold from "./marks/bold";
+import Code from "./marks/code";
+import HTMLMark from "./marks/html";
+import Italic from "./marks/italic";
+import Link from "./marks/link";
+import Strike from "./marks/strike";
+
+
+export default [
+    Blockquote,
+    BulletList,
+    CodeBlock,
+    HardBreak,
+    Heading,
+    HorizontalRule,
+    HTMLNode,
+    Image,
+    ListItem,
+    OrderedList,
+    Paragraph,
+    Table,
+    TaskItem,
+    TaskList,
+    Text,
+
+    Bold,
+    Code,
+    HTMLMark,
+    Italic,
+    Link,
+    Strike,
+]
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/bold.js b/src/components/Editor/MarkdownExtension/extensions/marks/bold.js
new file mode 100644
index 00000000..e849f72a
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/bold.js
@@ -0,0 +1,23 @@
+import { Mark } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Bold = Mark.create({
+    name: 'bold',
+});
+
+export default Bold.extend({
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.marks.strong,
+                parse: {
+                    // handled by markdown-it
+                }
+            },
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/code.js b/src/components/Editor/MarkdownExtension/extensions/marks/code.js
new file mode 100644
index 00000000..25a59f20
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/code.js
@@ -0,0 +1,23 @@
+import { Mark } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Code = Mark.create({
+    name: 'code',
+});
+
+export default Code.extend({
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.marks.code,
+                parse: {
+                    // handled by markdown-it
+                }
+            }
+        }
+    }
+})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/html.js b/src/components/Editor/MarkdownExtension/extensions/marks/html.js
new file mode 100644
index 00000000..d02d14da
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/html.js
@@ -0,0 +1,42 @@
+import { Fragment } from "@tiptap/pm/model";
+import { getHTMLFromFragment, Mark } from "@tiptap/core";
+
+
+export default Mark.create({
+    name: 'markdownHTMLMark',
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: {
+                    open(state, mark)  {
+                        if(!this.editor.storage.markdown.options.html) {
+                            console.warn(`Tiptap Markdown: "${mark.type.name}" mark is only available in html mode`);
+                            return '';
+                        }
+                        return getMarkTags(mark)?.[0] ?? '';
+                    },
+                    close(state, mark) {
+                        if(!this.editor.storage.markdown.options.html) {
+                            return '';
+                        }
+                        return getMarkTags(mark)?.[1] ?? '';
+                    },
+                },
+                parse: {
+                    // handled by markdown-it
+                }
+            }
+        }
+    }
+});
+
+function getMarkTags(mark) {
+    const schema = mark.type.schema;
+    const node = schema.text(' ', [mark]);
+    const html = getHTMLFromFragment(Fragment.from(node), schema);
+    const match = html.match(/^(<.*?>) (<\/.*?>)$/);
+    return match ? [match[1], match[2]] : null;
+}
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/italic.js b/src/components/Editor/MarkdownExtension/extensions/marks/italic.js
new file mode 100644
index 00000000..e80b3cda
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/italic.js
@@ -0,0 +1,23 @@
+import { Mark } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Italic = Mark.create({
+    name: 'italic',
+});
+
+export default Italic.extend({
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.marks.em,
+                parse: {
+                    // handled by markdown-it
+                }
+            }
+        }
+    }
+})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/link.js b/src/components/Editor/MarkdownExtension/extensions/marks/link.js
new file mode 100644
index 00000000..43b83d34
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/link.js
@@ -0,0 +1,23 @@
+import { Mark } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Link = Mark.create({
+    name: 'link',
+});
+
+export default Link.extend({
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.marks.link,
+                parse: {
+                    // handled by markdown-it
+                }
+            }
+        }
+    }
+})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/strike.js b/src/components/Editor/MarkdownExtension/extensions/marks/strike.js
new file mode 100644
index 00000000..18066cf5
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/marks/strike.js
@@ -0,0 +1,22 @@
+import { Mark } from "@tiptap/core";
+
+
+const Strike = Mark.create({
+    name: 'strike',
+});
+
+export default Strike.extend({
+    /**
+     * @return {{markdown: MarkdownMarkSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: {open: '~~', close: '~~', expelEnclosingWhitespace: true},
+                parse: {
+                    // handled by markdown-it
+                },
+            },
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js b/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
new file mode 100644
index 00000000..72dbb1e2
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Blockquote = Node.create({
+    name: 'blockquote',
+});
+
+export default Blockquote.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.blockquote,
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
new file mode 100644
index 00000000..07d8bf75
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
@@ -0,0 +1,24 @@
+import { Node } from "@tiptap/core";
+
+
+const BulletList = Node.create({
+    name: 'bulletList',
+});
+
+export default BulletList.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node) {
+                    return state.renderList(node, "  ", () => (this.editor.storage.markdown.options.bulletListMarker || "-") + " ");
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js b/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
new file mode 100644
index 00000000..83e75a74
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
@@ -0,0 +1,35 @@
+import { Node } from "@tiptap/core";
+
+
+const CodeBlock = Node.create({
+    name: 'codeBlock',
+});
+
+export default CodeBlock.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node) {
+                    state.write("```" + (node.attrs.language || "") + "\n");
+                    state.text(node.textContent, false);
+                    state.ensureNewLine();
+                    state.write("```");
+                    state.closeBlock(node);
+                },
+                parse: {
+                    setup(markdownit) {
+                        markdownit.set({
+                            langPrefix: this.options.languageClassPrefix ?? 'language-',
+                        });
+                    },
+                    updateDOM(element) {
+                        element.innerHTML = element.innerHTML.replace(/\n<\/code><\/pre>/g, '</code></pre>')
+                    },
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js b/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
new file mode 100644
index 00000000..0643e4fd
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
@@ -0,0 +1,32 @@
+import { Node } from "@tiptap/core";
+import HTMLNode from './html';
+
+const HardBreak = Node.create({
+    name: 'hardBreak',
+});
+
+export default HardBreak.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node, parent, index) {
+                    for (let i = index + 1; i < parent.childCount; i++)
+                        if (parent.child(i).type != node.type) {
+                            state.write(
+                                state.inTable
+                                    ? HTMLNode.storage.markdown.serialize.call(this, state, node, parent)
+                                    : "\\\n"
+                            );
+                            return;
+                        }
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js b/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
new file mode 100644
index 00000000..539344cc
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Heading = Node.create({
+    name: 'heading',
+});
+
+export default Heading.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.heading,
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js b/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
new file mode 100644
index 00000000..6571764b
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const HorizontalRule = Node.create({
+    name: 'horizontalRule',
+});
+
+export default HorizontalRule.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.horizontal_rule,
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/html.js b/src/components/Editor/MarkdownExtension/extensions/nodes/html.js
new file mode 100644
index 00000000..3879958f
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/html.js
@@ -0,0 +1,53 @@
+import { Fragment } from "@tiptap/pm/model";
+import { getHTMLFromFragment, Node } from "@tiptap/core";
+import { elementFromString } from "../../util/dom";
+
+
+export default Node.create({
+    name: 'markdownHTMLNode',
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node, parent) {
+                    if(this.editor.storage.markdown.options.html) {
+                        state.write(serializeHTML(node, parent));
+                    } else {
+                        console.warn(`Tiptap Markdown: "${node.type.name}" node is only available in html mode`);
+                        state.write(`[${node.type.name}]`);
+                    }
+                    if(node.isBlock) {
+                        state.closeBlock(node);
+                    }
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            },
+        }
+    }
+});
+
+function serializeHTML(node, parent) {
+    const schema = node.type.schema;
+    const html = getHTMLFromFragment(Fragment.from(node), schema);
+
+    if(node.isBlock && (parent instanceof Fragment || parent.type.name === schema.topNodeType.name)) {
+        return formatBlock(html);
+    }
+
+    return html;
+}
+
+/**
+ * format html block as per the commonmark spec
+ */
+function formatBlock(html) {
+    const dom = elementFromString(html);
+    const element = dom.firstElementChild;
+
+    element.innerHTML = element.innerHTML.trim()
+        ? `\n${element.innerHTML}\n`
+        : `\n`;
+
+    return element.outerHTML;
+}
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/image.js b/src/components/Editor/MarkdownExtension/extensions/nodes/image.js
new file mode 100644
index 00000000..b0e4eb5c
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/image.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Image = Node.create({
+    name: 'image',
+});
+
+export default Image.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.image,
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js b/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
new file mode 100644
index 00000000..f9d2f540
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const ListItem = Node.create({
+    name: 'listItem',
+});
+
+export default ListItem.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.list_item,
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
new file mode 100644
index 00000000..d16bfd49
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
@@ -0,0 +1,42 @@
+import { Node } from "@tiptap/core";
+
+
+const OrderedList = Node.create({
+    name: 'orderedList',
+});
+
+function findIndexOfAdjacentNode(node, parent, index) {
+    let i = 0;
+    for (; index - i > 0; i++) {
+        if (parent.child(index - i - 1).type.name !== node.type.name) {
+            break;
+        }
+    }
+    return i;
+}
+
+export default OrderedList.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node, parent, index) {
+                    const start = node.attrs.start || 1
+                    const maxW = String(start + node.childCount - 1).length
+                    const space = state.repeat(" ", maxW + 2)
+                    const adjacentIndex = findIndexOfAdjacentNode(node, parent, index);
+                    const separator = adjacentIndex % 2 ? ') ' : '. ';
+                    state.renderList(node, space, i => {
+                        const nStr = String(start + i)
+                        return state.repeat(" ", maxW - nStr.length) + nStr + separator;
+                    })
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js b/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
new file mode 100644
index 00000000..1882bdb0
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
@@ -0,0 +1,23 @@
+import { Node } from "@tiptap/core";
+import { defaultMarkdownSerializer } from "prosemirror-markdown";
+
+
+const Paragraph = Node.create({
+    name: 'paragraph',
+});
+
+export default Paragraph.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: defaultMarkdownSerializer.nodes.paragraph,
+                parse: {
+                    // handled by markdown-it
+                },
+            },
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/table.js b/src/components/Editor/MarkdownExtension/extensions/nodes/table.js
new file mode 100644
index 00000000..08056393
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/table.js
@@ -0,0 +1,73 @@
+import { Node } from "@tiptap/core";
+import { childNodes } from "../../util/prosemirror";
+import HTMLNode from './html';
+
+const Table = Node.create({
+    name: 'table',
+});
+
+export default Table.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node, parent) {
+                    if(!isMarkdownSerializable(node)) {
+                        HTMLNode.storage.markdown.serialize.call(this, state, node, parent);
+                        return;
+                    }
+                    state.inTable = true;
+                    node.forEach((row, p, i) => {
+                        state.write('| ');
+                        row.forEach((col, p, j) => {
+                            if(j) {
+                                state.write(' | ');
+                            }
+                            const cellContent = col.firstChild;
+                            if(cellContent.textContent.trim()) {
+                                state.renderInline(cellContent);
+                            }
+                        });
+                        state.write(' |')
+                        state.ensureNewLine();
+                        if(!i) {
+                            const delimiterRow = Array.from({length: row.childCount}).map(() => '---').join(' | ');
+                            state.write(`| ${delimiterRow} |`);
+                            state.ensureNewLine();
+                        }
+                    });
+                    state.closeBlock(node);
+                    state.inTable = false;
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+})
+
+
+function hasSpan(node) {
+    return node.attrs.colspan > 1 || node.attrs.rowspan > 1;
+}
+
+function isMarkdownSerializable(node) {
+    const rows = childNodes(node);
+    const firstRow = rows[0];
+    const bodyRows = rows.slice(1);
+
+    if(childNodes(firstRow).some(cell => cell.type.name !== 'tableHeader' || hasSpan(cell) || cell.childCount > 1)) {
+        return false;
+    }
+
+    if(bodyRows.some(row =>
+        childNodes(row).some(cell => cell.type.name === 'tableHeader' || hasSpan(cell) || cell.childCount > 1)
+    )) {
+        return false;
+    }
+
+    return true;
+}
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js b/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
new file mode 100644
index 00000000..1c619577
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
@@ -0,0 +1,36 @@
+import { Node } from "@tiptap/core";
+
+
+const TaskItem = Node.create({
+    name: 'taskItem',
+});
+
+export default TaskItem.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node) {
+                    const check = node.attrs.checked ? '[x]' : '[ ]';
+                    state.write(`${check} `);
+                    state.renderContent(node);
+                },
+                parse: {
+                    updateDOM(element) {
+                        [...element.querySelectorAll('.task-list-item')]
+                            .forEach(item => {
+                                const input = item.querySelector('input');
+                                item.setAttribute('data-type', 'taskItem');
+                                if(input) {
+                                    item.setAttribute('data-checked', input.checked);
+                                    input.remove();
+                                }
+                            });
+                    },
+                }
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
new file mode 100644
index 00000000..0d4e39cb
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
@@ -0,0 +1,32 @@
+import taskListPlugin from "markdown-it-task-lists";
+import { Node } from "@tiptap/core";
+import BulletList from "./bullet-list";
+
+
+const TaskList = Node.create({
+    name: 'taskList',
+});
+
+export default TaskList.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize: BulletList.storage.markdown.serialize,
+                parse: {
+                    setup(markdownit) {
+                        markdownit.use(taskListPlugin);
+                    },
+                    updateDOM(element) {
+                        [...element.querySelectorAll('.contains-task-list')]
+                            .forEach(list => {
+                                list.setAttribute('data-type', 'taskList');
+                            });
+                    },
+                }
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/text.js b/src/components/Editor/MarkdownExtension/extensions/nodes/text.js
new file mode 100644
index 00000000..178c6538
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/nodes/text.js
@@ -0,0 +1,25 @@
+import { Node } from "@tiptap/core";
+import { escapeHTML } from "../../util/dom";
+
+
+const Text = Node.create({
+    name: 'text',
+});
+
+export default Text.extend({
+    /**
+     * @return {{markdown: MarkdownNodeSpec}}
+     */
+    addStorage() {
+        return {
+            markdown: {
+                serialize(state, node) {
+                    state.text(escapeHTML(node.text));
+                },
+                parse: {
+                    // handled by markdown-it
+                },
+            }
+        }
+    }
+});
diff --git a/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js b/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
new file mode 100644
index 00000000..c9f6d541
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
@@ -0,0 +1,43 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { DOMParser } from '@tiptap/pm/model';
+import { elementFromString } from "../../util/dom";
+
+export const MarkdownClipboard = Extension.create({
+    name: 'markdownClipboard',
+    addOptions() {
+        return {
+            transformPastedText: false,
+            transformCopiedText: false,
+        }
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('markdownClipboard'),
+                props: {
+                    clipboardTextParser: (text, context, plainText) => {
+                        if(plainText || !this.options.transformPastedText) {
+                            return null; // pasting with shift key prevents formatting
+                        }
+                        const parsed = this.editor.storage.markdown.parser.parse(text, { inline: true });
+                        return DOMParser.fromSchema(this.editor.schema)
+                            .parseSlice(elementFromString(parsed), {
+                                preserveWhitespace: true,
+                                context,
+                            });
+                    },
+                    /**
+                     * @param {import('prosemirror-model').Slice} slice
+                     */
+                    clipboardTextSerializer: (slice) => {
+                        if(!this.options.transformCopiedText) {
+                            return null;
+                        }
+                        return this.editor.storage.markdown.serializer.serialize(slice.content);
+                    },
+                },
+            })
+        ]
+    }
+})
diff --git a/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js b/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
new file mode 100644
index 00000000..673dc35a
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
@@ -0,0 +1,48 @@
+import { Extension } from "@tiptap/core";
+
+export const MarkdownTightLists = Extension.create({
+    name: 'markdownTightLists',
+    addOptions: () => ({
+        tight: true,
+        tightClass: 'tight',
+        listTypes: [
+            'bulletList',
+            'orderedList',
+        ],
+    }),
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.listTypes,
+                attributes: {
+                    tight: {
+                        default: this.options.tight,
+                        parseHTML: element =>
+                            element.getAttribute('data-tight') === 'true' || !element.querySelector('p'),
+                        renderHTML: attributes => ({
+                            class: attributes.tight ? this.options.tightClass : null,
+                            'data-tight': attributes.tight ? 'true' : null,
+                        }),
+                    },
+                },
+            },
+        ]
+    },
+    addCommands() {
+        return {
+            toggleTight: (tight = null) => ({ editor, commands }) => {
+                function toggleTight(name) {
+                    if(!editor.isActive(name)) {
+                        return false;
+                    }
+                    const attrs = editor.getAttributes(name);
+                    return commands.updateAttributes(name, {
+                        tight: tight ?? !attrs?.tight,
+                    });
+                }
+                return this.options.listTypes
+                    .some(name => toggleTight(name));
+            }
+        }
+    },
+});
diff --git a/src/components/Editor/MarkdownExtension/index.ts b/src/components/Editor/MarkdownExtension/index.ts
new file mode 100644
index 00000000..6b326db9
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/index.ts
@@ -0,0 +1,4 @@
+
+
+
+export { Markdown } from './Markdown';
diff --git a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
new file mode 100644
index 00000000..514b590e
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
@@ -0,0 +1,127 @@
+import markdownit from "markdown-it";
+import { elementFromString, extractElement, unwrapElement } from "../util/dom";
+import { getMarkdownSpec } from "../util/extensions";
+
+export class MarkdownParser {
+    /**
+     * @type {import('@tiptap/core').Editor}
+     */
+    editor = null;
+    /**
+     * @type {markdownit}
+     */
+    md = null;
+
+    constructor(editor, { html, linkify, breaks }) {
+        this.editor = editor;
+        this.md = this.withPatchedRenderer(markdownit({
+            html,
+            linkify,
+            breaks,
+        }));
+    }
+
+    parse(content, { inline } = {}) {
+        if(typeof content === 'string') {
+            this.editor.extensionManager.extensions.forEach(extension =>
+                getMarkdownSpec(extension)?.parse?.setup?.call({ editor:this.editor, options:extension.options }, this.md)
+            );
+
+            const renderedHTML = this.md.render(content);
+            const element = elementFromString(renderedHTML);
+
+            this.editor.extensionManager.extensions.forEach(extension =>
+                getMarkdownSpec(extension)?.parse?.updateDOM?.call({ editor:this.editor, options:extension.options }, element)
+            );
+
+            this.normalizeDOM(element, { inline, content });
+
+            return element.innerHTML;
+        }
+
+        return content;
+    }
+
+    normalizeDOM(node, { inline, content }) {
+        this.normalizeBlocks(node);
+
+        // remove all \n appended by markdown-it
+        node.querySelectorAll('*').forEach(el => {
+            if(el.nextSibling?.nodeType === Node.TEXT_NODE && !el.closest('pre')) {
+                el.nextSibling.textContent = el.nextSibling.textContent.replace(/^\n/, '');
+            }
+        });
+
+        if(inline) {
+            this.normalizeInline(node, content);
+        }
+
+        return node;
+    }
+
+    normalizeBlocks(node) {
+        const blocks = Object.values(this.editor.schema.nodes)
+            .filter(node => node.isBlock);
+
+        const selector = blocks
+            .map(block => block.spec.parseDOM?.map(spec => spec.tag))
+            .flat()
+            .filter(Boolean)
+            .join(',');
+
+        if(!selector) {
+            return;
+        }
+
+        [...node.querySelectorAll(selector)].forEach(el => {
+            if(el.parentElement.matches('p')) {
+                extractElement(el);
+            }
+        });
+    }
+
+    normalizeInline(node, content) {
+        if(node.firstElementChild?.matches('p')) {
+            const firstParagraph = node.firstElementChild;
+            const { nextElementSibling } = firstParagraph;
+            const startSpaces = content.match(/^\s+/)?.[0] ?? '';
+            const endSpaces = !nextElementSibling
+                ? content.match(/\s+$/)?.[0] ?? ''
+                : '';
+
+            if(content.match(/^\n\n/)) {
+                firstParagraph.innerHTML = `${firstParagraph.innerHTML}${endSpaces}`;
+                return;
+            }
+
+            unwrapElement(firstParagraph);
+
+            node.innerHTML = `${startSpaces}${node.innerHTML}${endSpaces}`;
+        }
+    }
+
+    /**
+     * @param {markdownit} md
+     */
+    withPatchedRenderer(md) {
+        const withoutNewLine = (renderer) => (...args) => {
+            const rendered = renderer(...args);
+            if(rendered === '\n') {
+                return rendered; // keep soft breaks
+            }
+            if(rendered[rendered.length - 1] === '\n') {
+                return rendered.slice(0, -1);
+            }
+            return rendered;
+        }
+
+        md.renderer.rules.hardbreak = withoutNewLine(md.renderer.rules.hardbreak);
+        md.renderer.rules.softbreak = withoutNewLine(md.renderer.rules.softbreak);
+        md.renderer.rules.fence = withoutNewLine(md.renderer.rules.fence);
+        md.renderer.rules.code_block = withoutNewLine(md.renderer.rules.code_block);
+        md.renderer.renderToken = withoutNewLine(md.renderer.renderToken.bind(md.renderer));
+
+        return md;
+    }
+}
+
diff --git a/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js b/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
new file mode 100644
index 00000000..7c6c9511
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
@@ -0,0 +1,71 @@
+import { MarkdownSerializerState } from './state'
+import HTMLMark from '../extensions/marks/html'
+import HTMLNode from '../extensions/nodes/html'
+import { getMarkdownSpec } from '../util/extensions'
+import HardBreak from '../extensions/nodes/hard-break'
+
+export class MarkdownSerializer {
+  /**
+   * @type {import('@tiptap/core').Editor}
+   */
+  editor = null
+
+  constructor(editor) {
+    this.editor = editor
+  }
+
+  serialize(content) {
+    const state = new MarkdownSerializerState(this.nodes, this.marks, {
+      hardBreakNodeName: HardBreak.name,
+    })
+
+    state.renderContent(content)
+
+    console.log('state.out', state.out)
+
+    return state.out
+  }
+
+  get nodes() {
+    return {
+      ...Object.fromEntries(Object.keys(this.editor.schema.nodes).map((name) => [name, this.serializeNode(HTMLNode)])),
+      ...Object.fromEntries(
+        this.editor.extensionManager.extensions
+          .filter((extension) => extension.type === 'node' && this.serializeNode(extension))
+          .map((extension) => [extension.name, this.serializeNode(extension)]) ?? [],
+      ),
+    }
+  }
+
+  get marks() {
+    return {
+      ...Object.fromEntries(Object.keys(this.editor.schema.marks).map((name) => [name, this.serializeMark(HTMLMark)])),
+      ...Object.fromEntries(
+        this.editor.extensionManager.extensions
+          .filter((extension) => extension.type === 'mark' && this.serializeMark(extension))
+          .map((extension) => [extension.name, this.serializeMark(extension)]) ?? [],
+      ),
+    }
+  }
+
+  serializeNode(node) {
+    return getMarkdownSpec(node)?.serialize?.bind({ editor: this.editor, options: node.options })
+  }
+
+  serializeMark(mark) {
+    const serialize = getMarkdownSpec(mark)?.serialize
+    return serialize
+      ? {
+          ...serialize,
+          open:
+            typeof serialize.open === 'function'
+              ? serialize.open.bind({ editor: this.editor, options: mark.options })
+              : serialize.open,
+          close:
+            typeof serialize.close === 'function'
+              ? serialize.close.bind({ editor: this.editor, options: mark.options })
+              : serialize.close,
+        }
+      : null
+  }
+}
diff --git a/src/components/Editor/MarkdownExtension/serialize/state.js b/src/components/Editor/MarkdownExtension/serialize/state.js
new file mode 100644
index 00000000..b02c965a
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/serialize/state.js
@@ -0,0 +1,68 @@
+import { MarkdownSerializerState as BaseMarkdownSerializerState } from "prosemirror-markdown";
+import { trimInline } from "../util/markdown";
+
+/**
+ * Override default MarkdownSerializerState to:
+ * - handle commonmark delimiters (https://spec.commonmark.org/0.29/#left-flanking-delimiter-run)
+ */
+export class MarkdownSerializerState extends BaseMarkdownSerializerState {
+    inTable = false;
+
+    constructor(nodes, marks, options) {
+        super(nodes, marks, options ?? {});
+        this.inlines = [];
+    }
+
+    render(node, parent, index) {
+        if (node.type.name === "paragraph" && node.content.size === 0) {
+            this.out += "\n";
+        } else {
+            super.render(node, parent, index);
+            const top = this.inlines[this.inlines.length - 1];
+            if (top?.start && top?.end) {
+                const { delimiter, start, end } = this.normalizeInline(top);
+                this.out = trimInline(this.out, delimiter, start, end);
+                this.inlines.pop();
+            }
+        }
+    }
+
+    renderContent(fragment) {
+        fragment.forEach((node, _, i) => {
+            if (i && node.type.name === "paragraph") {
+                this.out += "\n";
+            }
+            this.render(node);
+        });
+    }
+
+    markString(mark, open, parent, index) {
+        const info = this.marks[mark.type.name];
+        if (info.expelEnclosingWhitespace) {
+            if (open) {
+                this.inlines.push({
+                    start: this.out.length,
+                    delimiter: info.open,
+                });
+            } else {
+                const top = this.inlines.pop();
+                this.inlines.push({
+                    ...top,
+                    end: this.out.length,
+                });
+            }
+        }
+        return super.markString(mark, open, parent, index);
+    }
+
+    normalizeInline(inline) {
+        let { start, end } = inline;
+        while (this.out.charAt(start).match(/\s/)) {
+            start++;
+        }
+        return {
+            ...inline,
+            start,
+        };
+    }
+}
diff --git a/src/components/Editor/MarkdownExtension/util/dom.js b/src/components/Editor/MarkdownExtension/util/dom.js
new file mode 100644
index 00000000..356d39c3
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/util/dom.js
@@ -0,0 +1,39 @@
+
+
+export function elementFromString(value) {
+    // add a wrapper to preserve leading and trailing whitespace
+    const wrappedValue = `<body>${value}</body>`
+
+    return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
+}
+
+export function escapeHTML(value) {
+    return value
+        ?.replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+
+export function extractElement(node) {
+    const parent = node.parentElement;
+    const prepend = parent.cloneNode();
+
+    while(parent.firstChild && parent.firstChild !== node) {
+        prepend.appendChild(parent.firstChild);
+    }
+
+    if(prepend.childNodes.length > 0) {
+        parent.parentElement.insertBefore(prepend, parent);
+    }
+    parent.parentElement.insertBefore(node, parent);
+    if(parent.childNodes.length === 0) {
+        parent.remove();
+    }
+}
+
+export function unwrapElement(node) {
+    const parent = node.parentNode;
+
+    while (node.firstChild) parent.insertBefore(node.firstChild, node);
+
+    parent.removeChild(node);
+}
diff --git a/src/components/Editor/MarkdownExtension/util/extensions.js b/src/components/Editor/MarkdownExtension/util/extensions.js
new file mode 100644
index 00000000..d2acf24b
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/util/extensions.js
@@ -0,0 +1,16 @@
+import markdownExtensions from "../extensions";
+
+
+export function getMarkdownSpec(extension) {
+    const markdownSpec = extension.storage?.markdown;
+    const defaultMarkdownSpec = markdownExtensions.find(e => e.name === extension.name)?.storage.markdown;
+
+    if(markdownSpec || defaultMarkdownSpec) {
+        return {
+            ...defaultMarkdownSpec,
+            ...markdownSpec,
+        };
+    }
+
+    return null;
+}
diff --git a/src/components/Editor/MarkdownExtension/util/markdown.js b/src/components/Editor/MarkdownExtension/util/markdown.js
new file mode 100644
index 00000000..47b36217
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/util/markdown.js
@@ -0,0 +1,56 @@
+import markdownit from 'markdown-it';
+
+const md = markdownit();
+
+function scanDelims(text, pos) {
+    md.inline.State.prototype.scanDelims.call({ src: text, posMax: text.length })
+    const state = new (md.inline.State)(text, null, null, []);
+    return state.scanDelims(pos, true);
+}
+
+export function shiftDelim(text, delim, start, offset) {
+    let res = text.substring(0, start) + text.substring(start + delim.length);
+    res = res.substring(0, start + offset) + delim + res.substring(start + offset);
+    return res;
+}
+
+function trimStart(text, delim, from, to) {
+    let pos = from, res = text;
+    while(pos < to) {
+        if(scanDelims(res, pos).can_open) {
+            break;
+        }
+        res = shiftDelim(res, delim, pos, 1);
+        pos++;
+    }
+    return { text: res, from: pos, to }
+}
+
+function trimEnd(text, delim, from, to) {
+    let pos = to, res = text;
+    while(pos > from) {
+        if(scanDelims(res, pos).can_close) {
+            break;
+        }
+        res = shiftDelim(res, delim, pos, -1);
+        pos--;
+    }
+    return { text: res, from, to: pos }
+}
+
+export function trimInline(text, delim, from, to) {
+    let state = {
+        text,
+        from,
+        to,
+    }
+
+    state = trimStart(state.text, delim, state.from, state.to);
+    state = trimEnd(state.text, delim, state.from, state.to);
+
+    if(state.to - state.from < delim.length + 1) {
+        state.text = state.text.substring(0, state.from) + state.text.substring(state.to + delim.length);
+    }
+
+    return state.text;
+}
diff --git a/src/components/Editor/MarkdownExtension/util/prosemirror.js b/src/components/Editor/MarkdownExtension/util/prosemirror.js
new file mode 100644
index 00000000..9416bdd4
--- /dev/null
+++ b/src/components/Editor/MarkdownExtension/util/prosemirror.js
@@ -0,0 +1,5 @@
+
+
+export function childNodes(node) {
+    return node?.content?.content ?? [];
+}
diff --git a/src/components/Editor/utils.ts b/src/components/Editor/utils.ts
index 21d4ee0e..89143279 100644
--- a/src/components/Editor/utils.ts
+++ b/src/components/Editor/utils.ts
@@ -1,19 +1,23 @@
 import { Editor } from '@tiptap/core'
-import { htmlToMd } from '@/utils/markdown'
 
 export async function getMarkdown(editor: Editor) {
-  const html = editor.getHTML()
+  const originalMarkdown = editor.storage.markdown.getMarkdown()
+  // console.log('CALLING THIS')
+  console.log('editor.state.doc', editor.state.doc)
+  // console.log('editor.storage.markdown', editor.storage.markdown)
+  // const originalMarkdown = editor.storage.markdown.serializer.serialize(editor.state.doc)
+  // const html = editor.getHTML()
 
-  console.time('htmlToMd')
-  const startTime = performance.now()
+  // console.time('htmlToMd')
+  // const startTime = performance.now()
 
-  const markdown = await htmlToMd(html)
+  // const markdown = await htmlToMd(html)
 
-  const endTime = performance.now()
-  console.timeEnd('htmlToMd')
-  console.log(`htmlToMd operation took ${endTime - startTime} milliseconds`)
+  // const endTime = performance.now()
+  // console.timeEnd('htmlToMd')
+  // console.log(`htmlToMd operation took ${endTime - startTime} milliseconds`)
 
-  return markdown
+  return originalMarkdown
 }
 
 export default getMarkdown
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index 0be6ca0e..bb3822ce 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -27,7 +27,7 @@ import '@/styles/tiptap.scss'
 import SearchAndReplace from '@/components/Editor/Search/SearchAndReplaceExtension'
 import getMarkdown from '@/components/Editor/utils'
 import welcomeNote from '@/components/File/utils'
-import { mdToHtml } from '@/utils/markdown'
+import { Markdown } from '@/components/Editor/MarkdownExtension'
 
 type FileContextType = {
   currentlyOpenFilePath: string | null
@@ -122,8 +122,8 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       setNeedToIndexEditorContent(false)
     }
     const fileContent = (await window.fileSystem.readFile(filePath)) ?? ''
-    const htmlContent = await mdToHtml(fileContent)
-    editor?.commands.setContent(htmlContent)
+    // const htmlContent = await mdToHtml(fileContent)
+    editor?.commands.setContent(fileContent)
     setCurrentlyOpenFilePath(filePath)
     setCurrentlyChangingFilePath(false)
   }
@@ -162,16 +162,16 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         searchResultClass: 'bg-yellow-400',
         disableRegex: false,
       }),
-      // Markdown.configure({
-      //   html: true,
-      //   tightLists: true,
-      //   tightListClass: 'tight',
-      //   bulletListMarker: '-',
-      //   linkify: true,
-      //   breaks: true,
-      //   transformPastedText: true,
-      //   transformCopiedText: false,
-      // }),
+      Markdown.configure({
+        html: true,
+        tightLists: true,
+        tightListClass: 'tight',
+        bulletListMarker: '-',
+        linkify: true,
+        breaks: true,
+        transformPastedText: true,
+        transformCopiedText: false,
+      }),
       TaskItem.configure({
         nested: true,
       }),
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
index c7d4decd..15da16e8 100644
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@@ -1,109 +1,97 @@
-import { unified } from 'unified'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
-import rehypeStringify from 'rehype-stringify'
-import rehypeParse from 'rehype-parse'
-import rehypeRemark from 'rehype-remark'
-import remarkStringify from 'remark-stringify'
+// import { unified } from 'unified'
+// import remarkParse from 'remark-parse'
+// import remarkRehype from 'remark-rehype'
+// import rehypeStringify from 'rehype-stringify'
+// import rehypeParse from 'rehype-parse'
+// import rehypeRemark from 'rehype-remark'
+// import remarkStringify from 'remark-stringify'
 
-import { u } from 'unist-builder'
-import { visit } from 'unist-util-visit'
+// import { u } from 'unist-builder'
+// import { visit } from 'unist-util-visit'
 
-// Custom plugin to convert placeholders to empty paragraph nodes
-function remarkNewlinesToEmptyParagraphs(EOL_MARKER: string) {
-  return () => (tree) => {
-    visit(tree, (node, index, parent) => {
-      // Process only text nodes
-      if (node.type === 'text') {
-        const { value } = node
-        if (value.includes(EOL_MARKER)) {
-          const parts = value.split(EOL_MARKER)
-          const newNodes = []
+// // Custom plugin to convert placeholders to empty paragraph nodes
+// function remarkNewlinesToEmptyParagraphs(EOL_MARKER: string) {
+//   return () => (tree) => {
+//     visit(tree, 'text', (node, index, parent) => {
+//       const { value } = node
+//       if (value.includes(EOL_MARKER)) {
+//         const parts = value.split(EOL_MARKER)
+//         const newNodes = []
 
-          parts.forEach((part, i) => {
-            if (part) {
-              newNodes.push(u('text', part))
-            }
-            if (i < parts.length - 1) {
-              // Insert empty paragraph at the parent level
-              newNodes.push(u('paragraph', []))
-            }
-          })
+//         parts.forEach((part, i) => {
+//           if (part) {
+//             newNodes.push(u('text', part))
+//           }
+//           if (i < parts.length - 1) {
+//             // Insert empty paragraph at the parent level
+//             newNodes.push(u('paragraph', []))
+//           }
+//         })
 
-          // Replace the original text node with new nodes
-          parent.children.splice(index, 1, ...newNodes)
-          // Adjust traversal to skip over newly inserted nodes
-          return [visit.SKIP, index + newNodes.length]
-        }
-      }
-    })
+//         // Replace the original text node with new nodes
+//         parent.children.splice(index, 1, ...newNodes)
+//         // Skip over the newly inserted nodes
+//         return [visit.SKIP, index + newNodes.length]
+//       }
+//     })
+//   }
+// }
 
-    // After processing, remove any residual EOL_MARKER from text nodes
-    visit(tree, 'text', (node) => {
-      if (node.value.includes(EOL_MARKER)) {
-        node.value = node.value.replace(new RegExp(EOL_MARKER, 'g'), '')
-      }
-    })
-  }
-}
+// export const mdToHtml = async (markdown: string): Promise<string> => {
+//   const EOL_MARKER = '__EOL__'
 
-export const mdToHtml = async (markdown: string): Promise<string> => {
-  const EOL_MARKER = '__EOL__' // Use a marker without angle brackets
-  // Replace '\n' with the unique marker
-  const preprocessedMarkdown = markdown.replace(/\n/g, EOL_MARKER)
+//   // Replace sequences of two or more newlines with the unique marker
+//   const preprocessedMarkdown = markdown.replace(/\n{2,}/g, EOL_MARKER)
 
-  const result = await unified()
-    .use(remarkParse)
-    .use(() => (tree) => {
-      // Assign parent references for traversal
-      visit(tree, (node, index, parent) => {
-        if (parent) {
-          node.parent = parent
-        }
-      })
-    })
-    .use(remarkNewlinesToEmptyParagraphs(EOL_MARKER))
-    .use(remarkRehype)
-    .use(rehypeStringify)
-    .process(preprocessedMarkdown)
+//   const result = await unified()
+//     .use(remarkParse)
+//     .use(() => (tree) => {
+//       // Assign parent references for traversal
+//       visit(tree, (node, index, parent) => {
+//         if (parent) {
+//           node.parent = parent
+//         }
+//       })
+//     })
+//     .use(remarkNewlinesToEmptyParagraphs(EOL_MARKER))
+//     .use(remarkRehype)
+//     .use(rehypeStringify)
+//     .process(preprocessedMarkdown)
 
-  // Post-processing: Remove any residual markers from the output
-  const html = String(result).replace(new RegExp(EOL_MARKER, 'g'), '')
+//   return String(result)
+// }
 
-  return html
-}
+// export const htmlToMd = async (html: string): Promise<string> => {
+//   console.log('html in: ', html)
+//   const result = await unified()
+//     .use(rehypeParse)
+//     .use(rehypeRemark, {
+//       handlers: {
+//         // Custom handler for <p> elements
+//         p: (state, node) => {
+//           if (!node.children || node.children.length === 0) {
+//             // Return a Markdown paragraph node with an empty text child
+//             return {
+//               type: 'paragraph',
+//               children: [{ type: 'text', value: '' }],
+//             }
+//           }
+//           // Use the default handler for non-empty <p> elements
+//           return {
+//             type: 'paragraph',
+//             children: state.all(node),
+//           }
+//         },
+//       },
+//     })
+//     .use(remarkStringify, {
+//       // Ensure that multiple blank lines are preserved
+//       // by preventing the collapsing of consecutive newlines
+//       join: [],
+//     })
+//     .process(html)
 
-export const htmlToMd = async (html: string): Promise<string> => {
-  console.log('html in: ', html)
-  const result = await unified()
-    .use(rehypeParse)
-    .use(rehypeRemark, {
-      handlers: {
-        // Custom handler for <p> elements
-        p: (state, node) => {
-          if (!node.children || node.children.length === 0) {
-            // Return a Markdown paragraph node with an empty text child
-            return {
-              type: 'paragraph',
-              children: [{ type: 'text', value: '' }],
-            }
-          }
-          // Use the default handler for non-empty <p> elements
-          return {
-            type: 'paragraph',
-            children: state.all(node),
-          }
-        },
-      },
-    })
-    .use(remarkStringify, {
-      // Ensure that multiple blank lines are preserved
-      // by preventing the collapsing of consecutive newlines
-      join: [],
-    })
-    .process(html)
-
-  console.log('result: ', String(result))
-  return String(result)
-}
-// Markdown to HTML
+//   console.log('result: ', String(result))
+//   return String(result)
+// }
+// // Markdown to HTML

From 7207b9a539138f580e211386d7d2ae9a82451ef2 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 18:52:45 +0100
Subject: [PATCH 08/41] fix prettier

---
 .../MarkdownExtension/parse/MarkdownParser.js | 212 +++++++++---------
 1 file changed, 108 insertions(+), 104 deletions(-)

diff --git a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
index 514b590e..e0b7af6f 100644
--- a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
+++ b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
@@ -1,127 +1,131 @@
-import markdownit from "markdown-it";
-import { elementFromString, extractElement, unwrapElement } from "../util/dom";
-import { getMarkdownSpec } from "../util/extensions";
+import markdownit from 'markdown-it'
+import { elementFromString, extractElement, unwrapElement } from '../util/dom'
+import { getMarkdownSpec } from '../util/extensions'
 
 export class MarkdownParser {
-    /**
-     * @type {import('@tiptap/core').Editor}
-     */
-    editor = null;
-    /**
-     * @type {markdownit}
-     */
-    md = null;
-
-    constructor(editor, { html, linkify, breaks }) {
-        this.editor = editor;
-        this.md = this.withPatchedRenderer(markdownit({
-            html,
-            linkify,
-            breaks,
-        }));
+  /**
+   * @type {import('@tiptap/core').Editor}
+   */
+  editor = null
+
+  /**
+   * @type {markdownit}
+   */
+  md = null
+
+  constructor(editor, { html, linkify, breaks }) {
+    this.editor = editor
+    this.md = this.withPatchedRenderer(
+      markdownit({
+        html,
+        linkify,
+        breaks,
+      }),
+    )
+  }
+
+  parse(content, { inline } = {}) {
+    if (typeof content === 'string') {
+      this.editor.extensionManager.extensions.forEach((extension) =>
+        getMarkdownSpec(extension)?.parse?.setup?.call({ editor: this.editor, options: extension.options }, this.md),
+      )
+
+      const renderedHTML = this.md.render(content)
+      const element = elementFromString(renderedHTML)
+
+      this.editor.extensionManager.extensions.forEach((extension) =>
+        getMarkdownSpec(extension)?.parse?.updateDOM?.call(
+          { editor: this.editor, options: extension.options },
+          element,
+        ),
+      )
+
+      this.normalizeDOM(element, { inline, content })
+
+      return element.innerHTML
     }
 
-    parse(content, { inline } = {}) {
-        if(typeof content === 'string') {
-            this.editor.extensionManager.extensions.forEach(extension =>
-                getMarkdownSpec(extension)?.parse?.setup?.call({ editor:this.editor, options:extension.options }, this.md)
-            );
+    return content
+  }
 
-            const renderedHTML = this.md.render(content);
-            const element = elementFromString(renderedHTML);
+  normalizeDOM(node, { inline, content }) {
+    this.normalizeBlocks(node)
 
-            this.editor.extensionManager.extensions.forEach(extension =>
-                getMarkdownSpec(extension)?.parse?.updateDOM?.call({ editor:this.editor, options:extension.options }, element)
-            );
+    // remove all \n appended by markdown-it
+    node.querySelectorAll('*').forEach((el) => {
+      if (el.nextSibling?.nodeType === Node.TEXT_NODE && !el.closest('pre')) {
+        el.nextSibling.textContent = el.nextSibling.textContent.replace(/^\n/, '')
+      }
+    })
 
-            this.normalizeDOM(element, { inline, content });
-
-            return element.innerHTML;
-        }
-
-        return content;
+    if (inline) {
+      this.normalizeInline(node, content)
     }
 
-    normalizeDOM(node, { inline, content }) {
-        this.normalizeBlocks(node);
+    return node
+  }
 
-        // remove all \n appended by markdown-it
-        node.querySelectorAll('*').forEach(el => {
-            if(el.nextSibling?.nodeType === Node.TEXT_NODE && !el.closest('pre')) {
-                el.nextSibling.textContent = el.nextSibling.textContent.replace(/^\n/, '');
-            }
-        });
+  normalizeBlocks(node) {
+    const blocks = Object.values(this.editor.schema.nodes).filter((node) => node.isBlock)
 
-        if(inline) {
-            this.normalizeInline(node, content);
-        }
+    const selector = blocks
+      .map((block) => block.spec.parseDOM?.map((spec) => spec.tag))
+      .flat()
+      .filter(Boolean)
+      .join(',')
 
-        return node;
+    if (!selector) {
+      return
     }
 
-    normalizeBlocks(node) {
-        const blocks = Object.values(this.editor.schema.nodes)
-            .filter(node => node.isBlock);
-
-        const selector = blocks
-            .map(block => block.spec.parseDOM?.map(spec => spec.tag))
-            .flat()
-            .filter(Boolean)
-            .join(',');
-
-        if(!selector) {
-            return;
-        }
-
-        [...node.querySelectorAll(selector)].forEach(el => {
-            if(el.parentElement.matches('p')) {
-                extractElement(el);
-            }
-        });
-    }
+    ;[...node.querySelectorAll(selector)].forEach((el) => {
+      if (el.parentElement.matches('p')) {
+        extractElement(el)
+      }
+    })
+  }
 
-    normalizeInline(node, content) {
-        if(node.firstElementChild?.matches('p')) {
-            const firstParagraph = node.firstElementChild;
-            const { nextElementSibling } = firstParagraph;
-            const startSpaces = content.match(/^\s+/)?.[0] ?? '';
-            const endSpaces = !nextElementSibling
-                ? content.match(/\s+$/)?.[0] ?? ''
-                : '';
+  normalizeInline(node, content) {
+    if (node.firstElementChild?.matches('p')) {
+      const firstParagraph = node.firstElementChild
+      const { nextElementSibling } = firstParagraph
+      const startSpaces = content.match(/^\s+/)?.[0] ?? ''
+      const endSpaces = !nextElementSibling ? (content.match(/\s+$/)?.[0] ?? '') : ''
 
-            if(content.match(/^\n\n/)) {
-                firstParagraph.innerHTML = `${firstParagraph.innerHTML}${endSpaces}`;
-                return;
-            }
+      if (content.match(/^\n\n/)) {
+        firstParagraph.innerHTML = `${firstParagraph.innerHTML}${endSpaces}`
+        return
+      }
 
-            unwrapElement(firstParagraph);
+      unwrapElement(firstParagraph)
 
-            node.innerHTML = `${startSpaces}${node.innerHTML}${endSpaces}`;
-        }
+      node.innerHTML = `${startSpaces}${node.innerHTML}${endSpaces}`
     }
-
-    /**
-     * @param {markdownit} md
-     */
-    withPatchedRenderer(md) {
-        const withoutNewLine = (renderer) => (...args) => {
-            const rendered = renderer(...args);
-            if(rendered === '\n') {
-                return rendered; // keep soft breaks
-            }
-            if(rendered[rendered.length - 1] === '\n') {
-                return rendered.slice(0, -1);
-            }
-            return rendered;
+  }
+
+  /**
+   * @param {markdownit} md
+   */
+  withPatchedRenderer(md) {
+    const withoutNewLine =
+      (renderer) =>
+      (...args) => {
+        const rendered = renderer(...args)
+        if (rendered === '\n') {
+          return rendered // keep soft breaks
         }
+        if (rendered[rendered.length - 1] === '\n') {
+          return rendered.slice(0, -1)
+        }
+        return rendered
+      }
 
-        md.renderer.rules.hardbreak = withoutNewLine(md.renderer.rules.hardbreak);
-        md.renderer.rules.softbreak = withoutNewLine(md.renderer.rules.softbreak);
-        md.renderer.rules.fence = withoutNewLine(md.renderer.rules.fence);
-        md.renderer.rules.code_block = withoutNewLine(md.renderer.rules.code_block);
-        md.renderer.renderToken = withoutNewLine(md.renderer.renderToken.bind(md.renderer));
+    md.renderer.rules.hardbreak = withoutNewLine(md.renderer.rules.hardbreak)
+    md.renderer.rules.softbreak = withoutNewLine(md.renderer.rules.softbreak)
+    md.renderer.rules.fence = withoutNewLine(md.renderer.rules.fence)
+    md.renderer.rules.code_block = withoutNewLine(md.renderer.rules.code_block)
+    md.renderer.renderToken = withoutNewLine(md.renderer.renderToken.bind(md.renderer))
 
-        return md;
-    }
+    return md
+  }
 }
-

From 4a2f9090ab8194312810f5ea8a75d14b87ad9439 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 19:40:11 +0100
Subject: [PATCH 09/41] prettier

---
 .../MarkdownExtension/serialize/state.js      | 107 +++++++++---------
 1 file changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/components/Editor/MarkdownExtension/serialize/state.js b/src/components/Editor/MarkdownExtension/serialize/state.js
index b02c965a..349381a7 100644
--- a/src/components/Editor/MarkdownExtension/serialize/state.js
+++ b/src/components/Editor/MarkdownExtension/serialize/state.js
@@ -1,68 +1,69 @@
-import { MarkdownSerializerState as BaseMarkdownSerializerState } from "prosemirror-markdown";
-import { trimInline } from "../util/markdown";
+import { MarkdownSerializerState as BaseMarkdownSerializerState } from 'prosemirror-markdown'
+import { trimInline } from '../util/markdown'
 
 /**
  * Override default MarkdownSerializerState to:
  * - handle commonmark delimiters (https://spec.commonmark.org/0.29/#left-flanking-delimiter-run)
  */
 export class MarkdownSerializerState extends BaseMarkdownSerializerState {
-    inTable = false;
+  inTable = false
 
-    constructor(nodes, marks, options) {
-        super(nodes, marks, options ?? {});
-        this.inlines = [];
-    }
+  constructor(nodes, marks, options) {
+    super(nodes, marks, options ?? {})
+    this.inlines = []
+  }
 
-    render(node, parent, index) {
-        if (node.type.name === "paragraph" && node.content.size === 0) {
-            this.out += "\n";
-        } else {
-            super.render(node, parent, index);
-            const top = this.inlines[this.inlines.length - 1];
-            if (top?.start && top?.end) {
-                const { delimiter, start, end } = this.normalizeInline(top);
-                this.out = trimInline(this.out, delimiter, start, end);
-                this.inlines.pop();
-            }
-        }
+  render(node, parent, index) {
+    if (node.type.name === 'paragraph' && node.content.size === 0) {
+      this.out += '\n'
+    } else {
+      super.render(node, parent, index)
+      const top = this.inlines[this.inlines.length - 1]
+      if (top?.start && top?.end) {
+        const { delimiter, start, end } = this.normalizeInline(top)
+        this.out = trimInline(this.out, delimiter, start, end)
+        this.inlines.pop()
+      }
     }
+  }
 
-    renderContent(fragment) {
-        fragment.forEach((node, _, i) => {
-            if (i && node.type.name === "paragraph") {
-                this.out += "\n";
-            }
-            this.render(node);
-        });
-    }
+  renderContent(fragment) {
+    console.log('fragment', fragment)
+    fragment.forEach((node, _, i) => {
+      if (i && node.type.name === 'paragraph') {
+        this.out += '\n'
+      }
+      this.render(node)
+    })
+  }
 
-    markString(mark, open, parent, index) {
-        const info = this.marks[mark.type.name];
-        if (info.expelEnclosingWhitespace) {
-            if (open) {
-                this.inlines.push({
-                    start: this.out.length,
-                    delimiter: info.open,
-                });
-            } else {
-                const top = this.inlines.pop();
-                this.inlines.push({
-                    ...top,
-                    end: this.out.length,
-                });
-            }
-        }
-        return super.markString(mark, open, parent, index);
+  markString(mark, open, parent, index) {
+    const info = this.marks[mark.type.name]
+    if (info.expelEnclosingWhitespace) {
+      if (open) {
+        this.inlines.push({
+          start: this.out.length,
+          delimiter: info.open,
+        })
+      } else {
+        const top = this.inlines.pop()
+        this.inlines.push({
+          ...top,
+          end: this.out.length,
+        })
+      }
     }
+    return super.markString(mark, open, parent, index)
+  }
 
-    normalizeInline(inline) {
-        let { start, end } = inline;
-        while (this.out.charAt(start).match(/\s/)) {
-            start++;
-        }
-        return {
-            ...inline,
-            start,
-        };
+  normalizeInline(inline) {
+    let { start, end } = inline
+    while (this.out.charAt(start).match(/\s/)) {
+      start++
+    }
+    return {
+      ...inline,
+      start,
     }
+  }
 }

From eb1b61c0c027fbd9520a2ff17052ee7fcf89e2e7 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 21 Sep 2024 21:48:36 +0100
Subject: [PATCH 10/41] cleanup

---
 .../MarkdownExtension/parse/MarkdownParser.js | 32 +++++++++----------
 .../serialize/MarkdownSerializer.js           |  3 +-
 .../MarkdownExtension/serialize/state.js      | 21 +++++++-----
 src/components/Editor/utils.ts                |  1 -
 src/contexts/FileContext.tsx                  |  2 +-
 5 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
index e0b7af6f..07749308 100644
--- a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
+++ b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
@@ -26,58 +26,63 @@ export class MarkdownParser {
 
   parse(content, { inline } = {}) {
     if (typeof content === 'string') {
+      // Preprocess the content to add empty <p> tags for empty newlines
+      content = this.preprocessEmptyLines(content)
+
       this.editor.extensionManager.extensions.forEach((extension) =>
         getMarkdownSpec(extension)?.parse?.setup?.call({ editor: this.editor, options: extension.options }, this.md),
       )
-
       const renderedHTML = this.md.render(content)
       const element = elementFromString(renderedHTML)
-
       this.editor.extensionManager.extensions.forEach((extension) =>
         getMarkdownSpec(extension)?.parse?.updateDOM?.call(
           { editor: this.editor, options: extension.options },
           element,
         ),
       )
-
       this.normalizeDOM(element, { inline, content })
-
       return element.innerHTML
     }
-
     return content
   }
 
+  preprocessEmptyLines(content) {
+    // Split the content into lines
+    const lines = content.split('\n')
+    // Process each line
+    const processedLines = lines.map((line) => {
+      return line.trim() === '' ? '<p></p>' : line
+    })
+
+    // Join the processed lines back into a single string
+    const processedContent = processedLines.join('\n')
+    return processedContent
+  }
+
   normalizeDOM(node, { inline, content }) {
     this.normalizeBlocks(node)
-
     // remove all \n appended by markdown-it
     node.querySelectorAll('*').forEach((el) => {
       if (el.nextSibling?.nodeType === Node.TEXT_NODE && !el.closest('pre')) {
         el.nextSibling.textContent = el.nextSibling.textContent.replace(/^\n/, '')
       }
     })
-
     if (inline) {
       this.normalizeInline(node, content)
     }
-
     return node
   }
 
   normalizeBlocks(node) {
     const blocks = Object.values(this.editor.schema.nodes).filter((node) => node.isBlock)
-
     const selector = blocks
       .map((block) => block.spec.parseDOM?.map((spec) => spec.tag))
       .flat()
       .filter(Boolean)
       .join(',')
-
     if (!selector) {
       return
     }
-
     ;[...node.querySelectorAll(selector)].forEach((el) => {
       if (el.parentElement.matches('p')) {
         extractElement(el)
@@ -91,14 +96,11 @@ export class MarkdownParser {
       const { nextElementSibling } = firstParagraph
       const startSpaces = content.match(/^\s+/)?.[0] ?? ''
       const endSpaces = !nextElementSibling ? (content.match(/\s+$/)?.[0] ?? '') : ''
-
       if (content.match(/^\n\n/)) {
         firstParagraph.innerHTML = `${firstParagraph.innerHTML}${endSpaces}`
         return
       }
-
       unwrapElement(firstParagraph)
-
       node.innerHTML = `${startSpaces}${node.innerHTML}${endSpaces}`
     }
   }
@@ -119,13 +121,11 @@ export class MarkdownParser {
         }
         return rendered
       }
-
     md.renderer.rules.hardbreak = withoutNewLine(md.renderer.rules.hardbreak)
     md.renderer.rules.softbreak = withoutNewLine(md.renderer.rules.softbreak)
     md.renderer.rules.fence = withoutNewLine(md.renderer.rules.fence)
     md.renderer.rules.code_block = withoutNewLine(md.renderer.rules.code_block)
     md.renderer.renderToken = withoutNewLine(md.renderer.renderToken.bind(md.renderer))
-
     return md
   }
 }
diff --git a/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js b/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
index 7c6c9511..b11888d0 100644
--- a/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
+++ b/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
@@ -2,7 +2,6 @@ import { MarkdownSerializerState } from './state'
 import HTMLMark from '../extensions/marks/html'
 import HTMLNode from '../extensions/nodes/html'
 import { getMarkdownSpec } from '../util/extensions'
-import HardBreak from '../extensions/nodes/hard-break'
 
 export class MarkdownSerializer {
   /**
@@ -16,7 +15,7 @@ export class MarkdownSerializer {
 
   serialize(content) {
     const state = new MarkdownSerializerState(this.nodes, this.marks, {
-      hardBreakNodeName: HardBreak.name,
+      //   hardBreakNodeName: HardBreak.name,
     })
 
     state.renderContent(content)
diff --git a/src/components/Editor/MarkdownExtension/serialize/state.js b/src/components/Editor/MarkdownExtension/serialize/state.js
index 349381a7..11c06393 100644
--- a/src/components/Editor/MarkdownExtension/serialize/state.js
+++ b/src/components/Editor/MarkdownExtension/serialize/state.js
@@ -1,22 +1,22 @@
 import { MarkdownSerializerState as BaseMarkdownSerializerState } from 'prosemirror-markdown'
 import { trimInline } from '../util/markdown'
 
-/**
- * Override default MarkdownSerializerState to:
- * - handle commonmark delimiters (https://spec.commonmark.org/0.29/#left-flanking-delimiter-run)
- */
 export class MarkdownSerializerState extends BaseMarkdownSerializerState {
   inTable = false
 
   constructor(nodes, marks, options) {
     super(nodes, marks, options ?? {})
     this.inlines = []
+    this.lastWasParagraph = false
   }
 
   render(node, parent, index) {
     if (node.type.name === 'paragraph' && node.content.size === 0) {
       this.out += '\n'
     } else {
+      if (this.lastWasParagraph && node.type.name === 'paragraph') {
+        this.out += '\n'
+      }
       super.render(node, parent, index)
       const top = this.inlines[this.inlines.length - 1]
       if (top?.start && top?.end) {
@@ -25,14 +25,11 @@ export class MarkdownSerializerState extends BaseMarkdownSerializerState {
         this.inlines.pop()
       }
     }
+    this.lastWasParagraph = node.type.name === 'paragraph'
   }
 
   renderContent(fragment) {
-    console.log('fragment', fragment)
     fragment.forEach((node, _, i) => {
-      if (i && node.type.name === 'paragraph') {
-        this.out += '\n'
-      }
       this.render(node)
     })
   }
@@ -66,4 +63,12 @@ export class MarkdownSerializerState extends BaseMarkdownSerializerState {
       start,
     }
   }
+
+  // Override the closeBlock method to control newline insertion
+  closeBlock(node) {
+    if (this.lastWasParagraph && node.type.name === 'paragraph') {
+      this.out += '\n'
+    }
+    this.lastWasParagraph = node.type.name === 'paragraph'
+  }
 }
diff --git a/src/components/Editor/utils.ts b/src/components/Editor/utils.ts
index 89143279..595b8a35 100644
--- a/src/components/Editor/utils.ts
+++ b/src/components/Editor/utils.ts
@@ -3,7 +3,6 @@ import { Editor } from '@tiptap/core'
 export async function getMarkdown(editor: Editor) {
   const originalMarkdown = editor.storage.markdown.getMarkdown()
   // console.log('CALLING THIS')
-  console.log('editor.state.doc', editor.state.doc)
   // console.log('editor.storage.markdown', editor.storage.markdown)
   // const originalMarkdown = editor.storage.markdown.serializer.serialize(editor.state.doc)
   // const html = editor.getHTML()
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index bb3822ce..fdfa6563 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -168,7 +168,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         tightListClass: 'tight',
         bulletListMarker: '-',
         linkify: true,
-        breaks: true,
+        breaks: false,
         transformPastedText: true,
         transformCopiedText: false,
       }),

From a648e7430046b4251ee73b6c3758626d9b883d44 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 00:13:17 +0100
Subject: [PATCH 11/41] rever tiptap manual import changes

---
 package-lock.json                             | 591 +-----------------
 package.json                                  |  14 +-
 .../Editor/MarkdownExtension/Markdown.ts      |  74 ---
 .../MarkdownExtension/extensions/index.js     |  48 --
 .../extensions/marks/bold.js                  |  23 -
 .../extensions/marks/code.js                  |  23 -
 .../extensions/marks/html.js                  |  42 --
 .../extensions/marks/italic.js                |  23 -
 .../extensions/marks/link.js                  |  23 -
 .../extensions/marks/strike.js                |  22 -
 .../extensions/nodes/blockquote.js            |  23 -
 .../extensions/nodes/bullet-list.js           |  24 -
 .../extensions/nodes/code-block.js            |  35 --
 .../extensions/nodes/hard-break.js            |  32 -
 .../extensions/nodes/heading.js               |  23 -
 .../extensions/nodes/horizontal-rule.js       |  23 -
 .../extensions/nodes/html.js                  |  53 --
 .../extensions/nodes/image.js                 |  23 -
 .../extensions/nodes/list-item.js             |  23 -
 .../extensions/nodes/ordered-list.js          |  42 --
 .../extensions/nodes/paragraph.js             |  23 -
 .../extensions/nodes/table.js                 |  73 ---
 .../extensions/nodes/task-item.js             |  36 --
 .../extensions/nodes/task-list.js             |  32 -
 .../extensions/nodes/text.js                  |  25 -
 .../extensions/tiptap/clipboard.js            |  43 --
 .../extensions/tiptap/tight-lists.js          |  48 --
 .../Editor/MarkdownExtension/index.ts         |   4 -
 .../MarkdownExtension/parse/MarkdownParser.js | 131 ----
 .../serialize/MarkdownSerializer.js           |  70 ---
 .../MarkdownExtension/serialize/state.js      |  74 ---
 .../Editor/MarkdownExtension/util/dom.js      |  39 --
 .../MarkdownExtension/util/extensions.js      |  16 -
 .../Editor/MarkdownExtension/util/markdown.js |  56 --
 .../MarkdownExtension/util/prosemirror.js     |   5 -
 src/components/Editor/utils.ts                |  22 +-
 src/contexts/FileContext.tsx                  |   9 +-
 src/utils/markdown.ts                         |  97 ---
 38 files changed, 47 insertions(+), 1940 deletions(-)
 delete mode 100644 src/components/Editor/MarkdownExtension/Markdown.ts
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/index.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/bold.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/code.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/html.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/italic.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/link.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/marks/strike.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/html.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/image.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/table.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/nodes/text.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
 delete mode 100644 src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
 delete mode 100644 src/components/Editor/MarkdownExtension/index.ts
 delete mode 100644 src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
 delete mode 100644 src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
 delete mode 100644 src/components/Editor/MarkdownExtension/serialize/state.js
 delete mode 100644 src/components/Editor/MarkdownExtension/util/dom.js
 delete mode 100644 src/components/Editor/MarkdownExtension/util/extensions.js
 delete mode 100644 src/components/Editor/MarkdownExtension/util/markdown.js
 delete mode 100644 src/components/Editor/MarkdownExtension/util/prosemirror.js
 delete mode 100644 src/utils/markdown.ts

diff --git a/package-lock.json b/package-lock.json
index 4eb722d6..93939a0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,6 @@
         "lit": "^3.0.0",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.435.0",
-        "markdown-it-task-lists": "^2.1.1",
         "marked": "^12.0.1",
         "npm": "^10.3.0",
         "ollama": "^0.4.9",
@@ -83,22 +82,13 @@
         "react-toastify": "^10.0.4",
         "react-type-animation": "^3.2.0",
         "react-window": "^1.8.10",
-        "rehype-parse": "^9.0.0",
         "rehype-raw": "^7.0.0",
-        "rehype-remark": "^10.0.0",
-        "rehype-stringify": "^10.0.0",
-        "remark-gfm": "^4.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.1",
-        "remark-stringify": "^11.0.0",
         "remove-markdown": "^0.5.0",
         "tailwind-merge": "^2.5.2",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss-animate": "^1.0.7",
+        "tiptap-markdown": "^0.8.10",
         "turndown": "^7.1.2",
-        "unified": "^11.0.5",
-        "unist-builder": "^4.0.0",
-        "unist-util-visit": "^5.0.0",
         "use-debounce": "^10.0.1",
         "uuid": "^10.0.0",
         "uuidv4": "^6.2.13",
@@ -5299,10 +5289,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz",
+      "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw=="
+    },
     "node_modules/@types/long": {
       "version": "4.0.2",
       "license": "MIT"
     },
+    "node_modules/@types/markdown-it": {
+      "version": "13.0.9",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.9.tgz",
+      "integrity": "sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==",
+      "dependencies": {
+        "@types/linkify-it": "^3",
+        "@types/mdurl": "^1"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.3",
       "license": "MIT",
@@ -5310,6 +5314,11 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz",
+      "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA=="
+    },
     "node_modules/@types/ms": {
       "version": "0.7.34",
       "license": "MIT"
@@ -10927,36 +10936,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-util-embedded": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-embedded/-/hast-util-embedded-3.0.0.tgz",
-      "integrity": "sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-is-element": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-from-html": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
-      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "devlop": "^1.1.0",
-        "hast-util-from-parse5": "^8.0.0",
-        "parse5": "^7.0.0",
-        "vfile": "^6.0.0",
-        "vfile-message": "^4.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-from-parse5": {
       "version": "8.0.1",
       "license": "MIT",
@@ -10979,58 +10958,6 @@
       "version": "3.0.2",
       "license": "MIT"
     },
-    "node_modules/hast-util-has-property": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-3.0.0.tgz",
-      "integrity": "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-is-body-ok-link": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-body-ok-link/-/hast-util-is-body-ok-link-3.0.0.tgz",
-      "integrity": "sha512-VFHY5bo2nY8HiV6nir2ynmEB1XkxzuUffhEGeVx7orbu/B1KaGyeGgMZldvMVx5xWrDlLLG/kQ6YkJAMkBEx0w==",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-is-element": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
-      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-minify-whitespace": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-minify-whitespace/-/hast-util-minify-whitespace-1.0.0.tgz",
-      "integrity": "sha512-gD1m4YJSIk62ij32TlhFNqsC3dOQvpA4QAhyZOZFAT4u8LfEfB6N+F0V9oXQGBWXoqrs0h9wQRKa8RCeo8j61g==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-embedded": "^3.0.0",
-        "hast-util-is-element": "^3.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "unist-util-is": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-parse-selector": {
       "version": "4.0.0",
       "license": "MIT",
@@ -11042,22 +10969,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-util-phrasing": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-phrasing/-/hast-util-phrasing-3.0.1.tgz",
-      "integrity": "sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-embedded": "^3.0.0",
-        "hast-util-has-property": "^3.0.0",
-        "hast-util-is-body-ok-link": "^3.0.0",
-        "hast-util-is-element": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-raw": {
       "version": "9.0.2",
       "license": "MIT",
@@ -11085,33 +10996,6 @@
       "version": "3.0.2",
       "license": "MIT"
     },
-    "node_modules/hast-util-to-html": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
-      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "ccount": "^2.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "html-void-elements": "^3.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "property-information": "^6.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "stringify-entities": "^4.0.0",
-        "zwitch": "^2.0.4"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-to-html/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
-    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.0",
       "license": "MIT",
@@ -11141,31 +11025,6 @@
       "version": "3.0.2",
       "license": "MIT"
     },
-    "node_modules/hast-util-to-mdast": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/hast-util-to-mdast/-/hast-util-to-mdast-10.1.0.tgz",
-      "integrity": "sha512-DsL/SvCK9V7+vfc6SLQ+vKIyBDXTk2KLSbfBYkH4zeF/uR1yBajHRhkzuaUSGOB1WJSTieJBdHwxlC+HLKvZZw==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/mdast": "^4.0.0",
-        "@ungap/structured-clone": "^1.0.0",
-        "hast-util-phrasing": "^3.0.0",
-        "hast-util-to-html": "^9.0.0",
-        "hast-util-to-text": "^4.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "mdast-util-phrasing": "^4.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "mdast-util-to-string": "^4.0.0",
-        "rehype-minify-whitespace": "^6.0.0",
-        "trim-trailing-lines": "^2.0.0",
-        "unist-util-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-to-parse5": {
       "version": "8.0.0",
       "license": "MIT",
@@ -11183,26 +11042,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-util-to-text": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
-      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "hast-util-is-element": "^3.0.0",
-        "unist-util-find-after": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-to-text/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
-    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "license": "MIT",
@@ -14421,15 +14260,6 @@
       "resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
       "integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
     },
-    "node_modules/markdown-table": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
-      "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/marked": {
       "version": "12.0.1",
       "license": "MIT",
@@ -14465,32 +14295,6 @@
         "is-buffer": "~1.1.6"
       }
     },
-    "node_modules/mdast-util-find-and-replace": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
-      "integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "escape-string-regexp": "^5.0.0",
-        "unist-util-is": "^6.0.0",
-        "unist-util-visit-parents": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
-      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.0",
       "license": "MIT",
@@ -14517,101 +14321,6 @@
       "version": "3.0.2",
       "license": "MIT"
     },
-    "node_modules/mdast-util-gfm": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
-      "integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
-      "dependencies": {
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-gfm-autolink-literal": "^2.0.0",
-        "mdast-util-gfm-footnote": "^2.0.0",
-        "mdast-util-gfm-strikethrough": "^2.0.0",
-        "mdast-util-gfm-table": "^2.0.0",
-        "mdast-util-gfm-task-list-item": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-gfm-autolink-literal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
-      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "ccount": "^2.0.0",
-        "devlop": "^1.0.0",
-        "mdast-util-find-and-replace": "^3.0.0",
-        "micromark-util-character": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-gfm-footnote": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
-      "integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.1.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-gfm-strikethrough": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
-      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-gfm-table": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
-      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.0.0",
-        "markdown-table": "^3.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/mdast-util-gfm-task-list-item": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
-      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "devlop": "^1.0.0",
-        "mdast-util-from-markdown": "^2.0.0",
-        "mdast-util-to-markdown": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.0",
       "license": "MIT",
@@ -14821,120 +14530,6 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/micromark-extension-gfm": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
-      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
-      "dependencies": {
-        "micromark-extension-gfm-autolink-literal": "^2.0.0",
-        "micromark-extension-gfm-footnote": "^2.0.0",
-        "micromark-extension-gfm-strikethrough": "^2.0.0",
-        "micromark-extension-gfm-table": "^2.0.0",
-        "micromark-extension-gfm-tagfilter": "^2.0.0",
-        "micromark-extension-gfm-task-list-item": "^2.0.0",
-        "micromark-util-combine-extensions": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-autolink-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
-      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-footnote": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
-      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-core-commonmark": "^2.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-normalize-identifier": "^2.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-strikethrough": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
-      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-util-chunked": "^2.0.0",
-        "micromark-util-classify-character": "^2.0.0",
-        "micromark-util-resolve-all": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-table": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.0.tgz",
-      "integrity": "sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-tagfilter": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
-      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
-      "dependencies": {
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/micromark-extension-gfm-task-list-item": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
-      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
-      "dependencies": {
-        "devlop": "^1.0.0",
-        "micromark-factory-space": "^2.0.0",
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0",
-        "micromark-util-types": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.0",
       "funding": [
@@ -20179,33 +19774,6 @@
         "jsesc": "bin/jsesc"
       }
     },
-    "node_modules/rehype-minify-whitespace": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/rehype-minify-whitespace/-/rehype-minify-whitespace-6.0.1.tgz",
-      "integrity": "sha512-3oJZ3O8ukn6cNJ8elg8dU/tMCH4CDk7elE9x5G+dKL1qQYXeVnsDkSz17sAiUKIoDOXUUkOyC/VMNGEHbPmCew==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-minify-whitespace": "^1.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-parse": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.0.tgz",
-      "integrity": "sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-from-html": "^2.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/rehype-raw": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
@@ -20220,53 +19788,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/rehype-remark": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-remark/-/rehype-remark-10.0.0.tgz",
-      "integrity": "sha512-+aDXY/icqMFOafJQomVjxe3BAP7aR3lIsQ3GV6VIwpbCD2nvNFOXjGvotMe5p0Ny+Gt6L13DhEf/FjOOpTuUbQ==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/mdast": "^4.0.0",
-        "hast-util-to-mdast": "^10.0.0",
-        "unified": "^11.0.0",
-        "vfile": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-stringify": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
-      "integrity": "sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "hast-util-to-html": "^9.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/remark-gfm": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
-      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-gfm": "^3.0.0",
-        "micromark-extension-gfm": "^3.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-stringify": "^11.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -20298,20 +19819,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remark-stringify": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
-      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
-      "dependencies": {
-        "@types/mdast": "^4.0.0",
-        "mdast-util-to-markdown": "^2.0.0",
-        "unified": "^11.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/remove-markdown": {
       "version": "0.5.0",
       "license": "MIT"
@@ -21665,6 +21172,20 @@
         "@popperjs/core": "^2.9.0"
       }
     },
+    "node_modules/tiptap-markdown": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.8.10.tgz",
+      "integrity": "sha512-iDVkR2BjAqkTDtFX0h94yVvE2AihCXlF0Q7RIXSJPRSR5I0PA1TMuAg6FHFpmqTn4tPxJ0by0CK7PUMlnFLGEQ==",
+      "dependencies": {
+        "@types/markdown-it": "^13.0.7",
+        "markdown-it": "^14.1.0",
+        "markdown-it-task-lists": "^2.1.1",
+        "prosemirror-markdown": "^1.11.1"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.3"
+      }
+    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "dev": true,
@@ -21718,15 +21239,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/trim-trailing-lines": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-2.1.0.tgz",
-      "integrity": "sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/trough": {
       "version": "2.2.0",
       "license": "MIT",
@@ -22035,41 +21547,6 @@
       "version": "3.0.2",
       "license": "MIT"
     },
-    "node_modules/unist-builder": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-4.0.0.tgz",
-      "integrity": "sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-builder/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
-    },
-    "node_modules/unist-util-find-after": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
-      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-find-after/node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
-    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index b3108003..183abec3 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,6 @@
     "lit": "^3.0.0",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.435.0",
-    "markdown-it-task-lists": "^2.1.1",
     "marked": "^12.0.1",
     "npm": "^10.3.0",
     "ollama": "^0.4.9",
@@ -102,22 +101,13 @@
     "react-toastify": "^10.0.4",
     "react-type-animation": "^3.2.0",
     "react-window": "^1.8.10",
-    "rehype-parse": "^9.0.0",
     "rehype-raw": "^7.0.0",
-    "rehype-remark": "^10.0.0",
-    "rehype-stringify": "^10.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.1",
-    "remark-stringify": "^11.0.0",
     "remove-markdown": "^0.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "tiptap-markdown": "^0.8.10",
     "turndown": "^7.1.2",
-    "unified": "^11.0.5",
-    "unist-builder": "^4.0.0",
-    "unist-util-visit": "^5.0.0",
     "use-debounce": "^10.0.1",
     "uuid": "^10.0.0",
     "uuidv4": "^6.2.13",
@@ -199,4 +189,4 @@
       "node"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Editor/MarkdownExtension/Markdown.ts b/src/components/Editor/MarkdownExtension/Markdown.ts
deleted file mode 100644
index 14ac4b8f..00000000
--- a/src/components/Editor/MarkdownExtension/Markdown.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Extension, extensions } from '@tiptap/core'
-import { MarkdownTightLists } from './extensions/tiptap/tight-lists'
-import { MarkdownSerializer } from './serialize/MarkdownSerializer'
-import { MarkdownParser } from './parse/MarkdownParser'
-import { MarkdownClipboard } from './extensions/tiptap/clipboard'
-
-export const Markdown = Extension.create({
-  name: 'markdown',
-  priority: 50,
-  addOptions() {
-    return {
-      html: true,
-      tightLists: true,
-      tightListClass: 'tight',
-      bulletListMarker: '-',
-      linkify: false,
-      breaks: false,
-      transformPastedText: false,
-      transformCopiedText: false,
-    }
-  },
-  addCommands() {
-    const commands = extensions.Commands.config.addCommands()
-    return {
-      setContent: (content, emitUpdate, parseOptions) => (props) => {
-        console.log('content', content)
-        const parsedContent = props.editor.storage.markdown.parser.parse(content)
-        console.log('parsedContent', parsedContent)
-        return commands.setContent(parsedContent, emitUpdate, parseOptions)(props)
-      },
-      insertContentAt: (range, content, options) => (props) => {
-        return commands.insertContentAt(
-          range,
-          props.editor.storage.markdown.parser.parse(content, { inline: true }),
-          options,
-        )(props)
-      },
-    }
-  },
-  onBeforeCreate() {
-    this.editor.storage.markdown = {
-      options: { ...this.options },
-      parser: new MarkdownParser(this.editor, this.options),
-      serializer: new MarkdownSerializer(this.editor),
-      getMarkdown: () => {
-        console.log('CALLING GET CONTENT')
-        return this.editor.storage.markdown.serializer.serialize(this.editor.state.doc)
-      },
-    }
-    this.editor.options.initialContent = this.editor.options.content
-    this.editor.options.content = this.editor.storage.markdown.parser.parse(this.editor.options.content)
-  },
-  onCreate() {
-    this.editor.options.content = this.editor.options.initialContent
-    delete this.editor.options.initialContent
-  },
-  addStorage() {
-    return {
-      /// storage will be defined in onBeforeCreate() to prevent initial object overriding
-    }
-  },
-  addExtensions() {
-    return [
-      MarkdownTightLists.configure({
-        tight: this.options.tightLists,
-        tightClass: this.options.tightListClass,
-      }),
-      MarkdownClipboard.configure({
-        transformPastedText: this.options.transformPastedText,
-        transformCopiedText: this.options.transformCopiedText,
-      }),
-    ]
-  },
-})
diff --git a/src/components/Editor/MarkdownExtension/extensions/index.js b/src/components/Editor/MarkdownExtension/extensions/index.js
deleted file mode 100644
index 87d186ed..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import Blockquote from "./nodes/blockquote";
-import BulletList from "./nodes/bullet-list";
-import CodeBlock from "./nodes/code-block";
-import HardBreak from "./nodes/hard-break";
-import Heading from "./nodes/heading";
-import HorizontalRule from "./nodes/horizontal-rule";
-import HTMLNode from "./nodes/html";
-import Image from "./nodes/image";
-import ListItem from "./nodes/list-item";
-import OrderedList from "./nodes/ordered-list";
-import Paragraph from "./nodes/paragraph";
-import Table from "./nodes/table";
-import TaskItem from "./nodes/task-item";
-import TaskList from "./nodes/task-list";
-import Text from "./nodes/text";
-
-import Bold from "./marks/bold";
-import Code from "./marks/code";
-import HTMLMark from "./marks/html";
-import Italic from "./marks/italic";
-import Link from "./marks/link";
-import Strike from "./marks/strike";
-
-
-export default [
-    Blockquote,
-    BulletList,
-    CodeBlock,
-    HardBreak,
-    Heading,
-    HorizontalRule,
-    HTMLNode,
-    Image,
-    ListItem,
-    OrderedList,
-    Paragraph,
-    Table,
-    TaskItem,
-    TaskList,
-    Text,
-
-    Bold,
-    Code,
-    HTMLMark,
-    Italic,
-    Link,
-    Strike,
-]
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/bold.js b/src/components/Editor/MarkdownExtension/extensions/marks/bold.js
deleted file mode 100644
index e849f72a..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/bold.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Mark } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Bold = Mark.create({
-    name: 'bold',
-});
-
-export default Bold.extend({
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.marks.strong,
-                parse: {
-                    // handled by markdown-it
-                }
-            },
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/code.js b/src/components/Editor/MarkdownExtension/extensions/marks/code.js
deleted file mode 100644
index 25a59f20..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/code.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Mark } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Code = Mark.create({
-    name: 'code',
-});
-
-export default Code.extend({
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.marks.code,
-                parse: {
-                    // handled by markdown-it
-                }
-            }
-        }
-    }
-})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/html.js b/src/components/Editor/MarkdownExtension/extensions/marks/html.js
deleted file mode 100644
index d02d14da..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/html.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Fragment } from "@tiptap/pm/model";
-import { getHTMLFromFragment, Mark } from "@tiptap/core";
-
-
-export default Mark.create({
-    name: 'markdownHTMLMark',
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: {
-                    open(state, mark)  {
-                        if(!this.editor.storage.markdown.options.html) {
-                            console.warn(`Tiptap Markdown: "${mark.type.name}" mark is only available in html mode`);
-                            return '';
-                        }
-                        return getMarkTags(mark)?.[0] ?? '';
-                    },
-                    close(state, mark) {
-                        if(!this.editor.storage.markdown.options.html) {
-                            return '';
-                        }
-                        return getMarkTags(mark)?.[1] ?? '';
-                    },
-                },
-                parse: {
-                    // handled by markdown-it
-                }
-            }
-        }
-    }
-});
-
-function getMarkTags(mark) {
-    const schema = mark.type.schema;
-    const node = schema.text(' ', [mark]);
-    const html = getHTMLFromFragment(Fragment.from(node), schema);
-    const match = html.match(/^(<.*?>) (<\/.*?>)$/);
-    return match ? [match[1], match[2]] : null;
-}
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/italic.js b/src/components/Editor/MarkdownExtension/extensions/marks/italic.js
deleted file mode 100644
index e80b3cda..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/italic.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Mark } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Italic = Mark.create({
-    name: 'italic',
-});
-
-export default Italic.extend({
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.marks.em,
-                parse: {
-                    // handled by markdown-it
-                }
-            }
-        }
-    }
-})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/link.js b/src/components/Editor/MarkdownExtension/extensions/marks/link.js
deleted file mode 100644
index 43b83d34..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/link.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Mark } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Link = Mark.create({
-    name: 'link',
-});
-
-export default Link.extend({
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.marks.link,
-                parse: {
-                    // handled by markdown-it
-                }
-            }
-        }
-    }
-})
diff --git a/src/components/Editor/MarkdownExtension/extensions/marks/strike.js b/src/components/Editor/MarkdownExtension/extensions/marks/strike.js
deleted file mode 100644
index 18066cf5..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/marks/strike.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Mark } from "@tiptap/core";
-
-
-const Strike = Mark.create({
-    name: 'strike',
-});
-
-export default Strike.extend({
-    /**
-     * @return {{markdown: MarkdownMarkSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: {open: '~~', close: '~~', expelEnclosingWhitespace: true},
-                parse: {
-                    // handled by markdown-it
-                },
-            },
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js b/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
deleted file mode 100644
index 72dbb1e2..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/blockquote.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Blockquote = Node.create({
-    name: 'blockquote',
-});
-
-export default Blockquote.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.blockquote,
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
deleted file mode 100644
index 07d8bf75..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/bullet-list.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Node } from "@tiptap/core";
-
-
-const BulletList = Node.create({
-    name: 'bulletList',
-});
-
-export default BulletList.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node) {
-                    return state.renderList(node, "  ", () => (this.editor.storage.markdown.options.bulletListMarker || "-") + " ");
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js b/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
deleted file mode 100644
index 83e75a74..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/code-block.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Node } from "@tiptap/core";
-
-
-const CodeBlock = Node.create({
-    name: 'codeBlock',
-});
-
-export default CodeBlock.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node) {
-                    state.write("```" + (node.attrs.language || "") + "\n");
-                    state.text(node.textContent, false);
-                    state.ensureNewLine();
-                    state.write("```");
-                    state.closeBlock(node);
-                },
-                parse: {
-                    setup(markdownit) {
-                        markdownit.set({
-                            langPrefix: this.options.languageClassPrefix ?? 'language-',
-                        });
-                    },
-                    updateDOM(element) {
-                        element.innerHTML = element.innerHTML.replace(/\n<\/code><\/pre>/g, '</code></pre>')
-                    },
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js b/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
deleted file mode 100644
index 0643e4fd..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/hard-break.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Node } from "@tiptap/core";
-import HTMLNode from './html';
-
-const HardBreak = Node.create({
-    name: 'hardBreak',
-});
-
-export default HardBreak.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node, parent, index) {
-                    for (let i = index + 1; i < parent.childCount; i++)
-                        if (parent.child(i).type != node.type) {
-                            state.write(
-                                state.inTable
-                                    ? HTMLNode.storage.markdown.serialize.call(this, state, node, parent)
-                                    : "\\\n"
-                            );
-                            return;
-                        }
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js b/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
deleted file mode 100644
index 539344cc..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/heading.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Heading = Node.create({
-    name: 'heading',
-});
-
-export default Heading.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.heading,
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js b/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
deleted file mode 100644
index 6571764b..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/horizontal-rule.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const HorizontalRule = Node.create({
-    name: 'horizontalRule',
-});
-
-export default HorizontalRule.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.horizontal_rule,
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/html.js b/src/components/Editor/MarkdownExtension/extensions/nodes/html.js
deleted file mode 100644
index 3879958f..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/html.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Fragment } from "@tiptap/pm/model";
-import { getHTMLFromFragment, Node } from "@tiptap/core";
-import { elementFromString } from "../../util/dom";
-
-
-export default Node.create({
-    name: 'markdownHTMLNode',
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node, parent) {
-                    if(this.editor.storage.markdown.options.html) {
-                        state.write(serializeHTML(node, parent));
-                    } else {
-                        console.warn(`Tiptap Markdown: "${node.type.name}" node is only available in html mode`);
-                        state.write(`[${node.type.name}]`);
-                    }
-                    if(node.isBlock) {
-                        state.closeBlock(node);
-                    }
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            },
-        }
-    }
-});
-
-function serializeHTML(node, parent) {
-    const schema = node.type.schema;
-    const html = getHTMLFromFragment(Fragment.from(node), schema);
-
-    if(node.isBlock && (parent instanceof Fragment || parent.type.name === schema.topNodeType.name)) {
-        return formatBlock(html);
-    }
-
-    return html;
-}
-
-/**
- * format html block as per the commonmark spec
- */
-function formatBlock(html) {
-    const dom = elementFromString(html);
-    const element = dom.firstElementChild;
-
-    element.innerHTML = element.innerHTML.trim()
-        ? `\n${element.innerHTML}\n`
-        : `\n`;
-
-    return element.outerHTML;
-}
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/image.js b/src/components/Editor/MarkdownExtension/extensions/nodes/image.js
deleted file mode 100644
index b0e4eb5c..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/image.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Image = Node.create({
-    name: 'image',
-});
-
-export default Image.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.image,
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js b/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
deleted file mode 100644
index f9d2f540..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/list-item.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const ListItem = Node.create({
-    name: 'listItem',
-});
-
-export default ListItem.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.list_item,
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
deleted file mode 100644
index d16bfd49..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/ordered-list.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Node } from "@tiptap/core";
-
-
-const OrderedList = Node.create({
-    name: 'orderedList',
-});
-
-function findIndexOfAdjacentNode(node, parent, index) {
-    let i = 0;
-    for (; index - i > 0; i++) {
-        if (parent.child(index - i - 1).type.name !== node.type.name) {
-            break;
-        }
-    }
-    return i;
-}
-
-export default OrderedList.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node, parent, index) {
-                    const start = node.attrs.start || 1
-                    const maxW = String(start + node.childCount - 1).length
-                    const space = state.repeat(" ", maxW + 2)
-                    const adjacentIndex = findIndexOfAdjacentNode(node, parent, index);
-                    const separator = adjacentIndex % 2 ? ') ' : '. ';
-                    state.renderList(node, space, i => {
-                        const nStr = String(start + i)
-                        return state.repeat(" ", maxW - nStr.length) + nStr + separator;
-                    })
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js b/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
deleted file mode 100644
index 1882bdb0..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/paragraph.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Node } from "@tiptap/core";
-import { defaultMarkdownSerializer } from "prosemirror-markdown";
-
-
-const Paragraph = Node.create({
-    name: 'paragraph',
-});
-
-export default Paragraph.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: defaultMarkdownSerializer.nodes.paragraph,
-                parse: {
-                    // handled by markdown-it
-                },
-            },
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/table.js b/src/components/Editor/MarkdownExtension/extensions/nodes/table.js
deleted file mode 100644
index 08056393..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/table.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Node } from "@tiptap/core";
-import { childNodes } from "../../util/prosemirror";
-import HTMLNode from './html';
-
-const Table = Node.create({
-    name: 'table',
-});
-
-export default Table.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node, parent) {
-                    if(!isMarkdownSerializable(node)) {
-                        HTMLNode.storage.markdown.serialize.call(this, state, node, parent);
-                        return;
-                    }
-                    state.inTable = true;
-                    node.forEach((row, p, i) => {
-                        state.write('| ');
-                        row.forEach((col, p, j) => {
-                            if(j) {
-                                state.write(' | ');
-                            }
-                            const cellContent = col.firstChild;
-                            if(cellContent.textContent.trim()) {
-                                state.renderInline(cellContent);
-                            }
-                        });
-                        state.write(' |')
-                        state.ensureNewLine();
-                        if(!i) {
-                            const delimiterRow = Array.from({length: row.childCount}).map(() => '---').join(' | ');
-                            state.write(`| ${delimiterRow} |`);
-                            state.ensureNewLine();
-                        }
-                    });
-                    state.closeBlock(node);
-                    state.inTable = false;
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-})
-
-
-function hasSpan(node) {
-    return node.attrs.colspan > 1 || node.attrs.rowspan > 1;
-}
-
-function isMarkdownSerializable(node) {
-    const rows = childNodes(node);
-    const firstRow = rows[0];
-    const bodyRows = rows.slice(1);
-
-    if(childNodes(firstRow).some(cell => cell.type.name !== 'tableHeader' || hasSpan(cell) || cell.childCount > 1)) {
-        return false;
-    }
-
-    if(bodyRows.some(row =>
-        childNodes(row).some(cell => cell.type.name === 'tableHeader' || hasSpan(cell) || cell.childCount > 1)
-    )) {
-        return false;
-    }
-
-    return true;
-}
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js b/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
deleted file mode 100644
index 1c619577..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/task-item.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Node } from "@tiptap/core";
-
-
-const TaskItem = Node.create({
-    name: 'taskItem',
-});
-
-export default TaskItem.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node) {
-                    const check = node.attrs.checked ? '[x]' : '[ ]';
-                    state.write(`${check} `);
-                    state.renderContent(node);
-                },
-                parse: {
-                    updateDOM(element) {
-                        [...element.querySelectorAll('.task-list-item')]
-                            .forEach(item => {
-                                const input = item.querySelector('input');
-                                item.setAttribute('data-type', 'taskItem');
-                                if(input) {
-                                    item.setAttribute('data-checked', input.checked);
-                                    input.remove();
-                                }
-                            });
-                    },
-                }
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js b/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
deleted file mode 100644
index 0d4e39cb..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/task-list.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import taskListPlugin from "markdown-it-task-lists";
-import { Node } from "@tiptap/core";
-import BulletList from "./bullet-list";
-
-
-const TaskList = Node.create({
-    name: 'taskList',
-});
-
-export default TaskList.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize: BulletList.storage.markdown.serialize,
-                parse: {
-                    setup(markdownit) {
-                        markdownit.use(taskListPlugin);
-                    },
-                    updateDOM(element) {
-                        [...element.querySelectorAll('.contains-task-list')]
-                            .forEach(list => {
-                                list.setAttribute('data-type', 'taskList');
-                            });
-                    },
-                }
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/nodes/text.js b/src/components/Editor/MarkdownExtension/extensions/nodes/text.js
deleted file mode 100644
index 178c6538..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/nodes/text.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Node } from "@tiptap/core";
-import { escapeHTML } from "../../util/dom";
-
-
-const Text = Node.create({
-    name: 'text',
-});
-
-export default Text.extend({
-    /**
-     * @return {{markdown: MarkdownNodeSpec}}
-     */
-    addStorage() {
-        return {
-            markdown: {
-                serialize(state, node) {
-                    state.text(escapeHTML(node.text));
-                },
-                parse: {
-                    // handled by markdown-it
-                },
-            }
-        }
-    }
-});
diff --git a/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js b/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
deleted file mode 100644
index c9f6d541..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/tiptap/clipboard.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { DOMParser } from '@tiptap/pm/model';
-import { elementFromString } from "../../util/dom";
-
-export const MarkdownClipboard = Extension.create({
-    name: 'markdownClipboard',
-    addOptions() {
-        return {
-            transformPastedText: false,
-            transformCopiedText: false,
-        }
-    },
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey('markdownClipboard'),
-                props: {
-                    clipboardTextParser: (text, context, plainText) => {
-                        if(plainText || !this.options.transformPastedText) {
-                            return null; // pasting with shift key prevents formatting
-                        }
-                        const parsed = this.editor.storage.markdown.parser.parse(text, { inline: true });
-                        return DOMParser.fromSchema(this.editor.schema)
-                            .parseSlice(elementFromString(parsed), {
-                                preserveWhitespace: true,
-                                context,
-                            });
-                    },
-                    /**
-                     * @param {import('prosemirror-model').Slice} slice
-                     */
-                    clipboardTextSerializer: (slice) => {
-                        if(!this.options.transformCopiedText) {
-                            return null;
-                        }
-                        return this.editor.storage.markdown.serializer.serialize(slice.content);
-                    },
-                },
-            })
-        ]
-    }
-})
diff --git a/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js b/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
deleted file mode 100644
index 673dc35a..00000000
--- a/src/components/Editor/MarkdownExtension/extensions/tiptap/tight-lists.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Extension } from "@tiptap/core";
-
-export const MarkdownTightLists = Extension.create({
-    name: 'markdownTightLists',
-    addOptions: () => ({
-        tight: true,
-        tightClass: 'tight',
-        listTypes: [
-            'bulletList',
-            'orderedList',
-        ],
-    }),
-    addGlobalAttributes() {
-        return [
-            {
-                types: this.options.listTypes,
-                attributes: {
-                    tight: {
-                        default: this.options.tight,
-                        parseHTML: element =>
-                            element.getAttribute('data-tight') === 'true' || !element.querySelector('p'),
-                        renderHTML: attributes => ({
-                            class: attributes.tight ? this.options.tightClass : null,
-                            'data-tight': attributes.tight ? 'true' : null,
-                        }),
-                    },
-                },
-            },
-        ]
-    },
-    addCommands() {
-        return {
-            toggleTight: (tight = null) => ({ editor, commands }) => {
-                function toggleTight(name) {
-                    if(!editor.isActive(name)) {
-                        return false;
-                    }
-                    const attrs = editor.getAttributes(name);
-                    return commands.updateAttributes(name, {
-                        tight: tight ?? !attrs?.tight,
-                    });
-                }
-                return this.options.listTypes
-                    .some(name => toggleTight(name));
-            }
-        }
-    },
-});
diff --git a/src/components/Editor/MarkdownExtension/index.ts b/src/components/Editor/MarkdownExtension/index.ts
deleted file mode 100644
index 6b326db9..00000000
--- a/src/components/Editor/MarkdownExtension/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-export { Markdown } from './Markdown';
diff --git a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js b/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
deleted file mode 100644
index 07749308..00000000
--- a/src/components/Editor/MarkdownExtension/parse/MarkdownParser.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import markdownit from 'markdown-it'
-import { elementFromString, extractElement, unwrapElement } from '../util/dom'
-import { getMarkdownSpec } from '../util/extensions'
-
-export class MarkdownParser {
-  /**
-   * @type {import('@tiptap/core').Editor}
-   */
-  editor = null
-
-  /**
-   * @type {markdownit}
-   */
-  md = null
-
-  constructor(editor, { html, linkify, breaks }) {
-    this.editor = editor
-    this.md = this.withPatchedRenderer(
-      markdownit({
-        html,
-        linkify,
-        breaks,
-      }),
-    )
-  }
-
-  parse(content, { inline } = {}) {
-    if (typeof content === 'string') {
-      // Preprocess the content to add empty <p> tags for empty newlines
-      content = this.preprocessEmptyLines(content)
-
-      this.editor.extensionManager.extensions.forEach((extension) =>
-        getMarkdownSpec(extension)?.parse?.setup?.call({ editor: this.editor, options: extension.options }, this.md),
-      )
-      const renderedHTML = this.md.render(content)
-      const element = elementFromString(renderedHTML)
-      this.editor.extensionManager.extensions.forEach((extension) =>
-        getMarkdownSpec(extension)?.parse?.updateDOM?.call(
-          { editor: this.editor, options: extension.options },
-          element,
-        ),
-      )
-      this.normalizeDOM(element, { inline, content })
-      return element.innerHTML
-    }
-    return content
-  }
-
-  preprocessEmptyLines(content) {
-    // Split the content into lines
-    const lines = content.split('\n')
-    // Process each line
-    const processedLines = lines.map((line) => {
-      return line.trim() === '' ? '<p></p>' : line
-    })
-
-    // Join the processed lines back into a single string
-    const processedContent = processedLines.join('\n')
-    return processedContent
-  }
-
-  normalizeDOM(node, { inline, content }) {
-    this.normalizeBlocks(node)
-    // remove all \n appended by markdown-it
-    node.querySelectorAll('*').forEach((el) => {
-      if (el.nextSibling?.nodeType === Node.TEXT_NODE && !el.closest('pre')) {
-        el.nextSibling.textContent = el.nextSibling.textContent.replace(/^\n/, '')
-      }
-    })
-    if (inline) {
-      this.normalizeInline(node, content)
-    }
-    return node
-  }
-
-  normalizeBlocks(node) {
-    const blocks = Object.values(this.editor.schema.nodes).filter((node) => node.isBlock)
-    const selector = blocks
-      .map((block) => block.spec.parseDOM?.map((spec) => spec.tag))
-      .flat()
-      .filter(Boolean)
-      .join(',')
-    if (!selector) {
-      return
-    }
-    ;[...node.querySelectorAll(selector)].forEach((el) => {
-      if (el.parentElement.matches('p')) {
-        extractElement(el)
-      }
-    })
-  }
-
-  normalizeInline(node, content) {
-    if (node.firstElementChild?.matches('p')) {
-      const firstParagraph = node.firstElementChild
-      const { nextElementSibling } = firstParagraph
-      const startSpaces = content.match(/^\s+/)?.[0] ?? ''
-      const endSpaces = !nextElementSibling ? (content.match(/\s+$/)?.[0] ?? '') : ''
-      if (content.match(/^\n\n/)) {
-        firstParagraph.innerHTML = `${firstParagraph.innerHTML}${endSpaces}`
-        return
-      }
-      unwrapElement(firstParagraph)
-      node.innerHTML = `${startSpaces}${node.innerHTML}${endSpaces}`
-    }
-  }
-
-  /**
-   * @param {markdownit} md
-   */
-  withPatchedRenderer(md) {
-    const withoutNewLine =
-      (renderer) =>
-      (...args) => {
-        const rendered = renderer(...args)
-        if (rendered === '\n') {
-          return rendered // keep soft breaks
-        }
-        if (rendered[rendered.length - 1] === '\n') {
-          return rendered.slice(0, -1)
-        }
-        return rendered
-      }
-    md.renderer.rules.hardbreak = withoutNewLine(md.renderer.rules.hardbreak)
-    md.renderer.rules.softbreak = withoutNewLine(md.renderer.rules.softbreak)
-    md.renderer.rules.fence = withoutNewLine(md.renderer.rules.fence)
-    md.renderer.rules.code_block = withoutNewLine(md.renderer.rules.code_block)
-    md.renderer.renderToken = withoutNewLine(md.renderer.renderToken.bind(md.renderer))
-    return md
-  }
-}
diff --git a/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js b/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
deleted file mode 100644
index b11888d0..00000000
--- a/src/components/Editor/MarkdownExtension/serialize/MarkdownSerializer.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { MarkdownSerializerState } from './state'
-import HTMLMark from '../extensions/marks/html'
-import HTMLNode from '../extensions/nodes/html'
-import { getMarkdownSpec } from '../util/extensions'
-
-export class MarkdownSerializer {
-  /**
-   * @type {import('@tiptap/core').Editor}
-   */
-  editor = null
-
-  constructor(editor) {
-    this.editor = editor
-  }
-
-  serialize(content) {
-    const state = new MarkdownSerializerState(this.nodes, this.marks, {
-      //   hardBreakNodeName: HardBreak.name,
-    })
-
-    state.renderContent(content)
-
-    console.log('state.out', state.out)
-
-    return state.out
-  }
-
-  get nodes() {
-    return {
-      ...Object.fromEntries(Object.keys(this.editor.schema.nodes).map((name) => [name, this.serializeNode(HTMLNode)])),
-      ...Object.fromEntries(
-        this.editor.extensionManager.extensions
-          .filter((extension) => extension.type === 'node' && this.serializeNode(extension))
-          .map((extension) => [extension.name, this.serializeNode(extension)]) ?? [],
-      ),
-    }
-  }
-
-  get marks() {
-    return {
-      ...Object.fromEntries(Object.keys(this.editor.schema.marks).map((name) => [name, this.serializeMark(HTMLMark)])),
-      ...Object.fromEntries(
-        this.editor.extensionManager.extensions
-          .filter((extension) => extension.type === 'mark' && this.serializeMark(extension))
-          .map((extension) => [extension.name, this.serializeMark(extension)]) ?? [],
-      ),
-    }
-  }
-
-  serializeNode(node) {
-    return getMarkdownSpec(node)?.serialize?.bind({ editor: this.editor, options: node.options })
-  }
-
-  serializeMark(mark) {
-    const serialize = getMarkdownSpec(mark)?.serialize
-    return serialize
-      ? {
-          ...serialize,
-          open:
-            typeof serialize.open === 'function'
-              ? serialize.open.bind({ editor: this.editor, options: mark.options })
-              : serialize.open,
-          close:
-            typeof serialize.close === 'function'
-              ? serialize.close.bind({ editor: this.editor, options: mark.options })
-              : serialize.close,
-        }
-      : null
-  }
-}
diff --git a/src/components/Editor/MarkdownExtension/serialize/state.js b/src/components/Editor/MarkdownExtension/serialize/state.js
deleted file mode 100644
index 11c06393..00000000
--- a/src/components/Editor/MarkdownExtension/serialize/state.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { MarkdownSerializerState as BaseMarkdownSerializerState } from 'prosemirror-markdown'
-import { trimInline } from '../util/markdown'
-
-export class MarkdownSerializerState extends BaseMarkdownSerializerState {
-  inTable = false
-
-  constructor(nodes, marks, options) {
-    super(nodes, marks, options ?? {})
-    this.inlines = []
-    this.lastWasParagraph = false
-  }
-
-  render(node, parent, index) {
-    if (node.type.name === 'paragraph' && node.content.size === 0) {
-      this.out += '\n'
-    } else {
-      if (this.lastWasParagraph && node.type.name === 'paragraph') {
-        this.out += '\n'
-      }
-      super.render(node, parent, index)
-      const top = this.inlines[this.inlines.length - 1]
-      if (top?.start && top?.end) {
-        const { delimiter, start, end } = this.normalizeInline(top)
-        this.out = trimInline(this.out, delimiter, start, end)
-        this.inlines.pop()
-      }
-    }
-    this.lastWasParagraph = node.type.name === 'paragraph'
-  }
-
-  renderContent(fragment) {
-    fragment.forEach((node, _, i) => {
-      this.render(node)
-    })
-  }
-
-  markString(mark, open, parent, index) {
-    const info = this.marks[mark.type.name]
-    if (info.expelEnclosingWhitespace) {
-      if (open) {
-        this.inlines.push({
-          start: this.out.length,
-          delimiter: info.open,
-        })
-      } else {
-        const top = this.inlines.pop()
-        this.inlines.push({
-          ...top,
-          end: this.out.length,
-        })
-      }
-    }
-    return super.markString(mark, open, parent, index)
-  }
-
-  normalizeInline(inline) {
-    let { start, end } = inline
-    while (this.out.charAt(start).match(/\s/)) {
-      start++
-    }
-    return {
-      ...inline,
-      start,
-    }
-  }
-
-  // Override the closeBlock method to control newline insertion
-  closeBlock(node) {
-    if (this.lastWasParagraph && node.type.name === 'paragraph') {
-      this.out += '\n'
-    }
-    this.lastWasParagraph = node.type.name === 'paragraph'
-  }
-}
diff --git a/src/components/Editor/MarkdownExtension/util/dom.js b/src/components/Editor/MarkdownExtension/util/dom.js
deleted file mode 100644
index 356d39c3..00000000
--- a/src/components/Editor/MarkdownExtension/util/dom.js
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-export function elementFromString(value) {
-    // add a wrapper to preserve leading and trailing whitespace
-    const wrappedValue = `<body>${value}</body>`
-
-    return new window.DOMParser().parseFromString(wrappedValue, 'text/html').body
-}
-
-export function escapeHTML(value) {
-    return value
-        ?.replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-
-export function extractElement(node) {
-    const parent = node.parentElement;
-    const prepend = parent.cloneNode();
-
-    while(parent.firstChild && parent.firstChild !== node) {
-        prepend.appendChild(parent.firstChild);
-    }
-
-    if(prepend.childNodes.length > 0) {
-        parent.parentElement.insertBefore(prepend, parent);
-    }
-    parent.parentElement.insertBefore(node, parent);
-    if(parent.childNodes.length === 0) {
-        parent.remove();
-    }
-}
-
-export function unwrapElement(node) {
-    const parent = node.parentNode;
-
-    while (node.firstChild) parent.insertBefore(node.firstChild, node);
-
-    parent.removeChild(node);
-}
diff --git a/src/components/Editor/MarkdownExtension/util/extensions.js b/src/components/Editor/MarkdownExtension/util/extensions.js
deleted file mode 100644
index d2acf24b..00000000
--- a/src/components/Editor/MarkdownExtension/util/extensions.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import markdownExtensions from "../extensions";
-
-
-export function getMarkdownSpec(extension) {
-    const markdownSpec = extension.storage?.markdown;
-    const defaultMarkdownSpec = markdownExtensions.find(e => e.name === extension.name)?.storage.markdown;
-
-    if(markdownSpec || defaultMarkdownSpec) {
-        return {
-            ...defaultMarkdownSpec,
-            ...markdownSpec,
-        };
-    }
-
-    return null;
-}
diff --git a/src/components/Editor/MarkdownExtension/util/markdown.js b/src/components/Editor/MarkdownExtension/util/markdown.js
deleted file mode 100644
index 47b36217..00000000
--- a/src/components/Editor/MarkdownExtension/util/markdown.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import markdownit from 'markdown-it';
-
-const md = markdownit();
-
-function scanDelims(text, pos) {
-    md.inline.State.prototype.scanDelims.call({ src: text, posMax: text.length })
-    const state = new (md.inline.State)(text, null, null, []);
-    return state.scanDelims(pos, true);
-}
-
-export function shiftDelim(text, delim, start, offset) {
-    let res = text.substring(0, start) + text.substring(start + delim.length);
-    res = res.substring(0, start + offset) + delim + res.substring(start + offset);
-    return res;
-}
-
-function trimStart(text, delim, from, to) {
-    let pos = from, res = text;
-    while(pos < to) {
-        if(scanDelims(res, pos).can_open) {
-            break;
-        }
-        res = shiftDelim(res, delim, pos, 1);
-        pos++;
-    }
-    return { text: res, from: pos, to }
-}
-
-function trimEnd(text, delim, from, to) {
-    let pos = to, res = text;
-    while(pos > from) {
-        if(scanDelims(res, pos).can_close) {
-            break;
-        }
-        res = shiftDelim(res, delim, pos, -1);
-        pos--;
-    }
-    return { text: res, from, to: pos }
-}
-
-export function trimInline(text, delim, from, to) {
-    let state = {
-        text,
-        from,
-        to,
-    }
-
-    state = trimStart(state.text, delim, state.from, state.to);
-    state = trimEnd(state.text, delim, state.from, state.to);
-
-    if(state.to - state.from < delim.length + 1) {
-        state.text = state.text.substring(0, state.from) + state.text.substring(state.to + delim.length);
-    }
-
-    return state.text;
-}
diff --git a/src/components/Editor/MarkdownExtension/util/prosemirror.js b/src/components/Editor/MarkdownExtension/util/prosemirror.js
deleted file mode 100644
index 9416bdd4..00000000
--- a/src/components/Editor/MarkdownExtension/util/prosemirror.js
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-export function childNodes(node) {
-    return node?.content?.content ?? [];
-}
diff --git a/src/components/Editor/utils.ts b/src/components/Editor/utils.ts
index 595b8a35..f2797c44 100644
--- a/src/components/Editor/utils.ts
+++ b/src/components/Editor/utils.ts
@@ -1,22 +1,14 @@
 import { Editor } from '@tiptap/core'
 
-export async function getMarkdown(editor: Editor) {
+function getMarkdown(editor: Editor) {
+  // Fetch the current markdown content from the editor
   const originalMarkdown = editor.storage.markdown.getMarkdown()
-  // console.log('CALLING THIS')
-  // console.log('editor.storage.markdown', editor.storage.markdown)
-  // const originalMarkdown = editor.storage.markdown.serializer.serialize(editor.state.doc)
-  // const html = editor.getHTML()
+  // Replace the escaped square brackets with unescaped ones
+  const modifiedMarkdown = originalMarkdown
+    .replace(/\\\[/g, '[') // Replaces \[ with [
+    .replace(/\\\]/g, ']') // Replaces \] wi ]
 
-  // console.time('htmlToMd')
-  // const startTime = performance.now()
-
-  // const markdown = await htmlToMd(html)
-
-  // const endTime = performance.now()
-  // console.timeEnd('htmlToMd')
-  // console.log(`htmlToMd operation took ${endTime - startTime} milliseconds`)
-
-  return originalMarkdown
+  return modifiedMarkdown
 }
 
 export default getMarkdown
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index fdfa6563..d98e34b6 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -15,6 +15,7 @@ import TextStyle from '@tiptap/extension-text-style'
 import { Editor, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { toast } from 'react-toastify'
+import { Markdown } from 'tiptap-markdown'
 import { useDebounce } from 'use-debounce'
 import useFileInfoTreeHook from '@/components/Sidebars/FileSideBar/hooks/use-file-info-tree'
 import { getInvalidCharacterInFilePath } from '@/utils/strings'
@@ -27,7 +28,6 @@ import '@/styles/tiptap.scss'
 import SearchAndReplace from '@/components/Editor/Search/SearchAndReplaceExtension'
 import getMarkdown from '@/components/Editor/utils'
 import welcomeNote from '@/components/File/utils'
-import { Markdown } from '@/components/Editor/MarkdownExtension'
 
 type FileContextType = {
   currentlyOpenFilePath: string | null
@@ -122,7 +122,6 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       setNeedToIndexEditorContent(false)
     }
     const fileContent = (await window.fileSystem.readFile(filePath)) ?? ''
-    // const htmlContent = await mdToHtml(fileContent)
     editor?.commands.setContent(fileContent)
     setCurrentlyOpenFilePath(filePath)
     setCurrentlyChangingFilePath(false)
@@ -168,7 +167,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         tightListClass: 'tight',
         bulletListMarker: '-',
         linkify: true,
-        breaks: false,
+        breaks: true,
         transformPastedText: true,
         transformCopiedText: false,
       }),
@@ -210,7 +209,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   const writeEditorContentToDisk = async (_editor: Editor | null, filePath: string | null) => {
     if (filePath !== null && needToWriteEditorContentToDisk && _editor) {
-      const markdownContent = await getMarkdown(_editor)
+      const markdownContent = getMarkdown(_editor)
       if (markdownContent !== null) {
         await window.fileSystem.writeFile({
           filePath,
@@ -252,7 +251,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   useEffect(() => {
     const handleWindowClose = async () => {
       if (currentlyOpenFilePath !== null && editor && editor.getHTML() !== null) {
-        const markdown = await getMarkdown(editor)
+        const markdown = getMarkdown(editor)
         await window.fileSystem.writeFile({
           filePath: currentlyOpenFilePath,
           content: markdown,
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
deleted file mode 100644
index 15da16e8..00000000
--- a/src/utils/markdown.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-// import { unified } from 'unified'
-// import remarkParse from 'remark-parse'
-// import remarkRehype from 'remark-rehype'
-// import rehypeStringify from 'rehype-stringify'
-// import rehypeParse from 'rehype-parse'
-// import rehypeRemark from 'rehype-remark'
-// import remarkStringify from 'remark-stringify'
-
-// import { u } from 'unist-builder'
-// import { visit } from 'unist-util-visit'
-
-// // Custom plugin to convert placeholders to empty paragraph nodes
-// function remarkNewlinesToEmptyParagraphs(EOL_MARKER: string) {
-//   return () => (tree) => {
-//     visit(tree, 'text', (node, index, parent) => {
-//       const { value } = node
-//       if (value.includes(EOL_MARKER)) {
-//         const parts = value.split(EOL_MARKER)
-//         const newNodes = []
-
-//         parts.forEach((part, i) => {
-//           if (part) {
-//             newNodes.push(u('text', part))
-//           }
-//           if (i < parts.length - 1) {
-//             // Insert empty paragraph at the parent level
-//             newNodes.push(u('paragraph', []))
-//           }
-//         })
-
-//         // Replace the original text node with new nodes
-//         parent.children.splice(index, 1, ...newNodes)
-//         // Skip over the newly inserted nodes
-//         return [visit.SKIP, index + newNodes.length]
-//       }
-//     })
-//   }
-// }
-
-// export const mdToHtml = async (markdown: string): Promise<string> => {
-//   const EOL_MARKER = '__EOL__'
-
-//   // Replace sequences of two or more newlines with the unique marker
-//   const preprocessedMarkdown = markdown.replace(/\n{2,}/g, EOL_MARKER)
-
-//   const result = await unified()
-//     .use(remarkParse)
-//     .use(() => (tree) => {
-//       // Assign parent references for traversal
-//       visit(tree, (node, index, parent) => {
-//         if (parent) {
-//           node.parent = parent
-//         }
-//       })
-//     })
-//     .use(remarkNewlinesToEmptyParagraphs(EOL_MARKER))
-//     .use(remarkRehype)
-//     .use(rehypeStringify)
-//     .process(preprocessedMarkdown)
-
-//   return String(result)
-// }
-
-// export const htmlToMd = async (html: string): Promise<string> => {
-//   console.log('html in: ', html)
-//   const result = await unified()
-//     .use(rehypeParse)
-//     .use(rehypeRemark, {
-//       handlers: {
-//         // Custom handler for <p> elements
-//         p: (state, node) => {
-//           if (!node.children || node.children.length === 0) {
-//             // Return a Markdown paragraph node with an empty text child
-//             return {
-//               type: 'paragraph',
-//               children: [{ type: 'text', value: '' }],
-//             }
-//           }
-//           // Use the default handler for non-empty <p> elements
-//           return {
-//             type: 'paragraph',
-//             children: state.all(node),
-//           }
-//         },
-//       },
-//     })
-//     .use(remarkStringify, {
-//       // Ensure that multiple blank lines are preserved
-//       // by preventing the collapsing of consecutive newlines
-//       join: [],
-//     })
-//     .process(html)
-
-//   console.log('result: ', String(result))
-//   return String(result)
-// }
-// // Markdown to HTML

From fc8eb6efd9e8226371c82cf18abc4c8244d5f5eb Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 00:17:19 +0100
Subject: [PATCH 12/41] bring back lint

---
 .husky/pre-commit | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 20ba6e9f..4e419160 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,2 @@
 echo "\nRunning some lint checks on your (hopefully) beautiful code...\n"
+npm run lint:fix && npm run type-check
\ No newline at end of file

From bce034e3bae16820d96c152dc237836097acc45e Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 11:50:47 +0100
Subject: [PATCH 13/41] fix common editor bug

---
 src/components/Editor/EditorManager.tsx | 42 ++++++++++++++-----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/Editor/EditorManager.tsx b/src/components/Editor/EditorManager.tsx
index e88a7f86..3ef5a17a 100644
--- a/src/components/Editor/EditorManager.tsx
+++ b/src/components/Editor/EditorManager.tsx
@@ -11,7 +11,7 @@ const EditorManager: React.FC = () => {
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
   const [editorFlex, setEditorFlex] = useState(true)
   const [showPlaceholder, setShowPlaceholder] = useState(false)
-  const [placeholderPosition, setPlaceholderPosition] = useState({ top: 0, left: 0 })
+  const [writingAssistantTextPosition, setWritingAssistantTextPosition] = useState({ top: 0, left: 0 })
 
   const { editor, suggestionsState, flattenedFiles } = useFileContext()
 
@@ -46,23 +46,27 @@ const EditorManager: React.FC = () => {
     if (!editor) return
 
     const handleUpdate = () => {
-      const { state } = editor
-      const { from, to } = state.selection
-
-      const $from = state.doc.resolve(from)
-      const $to = state.doc.resolve(to)
-      const start = $from.before()
-      const end = $to.after()
-
-      const currentLineText = state.doc.textBetween(start, end, '\n', ' ').trim()
-
-      if (currentLineText === '') {
-        const { node } = editor.view.domAtPos(from)
-        const rect = (node as HTMLElement).getBoundingClientRect()
-        const editorRect = editor.view.dom.getBoundingClientRect()
-        setPlaceholderPosition({ top: rect.top - editorRect.top, left: rect.left - editorRect.left })
-        setShowPlaceholder(true)
-      } else {
+      try {
+        const { state } = editor
+        const { from, to } = state.selection
+
+        const $from = state.doc.resolve(from)
+        const $to = state.doc.resolve(to)
+        const start = $from.before()
+        const end = $to.after()
+
+        const currentLineText = state.doc.textBetween(start, end, '\n', ' ').trim()
+
+        if (currentLineText === '') {
+          const { node } = editor.view.domAtPos(from)
+          const rect = (node as HTMLElement).getBoundingClientRect()
+          const editorRect = editor.view.dom.getBoundingClientRect()
+          setWritingAssistantTextPosition({ top: rect.top - editorRect.top, left: rect.left - editorRect.left })
+          setShowPlaceholder(true)
+        } else {
+          setShowPlaceholder(false)
+        }
+      } catch (error) {
         setShowPlaceholder(false)
       }
     }
@@ -121,7 +125,7 @@ const EditorManager: React.FC = () => {
         {showPlaceholder && (
           <div
             className="pointer-events-none absolute text-gray-500"
-            style={{ top: placeholderPosition.top, left: placeholderPosition.left }}
+            style={{ top: writingAssistantTextPosition.top, left: writingAssistantTextPosition.left }}
           >
             Press &apos;space&apos; for AI writing assistant
           </div>

From 053ed6528578e0e574330855936398c2b0a780a9 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 12:03:15 +0100
Subject: [PATCH 14/41] add in agent name

---
 src/components/Chat/StartChat.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 94e1033a..d2763287 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -64,8 +64,8 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
             placeholder="What can Reor help you with today?"
             onChange={(e) => setUserTextFieldInput(e.target.value)}
           />
-          <div className="h-px w-[calc(100%-5%)] flex-col self-center bg-border md:flex-row" />
-          <div className="flex flex-col items-center justify-between px-4 py-2 md:flex-row">
+          <div className="h-px w-[calc(100%-2%)] flex-col self-center bg-border md:flex-row" />
+          <div className="flex flex-col items-center justify-between gap-2 px-4 py-2 md:flex-row md:gap-4">
             <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
               <Select value={selectedLLM} onValueChange={handleLLMChange}>
                 <SelectTrigger className="w-[180px] border border-solid border-border">
@@ -80,6 +80,11 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                 </SelectContent>
               </Select>
             </div>
+            <div className="flex items-center justify-center">
+              <span className="text-sm font-medium text-muted-foreground">
+                <span className="text-primary">{chatFilters.name}</span>
+              </span>
+            </div>
             <button
               className="m-1 flex cursor-pointer items-center justify-center rounded-md border-0 bg-primary p-2 text-primary-foreground hover:bg-accent hover:text-accent-foreground"
               onClick={sendMessageHandler}

From 963fcdeb397cbd24476a98b2931dcc6d5b08be55 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 12:15:18 +0100
Subject: [PATCH 15/41] minor styling

---
 src/components/Chat/StartChat.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index d2763287..4c0605e3 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -35,7 +35,6 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   const handleAgentSelection = (agent: AgentConfig) => {
     setChatFilters(agent)
-    setUserTextFieldInput(`Using the ${agent.name} agent. How can I help you?`)
   }
 
   const handleLLMChange = (value: string) => {
@@ -44,14 +43,14 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   return (
     <div className="relative flex w-full flex-col items-center">
-      <div className="relative flex size-full flex-col text-center lg:top-10 lg:max-w-2xl">
+      <div className="relative flex size-full flex-col text-center lg:top-10 lg:max-w-2xl ">
         <div className="flex size-full justify-center">
           <img src="icon.png" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
         </div>
         <h1 className="mb-10 text-[28px] text-foreground">
           Welcome to your AI-powered assistant! Start a conversation with your second brain!
         </h1>
-        <div className="flex flex-col rounded-md border-2 border-solid border-border bg-background focus-within:ring-1 focus-within:ring-ring">
+        <div className="flex flex-col rounded-md border-2 border-solid border-border bg-input focus-within:ring-1 focus-within:ring-ring">
           <textarea
             value={userTextFieldInput}
             onKeyDown={(e) => {
@@ -99,7 +98,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           {exampleAgents.map((agent) => (
             <Card
               key={agent.name}
-              className={`m-4 size-28 cursor-pointer border-2 ${
+              className={`m-4 size-28 cursor-pointer border-2 border-solid ${
                 chatFilters.name === agent.name ? 'border-primary text-primary' : 'border-border text-muted-foreground'
               } bg-card transition-all duration-200 ease-in-out hover:border-accent hover:text-accent-foreground`}
               onClick={() => handleAgentSelection(agent)}

From ca0330ab18b17a0848ec3b34770ef295014a55a8 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 12:37:48 +0100
Subject: [PATCH 16/41] rename

---
 package-lock.json                 |  33 +++++++++
 package.json                      |   3 +-
 src/components/Chat/StartChat.tsx | 109 ++++++++++++++++--------------
 3 files changed, 95 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9e5fae2..cb5f1230 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@sentry/electron": "^5.3.0",
         "@tailwindcss/typography": "^0.5.10",
@@ -4273,6 +4274,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.0.tgz",
+      "integrity": "sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
diff --git a/package.json b/package.json
index e59e6fc1..e535ed06 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@sentry/electron": "^5.3.0",
     "@tailwindcss/typography": "^0.5.10",
@@ -189,4 +190,4 @@
       "node"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 4c0605e3..06817a11 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -16,7 +16,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const [llmConfigs, setLLMConfigs] = useState<LLMConfig[]>([])
   const [selectedLLM, setSelectedLLM] = useState<string>(defaultModelName)
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
-  const [chatFilters, setChatFilters] = useState<AgentConfig>(exampleAgents[0])
+  const [agentConfig, setAgentConfig] = useState<AgentConfig>(exampleAgents[0])
 
   useEffect(() => {
     const fetchLLMModels = async () => {
@@ -30,11 +30,11 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   const sendMessageHandler = async () => {
     await window.llm.setDefaultLLM(selectedLLM)
-    handleNewChatMessage(userTextFieldInput, chatFilters)
+    handleNewChatMessage(userTextFieldInput, agentConfig)
   }
 
   const handleAgentSelection = (agent: AgentConfig) => {
-    setChatFilters(agent)
+    setAgentConfig(agent)
   }
 
   const handleLLMChange = (value: string) => {
@@ -43,63 +43,74 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   return (
     <div className="relative flex w-full flex-col items-center">
-      <div className="relative flex size-full flex-col text-center lg:top-10 lg:max-w-2xl ">
-        <div className="flex size-full justify-center">
+      <div className="relative flex w-full flex-col text-center lg:top-10 lg:max-w-2xl">
+        <div className="flex w-full justify-center">
           <img src="icon.png" style={{ width: '64px', height: '64px' }} alt="ReorImage" />
         </div>
         <h1 className="mb-10 text-[28px] text-foreground">
           Welcome to your AI-powered assistant! Start a conversation with your second brain!
         </h1>
-        <div className="flex flex-col rounded-md border-2 border-solid border-border bg-input focus-within:ring-1 focus-within:ring-ring">
-          <textarea
-            value={userTextFieldInput}
-            onKeyDown={(e) => {
-              if (!e.shiftKey && e.key === 'Enter') {
-                e.preventDefault()
-                sendMessageHandler()
-              }
-            }}
-            className="h-[100px] w-full resize-none rounded-t-md border-0 bg-transparent p-4 text-primary caret-foreground focus:outline-none"
-            placeholder="What can Reor help you with today?"
-            onChange={(e) => setUserTextFieldInput(e.target.value)}
-          />
-          <div className="h-px w-[calc(100%-2%)] flex-col self-center bg-border md:flex-row" />
-          <div className="flex flex-col items-center justify-between gap-2 px-4 py-2 md:flex-row md:gap-4">
-            <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
-              <Select value={selectedLLM} onValueChange={handleLLMChange}>
-                <SelectTrigger className="w-[180px] border border-solid border-border">
-                  <SelectValue placeholder="Select LLM" />
-                </SelectTrigger>
-                <SelectContent>
-                  {llmConfigs.map((llm) => (
-                    <SelectItem key={llm.modelName} value={llm.modelName}>
-                      {llm.modelName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-center">
-              <span className="text-sm font-medium text-muted-foreground">
-                <span className="text-primary">{chatFilters.name}</span>
-              </span>
+
+        {/* Text Input Field and Controls */}
+        <div className="flex flex-col">
+          <div className="flex flex-col rounded-md border-2 border-solid border-border bg-input focus-within:ring-1 focus-within:ring-ring">
+            <textarea
+              value={userTextFieldInput}
+              onKeyDown={(e) => {
+                if (!e.shiftKey && e.key === 'Enter') {
+                  e.preventDefault()
+                  sendMessageHandler()
+                }
+              }}
+              className="h-[100px] w-full resize-none rounded-t-md border-0 bg-transparent p-4 text-primary caret-foreground focus:outline-none"
+              placeholder="What can Reor help you with today?"
+              onChange={(e) => setUserTextFieldInput(e.target.value)}
+            />
+            <div className="h-px w-[calc(100%-2%)] self-center bg-border" />
+            <div className="flex flex-col items-center justify-between gap-2 px-4 py-2 md:flex-row md:gap-4">
+              <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
+                <Select value={selectedLLM} onValueChange={handleLLMChange}>
+                  <SelectTrigger className="w-[180px] border border-solid border-border">
+                    <SelectValue placeholder="Select LLM" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {llmConfigs.map((llm) => (
+                      <SelectItem key={llm.modelName} value={llm.modelName}>
+                        {llm.modelName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex items-center justify-center">
+                <span className="text-sm font-medium text-muted-foreground">
+                  <span className="text-primary">{agentConfig.name}</span>
+                </span>
+              </div>
+              <button
+                className="m-1 flex cursor-pointer items-center justify-center rounded-md bg-primary p-2 text-primary-foreground hover:bg-accent hover:text-accent-foreground"
+                onClick={sendMessageHandler}
+                type="button"
+                aria-label="Send message"
+              >
+                <PiPaperPlaneRight aria-hidden="true" />
+              </button>
             </div>
-            <button
-              className="m-1 flex cursor-pointer items-center justify-center rounded-md border-0 bg-primary p-2 text-primary-foreground hover:bg-accent hover:text-accent-foreground"
-              onClick={sendMessageHandler}
-              type="button"
-              aria-label="Send message"
-            >
-              <PiPaperPlaneRight aria-hidden="true" />
-            </button>
+          </div>
+          {/* New Settings Container */}
+          <div className="mx-auto mt-0 h-[80px] w-[85%] rounded border-t border-solid border-border bg-input px-4 py-2">
+            {/* Add your settings content here */}
+            hello
           </div>
         </div>
-        <div className="mt-4 size-full justify-center md:flex-row lg:flex">
+
+        {/* Agent Selector Cards */}
+        <div className="mt-4 w-full justify-center md:flex-row lg:flex">
           {exampleAgents.map((agent) => (
             <Card
               key={agent.name}
-              className={`m-4 size-28 cursor-pointer border-2 border-solid ${
-                chatFilters.name === agent.name ? 'border-primary text-primary' : 'border-border text-muted-foreground'
+              className={`m-4 w-28 cursor-pointer border-2 border-solid ${
+                agentConfig.name === agent.name ? 'border-primary text-primary' : 'border-border text-muted-foreground'
               } bg-card transition-all duration-200 ease-in-out hover:border-accent hover:text-accent-foreground`}
               onClick={() => handleAgentSelection(agent)}
             >

From aae6c8c23f824f854f734da36d3e0e7b3b86a7fc Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 13:08:45 +0100
Subject: [PATCH 17/41] initial work on slider

---
 src/components/Chat/StartChat.tsx | 28 +++++++++++++++++++++++++---
 src/components/ui/slider.tsx      | 26 ++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/slider.tsx

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 06817a11..b4f58aa5 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
 import '../../styles/chat.css'
@@ -6,6 +6,7 @@ import { AgentConfig } from './types'
 import exampleAgents from './exampleAgents'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Card, CardDescription } from '../ui/card'
+import { Slider } from '../ui/slider'
 
 interface StartChatProps {
   defaultModelName: string
@@ -41,6 +42,18 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     setSelectedLLM(value)
   }
 
+  const inverseLogScale = (value: number) => Math.round(Math.log(value + 1) * 25)
+
+  const handleSliderChange = useCallback(
+    (value: number[]) => {
+      const logScale = (_value: number) => Math.round(Math.exp(_value / 25) - 1)
+
+      const scaledValue = logScale(value[0])
+      setAgentConfig({ ...agentConfig, limit: scaledValue })
+    },
+    [agentConfig],
+  )
+
   return (
     <div className="relative flex w-full flex-col items-center">
       <div className="relative flex w-full flex-col text-center lg:top-10 lg:max-w-2xl">
@@ -98,9 +111,18 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
             </div>
           </div>
           {/* New Settings Container */}
-          <div className="mx-auto mt-0 h-[80px] w-[85%] rounded border-t border-solid border-border bg-input px-4 py-2">
+          <div className="mx-auto mt-0 h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
             {/* Add your settings content here */}
-            hello
+            <div className="flex w-1/3 items-center space-x-2">
+              <Slider
+                defaultValue={[inverseLogScale(33)]}
+                min={0}
+                max={100}
+                step={1}
+                onValueChange={handleSliderChange}
+              />
+              <span>{agentConfig.limit}</span>
+            </div>
           </div>
         </div>
 
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 00000000..07c767fa
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

From 41a48547bcf693d006881a19ca726f63fa8fd5c6 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 13:46:34 +0100
Subject: [PATCH 18/41] initial date picker

---
 package-lock.json                  |  44 ++++++++++-
 package.json                       |   3 +-
 src/components/Chat/DatePicker.tsx | 121 +++++++++++++++++++++++++++++
 src/components/Chat/StartChat.tsx  |  27 ++++---
 src/components/ui/calendar.tsx     |  64 +++++++++++++++
 src/components/ui/popover.tsx      |  33 ++++++++
 6 files changed, 276 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Chat/DatePicker.tsx
 create mode 100644 src/components/ui/calendar.tsx
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package-lock.json b/package-lock.json
index cb5f1230..259c398d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
@@ -54,7 +55,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cm6-theme-basic-dark": "^0.2.0",
-        "date-fns": "^3.3.1",
+        "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "electron-store": "^8.1.0",
         "electron-updater": "^6.1.1",
@@ -4121,6 +4122,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
+      "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -7913,8 +7950,9 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "3.3.1",
-      "license": "MIT",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
diff --git a/package.json b/package.json
index e535ed06..471d43ce 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
@@ -73,7 +74,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cm6-theme-basic-dark": "^0.2.0",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.1",
diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
new file mode 100644
index 00000000..f9e1c7ef
--- /dev/null
+++ b/src/components/Chat/DatePicker.tsx
@@ -0,0 +1,121 @@
+import React, { useState, useCallback } from 'react'
+import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
+import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+interface DateRange {
+  from: Date
+  to: Date
+}
+
+const quickSelectOptions = [
+  { label: 'Last hour', value: 'last-hour' },
+  { label: 'Last 24 hours', value: 'last-day' },
+  { label: 'Last 7 days', value: 'last-week' },
+  { label: 'Last 30 days', value: 'last-month' },
+  { label: 'Custom', value: 'custom' },
+]
+
+const DateRangePicker = () => {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: subDays(new Date(), 7),
+    to: new Date(),
+  })
+  const [activeOption, setActiveOption] = useState('last-week')
+
+  const updateDateRange = useCallback((newRange: DateRange, option: string) => {
+    setDateRange(newRange)
+    setActiveOption(option)
+    // You can add your logic here to use the new date range
+    console.log('New date range:', newRange)
+  }, [])
+
+  const quickSelectRange = useCallback(
+    (value: string) => {
+      const now = new Date()
+      let from: Date
+      switch (value) {
+        case 'last-hour':
+          from = subHours(now, 1)
+          break
+        case 'last-day':
+          from = subDays(now, 1)
+          break
+        case 'last-week':
+          from = subWeeks(now, 1)
+          break
+        case 'last-month':
+          from = subMonths(now, 1)
+          break
+        default:
+          return
+      }
+      updateDateRange({ from, to: now }, value)
+    },
+    [updateDateRange],
+  )
+
+  const formatDateRange = (range: DateRange) => {
+    const { from, to } = range
+    if (activeOption === 'last-hour') {
+      return `${format(from, 'HH:mm')} - ${format(to, 'HH:mm')}`
+    }
+    return `${format(from, 'LLL dd, y')} - ${format(to, 'LLL dd, y')}`
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {quickSelectOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={activeOption === option.value ? 'default' : 'outline'}
+            onClick={() => (option.value === 'custom' ? setActiveOption('custom') : quickSelectRange(option.value))}
+            className="grow sm:grow-0"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+      <Popover>
+        HELLO CUNT
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={`w-full justify-start text-left font-normal ${
+              activeOption !== 'custom' ? 'pointer-events-none opacity-50' : ''
+            }`}
+          >
+            <CalendarIcon className="mr-2 size-4" />
+            {dateRange.from ? formatDateRange(dateRange) : <span>Pick a date range</span>}
+            <ChevronDownIcon className="ml-auto size-4 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col sm:flex-row">
+            <div className="border-b p-4 sm:border-b-0 sm:border-r">
+              <Calendar
+                mode="single"
+                selected={dateRange.from}
+                onSelect={(date) => date && updateDateRange({ ...dateRange, from: date }, 'custom')}
+                initialFocus
+              />
+            </div>
+            <div className="p-4">
+              <Calendar
+                mode="single"
+                selected={dateRange.to}
+                onSelect={(date) => date && updateDateRange({ ...dateRange, to: date }, 'custom')}
+                initialFocus
+              />
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export default DateRangePicker
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index b4f58aa5..6079ac44 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -7,6 +7,7 @@ import exampleAgents from './exampleAgents'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Card, CardDescription } from '../ui/card'
 import { Slider } from '../ui/slider'
+import DateRangePicker from './DatePicker'
 
 interface StartChatProps {
   defaultModelName: string
@@ -110,18 +111,20 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               </button>
             </div>
           </div>
-          {/* New Settings Container */}
-          <div className="mx-auto mt-0 h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
-            {/* Add your settings content here */}
-            <div className="flex w-1/3 items-center space-x-2">
-              <Slider
-                defaultValue={[inverseLogScale(33)]}
-                min={0}
-                max={100}
-                step={1}
-                onValueChange={handleSliderChange}
-              />
-              <span>{agentConfig.limit}</span>
+
+          <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
+            <div className="">
+              <div className="flex  items-center space-x-2">
+                <Slider
+                  defaultValue={[inverseLogScale(33)]}
+                  min={0}
+                  max={100}
+                  step={1}
+                  onValueChange={handleSliderChange}
+                />
+                <span>{agentConfig.limit}</span>
+              </div>
+              <DateRangePicker />
             </div>
           </div>
         </div>
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
new file mode 100644
index 00000000..fe5049ac
--- /dev/null
+++ b/src/components/ui/calendar.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-empty-pattern */
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { DayPicker } from 'react-day-picker'
+
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) => {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: cn(
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          props.mode === 'range'
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+            : '[&:has([aria-selected])]:rounded-md',
+        ),
+        day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
+        day_range_start: 'day-range-start',
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({}) => <ChevronLeftIcon className="size-4" />,
+        IconRight: ({}) => <ChevronRightIcon className="size-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar }
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 00000000..cf1d07a0
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

From 4cf0d47f163bd6d2ffcf10b24fd588fea454845e Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 13:53:12 +0100
Subject: [PATCH 19/41] fix date picker colors

---
 src/components/Chat/DatePicker.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index f9e1c7ef..8c99e0c0 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -4,6 +4,7 @@ import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 interface DateRange {
   from: Date
@@ -28,7 +29,6 @@ const DateRangePicker = () => {
   const updateDateRange = useCallback((newRange: DateRange, option: string) => {
     setDateRange(newRange)
     setActiveOption(option)
-    // You can add your logic here to use the new date range
     console.log('New date range:', newRange)
   }, [])
 
@@ -73,34 +73,40 @@ const DateRangePicker = () => {
             key={option.value}
             variant={activeOption === option.value ? 'default' : 'outline'}
             onClick={() => (option.value === 'custom' ? setActiveOption('custom') : quickSelectRange(option.value))}
-            className="grow sm:grow-0"
+            className={cn(
+              'grow sm:grow-0',
+              activeOption === option.value
+                ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                : 'bg-background text-foreground hover:bg-secondary',
+            )}
           >
             {option.label}
           </Button>
         ))}
       </div>
       <Popover>
-        HELLO CUNT
         <PopoverTrigger asChild>
           <Button
             variant="outline"
-            className={`w-full justify-start text-left font-normal ${
-              activeOption !== 'custom' ? 'pointer-events-none opacity-50' : ''
-            }`}
+            className={cn(
+              'w-full justify-start text-left font-normal bg-background text-foreground hover:bg-secondary',
+              activeOption !== 'custom' && 'pointer-events-none opacity-50',
+            )}
           >
             <CalendarIcon className="mr-2 size-4" />
             {dateRange.from ? formatDateRange(dateRange) : <span>Pick a date range</span>}
             <ChevronDownIcon className="ml-auto size-4 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent className="w-auto bg-background p-0" align="start">
           <div className="flex flex-col sm:flex-row">
-            <div className="border-b p-4 sm:border-b-0 sm:border-r">
+            <div className="border-b border-border p-4 sm:border-b-0 sm:border-r">
               <Calendar
                 mode="single"
                 selected={dateRange.from}
                 onSelect={(date) => date && updateDateRange({ ...dateRange, from: date }, 'custom')}
                 initialFocus
+                className="bg-background text-foreground"
               />
             </div>
             <div className="p-4">
@@ -109,6 +115,7 @@ const DateRangePicker = () => {
                 selected={dateRange.to}
                 onSelect={(date) => date && updateDateRange({ ...dateRange, to: date }, 'custom')}
                 initialFocus
+                className="bg-background text-foreground"
               />
             </div>
           </div>

From c2f6071d5a320378156f8fba5ce36d10636a44a5 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 14:50:49 +0100
Subject: [PATCH 20/41] initial work to integrate date picker

---
 src/components/Chat/DatePicker.tsx | 67 ++++++++++++++++++------------
 src/components/Chat/StartChat.tsx  |  8 +++-
 2 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 8c99e0c0..63823391 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
 import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
@@ -6,9 +6,10 @@ import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { cn } from '@/lib/utils'
 
-interface DateRange {
+interface DateRangePickerProps {
   from: Date
   to: Date
+  onDateChange: (from: Date, to: Date) => void
 }
 
 const quickSelectOptions = [
@@ -19,46 +20,60 @@ const quickSelectOptions = [
   { label: 'Custom', value: 'custom' },
 ]
 
-const DateRangePicker = () => {
-  const [dateRange, setDateRange] = useState<DateRange>({
-    from: subDays(new Date(), 7),
-    to: new Date(),
-  })
-  const [activeOption, setActiveOption] = useState('last-week')
+const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChange }) => {
+  const [activeOption, setActiveOption] = useState('custom')
 
-  const updateDateRange = useCallback((newRange: DateRange, option: string) => {
-    setDateRange(newRange)
-    setActiveOption(option)
-    console.log('New date range:', newRange)
-  }, [])
+  useEffect(() => {
+    // Determine the active option based on the initial from and to props
+    const now = new Date()
+    if (from.getTime() === subHours(now, 1).getTime()) {
+      setActiveOption('last-hour')
+    } else if (from.getTime() === subDays(now, 1).getTime()) {
+      setActiveOption('last-day')
+    } else if (from.getTime() === subWeeks(now, 1).getTime()) {
+      setActiveOption('last-week')
+    } else if (from.getTime() === subMonths(now, 1).getTime()) {
+      setActiveOption('last-month')
+    } else {
+      setActiveOption('custom')
+    }
+  }, [from, to])
+
+  const updateDateRange = useCallback(
+    (newFrom: Date, newTo: Date, option: string) => {
+      onDateChange(newFrom, newTo)
+      setActiveOption(option)
+      console.log('New date range:', { from: newFrom, to: newTo })
+    },
+    [onDateChange],
+  )
 
   const quickSelectRange = useCallback(
     (value: string) => {
       const now = new Date()
-      let from: Date
+      let newFrom: Date
       switch (value) {
         case 'last-hour':
-          from = subHours(now, 1)
+          newFrom = subHours(now, 1)
           break
         case 'last-day':
-          from = subDays(now, 1)
+          newFrom = subDays(now, 1)
           break
         case 'last-week':
-          from = subWeeks(now, 1)
+          newFrom = subWeeks(now, 1)
           break
         case 'last-month':
-          from = subMonths(now, 1)
+          newFrom = subMonths(now, 1)
           break
         default:
           return
       }
-      updateDateRange({ from, to: now }, value)
+      updateDateRange(newFrom, now, value)
     },
     [updateDateRange],
   )
 
-  const formatDateRange = (range: DateRange) => {
-    const { from, to } = range
+  const formatDateRange = () => {
     if (activeOption === 'last-hour') {
       return `${format(from, 'HH:mm')} - ${format(to, 'HH:mm')}`
     }
@@ -94,7 +109,7 @@ const DateRangePicker = () => {
             )}
           >
             <CalendarIcon className="mr-2 size-4" />
-            {dateRange.from ? formatDateRange(dateRange) : <span>Pick a date range</span>}
+            {from ? formatDateRange() : <span>Pick a date range</span>}
             <ChevronDownIcon className="ml-auto size-4 opacity-50" />
           </Button>
         </PopoverTrigger>
@@ -103,8 +118,8 @@ const DateRangePicker = () => {
             <div className="border-b border-border p-4 sm:border-b-0 sm:border-r">
               <Calendar
                 mode="single"
-                selected={dateRange.from}
-                onSelect={(date) => date && updateDateRange({ ...dateRange, from: date }, 'custom')}
+                selected={from}
+                onSelect={(date) => date && updateDateRange(date, to, 'custom')}
                 initialFocus
                 className="bg-background text-foreground"
               />
@@ -112,8 +127,8 @@ const DateRangePicker = () => {
             <div className="p-4">
               <Calendar
                 mode="single"
-                selected={dateRange.to}
-                onSelect={(date) => date && updateDateRange({ ...dateRange, to: date }, 'custom')}
+                selected={to}
+                onSelect={(date) => date && updateDateRange(from, date, 'custom')}
                 initialFocus
                 className="bg-background text-foreground"
               />
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 6079ac44..6e661f7f 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -124,7 +124,13 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                 />
                 <span>{agentConfig.limit}</span>
               </div>
-              <DateRangePicker />
+              <DateRangePicker
+                from={agentConfig.minDate ?? new Date()}
+                to={agentConfig.maxDate ?? new Date()}
+                onDateChange={(from, to) => {
+                  setAgentConfig({ ...agentConfig, minDate: from, maxDate: to })
+                }}
+              />
             </div>
           </div>
         </div>

From 1a0ee5f26eb855bf29687454cc0a81753423e695 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 17:46:11 +0100
Subject: [PATCH 21/41] tool selection

---
 package-lock.json                    | 397 +++++++++++++++++++++++++++
 package.json                         |   2 +
 src/components/Chat/StartChat.tsx    |  21 +-
 src/components/Chat/ToolSelector.tsx |  65 +++++
 src/components/Chat/tools.ts         |   2 +
 src/components/ui/badge.tsx          |  30 ++
 src/components/ui/command.tsx        | 135 +++++++++
 src/components/ui/dialog.tsx         |  97 +++++++
 8 files changed, 745 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Chat/ToolSelector.tsx
 create mode 100644 src/components/ui/badge.tsx
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx

diff --git a/package-lock.json b/package-lock.json
index 259c398d..eb024606 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@mui/joy": "^5.0.0-beta.23",
         "@mui/material": "^5.15.11",
         "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.1.1",
@@ -55,6 +56,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cm6-theme-basic-dark": "^0.2.0",
+        "cmdk": "^1.0.0",
         "date-fns": "^3.6.0",
         "dotenv": "^16.4.5",
         "electron-store": "^8.1.0",
@@ -3989,6 +3991,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
+      "integrity": "sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -7493,6 +7530,366 @@
         "@lezer/highlight": "^1.0.0"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "dev": true,
diff --git a/package.json b/package.json
index 471d43ce..4429f68c 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@mui/joy": "^5.0.0-beta.23",
     "@mui/material": "^5.15.11",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.1.1",
@@ -74,6 +75,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cm6-theme-basic-dark": "^0.2.0",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "dotenv": "^16.4.5",
     "electron-store": "^8.1.0",
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 6e661f7f..2a131c2c 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -2,12 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
 import '../../styles/chat.css'
-import { AgentConfig } from './types'
+import { AgentConfig, ToolDefinition } from './types'
 import exampleAgents from './exampleAgents'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Card, CardDescription } from '../ui/card'
 import { Slider } from '../ui/slider'
 import DateRangePicker from './DatePicker'
+import ToolSelector from './ToolSelector'
+import { allAvailableToolDefinitions } from './tools'
 
 interface StartChatProps {
   defaultModelName: string
@@ -19,6 +21,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const [selectedLLM, setSelectedLLM] = useState<string>(defaultModelName)
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [agentConfig, setAgentConfig] = useState<AgentConfig>(exampleAgents[0])
+  const [selectedTools, setSelectedTools] = useState<ToolDefinition[]>(agentConfig.toolDefinitions)
 
   useEffect(() => {
     const fetchLLMModels = async () => {
@@ -37,6 +40,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   const handleAgentSelection = (agent: AgentConfig) => {
     setAgentConfig(agent)
+    setSelectedTools(agent.toolDefinitions)
   }
 
   const handleLLMChange = (value: string) => {
@@ -48,13 +52,17 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const handleSliderChange = useCallback(
     (value: number[]) => {
       const logScale = (_value: number) => Math.round(Math.exp(_value / 25) - 1)
-
       const scaledValue = logScale(value[0])
       setAgentConfig({ ...agentConfig, limit: scaledValue })
     },
     [agentConfig],
   )
 
+  const handleToolsChange = (tools: ToolDefinition[]) => {
+    setSelectedTools(tools)
+    setAgentConfig({ ...agentConfig, toolDefinitions: tools })
+  }
+
   return (
     <div className="relative flex w-full flex-col items-center">
       <div className="relative flex w-full flex-col text-center lg:top-10 lg:max-w-2xl">
@@ -113,8 +121,13 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           </div>
 
           <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
-            <div className="">
-              <div className="flex  items-center space-x-2">
+            <div className="space-y-4">
+              <ToolSelector
+                allTools={allAvailableToolDefinitions}
+                selectedTools={selectedTools}
+                onToolsChange={handleToolsChange}
+              />
+              <div className="mb-2 flex items-center space-x-2">
                 <Slider
                   defaultValue={[inverseLogScale(33)]}
                   min={0}
diff --git a/src/components/Chat/ToolSelector.tsx b/src/components/Chat/ToolSelector.tsx
new file mode 100644
index 00000000..3177b28b
--- /dev/null
+++ b/src/components/Chat/ToolSelector.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React from 'react'
+import { ToolDefinition } from './types'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+
+interface ToolSelectorProps {
+  allTools: ToolDefinition[]
+  selectedTools: ToolDefinition[]
+  onToolsChange: (tools: ToolDefinition[]) => void
+}
+
+const ToolSelector: React.FC<ToolSelectorProps> = ({ allTools = [], selectedTools = [], onToolsChange }) => {
+  const handleToolChange = (value: string) => {
+    const tool = allTools.find((t) => t.name === value)
+    if (tool) {
+      const isSelected = selectedTools.some((t) => t.name === tool.name)
+      if (isSelected) {
+        onToolsChange(selectedTools.filter((t) => t.name !== tool.name))
+      } else {
+        onToolsChange([...selectedTools, tool])
+      }
+    }
+  }
+
+  const toggleTool = (tool: ToolDefinition) => {
+    const isSelected = selectedTools.some((t) => t.name === tool.name)
+    if (isSelected) {
+      onToolsChange(selectedTools.filter((t) => t.name !== tool.name))
+    } else {
+      onToolsChange([...selectedTools, tool])
+    }
+  }
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <label className="text-sm font-medium text-muted-foreground">Select Tools</label>
+      <Select onValueChange={handleToolChange}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Select a tool" />
+        </SelectTrigger>
+        <SelectContent>
+          {allTools.map((tool) => (
+            <SelectItem key={tool.name} value={tool.name}>
+              {tool.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="flex flex-wrap gap-2">
+        {selectedTools.map((tool) => (
+          <Badge key={tool.name} variant="secondary" className="cursor-pointer" onClick={() => toggleTool(tool)}>
+            {tool.name}
+            <span className="ml-1 text-xs">×</span>
+          </Badge>
+        ))}
+      </div>
+      <div className="text-sm text-muted-foreground">
+        {selectedTools.length} tool{selectedTools.length !== 1 ? 's' : ''} selected
+      </div>
+    </div>
+  )
+}
+
+export default ToolSelector
diff --git a/src/components/Chat/tools.ts b/src/components/Chat/tools.ts
index f2560668..63fa2a00 100644
--- a/src/components/Chat/tools.ts
+++ b/src/components/Chat/tools.ts
@@ -39,6 +39,8 @@ export const createNoteToolDefinition: ToolDefinition = {
   ],
 }
 
+export const allAvailableToolDefinitions: ToolDefinition[] = [searchToolDefinition, createNoteToolDefinition]
+
 type ToolFunction = (...args: any[]) => Promise<any>
 
 type ToolFunctionMap = {
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..86e9080b
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+const Badge = ({ className, variant, ...props }: BadgeProps) => {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 00000000..02636c85
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,135 @@
+/* eslint-disable react/no-unknown-property */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { Command as CommandPrimitive } from 'cmdk'
+
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />)
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..ffdec906
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

From b7f7ef0284ff874a906d0391b3c1db5a33812b28 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 20:51:43 +0100
Subject: [PATCH 22/41] initial prompt editor

---
 package-lock.json                    | 23 +++++++++
 package.json                         |  1 +
 src/components/Chat/PromptEditor.tsx | 77 ++++++++++++++++++++++++++++
 src/components/Chat/StartChat.tsx    | 18 +++++++
 src/components/ui/label.tsx          | 19 +++++++
 src/components/ui/textarea.tsx       | 22 ++++++++
 6 files changed, 160 insertions(+)
 create mode 100644 src/components/Chat/PromptEditor.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/package-lock.json b/package-lock.json
index eb024606..03ba9ce2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slider": "^1.2.0",
@@ -4159,6 +4160,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
diff --git a/package.json b/package.json
index 4429f68c..4e083950 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
diff --git a/src/components/Chat/PromptEditor.tsx b/src/components/Chat/PromptEditor.tsx
new file mode 100644
index 00000000..fbd0f550
--- /dev/null
+++ b/src/components/Chat/PromptEditor.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { PromptTemplate } from './types'
+import { DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+
+const PromptEditor: React.FC<{
+  promptTemplate: PromptTemplate
+  onSave: (newPromptTemplate: PromptTemplate) => void
+}> = ({ promptTemplate, onSave }) => {
+  const [editedPrompt, setEditedPrompt] = useState<PromptTemplate>(promptTemplate)
+
+  const handleSave = () => {
+    onSave(editedPrompt)
+  }
+
+  return (
+    <DialogContent className="bg-background text-foreground sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle className="text-foreground">Edit Prompt Template</DialogTitle>
+        <DialogDescription className="text-muted-foreground">
+          Customize the prompt template for your AI assistant. Click done when you&apos;re done.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="grid gap-4 py-4">
+        {editedPrompt.map((prompt, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <div key={index} className="grid gap-2">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor={`role-${index}`} className="text-right text-foreground">
+                Role
+              </Label>
+              <Select
+                value={prompt.role}
+                onValueChange={(value) =>
+                  setEditedPrompt(
+                    editedPrompt.map((p, i) => (i === index ? { ...p, role: value as 'system' | 'user' } : p)),
+                  )
+                }
+              >
+                <SelectTrigger className="col-span-3 border-input bg-background text-foreground">
+                  <SelectValue placeholder="Select role" />
+                </SelectTrigger>
+                <SelectContent className="border-input bg-background text-foreground">
+                  <SelectItem value="system">System</SelectItem>
+                  <SelectItem value="user">User</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor={`content-${index}`} className="text-right text-foreground">
+                Content
+              </Label>
+              <Textarea
+                id={`content-${index}`}
+                value={prompt.content}
+                onChange={(e) =>
+                  setEditedPrompt(editedPrompt.map((p, i) => (i === index ? { ...p, content: e.target.value } : p)))
+                }
+                className="col-span-3 border-input bg-background text-foreground"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+      <DialogFooter>
+        <Button type="submit" onClick={handleSave} className="bg-primary text-primary-foreground hover:bg-primary/90">
+          Done
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  )
+}
+
+export default PromptEditor
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 2a131c2c..fd3eee53 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -10,6 +10,9 @@ import { Slider } from '../ui/slider'
 import DateRangePicker from './DatePicker'
 import ToolSelector from './ToolSelector'
 import { allAvailableToolDefinitions } from './tools'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
+import PromptEditor from './PromptEditor'
 
 interface StartChatProps {
   defaultModelName: string
@@ -122,6 +125,21 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
           <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
             <div className="space-y-4">
+              {/* New Prompt Editor Dialog */}
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="outline">Edit Prompt</Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <PromptEditor
+                    promptTemplate={agentConfig.promptTemplate}
+                    onSave={(newPromptTemplate) => {
+                      setAgentConfig({ ...agentConfig, promptTemplate: newPromptTemplate })
+                    }}
+                  />
+                </DialogContent>
+              </Dialog>
+
               <ToolSelector
                 allTools={allAvailableToolDefinitions}
                 selectedTools={selectedTools}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 00000000..2bbcb2c0
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/prefer-default-export */
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70')
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..9d2e6996
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

From daaf36da956a2eabf7e5ecbab89dd05216f9c027 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sun, 22 Sep 2024 21:32:37 +0100
Subject: [PATCH 23/41] update properties

---
 .../Chat/AddContextFiltersModal.tsx           | 246 ------------------
 src/components/Chat/ChatMessages.tsx          |  14 +-
 src/components/Chat/StartChat.tsx             |  47 ++--
 src/components/Chat/exampleAgents.ts          |  19 +-
 src/components/Chat/index.tsx                 |  10 +-
 src/components/Chat/types.ts                  |   5 +-
 src/components/Chat/utils.ts                  |  25 +-
 7 files changed, 69 insertions(+), 297 deletions(-)
 delete mode 100644 src/components/Chat/AddContextFiltersModal.tsx

diff --git a/src/components/Chat/AddContextFiltersModal.tsx b/src/components/Chat/AddContextFiltersModal.tsx
deleted file mode 100644
index b2086c56..00000000
--- a/src/components/Chat/AddContextFiltersModal.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { useState, useEffect } from 'react'
-
-import { List, ListItem } from '@material-tailwind/react'
-import FolderIcon from '@mui/icons-material/Folder'
-import { ListItemIcon, ListItemText } from '@mui/material'
-import Slider from '@mui/material/Slider'
-import { sub } from 'date-fns'
-import { DayPicker } from 'react-day-picker'
-
-import 'react-day-picker/dist/style.css'
-import ReorModal from '../Common/Modal'
-import SearchBarWithFilesSuggestion from '../Common/SearchBarWithFilesSuggestion'
-import CustomSelect from '../Common/Select'
-import { SuggestionsState } from '../Editor/BacklinkSuggestionsDisplay'
-import { AgentConfig } from './types'
-
-interface Props {
-  isOpen: boolean
-  onClose: () => void
-  chatFilters: AgentConfig
-  setChatFilters: React.Dispatch<React.SetStateAction<AgentConfig>>
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const AddContextFiltersModal: React.FC<Props> = ({ isOpen, onClose, chatFilters, setChatFilters }) => {
-  const [internalFilesSelected, setInternalFilesSelected] = useState<string[]>(chatFilters?.files || [])
-  const [searchText, setSearchText] = useState<string>('')
-  const [suggestionsState, setSuggestionsState] = useState<SuggestionsState | null>(null)
-  const [numberOfChunksToFetch, setNumberOfChunksToFetch] = useState<number>(chatFilters.limit || 15)
-  const [minDate, setMinDate] = useState<Date | undefined>(chatFilters.minDate)
-  const [maxDate, setMaxDate] = useState<Date | undefined>(chatFilters.maxDate)
-  const [showAdvanced, setShowAdvanced] = useState<boolean>(false)
-  const [selectedDateRange, setSelectedDateRange] = useState<string>('Anytime')
-
-  const dateRangeOptions = [
-    { label: 'Anytime', value: 'anytime' },
-    { label: 'Past hour', value: 'lastHour' },
-    { label: 'Past 24 hours', value: 'lastDay' },
-    { label: 'Past week', value: 'lastWeek' },
-    { label: 'Past month', value: 'lastMonth' },
-    { label: 'Past year', value: 'lastYear' },
-  ]
-
-  useEffect(() => {
-    setChatFilters((currentFilters) => ({
-      ...currentFilters,
-      files: [...new Set([...currentFilters.files, ...internalFilesSelected])],
-      limit: numberOfChunksToFetch,
-      minDate,
-      maxDate,
-      passFullNoteIntoContext: true,
-    }))
-  }, [internalFilesSelected, numberOfChunksToFetch, minDate, maxDate, setChatFilters])
-
-  const handleNumberOfChunksChange = (event: Event, value: number | number[]) => {
-    const newValue = Array.isArray(value) ? value[0] : value
-    setNumberOfChunksToFetch(newValue)
-  }
-
-  const handleDateRangeChange = (value: string) => {
-    const now = new Date()
-    let newMinDate: Date | undefined
-    switch (value) {
-      case 'anytime':
-        newMinDate = undefined
-        break
-      case 'lastHour':
-        newMinDate = sub(now, { hours: 1 })
-        break
-      case 'lastDay':
-        newMinDate = sub(now, { days: 1 })
-        break
-      case 'lastWeek':
-        newMinDate = sub(now, { weeks: 1 })
-        break
-      case 'lastMonth':
-        newMinDate = sub(now, { months: 1 })
-        break
-      case 'lastYear':
-        newMinDate = sub(now, { years: 1 })
-        break
-      default:
-        newMinDate = undefined
-    }
-    setMinDate(newMinDate)
-    setMaxDate(value === 'anytime' ? undefined : now)
-    setSelectedDateRange(dateRangeOptions.find((option) => option.value === value)?.label || '')
-  }
-
-  const handleAdvancedToggle = () => {
-    setShowAdvanced(!showAdvanced)
-  }
-
-  // Define the marks to be closer together
-  const marks = Array.from({ length: 31 }, (_, i) => ({
-    value: i,
-    label: i % 5 === 0 ? i.toString() : '', // Show label every 5 steps
-  }))
-
-  useEffect(() => {}, [chatFilters])
-
-  return (
-    <ReorModal isOpen={isOpen} onClose={onClose}>
-      <div className="mb-6 ml-6 mt-2 h-full max-h-[80vh] w-[70vw] overflow-y-auto overflow-x-hidden p-4">
-        <h4 className="mb-4 text-center text-2xl text-white">
-          Choose specific context files or customise the RAG search
-        </h4>
-        <div className="flex flex-col md:flex-row">
-          {/* Left side: File selection */}
-          <div className="flex-1">
-            <h3 className="mb-2 text-lg text-white">Select files for context</h3>
-            <SearchBarWithFilesSuggestion
-              searchText={searchText}
-              setSearchText={setSearchText}
-              onSelectSuggestion={(file: string) => {
-                if (file && !internalFilesSelected.includes(file)) {
-                  setInternalFilesSelected([...internalFilesSelected, file])
-                }
-                setSuggestionsState(null)
-              }}
-              suggestionsState={suggestionsState}
-              setSuggestionsState={setSuggestionsState}
-            />
-            <div className="mt-2 max-h-[300px] w-full overflow-y-auto text-white">
-              <List placeholder="">
-                {internalFilesSelected.map((filePath) => (
-                  <ListItem key={filePath} placeholder="">
-                    <ListItemIcon>
-                      <FolderIcon color="primary" />
-                    </ListItemIcon>
-                    <ListItemText primary={filePath} />
-                  </ListItem>
-                ))}
-              </List>
-            </div>
-          </div>
-
-          {/* Vertical divider */}
-          <div className="mx-4 flex flex-col items-center justify-center">
-            {/* Horizontal separator for larger screens */}
-            <div className="flex w-full items-center md:hidden">
-              <div className="h-px grow bg-gray-600" />
-              <div className="mx-2 flex items-center justify-center rounded-full bg-gray-800 text-sm font-bold text-white">
-                Or
-              </div>
-              <div className="h-px grow bg-gray-600" />
-            </div>
-
-            {/* Vertical separator for smaller screens */}
-            <div className="hidden h-full flex-col items-center md:flex">
-              <div className="w-px grow bg-gray-600" />
-              <div className="my-2 text-sm font-bold text-white">Or</div>
-              <div className="w-px grow bg-gray-600" />
-            </div>
-          </div>
-
-          {/* Right side: Context settings */}
-          <div className="flex-1">
-            {/* ${
-              internalFilesSelected.length > 0
-                ? "opacity-30	 pointer-events-none"
-                : ""
-            } */}
-            <h3 className="mb-2 text-lg text-white">Context settings</h3>
-            <div className="mb-4 text-white">
-              <p>Number of notes to add to context:</p>
-              <div className="mt-2 w-full rounded bg-neutral-800 p-4 pb-2">
-                <Slider
-                  aria-label="Number of Notes"
-                  value={numberOfChunksToFetch}
-                  valueLabelDisplay="on"
-                  step={1}
-                  marks={marks}
-                  min={0}
-                  max={30}
-                  onChange={handleNumberOfChunksChange}
-                  sx={{
-                    '& .MuiSlider-thumb': {
-                      '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
-                        boxShadow: 'none',
-                      },
-                      '&::after': {
-                        content: 'none',
-                      },
-                    },
-                    '& .MuiSlider-valueLabel': {
-                      fontSize: '0.75rem',
-                      padding: '3px 6px',
-                      lineHeight: '1.2em',
-                    },
-                    '& .MuiSlider-markLabel': {
-                      color: '#FFFFFF',
-                    },
-                    '& .MuiSlider-mark': {
-                      color: '#FFFFFF',
-                    },
-                  }}
-                />
-              </div>
-              <div className="mt-2 text-center">{numberOfChunksToFetch}</div>
-            </div>
-            <div className="mb-4 text-white">
-              <p>Filter context notes by last modified date:</p>
-              <div className="mt-2 w-full rounded pb-1">
-                <CustomSelect
-                  options={dateRangeOptions}
-                  selectedValue={selectedDateRange}
-                  onChange={handleDateRangeChange}
-                />
-              </div>
-            </div>
-            <div>
-              <div className="mb-2 cursor-pointer text-xs text-gray-500 underline" onClick={handleAdvancedToggle}>
-                {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
-              </div>
-              {showAdvanced && (
-                <div className="mt-2 flex flex-col items-center space-x-4">
-                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
-                    <p className="mb-1">Min Date:</p>
-                    <DayPicker
-                      selected={minDate}
-                      onSelect={(date) => setMinDate(date || undefined)}
-                      mode="single"
-                      className="my-day-picker size-full"
-                    />
-                  </div>
-                  <div className="flex h-[400px] w-[300px] flex-col items-center overflow-hidden text-white">
-                    <p className="mb-1">Max Date:</p>
-                    <DayPicker
-                      selected={maxDate}
-                      onSelect={(date) => setMaxDate(date || undefined)}
-                      mode="single"
-                      className="my-day-picker w-full"
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </ReorModal>
-  )
-}
-
-export default AddContextFiltersModal
diff --git a/src/components/Chat/ChatMessages.tsx b/src/components/Chat/ChatMessages.tsx
index 894cf62a..19d9039e 100644
--- a/src/components/Chat/ChatMessages.tsx
+++ b/src/components/Chat/ChatMessages.tsx
@@ -8,13 +8,6 @@ import AssistantMessage from './MessageComponents/AssistantMessage'
 import SystemMessage from './MessageComponents/SystemMessage'
 import InChatContextComponent from './MessageComponents/InChatContext'
 
-interface ChatMessagesProps {
-  currentChat: Chat
-  setCurrentChat: React.Dispatch<React.SetStateAction<Chat | undefined>>
-  loadingState: LoadingState
-  handleNewChatMessage: (userTextFieldInput?: string, chatFilters?: AgentConfig) => void
-}
-
 interface MessageProps {
   message: ReorChatMessage
   index: number
@@ -40,6 +33,13 @@ const Message: React.FC<MessageProps> = ({ message, index, currentChat, setCurre
   )
 }
 
+interface ChatMessagesProps {
+  currentChat: Chat
+  setCurrentChat: React.Dispatch<React.SetStateAction<Chat | undefined>>
+  loadingState: LoadingState
+  handleNewChatMessage: (userTextFieldInput?: string, agentConfig?: AgentConfig) => void
+}
+
 const ChatMessages: React.FC<ChatMessagesProps> = ({
   currentChat,
   setCurrentChat,
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index fd3eee53..802673d8 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -52,18 +52,33 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
   const inverseLogScale = (value: number) => Math.round(Math.log(value + 1) * 25)
 
-  const handleSliderChange = useCallback(
-    (value: number[]) => {
-      const logScale = (_value: number) => Math.round(Math.exp(_value / 25) - 1)
-      const scaledValue = logScale(value[0])
-      setAgentConfig({ ...agentConfig, limit: scaledValue })
-    },
-    [agentConfig],
-  )
+  const handleSliderChange = useCallback((value: number[]) => {
+    const logScale = (_value: number) => Math.round(Math.exp(_value / 25) - 1)
+    const scaledValue = logScale(value[0])
+    setAgentConfig((prevConfig) => ({
+      ...prevConfig,
+      dbSearchFilters: {
+        ...prevConfig.dbSearchFilters,
+        limit: scaledValue,
+      },
+    }))
+  }, [])
 
   const handleToolsChange = (tools: ToolDefinition[]) => {
     setSelectedTools(tools)
-    setAgentConfig({ ...agentConfig, toolDefinitions: tools })
+    setAgentConfig((prevConfig) => ({ ...prevConfig, toolDefinitions: tools }))
+  }
+
+  const handleDateChange = (from: Date | undefined, to: Date | undefined) => {
+    setAgentConfig((prevConfig) => ({
+      ...prevConfig,
+      dbSearchFilters: {
+        ...prevConfig.dbSearchFilters,
+        limit: prevConfig.dbSearchFilters?.limit ?? 15,
+        minDate: from,
+        maxDate: to,
+      },
+    }))
   }
 
   return (
@@ -134,7 +149,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                   <PromptEditor
                     promptTemplate={agentConfig.promptTemplate}
                     onSave={(newPromptTemplate) => {
-                      setAgentConfig({ ...agentConfig, promptTemplate: newPromptTemplate })
+                      setAgentConfig((prevConfig) => ({ ...prevConfig, promptTemplate: newPromptTemplate }))
                     }}
                   />
                 </DialogContent>
@@ -147,20 +162,18 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               />
               <div className="mb-2 flex items-center space-x-2">
                 <Slider
-                  defaultValue={[inverseLogScale(33)]}
+                  defaultValue={[inverseLogScale(agentConfig.dbSearchFilters?.limit ?? 33)]}
                   min={0}
                   max={100}
                   step={1}
                   onValueChange={handleSliderChange}
                 />
-                <span>{agentConfig.limit}</span>
+                <span>{agentConfig.dbSearchFilters?.limit ?? 33}</span>
               </div>
               <DateRangePicker
-                from={agentConfig.minDate ?? new Date()}
-                to={agentConfig.maxDate ?? new Date()}
-                onDateChange={(from, to) => {
-                  setAgentConfig({ ...agentConfig, minDate: from, maxDate: to })
-                }}
+                from={agentConfig.dbSearchFilters?.minDate ?? new Date()}
+                to={agentConfig.dbSearchFilters?.maxDate ?? new Date()}
+                onDateChange={handleDateChange}
               />
             </div>
           </div>
diff --git a/src/components/Chat/exampleAgents.ts b/src/components/Chat/exampleAgents.ts
index 1d83e458..63137b51 100644
--- a/src/components/Chat/exampleAgents.ts
+++ b/src/components/Chat/exampleAgents.ts
@@ -51,27 +51,28 @@ When the user asks, you will create a note for them with all the relevant things
 const exampleAgents: AgentConfig[] = [
   {
     files: [],
-    limit: 15,
-    minDate: new Date(0),
-    maxDate: new Date(),
+    dbSearchFilters: {
+      limit: 15,
+      minDate: new Date(0),
+      maxDate: new Date(),
+    },
     name: 'Default',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
     promptTemplate: defaultAgentPromptTemplate,
   },
   {
     files: [],
-    limit: 15,
-    minDate: new Date(0),
-    maxDate: new Date(),
     name: 'Research Agent',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
     promptTemplate: researchAgentPromptTemplate,
   },
   {
     files: [],
-    limit: 15,
-    minDate: new Date(0),
-    maxDate: new Date(),
+    dbSearchFilters: {
+      limit: 15,
+      minDate: new Date(0),
+      maxDate: new Date(),
+    },
     name: 'Daily Note Agent',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
     promptTemplate: dailyNoteAgentPromptTemplate,
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index b4f2f329..904f8b22 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -50,7 +50,7 @@ const ChatComponent: React.FC = () => {
   }, [currentOpenChatID, saveChat])
 
   const handleNewChatMessage = useCallback(
-    async (chat: Chat | undefined, userTextFieldInput?: string, chatFilters?: AgentConfig) => {
+    async (chat: Chat | undefined, userTextFieldInput?: string, agentConfig?: AgentConfig) => {
       try {
         const defaultLLMName = await window.llm.getDefaultLLMName()
 
@@ -59,7 +59,7 @@ const ChatComponent: React.FC = () => {
         }
 
         let outputChat = userTextFieldInput?.trim()
-          ? await appendToOrCreateChat(chat, userTextFieldInput, chatFilters)
+          ? await appendToOrCreateChat(chat, userTextFieldInput, agentConfig)
           : chat
 
         if (!outputChat) {
@@ -105,7 +105,7 @@ const ChatComponent: React.FC = () => {
           setCurrentChat(outputChat)
           await saveChat(outputChat)
           if (allToolCallsHaveBeenExecuted) {
-            handleNewChatMessage(outputChat, undefined, chatFilters)
+            handleNewChatMessage(outputChat, undefined, agentConfig)
           }
         }
 
@@ -135,8 +135,8 @@ const ChatComponent: React.FC = () => {
         ) : (
           <StartChat
             defaultModelName={defaultModelName}
-            handleNewChatMessage={(userTextFieldInput?: string, chatFilters?: AgentConfig) =>
-              handleNewChatMessage(undefined, userTextFieldInput, chatFilters)
+            handleNewChatMessage={(userTextFieldInput?: string, agentConfig?: AgentConfig) =>
+              handleNewChatMessage(undefined, userTextFieldInput, agentConfig)
             }
           />
         )}
diff --git a/src/components/Chat/types.ts b/src/components/Chat/types.ts
index 782adb11..392d597b 100644
--- a/src/components/Chat/types.ts
+++ b/src/components/Chat/types.ts
@@ -47,8 +47,9 @@ export type PromptTemplate = {
   content: string
 }[]
 
-export type AgentConfig = DatabaseSearchFilters & {
+export type AgentConfig = {
   name: string
+  dbSearchFilters?: DatabaseSearchFilters
   files: string[]
   propertiesToIncludeInContext?: string[]
   toolDefinitions: ToolDefinition[]
@@ -57,7 +58,7 @@ export type AgentConfig = DatabaseSearchFilters & {
 
 export interface AnonymizedAgentConfig {
   name: string
-  numberOfChunksToFetch: number
+  numberOfChunksToFetch?: number
   filesLength: number
   minDate?: Date
   maxDate?: Date
diff --git a/src/components/Chat/utils.ts b/src/components/Chat/utils.ts
index c0cedc99..3858e7d3 100644
--- a/src/components/Chat/utils.ts
+++ b/src/components/Chat/utils.ts
@@ -162,13 +162,13 @@ export function anonymizeAgentConfigForPosthog(
   if (!agentConfig) {
     return undefined
   }
-  const { limit: numberOfChunksToFetch, files, minDate, maxDate } = agentConfig
+  const { dbSearchFilters, files } = agentConfig
   return {
     name: agentConfig.name,
-    numberOfChunksToFetch,
+    numberOfChunksToFetch: dbSearchFilters?.limit ?? 0,
     filesLength: files.length,
-    minDate,
-    maxDate,
+    minDate: dbSearchFilters?.minDate,
+    maxDate: dbSearchFilters?.maxDate,
     toolNames: agentConfig.toolDefinitions.map((tool) => tool.name),
   }
 }
@@ -206,8 +206,8 @@ const applyPromptTemplate = (
   }) as ReorChatMessage[]
 }
 
-export const doInitialRAG = async (query: string, chatFilters: AgentConfig): Promise<ReorChatMessage[]> => {
-  const { promptTemplate, files } = chatFilters
+export const doInitialRAG = async (query: string, agentConfig: AgentConfig): Promise<ReorChatMessage[]> => {
+  const { promptTemplate, files } = agentConfig
 
   const needsContext = promptTemplate.some((message) => message.content.includes('{CONTEXT}'))
 
@@ -218,7 +218,10 @@ export const doInitialRAG = async (query: string, chatFilters: AgentConfig): Pro
     if (files.length > 0) {
       results = await window.fileSystem.getFiles(files)
     } else {
-      results = await retreiveFromVectorDB(query, chatFilters)
+      if (!agentConfig.dbSearchFilters) {
+        throw new Error('DB search filters are required')
+      }
+      results = await retreiveFromVectorDB(query, agentConfig.dbSearchFilters)
     }
     contextString = generateStringOfContextItemsForPrompt(results)
   }
@@ -245,10 +248,10 @@ export const appendToOrCreateChat = async (
   let outputChat = currentChat
 
   if (!outputChat || !outputChat.id || outputChat.messages.length === 0) {
-    outputChat = await generateInitialChat(
-      userTextFieldInput ?? '',
-      agentConfig || { name: '', toolDefinitions: [], limit: 15, files: [], promptTemplate: [] },
-    ) // TODO: probably split into an initial chat function and an append to chat function
+    if (!agentConfig) {
+      throw new Error('Agent config is required')
+    }
+    outputChat = await generateInitialChat(userTextFieldInput ?? '', agentConfig)
     const anonymizedAgentConfig = anonymizeAgentConfigForPosthog(agentConfig)
     posthog.capture('chat_message_submitted', {
       chatId: outputChat?.id,

From 6d8e9097840e0f4019766c71bb5f28c81ef2791b Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Thu, 26 Sep 2024 20:52:10 +0100
Subject: [PATCH 24/41] cleanup before finalising

---
 package-lock.json                    | 29 +++++++++
 package.json                         |  1 +
 src/components/Chat/DatePicker.tsx   |  1 -
 src/components/Chat/StartChat.tsx    | 89 +++++++++++++++++++++-------
 src/components/Chat/exampleAgents.ts | 26 ++++++--
 src/components/Chat/utils.ts         |  5 +-
 src/components/ui/switch.tsx         | 30 ++++++++++
 7 files changed, 148 insertions(+), 33 deletions(-)
 create mode 100644 src/components/ui/switch.tsx

diff --git a/package-lock.json b/package-lock.json
index 03ba9ce2..39632a15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
         "@sentry/electron": "^5.3.0",
         "@tailwindcss/typography": "^0.5.10",
         "@tiptap/core": "^2.5.0",
@@ -4420,6 +4421,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
+      "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
diff --git a/package.json b/package.json
index 4e083950..c357b168 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@sentry/electron": "^5.3.0",
     "@tailwindcss/typography": "^0.5.10",
     "@tiptap/core": "^2.5.0",
diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 63823391..81d8a588 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -43,7 +43,6 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
     (newFrom: Date, newTo: Date, option: string) => {
       onDateChange(newFrom, newTo)
       setActiveOption(option)
-      console.log('New date range:', { from: newFrom, to: newTo })
     },
     [onDateChange],
   )
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 802673d8..61335762 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -13,6 +13,8 @@ import { allAvailableToolDefinitions } from './tools'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import PromptEditor from './PromptEditor'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
 
 interface StartChatProps {
   defaultModelName: string
@@ -57,10 +59,16 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     const scaledValue = logScale(value[0])
     setAgentConfig((prevConfig) => ({
       ...prevConfig,
-      dbSearchFilters: {
-        ...prevConfig.dbSearchFilters,
-        limit: scaledValue,
-      },
+      dbSearchFilters: prevConfig.dbSearchFilters
+        ? {
+            ...prevConfig.dbSearchFilters,
+            limit: scaledValue,
+          }
+        : {
+            limit: scaledValue,
+            minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
+            maxDate: new Date(),
+          },
     }))
   }, [])
 
@@ -72,12 +80,30 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const handleDateChange = (from: Date | undefined, to: Date | undefined) => {
     setAgentConfig((prevConfig) => ({
       ...prevConfig,
-      dbSearchFilters: {
-        ...prevConfig.dbSearchFilters,
-        limit: prevConfig.dbSearchFilters?.limit ?? 15,
-        minDate: from,
-        maxDate: to,
-      },
+      dbSearchFilters: prevConfig.dbSearchFilters
+        ? {
+            ...prevConfig.dbSearchFilters,
+            minDate: from,
+            maxDate: to,
+          }
+        : {
+            limit: 33,
+            minDate: from,
+            maxDate: to,
+          },
+    }))
+  }
+
+  const handleDbSearchToggle = (checked: boolean) => {
+    setAgentConfig((prevConfig) => ({
+      ...prevConfig,
+      dbSearchFilters: checked
+        ? {
+            limit: 33,
+            minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
+            maxDate: new Date(),
+          }
+        : undefined,
     }))
   }
 
@@ -160,21 +186,38 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                 selectedTools={selectedTools}
                 onToolsChange={handleToolsChange}
               />
-              <div className="mb-2 flex items-center space-x-2">
-                <Slider
-                  defaultValue={[inverseLogScale(agentConfig.dbSearchFilters?.limit ?? 33)]}
-                  min={0}
-                  max={100}
-                  step={1}
-                  onValueChange={handleSliderChange}
+
+              <div className="flex items-center space-x-2">
+                <Switch
+                  id="db-search-toggle"
+                  checked={!!agentConfig.dbSearchFilters}
+                  onCheckedChange={handleDbSearchToggle}
                 />
-                <span>{agentConfig.dbSearchFilters?.limit ?? 33}</span>
+                <Label htmlFor="db-search-toggle" className="text-sm text-muted-foreground">
+                  Include initial database search in context
+                </Label>
               </div>
-              <DateRangePicker
-                from={agentConfig.dbSearchFilters?.minDate ?? new Date()}
-                to={agentConfig.dbSearchFilters?.maxDate ?? new Date()}
-                onDateChange={handleDateChange}
-              />
+
+              {agentConfig.dbSearchFilters && (
+                <div className="space-y-4 rounded-md border border-border p-4">
+                  <h3 className="text-sm font-medium">Database Search Filters</h3>
+                  <div className="flex items-center space-x-2">
+                    <Slider
+                      defaultValue={[inverseLogScale(agentConfig.dbSearchFilters.limit)]}
+                      min={0}
+                      max={100}
+                      step={1}
+                      onValueChange={handleSliderChange}
+                    />
+                    <span className="text-sm">{agentConfig.dbSearchFilters.limit} results</span>
+                  </div>
+                  <DateRangePicker
+                    from={agentConfig.dbSearchFilters.minDate ?? new Date()}
+                    to={agentConfig.dbSearchFilters.maxDate ?? new Date()}
+                    onDateChange={handleDateChange}
+                  />
+                </div>
+              )}
             </div>
           </div>
         </div>
diff --git a/src/components/Chat/exampleAgents.ts b/src/components/Chat/exampleAgents.ts
index 63137b51..e7441cac 100644
--- a/src/components/Chat/exampleAgents.ts
+++ b/src/components/Chat/exampleAgents.ts
@@ -4,11 +4,11 @@ import { AgentConfig, PromptTemplate } from './types'
 const defaultAgentPromptTemplate: PromptTemplate = [
   {
     role: 'system',
-    content: `You are a helpful assistant helping a user organize and manage their personal knowledge and notes. 
-  You will answer the user's question and help them with their request. 
-  You can search the knowledge base by using the search tool and create new notes by using the create note tool.
-  
-  An initial query has been made and the context is already provided for you (so please do not call the search tool initially).`,
+    content: `You are a helpful assistant helping a user organize and manage their personal knowledge and notes. Here are some guidelines:
+- You will answer the user's question and help them with their request. 
+- You can search the knowledge base by using the search tool and create new notes by using the create note tool.
+- Make sure you respond in the same language as the user's query.
+- An initial query has been made and the context is already provided for you (so please do not call the search tool initially).`,
   },
   {
     role: 'user',
@@ -48,6 +48,16 @@ When the user asks, you will create a note for them with all the relevant things
   },
 ]
 
+const reasoningAgentPromptTemplate: PromptTemplate = [
+  {
+    role: 'system',
+    content: `You an advanced reasoning agent. You think logically and critically and help the user think through their thoughts.`,
+  },
+  {
+    role: 'user',
+    content: `{QUERY}`,
+  },
+]
 const exampleAgents: AgentConfig[] = [
   {
     files: [],
@@ -77,6 +87,12 @@ const exampleAgents: AgentConfig[] = [
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
     promptTemplate: dailyNoteAgentPromptTemplate,
   },
+  {
+    files: [],
+    name: 'Reasoning Agent',
+    toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
+    promptTemplate: reasoningAgentPromptTemplate,
+  },
 ]
 
 export default exampleAgents
diff --git a/src/components/Chat/utils.ts b/src/components/Chat/utils.ts
index 3858e7d3..59c8d8fd 100644
--- a/src/components/Chat/utils.ts
+++ b/src/components/Chat/utils.ts
@@ -217,10 +217,7 @@ export const doInitialRAG = async (query: string, agentConfig: AgentConfig): Pro
   if (needsContext) {
     if (files.length > 0) {
       results = await window.fileSystem.getFiles(files)
-    } else {
-      if (!agentConfig.dbSearchFilters) {
-        throw new Error('DB search filters are required')
-      }
+    } else if (agentConfig.dbSearchFilters) {
       results = await retreiveFromVectorDB(query, agentConfig.dbSearchFilters)
     }
     contextString = generateStringOfContextItemsForPrompt(results)
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 00000000..6102b170
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

From 35a3fe2cc1bdc3f6f1ff7da302c040449e392ede Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Thu, 26 Sep 2024 21:22:28 +0100
Subject: [PATCH 25/41] fix date picker

---
 src/components/Chat/DatePicker.tsx | 111 +++++++++++++----------------
 src/components/Chat/StartChat.tsx  |   3 +-
 2 files changed, 51 insertions(+), 63 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 81d8a588..75ed645c 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
 import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
@@ -22,36 +22,25 @@ const quickSelectOptions = [
 
 const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChange }) => {
   const [activeOption, setActiveOption] = useState('custom')
-
-  useEffect(() => {
-    // Determine the active option based on the initial from and to props
-    const now = new Date()
-    if (from.getTime() === subHours(now, 1).getTime()) {
-      setActiveOption('last-hour')
-    } else if (from.getTime() === subDays(now, 1).getTime()) {
-      setActiveOption('last-day')
-    } else if (from.getTime() === subWeeks(now, 1).getTime()) {
-      setActiveOption('last-week')
-    } else if (from.getTime() === subMonths(now, 1).getTime()) {
-      setActiveOption('last-month')
-    } else {
-      setActiveOption('custom')
-    }
-  }, [from, to])
+  const [isOpen, setIsOpen] = useState(false)
 
   const updateDateRange = useCallback(
     (newFrom: Date, newTo: Date, option: string) => {
       onDateChange(newFrom, newTo)
       setActiveOption(option)
+      if (option !== 'custom') {
+        setIsOpen(false)
+      }
     },
     [onDateChange],
   )
 
-  const quickSelectRange = useCallback(
-    (value: string) => {
+  const handleOptionClick = (option: string) => {
+    setActiveOption(option)
+    if (option !== 'custom') {
       const now = new Date()
       let newFrom: Date
-      switch (value) {
+      switch (option) {
         case 'last-hour':
           newFrom = subHours(now, 1)
           break
@@ -67,10 +56,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
         default:
           return
       }
-      updateDateRange(newFrom, now, value)
-    },
-    [updateDateRange],
-  )
+      updateDateRange(newFrom, now, option)
+    } else {
+      setIsOpen(true)
+    }
+  }
 
   const formatDateRange = () => {
     if (activeOption === 'last-hour') {
@@ -86,7 +76,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
           <Button
             key={option.value}
             variant={activeOption === option.value ? 'default' : 'outline'}
-            onClick={() => (option.value === 'custom' ? setActiveOption('custom') : quickSelectRange(option.value))}
+            onClick={() => handleOptionClick(option.value)}
             className={cn(
               'grow sm:grow-0',
               activeOption === option.value
@@ -98,43 +88,42 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
           </Button>
         ))}
       </div>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            className={cn(
-              'w-full justify-start text-left font-normal bg-background text-foreground hover:bg-secondary',
-              activeOption !== 'custom' && 'pointer-events-none opacity-50',
-            )}
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {from ? formatDateRange() : <span>Pick a date range</span>}
-            <ChevronDownIcon className="ml-auto size-4 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto bg-background p-0" align="start">
-          <div className="flex flex-col sm:flex-row">
-            <div className="border-b border-border p-4 sm:border-b-0 sm:border-r">
-              <Calendar
-                mode="single"
-                selected={from}
-                onSelect={(date) => date && updateDateRange(date, to, 'custom')}
-                initialFocus
-                className="bg-background text-foreground"
-              />
-            </div>
-            <div className="p-4">
-              <Calendar
-                mode="single"
-                selected={to}
-                onSelect={(date) => date && updateDateRange(from, date, 'custom')}
-                initialFocus
-                className="bg-background text-foreground"
-              />
+      {activeOption === 'custom' && (
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              className="w-full justify-start bg-background text-left font-normal text-foreground hover:bg-secondary"
+            >
+              <CalendarIcon className="mr-2 size-4" />
+              {from ? formatDateRange() : <span>Pick a date range</span>}
+              <ChevronDownIcon className="ml-auto size-4 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto bg-background p-0" align="start">
+            <div className="flex flex-col sm:flex-row">
+              <div className="border-b border-border p-4 sm:border-b-0 sm:border-r">
+                <Calendar
+                  mode="single"
+                  selected={from}
+                  onSelect={(date) => date && updateDateRange(date, to, 'custom')}
+                  initialFocus
+                  className="bg-background text-foreground"
+                />
+              </div>
+              <div className="p-4">
+                <Calendar
+                  mode="single"
+                  selected={to}
+                  onSelect={(date) => date && updateDateRange(from, date, 'custom')}
+                  initialFocus
+                  className="bg-background text-foreground"
+                />
+              </div>
             </div>
-          </div>
-        </PopoverContent>
-      </Popover>
+          </PopoverContent>
+        </Popover>
+      )}
     </div>
   )
 }
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 61335762..d839f875 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -199,8 +199,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               </div>
 
               {agentConfig.dbSearchFilters && (
-                <div className="space-y-4 rounded-md border border-border p-4">
-                  <h3 className="text-sm font-medium">Database Search Filters</h3>
+                <div className="space-y-2 rounded-md border  border-foreground p-3">
                   <div className="flex items-center space-x-2">
                     <Slider
                       defaultValue={[inverseLogScale(agentConfig.dbSearchFilters.limit)]}

From 9387df071bb6da7f248dace23b610ebf734dc439 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Thu, 26 Sep 2024 21:50:47 +0100
Subject: [PATCH 26/41] handle undefined dates

---
 src/components/Chat/DatePicker.tsx   | 48 ++++++++++++++++++++--------
 src/components/Chat/StartChat.tsx    |  4 +--
 src/components/Chat/exampleAgents.ts |  8 ++---
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 75ed645c..51b22489 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from 'react'
-import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
+import React, { useState, useCallback, useEffect } from 'react'
+import { CalendarIcon, ChevronDownIcon, XIcon } from 'lucide-react'
 import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
@@ -7,9 +7,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { cn } from '@/lib/utils'
 
 interface DateRangePickerProps {
-  from: Date
-  to: Date
-  onDateChange: (from: Date, to: Date) => void
+  from: Date | undefined
+  to: Date | undefined
+  onDateChange: (from: Date | undefined, to: Date | undefined) => void
 }
 
 const quickSelectOptions = [
@@ -21,20 +21,27 @@ const quickSelectOptions = [
 ]
 
 const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChange }) => {
-  const [activeOption, setActiveOption] = useState('custom')
-  const [isOpen, setIsOpen] = useState(false)
+  const [activeOption, setActiveOption] = useState<string | null>()
+  const [isDatePopoverOpen, setIsDatePopoverOpen] = useState(false)
 
   const updateDateRange = useCallback(
-    (newFrom: Date, newTo: Date, option: string) => {
+    (newFrom: Date | undefined, newTo: Date | undefined, option: string | null) => {
+      console.log('newFrom', newFrom)
+      console.log('newTo', newTo)
       onDateChange(newFrom, newTo)
       setActiveOption(option)
       if (option !== 'custom') {
-        setIsOpen(false)
+        setIsDatePopoverOpen(false)
       }
     },
     [onDateChange],
   )
 
+  useEffect(() => {
+    console.log('from', from)
+    console.log('to', to)
+  }, [from, to])
+
   const handleOptionClick = (option: string) => {
     setActiveOption(option)
     if (option !== 'custom') {
@@ -58,11 +65,16 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
       }
       updateDateRange(newFrom, now, option)
     } else {
-      setIsOpen(true)
+      setIsDatePopoverOpen(true)
     }
   }
 
+  const handleClear = () => {
+    updateDateRange(undefined, undefined, null)
+  }
+
   const formatDateRange = () => {
+    if (!from || !to) return 'Select date range'
     if (activeOption === 'last-hour') {
       return `${format(from, 'HH:mm')} - ${format(to, 'HH:mm')}`
     }
@@ -87,16 +99,24 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
             {option.label}
           </Button>
         ))}
+        <Button
+          variant="outline"
+          onClick={handleClear}
+          className="grow bg-background text-foreground hover:bg-secondary sm:grow-0"
+        >
+          <XIcon className="mr-2 size-4" />
+          Clear
+        </Button>
       </div>
       {activeOption === 'custom' && (
-        <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <Popover open={isDatePopoverOpen} onOpenChange={setIsDatePopoverOpen}>
           <PopoverTrigger asChild>
             <Button
               variant="outline"
               className="w-full justify-start bg-background text-left font-normal text-foreground hover:bg-secondary"
             >
               <CalendarIcon className="mr-2 size-4" />
-              {from ? formatDateRange() : <span>Pick a date range</span>}
+              {formatDateRange()}
               <ChevronDownIcon className="ml-auto size-4 opacity-50" />
             </Button>
           </PopoverTrigger>
@@ -106,7 +126,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
                 <Calendar
                   mode="single"
                   selected={from}
-                  onSelect={(date) => date && updateDateRange(date, to, 'custom')}
+                  onSelect={(date) => updateDateRange(date || undefined, to, 'custom')}
                   initialFocus
                   className="bg-background text-foreground"
                 />
@@ -115,7 +135,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
                 <Calendar
                   mode="single"
                   selected={to}
-                  onSelect={(date) => date && updateDateRange(from, date, 'custom')}
+                  onSelect={(date) => updateDateRange(from, date || undefined, 'custom')}
                   initialFocus
                   className="bg-background text-foreground"
                 />
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index d839f875..38771319 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -211,8 +211,8 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                     <span className="text-sm">{agentConfig.dbSearchFilters.limit} results</span>
                   </div>
                   <DateRangePicker
-                    from={agentConfig.dbSearchFilters.minDate ?? new Date()}
-                    to={agentConfig.dbSearchFilters.maxDate ?? new Date()}
+                    from={agentConfig.dbSearchFilters.minDate}
+                    to={agentConfig.dbSearchFilters.maxDate}
                     onDateChange={handleDateChange}
                   />
                 </div>
diff --git a/src/components/Chat/exampleAgents.ts b/src/components/Chat/exampleAgents.ts
index e7441cac..93eeae97 100644
--- a/src/components/Chat/exampleAgents.ts
+++ b/src/components/Chat/exampleAgents.ts
@@ -63,8 +63,8 @@ const exampleAgents: AgentConfig[] = [
     files: [],
     dbSearchFilters: {
       limit: 15,
-      minDate: new Date(0),
-      maxDate: new Date(),
+      minDate: undefined,
+      maxDate: undefined,
     },
     name: 'Default',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],
@@ -80,8 +80,8 @@ const exampleAgents: AgentConfig[] = [
     files: [],
     dbSearchFilters: {
       limit: 15,
-      minDate: new Date(0),
-      maxDate: new Date(),
+      minDate: undefined,
+      maxDate: undefined,
     },
     name: 'Daily Note Agent',
     toolDefinitions: [searchToolDefinition, createNoteToolDefinition],

From 73be3292eef279b89a984172ae9a37861ccf5f57 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 11:20:28 +0100
Subject: [PATCH 27/41] fix colors

---
 package-lock.json              | 28 +++++++++++++++++-----------
 package.json                   |  4 ++--
 src/components/ui/calendar.tsx | 17 +++++++----------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39632a15..5807cbd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,7 +59,7 @@
         "clsx": "^2.1.1",
         "cm6-theme-basic-dark": "^0.2.0",
         "cmdk": "^1.0.0",
-        "date-fns": "^3.6.0",
+        "date-fns": "^2.30.0",
         "dotenv": "^16.4.5",
         "electron-store": "^8.1.0",
         "electron-updater": "^6.1.1",
@@ -78,7 +78,7 @@
         "prosemirror-utils": "^1.2.2",
         "react": "^18.2.0",
         "react-card-flip": "^1.2.2",
-        "react-day-picker": "^8.10.1",
+        "react-day-picker": "^8.7.1",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-markdown": "^9.0.1",
@@ -8399,12 +8399,18 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
     "node_modules/debounce-fn": {
@@ -19828,15 +19834,15 @@
       }
     },
     "node_modules/react-day-picker": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
-      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.7.1.tgz",
+      "integrity": "sha512-Gv426AW8b151CZfh3aP5RUGztLwHB/EyJgWZ5iMgtzbFBkjHfG6Y66CIQFMWGLnYjsQ9DYSJRmJ5S0Pg5HWKjA==",
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/gpbl"
       },
       "peerDependencies": {
-        "date-fns": "^2.28.0 || ^3.0.0",
+        "date-fns": "^2.28.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
diff --git a/package.json b/package.json
index c357b168..5dc1c706 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "clsx": "^2.1.1",
     "cm6-theme-basic-dark": "^0.2.0",
     "cmdk": "^1.0.0",
-    "date-fns": "^3.6.0",
+    "date-fns": "^2.30.0",
     "dotenv": "^16.4.5",
     "electron-store": "^8.1.0",
     "electron-updater": "^6.1.1",
@@ -97,7 +97,7 @@
     "prosemirror-utils": "^1.2.2",
     "react": "^18.2.0",
     "react-card-flip": "^1.2.2",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^8.7.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-markdown": "^9.0.1",
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index fe5049ac..61aee87e 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable no-empty-pattern */
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable react/prop-types */
 import * as React from 'react'
@@ -33,7 +32,7 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: C
         head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
         row: 'flex w-full mt-2',
         cell: cn(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
           props.mode === 'range'
             ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
             : '[&:has([aria-selected])]:rounded-md',
@@ -41,19 +40,17 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: C
         day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
         day_range_start: 'day-range-start',
         day_range_end: 'day-range-end',
-        day_selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        day_today: 'bg-accent text-accent-foreground',
-        day_outside:
-          'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_selected: 'bg-blue-600 text-white hover:bg-blue-700 hover:text-white focus:bg-blue-700 focus:text-white',
+        day_today: 'bg-gray-100 text-gray-900',
+        day_outside: 'text-muted-foreground opacity-50',
         day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_range_middle: 'bg-blue-100 text-blue-900',
         day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
-        IconLeft: ({}) => <ChevronLeftIcon className="size-4" />,
-        IconRight: ({}) => <ChevronRightIcon className="size-4" />,
+        IconLeft: () => <ChevronLeftIcon className="size-4" />,
+        IconRight: () => <ChevronRightIcon className="size-4" />,
       }}
       {...props}
     />

From fa6387b3ace8c6c13868743e38324ce03d42869e Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 12:08:11 +0100
Subject: [PATCH 28/41] fix styling for calender by nuking things

---
 src/components/Chat/DatePicker.tsx | 36 +++++++++++++-----------------
 src/components/ui/calendar.tsx     | 22 +++++++-----------
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 51b22489..22036d07 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react'
 import { CalendarIcon, ChevronDownIcon, XIcon } from 'lucide-react'
-import { format, subDays, subHours, subWeeks, subMonths } from 'date-fns'
+import { subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
@@ -74,11 +74,19 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
   }
 
   const formatDateRange = () => {
-    if (!from || !to) return 'Select date range'
-    if (activeOption === 'last-hour') {
-      return `${format(from, 'HH:mm')} - ${format(to, 'HH:mm')}`
-    }
-    return `${format(from, 'LLL dd, y')} - ${format(to, 'LLL dd, y')}`
+    if (!from && !to) return 'Select date range'
+    if (from && to) return `${from.toDateString()} - ${to.toDateString()}`
+    if (from) return `From ${from.toDateString()}`
+    if (to) return `To ${to.toDateString()}`
+    return '' // Default case
+  }
+
+  const handleFromDateSelect = (date: Date | undefined) => {
+    updateDateRange(date, to, 'custom')
+  }
+
+  const handleToDateSelect = (date: Date | undefined) => {
+    updateDateRange(from, date, 'custom')
   }
 
   return (
@@ -123,22 +131,10 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
           <PopoverContent className="w-auto bg-background p-0" align="start">
             <div className="flex flex-col sm:flex-row">
               <div className="border-b border-border p-4 sm:border-b-0 sm:border-r">
-                <Calendar
-                  mode="single"
-                  selected={from}
-                  onSelect={(date) => updateDateRange(date || undefined, to, 'custom')}
-                  initialFocus
-                  className="bg-background text-foreground"
-                />
+                <Calendar mode="single" selected={from} onSelect={handleFromDateSelect} initialFocus />
               </div>
               <div className="p-4">
-                <Calendar
-                  mode="single"
-                  selected={to}
-                  onSelect={(date) => updateDateRange(from, date || undefined, 'custom')}
-                  initialFocus
-                  className="bg-background text-foreground"
-                />
+                <Calendar mode="single" selected={to} onSelect={handleToDateSelect} initialFocus />
               </div>
             </div>
           </PopoverContent>
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 61aee87e..ce611a19 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -31,20 +31,14 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: C
         head_row: 'flex',
         head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
         row: 'flex w-full mt-2',
-        cell: cn(
-          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
-          props.mode === 'range'
-            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-            : '[&:has([aria-selected])]:rounded-md',
-        ),
-        day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
-        day_range_start: 'day-range-start',
-        day_range_end: 'day-range-end',
-        day_selected: 'bg-blue-600 text-white hover:bg-blue-700 hover:text-white focus:bg-blue-700 focus:text-white',
-        day_today: 'bg-gray-100 text-gray-900',
-        day_outside: 'text-muted-foreground opacity-50',
-        day_disabled: 'text-muted-foreground opacity-50',
-        day_range_middle: 'bg-blue-100 text-blue-900',
+        cell: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
+        day: cn(buttonVariants({ variant: 'ghost' }), 'h-8 w-8 p-0 font-normal'),
+        day_selected: 'bg-background text-primary  hover:text-primary-foreground ',
+        // day_today:
+        //   'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        // day_outside: 'text-muted-foreground opacity-50',
+        // day_disabled: 'text-muted-foreground opacity-50',
+        // day_range_middle: 'aria-selected:bg-accent/50 aria-selected:text-accent-foreground',
         day_hidden: 'invisible',
         ...classNames,
       }}

From 6a8e8e911747cf53848a1f7215837fa6a52858d0 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 12:22:29 +0100
Subject: [PATCH 29/41] date range cleanup

---
 src/components/Chat/DatePicker.tsx | 25 +++++++++----------------
 src/components/ui/calendar.tsx     |  2 +-
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 22036d07..160e090c 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import { CalendarIcon, ChevronDownIcon, XIcon } from 'lucide-react'
 import { subDays, subHours, subWeeks, subMonths } from 'date-fns'
 import { Button } from '@/components/ui/button'
@@ -26,8 +26,6 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
 
   const updateDateRange = useCallback(
     (newFrom: Date | undefined, newTo: Date | undefined, option: string | null) => {
-      console.log('newFrom', newFrom)
-      console.log('newTo', newTo)
       onDateChange(newFrom, newTo)
       setActiveOption(option)
       if (option !== 'custom') {
@@ -37,11 +35,6 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
     [onDateChange],
   )
 
-  useEffect(() => {
-    console.log('from', from)
-    console.log('to', to)
-  }, [from, to])
-
   const handleOptionClick = (option: string) => {
     setActiveOption(option)
     if (option !== 'custom') {
@@ -90,15 +83,15 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-2">
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1">
         {quickSelectOptions.map((option) => (
           <Button
             key={option.value}
             variant={activeOption === option.value ? 'default' : 'outline'}
             onClick={() => handleOptionClick(option.value)}
             className={cn(
-              'grow sm:grow-0',
+              'grow px-2 py-1 text-sm sm:grow-0',
               activeOption === option.value
                 ? 'bg-primary text-primary-foreground hover:bg-primary/90'
                 : 'bg-background text-foreground hover:bg-secondary',
@@ -110,9 +103,9 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
         <Button
           variant="outline"
           onClick={handleClear}
-          className="grow bg-background text-foreground hover:bg-secondary sm:grow-0"
+          className="grow bg-background px-2 py-1 text-xs text-foreground hover:bg-secondary sm:grow-0"
         >
-          <XIcon className="mr-2 size-4" />
+          <XIcon className="mr-1 size-3" />
           Clear
         </Button>
       </div>
@@ -121,11 +114,11 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
           <PopoverTrigger asChild>
             <Button
               variant="outline"
-              className="w-full justify-start bg-background text-left font-normal text-foreground hover:bg-secondary"
+              className="w-full justify-start bg-background px-2 py-1 text-left text-xs font-normal text-foreground hover:bg-secondary"
             >
-              <CalendarIcon className="mr-2 size-4" />
+              <CalendarIcon className="mr-1 size-3" />
               {formatDateRange()}
-              <ChevronDownIcon className="ml-auto size-4 opacity-50" />
+              <ChevronDownIcon className="ml-auto size-3 opacity-50" />
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-auto bg-background p-0" align="start">
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index ce611a19..63f017fd 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -36,7 +36,7 @@ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: C
         day_selected: 'bg-background text-primary  hover:text-primary-foreground ',
         // day_today:
         //   'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        // day_outside: 'text-muted-foreground opacity-50',
+        day_outside: 'text-muted-foreground opacity-50',
         // day_disabled: 'text-muted-foreground opacity-50',
         // day_range_middle: 'aria-selected:bg-accent/50 aria-selected:text-accent-foreground',
         day_hidden: 'invisible',

From 355d08c7c6126f9faa83fd6791df66a907b7d550 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 12:31:16 +0100
Subject: [PATCH 30/41] improve search logic properly

---
 src/components/Chat/StartChat.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 38771319..50c67ea2 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -199,7 +199,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               </div>
 
               {agentConfig.dbSearchFilters && (
-                <div className="space-y-2 rounded-md border  border-foreground p-3">
+                <div className="space-y-2 rounded-md border border-foreground p-3">
                   <div className="flex items-center space-x-2">
                     <Slider
                       defaultValue={[inverseLogScale(agentConfig.dbSearchFilters.limit)]}
@@ -208,20 +208,25 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                       step={1}
                       onValueChange={handleSliderChange}
                     />
-                    <span className="text-sm">{agentConfig.dbSearchFilters.limit} results</span>
+                    <div className="flex flex-col">
+                      <span className="">{agentConfig.dbSearchFilters.limit} </span>
+                      <span className="text-xs">notes will be added to context window</span>
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-start">
+                    <span className="mb-1 text-sm text-muted-foreground">Filter notes by date (last modified):</span>
+                    <DateRangePicker
+                      from={agentConfig.dbSearchFilters.minDate}
+                      to={agentConfig.dbSearchFilters.maxDate}
+                      onDateChange={handleDateChange}
+                    />
                   </div>
-                  <DateRangePicker
-                    from={agentConfig.dbSearchFilters.minDate}
-                    to={agentConfig.dbSearchFilters.maxDate}
-                    onDateChange={handleDateChange}
-                  />
                 </div>
               )}
             </div>
           </div>
         </div>
 
-        {/* Agent Selector Cards */}
         <div className="mt-4 w-full justify-center md:flex-row lg:flex">
           {exampleAgents.map((agent) => (
             <Card

From b6138911190a0d863ea431b5f212df2377d3e408 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 12:53:49 +0100
Subject: [PATCH 31/41] prompt editor improvements

---
 src/components/Chat/PromptEditor.tsx | 16 ++++++++--------
 src/components/Chat/StartChat.tsx    |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/Chat/PromptEditor.tsx b/src/components/Chat/PromptEditor.tsx
index fbd0f550..6210f57b 100644
--- a/src/components/Chat/PromptEditor.tsx
+++ b/src/components/Chat/PromptEditor.tsx
@@ -17,19 +17,19 @@ const PromptEditor: React.FC<{
   }
 
   return (
-    <DialogContent className="bg-background text-foreground sm:max-w-[425px]">
+    <DialogContent className="w-full max-w-4xl bg-background text-foreground">
       <DialogHeader>
         <DialogTitle className="text-foreground">Edit Prompt Template</DialogTitle>
         <DialogDescription className="text-muted-foreground">
           Customize the prompt template for your AI assistant. Click done when you&apos;re done.
         </DialogDescription>
       </DialogHeader>
-      <div className="grid gap-4 py-4">
+      <div className="grid gap-6 py-4">
         {editedPrompt.map((prompt, index) => (
           // eslint-disable-next-line react/no-array-index-key
           <div key={index} className="grid gap-2">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor={`role-${index}`} className="text-right text-foreground">
+            <div className="flex items-center gap-4">
+              <Label htmlFor={`role-${index}`} className="w-20 text-foreground">
                 Role
               </Label>
               <Select
@@ -40,7 +40,7 @@ const PromptEditor: React.FC<{
                   )
                 }
               >
-                <SelectTrigger className="col-span-3 border-input bg-background text-foreground">
+                <SelectTrigger className="w-full border-input bg-background text-foreground">
                   <SelectValue placeholder="Select role" />
                 </SelectTrigger>
                 <SelectContent className="border-input bg-background text-foreground">
@@ -49,8 +49,8 @@ const PromptEditor: React.FC<{
                 </SelectContent>
               </Select>
             </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor={`content-${index}`} className="text-right text-foreground">
+            <div className="flex items-start gap-4">
+              <Label htmlFor={`content-${index}`} className="w-20 pt-2 text-foreground">
                 Content
               </Label>
               <Textarea
@@ -59,7 +59,7 @@ const PromptEditor: React.FC<{
                 onChange={(e) =>
                   setEditedPrompt(editedPrompt.map((p, i) => (i === index ? { ...p, content: e.target.value } : p)))
                 }
-                className="col-span-3 border-input bg-background text-foreground"
+                className="h-32 min-h-32 flex-1 border border-solid border-input bg-background text-foreground"
               />
             </div>
           </div>
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 50c67ea2..e3c4e365 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -169,7 +169,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
               {/* New Prompt Editor Dialog */}
               <Dialog>
                 <DialogTrigger asChild>
-                  <Button variant="outline">Edit Prompt</Button>
+                  <Button>Edit Prompt</Button>
                 </DialogTrigger>
                 <DialogContent>
                   <PromptEditor

From 6f7f68ec6d8de4476028cb3d3a367d927678a962 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 13:30:33 +0100
Subject: [PATCH 32/41] minor cleanups

---
 src/components/Chat/DatePicker.tsx   | 6 +++---
 src/components/Chat/PromptEditor.tsx | 8 +++++---
 src/components/Chat/StartChat.tsx    | 2 +-
 src/components/Chat/exampleAgents.ts | 2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 160e090c..79a4981e 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -14,9 +14,9 @@ interface DateRangePickerProps {
 
 const quickSelectOptions = [
   { label: 'Last hour', value: 'last-hour' },
-  { label: 'Last 24 hours', value: 'last-day' },
-  { label: 'Last 7 days', value: 'last-week' },
-  { label: 'Last 30 days', value: 'last-month' },
+  { label: 'Today', value: 'today' },
+  { label: 'This week', value: 'this-week' },
+  { label: 'This month', value: 'this-month' },
   { label: 'Custom', value: 'custom' },
 ]
 
diff --git a/src/components/Chat/PromptEditor.tsx b/src/components/Chat/PromptEditor.tsx
index 6210f57b..c38fcae8 100644
--- a/src/components/Chat/PromptEditor.tsx
+++ b/src/components/Chat/PromptEditor.tsx
@@ -20,8 +20,10 @@ const PromptEditor: React.FC<{
     <DialogContent className="w-full max-w-4xl bg-background text-foreground">
       <DialogHeader>
         <DialogTitle className="text-foreground">Edit Prompt Template</DialogTitle>
-        <DialogDescription className="text-muted-foreground">
-          Customize the prompt template for your AI assistant. Click done when you&apos;re done.
+        <DialogDescription className="text-foreground">
+          Customize the prompt template for your AI assistant. Use the variables {`{QUERY}`} and {`{CONTEXT}`} to
+          reference the user&apos;s query and the context searched (if you toggle the &quot;make initial search&quot;
+          option in settings).
         </DialogDescription>
       </DialogHeader>
       <div className="grid gap-6 py-4">
@@ -59,7 +61,7 @@ const PromptEditor: React.FC<{
                 onChange={(e) =>
                   setEditedPrompt(editedPrompt.map((p, i) => (i === index ? { ...p, content: e.target.value } : p)))
                 }
-                className="h-32 min-h-32 flex-1 border border-solid border-input bg-background text-foreground"
+                className="h-64 flex-1 border border-solid border-input bg-background text-muted-foreground"
               />
             </div>
           </div>
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index e3c4e365..dd315a93 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -214,7 +214,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
                     </div>
                   </div>
                   <div className="flex flex-col items-start">
-                    <span className="mb-1 text-sm text-muted-foreground">Filter notes by date (last modified):</span>
+                    <span className="mb-1 text-sm text-muted-foreground">Filter search by date (last modified):</span>
                     <DateRangePicker
                       from={agentConfig.dbSearchFilters.minDate}
                       to={agentConfig.dbSearchFilters.maxDate}
diff --git a/src/components/Chat/exampleAgents.ts b/src/components/Chat/exampleAgents.ts
index 93eeae97..d8c758c0 100644
--- a/src/components/Chat/exampleAgents.ts
+++ b/src/components/Chat/exampleAgents.ts
@@ -7,7 +7,7 @@ const defaultAgentPromptTemplate: PromptTemplate = [
     content: `You are a helpful assistant helping a user organize and manage their personal knowledge and notes. Here are some guidelines:
 - You will answer the user's question and help them with their request. 
 - You can search the knowledge base by using the search tool and create new notes by using the create note tool.
-- Make sure you respond in the same language as the user's query.
+- Make sure you respond in the same language as the user's query and context.
 - An initial query has been made and the context is already provided for you (so please do not call the search tool initially).`,
   },
   {

From a9e4005182c444c78a296379bcea6380a62cc0ef Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 15:17:14 +0100
Subject: [PATCH 33/41] improvement on backgrounds

---
 src/components/Chat/StartChat.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index dd315a93..9400d8e0 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -119,7 +119,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
 
         {/* Text Input Field and Controls */}
         <div className="flex flex-col">
-          <div className="flex flex-col rounded-md border-2 border-solid border-border bg-input focus-within:ring-1 focus-within:ring-ring">
+          <div className="flex flex-col rounded-md border-2 border-solid border-border bg-secondary focus-within:ring-1 focus-within:ring-ring">
             <textarea
               value={userTextFieldInput}
               onKeyDown={(e) => {
@@ -164,7 +164,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
             </div>
           </div>
 
-          <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-input px-4 py-2">
+          <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-background px-4 py-2">
             <div className="space-y-4">
               {/* New Prompt Editor Dialog */}
               <Dialog>

From 70bf02306cc5729146ba186d0e8e5ab51e464d96 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 15:32:13 +0100
Subject: [PATCH 34/41] add in collapsible customise agent'

---
 package-lock.json                 |  30 +++++++
 package.json                      |   1 +
 src/components/Chat/StartChat.tsx | 128 ++++++++++++++++--------------
 3 files changed, 101 insertions(+), 58 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5807cbd0..8729ffa3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@mui/joy": "^5.0.0-beta.23",
         "@mui/material": "^5.15.11",
         "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-hover-card": "^1.1.1",
         "@radix-ui/react-icons": "^1.3.0",
@@ -3940,6 +3941,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
+      "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
diff --git a/package.json b/package.json
index 5dc1c706..b74768b7 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@mui/joy": "^5.0.0-beta.23",
     "@mui/material": "^5.15.11",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 9400d8e0..2136018f 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
 import '../../styles/chat.css'
+import { ChevronDown, ChevronUp } from 'lucide-react'
 import { AgentConfig, ToolDefinition } from './types'
 import exampleAgents from './exampleAgents'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -15,6 +16,7 @@ import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import PromptEditor from './PromptEditor'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 
 interface StartChatProps {
   defaultModelName: string
@@ -27,6 +29,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [agentConfig, setAgentConfig] = useState<AgentConfig>(exampleAgents[0])
   const [selectedTools, setSelectedTools] = useState<ToolDefinition[]>(agentConfig.toolDefinitions)
+  const [isExtraSettingsOpen, setIsExtraSettingsOpen] = useState(false)
 
   useEffect(() => {
     const fetchLLMModels = async () => {
@@ -117,7 +120,6 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           Welcome to your AI-powered assistant! Start a conversation with your second brain!
         </h1>
 
-        {/* Text Input Field and Controls */}
         <div className="flex flex-col">
           <div className="flex flex-col rounded-md border-2 border-solid border-border bg-secondary focus-within:ring-1 focus-within:ring-ring">
             <textarea
@@ -164,67 +166,77 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
             </div>
           </div>
 
-          <div className="mx-auto mt-0 min-h-[80px] w-[96%] rounded-b border-t border-solid border-border bg-background px-4 py-2">
-            <div className="space-y-4">
-              {/* New Prompt Editor Dialog */}
-              <Dialog>
-                <DialogTrigger asChild>
-                  <Button>Edit Prompt</Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <PromptEditor
-                    promptTemplate={agentConfig.promptTemplate}
-                    onSave={(newPromptTemplate) => {
-                      setAgentConfig((prevConfig) => ({ ...prevConfig, promptTemplate: newPromptTemplate }))
-                    }}
-                  />
-                </DialogContent>
-              </Dialog>
-
-              <ToolSelector
-                allTools={allAvailableToolDefinitions}
-                selectedTools={selectedTools}
-                onToolsChange={handleToolsChange}
-              />
-
-              <div className="flex items-center space-x-2">
-                <Switch
-                  id="db-search-toggle"
-                  checked={!!agentConfig.dbSearchFilters}
-                  onCheckedChange={handleDbSearchToggle}
+          <Collapsible open={isExtraSettingsOpen} onOpenChange={setIsExtraSettingsOpen} className="w-full">
+            <CollapsibleTrigger asChild>
+              <Button
+                variant="secondary"
+                className="flex w-full items-center justify-between px-4 py-2 text-sm font-medium "
+              >
+                Customise Agent
+                {isExtraSettingsOpen ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="mx-auto  w-[96%] rounded-b border border-solid border-border bg-background px-4 py-2">
+              <div className="space-y-4">
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button>Edit Prompt</Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <PromptEditor
+                      promptTemplate={agentConfig.promptTemplate}
+                      onSave={(newPromptTemplate) => {
+                        setAgentConfig((prevConfig) => ({ ...prevConfig, promptTemplate: newPromptTemplate }))
+                      }}
+                    />
+                  </DialogContent>
+                </Dialog>
+
+                <ToolSelector
+                  allTools={allAvailableToolDefinitions}
+                  selectedTools={selectedTools}
+                  onToolsChange={handleToolsChange}
                 />
-                <Label htmlFor="db-search-toggle" className="text-sm text-muted-foreground">
-                  Include initial database search in context
-                </Label>
-              </div>
 
-              {agentConfig.dbSearchFilters && (
-                <div className="space-y-2 rounded-md border border-foreground p-3">
-                  <div className="flex items-center space-x-2">
-                    <Slider
-                      defaultValue={[inverseLogScale(agentConfig.dbSearchFilters.limit)]}
-                      min={0}
-                      max={100}
-                      step={1}
-                      onValueChange={handleSliderChange}
-                    />
-                    <div className="flex flex-col">
-                      <span className="">{agentConfig.dbSearchFilters.limit} </span>
-                      <span className="text-xs">notes will be added to context window</span>
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    id="db-search-toggle"
+                    checked={!!agentConfig.dbSearchFilters}
+                    onCheckedChange={handleDbSearchToggle}
+                  />
+                  <Label htmlFor="db-search-toggle" className="text-sm text-muted-foreground">
+                    Include initial database search in context
+                  </Label>
+                </div>
+
+                {agentConfig.dbSearchFilters && (
+                  <div className="space-y-2 rounded-md border border-foreground p-3">
+                    <div className="flex items-center space-x-2">
+                      <Slider
+                        defaultValue={[inverseLogScale(agentConfig.dbSearchFilters.limit)]}
+                        min={0}
+                        max={100}
+                        step={1}
+                        onValueChange={handleSliderChange}
+                      />
+                      <div className="flex flex-col">
+                        <span className="">{agentConfig.dbSearchFilters.limit} </span>
+                        <span className="text-xs">notes will be added to context window</span>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-start">
+                      <span className="mb-1 text-sm text-muted-foreground">Filter search by date (last modified):</span>
+                      <DateRangePicker
+                        from={agentConfig.dbSearchFilters.minDate}
+                        to={agentConfig.dbSearchFilters.maxDate}
+                        onDateChange={handleDateChange}
+                      />
                     </div>
                   </div>
-                  <div className="flex flex-col items-start">
-                    <span className="mb-1 text-sm text-muted-foreground">Filter search by date (last modified):</span>
-                    <DateRangePicker
-                      from={agentConfig.dbSearchFilters.minDate}
-                      to={agentConfig.dbSearchFilters.maxDate}
-                      onDateChange={handleDateChange}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
+                )}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
         </div>
 
         <div className="mt-4 w-full justify-center md:flex-row lg:flex">

From 751bf0f4079798a666ed9825de50a9589d89b6f9 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 15:32:59 +0100
Subject: [PATCH 35/41] collapsible

---
 src/components/ui/collapsible.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/components/ui/collapsible.tsx

diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 00000000..b192641f
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const { CollapsibleTrigger } = CollapsiblePrimitive
+
+const { CollapsibleContent } = CollapsiblePrimitive
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

From e9391e70b62bd4e507104525a951da2ab72c5e17 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 15:56:48 +0100
Subject: [PATCH 36/41] initial checkbox

---
 package-lock.json                    | 30 +++++++++++++++++++
 package.json                         |  1 +
 src/components/Chat/StartChat.tsx    |  2 +-
 src/components/Chat/ToolSelector.tsx | 43 ++++++++++++++--------------
 src/components/ui/checkbox.tsx       | 29 +++++++++++++++++++
 5 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ui/checkbox.tsx

diff --git a/package-lock.json b/package-lock.json
index 8729ffa3..c957a8ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@mui/joy": "^5.0.0-beta.23",
         "@mui/material": "^5.15.11",
         "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-collapsible": "^1.1.0",
         "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-hover-card": "^1.1.1",
@@ -3941,6 +3942,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz",
+      "integrity": "sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz",
diff --git a/package.json b/package.json
index b74768b7..c43ef8c6 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@mui/joy": "^5.0.0-beta.23",
     "@mui/material": "^5.15.11",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index 2136018f..2ee42099 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -29,7 +29,7 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [agentConfig, setAgentConfig] = useState<AgentConfig>(exampleAgents[0])
   const [selectedTools, setSelectedTools] = useState<ToolDefinition[]>(agentConfig.toolDefinitions)
-  const [isExtraSettingsOpen, setIsExtraSettingsOpen] = useState(false)
+  const [isExtraSettingsOpen, setIsExtraSettingsOpen] = useState(true)
 
   useEffect(() => {
     const fetchLLMModels = async () => {
diff --git a/src/components/Chat/ToolSelector.tsx b/src/components/Chat/ToolSelector.tsx
index 3177b28b..2310b3df 100644
--- a/src/components/Chat/ToolSelector.tsx
+++ b/src/components/Chat/ToolSelector.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react'
 import { ToolDefinition } from './types'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Badge } from '@/components/ui/badge'
 
 interface ToolSelectorProps {
@@ -11,15 +11,11 @@ interface ToolSelectorProps {
 }
 
 const ToolSelector: React.FC<ToolSelectorProps> = ({ allTools = [], selectedTools = [], onToolsChange }) => {
-  const handleToolChange = (value: string) => {
-    const tool = allTools.find((t) => t.name === value)
-    if (tool) {
-      const isSelected = selectedTools.some((t) => t.name === tool.name)
-      if (isSelected) {
-        onToolsChange(selectedTools.filter((t) => t.name !== tool.name))
-      } else {
-        onToolsChange([...selectedTools, tool])
-      }
+  const handleToolChange = (checked: boolean, tool: ToolDefinition) => {
+    if (checked) {
+      onToolsChange([...selectedTools, tool])
+    } else {
+      onToolsChange(selectedTools.filter((t) => t.name !== tool.name))
     }
   }
 
@@ -35,18 +31,23 @@ const ToolSelector: React.FC<ToolSelectorProps> = ({ allTools = [], selectedTool
   return (
     <div className="flex flex-col space-y-2">
       <label className="text-sm font-medium text-muted-foreground">Select Tools</label>
-      <Select onValueChange={handleToolChange}>
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="Select a tool" />
-        </SelectTrigger>
-        <SelectContent>
-          {allTools.map((tool) => (
-            <SelectItem key={tool.name} value={tool.name}>
+      <div className="flex flex-col space-y-2">
+        {allTools.map((tool) => (
+          <div key={tool.name} className="flex items-center space-x-2">
+            <Checkbox
+              id={`tool-${tool.name}`}
+              checked={selectedTools.some((t) => t.name === tool.name)}
+              onCheckedChange={(checked) => handleToolChange(checked as boolean, tool)}
+            />
+            <label
+              htmlFor={`tool-${tool.name}`}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
               {tool.name}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+            </label>
+          </div>
+        ))}
+      </div>
       <div className="flex flex-wrap gap-2">
         {selectedTools.map((tool) => (
           <Badge key={tool.name} variant="secondary" className="cursor-pointer" onClick={() => toggleTool(tool)}>
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 00000000..a6c8062f
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable import/prefer-default-export */
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <CheckIcon className="size-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

From ac3946789ff8ac2dd2598a63f5d853fca47f3f5b Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 17:16:00 +0100
Subject: [PATCH 37/41] upgrade ollama version and setup ollama library

---
 electron/main/electron-store/storeConfig.ts   |  2 +-
 .../electron-store/storeSchemaMigrator.ts     |  3 +
 electron/main/llm/models/ollama.ts            |  2 +-
 package-lock.json                             | 60 +++++++++++++++++++
 package.json                                  |  1 +
 scripts/downloadOllama.js                     |  6 +-
 src/components/ui/checkbox.tsx                | 49 ++++++++-------
 src/utils/llm.ts                              |  9 ++-
 8 files changed, 105 insertions(+), 27 deletions(-)

diff --git a/electron/main/electron-store/storeConfig.ts b/electron/main/electron-store/storeConfig.ts
index 755464f2..64222f4a 100644
--- a/electron/main/electron-store/storeConfig.ts
+++ b/electron/main/electron-store/storeConfig.ts
@@ -1,6 +1,6 @@
 import { Chat } from '@/components/Chat/types'
 
-export type APIInterface = 'openai' | 'anthropic'
+export type APIInterface = 'openai' | 'anthropic' | 'ollama'
 
 export interface LLMAPIConfig {
   name: string
diff --git a/electron/main/electron-store/storeSchemaMigrator.ts b/electron/main/electron-store/storeSchemaMigrator.ts
index fa98ff17..07c0da49 100644
--- a/electron/main/electron-store/storeSchemaMigrator.ts
+++ b/electron/main/electron-store/storeSchemaMigrator.ts
@@ -42,6 +42,9 @@ export const setupDefaultLLMAPIs = (store: Store<StoreSchema>) => {
   const existingOllamaAPI = llmAPIs?.find((api) => api.name === defaultOllamaAPI.name)
   if (!existingOllamaAPI) {
     store.set(StoreKeys.LLMAPIs, [defaultOllamaAPI])
+  } else if (existingOllamaAPI.apiInterface !== 'ollama') {
+    const updatedLLMAPIs = llmAPIs.filter((api) => api.name !== defaultOllamaAPI.name)
+    store.set(StoreKeys.LLMAPIs, [...updatedLLMAPIs, defaultOllamaAPI])
   }
 }
 
diff --git a/electron/main/llm/models/ollama.ts b/electron/main/llm/models/ollama.ts
index df19be3b..af2bca2a 100644
--- a/electron/main/llm/models/ollama.ts
+++ b/electron/main/llm/models/ollama.ts
@@ -18,7 +18,7 @@ const OllamaServeType = {
 
 export const defaultOllamaAPI: LLMAPIConfig = {
   name: 'Ollama',
-  apiInterface: 'openai',
+  apiInterface: 'ollama',
   apiURL: 'http://localhost:11434/v1/',
 }
 
diff --git a/package-lock.json b/package-lock.json
index c957a8ba..7e7e3423 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,7 @@
         "marked": "^12.0.1",
         "npm": "^10.3.0",
         "ollama": "^0.4.9",
+        "ollama-ai-provider": "^0.15.1",
         "openai": "^4.20.0",
         "posthog-js": "^1.130.2",
         "prosemirror-utils": "^1.2.2",
@@ -18472,6 +18473,60 @@
         "whatwg-fetch": "^3.6.20"
       }
     },
+    "node_modules/ollama-ai-provider": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/ollama-ai-provider/-/ollama-ai-provider-0.15.1.tgz",
+      "integrity": "sha512-eP1vxeJUgf1TdVyvJFqHEgU7eSnG7QYam4w1zTl4tokDh5eRw9aQtcdHYpq9xd5yU9b805v/Ghba6nVy1zOUew==",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.23",
+        "@ai-sdk/provider-utils": "1.0.19",
+        "partial-json": "0.1.7"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ollama-ai-provider/node_modules/@ai-sdk/provider": {
+      "version": "0.0.23",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.23.tgz",
+      "integrity": "sha512-oAc49O5+xypVrKM7EUU5P/Y4DUL4JZUWVxhejoAVOTOl3WZUEWsMbP3QZR+TrimQIsS0WR/n9UuF6U0jPdp0tQ==",
+      "dependencies": {
+        "json-schema": "0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/ollama-ai-provider/node_modules/@ai-sdk/provider-utils": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-1.0.19.tgz",
+      "integrity": "sha512-p02Fq5Mnc8T6nwRBN1Iaou8YXvN1sDS6hbmJaD5UaRbXjizbh+8rpFS/o7jqAHTwf3uHCDitP3pnODyHdc/CDQ==",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.23",
+        "eventsource-parser": "1.1.2",
+        "nanoid": "3.3.6",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "license": "ISC",
@@ -18788,6 +18843,11 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/partial-json": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/partial-json/-/partial-json-0.1.7.tgz",
+      "integrity": "sha512-Njv/59hHaokb/hRUjce3Hdv12wd60MtM9Z5Olmn+nehe0QDAsRtRbJPvJ0Z91TusF0SuZRIvnM+S4l6EIP8leA=="
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "dev": true,
diff --git a/package.json b/package.json
index c43ef8c6..d85f3c19 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
     "marked": "^12.0.1",
     "npm": "^10.3.0",
     "ollama": "^0.4.9",
+    "ollama-ai-provider": "^0.15.1",
     "openai": "^4.20.0",
     "posthog-js": "^1.130.2",
     "prosemirror-utils": "^1.2.2",
diff --git a/scripts/downloadOllama.js b/scripts/downloadOllama.js
index ad0fca52..dea94aeb 100644
--- a/scripts/downloadOllama.js
+++ b/scripts/downloadOllama.js
@@ -7,17 +7,17 @@ const AdmZip = require("adm-zip");
 // Mapping of OS to binary info
 const binariesInfo = {
   darwin: {
-    url: "https://github.com/ollama/ollama/releases/download/v0.3.6/ollama-darwin",
+    url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-darwin",
     path: "../binaries/darwin/",
     binaryName: "ollama-darwin",
   },
   linux: {
-    url: "https://github.com/ollama/ollama/releases/download/v0.3.6/ollama-linux-amd64",
+    url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-linux-amd64",
     path: "../binaries/linux/",
     binaryName: "ollama-linux-amd64",
   },
   win32: {
-    url: "https://github.com/ollama/ollama/releases/download/v0.3.6/ollama-windows-amd64.zip",
+    url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-windows-amd64.zip",
     path: "../binaries/win32/",
     binaryName: "ollama.exe",
   },
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index a6c8062f..6114a14c 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,29 +1,36 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable import/prefer-default-export */
-import * as React from 'react'
+import React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { CheckIcon } from '@radix-ui/react-icons'
-
 import { cn } from '@/lib/utils'
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-      <CheckIcon className="size-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+  label?: string
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({ className, label, id, ...props }) => {
+  return (
+    <div className="flex items-center">
+      <CheckboxPrimitive.Root
+        id={id}
+        className={cn(
+          'shadow-blackA4 hover:bg-violet3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px_black]',
+          className,
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator>
+          <CheckIcon />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label && (
+        <label className="pl-[15px] text-[15px] leading-none text-white" htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  )
+}
 
 export { Checkbox }
diff --git a/src/utils/llm.ts b/src/utils/llm.ts
index 663152bc..f8d29e8b 100644
--- a/src/utils/llm.ts
+++ b/src/utils/llm.ts
@@ -1,7 +1,9 @@
+import { createOllama } from 'ollama-ai-provider'
 import { createOpenAI } from '@ai-sdk/openai'
 import { createAnthropic } from '@ai-sdk/anthropic'
+import { LanguageModel } from 'ai'
 
-const resolveLLMClient = async (llmName: string) => {
+const resolveLLMClient = async (llmName: string): Promise<LanguageModel> => {
   const llmConfigs = await window.llm.getLLMConfigs()
   const apiConfigs = await window.llm.getLLMAPIConfigs()
 
@@ -34,6 +36,11 @@ const resolveLLMClient = async (llmName: string) => {
     })
     return anthropic(llmName)
   }
+  if (apiConfig.apiInterface === 'ollama') {
+    const ollama = createOllama()
+    const model = ollama(llmName)
+    return model as LanguageModel
+  }
   throw new Error(`API interface ${apiConfig.apiInterface} not supported.`)
 }
 

From b457e01f27e5299f9a5ebd1446a43a21e0cd746d Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 18:58:15 +0100
Subject: [PATCH 38/41] fix colors

---
 src/components/Chat/DatePicker.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Chat/DatePicker.tsx b/src/components/Chat/DatePicker.tsx
index 79a4981e..66dd4fb4 100644
--- a/src/components/Chat/DatePicker.tsx
+++ b/src/components/Chat/DatePicker.tsx
@@ -93,8 +93,8 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ from, to, onDateChang
             className={cn(
               'grow px-2 py-1 text-sm sm:grow-0',
               activeOption === option.value
-                ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-                : 'bg-background text-foreground hover:bg-secondary',
+                ? 'bg-bg-primary/90 text-primary-foreground hover:bg-primary/90'
+                : 'bg-secondary text-foreground hover:bg-secondary',
             )}
           >
             {option.label}

From f8054edfbb5e831848c2d8904ba7a16dbedb7f7a Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 22:00:07 +0100
Subject: [PATCH 39/41] fix back and forth

---
 src/components/TitleBar/NavigationButtons.tsx | 86 ++++++++-----------
 src/contexts/FileContext.tsx                  | 18 ++--
 src/contexts/WindowContentContext.tsx         | 26 ++++--
 src/contexts/hooks/use-ordered-set.tsx        | 39 +++++++++
 4 files changed, 108 insertions(+), 61 deletions(-)
 create mode 100644 src/contexts/hooks/use-ordered-set.tsx

diff --git a/src/components/TitleBar/NavigationButtons.tsx b/src/components/TitleBar/NavigationButtons.tsx
index 03322a5b..f34f0e7f 100644
--- a/src/components/TitleBar/NavigationButtons.tsx
+++ b/src/components/TitleBar/NavigationButtons.tsx
@@ -10,52 +10,56 @@ import { useWindowContentContext } from '@/contexts/WindowContentContext'
 
 const FileHistoryNavigator: React.FC = () => {
   const [showMenu, setShowMenu] = useState<string>('')
-  const [currentIndex, setCurrentIndex] = useState<number>(-1)
   const longPressTimer = useRef<NodeJS.Timeout | null>(null)
   const buttonRefBack = useRef<HTMLButtonElement>(null)
   const buttonRefForward = useRef<HTMLButtonElement>(null)
 
-  const { openContent: openTabContent } = useWindowContentContext()
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { navigationHistory, setNavigationHistory } = useFileContext()
+  const { openContent, currentOpenFileOrChatID } = useWindowContentContext()
+  const { navigationHistory } = useFileContext()
 
-  // useEffect(() => {
-  //   const handleFileSelect = (path: string) => {
-  //     const updatedHistory = [...navigationHistory.filter((val) => val !== path).slice(0, currentIndex + 1), path]
-  //     setNavigationHistory(updatedHistory)
-  //     setCurrentIndex(updatedHistory.length - 1)
-  //   }
-  //   if (currentTabID && currentTabID !== navigationHistory[currentIndex]) {
-  //     handleFileSelect(currentTabID)
-  //   }
-  // }, [currentTabID, navigationHistory, currentIndex, setNavigationHistory])
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent): void {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setShowMenu('')
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      // Unbind the event listener
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  })
+
+  if (!currentOpenFileOrChatID) {
+    return null
+  }
 
-  const canGoBack = currentIndex > 0
-  const canGoForward = currentIndex < navigationHistory.length - 1
+  const canGoBack = navigationHistory.length > 1
+  const indexOfCurrentOpenFileOrChat = navigationHistory.indexOf(currentOpenFileOrChatID)
+  const canGoForward = indexOfCurrentOpenFileOrChat < navigationHistory.length - 1
 
   const goBack = () => {
     if (canGoBack && showMenu === '') {
-      const newIndex = currentIndex - 1
-      setCurrentIndex(newIndex)
-      openTabContent(navigationHistory[newIndex])
+      const newIndex = indexOfCurrentOpenFileOrChat - 1
+      openContent(navigationHistory[newIndex], undefined, true)
       posthog.capture('file_history_navigator_back')
     }
   }
 
   const goForward = () => {
     if (canGoForward && showMenu === '') {
-      const newIndex = currentIndex + 1
-      setCurrentIndex(newIndex)
-      openTabContent(navigationHistory[newIndex])
+      const newIndex = indexOfCurrentOpenFileOrChat + 1
+      openContent(navigationHistory[newIndex], undefined, true)
       posthog.capture('file_history_navigator_forward')
     }
   }
 
-  const goSelected = (path: string): void => {
-    if (path) {
-      const newIndex = navigationHistory.indexOf(path)
-      setCurrentIndex(newIndex)
-      openTabContent(path)
+  const goSelected = (pathOrChatID: string): void => {
+    if (pathOrChatID) {
+      openContent(pathOrChatID, undefined, true)
       posthog.capture('file_history_navigator_go_to_selected_file')
     }
     setShowMenu('')
@@ -74,22 +78,6 @@ const FileHistoryNavigator: React.FC = () => {
     }
   }
 
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent): void {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setShowMenu('')
-      }
-    }
-    // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => {
-      // Unbind the event listener
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  })
-
   const handleHistoryContext = (currentRef: React.RefObject<HTMLButtonElement>) => {
     const offsetTop = currentRef.current?.offsetTop || 0
     const offsetLeft = currentRef.current?.offsetLeft || 0
@@ -97,8 +85,8 @@ const FileHistoryNavigator: React.FC = () => {
 
     const menuChild =
       currentRef.current?.id === 'back'
-        ? navigationHistory.slice(0, currentIndex)
-        : navigationHistory.slice(currentIndex + 1)
+        ? navigationHistory.slice(0, indexOfCurrentOpenFileOrChat)
+        : navigationHistory.slice(indexOfCurrentOpenFileOrChat + 1)
 
     return (
       showMenu !== '' &&
@@ -115,10 +103,10 @@ const FileHistoryNavigator: React.FC = () => {
           }}
         >
           <ul>
-            {menuChild.map((path) => (
-              <li key={path}>
-                <div key={path} onClick={() => goSelected(path)}>
-                  {removeFileExtension(path.replace(/\\/g, '/').split('/').pop() || '')}
+            {menuChild.map((pathOrChatID) => (
+              <li key={pathOrChatID}>
+                <div key={pathOrChatID} onClick={() => goSelected(pathOrChatID)}>
+                  {removeFileExtension(pathOrChatID.replace(/\\/g, '/').split('/').pop() || '')}
                 </div>
               </li>
             ))}
diff --git a/src/contexts/FileContext.tsx b/src/contexts/FileContext.tsx
index 8f692be3..406f5210 100644
--- a/src/contexts/FileContext.tsx
+++ b/src/contexts/FileContext.tsx
@@ -29,6 +29,7 @@ import '@/styles/tiptap.scss'
 import SearchAndReplace from '@/components/Editor/Search/SearchAndReplaceExtension'
 import getMarkdown from '@/components/Editor/utils'
 import welcomeNote from '@/components/File/utils'
+import useOrderedSet from './hooks/use-ordered-set'
 
 type FileContextType = {
   currentlyOpenFilePath: string | null
@@ -36,7 +37,7 @@ type FileContextType = {
   saveCurrentlyOpenedFile: () => Promise<void>
   editor: Editor | null
   navigationHistory: string[]
-  setNavigationHistory: React.Dispatch<React.SetStateAction<string[]>>
+  addToNavigationHistory: (value: string) => void
   openOrCreateFile: (filePath: string, optionalContentToWriteOnCreate?: string) => Promise<void>
   suggestionsState: SuggestionsState | null | undefined
   spellCheckEnabled: boolean
@@ -69,13 +70,19 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   const [spellCheckEnabled, setSpellCheckEnabled] = useState<boolean>(false)
   const [noteToBeRenamed, setNoteToBeRenamed] = useState<string>('')
   const [fileDirToBeRenamed, setFileDirToBeRenamed] = useState<string>('')
-  const [navigationHistory, setNavigationHistory] = useState<string[]>([])
+  // const [navigationHistory, setNavigationHistory] = useState<Set<string>>(new Set())
   const [currentlyChangingFilePath, setCurrentlyChangingFilePath] = useState(false)
   const [highlightData, setHighlightData] = useState<HighlightData>({
     text: '',
     position: null,
   })
 
+  const {
+    add: addToNavigationHistory,
+    remove: removeFromNavigationHistory,
+    values: navigationHistory,
+  } = useOrderedSet()
+
   useEffect(() => {
     const fetchSpellCheckMode = async () => {
       const storedSpellCheckEnabled = await window.electronStore.getSpellCheckMode()
@@ -241,9 +248,8 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       oldFilePath,
       newFilePath,
     })
-    const navigationHistoryUpdated = [...navigationHistory].map((path) => path.replace(oldFilePath, newFilePath))
-
-    setNavigationHistory(navigationHistoryUpdated)
+    removeFromNavigationHistory(oldFilePath)
+    addToNavigationHistory(newFilePath)
 
     if (currentlyOpenFilePath === oldFilePath) {
       setCurrentlyOpenFilePath(newFilePath)
@@ -285,7 +291,7 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
     saveCurrentlyOpenedFile,
     editor,
     navigationHistory,
-    setNavigationHistory,
+    addToNavigationHistory,
     openOrCreateFile,
     suggestionsState,
     spellCheckEnabled,
diff --git a/src/contexts/WindowContentContext.tsx b/src/contexts/WindowContentContext.tsx
index 22e5c2bd..83b05a68 100644
--- a/src/contexts/WindowContentContext.tsx
+++ b/src/contexts/WindowContentContext.tsx
@@ -5,10 +5,11 @@ import { useFileContext } from './FileContext'
 import { OnShowContextMenuData, ShowContextMenuInputType } from '@/components/Common/CustomContextMenu'
 
 interface WindowContentContextType {
-  openContent: (pathOrChatID: string, optionalContentToWriteOnCreate?: string) => void
+  openContent: (pathOrChatID: string, optionalContentToWriteOnCreate?: string, dontUpdateChatHistory?: boolean) => void
   focusedItem: OnShowContextMenuData
   showContextMenu: ShowContextMenuInputType
   hideFocusedItem: () => void
+  currentOpenFileOrChatID: string | null
 }
 
 const WindowContentContext = createContext<WindowContentContextType | undefined>(undefined)
@@ -30,12 +31,13 @@ export const WindowContentProvider: React.FC<WindowContentProviderProps> = ({ ch
     currentSelection: 'None',
     position: { x: 0, y: 0 },
   })
+  const [currentOpenFileOrChatID, setCurrentOpenFileOrChatID] = useState<string | null>(null)
 
   const { setCurrentOpenChatID, allChatsMetadata, setShowChatbot, setSidebarShowing } = useChatContext()
-  const { openOrCreateFile } = useFileContext()
+  const { openOrCreateFile, addToNavigationHistory } = useFileContext()
 
   const openContent = React.useCallback(
-    async (pathOrChatID: string, optionalContentToWriteOnCreate?: string) => {
+    async (pathOrChatID: string, optionalContentToWriteOnCreate?: string, dontUpdateChatHistory?: boolean) => {
       if (!pathOrChatID) return
       const chatMetadata = allChatsMetadata.find((chat) => chat.id === pathOrChatID)
       if (chatMetadata) {
@@ -46,10 +48,21 @@ export const WindowContentProvider: React.FC<WindowContentProviderProps> = ({ ch
         setSidebarShowing('files')
         openOrCreateFile(pathOrChatID, optionalContentToWriteOnCreate)
       }
+      setCurrentOpenFileOrChatID(pathOrChatID)
+      if (!dontUpdateChatHistory) {
+        addToNavigationHistory(pathOrChatID)
+      }
     },
-    [allChatsMetadata, setShowChatbot, setCurrentOpenChatID, setSidebarShowing, openOrCreateFile],
+    [
+      allChatsMetadata,
+      setShowChatbot,
+      setCurrentOpenChatID,
+      setSidebarShowing,
+      openOrCreateFile,
+      addToNavigationHistory,
+      setCurrentOpenFileOrChatID,
+    ],
   )
-
   const showContextMenu: ShowContextMenuInputType = React.useCallback(
     (event, locationOnScreen, additionalData = {}) => {
       event.preventDefault()
@@ -77,8 +90,9 @@ export const WindowContentProvider: React.FC<WindowContentProviderProps> = ({ ch
       focusedItem,
       showContextMenu,
       hideFocusedItem,
+      currentOpenFileOrChatID,
     }),
-    [openContent, focusedItem, showContextMenu, hideFocusedItem],
+    [openContent, focusedItem, showContextMenu, hideFocusedItem, currentOpenFileOrChatID],
   )
 
   return <WindowContentContext.Provider value={WindowContentContextMemo}>{children}</WindowContentContext.Provider>
diff --git a/src/contexts/hooks/use-ordered-set.tsx b/src/contexts/hooks/use-ordered-set.tsx
new file mode 100644
index 00000000..77b9d551
--- /dev/null
+++ b/src/contexts/hooks/use-ordered-set.tsx
@@ -0,0 +1,39 @@
+import { useState, useCallback } from 'react'
+
+// Custom hook for managing ordered set
+const useOrderedSet = (initialValues: string[] = []) => {
+  const [set, setSet] = useState(new Set(initialValues))
+
+  const add = useCallback((value: string) => {
+    setSet((prevSet) => {
+      const newSet = new Set(prevSet)
+      if (newSet.has(value)) {
+        newSet.delete(value)
+      }
+      newSet.add(value)
+      return newSet
+    })
+  }, [])
+
+  const remove = useCallback((value: string) => {
+    setSet((prevSet) => {
+      const newSet = new Set(prevSet)
+      newSet.delete(value)
+      return newSet
+    })
+  }, [])
+
+  const clear = useCallback(() => {
+    setSet(new Set())
+  }, [])
+
+  return {
+    set,
+    add,
+    remove,
+    clear,
+    values: Array.from(set),
+  }
+}
+
+export default useOrderedSet

From 3654b392f5b21d1c14cbd06f09d33d2b7722f3c7 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 22:20:55 +0100
Subject: [PATCH 40/41] deal with targz linux ollama download

---
 scripts/downloadOllama.js | 111 ++++++++++++--------------------------
 1 file changed, 33 insertions(+), 78 deletions(-)

diff --git a/scripts/downloadOllama.js b/scripts/downloadOllama.js
index dea94aeb..1e687565 100644
--- a/scripts/downloadOllama.js
+++ b/scripts/downloadOllama.js
@@ -3,6 +3,7 @@ const https = require("https");
 const os = require("os");
 const path = require("path");
 const AdmZip = require("adm-zip");
+const tar = require('tar');
 
 // Mapping of OS to binary info
 const binariesInfo = {
@@ -12,9 +13,9 @@ const binariesInfo = {
     binaryName: "ollama-darwin",
   },
   linux: {
-    url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-linux-amd64",
+    url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-linux-amd64.tgz",
     path: "../binaries/linux/",
-    binaryName: "ollama-linux-amd64",
+    binaryName: "ollama",
   },
   win32: {
     url: "https://github.com/ollama/ollama/releases/download/v0.3.12/ollama-windows-amd64.zip",
@@ -56,15 +57,14 @@ function removeDirectory(dirPath) {
   }
 }
 
-
-function downloadAndExtractZip(url, extractPath, redirectCount = 0, timeout = 1000000) {
+function downloadAndExtractArchive(url, extractPath, archiveType, redirectCount = 0, timeout = 1000000) {
   return new Promise((resolve, reject) => {
     if (redirectCount > 5) {
       reject(new Error("Too many redirects"));
       return;
     }
 
-    const tempPath = path.join(os.tmpdir(), 'ollama-temp.zip');
+    const tempPath = path.join(os.tmpdir(), `ollama-temp.${archiveType}`);
     const file = fs.createWriteStream(tempPath);
     let fileStream = null;
 
@@ -85,8 +85,23 @@ function downloadAndExtractZip(url, extractPath, redirectCount = 0, timeout = 10
           fileStream.close(() => {
             console.log('Download completed, extracting...');
             try {
-              const zip = new AdmZip(tempPath);
-              zip.extractAllTo(extractPath, true);
+              if (archiveType === 'zip') {
+                const zip = new AdmZip(tempPath);
+                zip.extractAllTo(extractPath, true);
+              } else if (archiveType === 'tgz') {
+                fs.createReadStream(tempPath)
+                  .pipe(tar.x({ C: extractPath }))
+                  .on('finish', () => {
+                    console.log('Extraction completed');
+                    fs.unlink(tempPath, (unlinkError) => {
+                      if (unlinkError) {
+                        console.error(`Failed to delete temporary file ${tempPath}: ${unlinkError.message}`);
+                      }
+                      resolve();
+                    });
+                  });
+                return;
+              }
               fs.unlink(tempPath, (unlinkError) => {
                 if (unlinkError) {
                   console.error(`Failed to delete temporary file ${tempPath}: ${unlinkError.message}`);
@@ -108,7 +123,7 @@ function downloadAndExtractZip(url, extractPath, redirectCount = 0, timeout = 10
                 resolve();
               });
             } catch (error) {
-              cleanupAndReject(new Error(`Failed to extract zip file: ${error.message}`));
+              cleanupAndReject(new Error(`Failed to extract archive: ${error.message}`));
             }
           });
         });
@@ -119,7 +134,7 @@ function downloadAndExtractZip(url, extractPath, redirectCount = 0, timeout = 10
               console.error(`Failed to delete temporary file ${tempPath}: ${unlinkError.message}`);
             }
             console.log(`Following redirect to: ${response.headers.location}`);
-            downloadAndExtractZip(response.headers.location, extractPath, redirectCount + 1, timeout)
+            downloadAndExtractArchive(response.headers.location, extractPath, archiveType, redirectCount + 1, timeout)
               .then(resolve)
               .catch(reject);
           });
@@ -146,70 +161,6 @@ function downloadAndExtractZip(url, extractPath, redirectCount = 0, timeout = 10
   });
 }
 
-function downloadFile(url, filePath, redirectCount = 0, timeout = 500000) {
-  return new Promise((resolve, reject) => {
-    if (redirectCount > 5) {
-      reject(new Error("Too many redirects"));
-      return;
-    }
-
-    const file = fs.createWriteStream(filePath);
-    let fileStream = null;
-
-    const cleanupAndReject = (error) => {
-      if (fileStream) fileStream.close();
-      fs.unlink(filePath, (unlinkError) => {
-        if (unlinkError) {
-          console.error(`Failed to delete incomplete file ${filePath}: ${unlinkError.message}`);
-        }
-        reject(error);
-      });
-    };
-
-    const request = https.get(url, (response) => {
-      console.log("making request to", url);
-      if (response.statusCode === 200) {
-        fileStream = response.pipe(file);
-        fileStream.on("finish", () => {
-          fileStream.close(() => {
-            console.log(`Downloaded to ${filePath}`);
-            resolve();
-          });
-        });
-      } else if (response.statusCode === 302 || response.statusCode === 301) {
-        file.close(() => {
-          fs.unlink(filePath, (unlinkError) => {
-            if (unlinkError) {
-              console.error(`Failed to delete redirect file ${filePath}: ${unlinkError.message}`);
-            }
-            console.log(`Following redirect to: ${response.headers.location}`);
-            downloadFile(response.headers.location, filePath, redirectCount + 1, timeout)
-              .then(resolve)
-              .catch(reject);
-          });
-        });
-      } else {
-        cleanupAndReject(new Error(`Failed to download: ${response.statusCode} ${response.statusMessage}`));
-      }
-    });
-
-    request.on("error", (error) => {
-      cleanupAndReject(new Error(`Network error during download: ${error.message}`));
-    });
-
-    request.on("timeout", () => {
-      request.destroy();
-      cleanupAndReject(new Error(`Download timed out after ${timeout}ms`));
-    });
-
-    request.setTimeout(timeout);
-
-    file.on("error", (error) => {
-      cleanupAndReject(new Error(`File system error: ${error.message}`));
-    });
-  });
-}
-
 async function downloadIfMissing(platformKey) {
   const info = binariesInfo[platformKey];
   const directoryPath = path.join(__dirname, info.path);
@@ -227,13 +178,17 @@ async function downloadIfMissing(platformKey) {
     console.log(`${platformKey} binary not found, downloading...`);
     try {
       if (platformKey === 'win32') {
-        await downloadAndExtractZip(info.url, directoryPath);
+        await downloadAndExtractArchive(info.url, directoryPath, 'zip');
         console.log('Windows binary downloaded and extracted');
+      } else if (platformKey === 'linux') {
+        await downloadAndExtractArchive(info.url, directoryPath, 'tgz');
+        console.log('Linux binary downloaded and extracted');
+        const extractedBinaryPath = path.join(directoryPath, 'bin', 'ollama');
+        await fs.promises.rename(extractedBinaryPath, filePath);
+        await setExecutable(filePath);
       } else {
-        await downloadFile(info.url, filePath);
-        if (platformKey !== "win32") {
-          await setExecutable(filePath);
-        }
+        await downloadAndExtractArchive(info.url, directoryPath, 'binary');
+        await setExecutable(filePath);
       }
     } catch (error) {
       console.error(`Error processing ${platformKey} binary:`, error.message);

From c960b1cbcbe7ddc7ffb630912558338d347cf486 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 28 Sep 2024 23:06:44 +0100
Subject: [PATCH 41/41] fix macos build

---
 scripts/downloadOllama.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/scripts/downloadOllama.js b/scripts/downloadOllama.js
index 1e687565..1b7f1c17 100644
--- a/scripts/downloadOllama.js
+++ b/scripts/downloadOllama.js
@@ -57,7 +57,7 @@ function removeDirectory(dirPath) {
   }
 }
 
-function downloadAndExtractArchive(url, extractPath, archiveType, redirectCount = 0, timeout = 1000000) {
+function downloadAndExtractArchive(fileUrl, extractPath, archiveType, binaryName, redirectCount = 0, timeout = 1000000) {
   return new Promise((resolve, reject) => {
     if (redirectCount > 5) {
       reject(new Error("Too many redirects"));
@@ -78,7 +78,7 @@ function downloadAndExtractArchive(url, extractPath, archiveType, redirectCount
       });
     };
 
-    const request = https.get(url, (response) => {
+    const request = https.get(fileUrl, (response) => {
       if (response.statusCode === 200) {
         fileStream = response.pipe(file);
         fileStream.on('finish', () => {
@@ -101,6 +101,12 @@ function downloadAndExtractArchive(url, extractPath, archiveType, redirectCount
                     });
                   });
                 return;
+              } else if (archiveType === 'binary') {
+                const destinationPath = path.join(extractPath, binaryName);
+                fs.renameSync(tempPath, destinationPath);
+                console.log(`Binary file moved to ${destinationPath}`);
+                resolve();
+                return;
               }
               fs.unlink(tempPath, (unlinkError) => {
                 if (unlinkError) {
@@ -134,7 +140,7 @@ function downloadAndExtractArchive(url, extractPath, archiveType, redirectCount
               console.error(`Failed to delete temporary file ${tempPath}: ${unlinkError.message}`);
             }
             console.log(`Following redirect to: ${response.headers.location}`);
-            downloadAndExtractArchive(response.headers.location, extractPath, archiveType, redirectCount + 1, timeout)
+            downloadAndExtractArchive(response.headers.location, extractPath, archiveType, binaryName, redirectCount + 1, timeout)
               .then(resolve)
               .catch(reject);
           });
@@ -178,16 +184,17 @@ async function downloadIfMissing(platformKey) {
     console.log(`${platformKey} binary not found, downloading...`);
     try {
       if (platformKey === 'win32') {
-        await downloadAndExtractArchive(info.url, directoryPath, 'zip');
+        await downloadAndExtractArchive(info.url, directoryPath, 'zip', info.binaryName);
         console.log('Windows binary downloaded and extracted');
       } else if (platformKey === 'linux') {
-        await downloadAndExtractArchive(info.url, directoryPath, 'tgz');
+        await downloadAndExtractArchive(info.url, directoryPath, 'tgz', info.binaryName);
         console.log('Linux binary downloaded and extracted');
         const extractedBinaryPath = path.join(directoryPath, 'bin', 'ollama');
         await fs.promises.rename(extractedBinaryPath, filePath);
         await setExecutable(filePath);
-      } else {
-        await downloadAndExtractArchive(info.url, directoryPath, 'binary');
+      } else if (platformKey === 'darwin') {
+        await downloadAndExtractArchive(info.url, directoryPath, 'binary', info.binaryName);
+        console.log('macOS binary downloaded');
         await setExecutable(filePath);
       }
     } catch (error) {